Last active
September 24, 2015 18:06
-
-
Save johnburnmurdoch/342fd74af215fb670a0d to your computer and use it in GitHub Desktop.
Ceci n'est pas un dropdown
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> | |
<head> | |
<title>Ceci n'est pas un dropdown</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style media="screen"> | |
body{background-color:#fff1e0;font-size:16px;font-family:sans-serif;} | |
#container{width:100%;height:100%;min-height:500px;} | |
.ceci-nest-pas-un-dropdown{background-color:#e9decf;cursor:pointer;position:relative;font-size:14px;padding:1px 8px 3px 8px;border-radius:10px;border:1px solid #cec6b9;} | |
.ceci-nest-pas-un-dropdown:hover{background-color:#cec6b9;} | |
.ces-ne-sont-pas-des-options{border-radius:5px;background-color:#FFFCF7;position:absolute;padding:5px;} | |
.ces-ne-sont-pas-des-options p{padding:5px;border-radius:5px;-webkit-margin-before:5px;-webkit-margin-after:5px;cursor:pointer;} | |
.ces-ne-sont-pas-des-options p:nth-of-type(1){-webkit-margin-before:5px;} | |
.ces-ne-sont-pas-des-options p:nth-last-of-type(1){-webkit-margin-after:5px;} | |
.ces-ne-sont-pas-des-options p:hover{background-color:#FFF7EC;transition:0.3s;} | |
#container > p{max-width:350px;padding:10px;line-height:21px;} | |
</style> | |
<body> | |
<div id="container"> | |
<p>Here is a paragraph containing some <span id='a1' class='ceci-nest-pas-un-dropdown'>awesome spans that mimic dropdowns</span> which you can click on to bring up a list of possible replacements</p> | |
<p>Here is a second paragraph containing <span id='a2' class='ceci-nest-pas-un-dropdown'>plusieurs spans qui mimic des dropdowns</span> which you can click on to bring up a list of possible replacements</p> | |
</div> | |
<script charset="utf-8" type="text/javascript"> | |
d3.select("#container").on("click",function(){ | |
d3.select(".ces-ne-sont-pas-des-options").remove(); | |
d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){ dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this)); | |
d3.event.stopPropagation(); | |
}); | |
}) | |
var optionsData = [["awesome spans that mimic dropdowns","impostors claiming to be dropdowns","words and stuff"],["first thing","second thing","third thing"]]; | |
var functionsData = [[ | |
function(){console.log("First par, function 1")}, | |
function(){console.log("First par, function 2")}, | |
function(){console.log("First par, function 3")}, | |
],[ | |
function(){console.log("Second par, function 1")}, | |
function(){console.log("Second par, function 2")}, | |
function(){console.log("Second par, function 3")}, | |
]]; | |
function dropIt(elNum,coords){ | |
var a1 = d3.select("#a" + elNum); | |
// alert(d3.mouse(this)) | |
var optionHolder = d3.select("#container").append("div") | |
.on("click",function(){ | |
d3.event.stopPropagation(); | |
}) | |
.attr({ | |
'class':'ces-ne-sont-pas-des-options' | |
}) | |
.style({ | |
'left':(coords[0]) + 'px', | |
'top':(coords[1] + a1.node().offsetTop) + 'px' | |
}); | |
var notOptions = optionHolder.selectAll("p.not-an-option").data(optionsData[(+elNum)-1]).enter().append('p').html(function(d,i){return d}); | |
d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){ | |
d3.event.preventDefault(); | |
d3.event.stopPropagation(); | |
}); | |
notOptions.on("click",function(d,i){ | |
functionsData[(+elNum)-1][i](); | |
a1.html(d); | |
optionHolder.remove(); | |
d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){ | |
dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this)); | |
d3.event.stopPropagation(); | |
}); | |
}); | |
} | |
d3.selectAll(".ceci-nest-pas-un-dropdown").on("click",function(d,i){ dropIt(d3.select(this).attr("id").substring(1,2),d3.mouse(this)); | |
d3.event.stopPropagation(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment