Skip to content

Instantly share code, notes, and snippets.

@johnburnmurdoch
Last active September 24, 2015 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnburnmurdoch/342fd74af215fb670a0d to your computer and use it in GitHub Desktop.
Save johnburnmurdoch/342fd74af215fb670a0d to your computer and use it in GitHub Desktop.
Ceci n'est pas un dropdown
<!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