Dave Jarvis' Repositories
git clone https://repo.autonoma.ca/repo/delibero.git
Added more tags for testing. Updated columns to show child columns.
| Author | Dave Jarvis <email> |
|---|---|
| Date | 2014-11-24 15:34:38 GMT-0800 |
| Commit | 649fc52fa153ccbd4bd7d9e84c39aac5dc556e67 |
| Parent | e573b31 |
| Delta | 116 lines added, 24 lines removed, 92-line increase |
|---|
xml/css/tags.css
| +div.columns, div.breadcrumb { | ||
| + border-top-left-radius: 0.4em 0.4em; | ||
| + border-top-right-radius: 0.4em 0.4em; | ||
| +} | ||
| + | ||
| +div.columns, div.toolbar { | ||
| + border-bottom-left-radius: 0.4em 0.4em; | ||
| + border-bottom-right-radius: 0.4em 0.4em; | ||
| +} | ||
| + | ||
| div.columns { | ||
| margin-top: 1em; | ||
| margin-bottom: 1em; | ||
| - border: 1px solid #C3C6CB; | ||
| - height: 250px; | ||
| - overflow-y: auto; | ||
| - overflow-x: auto; | ||
| + min-height: 150px; | ||
| + overflow: auto; | ||
| + background: #949494; | ||
| } | ||
| div.column { | ||
| float: left; | ||
| display: inline-block; | ||
| - border: 1px solid #ccc; | ||
| + background: #FFF; | ||
| + font-size: 0.9em; | ||
| + font-family: Arial; | ||
| + border-right: 1px solid #666; | ||
| + /*box-shadow: 4px 0px 8px 0px #AAA;*/ | ||
| +} | ||
| + | ||
| +div.collapsed { | ||
| + display: none; | ||
| +} | ||
| + | ||
| +li.parent:hover { | ||
| + background-color: #DDE4E8 !important; | ||
| +} | ||
| + | ||
| +div.breadcrumb, div.toolbar { | ||
| + background: #CCC; | ||
| + height: 1.25em; | ||
| +} | ||
| + | ||
| +div.breadcrumb { | ||
| + border-bottom: 1px solid #666; | ||
| +} | ||
| + | ||
| +div.toolbar { | ||
| + clear: both; | ||
| + border-top: 1px solid #666; | ||
| } | ||
 |
||
| padding-left: 0.5em; | ||
| padding-right: 0.5em; | ||
| + padding-top: 0.25em; | ||
| + padding-bottom: 0.25em; | ||
| min-width: 150px; | ||
| +} | ||
| + | ||
| +/* Use an arrow to indicate that the parent has child elements. */ | ||
| +li.parent:after { | ||
| + content: "\25B8"; | ||
| + float: right; | ||
| } | ||
| /* Zebra stripes. */ | ||
| li:nth-child(odd) { | ||
| - background-color: #EEF3FD; | ||
| + background-color: #EEE; | ||
| } | ||
xml/js/columns.js
| var $columns = $(this); | ||
| + // Breadth-first traversal to rearrange list items into | ||
| + // consecutively ordered div wrapper elements. | ||
| while( ($list = $list.children()).length ) { | ||
| $list.each( function( index, element ) { | ||
| var $parent = $(element).parent(); | ||
| if( $(element).is( "li" ) ) { | ||
| $parent = $($parent).parent(); | ||
| } | ||
| - var parent_id = $($parent).attr( "id" ); | ||
| + // Store the parent id for showing child columns. | ||
| + var id = $($parent).attr( "id" ); | ||
| if( $(element).is( "ul" ) ) { | ||
| - if( parent_id === undefined ) { | ||
| - parent_id = 0; | ||
| + // The parent element shall be marked as 0. | ||
| + if( id === undefined ) { | ||
| + id = 0; | ||
| } | ||
| - // The left-most column (root div element). | ||
| - var $div = $("<div>").attr( "data-parent", parent_id ); | ||
| - //$div.addClass( "column" ); | ||
| + var $item = $("li#" + id); | ||
| + $item.addClass( "parent" ); | ||
| + | ||
| + $item.on( "click", function() { | ||
| + // Hide everything. | ||
| + $("div.column[data-parent!=0]").addClass( "collapsed" ); | ||
| + | ||
| + // The "id" for the clicked list item becomes the start of | ||
| + // the ancestral chain. | ||
| + | ||
| + var $ancestor = $(this).parent().parent(); | ||
| + var parent_id = $ancestor.attr( "data-parent" ); | ||
| + | ||
| + console.log( "clicked id: " + id ); | ||
| + console.log( "parent id: " + parent_id ); | ||
| + | ||
| + var $child = $("div.column[data-parent=" + id + "]" ); | ||
| + | ||
| + $child.removeClass( "collapsed" ); | ||
| + $ancestor.removeClass( "collapsed" ); | ||
| + }); | ||
| + | ||
| + var $div = $("<div>").attr( "data-parent", id ); | ||
| var $wrapped = $(element).wrapAll( $div ); | ||
| + // Unnest the list items into contiguous div elements. | ||
| $wrapped.parent().detach().appendTo( $columns ).addClass( "column" ); | ||
| } | ||
| }); | ||
| } | ||
| + | ||
| + $columns.prepend( $("<div>").addClass( "breadcrumb" ) ); | ||
| + $columns.append( $("<div>").addClass( "toolbar" ) ); | ||
| + | ||
| + // Hide all the columns except the root. | ||
| + $("div.column[data-parent!=0]").addClass( "collapsed" ); | ||
| return this; |
xml/tags.xml
| <name>Bill</name> | ||
| </tag> | ||
| - <tag id="3"> | ||
| - <name>Law</name> | ||
| - </tag> | ||
| - <tag id="4"> | ||
| - <name>Proposal</name> | ||
| - </tag> | ||
| <tag id="5"> | ||
| <name>Copyright</name> | ||
|
||
| <tag id="9"> | ||
| <name>Environment</name> | ||
| - <tag id="10"> | ||
| - <name>Water</name> | ||
| - </tag> | ||
| - <tag id="11"> | ||
| - <name>Land</name> | ||
| - </tag> | ||
| <tag id="12"> | ||
| <name>Air</name> | ||
|
||
| <tag id="16"> | ||
| <name>Gas</name> | ||
| + <tag id="23"> | ||
| + <name>Drilling</name> | ||
| + </tag> | ||
| + <tag id="24"> | ||
| + <name>Fracking</name> | ||
| + </tag> | ||
| </tag> | ||
| <tag id="15"> | ||
|
||
| <tag id="17"> | ||
| <name>Geothermal</name> | ||
| + </tag> | ||
| + </tag> | ||
| + <tag id="11"> | ||
| + <name>Land</name> | ||
| + </tag> | ||
| + <tag id="10"> | ||
| + <name>Water</name> | ||
| + <tag id="19"> | ||
| + <name>Ocean</name> | ||
| + </tag> | ||
| + <tag id="20"> | ||
| + <name>Lakes</name> | ||
| + </tag> | ||
| + <tag id="21"> | ||
| + <name>Rivers</name> | ||
| + </tag> | ||
| + <tag id="22"> | ||
| + <name>Streams</name> | ||
| </tag> | ||
| </tag> | ||
| + </tag> | ||
| + <tag id="3"> | ||
| + <name>Law</name> | ||
| + </tag> | ||
| + <tag id="4"> | ||
| + <name>Proposal</name> | ||
| </tag> | ||
| <tag id="18"> | ||