| Index: trunk/phase3/resources/jquery/jquery.makeCollapsible.js |
| — | — | @@ -0,0 +1,109 @@ |
| | 2 | +/** |
| | 3 | + * make lists, divs, tables etc. toggleable |
| | 4 | + * |
| | 5 | + * This will enable collapsible-functionality on all passed elements. |
| | 6 | + * Will prevent binding twice to the same element. |
| | 7 | + * Initial state is expanded by default, this can be overriden by adding class |
| | 8 | + * "kr-collapsed" to the "kr-collapsible" element. |
| | 9 | + * Elements made collapsible have class "kr-made-collapsible". |
| | 10 | + * Except for tables and lists, the inner content is wrapped in "kr-collapsible-content". |
| | 11 | + * |
| | 12 | + * Copyright 2008-2009 Krinkle <krinklemail@gmail.com> |
| | 13 | + * |
| | 14 | + * @license CC-BY 2.0 NL <http://creativecommons.org/licenses/by/2.0/nl/deed.en> |
| | 15 | + */ |
| | 16 | + |
| | 17 | +$.fn.makeCollapsible = function() { |
| | 18 | + |
| | 19 | + return this.each(function() { |
| | 20 | + var $that = $(this).addClass('kr-collapsible'), // in case $('#myAJAXelement').makeCollapsible() was called |
| | 21 | + that = this, |
| | 22 | + collapsetext = $(this).attr('data-collapsetext'), |
| | 23 | + expandtext = $(this).attr('data-expandtext'); |
| | 24 | + // Use custom text or default ? |
| | 25 | + if( !collapsetext || collapsetext == ''){ |
| | 26 | + collapsetext = 'Collapse'; |
| | 27 | + } |
| | 28 | + if ( !expandtext || expandtext == ''){ |
| | 29 | + expandtext = 'Expand'; |
| | 30 | + } |
| | 31 | + // Create toggle link with a space around the brackets ( ) |
| | 32 | + $toggleLink = $('<span class="kr-collapsible-toggle kr-collapsible-toggle-hide"> [<a href="#">' + collapsetext + '</a>] </span>').click(function(){ |
| | 33 | + var $that = $(this), |
| | 34 | + $collapsible = $that.closest('.kr-collapsible.kr-made-collapsible').toggleClass('kr-collapsed'); |
| | 35 | + if ($that.hasClass('kr-collapsible-toggle-hide')) { |
| | 36 | + // Change link to "Show" |
| | 37 | + $that |
| | 38 | + .removeClass('kr-collapsible-toggle-hide').addClass('kr-collapsible-toggle-show') |
| | 39 | + .find('> a').html(expandtext); |
| | 40 | + // Hide the collapsible element |
| | 41 | + if ($collapsible.is('table')) { |
| | 42 | + // Hide all direct childing table rows of this table, except the row containing the link |
| | 43 | + // Slide doens't work, but fade works fine as of jQuery 1.1.3 |
| | 44 | + // http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row#920480 |
| | 45 | + // Stop to prevent animaties from stacking up |
| | 46 | + $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeOut(); |
| | 47 | + } else if ($collapsible.is('ul') || $collapsible.is('ol')) { |
| | 48 | + $collapsible.find('> li').not($that.parent()).stop(true, true).slideUp(); |
| | 49 | + } else { // <div>, <p> etc. |
| | 50 | + $collapsible.find('> .kr-collapsible-content').slideUp(); |
| | 51 | + } |
| | 52 | + } else { |
| | 53 | + // Change link to "Hide" |
| | 54 | + $that |
| | 55 | + .removeClass('kr-collapsible-toggle-show').addClass('kr-collapsible-toggle-hide') |
| | 56 | + .find('> a').html(collapsetext); |
| | 57 | + // Show the collapsible element |
| | 58 | + if ($collapsible.is('table')) { |
| | 59 | + $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeIn(); |
| | 60 | + } else if ($collapsible.is('ul') || $collapsible.is('ol')) { |
| | 61 | + $collapsible.find('> li').not($that.parent()).stop(true, true).slideDown(); |
| | 62 | + } else { // <div>, <p> etc. |
| | 63 | + $collapsible.find('> .kr-collapsible-content').slideDown(); |
| | 64 | + } |
| | 65 | + } |
| | 66 | + return false; |
| | 67 | + }); |
| | 68 | + // Skip if it has been enabled already. |
| | 69 | + if ($that.hasClass('kr-made-collapsible')) { |
| | 70 | + return; |
| | 71 | + } else { |
| | 72 | + $that.addClass('kr-made-collapsible'); |
| | 73 | + } |
| | 74 | + // Elements are treated differently |
| | 75 | + if ($that.is('table')) { |
| | 76 | + // The toggle-link will be in the last cell (td or th) of the first row |
| | 77 | + var $lastCell = $('tr:first th, tr:first td', that).eq(-1); |
| | 78 | + if (!$lastCell.find('> .kr-collapsible-toggle').size()) { |
| | 79 | + $lastCell.prepend($toggleLink); |
| | 80 | + } |
| | 81 | + |
| | 82 | + } else if ($that.is('ul') || $that.is('ol')) { |
| | 83 | + if (!$('li:first', $that).find('> .kr-collapsible-toggle').size()) { |
| | 84 | + // Make sure the numeral count doesn't get messed up, reset to 1 unless value-attribute is already used |
| | 85 | + if ( $('li:first', $that).attr('value') == '' ) { |
| | 86 | + $('li:first', $that).attr('value', '1'); |
| | 87 | + } |
| | 88 | + $that.prepend($toggleLink.wrap('<li class="kr-collapsibile-toggle-li">').parent()); |
| | 89 | + } |
| | 90 | + } else { // <div>, <p> etc. |
| | 91 | + // Is there an content-wrapper already made ? |
| | 92 | + // If a direct child with the class does not exists, create the wrap. |
| | 93 | + if (!$that.find('g> .kr-collapsible-content').size()) { |
| | 94 | + $that.wrapInner('<div class="kr-collapsible-content">'); |
| | 95 | + } |
| | 96 | + |
| | 97 | + // Add toggle-link if not present |
| | 98 | + if (!$that.find('> .kr-collapsible-toggle').size()) { |
| | 99 | + $that.prepend($toggleLink); |
| | 100 | + } |
| | 101 | + } |
| | 102 | + // Initial state |
| | 103 | + if ($that.hasClass('kr-collapsed')) { |
| | 104 | + $toggleLink.click(); |
| | 105 | + } |
| | 106 | + }); |
| | 107 | +}; |
| | 108 | +$(function(){ |
| | 109 | + $('.kr-collapsible').makeCollapsible(); |
| | 110 | +}); |
| \ No newline at end of file |
| Property changes on: trunk/phase3/resources/jquery/jquery.makeCollapsible.js |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 111 | + native |
| Index: trunk/phase3/resources/jquery/jquery.makeCollapsible.css |
| — | — | @@ -0,0 +1,12 @@ |
| | 2 | +/* See also jQuery.makeCollapsible.js */ |
| | 3 | +.kr-collapsible-toggle { |
| | 4 | + float:right; |
| | 5 | +} |
| | 6 | +/* list-items go as wide as their parent element, don't float them inside list items */ |
| | 7 | +li .kr-collapsible-toggle { |
| | 8 | + float:none; |
| | 9 | +} |
| | 10 | +/* the added list item should have no list-style */ |
| | 11 | +.kr-collapsibile-toggle-li { |
| | 12 | + list-style:none; |
| | 13 | +} |
| \ No newline at end of file |
| Property changes on: trunk/phase3/resources/jquery/jquery.makeCollapsible.css |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 14 | + native |
| Index: trunk/phase3/resources/Resources.php |
| — | — | @@ -78,6 +78,10 @@ |
| 79 | 79 | 'jquery.localize' => array( |
| 80 | 80 | 'scripts' => 'resources/jquery/jquery.localize.js' |
| 81 | 81 | ), |
| | 82 | + 'jquery.makeCollapsible' => array( |
| | 83 | + 'scripts' => 'resources/jquery/jquery.makeCollapsible.js', |
| | 84 | + 'styles' => 'resources/jquery/jquery.makeCollapsible.css', |
| | 85 | + ), |
| 82 | 86 | 'jquery.suggestions' => array( |
| 83 | 87 | 'scripts' => 'resources/jquery/jquery.suggestions.js', |
| 84 | 88 | 'styles' => 'resources/jquery/jquery.suggestions.css', |
| — | — | @@ -345,7 +349,7 @@ |
| 346 | 350 | ), |
| 347 | 351 | 'mediawiki.util' => array( |
| 348 | 352 | 'scripts' => 'resources/mediawiki.util/mediawiki.util.js', |
| 349 | | - 'dependencies' => array( 'jquery.checkboxShiftClick', 'jquery.client', 'jquery.placeholder' ), |
| | 353 | + 'dependencies' => array( 'jquery.checkboxShiftClick', 'jquery.client', 'jquery.placeholder', 'jquery.makeCollapsible' ), |
| 350 | 354 | 'debugScripts' => 'resources/mediawiki.util/mediawiki.util.test.js', |
| 351 | 355 | ), |
| 352 | 356 | 'mediawiki.action.history' => array( |