js2/mwEmbed/jquery/jquery.ui/ui/ui.accordion.js

   1 /*
   2  * jQuery UI Accordion 1.7.1
   3  *
   4  * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT (MIT-LICENSE.txt)
   6  * and GPL (GPL-LICENSE.txt) licenses.
   7  *
   8  * http://docs.jquery.com/UI/Accordion
   9  *
  10  * Depends:
  11  *      ui.core.js
  12  */
  13 (function($) {
  14
  15 $.widget("ui.accordion", {
  16
  17         _init: function() {
  18
  19                 var o = this.options, self = this;
  20                 this.running = 0;
  21
  22                 // if the user set the alwaysOpen option on init
  23                 // then we need to set the collapsible option
  24                 // if they set both on init, collapsible will take priority
  25                 if (o.collapsible == $.ui.accordion.defaults.collapsible &&
  26                         o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
  27                         o.collapsible = !o.alwaysOpen;
  28                 }
  29
  30                 if ( o.navigation ) {
  31                         var current = this.element.find("a").filter(o.navigationFilter);
  32                         if ( current.length ) {
  33                                 if ( current.filter(o.header).length ) {
  34                                         this.active = current;
  35                                 } else {
  36                                         this.active = current.parent().parent().prev();
  37                                         current.addClass("ui-accordion-content-active");
  38                                 }
  39                         }
  40                 }
  41
  42                 this.element.addClass("ui-accordion ui-widget ui-helper-reset");
  43
  44                 // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
  45                 if (this.element[0].nodeName == "UL") {
  46                         this.element.children("li").addClass("ui-accordion-li-fix");
  47                 }
  48
  49                 this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
  50                         .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
  51                         .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
  52                         .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
  53                         .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });
  54
  55                 this.headers
  56                         .next()
  57                                 .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
  58
  59                 this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
  60                 this.active.next().addClass('ui-accordion-content-active');
  61
  62                 //Append icon elements
  63                 $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
  64                 this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
  65
  66                 // IE7-/Win - Extra vertical space in lists fixed
  67                 if ($.browser.msie) {
  68                         this.element.find('a').css('zoom', '1');
  69                 }
  70
  71                 this.resize();
  72
  73                 //ARIA
  74                 this.element.attr('role','tablist');
  75
  76                 this.headers
  77                         .attr('role','tab')
  78                         .bind('keydown', function(event) { return self._keydown(event); })
  79                         .next()
  80                         .attr('role','tabpanel');
  81
  82                 this.headers
  83                         .not(this.active || "")
  84                         .attr('aria-expanded','false')
  85                         .attr("tabIndex", "-1")
  86                         .next()
  87                         .hide();
  88
  89                 // make sure at least one header is in the tab order
  90                 if (!this.active.length) {
  91                         this.headers.eq(0).attr('tabIndex','0');
  92                 } else {
  93                         this.active
  94                                 .attr('aria-expanded','true')
  95                                 .attr('tabIndex', '0');
  96                 }
  97
  98                 // only need links in taborder for Safari
  99                 if (!$.browser.safari)
 100                         this.headers.find('a').attr('tabIndex','-1');
 101
 102                 if (o.event) {
 103                         this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); });
 104                 }
 105
 106         },
 107
 108         destroy: function() {
 109                 var o = this.options;
 110
 111                 this.element
 112                         .removeClass("ui-accordion ui-widget ui-helper-reset")
 113                         .removeAttr("role")
 114                         .unbind('.accordion')
 115                         .removeData('accordion');
 116
 117                 this.headers
 118                         .unbind(".accordion")
 119                         .removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
 120                         .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
 121
 122                 this.headers.find("a").removeAttr("tabindex");
 123                 this.headers.children(".ui-icon").remove();
 124                 var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
 125                 if (o.autoHeight || o.fillHeight) {
 126                         contents.css("height", "");
 127                 }
 128         },
 129
 130         _setData: function(key, value) {
 131                 if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
 132                 $.widget.prototype._setData.apply(this, arguments);
 133         },
 134
 135         _keydown: function(event) {
 136
 137                 var o = this.options, keyCode = $.ui.keyCode;
 138
 139                 if (o.disabled || event.altKey || event.ctrlKey)
 140                         return;
 141
 142                 var length = this.headers.length;
 143                 var currentIndex = this.headers.index(event.target);
 144                 var toFocus = false;
 145
 146                 switch(event.keyCode) {
 147                         case keyCode.RIGHT:
 148                         case keyCode.DOWN:
 149                                 toFocus = this.headers[(currentIndex + 1) % length];
 150                                 break;
 151                         case keyCode.LEFT:
 152                         case keyCode.UP:
 153                                 toFocus = this.headers[(currentIndex - 1 + length) % length];
 154                                 break;
 155                         case keyCode.SPACE:
 156                         case keyCode.ENTER:
 157                                 return this._clickHandler({ target: event.target }, event.target);
 158                 }
 159
 160                 if (toFocus) {
 161                         $(event.target).attr('tabIndex','-1');
 162                         $(toFocus).attr('tabIndex','0');
 163                         toFocus.focus();
 164                         return false;
 165                 }
 166
 167                 return true;
 168
 169         },
 170
 171         resize: function() {
 172
 173                 var o = this.options, maxHeight;
 174
 175                 if (o.fillSpace) {
 176
 177                         if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); }
 178                         maxHeight = this.element.parent().height();
 179                         if($.browser.msie) { this.element.parent().css('overflow', defOverflow); }
 180
 181                         this.headers.each(function() {
 182                                 maxHeight -= $(this).outerHeight();
 183                         });
 184
 185                         var maxPadding = 0;
 186                         this.headers.next().each(function() {
 187                                 maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
 188                         }).height(Math.max(0, maxHeight - maxPadding))
 189                         .css('overflow', 'auto');
 190
 191                 } else if ( o.autoHeight ) {
 192                         maxHeight = 0;
 193                         this.headers.next().each(function() {
 194                                 maxHeight = Math.max(maxHeight, $(this).outerHeight());
 195                         }).height(maxHeight);
 196                 }
 197
 198         },
 199
 200         activate: function(index) {
 201                 // call clickHandler with custom event
 202                 var active = this._findActive(index)[0];
 203                 this._clickHandler({ target: active }, active);
 204         },
 205
 206         _findActive: function(selector) {
 207                 return selector
 208                         ? typeof selector == "number"
 209                                 ? this.headers.filter(":eq(" + selector + ")")
 210                                 : this.headers.not(this.headers.not(selector))
 211                         : selector === false
 212                                 ? $([])
 213                                 : this.headers.filter(":eq(0)");
 214         },
 215
 216         _clickHandler: function(event, target) {
 217
 218                 var o = this.options;
 219                 if (o.disabled) return false;
 220
 221                 // called only when using activate(false) to close all parts programmatically
 222                 if (!event.target && o.collapsible) {
 223                         this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
 224                                 .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
 225                         this.active.next().addClass('ui-accordion-content-active');
 226                         var toHide = this.active.next(),
 227                                 data = {
 228                                         options: o,
 229                                         newHeader: $([]),
 230                                         oldHeader: o.active,
 231                                         newContent: $([]),
 232                                         oldContent: toHide
 233                                 },
 234                                 toShow = (this.active = $([]));
 235                         this._toggle(toShow, toHide, data);
 236                         return false;
 237                 }
 238
 239                 // get the click target
 240                 var clicked = $(event.currentTarget || target);
 241                 var clickedIsActive = clicked[0] == this.active[0];
 242
 243                 // if animations are still active, or the active header is the target, ignore click
 244                 if (this.running || (!o.collapsible && clickedIsActive)) {
 245                         return false;
 246                 }
 247
 248                 // switch classes
 249                 this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
 250                         .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
 251                 this.active.next().addClass('ui-accordion-content-active');
 252                 if (!clickedIsActive) {
 253                         clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
 254                                 .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
 255                         clicked.next().addClass('ui-accordion-content-active');
 256                 }
 257
 258                 // find elements to show and hide
 259                 var toShow = clicked.next(),
 260                         toHide = this.active.next(),
 261                         data = {
 262                                 options: o,
 263                                 newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
 264                                 oldHeader: this.active,
 265                                 newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
 266                                 oldContent: toHide.find('> *')
 267                         },
 268                         down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
 269
 270                 this.active = clickedIsActive ? $([]) : clicked;
 271                 this._toggle(toShow, toHide, data, clickedIsActive, down);
 272
 273                 return false;
 274
 275         },
 276
 277         _toggle: function(toShow, toHide, data, clickedIsActive, down) {
 278
 279                 var o = this.options, self = this;
 280
 281                 this.toShow = toShow;
 282                 this.toHide = toHide;
 283                 this.data = data;
 284
 285                 var complete = function() { if(!self) return; return self._completed.apply(self, arguments); };
 286
 287                 // trigger changestart event
 288                 this._trigger("changestart", null, this.data);
 289
 290                 // count elements to animate
 291                 this.running = toHide.size() === 0 ? toShow.size() : toHide.size();
 292
 293                 if (o.animated) {
 294
 295                         var animOptions = {};
 296
 297                         if ( o.collapsible && clickedIsActive ) {
 298                                 animOptions = {
 299                                         toShow: $([]),
 300                                         toHide: toHide,
 301                                         complete: complete,
 302                                         down: down,
 303                                         autoHeight: o.autoHeight || o.fillSpace
 304                                 };
 305                         } else {
 306                                 animOptions = {
 307                                         toShow: toShow,
 308                                         toHide: toHide,
 309                                         complete: complete,
 310                                         down: down,
 311                                         autoHeight: o.autoHeight || o.fillSpace
 312                                 };
 313                         }
 314
 315                         if (!o.proxied) {
 316                                 o.proxied = o.animated;
 317                         }
 318
 319                         if (!o.proxiedDuration) {
 320                                 o.proxiedDuration = o.duration;
 321                         }
 322
 323                         o.animated = $.isFunction(o.proxied) ?
 324                                 o.proxied(animOptions) : o.proxied;
 325
 326                         o.duration = $.isFunction(o.proxiedDuration) ?
 327                                 o.proxiedDuration(animOptions) : o.proxiedDuration;
 328
 329                         var animations = $.ui.accordion.animations,
 330                                 duration = o.duration,
 331                                 easing = o.animated;
 332
 333                         if (!animations[easing]) {
 334                                 animations[easing] = function(options) {
 335                                         this.slide(options, {
 336                                                 easing: easing,
 337                                                 duration: duration || 700
 338                                         });
 339                                 };
 340                         }
 341
 342                         animations[easing](animOptions);
 343
 344                 } else {
 345
 346                         if (o.collapsible && clickedIsActive) {
 347                                 toShow.toggle();
 348                         } else {
 349                                 toHide.hide();
 350                                 toShow.show();
 351                         }
 352
 353                         complete(true);
 354
 355                 }
 356
 357                 toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur();
 358                 toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus();
 359
 360         },
 361
 362         _completed: function(cancel) {
 363
 364                 var o = this.options;
 365
 366                 this.running = cancel ? 0 : --this.running;
 367                 if (this.running) return;
 368
 369                 if (o.clearStyle) {
 370                         this.toShow.add(this.toHide).css({
 371                                 height: "",
 372                                 overflow: ""
 373                         });
 374                 }
 375
 376                 this._trigger('change', null, this.data);
 377         }
 378
 379 });
 380
 381
 382 $.extend($.ui.accordion, {
 383         version: "1.7.1",
 384         defaults: {
 385                 active: null,
 386                 alwaysOpen: true, //deprecated, use collapsible
 387                 animated: 'slide',
 388                 autoHeight: true,
 389                 clearStyle: false,
 390                 collapsible: false,
 391                 event: "click",
 392                 fillSpace: false,
 393                 header: "> li > :first-child,> :not(li):even",
 394                 icons: {
 395                         header: "ui-icon-triangle-1-e",
 396                         headerSelected: "ui-icon-triangle-1-s"
 397                 },
 398                 navigation: false,
 399                 navigationFilter: function() {
 400                         return this.href.toLowerCase() == location.href.toLowerCase();
 401                 }
 402         },
 403         animations: {
 404                 slide: function(options, additions) {
 405                         options = $.extend({
 406                                 easing: "swing",
 407                                 duration: 300
 408                         }, options, additions);
 409                         if ( !options.toHide.size() ) {
 410                                 options.toShow.animate({height: "show"}, options);
 411                                 return;
 412                         }
 413                         if ( !options.toShow.size() ) {
 414                                 options.toHide.animate({height: "hide"}, options);
 415                                 return;
 416                         }
 417                         var overflow = options.toShow.css('overflow'),
 418                                 percentDone,
 419                                 showProps = {},
 420                                 hideProps = {},
 421                                 fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
 422                                 originalWidth;
 423                         // fix width before calculating height of hidden element
 424                         var s = options.toShow;
 425                         originalWidth = s[0].style.width;
 426                         s.width( parseInt(s.parent().width(),10) - parseInt(s.css("paddingLeft"),10) - parseInt(s.css("paddingRight"),10) - (parseInt(s.css("borderLeftWidth"),10) || 0) - (parseInt(s.css("borderRightWidth"),10) || 0) );
 427
 428                         $.each(fxAttrs, function(i, prop) {
 429                                 hideProps[prop] = 'hide';
 430
 431                                 var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
 432                                 showProps[prop] = {
 433                                         value: parts[1],
 434                                         unit: parts[2] || 'px'
 435                                 };
 436                         });
 437                         options.toShow.css({ height: 0, overflow: 'hidden' }).show();
 438                         options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
 439                                 step: function(now, settings) {
 440                                         // only calculate the percent when animating height
 441                                         // IE gets very inconsistent results when animating elements
 442                                         // with small values, which is common for padding
 443                                         if (settings.prop == 'height') {
 444                                                 percentDone = (settings.now - settings.start) / (settings.end - settings.start);
 445                                         }
 446
 447                                         options.toShow[0].style[settings.prop] =
 448                                                 (percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
 449                                 },
 450                                 duration: options.duration,
 451                                 easing: options.easing,
 452                                 complete: function() {
 453                                         if ( !options.autoHeight ) {
 454                                                 options.toShow.css("height", "");
 455                                         }
 456                                         options.toShow.css("width", originalWidth);
 457                                         options.toShow.css({overflow: overflow});
 458                                         options.complete();
 459                                 }
 460                         });
 461                 },
 462                 bounceslide: function(options) {
 463                         this.slide(options, {
 464                                 easing: options.down ? "easeOutBounce" : "swing",
 465                                 duration: options.down ? 1000 : 200
 466                         });
 467                 },
 468                 easeslide: function(options) {
 469                         this.slide(options, {
 470                                 easing: "easeinout",
 471                                 duration: 700
 472                         });
 473                 }
 474         }
 475 });
 476
 477 })(jQuery);