Last active
August 29, 2015 14:15
-
-
Save tonyfast/429f38bad9598599b21e to your computer and use it in GitHub Desktop.
webpage as YAML parsed by d3 and Handlebars
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
| type: document | |
| children: | |
| - heading: Dog Pound | |
| children: | |
| - heading: dirty | |
| type: 'testing' | |
| content: > | |
| This will be so cool if it works | |
| - heading: lildog | |
| type: 'gallery' | |
| img: | |
| - url: http://lorempixel.com/200/200/ | |
| - url: http://news.bbcimg.co.uk/media/images/81068000/jpg/_81068572_81068571.jpg | |
| - heading: Hot Air Ballon | |
| children: | |
| - heading: Fear | |
| children: | |
| - heading: falling | |
| - heading: Santa | |
| type: 'testing' | |
| content: > | |
| There are many variations of passages of Lorem I psum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. | |
| - heading: The Restroom in Public | |
| - heading: o | |
| - heading: heights | |
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
| <!-- | |
| Hierarchally open a structured webpage | |
| --> | |
| <script src="//cdn.jsdelivr.net/g/d3js,coffeescript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.2.6/js-yaml.min.js"></script> | |
| <style> | |
| @import "http://bootswatch.com/yeti/bootstrap.min.css"; | |
| </style> | |
| <script type="text/coffeescript"> | |
| d3.text 'document.yaml', (d) -> | |
| d = jsyaml.load d | |
| t = d3.layout.tree() | |
| numlayers = | |
| d3.max t.nodes(d), (d) -> | |
| return d.depth | |
| #{ d3 to preprocess hierarchy} | |
| root = t(d)[0].children | |
| nav = d3.select 'body' | |
| .append 'div' | |
| .classed 'navigator': true | |
| d3.select 'body' | |
| .append 'div' | |
| .classed 'viewer': true | |
| .text 'Begin by clicking the bolds words at the top. A few will reveal a special view.' | |
| colors = d3.scale.category20() | |
| update = (indexes) -> | |
| _d = root | |
| section = nav.selectAll '.section' | |
| .data indexes | |
| .call (s)-> | |
| ### | |
| Initialize the layers | |
| --- | |
| Add nodes to layers onclick | |
| Default to first element | |
| ### | |
| s.enter() | |
| .append 'ul' | |
| .classed 'section', true | |
| .classed 'nav', true | |
| .classed 'nav-pills', true | |
| .classed 'nav-justified', true | |
| .style 'border-color', (d,i) -> | |
| colors(i*2) | |
| #{ section style here} | |
| s.exit() | |
| .remove() | |
| section.each (index, layer) -> | |
| ### | |
| Add nodes to each section or layer in the depth of the hierarchy | |
| ### | |
| node = d3.select this | |
| .selectAll '.node' | |
| #{ initialize current children as empty } | |
| c=[] | |
| if index != null | |
| #{ if children exist } | |
| if _d[index].hasOwnProperty('children') | |
| c = _d | |
| _d = _d[index].children | |
| c | |
| else | |
| #{ this is a leaf in the tree } | |
| c = _d | |
| #{ append children to node} | |
| node = node.data c | |
| .call (s) -> | |
| #{ add divs when needed } | |
| s.enter() | |
| .append 'li' | |
| .classed 'node',true | |
| .attr 'role', 'presentation' | |
| .append 'a' | |
| .style 'color', 'black' | |
| .style 'font-size', '30px' | |
| .style 'font-weight', 'bold' | |
| s.exit() | |
| .remove() | |
| #{ set html properties } | |
| node.each (d,i) -> | |
| nd = d3.select this | |
| nd.select 'a' | |
| .text d.heading | |
| .call (s) -> | |
| s.append 'span' | |
| .classed 'badge': false | |
| .text null | |
| .on 'click', ()-> | |
| #{ update indices in section to traverse tree} | |
| n = indexes | |
| n = n.slice( 0, layer) | |
| if d.hasOwnProperty('children') | |
| n.push( i ) | |
| n.push( null ) | |
| node.classed 'active', false | |
| nd.classed 'active', true | |
| view( d ) | |
| update( n ) | |
| view = (d) -> | |
| if d.hasOwnProperty( 'type' ) | |
| template = Handlebars.compile( d3.select('#'+d.type).html() ) | |
| d3.select '.viewer' | |
| .html template( d ) | |
| else | |
| d3.select '.viewer' | |
| .html null | |
| #{ null on end activates values} | |
| update([0]) | |
| </script> | |
| <script id="testing" type="text/x-handlebars-template"> | |
| <div class="media"> | |
| <div class="media-left"> | |
| <a href="#"> | |
| </a> | |
| </div> | |
| <div class="media-body"> | |
| <h4 class="media-heading">{{heading}}</h4> | |
| {{content}} | |
| </div> | |
| </div> | |
| </script> | |
| <script id="gallery" type="text/x-handlebars-template"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"> | |
| {{heading}} | |
| </div> | |
| <div class="panel-body"> | |
| {{#each img}} | |
| <img src="{{url}}" /> | |
| {{/each}} | |
| </div> | |
| </div> | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment