Skip to content

Instantly share code, notes, and snippets.

@johnwahba
Last active December 27, 2015 19:29
Show Gist options
  • Save johnwahba/7377716 to your computer and use it in GitHub Desktop.
Save johnwahba/7377716 to your computer and use it in GitHub Desktop.
Everlane files
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body></body>
<script src="frontend.js"></script>
<script src="frontendDev.js"></script>
</html>
tree = {
"topLevelItems": ["1", "2", "3", "4"],
"items": {
"1": {
"parent": null,
"title": "Books",
"children": ["11", "12", "13"]
},
"11": {
"parent": "1",
"title": "Fiction",
"children": ["111", "112", "113"]
},
"111": {
"parent": "11",
"title": "Classic",
"children": ["1111", "1112"]
},
"1111": {
"parent": "111",
"title": "Copyrighted"
},
"1112": {
"parent": "111",
"title": "Public Domain"
},
"112": {
"parent": "11",
"title": "Science Fiction"
},
"113": {
"parent": "11",
"title": "Thriller"
},
"12": {
"parent": "1",
"title": "Non-Fiction",
"children": ["121", "122", "123"]
},
"121": {
"parent": "12",
"title": "How To",
"description": "See also: 231, 122."
},
"122": {
"parent": "12",
"title": "Reference"
},
"123": {
"parent": "12",
"title": "True Crime"
},
"13": {
"parent": "1",
"title": "Other"
},
"2": {
"parent": null,
"title": "Cars",
"children": ["21", "22", "23"]
},
"21": {
"parent": "2",
"title": "Sedans",
"children": ["211", "212"]
},
"211": {
"parent": "21",
"title": "Accord"
},
"212": {
"parent": "21",
"title": "Camry"
},
"22": {
"parent": "2",
"title": "Trucks"
},
"23": {
"parent": "2",
"title": "Other",
"children": ["231", "232"]
},
"231": {
"parent": "21",
"title": "Repair manuals",
"description": "See also: 121."
},
"232": {
"parent": "21",
"title": "Tools",
"description": "See also: 41."
},
"3": {
"parent": null,
"title": "Trains",
"children": ["31", "32"]
},
"31": {
"parent": "3",
"title": "Big ones"
},
"32": {
"parent": "3",
"title": "Small ones"
},
"4": {
"parent": null,
"title": "Tools",
"children": ["41", "42", "43"]
},
"41": {
"parent": "4",
"title": "Automotive",
"children": ["411", "412", "413"]
},
"411": {
"parent": "41",
"title": "Other",
"children": ["4111", "4112", "4113"]
},
"4111": {
"parent": "411",
"title": "Widgets",
"children": ["41111", "41112"]
},
"41111": {
"parent": "4111",
"title": "Wamwozzles"
},
"41112": {
"parent": "4111",
"title": "Wunkles",
"description": "Check out 41111, too."
},
"4112": {
"parent": "411",
"title": "Whatchamahoozers"
},
"4113": {
"parent": "411",
"title": "Beeps"
},
"412": {
"parent": "41",
"title": "Spanners"
},
"413": {
"parent": "41",
"title": "Wrenches"
},
"42": {
"parent": "4",
"title": "Metal"
},
"43": {
"parent": "4",
"title": "Woodworking"
}
}
}
(function(){
var nodes = Object.keys(tree.items);
var toAppend = "";
toAppend += "<select id='level' class='dropdown'> <option value=''></option>";
for(var j = 0; j < tree.topLevelItems.length; j++){
toAppend += "<option value='" + tree.topLevelItems[j] + "'>" + tree.items[tree.topLevelItems[j]].title + "</option>";
}
toAppend += "</select>";
for(var i = 0; i < nodes.length; i++ ){
var children = tree.items[nodes[i]].children;
if (children){
toAppend += "<select id='level" + nodes[i] + "' class='dropdown'> <option value=''></option>";
for(var j = 0; j < children.length; j++){
toAppend += "<option value='" + children[j] + "'>" + tree.items[children[j]].title + "</option>";
}
toAppend += "</select>";
}
}
$('body').append(toAppend);
var setCategory = function(event){
var selected = $(event.target).val().split("");
$('.dropdown').hide();
$('#level').show();
for ( var i = 0 ; i <= selected.length; i++ ){
var dropdown = $("#level" + selected.slice(0,i).join(""));
console.log(dropdown);
dropdown.show();
}
}
$('.dropdown').on("change", function(event){setCategory(event)});
$('.dropdown').hide();
$('#level').show();
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment