+++ /dev/null
-/*
-Copyright (c) 2009, Yahoo! Inc. All rights reserved.
-Code licensed under the BSD License:
-http://developer.yahoo.net/yui/license.txt
-version: 2.7.0
-*/
-/**
- * The Carousel module provides a widget for browsing among a set of like
- * objects represented pictorially.
- *
- * @module carousel
- * @requires yahoo, dom, event, element
- * @optional animation
- * @namespace YAHOO.widget
- * @title Carousel Widget
- * @beta
- */
-(function () {
-
- var WidgetName; // forward declaration
-
- /**
- * The Carousel widget.
- *
- * @class Carousel
- * @extends YAHOO.util.Element
- * @constructor
- * @param el {HTMLElement | String} The HTML element that represents the
- * the container that houses the Carousel.
- * @param cfg {Object} (optional) The configuration values
- */
- YAHOO.widget.Carousel = function (el, cfg) {
- YAHOO.log("Component creation", WidgetName);
-
- YAHOO.widget.Carousel.superclass.constructor.call(this, el, cfg);
- };
-
- /*
- * Private variables of the Carousel component
- */
-
- /* Some abbreviations to avoid lengthy typing and lookups. */
- var Carousel = YAHOO.widget.Carousel,
- Dom = YAHOO.util.Dom,
- Event = YAHOO.util.Event,
- JS = YAHOO.lang;
-
- /**
- * The widget name.
- * @private
- * @static
- */
- WidgetName = "Carousel";
-
- /**
- * The internal table of Carousel instances.
- * @private
- * @static
- */
- var instances = {},
-
- /*
- * Custom events of the Carousel component
- */
-
- /**
- * @event afterScroll
- * @description Fires when the Carousel has scrolled to the previous or
- * next page. Passes back the index of the first and last visible items in
- * the Carousel. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- afterScrollEvent = "afterScroll",
-
- /**
- * @event allItemsRemovedEvent
- * @description Fires when all items have been removed from the Carousel.
- * See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- allItemsRemovedEvent = "allItemsRemoved",
-
- /**
- * @event beforeHide
- * @description Fires before the Carousel is hidden. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- beforeHideEvent = "beforeHide",
-
- /**
- * @event beforePageChange
- * @description Fires when the Carousel is about to scroll to the previous
- * or next page. Passes back the page number of the current page. Note
- * that the first page number is zero. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- beforePageChangeEvent = "beforePageChange",
-
- /**
- * @event beforeScroll
- * @description Fires when the Carousel is about to scroll to the previous
- * or next page. Passes back the index of the first and last visible items
- * in the Carousel and the direction (backward/forward) of the scroll. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- beforeScrollEvent = "beforeScroll",
-
- /**
- * @event beforeShow
- * @description Fires when the Carousel is about to be shown. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- beforeShowEvent = "beforeShow",
-
- /**
- * @event blur
- * @description Fires when the Carousel loses focus. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- blurEvent = "blur",
-
- /**
- * @event focus
- * @description Fires when the Carousel gains focus. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- focusEvent = "focus",
-
- /**
- * @event hide
- * @description Fires when the Carousel is hidden. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- hideEvent = "hide",
-
- /**
- * @event itemAdded
- * @description Fires when an item has been added to the Carousel. Passes
- * back the content of the item that would be added, the index at which the
- * item would be added, and the event itself. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- itemAddedEvent = "itemAdded",
-
- /**
- * @event itemRemoved
- * @description Fires when an item has been removed from the Carousel.
- * Passes back the content of the item that would be removed, the index
- * from which the item would be removed, and the event itself. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- itemRemovedEvent = "itemRemoved",
-
- /**
- * @event itemSelected
- * @description Fires when an item has been selected in the Carousel.
- * Passes back the index of the selected item in the Carousel. Note, that
- * the index begins from zero. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- itemSelectedEvent = "itemSelected",
-
- /**
- * @event loadItems
- * @description Fires when the Carousel needs more items to be loaded for
- * displaying them. Passes back the first and last visible items in the
- * Carousel, and the number of items needed to be loaded. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- loadItemsEvent = "loadItems",
-
- /**
- * @event navigationStateChange
- * @description Fires when the state of either one of the navigation
- * buttons are changed from enabled to disabled or vice versa. Passes back
- * the state (true/false) of the previous and next buttons. The value true
- * signifies the button is enabled, false signifies disabled. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- navigationStateChangeEvent = "navigationStateChange",
-
- /**
- * @event pageChange
- * @description Fires after the Carousel has scrolled to the previous or
- * next page. Passes back the page number of the current page. Note
- * that the first page number is zero. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- pageChangeEvent = "pageChange",
-
- /*
- * Internal event.
- * @event render
- * @description Fires when the Carousel is rendered. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- renderEvent = "render",
-
- /**
- * @event show
- * @description Fires when the Carousel is shown. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- showEvent = "show",
-
- /**
- * @event startAutoPlay
- * @description Fires when the auto play has started in the Carousel. See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- startAutoPlayEvent = "startAutoPlay",
-
- /**
- * @event stopAutoPlay
- * @description Fires when the auto play has been stopped in the Carousel.
- * See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- stopAutoPlayEvent = "stopAutoPlay",
-
- /*
- * Internal event.
- * @event uiUpdateEvent
- * @description Fires when the UI has been updated.
- * See
- * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
- * for more information on listening for this event.
- * @type YAHOO.util.CustomEvent
- */
- uiUpdateEvent = "uiUpdate";
-
- /*
- * Private helper functions used by the Carousel component
- */
-
- /**
- * Create an element, set its class name and optionally install the element
- * to its parent.
- * @method createElement
- * @param el {String} The element to be created
- * @param attrs {Object} Configuration of parent, class and id attributes.
- * If the content is specified, it is inserted after creation of the
- * element. The content can also be an HTML element in which case it would
- * be appended as a child node of the created element.
- * @private
- */
- function createElement(el, attrs) {
- var newEl = document.createElement(el);
-
- attrs = attrs || {};
- if (attrs.className) {
- Dom.addClass(newEl, attrs.className);
- }
-
- if (attrs.parent) {
- attrs.parent.appendChild(newEl);
- }
-
- if (attrs.id) {
- newEl.setAttribute("id", attrs.id);
- }
-
- if (attrs.content) {
- if (attrs.content.nodeName) {
- newEl.appendChild(attrs.content);
- } else {
- newEl.innerHTML = attrs.content;
- }
- }
-
- return newEl;
- }
-
- /**
- * Get the computed style of an element.
- *
- * @method getStyle
- * @param el {HTMLElement} The element for which the style needs to be
- * returned.
- * @param style {String} The style attribute
- * @param type {String} "int", "float", etc. (defaults to int)
- * @private
- */
- function getStyle(el, style, type) {
- var value;
-
- if (!el) {
- return 0;
- }
-
- function getStyleIntVal(el, style) {
- var val;
-
- /*
- * XXX: Safari calculates incorrect marginRight for an element
- * which has its parent element style set to overflow: hidden
- * https://bugs.webkit.org/show_bug.cgi?id=13343
- * Let us assume marginLeft == marginRight
- */
- if (style == "marginRight" && YAHOO.env.ua.webkit) {
- val = parseInt(Dom.getStyle(el, "marginLeft"), 10);
- } else {
- val = parseInt(Dom.getStyle(el, style), 10);
- }
-
- return JS.isNumber(val) ? val : 0;
- }
-
- function getStyleFloatVal(el, style) {
- var val;
-
- /*
- * XXX: Safari calculates incorrect marginRight for an element
- * which has its parent element style set to overflow: hidden
- * https://bugs.webkit.org/show_bug.cgi?id=13343
- * Let us assume marginLeft == marginRight
- */
- if (style == "marginRight" && YAHOO.env.ua.webkit) {
- val = parseFloat(Dom.getStyle(el, "marginLeft"));
- } else {
- val = parseFloat(Dom.getStyle(el, style));
- }
-
- return JS.isNumber(val) ? val : 0;
- }
-
- if (typeof type == "undefined") {
- type = "int";
- }
-
- switch (style) {
- case "height":
- value = el.offsetHeight;
- if (value > 0) {
- value += getStyleIntVal(el, "marginTop") +
- getStyleIntVal(el, "marginBottom");
- } else {
- value = getStyleFloatVal(el, "height") +
- getStyleIntVal(el, "marginTop") +
- getStyleIntVal(el, "marginBottom") +
- getStyleIntVal(el, "borderTopWidth") +
- getStyleIntVal(el, "borderBottomWidth") +
- getStyleIntVal(el, "paddingTop") +
- getStyleIntVal(el, "paddingBottom");
- }
- break;
- case "width":
- value = el.offsetWidth;
- if (value > 0) {
- value += getStyleIntVal(el, "marginLeft") +
- getStyleIntVal(el, "marginRight");
- } else {
- value = getStyleFloatVal(el, "width") +
- getStyleIntVal(el, "marginLeft") +
- getStyleIntVal(el, "marginRight") +
- getStyleIntVal(el, "borderLeftWidth") +
- getStyleIntVal(el, "borderRightWidth") +
- getStyleIntVal(el, "paddingLeft") +
- getStyleIntVal(el, "paddingRight");
- }
- break;
- default:
- if (type == "int") {
- value = getStyleIntVal(el, style);
- } else if (type == "float") {
- value = getStyleFloatVal(el, style);
- } else {
- value = Dom.getStyle(el, style);
- }
- break;
- }
-
- return value;
- }
-
- /**
- * Compute and return the height or width of a single Carousel item
- * depending upon the orientation.
- *
- * @method getCarouselItemSize
- * @param which {String} "height" or "width" to be returned. If this is
- * passed explicitly, the calculated size is not cached.
- * @private
- */
- function getCarouselItemSize(which) {
- var carousel = this,
- child,
- size = 0,
- vertical = false;
-
- if (carousel._itemsTable.numItems === 0) {
- return 0;
- }
-
- if (typeof which == "undefined") {
- if (carousel._itemsTable.size > 0) {
- return carousel._itemsTable.size;
- }
- }
-
- if (JS.isUndefined(carousel._itemsTable.items[0])) {
- return 0;
- }
-
- child = Dom.get(carousel._itemsTable.items[0].id);
-
- if (typeof which == "undefined") {
- vertical = carousel.get("isVertical");
- } else {
- vertical = which == "height";
- }
-
- if (vertical) {
- size = getStyle(child, "height");
- } else {
- size = getStyle(child, "width");
- }
-
- if (typeof which == "undefined") {
- carousel._itemsTable.size = size; // save the size for later
- }
-
- return size;
- }
-
- /**
- * Return the index of the first item in the view port for displaying item
- * in "pos".
- *
- * @method getFirstVisibleForPosition
- * @param pos {Number} The position of the item to be displayed
- * @private
- */
- function getFirstVisibleForPosition(pos) {
- var num = this.get("numVisible");
-
- return Math.floor(pos / num) * num;
- }
-
- /**
- * Return the scrolling offset size given the number of elements to
- * scroll.
- *
- * @method getScrollOffset
- * @param delta {Number} The delta number of elements to scroll by.
- * @private
- */
- function getScrollOffset(delta) {
- var itemSize = 0,
- size = 0;
-
- itemSize = getCarouselItemSize.call(this);
- size = itemSize * delta;
-
- // XXX: really, when the orientation is vertical, the scrolling
- // is not exactly the number of elements into element size.
- if (this.get("isVertical")) {
- size -= delta;
- }
-
- return size;
- }
-
- /**
- * Scroll the Carousel by a page backward.
- *
- * @method scrollPageBackward
- * @param {Event} ev The event object
- * @param {Object} obj The context object
- * @private
- */
- function scrollPageBackward(ev, obj) {
- obj.scrollPageBackward();
- Event.preventDefault(ev);
- }
-
- /**
- * Scroll the Carousel by a page forward.
- *
- * @method scrollPageForward
- * @param {Event} ev The event object
- * @param {Object} obj The context object
- * @private
- */
- function scrollPageForward(ev, obj) {
- obj.scrollPageForward();
- Event.preventDefault(ev);
- }
-
- /**
- * Set the selected item.
- *
- * @method setItemSelection
- * @param {Number} newpos The index of the new position
- * @param {Number} oldpos The index of the previous position
- * @private
- */
- function setItemSelection(newpos, oldpos) {
- var carousel = this,
- cssClass = carousel.CLASSES,
- el,
- firstItem = carousel._firstItem,
- isCircular = carousel.get("isCircular"),
- numItems = carousel.get("numItems"),
- numVisible = carousel.get("numVisible"),
- position = oldpos,
- sentinel = firstItem + numVisible - 1;
-
- if (position >= 0 && position < numItems) {
- if (!JS.isUndefined(carousel._itemsTable.items[position])) {
- el = Dom.get(carousel._itemsTable.items[position].id);
- if (el) {
- Dom.removeClass(el, cssClass.SELECTED_ITEM);
- }
- }
- }
-
- if (JS.isNumber(newpos)) {
- newpos = parseInt(newpos, 10);
- newpos = JS.isNumber(newpos) ? newpos : 0;
- } else {
- newpos = firstItem;
- }
-
- if (JS.isUndefined(carousel._itemsTable.items[newpos])) {
- newpos = getFirstVisibleForPosition.call(carousel, newpos);
- carousel.scrollTo(newpos); // still loading the item
- }
-
- if (!JS.isUndefined(carousel._itemsTable.items[newpos])) {
- el = Dom.get(carousel._itemsTable.items[newpos].id);
- if (el) {
- Dom.addClass(el, cssClass.SELECTED_ITEM);
- }
- }
-
- if (newpos < firstItem || newpos > sentinel) { // out of focus
- newpos = getFirstVisibleForPosition.call(carousel, newpos);
- carousel.scrollTo(newpos);
- }
- }
-
- /**
- * Fire custom events for enabling/disabling navigation elements.
- *
- * @method syncNavigation
- * @private
- */
- function syncNavigation() {
- var attach = false,
- carousel = this,
- cssClass = carousel.CLASSES,
- i,
- navigation,
- sentinel;
-
- // Don't do anything if the Carousel is not rendered
- if (!carousel._hasRendered) {
- return;
- }
-
- navigation = carousel.get("navigation");
- sentinel = carousel._firstItem + carousel.get("numVisible");
-
- if (navigation.prev) {
- if (carousel.get("numItems") === 0 || carousel._firstItem === 0) {
- if (carousel.get("numItems") === 0 ||
- !carousel.get("isCircular")) {
- Event.removeListener(navigation.prev, "click",
- scrollPageBackward);
- Dom.addClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
- for (i = 0; i < carousel._navBtns.prev.length; i++) {
- carousel._navBtns.prev[i].setAttribute("disabled",
- "true");
- }
- carousel._prevEnabled = false;
- } else {
- attach = !carousel._prevEnabled;
- }
- } else {
- attach = !carousel._prevEnabled;
- }
-
- if (attach) {
- Event.on(navigation.prev, "click", scrollPageBackward,
- carousel);
- Dom.removeClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
- for (i = 0; i < carousel._navBtns.prev.length; i++) {
- carousel._navBtns.prev[i].removeAttribute("disabled");
- }
- carousel._prevEnabled = true;
- }
- }
-
- attach = false;
- if (navigation.next) {
- if (sentinel >= carousel.get("numItems")) {
- if (!carousel.get("isCircular")) {
- Event.removeListener(navigation.next, "click",
- scrollPageForward);
- Dom.addClass(navigation.next, cssClass.DISABLED);
- for (i = 0; i < carousel._navBtns.next.length; i++) {
- carousel._navBtns.next[i].setAttribute("disabled",
- "true");
- }
- carousel._nextEnabled = false;
- } else {
- attach = !carousel._nextEnabled;
- }
- } else {
- attach = !carousel._nextEnabled;
- }
-
- if (attach) {
- Event.on(navigation.next, "click", scrollPageForward,
- carousel);
- Dom.removeClass(navigation.next, cssClass.DISABLED);
- for (i = 0; i < carousel._navBtns.next.length; i++) {
- carousel._navBtns.next[i].removeAttribute("disabled");
- }
- carousel._nextEnabled = true;
- }
- }
-
- carousel.fireEvent(navigationStateChangeEvent,
- { next: carousel._nextEnabled, prev: carousel._prevEnabled });
- }
-
- /**
- * Synchronize and redraw the Pager UI if necessary.
- *
- * @method syncPagerUi
- * @private
- */
- function syncPagerUi(page) {
- var carousel = this, numPages, numVisible;
-
- // Don't do anything if the Carousel is not rendered
- if (!carousel._hasRendered) {
- return;
- }
-
- numVisible = carousel.get("numVisible");
-
- if (!JS.isNumber(page)) {
- page = Math.ceil(carousel.get("selectedItem") / numVisible);
- }
- numPages = Math.ceil(carousel.get("numItems") / numVisible);
-
- carousel._pages.num = numPages;
- carousel._pages.cur = page;
-
- if (numPages > carousel.CONFIG.MAX_PAGER_BUTTONS) {
- carousel._updatePagerMenu();
- } else {
- carousel._updatePagerButtons();
- }
- }
-
- /**
- * Handle UI update.
- * Call the appropriate methods on events fired when an item is added, or
- * removed for synchronizing the DOM.
- *
- * @method syncUi
- * @param {Object} o The item that needs to be added or removed
- * @private
- */
- function syncUi(o) {
- var carousel = this;
-
- if (!JS.isObject(o)) {
- return;
- }
-
- switch (o.ev) {
- case itemAddedEvent:
- carousel._syncUiForItemAdd(o);
- break;
- case itemRemovedEvent:
- carousel._syncUiForItemRemove(o);
- break;
- case loadItemsEvent:
- carousel._syncUiForLazyLoading(o);
- break;
- }
-
- carousel.fireEvent(uiUpdateEvent);
- }
-
- /**
- * Update the state variables after scrolling the Carousel view port.
- *
- * @method updateStateAfterScroll
- * @param {Integer} item The index to which the Carousel has scrolled to.
- * @param {Integer} sentinel The last element in the view port.
- * @private
- */
- function updateStateAfterScroll(item, sentinel) {
- var carousel = this,
- page = carousel.get("currentPage"),
- newPage,
- numPerPage = carousel.get("numVisible");
-
- newPage = parseInt(carousel._firstItem / numPerPage, 10);
- if (newPage != page) {
- carousel.setAttributeConfig("currentPage", { value: newPage });
- carousel.fireEvent(pageChangeEvent, newPage);
- }
-
- if (carousel.get("selectOnScroll")) {
- if (carousel.get("selectedItem") != carousel._selectedItem) {
- carousel.set("selectedItem", carousel._selectedItem);
- }
- }
-
- clearTimeout(carousel._autoPlayTimer);
- delete carousel._autoPlayTimer;
- if (carousel.isAutoPlayOn()) {
- carousel.startAutoPlay();
- }
-
- carousel.fireEvent(afterScrollEvent,
- { first: carousel._firstItem,
- last: sentinel },
- carousel);
- }
-
- /*
- * Static members and methods of the Carousel component
- */
-
- /**
- * Return the appropriate Carousel object based on the id associated with
- * the Carousel element or false if none match.
- * @method getById
- * @public
- * @static
- */
- Carousel.getById = function (id) {
- return instances[id] ? instances[id].object : false;
- };
-
- YAHOO.extend(Carousel, YAHOO.util.Element, {
-
- /*
- * Internal variables used within the Carousel component
- */
-
- /**
- * The Animation object.
- *
- * @property _animObj
- * @private
- */
- _animObj: null,
-
- /**
- * The Carousel element.
- *
- * @property _carouselEl
- * @private
- */
- _carouselEl: null,
-
- /**
- * The Carousel clipping container element.
- *
- * @property _clipEl
- * @private
- */
- _clipEl: null,
-
- /**
- * The current first index of the Carousel.
- *
- * @property _firstItem
- * @private
- */
- _firstItem: 0,
-
- /**
- * Does the Carousel element have focus?
- *
- * @property _hasFocus
- * @private
- */
- _hasFocus: false,
-
- /**
- * Is the Carousel rendered already?
- *
- * @property _hasRendered
- * @private
- */
- _hasRendered: false,
-
- /**
- * Is the animation still in progress?
- *
- * @property _isAnimationInProgress
- * @private
- */
- _isAnimationInProgress: false,
-
- /**
- * Is the auto-scrolling of Carousel in progress?
- *
- * @property _isAutoPlayInProgress
- * @private
- */
- _isAutoPlayInProgress: false,
-
- /**
- * The table of items in the Carousel.
- * The numItems is the number of items in the Carousel, items being the
- * array of items in the Carousel. The size is the size of a single
- * item in the Carousel. It is cached here for efficiency (to avoid
- * computing the size multiple times).
- *
- * @property _itemsTable
- * @private
- */
- _itemsTable: null,
-
- /**
- * The Carousel navigation buttons.
- *
- * @property _navBtns
- * @private
- */
- _navBtns: null,
-
- /**
- * The Carousel navigation.
- *
- * @property _navEl
- * @private
- */
- _navEl: null,
-
- /**
- * Status of the next navigation item.
- *
- * @property _nextEnabled
- * @private
- */
- _nextEnabled: true,
-
- /**
- * The Carousel pages structure.
- * This is an object of the total number of pages and the current page.
- *
- * @property _pages
- * @private
- */
- _pages: null,
-
- /**
- * Status of the previous navigation item.
- *
- * @property _prevEnabled
- * @private
- */
- _prevEnabled: true,
-
- /**
- * Whether the Carousel size needs to be recomputed or not?
- *
- * @property _recomputeSize
- * @private
- */
- _recomputeSize: true,
-
- /*
- * CSS classes used by the Carousel component
- */
-
- CLASSES: {
-
- /**
- * The class name of the Carousel navigation buttons.
- *
- * @property BUTTON
- * @default "yui-carousel-button"
- */
- BUTTON: "yui-carousel-button",
-
- /**
- * The class name of the Carousel element.
- *
- * @property CAROUSEL
- * @default "yui-carousel"
- */
- CAROUSEL: "yui-carousel",
-
- /**
- * The class name of the container of the items in the Carousel.
- *
- * @property CAROUSEL_EL
- * @default "yui-carousel-element"
- */
- CAROUSEL_EL: "yui-carousel-element",
-
- /**
- * The class name of the Carousel's container element.
- *
- * @property CONTAINER
- * @default "yui-carousel-container"
- */
- CONTAINER: "yui-carousel-container",
-
- /**
- * The class name of the Carousel's container element.
- *
- * @property CONTENT
- * @default "yui-carousel-content"
- */
- CONTENT: "yui-carousel-content",
-
- /**
- * The class name of a disabled navigation button.
- *
- * @property DISABLED
- * @default "yui-carousel-button-disabled"
- */
- DISABLED: "yui-carousel-button-disabled",
-
- /**
- * The class name of the first Carousel navigation button.
- *
- * @property FIRST_NAV
- * @default " yui-carousel-first-button"
- */
- FIRST_NAV: " yui-carousel-first-button",
-
- /**
- * The class name of a first disabled navigation button.
- *
- * @property FIRST_NAV_DISABLED
- * @default "yui-carousel-first-button-disabled"
- */
- FIRST_NAV_DISABLED: "yui-carousel-first-button-disabled",
-
- /**
- * The class name of a first page element.
- *
- * @property FIRST_PAGE
- * @default "yui-carousel-nav-first-page"
- */
- FIRST_PAGE: "yui-carousel-nav-first-page",
-
- /**
- * The class name of the Carousel navigation button that has focus.
- *
- * @property FOCUSSED_BUTTON
- * @default "yui-carousel-button-focus"
- */
- FOCUSSED_BUTTON: "yui-carousel-button-focus",
-
- /**
- * The class name of a horizontally oriented Carousel.
- *
- * @property HORIZONTAL
- * @default "yui-carousel-horizontal"
- */
- HORIZONTAL: "yui-carousel-horizontal",
-
- /**
- * The element to be used as the progress indicator when the item
- * is still being loaded.
- *
- * @property ITEM_LOADING
- * @default The progress indicator (spinner) image CSS class
- */
- ITEM_LOADING: "yui-carousel-item-loading",
-
- /**
- * The class name that will be set if the Carousel adjusts itself
- * for a minimum width.
- *
- * @property MIN_WIDTH
- * @default "yui-carousel-min-width"
- */
- MIN_WIDTH: "yui-carousel-min-width",
-
- /**
- * The navigation element container class name.
- *
- * @property NAVIGATION
- * @default "yui-carousel-nav"
- */
- NAVIGATION: "yui-carousel-nav",
-
- /**
- * The class name of the next Carousel navigation button.
- *
- * @property NEXT_NAV
- * @default " yui-carousel-next-button"
- */
- NEXT_NAV: " yui-carousel-next-button",
-
- /**
- * The class name of the next navigation link. This variable is
- * not only used for styling, but also for identifying the link
- * within the Carousel container.
- *
- * @property NEXT_PAGE
- * @default "yui-carousel-next"
- */
- NEXT_PAGE: "yui-carousel-next",
-
- /**
- * The class name for the navigation container for prev/next.
- *
- * @property NAV_CONTAINER
- * @default "yui-carousel-buttons"
- */
- NAV_CONTAINER: "yui-carousel-buttons",
-
- /**
- * The class name of the focussed page navigation. This class is
- * specifically used for the ugly focus handling in Opera.
- *
- * @property PAGE_FOCUS
- * @default "yui-carousel-nav-page-focus"
- */
- PAGE_FOCUS: "yui-carousel-nav-page-focus",
-
- /**
- * The class name of the previous navigation link. This variable
- * is not only used for styling, but also for identifying the link
- * within the Carousel container.
- *
- * @property PREV_PAGE
- * @default "yui-carousel-prev"
- */
- PREV_PAGE: "yui-carousel-prev",
-
- /**
- * The class name of the selected item.
- *
- * @property SELECTED_ITEM
- * @default "yui-carousel-item-selected"
- */
- SELECTED_ITEM: "yui-carousel-item-selected",
-
- /**
- * The class name of the selected paging navigation.
- *
- * @property SELECTED_NAV
- * @default "yui-carousel-nav-page-selected"
- */
- SELECTED_NAV: "yui-carousel-nav-page-selected",
-
- /**
- * The class name of a vertically oriented Carousel.
- *
- * @property VERTICAL
- * @default "yui-carousel-vertical"
- */
- VERTICAL: "yui-carousel-vertical",
-
- /**
- * The class name of the (vertical) Carousel's container element.
- *
- * @property VERTICAL_CONTAINER
- * @default "yui-carousel-vertical-container"
- */
- VERTICAL_CONTAINER: "yui-carousel-vertical-container",
-
- /**
- * The class name of a visible Carousel.
- *
- * @property VISIBLE
- * @default "yui-carousel-visible"
- */
- VISIBLE: "yui-carousel-visible"
-
- },
-
- /*
- * Configuration attributes for configuring the Carousel component
- */
-
- CONFIG: {
-
- /**
- * The offset of the first visible item in the Carousel.
- *
- * @property FIRST_VISIBLE
- * @default 0
- */
- FIRST_VISIBLE: 0,
-
- /**
- * The minimum width of the horizontal Carousel container to support
- * the navigation buttons.
- *
- * @property HORZ_MIN_WIDTH
- * @default 180
- */
- HORZ_MIN_WIDTH: 180,
-
- /**
- * The maximum number of pager buttons allowed beyond which the UI
- * of the pager would be a drop-down of pages instead of buttons.
- *
- * @property MAX_PAGER_BUTTONS
- * @default 5
- */
- MAX_PAGER_BUTTONS: 5,
-
- /**
- * The minimum width of the vertical Carousel container to support
- * the navigation buttons.
- *
- * @property VERT_MIN_WIDTH
- * @default 99
- */
- VERT_MIN_WIDTH: 99,
-
- /**
- * The number of visible items in the Carousel.
- *
- * @property NUM_VISIBLE
- * @default 3
- */
- NUM_VISIBLE: 3
-
- },
-
- /*
- * Internationalizable strings in the Carousel component
- */
-
- STRINGS: {
-
- /**
- * The content to be used as the progress indicator when the item
- * is still being loaded.
- *
- * @property ITEM_LOADING_CONTENT
- * @default "Loading"
- */
- ITEM_LOADING_CONTENT: "Loading",
-
- /**
- * The next navigation button name/text.
- *
- * @property NEXT_BUTTON_TEXT
- * @default "Next Page"
- */
- NEXT_BUTTON_TEXT: "Next Page",
-
- /**
- * The prefix text for the pager in case the UI is a drop-down.
- *
- * @property PAGER_PREFIX_TEXT
- * @default "Go to page "
- */
- PAGER_PREFIX_TEXT: "Go to page ",
-
- /**
- * The previous navigation button name/text.
- *
- * @property PREVIOUS_BUTTON_TEXT
- * @default "Previous Page"
- */
- PREVIOUS_BUTTON_TEXT: "Previous Page"
-
- },
-
- /*
- * Public methods of the Carousel component
- */
-
- /**
- * Insert or append an item to the Carousel.
- *
- * @method addItem
- * @public
- * @param item {String | Object | HTMLElement} The item to be appended
- * to the Carousel. If the parameter is a string, it is assumed to be
- * the content of the newly created item. If the parameter is an
- * object, it is assumed to supply the content and an optional class
- * and an optional id of the newly created item.
- * @param index {Number} optional The position to where in the list
- * (starts from zero).
- * @return {Boolean} Return true on success, false otherwise
- */
- addItem: function (item, index) {
- var carousel = this,
- className,
- content,
- elId,
- numItems = carousel.get("numItems");
-
- if (!item) {
- return false;
- }
-
- if (JS.isString(item) || item.nodeName) {
- content = item.nodeName ? item.innerHTML : item;
- } else if (JS.isObject(item)) {
- content = item.content;
- } else {
- YAHOO.log("Invalid argument to addItem", "error", WidgetName);
- return false;
- }
-
- className = item.className || "";
- elId = item.id ? item.id : Dom.generateId();
-
- if (JS.isUndefined(index)) {
- carousel._itemsTable.items.push({
- item : content,
- className : className,
- id : elId
- });
- } else {
- if (index < 0 || index >= numItems) {
- YAHOO.log("Index out of bounds", "error", WidgetName);
- return false;
- }
- carousel._itemsTable.items.splice(index, 0, {
- item : content,
- className : className,
- id : elId
- });
- }
- carousel._itemsTable.numItems++;
-
- if (numItems < carousel._itemsTable.items.length) {
- carousel.set("numItems", carousel._itemsTable.items.length);
- }
-
- carousel.fireEvent(itemAddedEvent, { pos: index, ev: itemAddedEvent });
-
- return true;
- },
-
- /**
- * Insert or append multiple items to the Carousel.
- *
- * @method addItems
- * @public
- * @param items {Array} An array of items to be added with each item
- * representing an item, index pair [{item, index}, ...]
- * @return {Boolean} Return true on success, false otherwise
- */
- addItems: function (items) {
- var i, n, rv = true;
-
- if (!JS.isArray(items)) {
- return false;
- }
-
- for (i = 0, n = items.length; i < n; i++) {
- if (this.addItem(items[i][0], items[i][1]) === false) {
- rv = false;
- }
- }
-
- return rv;
- },
-
- /**
- * Remove focus from the Carousel.
- *
- * @method blur
- * @public
- */
- blur: function () {
- this._carouselEl.blur();
- this.fireEvent(blurEvent);
- },
-
- /**
- * Clears the items from Carousel.
- *
- * @method clearItems
- * public
- */
- clearItems: function () {
- var carousel = this, n = carousel.get("numItems");
-
- while (n > 0) {
- if (!carousel.removeItem(0)) {
- YAHOO.log("Item could not be removed - missing?",
- "warn", WidgetName);
- }
- /*
- For dynamic loading, the numItems may be much larger than
- the actual number of items in the table. So, set the
- numItems to zero, and break out of the loop if the table
- is already empty.
- */
- if (carousel._itemsTable.numItems === 0) {
- carousel.set("numItems", 0);
- break;
- }
- n--;
- }
-
- carousel.fireEvent(allItemsRemovedEvent);
- },
-
- /**
- * Set focus on the Carousel.
- *
- * @method focus
- * @public
- */
- focus: function () {
- var carousel = this,
- first,
- focusEl,
- isSelectionInvisible,
- itemsTable,
- last,
- numVisible,
- selectOnScroll,
- selected,
- selItem;
-
- // Don't do anything if the Carousel is not rendered
- if (!carousel._hasRendered) {
- return;
- }
-
- if (carousel.isAnimating()) {
- // this messes up real bad!
- return;
- }
-
- selItem = carousel.get("selectedItem");
- numVisible = carousel.get("numVisible");
- selectOnScroll = carousel.get("selectOnScroll");
- selected = (selItem >= 0) ?
- carousel.getItem(selItem) : null;
- first = carousel.get("firstVisible");
- last = first + numVisible - 1;
- isSelectionInvisible = (selItem < first || selItem > last);
- focusEl = (selected && selected.id) ?
- Dom.get(selected.id) : null;
- itemsTable = carousel._itemsTable;
-
- if (!selectOnScroll && isSelectionInvisible) {
- focusEl = (itemsTable && itemsTable.items &&
- itemsTable.items[first]) ?
- Dom.get(itemsTable.items[first].id) : null;
- }
-
- if (focusEl) {
- try {
- focusEl.focus();
- } catch (ex) {
- // ignore focus errors
- }
- }
-
- carousel.fireEvent(focusEvent);
- },
-
- /**
- * Hide the Carousel.
- *
- * @method hide
- * @public
- */
- hide: function () {
- var carousel = this;
-
- if (carousel.fireEvent(beforeHideEvent) !== false) {
- carousel.removeClass(carousel.CLASSES.VISIBLE);
- carousel.fireEvent(hideEvent);
- }
- },
-
- /**
- * Initialize the Carousel.
- *
- * @method init
- * @public
- * @param el {HTMLElement | String} The html element that represents
- * the Carousel container.
- * @param attrs {Object} The set of configuration attributes for
- * creating the Carousel.
- */
- init: function (el, attrs) {
- var carousel = this,
- elId = el, // save for a rainy day
- parse = false;
-
- if (!el) {
- YAHOO.log(el + " is neither an HTML element, nor a string",
- "error", WidgetName);
- return;
- }
-
- carousel._hasRendered = false;
- carousel._navBtns = { prev: [], next: [] };
- carousel._pages = { el: null, num: 0, cur: 0 };
- carousel._itemsTable = { loading: {}, numItems: 0,
- items: [], size: 0 };
-
- YAHOO.log("Component initialization", WidgetName);
-
- if (JS.isString(el)) {
- el = Dom.get(el);
- } else if (!el.nodeName) {
- YAHOO.log(el + " is neither an HTML element, nor a string",
- "error", WidgetName);
- return;
- }
-
- Carousel.superclass.init.call(carousel, el, attrs);
-
- if (el) {
- if (!el.id) { // in case the HTML element is passed
- el.setAttribute("id", Dom.generateId());
- }
- parse = carousel._parseCarousel(el);
- if (!parse) {
- carousel._createCarousel(elId);
- }
- } else {
- el = carousel._createCarousel(elId);
- }
- elId = el.id;
-
- carousel.initEvents();
-
- if (parse) {
- carousel._parseCarouselItems();
- }
-
- if (!attrs || typeof attrs.isVertical == "undefined") {
- carousel.set("isVertical", false);
- }
-
- carousel._parseCarouselNavigation(el);
- carousel._navEl = carousel._setupCarouselNavigation();
-
- instances[elId] = { object: carousel };
-
- carousel._loadItems();
- },
-
- /**
- * Initialize the configuration attributes used to create the Carousel.
- *
- * @method initAttributes
- * @public
- * @param attrs {Object} The set of configuration attributes for
- * creating the Carousel.
- */
- initAttributes: function (attrs) {
- var carousel = this;
-
- attrs = attrs || {};
- Carousel.superclass.initAttributes.call(carousel, attrs);
-
- /**
- * @attribute carouselEl
- * @description The type of the Carousel element.
- * @default OL
- * @type Boolean
- */
- carousel.setAttributeConfig("carouselEl", {
- validator : JS.isString,
- value : attrs.carouselEl || "OL"
- });
-
- /**
- * @attribute carouselItemEl
- * @description The type of the list of items within the Carousel.
- * @default LI
- * @type Boolean
- */
- carousel.setAttributeConfig("carouselItemEl", {
- validator : JS.isString,
- value : attrs.carouselItemEl || "LI"
- });
-
- /**
- * @attribute currentPage
- * @description The current page number (read-only.)
- * @type Number
- */
- carousel.setAttributeConfig("currentPage", {
- readOnly : true,
- value : 0
- });
-
- /**
- * @attribute firstVisible
- * @description The index to start the Carousel from (indexes begin
- * from zero)
- * @default 0
- * @type Number
- */
- carousel.setAttributeConfig("firstVisible", {
- method : carousel._setFirstVisible,
- validator : carousel._validateFirstVisible,
- value :
- attrs.firstVisible || carousel.CONFIG.FIRST_VISIBLE
- });
-
- /**
- * @attribute selectOnScroll
- * @description Set this to true to automatically set focus to
- * follow scrolling in the Carousel.
- * @default true
- * @type Boolean
- */
- carousel.setAttributeConfig("selectOnScroll", {
- validator : JS.isBoolean,
- value : attrs.selectOnScroll || true
- });
-
- /**
- * @attribute numVisible
- * @description The number of visible items in the Carousel's
- * viewport.
- * @default 3
- * @type Number
- */
- carousel.setAttributeConfig("numVisible", {
- method : carousel._setNumVisible,
- validator : carousel._validateNumVisible,
- value : attrs.numVisible || carousel.CONFIG.NUM_VISIBLE
- });
-
- /**
- * @attribute numItems
- * @description The number of items in the Carousel.
- * @type Number
- */
- carousel.setAttributeConfig("numItems", {
- method : carousel._setNumItems,
- validator : carousel._validateNumItems,
- value : carousel._itemsTable.numItems
- });
-
- /**
- * @attribute scrollIncrement
- * @description The number of items to scroll by for arrow keys.
- * @default 1
- * @type Number
- */
- carousel.setAttributeConfig("scrollIncrement", {
- validator : carousel._validateScrollIncrement,
- value : attrs.scrollIncrement || 1
- });
-
- /**
- * @attribute selectedItem
- * @description The index of the selected item.
- * @type Number
- */
- carousel.setAttributeConfig("selectedItem", {
- method : carousel._setSelectedItem,
- validator : JS.isNumber,
- value : -1
- });
-
- /**
- * @attribute revealAmount
- * @description The percentage of the item to be revealed on each
- * side of the Carousel (before and after the first and last item
- * in the Carousel's viewport.)
- * @default 0
- * @type Number
- */
- carousel.setAttributeConfig("revealAmount", {
- method : carousel._setRevealAmount,
- validator : carousel._validateRevealAmount,
- value : attrs.revealAmount || 0
- });
-
- /**
- * @attribute isCircular
- * @description Set this to true to wrap scrolling of the contents
- * in the Carousel.
- * @default false
- * @type Boolean
- */
- carousel.setAttributeConfig("isCircular", {
- validator : JS.isBoolean,
- value : attrs.isCircular || false
- });
-
- /**
- * @attribute isVertical
- * @description True if the orientation of the Carousel is vertical
- * @default false
- * @type Boolean
- */
- carousel.setAttributeConfig("isVertical", {
- method : carousel._setOrientation,
- validator : JS.isBoolean,
- value : attrs.isVertical || false
- });
-
- /**
- * @attribute navigation
- * @description The set of navigation controls for Carousel
- * @default <br>
- * { prev: null, // the previous navigation element<br>
- * next: null } // the next navigation element
- * @type Object
- */
- carousel.setAttributeConfig("navigation", {
- method : carousel._setNavigation,
- validator : carousel._validateNavigation,
- value :
- attrs.navigation || {prev: null,next: null,page: null}
- });
-
- /**
- * @attribute animation
- * @description The optional animation attributes for the Carousel.
- * @default <br>
- * { speed: 0, // the animation speed (in seconds)<br>
- * effect: null } // the animation effect (like
- * YAHOO.util.Easing.easeOut)
- * @type Object
- */
- carousel.setAttributeConfig("animation", {
- validator : carousel._validateAnimation,
- value : attrs.animation || { speed: 0, effect: null }
- });
-
- /**
- * @attribute autoPlay
- * @description Set this to time in milli-seconds to have the
- * Carousel automatically scroll the contents.
- * @type Number
- * @deprecated Use autoPlayInterval instead.
- */
- carousel.setAttributeConfig("autoPlay", {
- validator : JS.isNumber,
- value : attrs.autoPlay || 0
- });
-
- /**
- * @attribute autoPlayInterval
- * @description The delay in milli-seconds for scrolling the
- * Carousel during auto-play.
- * Note: The startAutoPlay() method needs to be invoked to trigger
- * automatic scrolling of Carousel.
- * @type Number
- */
- carousel.setAttributeConfig("autoPlayInterval", {
- validator : JS.isNumber,
- value : attrs.autoPlayInterval || 0
- });
- },
-
- /**
- * Initialize and bind the event handlers.
- *
- * @method initEvents
- * @public
- */
- initEvents: function () {
- var carousel = this,
- cssClass = carousel.CLASSES,
- focussedLi;
-
- carousel.on("keydown", carousel._keyboardEventHandler);
-
- carousel.on(afterScrollEvent, syncNavigation);
-
- carousel.on(itemAddedEvent, syncUi);
-
- carousel.on(itemRemovedEvent, syncUi);
-
- carousel.on(itemSelectedEvent, function () {
- if (carousel._hasFocus) {
- carousel.focus();
- }
- });
-
- carousel.on(loadItemsEvent, syncUi);
-
- carousel.on(allItemsRemovedEvent, function (ev) {
- carousel.scrollTo(0);
- syncNavigation.call(carousel);
- syncPagerUi.call(carousel);
- });
-
- carousel.on(pageChangeEvent, syncPagerUi, carousel);
-
- carousel.on(renderEvent, function (ev) {
- carousel.set("selectedItem", carousel.get("firstVisible"));
- syncNavigation.call(carousel, ev);
- syncPagerUi.call(carousel, ev);
- carousel._setClipContainerSize();
- });
-
- carousel.on("selectedItemChange", function (ev) {
- setItemSelection.call(carousel, ev.newValue, ev.prevValue);
- if (ev.newValue >= 0) {
- carousel._updateTabIndex(
- carousel.getElementForItem(ev.newValue));
- }
- carousel.fireEvent(itemSelectedEvent, ev.newValue);
- });
-
- carousel.on(uiUpdateEvent, function (ev) {
- syncNavigation.call(carousel, ev);
- syncPagerUi.call(carousel, ev);
- });
-
- carousel.on("firstVisibleChange", function (ev) {
- if (!carousel.get("selectOnScroll")) {
- if (ev.newValue >= 0) {
- carousel._updateTabIndex(
- carousel.getElementForItem(ev.newValue));
- }
- }
- });
-
- // Handle item selection on mouse click
- carousel.on("click", function (ev) {
- if (carousel.isAutoPlayOn()) {
- carousel.stopAutoPlay();
- }
- carousel._itemClickHandler(ev);
- carousel._pagerClickHandler(ev);
- });
-
- // Restore the focus on the navigation buttons
-
- Event.onFocus(carousel.get("element"), function (ev, obj) {
- var target = Event.getTarget(ev);
-
- if (target && target.nodeName.toUpperCase() == "A" &&
- Dom.getAncestorByClassName(target, cssClass.NAVIGATION)) {
- if (focussedLi) {
- Dom.removeClass(focussedLi, cssClass.PAGE_FOCUS);
- }
- focussedLi = target.parentNode;
- Dom.addClass(focussedLi, cssClass.PAGE_FOCUS);
- } else {
- if (focussedLi) {
- Dom.removeClass(focussedLi, cssClass.PAGE_FOCUS);
- }
- }
-
- obj._hasFocus = true;
- obj._updateNavButtons(Event.getTarget(ev), true);
- }, carousel);
-
- Event.onBlur(carousel.get("element"), function (ev, obj) {
- obj._hasFocus = false;
- obj._updateNavButtons(Event.getTarget(ev), false);
- }, carousel);
- },
-
- /**
- * Return true if the Carousel is still animating, or false otherwise.
- *
- * @method isAnimating
- * @return {Boolean} Return true if animation is still in progress, or
- * false otherwise.
- * @public
- */
- isAnimating: function () {
- return this._isAnimationInProgress;
- },
-
- /**
- * Return true if the auto-scrolling of Carousel is "on", or false
- * otherwise.
- *
- * @method isAutoPlayOn
- * @return {Boolean} Return true if autoPlay is "on", or false
- * otherwise.
- * @public
- */
- isAutoPlayOn: function () {
- return this._isAutoPlayInProgress;
- },
-
- /**
- * Return the carouselItemEl at index or null if the index is not
- * found.
- *
- * @method getElementForItem
- * @param index {Number} The index of the item to be returned
- * @return {Element} Return the item at index or null if not found
- * @public
- */
- getElementForItem: function (index) {
- var carousel = this;
-
- if (index < 0 || index >= carousel.get("numItems")) {
- YAHOO.log("Index out of bounds", "error", WidgetName);
- return null;
- }
-
- // TODO: may be cache the item
- if (carousel._itemsTable.numItems > index) {
- if (!JS.isUndefined(carousel._itemsTable.items[index])) {
- return Dom.get(carousel._itemsTable.items[index].id);
- }
- }
-
- return null;
- },
-
- /**
- * Return the carouselItemEl for all items in the Carousel.
- *
- * @method getElementForItems
- * @return {Array} Return all the items
- * @public
- */
- getElementForItems: function () {
- var carousel = this, els = [], i;
-
- for (i = 0; i < carousel._itemsTable.numItems; i++) {
- els.push(carousel.getElementForItem(i));
- }
-
- return els;
- },
-
- /**
- * Return the item at index or null if the index is not found.
- *
- * @method getItem
- * @param index {Number} The index of the item to be returned
- * @return {Object} Return the item at index or null if not found
- * @public
- */
- getItem: function (index) {
- var carousel = this;
-
- if (index < 0 || index >= carousel.get("numItems")) {
- YAHOO.log("Index out of bounds", "error", WidgetName);
- return null;
- }
-
- if (carousel._itemsTable.numItems > index) {
- if (!JS.isUndefined(carousel._itemsTable.items[index])) {
- return carousel._itemsTable.items[index];
- }
- }
-
- return null;
- },
-
- /**
- * Return all items as an array.
- *
- * @method getItems
- * @return {Array} Return all items in the Carousel
- * @public
- */
- getItems: function (index) {
- return this._itemsTable.items;
- },
-
- /**
- * Return the position of the Carousel item that has the id "id", or -1
- * if the id is not found.
- *
- * @method getItemPositionById
- * @param index {Number} The index of the item to be returned
- * @public
- */
- getItemPositionById: function (id) {
- var carousel = this, i = 0, n = carousel._itemsTable.numItems;
-
- while (i < n) {
- if (!JS.isUndefined(carousel._itemsTable.items[i])) {
- if (carousel._itemsTable.items[i].id == id) {
- return i;
- }
- }
- i++;
- }
-
- return -1;
- },
-
- /**
- * Return all visible items as an array.
- *
- * @method getVisibleItems
- * @return {Array} The array of visible items
- * @public
- */
- getVisibleItems: function () {
- var carousel = this,
- i = carousel.get("firstVisible"),
- n = i + carousel.get("numVisible"),
- r = [];
-
- while (i < n) {
- r.push(carousel.getElementForItem(i));
- i++;
- }
-
- return r;
- },
-
- /**
- * Remove an item at index from the Carousel.
- *
- * @method removeItem
- * @public
- * @param index {Number} The position to where in the list (starts from
- * zero).
- * @return {Boolean} Return true on success, false otherwise
- */
- removeItem: function (index) {
- var carousel = this,
- item,
- num = carousel.get("numItems");
-
- if (index < 0 || index >= num) {
- YAHOO.log("Index out of bounds", "error", WidgetName);
- return false;
- }
-
- item = carousel._itemsTable.items.splice(index, 1);
- if (item && item.length == 1) {
- carousel._itemsTable.numItems--;
- carousel.set("numItems", num - 1);
-
- carousel.fireEvent(itemRemovedEvent,
- { item: item[0], pos: index, ev: itemRemovedEvent });
- return true;
- }
-
- return false;
- },
-
- /**
- * Render the Carousel.
- *
- * @method render
- * @public
- * @param appendTo {HTMLElement | String} The element to which the
- * Carousel should be appended prior to rendering.
- * @return {Boolean} Status of the operation
- */
- render: function (appendTo) {
- var carousel = this,
- cssClass = carousel.CLASSES;
-
- carousel.addClass(cssClass.CAROUSEL);
-
- if (!carousel._clipEl) {
- carousel._clipEl = carousel._createCarouselClip();
- carousel._clipEl.appendChild(carousel._carouselEl);
- }
-
- if (appendTo) {
- carousel.appendChild(carousel._clipEl);
- carousel.appendTo(appendTo);
- } else {
- if (!Dom.inDocument(carousel.get("element"))) {
- YAHOO.log("Nothing to render. The container should be " +
- "within the document if appendTo is not " +
- "specified", "error", WidgetName);
- return false;
- }
- carousel.appendChild(carousel._clipEl);
- }
-
- if (carousel.get("isVertical")) {
- carousel.addClass(cssClass.VERTICAL);
- } else {
- carousel.addClass(cssClass.HORIZONTAL);
- }
-
- if (carousel.get("numItems") < 1) {
- YAHOO.log("No items in the Carousel to render", "warn",
- WidgetName);
- return false;
- }
-
- carousel._refreshUi();
-
- return true;
- },
-
- /**
- * Scroll the Carousel by an item backward.
- *
- * @method scrollBackward
- * @public
- */
- scrollBackward: function () {
- var carousel = this;
-
- carousel.scrollTo(carousel._firstItem -
- carousel.get("scrollIncrement"));
- },
-
- /**
- * Scroll the Carousel by an item forward.
- *
- * @method scrollForward
- * @public
- */
- scrollForward: function () {
- var carousel = this;
-
- carousel.scrollTo(carousel._firstItem +
- carousel.get("scrollIncrement"));
- },
-
- /**
- * Scroll the Carousel by a page backward.
- *
- * @method scrollPageBackward
- * @public
- */
- scrollPageBackward: function () {
- var carousel = this,
- item = carousel._firstItem - carousel.get("numVisible");
-
- if (carousel.get("selectOnScroll")) {
- carousel._selectedItem = carousel._getSelectedItem(item);
- } else {
- item = carousel._getValidIndex(item);
- }
- carousel.scrollTo(item);
- },
-
- /**
- * Scroll the Carousel by a page forward.
- *
- * @method scrollPageForward
- * @public
- */
- scrollPageForward: function () {
- var carousel = this,
- item = carousel._firstItem + carousel.get("numVisible");
-
- if (carousel.get("selectOnScroll")) {
- carousel._selectedItem = carousel._getSelectedItem(item);
- } else {
- item = carousel._getValidIndex(item);
- }
- carousel.scrollTo(item);
- },
-
- /**
- * Scroll the Carousel to make the item the first visible item.
- *
- * @method scrollTo
- * @public
- * @param item Number The index of the element to position at.
- * @param dontSelect Boolean True if select should be avoided
- */
- scrollTo: function (item, dontSelect) {
- var carousel = this,
- animate, animCfg, isCircular, delta, direction, firstItem,
- numItems, numPerPage, offset, page, rv, sentinel,
- stopAutoScroll;
-
- if (JS.isUndefined(item) || item == carousel._firstItem ||
- carousel.isAnimating()) {
- return; // nothing to do!
- }
-
- animCfg = carousel.get("animation");
- isCircular = carousel.get("isCircular");
- firstItem = carousel._firstItem;
- numItems = carousel.get("numItems");
- numPerPage = carousel.get("numVisible");
- page = carousel.get("currentPage");
- stopAutoScroll = function () {
- if (carousel.isAutoPlayOn()) {
- carousel.stopAutoPlay();
- }
- };
-
- if (item < 0) {
- if (isCircular) {
- item = numItems + item;
- } else {
- stopAutoScroll.call(carousel);
- return;
- }
- } else if (numItems > 0 && item > numItems - 1) {
- if (carousel.get("isCircular")) {
- item = numItems - item;
- } else {
- stopAutoScroll.call(carousel);
- return;
- }
- }
-
- direction = (carousel._firstItem > item) ? "backward" : "forward";
-
- sentinel = firstItem + numPerPage;
- sentinel = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
- rv = carousel.fireEvent(beforeScrollEvent,
- { dir: direction, first: firstItem, last: sentinel });
- if (rv === false) { // scrolling is prevented
- return;
- }
-
- carousel.fireEvent(beforePageChangeEvent, { page: page });
-
- delta = firstItem - item; // yes, the delta is reverse
- carousel._firstItem = item;
- carousel.set("firstVisible", item);
-
- YAHOO.log("Scrolling to " + item + " delta = " + delta,WidgetName);
-
- carousel._loadItems(); // do we have all the items to display?
-
- sentinel = item + numPerPage;
- sentinel = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
-
- offset = getScrollOffset.call(carousel, delta);
- YAHOO.log("Scroll offset = " + offset, WidgetName);
-
- animate = animCfg.speed > 0;
-
- if (animate) {
- carousel._animateAndSetCarouselOffset(offset, item, sentinel,
- dontSelect);
- } else {
- carousel._setCarouselOffset(offset);
- updateStateAfterScroll.call(carousel, item, sentinel);
- }
- },
-
- /**
- * Select the previous item in the Carousel.
- *
- * @method selectPreviousItem
- * @public
- */
- selectPreviousItem: function () {
- var carousel = this,
- newpos = 0,
- selected = carousel.get("selectedItem");
-
- if (selected == this._firstItem) {
- newpos = selected - carousel.get("numVisible");
- carousel._selectedItem = carousel._getSelectedItem(selected-1);
- carousel.scrollTo(newpos);
- } else {
- newpos = carousel.get("selectedItem") -
- carousel.get("scrollIncrement");
- carousel.set("selectedItem",carousel._getSelectedItem(newpos));
- }
- },
-
- /**
- * Select the next item in the Carousel.
- *
- * @method selectNextItem
- * @public
- */
- selectNextItem: function () {
- var carousel = this, newpos = 0;
-
- newpos = carousel.get("selectedItem") +
- carousel.get("scrollIncrement");
- carousel.set("selectedItem", carousel._getSelectedItem(newpos));
- },
-
- /**
- * Display the Carousel.
- *
- * @method show
- * @public
- */
- show: function () {
- var carousel = this,
- cssClass = carousel.CLASSES;
-
- if (carousel.fireEvent(beforeShowEvent) !== false) {
- carousel.addClass(cssClass.VISIBLE);
- carousel.fireEvent(showEvent);
- }
- },
-
- /**
- * Start auto-playing the Carousel.
- *
- * @method startAutoPlay
- * @public
- */
- startAutoPlay: function () {
- var carousel = this, timer;
-
- if (JS.isUndefined(carousel._autoPlayTimer)) {
- timer = carousel.get("autoPlayInterval");
- if (timer <= 0) {
- return;
- }
- carousel._isAutoPlayInProgress = true;
- carousel.fireEvent(startAutoPlayEvent);
- carousel._autoPlayTimer = setTimeout(function () {
- carousel._autoScroll();
- }, timer);
- }
- },
-
- /**
- * Stop auto-playing the Carousel.
- *
- * @method stopAutoPlay
- * @public
- */
- stopAutoPlay: function () {
- var carousel = this;
-
- if (!JS.isUndefined(carousel._autoPlayTimer)) {
- clearTimeout(carousel._autoPlayTimer);
- delete carousel._autoPlayTimer;
- carousel._isAutoPlayInProgress = false;
- carousel.fireEvent(stopAutoPlayEvent);
- }
- },
-
- /**
- * Return the string representation of the Carousel.
- *
- * @method toString
- * @public
- * @return {String}
- */
- toString: function () {
- return WidgetName + (this.get ? " (#" + this.get("id") + ")" : "");
- },
-
- /*
- * Protected methods of the Carousel component
- */
-
- /**
- * Set the Carousel offset to the passed offset after animating.
- *
- * @method _animateAndSetCarouselOffset
- * @param {Integer} offset The offset to which the Carousel has to be
- * scrolled to.
- * @param {Integer} item The index to which the Carousel will scroll.
- * @param {Integer} sentinel The last element in the view port.
- * @protected
- */
- _animateAndSetCarouselOffset: function (offset, item, sentinel) {
- var carousel = this,
- animCfg = carousel.get("animation"),
- animObj = null;
-
- if (carousel.get("isVertical")) {
- animObj = new YAHOO.util.Motion(carousel._carouselEl,
- { points: { by: [0, offset] } },
- animCfg.speed, animCfg.effect);
- } else {
- animObj = new YAHOO.util.Motion(carousel._carouselEl,
- { points: { by: [offset, 0] } },
- animCfg.speed, animCfg.effect);
- }
-
- carousel._isAnimationInProgress = true;
- animObj.onComplete.subscribe(carousel._animationCompleteHandler,
- { scope: carousel, item: item,
- last: sentinel });
- animObj.animate();
- },
-
- /**
- * Handle the animation complete event.
- *
- * @method _animationCompleteHandler
- * @param {Event} ev The event.
- * @param {Array} p The event parameters.
- * @param {Object} o The object that has the state of the Carousel
- * @protected
- */
- _animationCompleteHandler: function (ev, p, o) {
- o.scope._isAnimationInProgress = false;
- updateStateAfterScroll.call(o.scope, o.item, o.last);
- },
-
- /**
- * Automatically scroll the contents of the Carousel.
- * @method _autoScroll
- * @protected
- */
- _autoScroll: function() {
- var carousel = this,
- currIndex = carousel._firstItem,
- index;
-
- if (currIndex >= carousel.get("numItems") - 1) {
- if (carousel.get("isCircular")) {
- index = 0;
- } else {
- carousel.stopAutoPlay();
- }
- } else {
- index = currIndex + carousel.get("numVisible");
- }
-
- carousel._selectedItem = carousel._getSelectedItem(index);
- carousel.scrollTo.call(carousel, index);
- },
-
- /**
- * Create the Carousel.
- *
- * @method createCarousel
- * @param elId {String} The id of the element to be created
- * @protected
- */
- _createCarousel: function (elId) {
- var carousel = this,
- cssClass = carousel.CLASSES,
- el = Dom.get(elId);
-
- if (!el) {
- el = createElement("DIV", {
- className : cssClass.CAROUSEL,
- id : elId
- });
- }
-
- if (!carousel._carouselEl) {
- carousel._carouselEl=createElement(carousel.get("carouselEl"),
- { className: cssClass.CAROUSEL_EL });
- }
-
- return el;
- },
-
- /**
- * Create the Carousel clip container.
- *
- * @method createCarouselClip
- * @protected
- */
- _createCarouselClip: function () {
- return createElement("DIV", { className: this.CLASSES.CONTENT });
- },
-
- /**
- * Create the Carousel item.
- *
- * @method createCarouselItem
- * @param obj {Object} The attributes of the element to be created
- * @protected
- */
- _createCarouselItem: function (obj) {
- return createElement(this.get("carouselItemEl"), {
- className : obj.className,
- content : obj.content,
- id : obj.id
- });
- },
-
- /**
- * Return a valid item for a possibly out of bounds index considering
- * the isCircular property.
- *
- * @method _getValidIndex
- * @param index {Number} The index of the item to be returned
- * @return {Object} Return a valid item index
- * @protected
- */
- _getValidIndex: function (index) {
- var carousel = this,
- isCircular = carousel.get("isCircular"),
- numItems = carousel.get("numItems"),
- sentinel = numItems - 1;
-
- if (index < 0) {
- index = isCircular ? numItems + index : 0;
- } else if (index > sentinel) {
- index = isCircular ? index - numItems : sentinel;
- }
-
- return index;
- },
-
- /**
- * Get the value for the selected item.
- *
- * @method _getSelectedItem
- * @param val {Number} The new value for "selected" item
- * @return {Number} The new value that would be set
- * @protected
- */
- _getSelectedItem: function (val) {
- var carousel = this,
- isCircular = carousel.get("isCircular"),
- numItems = carousel.get("numItems"),
- sentinel = numItems - 1;
-
- if (val < 0) {
- if (isCircular) {
- val = numItems + val;
- } else {
- val = carousel.get("selectedItem");
- }
- } else if (val > sentinel) {
- if (isCircular) {
- val = val - numItems;
- } else {
- val = carousel.get("selectedItem");
- }
- }
-
- return val;
- },
-
- /**
- * The "click" handler for the item.
- *
- * @method _itemClickHandler
- * @param {Event} ev The event object
- * @protected
- */
- _itemClickHandler: function (ev) {
- var carousel = this,
- container = carousel.get("element"),
- el,
- item,
- target = YAHOO.util.Event.getTarget(ev);
-
- while (target && target != container &&
- target.id != carousel._carouselEl) {
- el = target.nodeName;
- if (el.toUpperCase() == carousel.get("carouselItemEl")) {
- break;
- }
- target = target.parentNode;
- }
-
- if ((item = carousel.getItemPositionById(target.id)) >= 0) {
- YAHOO.log("Setting selection to " + item, WidgetName);
- carousel.set("selectedItem", carousel._getSelectedItem(item));
- carousel.focus();
- }
- },
-
- /**
- * The keyboard event handler for Carousel.
- *
- * @method _keyboardEventHandler
- * @param ev {Event} The event that is being handled.
- * @protected
- */
- _keyboardEventHandler: function (ev) {
- var carousel = this,
- key = Event.getCharCode(ev),
- prevent = false;
-
- if (carousel.isAnimating()) {
- return; // do not mess while animation is in progress
- }
-
- switch (key) {
- case 0x25: // left arrow
- case 0x26: // up arrow
- carousel.selectPreviousItem();
- prevent = true;
- break;
- case 0x27: // right arrow
- case 0x28: // down arrow
- carousel.selectNextItem();
- prevent = true;
- break;
- case 0x21: // page-up
- carousel.scrollPageBackward();
- prevent = true;
- break;
- case 0x22: // page-down
- carousel.scrollPageForward();
- prevent = true;
- break;
- }
-
- if (prevent) {
- if (carousel.isAutoPlayOn()) {
- carousel.stopAutoPlay();
- }
- Event.preventDefault(ev);
- }
- },
-
- /**
- * The load the required set of items that are needed for display.
- *
- * @method _loadItems
- * @protected
- */
- _loadItems: function() {
- var carousel = this,
- first = carousel.get("firstVisible"),
- last = 0,
- numItems = carousel.get("numItems"),
- numVisible = carousel.get("numVisible"),
- reveal = carousel.get("revealAmount");
-
- last = first + numVisible - 1 + (reveal ? 1 : 0);
- last = last > numItems - 1 ? numItems - 1 : last;
-
- if (!carousel.getItem(first) || !carousel.getItem(last)) {
- carousel.fireEvent(loadItemsEvent, {
- ev: loadItemsEvent, first: first, last: last,
- num: last - first
- });
- }
- },
-
- /**
- * The "click" handler for the pager navigation.
- *
- * @method _pagerClickHandler
- * @param {Event} ev The event object
- * @protected
- */
- _pagerClickHandler: function (ev) {
- var carousel = this,
- pos,
- target = Event.getTarget(ev),
- val;
-
- function getPagerNode(el) {
- var itemEl = carousel.get("carouselItemEl");
-
- if (el.nodeName.toUpperCase() == itemEl.toUpperCase()) {
- el = Dom.getChildrenBy(el, function (node) {
- // either an anchor or select at least
- return node.href || node.value;
- });
- if (el && el[0]) {
- return el[0];
- }
- } else if (el.href || el.value) {
- return el;
- }
-
- return null;
- }
-
- if (target) {
- target = getPagerNode(target);
- if (!target) {
- return;
- }
- val = target.href || target.value;
- if (JS.isString(val) && val) {
- pos = val.lastIndexOf("#");
- if (pos != -1) {
- val = carousel.getItemPositionById(
- val.substring(pos + 1));
- carousel._selectedItem = val;
- carousel.scrollTo(val);
- if (!target.value) { // not a select element
- carousel.focus();
- }
- Event.preventDefault(ev);
- }
- }
- }
- },
-
- /**
- * Find the Carousel within a container. The Carousel is identified by
- * the first element that matches the carousel element tag or the
- * element that has the Carousel class.
- *
- * @method parseCarousel
- * @param parent {HTMLElement} The parent element to look under
- * @return {Boolean} True if Carousel is found, false otherwise
- * @protected
- */
- _parseCarousel: function (parent) {
- var carousel = this, child, cssClass, domEl, found, node;
-
- cssClass = carousel.CLASSES;
- domEl = carousel.get("carouselEl");
- found = false;
-
- for (child = parent.firstChild; child; child = child.nextSibling) {
- if (child.nodeType == 1) {
- node = child.nodeName;
- if (node.toUpperCase() == domEl) {
- carousel._carouselEl = child;
- Dom.addClass(carousel._carouselEl,
- carousel.CLASSES.CAROUSEL_EL);
- YAHOO.log("Found Carousel - " + node +
- (child.id ? " (#" + child.id + ")" : ""),
- WidgetName);
- found = true;
- }
- }
- }
-
- return found;
- },
-
- /**
- * Find the items within the Carousel and add them to the items table.
- * A Carousel item is identified by elements that matches the carousel
- * item element tag.
- *
- * @method parseCarouselItems
- * @protected
- */
- _parseCarouselItems: function () {
- var carousel = this,
- child,
- domItemEl,
- elId,
- node,
- parent = carousel._carouselEl;
-
- domItemEl = carousel.get("carouselItemEl");
-
- for (child = parent.firstChild; child; child = child.nextSibling) {
- if (child.nodeType == 1) {
- node = child.nodeName;
- if (node.toUpperCase() == domItemEl) {
- if (child.id) {
- elId = child.id;
- } else {
- elId = Dom.generateId();
- child.setAttribute("id", elId);
- }
- carousel.addItem(child);
- }
- }
- }
- },
-
- /**
- * Find the Carousel navigation within a container. The navigation
- * elements need to match the carousel navigation class names.
- *
- * @method parseCarouselNavigation
- * @param parent {HTMLElement} The parent element to look under
- * @return {Boolean} True if at least one is found, false otherwise
- * @protected
- */
- _parseCarouselNavigation: function (parent) {
- var carousel = this,
- cfg,
- cssClass = carousel.CLASSES,
- el,
- i,
- j,
- nav,
- rv = false;
-
- nav = Dom.getElementsByClassName(cssClass.PREV_PAGE, "*", parent);
- if (nav.length > 0) {
- for (i in nav) {
- if (nav.hasOwnProperty(i)) {
- el = nav[i];
- YAHOO.log("Found Carousel previous page navigation - " +
- el + (el.id ? " (#" + el.id + ")" : ""),
- WidgetName);
- if (el.nodeName == "INPUT" ||
- el.nodeName == "BUTTON") {
- carousel._navBtns.prev.push(el);
- } else {
- j = el.getElementsByTagName("INPUT");
- if (JS.isArray(j) && j.length > 0) {
- carousel._navBtns.prev.push(j[0]);
- } else {
- j = el.getElementsByTagName("BUTTON");
- if (JS.isArray(j) && j.length > 0) {
- carousel._navBtns.prev.push(j[0]);
- }
- }
- }
- }
- }
- cfg = { prev: nav };
- }
-
- nav = Dom.getElementsByClassName(cssClass.NEXT_PAGE, "*", parent);
- if (nav.length > 0) {
- for (i in nav) {
- if (nav.hasOwnProperty(i)) {
- el = nav[i];
- YAHOO.log("Found Carousel next page navigation - " +
- el + (el.id ? " (#" + el.id + ")" : ""),
- WidgetName);
- if (el.nodeName == "INPUT" ||
- el.nodeName == "BUTTON") {
- carousel._navBtns.next.push(el);
- } else {
- j = el.getElementsByTagName("INPUT");
- if (JS.isArray(j) && j.length > 0) {
- carousel._navBtns.next.push(j[0]);
- } else {
- j = el.getElementsByTagName("BUTTON");
- if (JS.isArray(j) && j.length > 0) {
- carousel._navBtns.next.push(j[0]);
- }
- }
- }
- }
- }
- if (cfg) {
- cfg.next = nav;
- } else {
- cfg = { next: nav };
- }
- }
-
- if (cfg) {
- carousel.set("navigation", cfg);
- rv = true;
- }
-
- return rv;
- },
-
- /**
- * Refresh the widget UI if it is not already rendered, on first item
- * addition.
- *
- * @method _refreshUi
- * @protected
- */
- _refreshUi: function () {
- var carousel = this;
-
- // Set the rendered state appropriately.
- carousel._hasRendered = true;
- carousel.fireEvent(renderEvent);
- },
-
- /**
- * Set the Carousel offset to the passed offset.
- *
- * @method _setCarouselOffset
- * @protected
- */
- _setCarouselOffset: function (offset) {
- var carousel = this, which;
-
- which = carousel.get("isVertical") ? "top" : "left";
- offset += offset !== 0 ? getStyle(carousel._carouselEl, which) : 0;
- Dom.setStyle(carousel._carouselEl, which, offset + "px");
- },
-
- /**
- * Setup/Create the Carousel navigation element (if needed).
- *
- * @method _setupCarouselNavigation
- * @protected
- */
- _setupCarouselNavigation: function () {
- var carousel = this,
- btn, cfg, cssClass, nav, navContainer, nextButton, prevButton;
-
- cssClass = carousel.CLASSES;
-
- // TODO: can the _navBtns be tested against instead?
- navContainer = Dom.getElementsByClassName(cssClass.NAVIGATION,
- "DIV", carousel.get("element"));
-
- if (navContainer.length === 0) {
- navContainer = createElement("DIV",
- { className: cssClass.NAVIGATION });
- carousel.insertBefore(navContainer,
- Dom.getFirstChild(carousel.get("element")));
- } else {
- navContainer = navContainer[0];
- }
-
- carousel._pages.el = createElement("UL");
- navContainer.appendChild(carousel._pages.el);
-
- nav = carousel.get("navigation");
- if (JS.isString(nav.prev) || JS.isArray(nav.prev)) {
- if (JS.isString(nav.prev)) {
- nav.prev = [nav.prev];
- }
- for (btn in nav.prev) {
- if (nav.prev.hasOwnProperty(btn)) {
- carousel._navBtns.prev.push(Dom.get(nav.prev[btn]));
- }
- }
- } else {
- // TODO: separate method for creating a navigation button
- prevButton = createElement("SPAN",
- { className: cssClass.BUTTON + cssClass.FIRST_NAV });
- // XXX: for IE 6.x
- Dom.setStyle(prevButton, "visibility", "visible");
- btn = Dom.generateId();
- prevButton.innerHTML = "<button type=\"button\" " +
- "id=\"" + btn + "\" name=\"" +
- carousel.STRINGS.PREVIOUS_BUTTON_TEXT + "\">" +
- carousel.STRINGS.PREVIOUS_BUTTON_TEXT + "</button>";
- navContainer.appendChild(prevButton);
- btn = Dom.get(btn);
- carousel._navBtns.prev = [btn];
- cfg = { prev: [prevButton] };
- }
-
- if (JS.isString(nav.next) || JS.isArray(nav.next)) {
- if (JS.isString(nav.next)) {
- nav.next = [nav.next];
- }
- for (btn in nav.next) {
- if (nav.next.hasOwnProperty(btn)) {
- carousel._navBtns.next.push(Dom.get(nav.next[btn]));
- }
- }
- } else {
- // TODO: separate method for creating a navigation button
- nextButton = createElement("SPAN",
- { className: cssClass.BUTTON + cssClass.NEXT_NAV });
- // XXX: for IE 6.x
- Dom.setStyle(nextButton, "visibility", "visible");
- btn = Dom.generateId();
- nextButton.innerHTML = "<button type=\"button\" " +
- "id=\"" + btn + "\" name=\"" +
- carousel.STRINGS.NEXT_BUTTON_TEXT + "\">" +
- carousel.STRINGS.NEXT_BUTTON_TEXT + "</button>";
- navContainer.appendChild(nextButton);
- btn = Dom.get(btn);
- carousel._navBtns.next = [btn];
- if (cfg) {
- cfg.next = [nextButton];
- } else {
- cfg = { next: [nextButton] };
- }
- }
-
- if (cfg) {
- carousel.set("navigation", cfg);
- }
-
- return navContainer;
- },
-
- /**
- * Set the clip container size (based on the new numVisible value).
- *
- * @method _setClipContainerSize
- * @param clip {HTMLElement} The clip container element.
- * @param num {Number} optional The number of items per page.
- * @protected
- */
- _setClipContainerSize: function (clip, num) {
- var carousel = this,
- attr, currVal, isVertical, itemSize, reveal, size, which;
-
- isVertical = carousel.get("isVertical");
- reveal = carousel.get("revealAmount");
- which = isVertical ? "height" : "width";
- attr = isVertical ? "top" : "left";
-
- clip = clip || carousel._clipEl;
- if (!clip) {
- return;
- }
-
- num = num || carousel.get("numVisible");
- itemSize = getCarouselItemSize.call(carousel, which);
- size = itemSize * num;
-
- // TODO: try to re-use the _hasRendered indicator
- carousel._recomputeSize = (size === 0); // bleh!
- if (carousel._recomputeSize) {
- carousel._hasRendered = false;
- return; // no use going further, bail out!
- }
-
- if (reveal > 0) {
- reveal = itemSize * (reveal / 100) * 2;
- size += reveal;
- // TODO: set the Carousel's initial offset somwehere
- currVal = parseFloat(Dom.getStyle(carousel._carouselEl, attr));
- currVal = JS.isNumber(currVal) ? currVal : 0;
- Dom.setStyle(carousel._carouselEl,
- attr, currVal + (reveal / 2) + "px");
- }
-
- if (isVertical) {
- size += getStyle(carousel._carouselEl, "marginTop") +
- getStyle(carousel._carouselEl, "marginBottom") +
- getStyle(carousel._carouselEl, "paddingTop") +
- getStyle(carousel._carouselEl, "paddingBottom") +
- getStyle(carousel._carouselEl, "borderTopWidth") +
- getStyle(carousel._carouselEl, "borderBottomWidth");
- // XXX: for vertical Carousel
- Dom.setStyle(clip, which, (size - (num - 1)) + "px");
- } else {
- size += getStyle(carousel._carouselEl, "marginLeft") +
- getStyle(carousel._carouselEl, "marginRight") +
- getStyle(carousel._carouselEl, "paddingLeft") +
- getStyle(carousel._carouselEl, "paddingRight") +
- getStyle(carousel._carouselEl, "borderLeftWidth") +
- getStyle(carousel._carouselEl, "borderRightWidth");
- Dom.setStyle(clip, which, size + "px");
- }
-
- carousel._setContainerSize(clip); // adjust the container size too
- },
-
- /**
- * Set the container size.
- *
- * @method _setContainerSize
- * @param clip {HTMLElement} The clip container element.
- * @param attr {String} Either set the height or width.
- * @protected
- */
- _setContainerSize: function (clip, attr) {
- var carousel = this,
- config = carousel.CONFIG,
- cssClass = carousel.CLASSES,
- isVertical,
- size;
-
- isVertical = carousel.get("isVertical");
- clip = clip || carousel._clipEl;
- attr = attr || (isVertical ? "height" : "width");
- size = parseFloat(Dom.getStyle(clip, attr), 10);
-
- size = JS.isNumber(size) ? size : 0;
-
- if (isVertical) {
- size += getStyle(carousel._carouselEl, "marginTop") +
- getStyle(carousel._carouselEl, "marginBottom") +
- getStyle(carousel._carouselEl, "paddingTop") +
- getStyle(carousel._carouselEl, "paddingBottom") +
- getStyle(carousel._carouselEl, "borderTopWidth") +
- getStyle(carousel._carouselEl, "borderBottomWidth") +
- getStyle(carousel._navEl, "height");
- } else {
- size += getStyle(clip, "marginLeft") +
- getStyle(clip, "marginRight") +
- getStyle(clip, "paddingLeft") +
- getStyle(clip, "paddingRight") +
- getStyle(clip, "borderLeftWidth") +
- getStyle(clip, "borderRightWidth");
- }
-
- if (!isVertical) {
- if (size < config.HORZ_MIN_WIDTH) {
- size = config.HORZ_MIN_WIDTH;
- carousel.addClass(cssClass.MIN_WIDTH);
- }
- }
- carousel.setStyle(attr, size + "px");
-
- // Additionally the width of the container should be set for
- // the vertical Carousel
- if (isVertical) {
- size = getCarouselItemSize.call(carousel, "width");
- if (size < config.VERT_MIN_WIDTH) {
- size = config.VERT_MIN_WIDTH;
- carousel.addClass(cssClass.MIN_WIDTH);
- }
- carousel.setStyle("width", size + "px");
- }
- },
-
- /**
- * Set the value for the Carousel's first visible item.
- *
- * @method _setFirstVisible
- * @param val {Number} The new value for firstVisible
- * @return {Number} The new value that would be set
- * @protected
- */
- _setFirstVisible: function (val) {
- var carousel = this;
-
- if (val >= 0 && val < carousel.get("numItems")) {
- carousel.scrollTo(val);
- } else {
- val = carousel.get("firstVisible");
- }
- return val;
- },
-
- /**
- * Set the value for the Carousel's navigation.
- *
- * @method _setNavigation
- * @param cfg {Object} The navigation configuration
- * @return {Object} The new value that would be set
- * @protected
- */
- _setNavigation: function (cfg) {
- var carousel = this;
-
- if (cfg.prev) {
- Event.on(cfg.prev, "click", scrollPageBackward, carousel);
- }
- if (cfg.next) {
- Event.on(cfg.next, "click", scrollPageForward, carousel);
- }
- },
-
- /**
- * Set the value for the number of visible items in the Carousel.
- *
- * @method _setNumVisible
- * @param val {Number} The new value for numVisible
- * @return {Number} The new value that would be set
- * @protected
- */
- _setNumVisible: function (val) {
- var carousel = this;
-
- carousel._setClipContainerSize(carousel._clipEl, val);
- },
-
- /**
- * Set the number of items in the Carousel.
- * Warning: Setting this to a lower number than the current removes
- * items from the end.
- *
- * @method _setNumItems
- * @param val {Number} The new value for numItems
- * @return {Number} The new value that would be set
- * @protected
- */
- _setNumItems: function (val) {
- var carousel = this,
- num = carousel._itemsTable.numItems;
-
- if (JS.isArray(carousel._itemsTable.items)) {
- if (carousel._itemsTable.items.length != num) { // out of sync
- num = carousel._itemsTable.items.length;
- carousel._itemsTable.numItems = num;
- }
- }
-
- if (val < num) {
- while (num > val) {
- carousel.removeItem(num - 1);
- num--;
- }
- }
-
- return val;
- },
-
- /**
- * Set the orientation of the Carousel.
- *
- * @method _setOrientation
- * @param val {Boolean} The new value for isVertical
- * @return {Boolean} The new value that would be set
- * @protected
- */
- _setOrientation: function (val) {
- var carousel = this,
- cssClass = carousel.CLASSES;
-
- if (val) {
- carousel.replaceClass(cssClass.HORIZONTAL, cssClass.VERTICAL);
- } else {
- carousel.replaceClass(cssClass.VERTICAL, cssClass.HORIZONTAL);
- }
- carousel._itemsTable.size = 0; // force recalculation next time
- return val;
- },
-
- /**
- * Set the value for the reveal amount percentage in the Carousel.
- *
- * @method _setRevealAmount
- * @param val {Number} The new value for revealAmount
- * @return {Number} The new value that would be set
- * @protected
- */
- _setRevealAmount: function (val) {
- var carousel = this;
-
- if (val >= 0 && val <= 100) {
- val = parseInt(val, 10);
- val = JS.isNumber(val) ? val : 0;
- carousel._setClipContainerSize();
- } else {
- val = carousel.get("revealAmount");
- }
- return val;
- },
-
- /**
- * Set the value for the selected item.
- *
- * @method _setSelectedItem
- * @param val {Number} The new value for "selected" item
- * @protected
- */
- _setSelectedItem: function (val) {
- this._selectedItem = val;
- },
-
- /**
- * Synchronize and redraw the UI after an item is added.
- *
- * @method _syncUiForItemAdd
- * @protected
- */
- _syncUiForItemAdd: function (obj) {
- var carousel = this,
- carouselEl = carousel._carouselEl,
- el,
- item,
- itemsTable = carousel._itemsTable,
- oel,
- pos,
- sibling;
-
- pos = JS.isUndefined(obj.pos) ? itemsTable.numItems - 1 : obj.pos;
- if (!JS.isUndefined(itemsTable.items[pos])) {
- item = itemsTable.items[pos];
- if (item && !JS.isUndefined(item.id)) {
- oel = Dom.get(item.id);
- }
- }
- if (!oel) {
- el = carousel._createCarouselItem({
- className : item.className,
- content : item.item,
- id : item.id
- });
- if (JS.isUndefined(obj.pos)) {
- if (!JS.isUndefined(itemsTable.loading[pos])) {
- oel = itemsTable.loading[pos];
- // if oel is null, it is a problem ...
- }
- if (oel) {
- // replace the node
- carouselEl.replaceChild(el, oel);
- // ... and remove the item from the data structure
- delete itemsTable.loading[pos];
- } else {
- carouselEl.appendChild(el);
- }
- } else {
- if (!JS.isUndefined(itemsTable.items[obj.pos + 1])) {
- sibling = Dom.get(itemsTable.items[obj.pos + 1].id);
- }
- if (sibling) {
- carouselEl.insertBefore(el, sibling);
- } else {
- YAHOO.log("Unable to find sibling","error",WidgetName);
- }
- }
- } else {
- if (JS.isUndefined(obj.pos)) {
- if (!Dom.isAncestor(carousel._carouselEl, oel)) {
- carouselEl.appendChild(oel);
- }
- } else {
- if (!Dom.isAncestor(carouselEl, oel)) {
- if (!JS.isUndefined(itemsTable.items[obj.pos + 1])) {
- carouselEl.insertBefore(oel,
- Dom.get(itemsTable.items[obj.pos + 1].id));
- }
- }
- }
- }
-
- if (!carousel._hasRendered) {
- carousel._refreshUi();
- }
-
- if (carousel.get("selectedItem") < 0) {
- carousel.set("selectedItem", carousel.get("firstVisible"));
- }
- },
-
- /**
- * Synchronize and redraw the UI after an item is removed.
- *
- * @method _syncUiForItemAdd
- * @protected
- */
- _syncUiForItemRemove: function (obj) {
- var carousel = this,
- carouselEl = carousel._carouselEl,
- el, item, num, pos;
-
- num = carousel.get("numItems");
- item = obj.item;
- pos = obj.pos;
-
- if (item && (el = Dom.get(item.id))) {
- if (el && Dom.isAncestor(carouselEl, el)) {
- Event.purgeElement(el, true);
- carouselEl.removeChild(el);
- }
-
- if (carousel.get("selectedItem") == pos) {
- pos = pos >= num ? num - 1 : pos;
- carousel.set("selectedItem", pos);
- }
- } else {
- YAHOO.log("Unable to find item", "warn", WidgetName);
- }
- },
-
- /**
- * Synchronize and redraw the UI for lazy loading.
- *
- * @method _syncUiForLazyLoading
- * @protected
- */
- _syncUiForLazyLoading: function (obj) {
- var carousel = this,
- carouselEl = carousel._carouselEl,
- el,
- i,
- itemsTable = carousel._itemsTable,
- sibling;
-
- for (i = obj.first; i <= obj.last; i++) {
- el = carousel._createCarouselItem({
- className : carousel.CLASSES.ITEM_LOADING,
- content : carousel.STRINGS.ITEM_LOADING_CONTENT,
- id : Dom.generateId()
- });
- if (el) {
- if (!JS.isUndefined(itemsTable.items[obj.last + 1])) {
- sibling = Dom.get(itemsTable.items[obj.last + 1].id);
- if (sibling) {
- carouselEl.insertBefore(el, sibling);
- } else {
- YAHOO.log("Unable to find sibling", "error",
- WidgetName);
- }
- } else {
- carouselEl.appendChild(el);
- }
- }
- itemsTable.loading[i] = el;
- }
- },
-
- /**
- * Set the correct class for the navigation buttons.
- *
- * @method _updateNavButtons
- * @param el {Object} The target button
- * @param setFocus {Boolean} True to set focus ring, false otherwise.
- * @protected
- */
- _updateNavButtons: function (el, setFocus) {
- var children,
- cssClass = this.CLASSES,
- grandParent,
- parent = el.parentNode;
-
- if (!parent) {
- return;
- }
- grandParent = parent.parentNode;
-
- if (el.nodeName.toUpperCase() == "BUTTON" &&
- Dom.hasClass(parent, cssClass.BUTTON)) {
- if (setFocus) {
- if (grandParent) {
- children = Dom.getChildren(grandParent);
- if (children) {
- Dom.removeClass(children, cssClass.FOCUSSED_BUTTON);
- }
- }
- Dom.addClass(parent, cssClass.FOCUSSED_BUTTON);
- } else {
- Dom.removeClass(parent, cssClass.FOCUSSED_BUTTON);
- }
- }
- },
-
- /**
- * Update the UI for the pager buttons based on the current page and
- * the number of pages.
- *
- * @method _updatePagerButtons
- * @protected
- */
- _updatePagerButtons: function () {
- var carousel = this,
- css = carousel.CLASSES,
- cur = carousel._pages.cur, // current page
- el,
- html,
- i,
- item,
- n = carousel.get("numVisible"),
- num = carousel._pages.num, // total pages
- pager = carousel._pages.el; // the pager container element
-
- if (num === 0 || !pager) {
- return; // don't do anything if number of pages is 0
- }
-
- // Hide the pager before redrawing it
- Dom.setStyle(pager, "visibility", "hidden");
-
- // Remove all nodes from the pager
- while (pager.firstChild) {
- pager.removeChild(pager.firstChild);
- }
-
- for (i = 0; i < num; i++) {
- if (JS.isUndefined(carousel._itemsTable.items[i * n])) {
- Dom.setStyle(pager, "visibility", "visible");
- break;
- }
- item = carousel._itemsTable.items[i * n].id;
-
- el = document.createElement("LI");
- if (!el) {
- YAHOO.log("Unable to create an LI pager button", "error",
- WidgetName);
- Dom.setStyle(pager, "visibility", "visible");
- break;
- }
-
- if (i === 0) {
- Dom.addClass(el, css.FIRST_PAGE);
- }
- if (i == cur) {
- Dom.addClass(el, css.SELECTED_NAV);
- }
-
- // TODO: use a template string for i18N compliance
- html = "<a href=\"#" + item + "\" tabindex=\"0\"><em>" +
- carousel.STRINGS.PAGER_PREFIX_TEXT + " " + (i+1) +
- "</em></a>";
- el.innerHTML = html;
-
- pager.appendChild(el);
- }
-
- // Show the pager now
- Dom.setStyle(pager, "visibility", "visible");
- },
-
- /**
- * Update the UI for the pager menu based on the current page and
- * the number of pages. If the number of pages is greater than
- * MAX_PAGER_BUTTONS, then the selection of pages is provided by a drop
- * down menu instead of a set of buttons.
- *
- * @method _updatePagerMenu
- * @protected
- */
- _updatePagerMenu: function () {
- var carousel = this,
- cur = carousel._pages.cur, // current page
- el,
- i,
- item,
- n = carousel.get("numVisible"),
- num = carousel._pages.num, // total pages
- pager = carousel._pages.el, // the pager container element
- sel;
-
- if (num === 0) {
- return; // don't do anything if number of pages is 0
- }
-
- sel = document.createElement("SELECT");
- if (!sel) {
- YAHOO.log("Unable to create the pager menu", "error",
- WidgetName);
- return;
- }
-
- // Hide the pager before redrawing it
- Dom.setStyle(pager, "visibility", "hidden");
-
- // Remove all nodes from the pager
- while (pager.firstChild) {
- pager.removeChild(pager.firstChild);
- }
-
- for (i = 0; i < num; i++) {
- if (JS.isUndefined(carousel._itemsTable.items[i * n])) {
- Dom.setStyle(pager, "visibility", "visible");
- break;
- }
- item = carousel._itemsTable.items[i * n].id;
-
- el = document.createElement("OPTION");
- if (!el) {
- YAHOO.log("Unable to create an OPTION pager menu", "error",
- WidgetName);
- Dom.setStyle(pager, "visibility", "visible");
- break;
- }
- el.value = "#" + item;
- // TODO: use a template string for i18N compliance
- el.innerHTML = carousel.STRINGS.PAGER_PREFIX_TEXT+" "+(i+1);
-
- if (i == cur) {
- el.setAttribute("selected", "selected");
- }
-
- sel.appendChild(el);
- }
-
- el = document.createElement("FORM");
- if (!el) {
- YAHOO.log("Unable to create the pager menu", "error",
- WidgetName);
- } else {
- el.appendChild(sel);
- pager.appendChild(el);
- }
-
- // Show the pager now
- Dom.setStyle(pager, "visibility", "visible");
- },
-
- /**
- * Set the correct tab index for the Carousel items.
- *
- * @method _updateTabIndex
- * @param el {Object} The element to be focussed
- * @protected
- */
- _updateTabIndex: function (el) {
- var carousel = this;
-
- if (el) {
- if (carousel._focusableItemEl) {
- carousel._focusableItemEl.tabIndex = -1;
- }
- carousel._focusableItemEl = el;
- el.tabIndex = 0;
- }
- },
-
- /**
- * Validate animation parameters.
- *
- * @method _validateAnimation
- * @param cfg {Object} The animation configuration
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateAnimation: function (cfg) {
- var rv = true;
-
- if (JS.isObject(cfg)) {
- if (cfg.speed) {
- rv = rv && JS.isNumber(cfg.speed);
- }
- if (cfg.effect) {
- rv = rv && JS.isFunction(cfg.effect);
- } else if (!JS.isUndefined(YAHOO.util.Easing)) {
- cfg.effect = YAHOO.util.Easing.easeOut;
- }
- } else {
- rv = false;
- }
-
- return rv;
- },
-
- /**
- * Validate the firstVisible value.
- *
- * @method _validateFirstVisible
- * @param val {Number} The first visible value
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateFirstVisible: function (val) {
- var carousel = this, numItems = carousel.get("numItems");
-
- if (JS.isNumber(val)) {
- if (numItems === 0 && val == numItems) {
- return true;
- } else {
- return (val >= 0 && val < numItems);
- }
- }
-
- return false;
- },
-
- /**
- * Validate and navigation parameters.
- *
- * @method _validateNavigation
- * @param cfg {Object} The navigation configuration
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateNavigation : function (cfg) {
- var i;
-
- if (!JS.isObject(cfg)) {
- return false;
- }
-
- if (cfg.prev) {
- if (!JS.isArray(cfg.prev)) {
- return false;
- }
- for (i in cfg.prev) {
- if (cfg.prev.hasOwnProperty(i)) {
- if (!JS.isString(cfg.prev[i].nodeName)) {
- return false;
- }
- }
- }
- }
-
- if (cfg.next) {
- if (!JS.isArray(cfg.next)) {
- return false;
- }
- for (i in cfg.next) {
- if (cfg.next.hasOwnProperty(i)) {
- if (!JS.isString(cfg.next[i].nodeName)) {
- return false;
- }
- }
- }
- }
-
- return true;
- },
-
- /**
- * Validate the numItems value.
- *
- * @method _validateNumItems
- * @param val {Number} The numItems value
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateNumItems: function (val) {
- return JS.isNumber(val) && (val >= 0);
- },
-
- /**
- * Validate the numVisible value.
- *
- * @method _validateNumVisible
- * @param val {Number} The numVisible value
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateNumVisible: function (val) {
- var rv = false;
-
- if (JS.isNumber(val)) {
- rv = val > 0 && val <= this.get("numItems");
- }
-
- return rv;
- },
-
- /**
- * Validate the revealAmount value.
- *
- * @method _validateRevealAmount
- * @param val {Number} The revealAmount value
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateRevealAmount: function (val) {
- var rv = false;
-
- if (JS.isNumber(val)) {
- rv = val >= 0 && val < 100;
- }
-
- return rv;
- },
-
- /**
- * Validate the scrollIncrement value.
- *
- * @method _validateScrollIncrement
- * @param val {Number} The scrollIncrement value
- * @return {Boolean} The status of the validation
- * @protected
- */
- _validateScrollIncrement: function (val) {
- var rv = false;
-
- if (JS.isNumber(val)) {
- rv = (val > 0 && val < this.get("numItems"));
- }
-
- return rv;
- }
-
- });
-
-})();
-/*
-;; Local variables: **
-;; mode: js2 **
-;; indent-tabs-mode: nil **
-;; End: **
-*/
-YAHOO.register("carousel", YAHOO.widget.Carousel, {version: "2.7.0", build: "1799"});
ToastFreeware / philipp / winterrodeln / wradmin.git / blobdiff