| Author | Dave Jarvis <email> |
|---|---|
| Date | 2014-12-29 23:37:44 GMT-0800 |
| Commit | ffa5c280489d401b2fd864c9f0047ee1d9605a86 |
| Parent | 18f7975 |
| +(function( $ ) { | ||
| + $.fn.millerColumns = function() { | ||
| + return this.each( function() { | ||
| + var $columns = $(this); | ||
| + $columns.before( $("<div/>").addClass( "breadcrumb" ) ); | ||
| + $columns.after( $("<div/>").addClass( "toolbar" ) ); | ||
| + unnest( $columns ); | ||
| + collapse(); | ||
| + | ||
| + // Expand the requested child node on click. | ||
| + $columns.find( "li" ).on( "click", function() { | ||
| + collapse(); | ||
| + $(".selected").removeClass( "selected" ); | ||
| + | ||
| + var $child = $(this).data( "child" ); | ||
| + | ||
| + if( $child !== undefined ) { | ||
| + $child.removeClass( "collapse" ).children().removeClass( "selected" ); | ||
| + } | ||
| + | ||
| + var $ancestor = $(this); | ||
| + | ||
| + // Reveal (uncollapse) all ancestors to the clicked item. | ||
| + while( $ancestor !== undefined ) { | ||
| + $ancestor.addClass( "selected" ).parent().removeClass( "collapse" ); | ||
| + $ancestor = $ancestor.data( "ancestor" ); | ||
| + } | ||
| + | ||
| + breadcrumb(); | ||
| + | ||
| + // Ensure the viewport shows the entire newly expanded item. | ||
| + $columns.animate( { scrollLeft: $(this).offset().left }, 500 ); | ||
| + }); | ||
| + }); | ||
| + } | ||
| + | ||
| + /** Determine the breadcrumb path via the selected items. */ | ||
| + function breadcrumb() { | ||
| + var $breadcrumb = $("div.breadcrumb").empty(); | ||
| + | ||
| + // Add the breadcrumb trail. | ||
| + $("li.selected").each( function( _, crumb ) { | ||
| + $("<span/>").text( $(crumb).text() ).appendTo( $breadcrumb ); | ||
| + }); | ||
| + } | ||
| + | ||
| + /** Convert nested lists into columns using breadth-first traversal. */ | ||
| + function unnest( $columns ) { | ||
| + var queue = []; | ||
| + | ||
| + // Push the root unordered list item into the queue. | ||
| + queue.push( $columns.children() ); | ||
| + | ||
| + while( queue.length ) { | ||
| + var $node = queue.shift(); | ||
| + | ||
| + $node.children().each( function( _, el ) { | ||
| + var $child = $(this).children(); | ||
| + var $ancestor = $(this).parent().parent(); | ||
| + | ||
| + // Retain item hierarchy (because it is lost after flattening). | ||
| + if( $ancestor.length && ($(this).data( "ancestor" ) === undefined) ) { | ||
| + // Use addBack to reset all selection chains. | ||
| + $(this).siblings().addBack().data( "ancestor", $ancestor ); | ||
| + } | ||
| + | ||
| + if( $child.length > 0 ) { | ||
| + queue.push( $child ); | ||
| + $(this).data( "child", $child ).addClass( "parent" ); | ||
| + } | ||
| + | ||
| + // Causes item siblings to have a flattened DOM lineage. | ||
| + $(this).parent().appendTo( $columns ).addClass( "column" ); | ||
| + }); | ||
| + } | ||
| + } | ||
| + | ||
| + /** Hide all columns, except the first. */ | ||
| + function collapse() { | ||
| + $(".column:gt(0)").addClass( "collapse" ); | ||
| + } | ||
| +})(jQuery); | ||
| + | ||
| +$(document).ready( function() { $("div.columns").millerColumns(); }); | ||
| + | ||
| +<!DOCTYPE html> | ||
| +<html> | ||
| + <head> | ||
| + <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | ||
| + <meta charset="utf-8"> | ||
| + <title>Miller Columns Example</title> | ||
| + <link href="theme.css" type="text/css" rel="stylesheet"/> | ||
| + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | ||
| + <script src="columns.js"></script> | ||
| + </head> | ||
| + <body> | ||
| + <div id="container"> | ||
| + <div class="columns"> | ||
| + <ul> | ||
| + <li>Act</li> | ||
| + <li>Bill</li> | ||
| + <li> | ||
| + Copyright | ||
| + <ul> | ||
| + <li>Music</li> | ||
| + <li>Writing</li> | ||
| + <li>Film</li> | ||
| + </ul> | ||
| + </li> | ||
| + <li> | ||
| + Environment | ||
| + <ul> | ||
| + <li>Air</li> | ||
| + <li> | ||
| + Energy | ||
| + <ul> | ||
| + <li>Coal</li> | ||
| + <li> | ||
| + Gas | ||
| + <ul> | ||
| + <li>Drilling</li> | ||
| + <li>Fracking</li> | ||
| + <li> | ||
| + Shale | ||
| + <ul> | ||
| + <li>Barnett</li> | ||
| + <li>Fayetteville</li> | ||
| + <li>Haynesville</li> | ||
| + <li>Marcellus</li> | ||
| + <li>Niobrara</li> | ||
| + <li>Utica</li> | ||
| + <li>Woodford</li> | ||
| + </ul> | ||
| + </li> | ||
| + </ul> | ||
| + </li> | ||
| + <li>Oil</li> | ||
| + <li>Solar</li> | ||
| + <li>Wind</li> | ||
| + <li>Geothermal</li> | ||
| + </ul> | ||
| + </li> | ||
| + <li>Land</li> | ||
| + <li> | ||
| + Water | ||
| + <ul> | ||
| + <li>Ocean</li> | ||
| + <li>Lakes</li> | ||
| + <li>Rivers</li> | ||
| + <li>Streams</li> | ||
| + </ul> | ||
| + </li> | ||
| + </ul> | ||
| + </li> | ||
| + <li>Internet</li> | ||
| + <li>Law</li> | ||
| + <li>Proposal</li> | ||
| + <li>Tax</li> | ||
| + </ul> | ||
| + </div> | ||
| + </div> | ||
| + </body> | ||
| +</html> | ||
| + | ||
| +@charset "utf-8"; | ||
| +@import url( "css/support.css" ); | ||
| + | ||
| +div#container { | ||
| + border-left: 2px solid #DDD; | ||
| + border-right: 2px solid #DDD; | ||
| + border-top-left-radius: 0.4em 0.4em; | ||
| + border-top-right-radius: 0.4em 0.4em; | ||
| + border-bottom-left-radius: 0.4em 0.4em; | ||
| + border-bottom-right-radius: 0.4em 0.4em; | ||
| +} | ||
| + | ||
| +/** | ||
| + * | ||
| + * Cascading columns styling. | ||
| + * | ||
| + */ | ||
| +div.columns { | ||
| + float: left; | ||
| + width: 100%; | ||
| + height: 200px; | ||
| + overflow-x: auto; | ||
| + overflow-y: hidden; | ||
| + white-space: nowrap; | ||
| + | ||
| + background-color: #949494; | ||
| +} | ||
| + | ||
| +/* Display the lists as columns in blocks. */ | ||
| +ul.column { | ||
| + display: inline-block; | ||
| + | ||
| + vertical-align: top; | ||
| + overflow: hidden; | ||
| + margin: 0 auto; | ||
| + | ||
| + border-right: 1px solid #666; | ||
| + background-color: white; | ||
| + white-space: normal; | ||
| + | ||
| + font-size: 0.9em; | ||
| +} | ||
| + | ||
| +/* Setting a list container class to "collapsed" will hide the column. */ | ||
| +ul.column.collapse { | ||
| + display: none; | ||
| +} | ||
| + | ||
| +/* Put some space between the column's list entries. */ | ||
| +ul.column > li { | ||
| + list-style: none; | ||
| + padding-left: 0.5em; | ||
| + padding-right: 0.5em; | ||
| + padding-top: 0.25em; | ||
| + padding-bottom: 0.25em; | ||
| + | ||
| + min-width: 200px; | ||
| +} | ||
| + | ||
| +ul.column > li.parent::after { | ||
| + content: "›"; | ||
| + float: right; | ||
| + font-weight: bold; | ||
| +} | ||
| + | ||
| +/* Zebra stripes, which can be overridden. */ | ||
| +ul.column > li:nth-child(odd) { | ||
| + background-color: #EEE; | ||
| +} | ||
| + | ||
| +/* Highlight while hovering, without allowing selected items to override. */ | ||
| +ul.column > li:hover { | ||
| + color: black; | ||
| + background-color: #DDE4E8; | ||
| +} | ||
| + | ||
| +/* Ensure all selected nodes in the hierarchy are easily seen. */ | ||
| +ul.column > li.selected { | ||
| + background-color: #08C; | ||
| + color: white; | ||
| +} | ||
| + | ||
| +/** | ||
| + * | ||
| + * Breadcrumb styling. | ||
| + * | ||
| + */ | ||
| +div.breadcrumb { | ||
| + margin-top: 1em; | ||
| + border-top-left-radius: 0.4em 0.4em; | ||
| + border-top-right-radius: 0.4em 0.4em; | ||
| + | ||
| + border-bottom: 1px solid #666; | ||
| +} | ||
| + | ||
| +div.breadcrumb > span { | ||
| + height: 1.25em; | ||
| + line-height: 1.25em; | ||
| + | ||
| + font-size: 0.7em; | ||
| + font-weight: bold; | ||
| + padding-left: 0.25em; | ||
| + color: #666; | ||
| +} | ||
| + | ||
| +div.breadcrumb > span::after { | ||
| + content: " ›"; | ||
| +} | ||
| + | ||
| +div.breadcrumb > span:first-child { | ||
| + padding-left: 1em; | ||
| +} | ||
| + | ||
| +div.breadcrumb > span:last-child:after { | ||
| + content: ""; | ||
| +} | ||
| + | ||
| +/** | ||
| + * | ||
| + * Toolbar styling. | ||
| + * | ||
| + */ | ||
| +div.toolbar { | ||
| + margin-bottom: 1em; | ||
| + border-bottom-left-radius: 0.4em 0.4em; | ||
| + border-bottom-right-radius: 0.4em 0.4em; | ||
| + | ||
| + clear: both; | ||
| + border-top: 1px solid #666; | ||
| +} | ||
| + | ||
| +div.toolbar:after { | ||
| + font-size: 0.8em; | ||
| + content: "new | edit | delete | flag"; | ||
| + height: 1.25em; | ||
| + line-height: 1.25em; | ||
| + float: right; | ||
| + padding-right: 1em; | ||
| +} | ||
| + | ||
| +/** | ||
| + * | ||
| + * Breadcrumb and toolbar styling. | ||
| + * | ||
| + */ | ||
| +div.breadcrumb, div.toolbar { | ||
| + height: 1.25em; | ||
| + background: linear-gradient(#f0f0f0, #d8d8d8); | ||
| +} | ||
| + | ||
| Delta | 314 lines added, 0 lines removed, 314-line increase |
|---|