| | |
| | // Expand the requested child node on click. |
| | - $columns.find( "li" ).on( "click", function() { |
| | - $.fn.millerColumns.collapse(); |
| | - $(".selected").removeClass( "selected" ); |
| | + $columns.find( "li" ).on( "click", function( event ) { |
| | + $.fn.millerColumns.reset(); |
| | |
| | var $child = $(this).data( "child" ); |
 |
| | settings.breadcrumb.call( this ); |
| | settings.selection.call( this, $(this) ); |
| | + |
| | + // Don't allow the underlying DIV to receive the click event. |
| | + event.stopPropagation(); |
| | + }); |
| | + |
| | + $columns.bind( 'keypress', $.fn.millerColumns.keypress ); |
| | + |
| | + $columns.on( "click", function() { |
| | + $.fn.millerColumns.reset(); |
| | }); |
| | + |
| | + // The last set of columns on the page recieves focus. |
| | + $columns.focus(); |
| | }); |
| | } |
|
| | var $breadcrumb = $("div.breadcrumb").empty(); |
| | |
| | - $("li.selected").each( function( _, crumb ) { |
| | + $(".column > .selected").each( function( _, crumb ) { |
| | $("<span/>").text( $(crumb).text().trim() ).appendTo( $breadcrumb ); |
| | }); |
|
| | } |
| | |
| | - /** Hide all columns, except the first. */ |
| | + /** Hide columns (not the first). */ |
| | $.fn.millerColumns.collapse = function() { |
| | $(".column:gt(0)").addClass( "collapse" ); |
| | + } |
| | + |
| | + /** Hide columns (not the first), remove selections, update breadcrumb. */ |
| | + $.fn.millerColumns.reset = function() { |
| | + $.fn.millerColumns.collapse(); |
| | + $(".column > .selected").removeClass( "selected" ); |
| | + $.fn.millerColumns.breadcrumb(); |
| | + } |
| | + |
| | + $.fn.millerColumns.keypress = function( event ) { |
| | + var arrowKey = false; |
| | + |
| | + switch( event.keyCode ) { |
| | + case 27: // escape |
| | + $.fn.millerColumns.reset(); |
| | + break; |
| | + case 38: // arrow up |
| | + $.fn.millerColumns.selectAbove(); |
| | + arrowKey = true; |
| | + break; |
| | + case 40: // arrow down |
| | + $.fn.millerColumns.selectBelow(); |
| | + arrowKey = true; |
| | + break; |
| | + case 37: // arrow left |
| | + $.fn.millerColumns.selectLeft(); |
| | + arrowKey = true; |
| | + break; |
| | + case 39: // arrow right |
| | + $.fn.millerColumns.selectRight(); |
| | + arrowKey = true; |
| | + break; |
| | + } |
| | + |
| | + if( arrowKey ) { |
| | + var $current = $.fn.millerColumns.current(); |
| | + |
| | + // If no item is selected, then jump to the first item. |
| | + if( $current.length == 0 ) { |
| | + $(".column").first().children().first().click(); |
| | + } |
| | + } |
| | + } |
| | + |
| | + /** Returns the last selected item (i.e., the current cursor). */ |
| | + $.fn.millerColumns.current = function () { |
| | + return $(".column > .selected").last(); |
| | + } |
| | + |
| | + $.fn.millerColumns.selectAbove = function() { |
| | + $.fn.millerColumns.current().prev().click(); |
| | + } |
| | + |
| | + $.fn.millerColumns.selectBelow = function() { |
| | + $.fn.millerColumns.current().next().click(); |
| | + } |
| | + |
| | + $.fn.millerColumns.selectLeft = function() { |
| | + var $ancestor = $.fn.millerColumns.current().data( "ancestor" ); |
| | + |
| | + if( $ancestor !== undefined ) { |
| | + $ancestor.click(); |
| | + } |
| | + } |
| | + |
| | + $.fn.millerColumns.selectRight = function() { |
| | + var $child = $.fn.millerColumns.current().data( "child" ); |
| | + |
| | + if( $child !== undefined ) { |
| | + $child.children().first().click(); |
| | + } |
| | + else { |
| | + $.fn.millerColumns.selectBelow(); |
| | + } |
| | } |
| | })(jQuery); |