Migrated Miller Columns into its own repository. Use hard link to reference the file. Required dynamic loading in tags.js to ensure proper loading and execution of JavaScript.

Author	Dave Jarvis <email>
Date	2014-12-31 01:25:44 GMT-0800
Commit	94e6d5b897ce76b535afa39b795a8a0fb0fbfae7
Parent	7b62842

questions.ods

Binary files differ

xml/css/tags.css

		float: left;
		width: 100%;
		- height: 200px;
		+ height: 100%;
		overflow-x: auto;
		overflow-y: hidden;

		vertical-align: top;
		overflow: hidden;
		- margin: 0 auto;
		+ margin: 0;
		+ padding: 0;

		border-right: 1px solid #666;

		font-size: 0.7em;
		font-weight: bold;
		- padding-left: 0.25em;
		color: #666;
		}

		div.breadcrumb > span::after {
		- content: " ›";
		+ content: " › ";
		}

xml/js/columns.js

		+(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().trim() ).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);
		+

xml/js/tags.js

		-(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(); });
		+$(document).ready( function() {
		+ $.getScript( "js/columns.js", function() {
		+ $("div.columns").millerColumns();
		+ });
		+});

Delta	92 lines added, 88 lines removed, 4-line increase