Last active
April 18, 2017 04:58
-
-
Save diggetybo/dff9e4ee397a8772a7f3a6ef369aaba2 to your computer and use it in GitHub Desktop.
Mix and Match System
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <head> | |
| <style> | |
| text { | |
| font-family: Play; | |
| } | |
| form .s1 { | |
| position: absolute; | |
| top:180px; | |
| left:55px; | |
| } | |
| *:focus { | |
| outline:none; | |
| } | |
| button { | |
| position:absolute; | |
| background: none; | |
| border: none; | |
| color:darkgray; | |
| } | |
| button.b1 { | |
| top:225px; | |
| left:160px; | |
| } | |
| button.b2 { | |
| top:295px; | |
| left:160px; | |
| } | |
| button.b3 { | |
| top:365px; | |
| left:160px; | |
| } | |
| select { | |
| background: #404040; | |
| color:#ffffff; | |
| } | |
| select option:checked:after { | |
| background:#ffffff; | |
| color:#404040; | |
| } | |
| </style> | |
| </head> | |
| <form> | |
| <select id='choose' class='s1'></select> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <body> | |
| <script> | |
| var margins = {top:200, right:80, bottom:30, left:50}; | |
| var width = 500; | |
| var height = 500; | |
| var totalWidth = width + margins.left + margins.right; | |
| var totalHeight = height + margins.top + margins.bottom; | |
| var options = [ | |
| 'Add Text', | |
| 'A', | |
| 'B', | |
| 'C' | |
| ]; | |
| d3.select('#choose') | |
| .on('change', addText) | |
| .selectAll('option') | |
| .data(options) | |
| .enter().append('option') | |
| .attr('value', function(d) {return d;}) | |
| .text(function(d) {return d; }); | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', totalWidth) | |
| .attr('height', totalHeight); | |
| var graphGroup = svg.append('g') | |
| .attr('transform', 'translate(' + margins.left +','+margins.top+ ')'); | |
| svg.append('text') | |
| .text('Mix and Match Text') | |
| .attr('font-weight','bold') | |
| .attr('x',15) | |
| .attr('y',60) | |
| .attr('font-size','24px'); | |
| var count = 0; | |
| var intCount = 0; | |
| function addText() { | |
| var chooseSel = document.getElementById('choose'); | |
| var choice = chooseSel.options[ | |
| chooseSel.selectedIndex].value; | |
| if (d3.selectAll('.'+choice+'1').empty()==true) { | |
| graphGroup.append('text') | |
| .text(choice) | |
| .style('text-align', 'center') | |
| .attr('class',choice+'1') | |
| .attr('opacity',0) | |
| .transition() | |
| .duration(300) | |
| .attr('opacity',1) | |
| .attr('y',(100*(count+0.42))) | |
| .attr('fill','#404040') | |
| .attr('font-weight','bold') | |
| .attr('font-size','50px'); | |
| d3.select('body').append('button') | |
| .text('X') | |
| .attr('class','b'+(intCount+1)) | |
| .on('click', function() { | |
| var t = d3.select(this).attr('id'); | |
| var c = d3.select(this).attr('class'); | |
| var h = this.offsetTop; | |
| var thisChoice = choice; | |
| d3.selectAll('.'+thisChoice+'1').remove(); | |
| d3.selectAll('.'+c).remove(); | |
| intCount -= 1; | |
| count -= .7; | |
| // if (there are any text elements that have a h greater than current h (meaning they are vertically lower)) | |
| if (h<=225) { | |
| console.log(h) | |
| //selectAll(only select the text that is vertically lower than the current h) | |
| graphGroup.selectAll('text') | |
| .transition() | |
| .duration(250) | |
| .attr('y', (h-184)); | |
| //likewise only select the buttons lower than current h | |
| d3.selectAll('button') | |
| .attr('top', h-184) | |
| .attr('transform', 'translate('+0+','+ (h-184)+')'); | |
| } | |
| }); | |
| intCount += 1; | |
| count += .7; | |
| } | |
| else { | |
| graphGroup.append('text') | |
| .text(options[chooseSel.selectedIndex]+ ' is already a selected item.') | |
| .attr('y', (100*(count+.052))) | |
| .attr('font-size', '30px') | |
| .style('opacity',1) | |
| .transition() | |
| .delay(2000) | |
| .duration(1000) | |
| .style('opacity',0) | |
| .remove(); | |
| chooseSel.selectedIndex = 'Add Text'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment