Skip to content

Instantly share code, notes, and snippets.

@ptbrowne

ptbrowne/menufromjson.html

Created October 28, 2012 18:03
Show Gist options
  • Save ptbrowne/3969313 to your computer and use it in GitHub Desktop.
Save ptbrowne/3969313 to your computer and use it in GitHub Desktop.
Download ZIP
generation of menu from json file (html part)
Raw
menufromjson.html
<html>
<head>
<title>Menu from Json</title>
<script src="../../lib/jquery-1.7.2.js"></script>
<script src="../../lib/bootstrap/js/bootstrap.js"></script>
<link href="../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin:20px;
}
.span3, .span6 {
background:rgba(200, 200, 200, 0.5);
border-radius: 5px;
}
/*
disabling the bullets and putting the triangles
thanks to pseudo elements before and after
*/
li { list-style-type: none;}
li.closed:before, li.opened:before {
border-radius: 3px;
padding:0 3px;
width:10px;
height:10px;
font-size:0.8em;
color:#08F;
}
.fleche { padding-right : 3px; }
.opened .fleche:before {content : "▾"; }
.closed .fleche:before {content : "▸"; }
ul { margin-left: 18px;}
/*
closed li (li.closed) direct (>) ul children are not visible
*/
li.closed>ul {
display: none;
}
</style>
</head>
<body>
<div class="row-fluid">
<div id="frame1" class="frame span6">
<div class="row-fluid">
<div class="span6">
<ul class="menu"></ul>
</div>
<div class="span6">
<div class="content"></div>
</div>
</div>
</div>
<div id="frame2" class="frame span6">
<div class="row-fluid">
<div class="span6">
<ul class="menu"></ul>
</div>
<div class="span6">
<div class="content"></div>
</div>
</div>
</div>
</div>
<script src="menufromjson.js"></script>
</body>
</html>
Raw
menufromjson.js
var data = [
{
"_main_frame": "Welcome to the main frame of OLD menu",
"content sources": {
"_main_frame": "<div>a raw html snippet</div>",
"first subsection": {
"_main_frame" : "blabi",
"subsub" : {"_main_frame" : "subsubtext"},
"subsub2" : {"_main_frame" : "subsubtext2"},
"_leaf" : {}
}
},
"security equipment":{},
"seach results": {},
"server administration": {}
},
{
"_main_frame": "Welcome to the main frame of the NEW menu",
"content sources": {
"_main_frame": "yeah, you are in the section content sources",
"http crawl": { "_main_frame" : "blabi"}
},
"crawling": {
"first subsection": {
"_main_frame" : "blabi",
"subsub" : {"_main_frame" : "subsubtext"},
"subsub2" : {"_main_frame" : "subsubtext2"},
"_leaf" : {}
}
},
"indexing": {},
"cluster": {},
"server administration": {}
}
];
var is_path = function (obj) {
return obj[0] == "-";
}
var is_id = function (obj) {
return obj.search("__") === 0;
}
var get_path = function($node) {
return $node.attr("class").split(" ").filter(is_path)[0];
}
var get_id = function($node) {
return $node.attr("class")
.split(" ")
.filter(is_id)[0];
}
// get the path of the element in the class
// toggle the two nodes that have the same path
var on_click_node = function (ev) {
var identifier = get_id($(this).parent());
$same_id_nodes = $("." + identifier);
// we close every open other li (every li apart from the one the anchor
// is included in)
$other_liopened = $(".opened").not($(this).parent());
$other_liopened.toggleClass("opened", false);
$other_liopened.toggleClass("closed", true);
for (var i=0; i<$same_id_nodes.length; i++) {
toggle_node($same_id_nodes[i]);
}
}
var beautiful_path = function (uglypath) {
return "/" + uglypath.split("-").filter(function(x) { return x != ""}).join("/")
}
// open the submenu and display the content in the right frame
var toggle_node = function (node) {
var $node = $(node),
path = get_path($node);
if ($node.hasClass("closed")) {
$node.parents('.frame')
.find(".content")
.html("<h6>" + beautiful_path(path) + "</h6>" + $node.data("content"));
}
$node.toggleClass("opened closed");
var $liparents = $node.parents("li");
$liparents.toggleClass("opened", true);
$liparents.toggleClass("closed", false);
}
// get the content from the children and return an array of jquery objects
var get_children_content = function(node, nodename, level) {
var content = [],
title = $("<h" + level + ">"),
paragraph = $("<p>");
title.text(nodename)
content.push(title);
content.push(paragraph);
var main_frame = node._main_frame || "no description";
paragraph.text(main_frame);
for (var subnodename in node) {
if (subnodename[0] == "_")
continue
var subnode = node[subnodename],
children_content = get_children_content(subnode, subnodename, level + 1);
content = content.concat(children_content);
}
return content;
}
var get_html_children_content = function(node, nodename) {
var $dummy = $("<div>"),
children_content = get_children_content(node, nodename, 3);
for (var i=0; i<children_content.length; i++)
$dummy.append(children_content[i])
var html = $dummy.html();
return html;
}
var $ul = $("<ul>"),
$li = $("<li>"),
$a = $("<a>"),
$span = $("<span>");
var build_node = function (name, content, path) {
path = path || "-";
var li = $li.clone().addClass("closed"),
ul = $ul.clone(),
a = $a.clone()
.attr("href", "#")
.click(on_click_node)
.text(name),
fleche = $span.clone().addClass("fleche");
a.prepend(fleche);
li.append(a);
// computing id by concatening the name of the ancestors
// like a path. store it in the class
var absolute_path = path + name.replace(" ", "_") + "-";
li.addClass(absolute_path);
li.addClass("__" + name.replace(" ", "_"));
// if it's not a leaf, we build the subnodes and add it to the list
if (!("_leaf" in content)) {
li.data("content", content["_main_frame"] || "no description");
for (var subname in content) {
if (subname[0] != "_") {
subcontent = content[subname];
ul.append(build_node(subname, subcontent, absolute_path));
}
}
}
// else we have to concatenate the children content into the data of the leaf
else {
li.data("content", get_html_children_content(content, name))
}
// UGLY UGLY NOT VERY CONSISTENT
if (name == "")
return ul
// END UGLY
li.append(ul);
return li;
}
$("#frame1 .menu").append(build_node("", data[0]));
$("#frame2 .menu").append(build_node("", data[1]));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment