aboutsummaryrefslogtreecommitdiffstats
path: root/template-common/lib/ui/ui.accordion.js
diff options
context:
space:
mode:
authornikrou <nikrou@piwigo.org>2010-02-20 19:56:36 +0000
committernikrou <nikrou@piwigo.org>2010-02-20 19:56:36 +0000
commit6acc3ff7909dd7f070973c112ebd9291862982f8 (patch)
tree20a0875d668206917f88b73983d7021038b43170 /template-common/lib/ui/ui.accordion.js
parent0c4bdbe01325869a62380c1d2804c34e8a31c1dd (diff)
Feature 1442 : update jquery
* update jquery to 1.4.1 * update jquery ui to 1.7.2 git-svn-id: http://piwigo.org/svn/trunk@4918 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'template-common/lib/ui/ui.accordion.js')
-rw-r--r--template-common/lib/ui/ui.accordion.js590
1 files changed, 386 insertions, 204 deletions
diff --git a/template-common/lib/ui/ui.accordion.js b/template-common/lib/ui/ui.accordion.js
index 2cf014b8e..e469c3a61 100644
--- a/template-common/lib/ui/ui.accordion.js
+++ b/template-common/lib/ui/ui.accordion.js
@@ -1,7 +1,7 @@
/*
- * jQuery UI Accordion
- *
- * Copyright (c) 2007, 2008 Jörn Zaefferer
+ * jQuery UI Accordion 1.7.2
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
@@ -13,229 +13,389 @@
(function($) {
$.widget("ui.accordion", {
- init: function() {
- var options = this.options;
-
- if ( options.navigation ) {
- var current = this.element.find("a").filter(options.navigationFilter);
+
+ _init: function() {
+
+ var o = this.options, self = this;
+ this.running = 0;
+
+ // if the user set the alwaysOpen option on init
+ // then we need to set the collapsible option
+ // if they set both on init, collapsible will take priority
+ if (o.collapsible == $.ui.accordion.defaults.collapsible &&
+ o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
+ o.collapsible = !o.alwaysOpen;
+ }
+
+ if ( o.navigation ) {
+ var current = this.element.find("a").filter(o.navigationFilter);
if ( current.length ) {
- if ( current.filter(options.header).length ) {
- options.active = current;
+ if ( current.filter(o.header).length ) {
+ this.active = current;
} else {
- options.active = current.parent().parent().prev();
- current.addClass("current");
+ this.active = current.parent().parent().prev();
+ current.addClass("ui-accordion-content-active");
}
}
}
+
+ this.element.addClass("ui-accordion ui-widget ui-helper-reset");
- // calculate active if not specified, using the first header
- options.headers = this.element.find(options.header);
- options.active = findActive(options.headers, options.active);
-
- // IE7-/Win - Extra vertical space in Lists fixed
+ // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
+ if (this.element[0].nodeName == "UL") {
+ this.element.children("li").addClass("ui-accordion-li-fix");
+ }
+
+ this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
+ .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
+ .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
+ .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
+ .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });
+
+ this.headers
+ .next()
+ .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
+
+ this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
+ this.active.next().addClass('ui-accordion-content-active');
+
+ //Append icon elements
+ $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
+ this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
+
+ // IE7-/Win - Extra vertical space in lists fixed
if ($.browser.msie) {
this.element.find('a').css('zoom', '1');
}
-
- if (!this.element.hasClass("ui-accordion")) {
- this.element.addClass("ui-accordion");
- $("<span class='ui-accordion-left'/>").insertBefore(options.headers);
- $("<span class='ui-accordion-right'/>").appendTo(options.headers);
- options.headers.addClass("ui-accordion-header").attr("tabindex", "0");
+
+ this.resize();
+
+ //ARIA
+ this.element.attr('role','tablist');
+
+ this.headers
+ .attr('role','tab')
+ .bind('keydown', function(event) { return self._keydown(event); })
+ .next()
+ .attr('role','tabpanel');
+
+ this.headers
+ .not(this.active || "")
+ .attr('aria-expanded','false')
+ .attr("tabIndex", "-1")
+ .next()
+ .hide();
+
+ // make sure at least one header is in the tab order
+ if (!this.active.length) {
+ this.headers.eq(0).attr('tabIndex','0');
+ } else {
+ this.active
+ .attr('aria-expanded','true')
+ .attr('tabIndex', '0');
}
-
- var maxHeight;
- if ( options.fillSpace ) {
+
+ // only need links in taborder for Safari
+ if (!$.browser.safari)
+ this.headers.find('a').attr('tabIndex','-1');
+
+ if (o.event) {
+ this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); });
+ }
+
+ },
+
+ destroy: function() {
+ var o = this.options;
+
+ this.element
+ .removeClass("ui-accordion ui-widget ui-helper-reset")
+ .removeAttr("role")
+ .unbind('.accordion')
+ .removeData('accordion');
+
+ this.headers
+ .unbind(".accordion")
+ .removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
+ .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
+
+ this.headers.find("a").removeAttr("tabindex");
+ this.headers.children(".ui-icon").remove();
+ 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");
+ if (o.autoHeight || o.fillHeight) {
+ contents.css("height", "");
+ }
+ },
+
+ _setData: function(key, value) {
+ if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
+ $.widget.prototype._setData.apply(this, arguments);
+ },
+
+ _keydown: function(event) {
+
+ var o = this.options, keyCode = $.ui.keyCode;
+
+ if (o.disabled || event.altKey || event.ctrlKey)
+ return;
+
+ var length = this.headers.length;
+ var currentIndex = this.headers.index(event.target);
+ var toFocus = false;
+
+ switch(event.keyCode) {
+ case keyCode.RIGHT:
+ case keyCode.DOWN:
+ toFocus = this.headers[(currentIndex + 1) % length];
+ break;
+ case keyCode.LEFT:
+ case keyCode.UP:
+ toFocus = this.headers[(currentIndex - 1 + length) % length];
+ break;
+ case keyCode.SPACE:
+ case keyCode.ENTER:
+ return this._clickHandler({ target: event.target }, event.target);
+ }
+
+ if (toFocus) {
+ $(event.target).attr('tabIndex','-1');
+ $(toFocus).attr('tabIndex','0');
+ toFocus.focus();
+ return false;
+ }
+
+ return true;
+
+ },
+
+ resize: function() {
+
+ var o = this.options, maxHeight;
+
+ if (o.fillSpace) {
+
+ if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); }
maxHeight = this.element.parent().height();
- options.headers.each(function() {
+ if($.browser.msie) { this.element.parent().css('overflow', defOverflow); }
+
+ this.headers.each(function() {
maxHeight -= $(this).outerHeight();
});
+
var maxPadding = 0;
- options.headers.next().each(function() {
+ this.headers.next().each(function() {
maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
- }).height(maxHeight - maxPadding);
- } else if ( options.autoHeight ) {
+ }).height(Math.max(0, maxHeight - maxPadding))
+ .css('overflow', 'auto');
+
+ } else if ( o.autoHeight ) {
maxHeight = 0;
- options.headers.next().each(function() {
+ this.headers.next().each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
}).height(maxHeight);
}
-
- options.headers
- .not(options.active || "")
- .next()
- .hide();
- options.active.parent().andSelf().addClass(options.selectedClass);
-
- if (options.event) {
- this.element.bind((options.event) + ".accordion", clickHandler);
- }
+
},
+
activate: function(index) {
// call clickHandler with custom event
- clickHandler.call(this.element[0], {
- target: findActive( this.options.headers, index )[0]
- });
+ var active = this._findActive(index)[0];
+ this._clickHandler({ target: active }, active);
},
- destroy: function() {
- this.options.headers.next().css("display", "");
- if ( this.options.fillSpace || this.options.autoHeight ) {
- this.options.headers.next().css("height", "");
+
+ _findActive: function(selector) {
+ return selector
+ ? typeof selector == "number"
+ ? this.headers.filter(":eq(" + selector + ")")
+ : this.headers.not(this.headers.not(selector))
+ : selector === false
+ ? $([])
+ : this.headers.filter(":eq(0)");
+ },
+
+ _clickHandler: function(event, target) {
+
+ var o = this.options;
+ if (o.disabled) return false;
+
+ // called only when using activate(false) to close all parts programmatically
+ if (!event.target && o.collapsible) {
+ this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
+ .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
+ this.active.next().addClass('ui-accordion-content-active');
+ var toHide = this.active.next(),
+ data = {
+ options: o,
+ newHeader: $([]),
+ oldHeader: o.active,
+ newContent: $([]),
+ oldContent: toHide
+ },
+ toShow = (this.active = $([]));
+ this._toggle(toShow, toHide, data);
+ return false;
}
- $.removeData(this.element[0], "accordion");
- this.element.removeClass("ui-accordion").unbind(".accordion");
- }
-});
-function scopeCallback(callback, scope) {
- return function() {
- return callback.apply(scope, arguments);
- };
-};
+ // get the click target
+ var clicked = $(event.currentTarget || target);
+ var clickedIsActive = clicked[0] == this.active[0];
-function completed(cancel) {
- // if removed while animated data can be empty
- if (!$.data(this, "accordion")) {
- return;
- }
-
- var instance = $.data(this, "accordion");
- var options = instance.options;
- options.running = cancel ? 0 : --options.running;
- if ( options.running ) {
- return;
- }
- if ( options.clearStyle ) {
- options.toShow.add(options.toHide).css({
- height: "",
- overflow: ""
- });
- }
- $(this).triggerHandler("accordionchange", [$.event.fix({type: 'accordionchange', target: instance.element[0]}), options.data], options.change);
-}
-
-function toggle(toShow, toHide, data, clickedActive, down) {
- var options = $.data(this, "accordion").options;
- options.toShow = toShow;
- options.toHide = toHide;
- options.data = data;
- var complete = scopeCallback(completed, this);
-
- // count elements to animate
- options.running = toHide.size() === 0 ? toShow.size() : toHide.size();
-
- if ( options.animated ) {
- if ( !options.alwaysOpen && clickedActive ) {
- $.ui.accordion.animations[options.animated]({
- toShow: jQuery([]),
- toHide: toHide,
- complete: complete,
- down: down,
- autoHeight: options.autoHeight
- });
- } else {
- $.ui.accordion.animations[options.animated]({
- toShow: toShow,
- toHide: toHide,
- complete: complete,
- down: down,
- autoHeight: options.autoHeight
- });
+ // if animations are still active, or the active header is the target, ignore click
+ if (this.running || (!o.collapsible && clickedIsActive)) {
+ return false;
}
- } else {
- if ( !options.alwaysOpen && clickedActive ) {
- toShow.toggle();
- } else {
- toHide.hide();
- toShow.show();
+
+ // switch classes
+ this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
+ .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
+ this.active.next().addClass('ui-accordion-content-active');
+ if (!clickedIsActive) {
+ clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
+ .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
+ clicked.next().addClass('ui-accordion-content-active');
}
- complete(true);
- }
-}
-function clickHandler(event) {
- var options = $.data(this, "accordion").options;
- if (options.disabled) {
- return false;
- }
-
- // called only when using activate(false) to close all parts programmatically
- if ( !event.target && !options.alwaysOpen ) {
- options.active.parent().andSelf().toggleClass(options.selectedClass);
- var toHide = options.active.next(),
+ // find elements to show and hide
+ var toShow = clicked.next(),
+ toHide = this.active.next(),
data = {
- options: options,
- newHeader: jQuery([]),
- oldHeader: options.active,
- newContent: jQuery([]),
- oldContent: toHide
+ options: o,
+ newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
+ oldHeader: this.active,
+ newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
+ oldContent: toHide.find('> *')
},
- toShow = (options.active = $([]));
- toggle.call(this, toShow, toHide, data );
- return false;
- }
- // get the click target
- var clicked = $(event.target);
-
- // due to the event delegation model, we have to check if one
- // of the parent elements is our actual header, and find that
- // otherwise stick with the initial target
- clicked = $( clicked.parents(options.header)[0] || clicked );
-
- var clickedActive = clicked[0] == options.active[0];
-
- // if animations are still active, or the active header is the target, ignore click
- if (options.running || (options.alwaysOpen && clickedActive)) {
+ down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
+
+ this.active = clickedIsActive ? $([]) : clicked;
+ this._toggle(toShow, toHide, data, clickedIsActive, down);
+
return false;
+
+ },
+
+ _toggle: function(toShow, toHide, data, clickedIsActive, down) {
+
+ var o = this.options, self = this;
+
+ this.toShow = toShow;
+ this.toHide = toHide;
+ this.data = data;
+
+ var complete = function() { if(!self) return; return self._completed.apply(self, arguments); };
+
+ // trigger changestart event
+ this._trigger("changestart", null, this.data);
+
+ // count elements to animate
+ this.running = toHide.size() === 0 ? toShow.size() : toHide.size();
+
+ if (o.animated) {
+
+ var animOptions = {};
+
+ if ( o.collapsible && clickedIsActive ) {
+ animOptions = {
+ toShow: $([]),
+ toHide: toHide,
+ complete: complete,
+ down: down,
+ autoHeight: o.autoHeight || o.fillSpace
+ };
+ } else {
+ animOptions = {
+ toShow: toShow,
+ toHide: toHide,
+ complete: complete,
+ down: down,
+ autoHeight: o.autoHeight || o.fillSpace
+ };
+ }
+
+ if (!o.proxied) {
+ o.proxied = o.animated;
+ }
+
+ if (!o.proxiedDuration) {
+ o.proxiedDuration = o.duration;
+ }
+
+ o.animated = $.isFunction(o.proxied) ?
+ o.proxied(animOptions) : o.proxied;
+
+ o.duration = $.isFunction(o.proxiedDuration) ?
+ o.proxiedDuration(animOptions) : o.proxiedDuration;
+
+ var animations = $.ui.accordion.animations,
+ duration = o.duration,
+ easing = o.animated;
+
+ if (!animations[easing]) {
+ animations[easing] = function(options) {
+ this.slide(options, {
+ easing: easing,
+ duration: duration || 700
+ });
+ };
+ }
+
+ animations[easing](animOptions);
+
+ } else {
+
+ if (o.collapsible && clickedIsActive) {
+ toShow.toggle();
+ } else {
+ toHide.hide();
+ toShow.show();
+ }
+
+ complete(true);
+
+ }
+
+ toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur();
+ toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus();
+
+ },
+
+ _completed: function(cancel) {
+
+ var o = this.options;
+
+ this.running = cancel ? 0 : --this.running;
+ if (this.running) return;
+
+ if (o.clearStyle) {
+ this.toShow.add(this.toHide).css({
+ height: "",
+ overflow: ""
+ });
+ }
+
+ this._trigger('change', null, this.data);
}
- if (!clicked.is(options.header)) {
- return;
- }
-
- // switch classes
- options.active.parent().andSelf().toggleClass(options.selectedClass);
- if ( !clickedActive ) {
- clicked.parent().andSelf().addClass(options.selectedClass);
- }
-
- // find elements to show and hide
- var toShow = clicked.next(),
- toHide = options.active.next(),
- //data = [clicked, options.active, toShow, toHide],
- data = {
- options: options,
- newHeader: clicked,
- oldHeader: options.active,
- newContent: toShow,
- oldContent: toHide
- },
- down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
-
- options.active = clickedActive ? $([]) : clicked;
- toggle.call(this, toShow, toHide, data, clickedActive, down );
-
- return false;
-};
-
-function findActive(headers, selector) {
- return selector != undefined
- ? typeof selector == "number"
- ? headers.filter(":eq(" + selector + ")")
- : headers.not(headers.not(selector))
- : selector === false
- ? $([])
- : headers.filter(":eq(0)");
-}
+
+});
+
$.extend($.ui.accordion, {
+ version: "1.7.2",
defaults: {
- selectedClass: "selected",
- alwaysOpen: true,
+ active: null,
+ alwaysOpen: true, //deprecated, use collapsible
animated: 'slide',
- event: "click",
- header: "a",
autoHeight: true,
- running: 0,
+ clearStyle: false,
+ collapsible: false,
+ event: "click",
+ fillSpace: false,
+ header: "> li > :first-child,> :not(li):even",
+ icons: {
+ header: "ui-icon-triangle-1-e",
+ headerSelected: "ui-icon-triangle-1-s"
+ },
+ navigation: false,
navigationFilter: function() {
return this.href.toLowerCase() == location.href.toLowerCase();
}
@@ -250,31 +410,58 @@ $.extend($.ui.accordion, {
options.toShow.animate({height: "show"}, options);
return;
}
- var hideHeight = options.toHide.height(),
- showHeight = options.toShow.height(),
- difference = showHeight / hideHeight;
+ if ( !options.toShow.size() ) {
+ options.toHide.animate({height: "hide"}, options);
+ return;
+ }
+ var overflow = options.toShow.css('overflow'),
+ percentDone,
+ showProps = {},
+ hideProps = {},
+ fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
+ originalWidth;
+ // fix width before calculating height of hidden element
+ var s = options.toShow;
+ originalWidth = s[0].style.width;
+ 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) );
+
+ $.each(fxAttrs, function(i, prop) {
+ hideProps[prop] = 'hide';
+
+ var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
+ showProps[prop] = {
+ value: parts[1],
+ unit: parts[2] || 'px'
+ };
+ });
options.toShow.css({ height: 0, overflow: 'hidden' }).show();
- options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
- step: function(now) {
- var current = (hideHeight - now) * difference;
- if ($.browser.msie || $.browser.opera) {
- current = Math.ceil(current);
+ options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
+ step: function(now, settings) {
+ // only calculate the percent when animating height
+ // IE gets very inconsistent results when animating elements
+ // with small values, which is common for padding
+ if (settings.prop == 'height') {
+ percentDone = (settings.now - settings.start) / (settings.end - settings.start);
}
- options.toShow.height( current );
+
+ options.toShow[0].style[settings.prop] =
+ (percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
},
duration: options.duration,
easing: options.easing,
complete: function() {
if ( !options.autoHeight ) {
- options.toShow.css("height", "auto");
+ options.toShow.css("height", "");
}
+ options.toShow.css("width", originalWidth);
+ options.toShow.css({overflow: overflow});
options.complete();
}
});
},
bounceslide: function(options) {
this.slide(options, {
- easing: options.down ? "bounceout" : "swing",
+ easing: options.down ? "easeOutBounce" : "swing",
duration: options.down ? 1000 : 200
});
},
@@ -287,9 +474,4 @@ $.extend($.ui.accordion, {
}
});
-// deprecated, use accordion("activate", index) instead
-$.fn.activate = function(index) {
- return this.accordion("activate", index);
-};
-
})(jQuery);