| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.tocCollapse.js |
| — | — | @@ -0,0 +1,92 @@ |
| | 2 | +/* TOC Module for wikiEditor */ |
| | 3 | +( function( $ ) { $.wikiEditor.modules.tocCollapse = { |
| | 4 | + |
| | 5 | +/** |
| | 6 | + * API accessible functions |
| | 7 | + */ |
| | 8 | +api: { |
| | 9 | + // |
| | 10 | +}, |
| | 11 | +/** |
| | 12 | + * Internally used functions |
| | 13 | + */ |
| | 14 | +fn: { |
| | 15 | + /** |
| | 16 | + * Creates a table of contents module within a wikiEditor |
| | 17 | + * |
| | 18 | + * @param {Object} context Context object of editor to create module in |
| | 19 | + * @param {Object} config Configuration object to create module from |
| | 20 | + */ |
| | 21 | + create: function( context, config ) { |
| | 22 | + |
| | 23 | + context.$ui.find( '.wikiEditor-ui-bottom' ) |
| | 24 | + .append( context.modules.$toc ); |
| | 25 | + |
| | 26 | + if ( '$toc' in context.modules ) { |
| | 27 | + return; |
| | 28 | + } |
| | 29 | + context.modules.$tocCollapse = $( '<div />' ) |
| | 30 | + .addClass( 'wikiEditor-ui-toc' ) |
| | 31 | + .attr( 'id', 'wikiEditor-ui-toc' ); |
| | 32 | + // If we ask for this later (after we insert the TOC) then in IE this measurement will be incorrect |
| | 33 | + var height = context.$ui.find( '.wikiEditor-ui-bottom' ).height() |
| | 34 | + context.$ui.find( '.wikiEditor-ui-bottom' ) |
| | 35 | + .append( context.modules.$toc ); |
| | 36 | + context.modules.$toc.height( |
| | 37 | + context.$ui.find( '.wikiEditor-ui-bottom' ).height() |
| | 38 | + ); |
| | 39 | + // Make some css modifications to make room for the toc on the right... |
| | 40 | + // Perhaps this could be configurable? |
| | 41 | + context.modules.$toc.css( { 'width': $.wikiEditor.modules.toc.defaults.width, 'marginTop': -( height ) } ); |
| | 42 | + context.$ui.find( '.wikiEditor-ui-text' ) |
| | 43 | + .css( ( $( 'body.rtl' ).size() ? 'marginLeft' : 'marginRight' ), $.wikiEditor.modules.toc.defaults.width ); |
| | 44 | + // Add the TOC to the document |
| | 45 | + $.wikiEditor.modules.tocCollapse.fn.build( context, config ); |
| | 46 | + }, |
| | 47 | + |
| | 48 | + /** |
| | 49 | + * Builds table of contents |
| | 50 | + * |
| | 51 | + * @param {Object} context |
| | 52 | + */ |
| | 53 | + build: function( context ) { |
| | 54 | + function buildCollapseBar() { |
| | 55 | + var $collapseBar = $( '<div />' ) |
| | 56 | + .addClass( 'wikiEditor-ui-toc-collapse-open' ) |
| | 57 | + .attr( 'id', 'wikiEditor-ui-toc-colapse' ) |
| | 58 | + .data( 'oWidth', $.wikiEditor.modules.toc.defaults.width) |
| | 59 | + .bind('mouseup', function(){ |
| | 60 | + var $e = $(this); |
| | 61 | + var close = $e.hasClass('wikiEditor-ui-toc-collapse-open'); |
| | 62 | + if(close) { |
| | 63 | + $e.parent() |
| | 64 | + .animate( {'width': $e.outerWidth()}, 'fast', function() { |
| | 65 | + $(this).find('ul:first').hide(); |
| | 66 | + } ) |
| | 67 | + .prev() |
| | 68 | + .animate( {'marginRight': $e.outerWidth()}, 'fast', function(){ |
| | 69 | + $('#wikiEditor-ui-toc-colapse') |
| | 70 | + .removeClass('wikiEditor-ui-toc-collapse-open') |
| | 71 | + .addClass('wikiEditor-ui-toc-collapse-closed'); |
| | 72 | + }); |
| | 73 | + } else { |
| | 74 | + $e.siblings().show() |
| | 75 | + .parent() |
| | 76 | + .animate( {'width': $e.data('oWidth')}, 'fast' ) |
| | 77 | + .prev() |
| | 78 | + .animate( {'marginRight': $e.data('oWidth')}, 'fast', function(){ |
| | 79 | + $('#wikiEditor-ui-toc-colapse') |
| | 80 | + .removeClass('wikiEditor-ui-toc-collapse-closed') |
| | 81 | + .addClass('wikiEditor-ui-toc-collapse-open'); |
| | 82 | + }); |
| | 83 | + } |
| | 84 | + |
| | 85 | + }); |
| | 86 | + return $collapseBar; |
| | 87 | + |
| | 88 | + } |
| | 89 | + context.modules.$tocCollapse.html( buildCollapseBar() ); |
| | 90 | + } |
| | 91 | +} |
| | 92 | + |
| | 93 | +}; } ) ( jQuery ); |