Skip to content

Instantly share code, notes, and snippets.

@theill
Created March 25, 2011 21:09
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 theill/887630 to your computer and use it in GitHub Desktop.
Save theill/887630 to your computer and use it in GitHub Desktop.
welcome!
<input type="text" x-webkit-speech />
<style type="text/css" media="screen">
#pit-handbook {}
#pit-handbook ol {
margin: 0;
padding: 0;
}
#pit-handbook ol ol {
padding: 0 0 20px 10px;
}
#pit-handbook span {
font-weight: bold;
}
#pit-handbook ol li {
margin: 0;
list-style-type: none;
}
#pit-handbook li.collapsed ol {
display: none;
}
#pit-handbook li span {
cursor: pointer;
}
</style>
<script type="text/javascript" charset="utf-8">
var items = [{"GroupName":"Category 1"},{"GroupName":"Category 1","ItemID":14,"ItemName":"Test1"},{"GroupName":"Category 1","ItemID":17,"ItemName":"Test4"},{"GroupName":"Category 1","ItemID":18,"ItemName":"Test56"},{"GroupName":"Category 1","ItemID":14,"ItemName":"Test1","ItemContent":"\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in dui vitae risus blandit sollicitudin sed ac dolor. In hac habitasse platea dictumst. Etiam nec nibh velit. Sed auctor molestie augue tempor viverra. Aenean turpis eros, tristique non aliquam tempor, porta et dolor. Donec ullamcorper commodo erat et porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nullam eget est ut tellus ultricies lacinia imperdiet vitae neque. Etiam ligula mi, faucibus eget scelerisque ac, pellentesque eu diam. Morbi sed mollis tellus. Fusce quis lectus diam. In ac sapien erat.\u003c/p\u003e\r\n\u003cp\u003ePellentesque non leo vitae sem consectetur convallis eget non massa. Curabitur malesuada, metus a rutrum vehicula, elit erat accumsan nisl, sit amet faucibus odio nulla eget est. Ut quis tellus vel nibh hendrerit faucibus. Donec augue felis, eleifend non elementum id, dignissim et augue. Donec posuere magna eu eros iaculis eu sollicitudin purus consequat. Etiam mollis dolor et velit auctor vestibulum. Donec facilisis scelerisque tellus eleifend congue. Vivamus dapibus consequat eros vel mattis. Maecenas id nunc ante, a lobortis urna. Nam non mi id velit gravida sodales. \u003c/p\u003e\r\n\u003cdiv\u003e\u003c/div\u003e"},{"GroupName":"Category 1","ItemID":17,"ItemName":"Test4","ItemContent":"\u003cdiv\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in dui vitae risus blandit sollicitudin sed ac dolor. In hac habitasse platea dictumst. Etiam nec nibh velit. Sed auctor molestie augue tempor viverra. Aenean turpis eros, tristique non aliquam tempor, porta et dolor. Donec ullamcorper commodo erat et porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nullam eget est ut tellus ultricies lacinia imperdiet vitae neque. Etiam ligula mi, faucibus eget scelerisque ac, pellentesque eu diam. Morbi sed mollis tellus. Fusce quis lectus diam. In ac sapien erat.\u003c/div\u003e\r\n\u003cdiv\u003ePellentesque non leo vitae sem consectetur convallis eget non massa. Curabitur malesuada, metus a rutrum vehicula, elit erat accumsan nisl, sit amet faucibus odio nulla eget est. Ut quis tellus vel nibh hendrerit faucibus. Donec augue felis, eleifend non elementum id, dignissim et augue. Donec posuere magna eu eros iaculis eu sollicitudin purus consequat. Etiam mollis dolor et velit auctor vestibulum. Donec facilisis scelerisque tellus eleifend congue. Vivamus dapibus consequat eros vel mattis. Maecenas id nunc ante, a lobortis urna. Nam non mi id velit gravida sodales. \u003c/div\u003e"},{"GroupName":"Category 1","ItemID":18,"ItemName":"Test56","ItemContent":"\u003cdiv\u003easfasaga\u003c/div\u003e"},{"GroupName":"Category 2"},{"GroupName":"Category 2","ItemID":15,"ItemName":"Test2"},{"GroupName":"Category 2","ItemID":15,"ItemName":"Test2","ItemContent":"\u003cdiv\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in dui vitae risus blandit sollicitudin sed ac dolor. In hac habitasse platea dictumst. Etiam nec nibh velit. Sed auctor molestie augue tempor viverra. Aenean turpis eros, tristique non aliquam tempor, porta et dolor. Donec ullamcorper commodo erat et porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nullam eget est ut tellus ultricies lacinia imperdiet vitae neque. Etiam ligula mi, faucibus eget scelerisque ac, pellentesque eu diam. Morbi sed mollis tellus. Fusce quis lectus diam. In ac sapien erat.\u003c/div\u003e\r\n\u003cdiv\u003ePellentesque non leo vitae sem consectetur convallis eget non massa. Curabitur malesuada, metus a rutrum vehicula, elit erat accumsan nisl, sit amet faucibus odio nulla eget est. Ut quis tellus vel nibh hendrerit faucibus. Donec augue felis, eleifend non elementum id, dignissim et augue. Donec posuere magna eu eros iaculis eu sollicitudin purus consequat. Etiam mollis dolor et velit auctor vestibulum. Donec facilisis scelerisque tellus eleifend congue. Vivamus dapibus consequat eros vel mattis. Maecenas id nunc ante, a lobortis urna. Nam non mi id velit gravida sodales. \u003c/div\u003e"},{"GroupName":"Category 3"},{"GroupName":"Category 3","ItemID":16,"ItemName":"Test3"},{"GroupName":"Category 3","ItemID":16,"ItemName":"Test3","ItemContent":"\u003cdiv\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in dui vitae risus blandit sollicitudin sed ac dolor. In hac habitasse platea dictumst. Etiam nec nibh velit. Sed auctor molestie augue tempor viverra. Aenean turpis eros, tristique non aliquam tempor, porta et dolor. Donec ullamcorper commodo erat et porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nullam eget est ut tellus ultricies lacinia imperdiet vitae neque. Etiam ligula mi, faucibus eget scelerisque ac, pellentesque eu diam. Morbi sed mollis tellus. Fusce quis lectus diam. In ac sapien erat.\u003c/div\u003e\r\n\u003cdiv\u003ePellentesque non leo vitae sem consectetur convallis eget non massa. Curabitur malesuada, metus a rutrum vehicula, elit erat accumsan nisl, sit amet faucibus odio nulla eget est. Ut quis tellus vel nibh hendrerit faucibus. Donec augue felis, eleifend non elementum id, dignissim et augue. Donec posuere magna eu eros iaculis eu sollicitudin purus consequat. Etiam mollis dolor et velit auctor vestibulum. Donec facilisis scelerisque tellus eleifend congue. Vivamus dapibus consequat eros vel mattis. Maecenas id nunc ante, a lobortis urna. Nam non mi id velit gravida sodales. \u003c/div\u003e"}];
var PitHandbook = {
toggle: function() {
$(this).parent().toggleClass("collapsed");
return false;
},
buildSectionsForChapter: function(chapterName) {
var sections = $.richArray.unique($.map($(items), function(e, i) {
return (e.GroupName == chapterName && e.ItemName != undefined && e.ItemContent == undefined) ? e.ItemName : null;
}));
var sectionElements = $.richArray.map(sections, function(e, i) {
return "<li class=\"collapsed\"><span>" + e + "</span>" + PitHandbook.buildTextForSection(chapterName, e) + "</li>";
}).join("");
return "<ol class=\"sections\">" + sectionElements + "</ol>";
},
buildTextForSection: function(chapterName, sectionName) {
var texts = $.richArray.filter(items, function(e) {
return e.GroupName == chapterName && e.ItemName == sectionName && e.ItemContent != undefined;
});
return "<ol class=\"texts\"><li class=\"collapsed\">" + texts[0].ItemContent + "</li></ol>";
// return "<ol class=\"texts\">" + $.richArray.map(texts, function(e, i) {
// return "<li class=\"collapsed\"><span>" + e.ItemContent + "</span></li>"; }).join("") + "</ol>";
}
}
$(document).ready(function() {
// pick only top level groups (called chapters)
var chapters = $.richArray.unique($.map($(items), function(e, i) {
return (e.ItemID != undefined) ? e.GroupName : null;
}));
var chapterElements = $.map(chapters, function(e, i) {
return "<li class=\"collapsed\"><span>" + e + "</span>" + PitHandbook.buildSectionsForChapter(e) + "</li>";
}).join("");
$("#pit-handbook").append("<ol class=\"chapters\">" + chapterElements + "</ol>");
$("#pit-handbook li span").live("click", PitHandbook.toggle);
});
</script>
<div id="pit-handbook">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment