git.maemo.org Git - modest/blob - www/jquery.accordion.js

   1 /*
   2  * Accordion 1.5 - jQuery menu widget
   3  *
   4  * Copyright (c) 2007 Jörn Zaefferer, Frank Marcia
   5  *
   6  * http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
   7  *
   8  * Dual licensed under the MIT and GPL licenses:
   9  *   http://www.opensource.org/licenses/mit-license.php
  10  *   http://www.gnu.org/licenses/gpl.html
  11  *
  12  * Revision: $Id: jquery.accordion.js 2880 2007-08-24 21:44:37Z joern.zaefferer $
  13  *
  14  */
  15
  16 /**
  17  * Make the selected elements Accordion widgets.
  18  *
  19  * Semantic requirements:
  20  *
  21  * If the structure of your container is flat with unique
  22  * tags for header and content elements, eg. a definition list
  23  * (dl > dt + dd), you don't have to specify any options at
  24  * all.
  25  *
  26  * If your structure uses the same elements for header and
  27  * content or uses some kind of nested structure, you have to
  28  * specify the header elements, eg. via class, see the second example.
  29  *
  30  * Use activate(Number) to change the active content programmatically.
  31  *
  32  * A change event is triggered everytime the accordion changes. Apart from
  33  * the event object, all arguments are jQuery objects.
  34  * Arguments: event, newHeader, oldHeader, newContent, oldContent
  35  *
  36  * @example jQuery('#nav').Accordion();
  37  * @before <dl id="nav">
  38  *   <dt>Header 1</dt>
  39  *   <dd>Content 1</dd>
  40  *   <dt>Header 2</dt>
  41  *   <dd>Content 2</dd>
  42  * </dl>
  43  * @desc Creates an Accordion from the given definition list
  44  *
  45  * @example jQuery('#nav').Accordion({
  46  *   header: '.title'
  47  * });
  48  * @before <div id="nav">
  49  *  <div>
  50  *    <div class="title">Header 1</div>
  51  *    <div>Content 1</div>
  52  *  </div>
  53  *  <div>
  54  *    <div class="title">Header 2</div>
  55  *    <div>Content 2</div>
  56  *  </div>
  57  * </div>
  58  * @desc Creates an Accordion from the given div structure
  59  *
  60  * @example jQuery('#nav').Accordion({
  61  *   header: '.head',
  62  *       navigation: true
  63  * });
  64  * @before <ul id="nav">
  65  *   <li>
  66  *     <a class="head" href="books/">Books</a>
  67  *     <ul>
  68  *       <li><a href="books/fantasy/">Fantasy</a></li>
  69  *       <li><a href="books/programming/">Programming</a></li>
  70  *     </ul>
  71  *   </li>
  72  *   <li>
  73  *     <a class="head" href="movies/">Movies</a>
  74  *     <ul>
  75  *       <li><a href="movies/fantasy/">Fantasy</a></li>
  76  *       <li><a href="movies/programming/">Programming</a></li>
  77  *     </ul>
  78  *   </li>
  79  * </ul>
  80  * @after <ul id="nav">
  81  *   <li>
  82  *     <a class="head" href="">Books</a>
  83  *     <ul style="display: none">
  84  *       <li><a href="books/fantasy/">Fantasy</a></li>
  85  *       <li><a href="books/programming/">Programming</a></li>
  86  *     </ul>
  87  *   </li>
  88  *   <li>
  89  *     <a class="head" href="">Movies</a>
  90  *     <ul>
  91  *       <li><a class="current" href="movies/fantasy/">Fantasy</a></li>
  92  *       <li><a href="movies/programming/">Programming</a></li>
  93  *     </ul>
  94  *   </li>
  95  * </ul>
  96  * @desc Creates an Accordion from the given navigation list, activating those accordion parts
  97  * that match the current location.href. Assuming the user clicked on "Fantasy" in the "Movies" section,
  98  * the accordion displayed after loading the page with the "Movies" section open and the "Fantasy" link highlighted
  99  * with a class "current".
 100  *
 101  * @example jQuery('#accordion').Accordion().change(function(event, newHeader, oldHeader, newContent, oldContent) {
 102  *   jQuery('#status').html(newHeader.text());
 103  * });
 104  * @desc Updates the element with id status with the text of the selected header every time the accordion changes
 105  *
 106  * @param Map options key/value pairs of optional settings.
 107  * @option String|Element|jQuery|Boolean|Number active Selector for the active element. Set to false to display none at start. Default: first child
 108  * @option String|Element|jQuery header Selector for the header element, eg. 'div.title', 'a.head'. Default: first child's tagname
 109  * @option String|Number speed
 110  * @option String selectedClass Class for active header elements. Default: 'selected'
 111  * @option Boolean alwaysOpen Whether there must be one content element open. Default: true
 112  * @option Boolean|String animated Choose your favorite animation, or disable them (set to false). In addition to the default, "bounceslide" and "easeslide" are supported (both require the easing plugin). Default: 'slide'
 113  * @option String event The event on which to trigger the accordion, eg. "mouseover". Default: "click"
 114  * @option Boolean navigation If set, looks for the anchor that matches location.href and activates it. Great for href-based pseudo-state-saving. Default: false
 115  * @option Boolean autoheight If set, the highest content part is used as height reference for all other parts. Provides more consistent animations. Default: false
 116  *
 117  * @type jQuery
 118  * @see activate(Number)
 119  * @name Accordion
 120  * @cat Plugins/Accordion
 121  */
 122
 123 /**
 124  * Activate a content part of the Accordion programmatically.
 125  *
 126  * The index can be a zero-indexed number to match the position of the header to close
 127  * or a string expression matching an element. Pass -1 to close all (only possible with alwaysOpen:false).
 128  *
 129  * @example jQuery('#accordion').activate(1);
 130  * @desc Activate the second content of the Accordion contained in <div id="accordion">.
 131  *
 132  * @example jQuery('#accordion').activate("a:first");
 133  * @desc Activate the first element matching the given expression.
 134  *
 135  * @example jQuery('#nav').activate(false);
 136  * @desc Close all content parts of the accordion.
 137  *
 138  * @param String|Element|jQuery|Boolean|Number index An Integer specifying the zero-based index of the content to be
 139  *                               activated or an expression specifying the element, or an element/jQuery object, or a boolean false to close all.
 140  *
 141  * @type jQuery
 142  * @name activate
 143  * @cat Plugins/Accordion
 144  */
 145
 146 (function($) {
 147
 148 $.Accordion = {};
 149 $.extend($.Accordion, {
 150         defaults: {
 151                 selectedClass: "selected",
 152                 alwaysOpen: true,
 153                 animated: 'slide',
 154                 event: "click"
 155         },
 156         Animations: {
 157                 slide: function(settings, additions) {
 158                         settings = $.extend({
 159                                 easing: "swing",
 160                                 duration: 300
 161                         }, settings, additions);
 162                         if ( !settings.toHide.size() ) {
 163                                 settings.toShow.animate({height: "show"}, {
 164                                         duration: settings.duration,
 165                                         easing: settings.easing,
 166                                         complete: settings.finished
 167                                 });
 168                                 return;
 169                         }
 170                         var height = settings.toHide.height();
 171                         settings.toShow.css({ height: 0, overflow: 'hidden' }).show();
 172                         settings.toHide.filter(":hidden").each(settings.finished).end().filter(":visible").animate({height:"hide"},{
 173                                 step: function(n){
 174                                         settings.toShow.height(Math.ceil(height - ($.fn.stop ? n * height : n)));
 175                                 },
 176                                 duration: settings.duration,
 177                                 easing: settings.easing,
 178                                 complete: settings.finished
 179                         });
 180                 },
 181                 bounceslide: function(settings) {
 182                         this.slide(settings, {
 183                                 easing: settings.down ? "bounceout" : "swing",
 184                                 duration: settings.down ? 1000 : 200
 185                         });
 186                 },
 187                 easeslide: function(settings) {
 188                         this.slide(settings, {
 189                                 easing: "easeinout",
 190                                 duration: 700
 191                         })
 192                 }
 193         }
 194 });
 195
 196 $.fn.extend({
 197         nextUntil: function(expr) {
 198             var match = [];
 199
 200             // We need to figure out which elements to push onto the array
 201             this.each(function(){
 202                 // Traverse through the sibling nodes
 203                 for( var i = this.nextSibling; i; i = i.nextSibling ) {
 204                     // Make sure that we're only dealing with elements
 205                     if ( i.nodeType != 1 ) continue;
 206
 207                     // If we find a match then we need to stop
 208                     if ( $.filter( expr, [i] ).r.length ) break;
 209
 210                     // Otherwise, add it on to the stack
 211                     match.push( i );
 212                 }
 213             });
 214
 215             return this.pushStack( match );
 216         },
 217         // the plugin method itself
 218         Accordion: function(settings) {
 219                 if ( !this.length )
 220                         return this;
 221
 222                 // setup configuration
 223                 settings = $.extend({}, $.Accordion.defaults, {
 224                         // define context defaults
 225                         header: $(':first-child', this)[0].tagName // take first childs tagName as header
 226                 }, settings);
 227
 228                 if ( settings.navigation ) {
 229                         var current = this.find("a").filter(function() { return this.href == location.href; });
 230                         if ( current.length ) {
 231                                 if ( current.filter(settings.header).length ) {
 232                                         settings.active = current;
 233                                 } else {
 234                                         settings.active = current.parent().parent().prev();
 235                                         current.addClass("current");
 236                                 }
 237                         }
 238                 }
 239
 240                 // calculate active if not specified, using the first header
 241                 var container = this,
 242                         headers = container.find(settings.header),
 243                         active = findActive(settings.active),
 244                         running = 0;
 245
 246                 if ( settings.autoheight ) {
 247                         var maxHeight = 0;
 248                         headers.nextUntil(settings.header).each(function() {
 249                                 maxHeight = Math.max(maxHeight, $(this).height());
 250                         }).height(maxHeight);
 251                 }
 252
 253                 headers
 254                         .not(active || "")
 255                         .nextUntil(settings.header)
 256                         .hide();
 257                 active.addClass(settings.selectedClass);
 258
 259
 260                 function findActive(selector) {
 261                         return selector != undefined
 262                                 ? typeof selector == "number"
 263                                         ? headers.eq(selector)
 264                                         : headers.not(headers.not(selector))
 265                                 : selector === false
 266                                         ? $("<div>")
 267                                         : headers.eq(0)
 268                 }
 269
 270                 function toggle(toShow, toHide, data, clickedActive, down) {
 271                         var finished = function(cancel) {
 272                                 running = cancel ? 0 : --running;
 273                                 if ( running )
 274                                         return;
 275                                 // trigger custom change event
 276                                 container.trigger("change", data);
 277                         };
 278
 279                         // count elements to animate
 280                         running = toHide.size() == 0 ? toShow.size() : toHide.size();
 281
 282                         if ( settings.animated ) {
 283                                 if ( !settings.alwaysOpen && clickedActive ) {
 284                                         toShow.slideToggle(settings.animated);
 285                                         finished(true);
 286                                 } else {
 287                                         $.Accordion.Animations[settings.animated]({
 288                                                 toShow: toShow,
 289                                                 toHide: toHide,
 290                                                 finished: finished,
 291                                                 down: down
 292                                         });
 293                                 }
 294                         } else {
 295                                 if ( !settings.alwaysOpen && clickedActive ) {
 296                                         toShow.toggle();
 297                                 } else {
 298                                         toHide.hide();
 299                                         toShow.show();
 300                                 }
 301                                 finished(true);
 302                         }
 303                 }
 304
 305                 function clickHandler(event) {
 306                         // called only when using activate(false) to close all parts programmatically
 307                         if ( !event.target && !settings.alwaysOpen ) {
 308                                 active.toggleClass(settings.selectedClass);
 309                                 var toHide = active.nextUntil(settings.header);
 310                                 var toShow = active = $([]);
 311                                 toggle( toShow, toHide );
 312                                 return;
 313                         }
 314                         // get the click target
 315                         var clicked = $(event.target);
 316
 317                         // due to the event delegation model, we have to check if one
 318                         // of the parent elements is our actual header, and find that
 319                         if ( clicked.parents(settings.header).length )
 320                                 while ( !clicked.is(settings.header) )
 321                                         clicked = clicked.parent();
 322
 323                         var clickedActive = clicked[0] == active[0];
 324
 325                         // if animations are still active, or the active header is the target, ignore click
 326                         if(running || (settings.alwaysOpen && clickedActive) || !clicked.is(settings.header))
 327                                 return;
 328
 329                         // switch classes
 330                         active.toggleClass(settings.selectedClass);
 331                         if ( !clickedActive ) {
 332                                 clicked.addClass(settings.selectedClass);
 333                         }
 334
 335                         // find elements to show and hide
 336                         var toShow = clicked.nextUntil(settings.header),
 337                                 toHide = active.nextUntil(settings.header),
 338                                 data = [clicked, active, toShow, toHide],
 339                                 down = headers.index( active[0] ) > headers.index( clicked[0] );
 340
 341                         active = clickedActive ? $([]) : clicked;
 342                         toggle( toShow, toHide, data, clickedActive, down );
 343
 344                         return !toShow.length;
 345                 };
 346                 function activateHandler(event, index) {
 347                         // IE manages to call activateHandler on normal clicks
 348                         if ( arguments.length == 1 )
 349                                 return;
 350                         // call clickHandler with custom event
 351                         clickHandler({
 352                                 target: findActive(index)[0]
 353                         });
 354                 };
 355
 356                 return container
 357                         .bind(settings.event, clickHandler)
 358                         .bind("activate", activateHandler);
 359         },
 360         activate: function(index) {
 361                 return this.trigger('activate', [index]);
 362         }
 363 });
 364
 365 })(jQuery);