Browse files

gallery-node-accordion first commit

  • Loading branch information...
1 parent 0be685d commit 2da09d6ce92cd28c77c800e823479fc639c6d6be @caridy committed Oct 26, 2009
Showing with 4,614 additions and 0 deletions.
  1. +32 −0 build/gallery-node-accordion/assets/gallery-node-accordion-core.css
  2. +43 −0 build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
  3. +1 −0 build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css
  4. +597 −0 build/gallery-node-accordion/gallery-node-accordion-debug.js
  5. +1 −0 build/gallery-node-accordion/gallery-node-accordion-min.js
  6. +589 −0 build/gallery-node-accordion/gallery-node-accordion.js
  7. +92 −0 sandbox/caridy/node-accordion/.tmp_accordion-with-skin.html.45660~
  8. +92 −0 sandbox/caridy/node-accordion/.tmp_accordion-with-skin.html.57384~
  9. +111 −0 sandbox/caridy/node-accordion/.tmp_custom-style.html.98284~
  10. +111 −0 sandbox/caridy/node-accordion/.tmp_custom-style.html.98581~
  11. +28 −0 sandbox/caridy/node-accordion/LICENSE
  12. +92 −0 sandbox/caridy/node-accordion/accordion-with-skin.html
  13. +111 −0 sandbox/caridy/node-accordion/custom-style.html
  14. +32 −0 src/gallery-node-accordion/assets/gallery-node-accordion-core.css
  15. +43 −0 src/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
  16. +6 −0 src/gallery-node-accordion/build.properties
  17. +7 −0 src/gallery-node-accordion/build.xml
  18. +592 −0 src/gallery-node-accordion/js/gallery-node-accordion.js
  19. +92 −0 src/gallery-node-accordion/tests/.tmp_accordion-with-skin.html.29439~
  20. +92 −0 src/gallery-node-accordion/tests/.tmp_accordion-with-skin.html.29892~
  21. +92 −0 src/gallery-node-accordion/tests/.tmp_accordion-with-skin.html.68990~
  22. +92 −0 src/gallery-node-accordion/tests/.tmp_accordion-with-skin.html.8941~
  23. +111 −0 src/gallery-node-accordion/tests/.tmp_custom-style.html.19806~
  24. +111 −0 src/gallery-node-accordion/tests/.tmp_custom-style.html.44789~
  25. +110 −0 src/gallery-node-accordion/tests/.tmp_custom-style.html.48791~
  26. +111 −0 src/gallery-node-accordion/tests/.tmp_custom-style.html.9162~
  27. +188 −0 src/gallery-node-accordion/tests/.tmp_simple.html.19935~
  28. +86 −0 src/gallery-node-accordion/tests/.tmp_simple.html.50158~
  29. +188 −0 src/gallery-node-accordion/tests/.tmp_simple.html.5495~
  30. 0 src/gallery-node-accordion/tests/.tmp_simple.html.61979~
  31. +188 −0 src/gallery-node-accordion/tests/.tmp_simple.html.69836~
  32. +188 −0 src/gallery-node-accordion/tests/.tmp_simple.html.73645~
  33. +97 −0 src/gallery-node-accordion/tests/.tmp_simple.html.78935~
  34. +100 −0 src/gallery-node-accordion/tests/.tmp_simple.html.90619~
  35. +188 −0 src/gallery-node-accordion/tests/default.html
View
32 build/gallery-node-accordion/assets/gallery-node-accordion-core.css
@@ -0,0 +1,32 @@
+.yui-accordion {
+ position: relative;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item {
+ display: block;
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ height: 0;
+ _height: 1px;
+ *height: 1px;
+ overflow: hidden;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item-active .yui-accordion-item-bd {
+ height: auto;
+}
+.yui-accordion-hidden {
+ /* absolute position off-screen and box collapsing used to
+ avoid display:none, which causes issues for some content (firefox
+ restarts flash movies) */
+ border:0;
+ height:0;
+ width:0;
+ padding:0;
+ position:absolute;
+ left:-999999px;
+ overflow:hidden;
+ visibility:hidden;
+}
View
43 build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
@@ -0,0 +1,43 @@
+.yui-skin-sam .yui-accordion {
+ font-size: 93%; /* 12px */
+ line-height: 1.5; /* 18px */
+ *line-height: 1.45; /* For IE */
+ border-top: solid 1px #808080;
+ border-left: solid 1px #808080;
+ border-right: solid 1px #808080;
+ background: #fff;
+ padding: 0;
+ text-align: left;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item {
+ display: block;
+ border-bottom: solid 1px #808080;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ line-height: 2; /* ~24px */
+ *line-height: 1.9; /* For IE */
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;
+ padding: 0;
+ padding: 5px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+.yui-skin-sam .yui-accordion .first-of-type {
+
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ width: auto;
+ display: block;
+ color: #000;
+ text-decoration: none;
+ cursor: default;
+ padding: 0 5px 0 10px;
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -345px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-active .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -395px;
+}
View
1 build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css
@@ -0,0 +1 @@
+.yui-accordion{position:relative;zoom:1;}.yui-accordion .yui-accordion-item{display:block;}.yui-accordion .yui-accordion-item .yui-accordion-item-bd{height:0;_height:1px;*height:1px;overflow:hidden;zoom:1;}.yui-accordion .yui-accordion-item-active .yui-accordion-item-bd{height:auto;}.yui-accordion-hidden{border:0;height:0;width:0;padding:0;position:absolute;left:-999999px;overflow:hidden;visibility:hidden;}.yui-skin-sam .yui-accordion{font-size:93%;line-height:1.5;*line-height:1.45;border-top:solid 1px #808080;border-left:solid 1px #808080;border-right:solid 1px #808080;background:#fff;padding:0;text-align:left;}.yui-skin-sam .yui-accordion .yui-accordion-item{display:block;border-bottom:solid 1px #808080;}.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-hd{line-height:2;*line-height:1.9;background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;padding:0;padding:5px;}.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-bd{font-size:100%;margin:0;padding:0;display:block;}.yui-skin-sam .yui-accordion .yui-accordion-item-hd a.yui-accordion-item-trigger{width:auto;display:block;color:#000;text-decoration:none;cursor:default;padding:0 5px 0 10px;background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -345px;}.yui-skin-sam .yui-accordion .yui-accordion-item-active .yui-accordion-item-hd a.yui-accordion-item-trigger{background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -395px;}
View
597 build/gallery-node-accordion/gallery-node-accordion-debug.js
@@ -0,0 +1,597 @@
+YUI.add('gallery-node-accordion', function(Y) {
+
+/**
+* <p>The Accordion Node Plugin makes it easy to transform existing
+* markup into an accordion element with expandable and collapsable elements,
+* elements are easy to customize, and only require a small set of dependencies.</p>
+*
+*
+* <p>To use the Accordion Node Plugin, simply pass a reference to the plugin to a
+* Node instance's <code>plug</code> method.</p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion); <br>
+* <br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* <p>The Accordion Node Plugin has several configuration properties that can be
+* set via an object literal that is passed as a second argument to a Node
+* instance's <code>plug</code> method.
+* </p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion, { anim: true, effect: Y.Easing.backIn });
+* <br><br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* @module gallery-node-accordion
+*/
+
+
+// Util shortcuts
+
+var UA = Y.UA,
+ getClassName = Y.ClassNameManager.getClassName,
+ anims = {},
+ wheels = {fast:0.1,slow:0.6,normal:0.4},
+
+ // Frequently used strings
+ ACCORDION = "accordion",
+ ACCORDIONITEM = "item",
+ SCROLL_HEIGHT = "scrollHeight",
+ SCROLL_WIDTH = "scrollWidth",
+ WIDTH = "width",
+ HEIGHT = "height",
+ PX = "px",
+ PERIOD = ".",
+ HOST = "host",
+
+ // Attribute keys
+ ATTR_ORIENTATION = 'orientation',
+ ATTR_FADE = 'fade',
+ ATTR_MULTIPLE = 'multiple',
+ ATTR_PERSISTENT = 'persistent',
+ ATTR_SPEED = 'speed',
+ ATTR_ANIM = 'anim',
+ ATTR_ITEMS = 'items',
+
+ // CSS class names
+ CLASS_ACCORDION = getClassName(ACCORDION),
+ CLASS_ACCORDION_HIDDEN = getClassName(ACCORDION, 'hidden'),
+ CLASS_ACCORDION_ITEM = getClassName(ACCORDION, ACCORDIONITEM),
+ CLASS_ACTIVE = getClassName(ACCORDION, ACCORDIONITEM, "active"),
+ CLASS_SLIDING = getClassName(ACCORDION, ACCORDIONITEM, "sliding"),
+ CLASS_ACCORDION_ITEM_HD = getClassName(ACCORDION, ACCORDIONITEM, "hd"),
+ CLASS_ACCORDION_ITEM_BD = getClassName(ACCORDION, ACCORDIONITEM, "bd"),
+ CLASS_ACCORDION_ITEM_FT = getClassName(ACCORDION, ACCORDIONITEM, "ft"),
+ CLASS_ACCORDION_ITEM_TRIGGER = getClassName(ACCORDION, ACCORDIONITEM, "trigger"),
+
+ // CSS selectors
+ SELECTOR_ACCORDION_ITEM = PERIOD + CLASS_ACCORDION_ITEM,
+ SELECTOR_ACCORDION_ITEM_BD = PERIOD + CLASS_ACCORDION_ITEM_BD,
+ // few more just in case...
+ //SELECTOR_ACCORDION = PERIOD + CLASS_ACCORDION,
+ //SELECTOR_ACCORDION_ITEM_TRIGGER = PERIOD + CLASS_ACCORDION_ITEM_TRIGGER,
+
+ FC = '>.',
+ ITEM_QUERY = FC + CLASS_ACCORDION_ITEM,
+ ITEM_TRIGGER_QUERY = FC + CLASS_ACCORDION_ITEM + PERIOD + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_HD + FC + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_FT + FC + CLASS_ACCORDION_ITEM_TRIGGER,
+ // few more just in case...
+ //ITEM_HD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_HD,
+ //ITEM_BD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_BD,
+ //ITEM_FT_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_FT,
+
+ // Utility functions
+ /**
+ * The NodeAccordion class is a plugin for a Node instance. The class is used via
+ * the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
+ * should not be instantiated directly.
+ * @namespace plugin
+ * @class NodeAccordion
+ */
+ NodeAccordion = function () {
+
+ NodeAccordion.superclass.constructor.apply(this, arguments);
+
+ };
+
+NodeAccordion.NAME = "NodeAccordion";
+NodeAccordion.NS = ACCORDION;
+
+NodeAccordion.ATTRS = {
+ /**
+ * Nodes representing the list of active items.
+ *
+ * @attribute activeItems
+ * @type Y.NodeList
+ */
+ activeItems: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(FC+CLASS_ACTIVE);
+ }
+ },
+ /**
+ * Nodes representing the list of items.
+ *
+ * @attribute items
+ * @type Y.NodeList
+ */
+ items: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(ITEM_QUERY);
+ }
+ },
+
+ /**
+ * orientation defines if the accordion will use width or height to expand and collapse items.
+ *
+ * @attribute orientation
+ * @writeOnce
+ * @default height
+ * @type string
+ */
+ orientation: {
+ value: HEIGHT,
+ writeOnce: true
+ },
+ /**
+ * Boolean indicating that animation should include opacity to fade in/out the content of the item.
+ *
+ * @attribute fade
+ * @default false
+ * @type boolean
+ */
+ fade: {
+ value: false
+ },
+ /**
+ * Boolean indicating that Y.Anim should be used to expand and collapse items.
+ * It also supports a function with an specific effect.
+ * <p>
+ * <code>
+ * &#60;script type="text/javascript"&#62; <br>
+ * <br>
+ * // Call the "use" method, passing in "anim" and "gallery-node-accordion". <br>
+ * <br>
+ * YUI().use("anim", "gallery-node-accordion", function(Y) { <br>
+ * <br>
+ * Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {<br>
+ * anim: Y.Easing.backIn<br>
+ * }); <br>
+ * <br>
+ * &#60;/script&#62; <br>
+ * </code>
+ * </p>
+ *
+ * @attribute anim
+ * @default false
+ * @type {boolean|function}
+ */
+ anim: {
+ value: false,
+ validator : function (v) {
+ return !Y.Lang.isUndefined(Y.Anim);
+ }
+ },
+ /**
+ * Boolean indicating that more than one item can be opened at the same time.
+ *
+ * @attribute multiple
+ * @default true
+ * @type boolean
+ */
+ multiple: {
+ value: true
+ },
+ /**
+ * Boolean indicating that one of the items should be open at any given time.
+ *
+ * @attribute persistent
+ * @default false
+ * @type boolean
+ */
+ persistent: {
+ value: false
+ },
+ /**
+ * Numeric value indicating the speed in mili-seconds for the animation process.
+ * Also support three predefined strings in lowercase:
+ * <ol>
+ * <li>fast = 0.1</li>
+ * <li>normal = 0.4</li>
+ * <li>slow = 0.6</li>
+ * </ol>
+ *
+ * @attribute speed
+ * @readOnly
+ * @default 0.4
+ * @type numeric
+ */
+ speed: {
+ value: 0.4,
+ validator : function (v) {
+ return (Y.Lang.isNumber(v) || (Y.Lang.isString(v) && wheels.hasOwnProperty(v)));
+ },
+ setter : function (v) {
+ return (wheels.hasOwnProperty(v)?wheels[v]:v);
+ }
+ }
+
+};
+
+
+Y.extend(NodeAccordion, Y.Plugin.Base, {
+
+ // Protected properties
+
+ /**
+ * @property _root
+ * @description Node instance representing the root node in the accordion.
+ * @default null
+ * @protected
+ * @type Node
+ */
+ _root: null,
+
+ // Public methods
+
+ initializer: function (config) {
+ var _root = this.get(HOST),
+ aHandlers = [];
+ if (_root) {
+
+ this._root = _root;
+
+ // close all items and open the actived ones
+ this.get(ATTR_ITEMS).each(function(item) {
+ if (item.hasClass(CLASS_ACTIVE)) {
+ this.expandItem(item);
+ } else {
+ this.collapseItem(item);
+ }
+ }, this);
+
+ // Wire up all event handlers
+ aHandlers.push(_root.delegate('click', function(e) {
+ Y.log ('Accordion Trigger: ' + e);
+ this.toggleItem(e.currentTarget); // probably is better to pass the ancestor for the item
+ e.target.blur();
+ e.halt();
+ }, ITEM_TRIGGER_QUERY, this));
+ aHandlers = this._eventHandlers;
+
+ _root.removeClass(CLASS_ACCORDION_HIDDEN);
+ }
+ },
+
+ destructor: function () {
+ var aHandlers = this._eventHandlers;
+ if (aHandlers) {
+ Y.Array.each(aHandlers, function (handle) {
+ handle.detach();
+ });
+ this._eventHandlers = null;
+ }
+ },
+
+ // Protected methods
+ /**
+ * @method _getItem
+ * @description Searching for an item based on a node reference or an index order.
+ * @protected
+ * @param {Node|Number} node Node reference or Node index.
+ * @return {Node} The matching DOM node or null if none found.
+ */
+ _getItem: function(node) {
+ if (Y.Lang.isNumber(node)) {
+ node = this.get(ATTR_ITEMS).item(node);
+ }
+ var fn = function(n) {
+ return n.hasClass(CLASS_ACCORDION_ITEM);
+ };
+ if (node && !node.hasClass(CLASS_ACCORDION_ITEM)) {
+ return node.ancestor( fn );
+ }
+ return node;
+ },
+
+ /**
+ * @method _animate
+ * @description Using Y.Anim to expand or collapse an item.
+ * @protected
+ * @param {String} id Global Unique ID for the animation.
+ * @param {Object} conf Configuration object for the animation.
+ * @param {Function} fn callback function that should be executed after the end of the anim.
+ * @return {Object} Animation handler.
+ */
+ _animate: function(id, conf, fn) {
+ var anim = anims[id];
+ Y.log ('Anim Conf: ' + conf);
+ // if the animation is underway: we need to stop it...
+ if ((anim) && (anim.get ('running'))) {
+ anim.stop();
+ }
+ if (Y.Lang.isFunction(this.get(ATTR_ANIM))) {
+ conf.easing = this.get(ATTR_ANIM);
+ }
+ anim = new Y.Anim(conf);
+ anim.on('end', fn, this);
+ anim.run();
+ anims[id] = anim;
+ return anim;
+ },
+
+ /**
+ * @method _openItem
+ * @description Open an item.
+ * @protected
+ * @param {Node} item Node instance representing an item.
+ */
+ _openItem: function (item) {
+ var bd,
+ id,
+ fn,
+ fs,
+ i,
+ list = this.get(ATTR_ITEMS),
+ o = this.get (ATTR_ORIENTATION),
+ conf = {
+ duration: this.get(ATTR_SPEED),
+ to: {
+ scroll: []
+ }
+ },
+ mirror;
+ // if the item is not already opened
+ if (item && list.size() && !item.hasClass(CLASS_ACTIVE) && (bd = item.one(SELECTOR_ACCORDION_ITEM_BD)) && (id = Y.stamp(bd))) {
+ // closing all the selected items if neccesary
+ if (!this.get(ATTR_MULTIPLE)) {
+ // close all items and open the actived ones
+ mirror = this._root.one(FC+CLASS_ACTIVE);
+ }
+ // opening the selected element, based on the orientation, timer and anim attributes...
+ conf.to[o] = (o==WIDTH?bd.get(SCROLL_WIDTH):bd.get(SCROLL_HEIGHT));
+ conf.node = bd;
+ item.addClass(CLASS_SLIDING);
+ fn = function() {
+ item.removeClass(CLASS_SLIDING);
+ item.addClass(CLASS_ACTIVE);
+ // broadcasting the corresponding event (close)...
+ // $B.fire ('accordionOpenItem', item);
+ };
+ if (!this.get(ATTR_ANIM)) {
+ // animation manually
+ // getting the desired dimension from the current item
+ fs = bd.get(o);
+ // override the desired dimension from the mirror if exists
+ if (Y.Lang.isObject(mirror)) {
+ fs = mirror.get(o);
+ mirror.addClass(CLASS_SLIDING);
+ }
+ for (i=1;i<=fs;i++){
+ if (Y.Lang.isObject(mirror)) {
+ mirror.setStyle (o, (fs-i)+PX);
+ }
+ bd.setStyle (o, i+PX);
+ }
+ if (Y.Lang.isObject(mirror)) {
+ mirror.removeClass(CLASS_SLIDING);
+ mirror.removeClass(CLASS_ACTIVE);
+ }
+ fn();
+ } else {
+ // scrolling effect
+ conf.to.scroll = [0,0];
+ // appliying fadeIn
+ if (this.get(ATTR_FADE)) {
+ conf.to.opacity = 1;
+ }
+ if (Y.Lang.isObject(mirror)) {
+ this._closeItem(mirror);
+ }
+ this._animate(id, conf, fn);
+ }
+ }
+ },
+
+ /**
+ * @method _closeItem
+ * @description Closes the specified item.
+ * @protected
+ * @param {Node} item Node instance representing an item.
+ */
+ _closeItem: function (item) {
+
+ var bd,
+ id,
+ fn,
+ fs,
+ i,
+ list = this.get(ATTR_ITEMS),
+ o = this.get (ATTR_ORIENTATION),
+ conf = {
+ duration: this.get(ATTR_SPEED),
+ to: {
+ scroll: []
+ }
+ };
+ if (item && list.size() && (bd = item.one(SELECTOR_ACCORDION_ITEM_BD)) && (id = Y.stamp(bd))) {
+ // closing the item, based on the orientation, timer and anim attributes...
+ conf.to[o] = (((o==HEIGHT) && UA.ie && (UA.ie<7))?1:0); // hack for vertical accordion issue on Safari and Opera
+ conf.node = bd;
+ item.addClass(CLASS_SLIDING);
+ fn = function() {
+ item.removeClass(CLASS_SLIDING);
+ item.removeClass(CLASS_ACTIVE);
+ // broadcasting the corresponding event (close)...
+ // $B.fire ('accordionCloseItem', item);
+ };
+ if (!this.get(ATTR_ANIM)) {
+ // animation manually
+ fs = bd.get(o);
+ for (i=fs;i>=conf.to[o].to;i--){
+ bd.setStyle (o, i+PX);
+ }
+ fn();
+ } else {
+ // scrolling effect
+ conf.to.scroll = (o==WIDTH?[bd.get(SCROLL_WIDTH),0]:[0,bd.get(SCROLL_HEIGHT)]);
+ // appliying fadeIn
+ if (this.get(ATTR_FADE)) {
+ conf.to.opacity = 0;
+ }
+ this._animate(id, conf, fn);
+ }
+ }
+
+ },
+
+ // Generic DOM Event handlers
+ /**
+ * @method expandAllItems
+ * @description Expanding all items.
+ * @public
+ * @return {object} Plugin reference for chaining
+ */
+ expandAllItems: function () {
+ Y.log(("Expanding all items (only if attr multiple=true): " + this._root), "info", "nodeAccordion");
+ if (this.get(ATTR_MULTIPLE)) {
+ this.get(ATTR_ITEMS).each(function (node) {
+ this.expandItem(node);
+ }, this);
+ }
+ return this;
+ },
+
+ /**
+ * @method collapseAllItems
+ * @description Collapsing all items.
+ * @public
+ * @return {object} Plugin reference for chaining
+ */
+ collapseAllItems: function () {
+ Y.log(("Collapsing all items (only if attr multiple=true or attr persistent=false): " + this._root), "info", "nodeAccordion");
+ if (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT)) {
+ this.get(ATTR_ITEMS).each(function (node) {
+ this.collapseItem(node);
+ }, this);
+ }
+ return this;
+ },
+
+ /**
+ * @method expandItem
+ * @description Expand a certain item.
+ * @public
+ * @param {Node} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ expandItem: function ( node ) {
+ var item = this._getItem(node);
+ if (item) {
+ Y.log(("Expanding an item: " + item), "info", "nodeAccordion");
+ this._openItem (item);
+ }
+ return this;
+ },
+
+ /**
+ * @method collapseItem
+ * @description Collapse a certain item.
+ * @public
+ * @param {Node} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ collapseItem: function ( node ) {
+ var item = this._getItem(node);
+ if (item && item.hasClass(CLASS_ACTIVE) && (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT))) {
+ Y.log(("Collapse an item: " + item), "info", "nodeAccordion");
+ this._closeItem(item);
+ }
+ return this;
+ },
+
+ /**
+ * @method toggleItem
+ * @description toggle a certain item.
+ * @public
+ * @param {object} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ toggleItem: function ( node ) {
+ var item = this._getItem(node);
+ Y.log ('Looking for accordion item: ' + SELECTOR_ACCORDION_ITEM);
+ if (item) {
+ // if the item is already opened, and is multiple and not persistent
+ Y.log(("Toggling an item: " + item), "info", "nodeAccordion");
+ ((item.hasClass(CLASS_ACTIVE) && (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT)))?this._closeItem (item):this._openItem (item));
+ }
+ return this;
+ }
+
+});
+
+Y.namespace('Plugin');
+
+Y.Plugin.NodeAccordion = NodeAccordion;
+
+
+}, '@VERSION@' ,{requires:['node-base', 'node-style', 'plugin', 'node-event-delegate', 'classnamemanager'], optional:['anim']});
View
1 build/gallery-node-accordion/gallery-node-accordion-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-node-accordion",function(B){var S=B.UA,f=B.ClassNameManager.getClassName,X={},I={fast:0.1,slow:0.6,normal:0.4},J="accordion",E="item",a="scrollHeight",e="scrollWidth",F="width",V="height",i="px",G=".",O="host",j="orientation",D="fade",W="multiple",L="persistent",k="speed",c="anim",T="items",g=f(J),Z=f(J,"hidden"),H=f(J,E),M=f(J,E,"active"),A=f(J,E,"sliding"),d=f(J,E,"hd"),b=f(J,E,"bd"),K=f(J,E,"ft"),P=f(J,E,"trigger"),h=G+H,C=G+b,Q=">.",U=Q+H,R=Q+H+G+P+","+Q+H+Q+d+Q+P+","+Q+H+Q+K+Q+P,N=function(){N.superclass.constructor.apply(this,arguments);};N.NAME="NodeAccordion";N.NS=J;N.ATTRS={activeItems:{readOnly:true,getter:function(Y){return this._root.all(Q+M);}},items:{readOnly:true,getter:function(Y){return this._root.all(U);}},orientation:{value:V,writeOnce:true},fade:{value:false},anim:{value:false,validator:function(Y){return !B.Lang.isUndefined(B.Anim);}},multiple:{value:true},persistent:{value:false},speed:{value:0.4,validator:function(Y){return(B.Lang.isNumber(Y)||(B.Lang.isString(Y)&&I.hasOwnProperty(Y)));},setter:function(Y){return(I.hasOwnProperty(Y)?I[Y]:Y);}}};B.extend(N,B.Plugin.Base,{_root:null,initializer:function(l){var m=this.get(O),Y=[];if(m){this._root=m;this.get(T).each(function(n){if(n.hasClass(M)){this.expandItem(n);}else{this.collapseItem(n);}},this);Y.push(m.delegate("click",function(n){this.toggleItem(n.currentTarget);n.target.blur();n.halt();},R,this));Y=this._eventHandlers;m.removeClass(Z);}},destructor:function(){var Y=this._eventHandlers;if(Y){B.Array.each(Y,function(l){l.detach();});this._eventHandlers=null;}},_getItem:function(l){if(B.Lang.isNumber(l)){l=this.get(T).item(l);}var Y=function(m){return m.hasClass(H);};if(l&&!l.hasClass(H)){return l.ancestor(Y);}return l;},_animate:function(n,Y,l){var m=X[n];if((m)&&(m.get("running"))){m.stop();}if(B.Lang.isFunction(this.get(c))){Y.easing=this.get(c);}m=new B.Anim(Y);m.on("end",l,this);m.run();X[n]=m;return m;},_openItem:function(u){var p,Y,s,n,m,r=this.get(T),l=this.get(j),q={duration:this.get(k),to:{scroll:[]}},t;if(u&&r.size()&&!u.hasClass(M)&&(p=u.one(C))&&(Y=B.stamp(p))){if(!this.get(W)){t=this._root.one(Q+M);}q.to[l]=(l==F?p.get(e):p.get(a));q.node=p;u.addClass(A);s=function(){u.removeClass(A);u.addClass(M);};if(!this.get(c)){n=p.get(l);if(B.Lang.isObject(t)){n=t.get(l);t.addClass(A);}for(m=1;m<=n;m++){if(B.Lang.isObject(t)){t.setStyle(l,(n-m)+i);}p.setStyle(l,m+i);}if(B.Lang.isObject(t)){t.removeClass(A);t.removeClass(M);}s();}else{q.to.scroll=[0,0];if(this.get(D)){q.to.opacity=1;}if(B.Lang.isObject(t)){this._closeItem(t);}this._animate(Y,q,s);}}},_closeItem:function(t){var p,Y,s,n,m,r=this.get(T),l=this.get(j),q={duration:this.get(k),to:{scroll:[]}};if(t&&r.size()&&(p=t.one(C))&&(Y=B.stamp(p))){q.to[l]=(((l==V)&&S.ie&&(S.ie<7))?1:0);q.node=p;t.addClass(A);s=function(){t.removeClass(A);t.removeClass(M);};if(!this.get(c)){n=p.get(l);for(m=n;m>=q.to[l].to;m--){p.setStyle(l,m+i);}s();}else{q.to.scroll=(l==F?[p.get(e),0]:[0,p.get(a)]);if(this.get(D)){q.to.opacity=0;}this._animate(Y,q,s);}}},expandAllItems:function(){if(this.get(W)){this.get(T).each(function(Y){this.expandItem(Y);},this);}return this;},collapseAllItems:function(){if(this.get(W)||!this.get(L)){this.get(T).each(function(Y){this.collapseItem(Y);},this);}return this;},expandItem:function(l){var Y=this._getItem(l);if(Y){this._openItem(Y);}return this;},collapseItem:function(l){var Y=this._getItem(l);if(Y&&Y.hasClass(M)&&(this.get(W)||!this.get(L))){this._closeItem(Y);}return this;},toggleItem:function(l){var Y=this._getItem(l);if(Y){((Y.hasClass(M)&&(this.get(W)||!this.get(L)))?this._closeItem(Y):this._openItem(Y));}return this;}});B.namespace("Plugin");B.Plugin.NodeAccordion=N;},"@VERSION@",{requires:["node-base","node-style","plugin","node-event-delegate","classnamemanager"],optional:["anim"]});
View
589 build/gallery-node-accordion/gallery-node-accordion.js
@@ -0,0 +1,589 @@
+YUI.add('gallery-node-accordion', function(Y) {
+
+/**
+* <p>The Accordion Node Plugin makes it easy to transform existing
+* markup into an accordion element with expandable and collapsable elements,
+* elements are easy to customize, and only require a small set of dependencies.</p>
+*
+*
+* <p>To use the Accordion Node Plugin, simply pass a reference to the plugin to a
+* Node instance's <code>plug</code> method.</p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion); <br>
+* <br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* <p>The Accordion Node Plugin has several configuration properties that can be
+* set via an object literal that is passed as a second argument to a Node
+* instance's <code>plug</code> method.
+* </p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion, { anim: true, effect: Y.Easing.backIn });
+* <br><br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* @module gallery-node-accordion
+*/
+
+
+// Util shortcuts
+
+var UA = Y.UA,
+ getClassName = Y.ClassNameManager.getClassName,
+ anims = {},
+ wheels = {fast:0.1,slow:0.6,normal:0.4},
+
+ // Frequently used strings
+ ACCORDION = "accordion",
+ ACCORDIONITEM = "item",
+ SCROLL_HEIGHT = "scrollHeight",
+ SCROLL_WIDTH = "scrollWidth",
+ WIDTH = "width",
+ HEIGHT = "height",
+ PX = "px",
+ PERIOD = ".",
+ HOST = "host",
+
+ // Attribute keys
+ ATTR_ORIENTATION = 'orientation',
+ ATTR_FADE = 'fade',
+ ATTR_MULTIPLE = 'multiple',
+ ATTR_PERSISTENT = 'persistent',
+ ATTR_SPEED = 'speed',
+ ATTR_ANIM = 'anim',
+ ATTR_ITEMS = 'items',
+
+ // CSS class names
+ CLASS_ACCORDION = getClassName(ACCORDION),
+ CLASS_ACCORDION_HIDDEN = getClassName(ACCORDION, 'hidden'),
+ CLASS_ACCORDION_ITEM = getClassName(ACCORDION, ACCORDIONITEM),
+ CLASS_ACTIVE = getClassName(ACCORDION, ACCORDIONITEM, "active"),
+ CLASS_SLIDING = getClassName(ACCORDION, ACCORDIONITEM, "sliding"),
+ CLASS_ACCORDION_ITEM_HD = getClassName(ACCORDION, ACCORDIONITEM, "hd"),
+ CLASS_ACCORDION_ITEM_BD = getClassName(ACCORDION, ACCORDIONITEM, "bd"),
+ CLASS_ACCORDION_ITEM_FT = getClassName(ACCORDION, ACCORDIONITEM, "ft"),
+ CLASS_ACCORDION_ITEM_TRIGGER = getClassName(ACCORDION, ACCORDIONITEM, "trigger"),
+
+ // CSS selectors
+ SELECTOR_ACCORDION_ITEM = PERIOD + CLASS_ACCORDION_ITEM,
+ SELECTOR_ACCORDION_ITEM_BD = PERIOD + CLASS_ACCORDION_ITEM_BD,
+ // few more just in case...
+ //SELECTOR_ACCORDION = PERIOD + CLASS_ACCORDION,
+ //SELECTOR_ACCORDION_ITEM_TRIGGER = PERIOD + CLASS_ACCORDION_ITEM_TRIGGER,
+
+ FC = '>.',
+ ITEM_QUERY = FC + CLASS_ACCORDION_ITEM,
+ ITEM_TRIGGER_QUERY = FC + CLASS_ACCORDION_ITEM + PERIOD + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_HD + FC + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_FT + FC + CLASS_ACCORDION_ITEM_TRIGGER,
+ // few more just in case...
+ //ITEM_HD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_HD,
+ //ITEM_BD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_BD,
+ //ITEM_FT_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_FT,
+
+ // Utility functions
+ /**
+ * The NodeAccordion class is a plugin for a Node instance. The class is used via
+ * the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
+ * should not be instantiated directly.
+ * @namespace plugin
+ * @class NodeAccordion
+ */
+ NodeAccordion = function () {
+
+ NodeAccordion.superclass.constructor.apply(this, arguments);
+
+ };
+
+NodeAccordion.NAME = "NodeAccordion";
+NodeAccordion.NS = ACCORDION;
+
+NodeAccordion.ATTRS = {
+ /**
+ * Nodes representing the list of active items.
+ *
+ * @attribute activeItems
+ * @type Y.NodeList
+ */
+ activeItems: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(FC+CLASS_ACTIVE);
+ }
+ },
+ /**
+ * Nodes representing the list of items.
+ *
+ * @attribute items
+ * @type Y.NodeList
+ */
+ items: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(ITEM_QUERY);
+ }
+ },
+
+ /**
+ * orientation defines if the accordion will use width or height to expand and collapse items.
+ *
+ * @attribute orientation
+ * @writeOnce
+ * @default height
+ * @type string
+ */
+ orientation: {
+ value: HEIGHT,
+ writeOnce: true
+ },
+ /**
+ * Boolean indicating that animation should include opacity to fade in/out the content of the item.
+ *
+ * @attribute fade
+ * @default false
+ * @type boolean
+ */
+ fade: {
+ value: false
+ },
+ /**
+ * Boolean indicating that Y.Anim should be used to expand and collapse items.
+ * It also supports a function with an specific effect.
+ * <p>
+ * <code>
+ * &#60;script type="text/javascript"&#62; <br>
+ * <br>
+ * // Call the "use" method, passing in "anim" and "gallery-node-accordion". <br>
+ * <br>
+ * YUI().use("anim", "gallery-node-accordion", function(Y) { <br>
+ * <br>
+ * Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {<br>
+ * anim: Y.Easing.backIn<br>
+ * }); <br>
+ * <br>
+ * &#60;/script&#62; <br>
+ * </code>
+ * </p>
+ *
+ * @attribute anim
+ * @default false
+ * @type {boolean|function}
+ */
+ anim: {
+ value: false,
+ validator : function (v) {
+ return !Y.Lang.isUndefined(Y.Anim);
+ }
+ },
+ /**
+ * Boolean indicating that more than one item can be opened at the same time.
+ *
+ * @attribute multiple
+ * @default true
+ * @type boolean
+ */
+ multiple: {
+ value: true
+ },
+ /**
+ * Boolean indicating that one of the items should be open at any given time.
+ *
+ * @attribute persistent
+ * @default false
+ * @type boolean
+ */
+ persistent: {
+ value: false
+ },
+ /**
+ * Numeric value indicating the speed in mili-seconds for the animation process.
+ * Also support three predefined strings in lowercase:
+ * <ol>
+ * <li>fast = 0.1</li>
+ * <li>normal = 0.4</li>
+ * <li>slow = 0.6</li>
+ * </ol>
+ *
+ * @attribute speed
+ * @readOnly
+ * @default 0.4
+ * @type numeric
+ */
+ speed: {
+ value: 0.4,
+ validator : function (v) {
+ return (Y.Lang.isNumber(v) || (Y.Lang.isString(v) && wheels.hasOwnProperty(v)));
+ },
+ setter : function (v) {
+ return (wheels.hasOwnProperty(v)?wheels[v]:v);
+ }
+ }
+
+};
+
+
+Y.extend(NodeAccordion, Y.Plugin.Base, {
+
+ // Protected properties
+
+ /**
+ * @property _root
+ * @description Node instance representing the root node in the accordion.
+ * @default null
+ * @protected
+ * @type Node
+ */
+ _root: null,
+
+ // Public methods
+
+ initializer: function (config) {
+ var _root = this.get(HOST),
+ aHandlers = [];
+ if (_root) {
+
+ this._root = _root;
+
+ // close all items and open the actived ones
+ this.get(ATTR_ITEMS).each(function(item) {
+ if (item.hasClass(CLASS_ACTIVE)) {
+ this.expandItem(item);
+ } else {
+ this.collapseItem(item);
+ }
+ }, this);
+
+ // Wire up all event handlers
+ aHandlers.push(_root.delegate('click', function(e) {
+ this.toggleItem(e.currentTarget); // probably is better to pass the ancestor for the item
+ e.target.blur();
+ e.halt();
+ }, ITEM_TRIGGER_QUERY, this));
+ aHandlers = this._eventHandlers;
+
+ _root.removeClass(CLASS_ACCORDION_HIDDEN);
+ }
+ },
+
+ destructor: function () {
+ var aHandlers = this._eventHandlers;
+ if (aHandlers) {
+ Y.Array.each(aHandlers, function (handle) {
+ handle.detach();
+ });
+ this._eventHandlers = null;
+ }
+ },
+
+ // Protected methods
+ /**
+ * @method _getItem
+ * @description Searching for an item based on a node reference or an index order.
+ * @protected
+ * @param {Node|Number} node Node reference or Node index.
+ * @return {Node} The matching DOM node or null if none found.
+ */
+ _getItem: function(node) {
+ if (Y.Lang.isNumber(node)) {
+ node = this.get(ATTR_ITEMS).item(node);
+ }
+ var fn = function(n) {
+ return n.hasClass(CLASS_ACCORDION_ITEM);
+ };
+ if (node && !node.hasClass(CLASS_ACCORDION_ITEM)) {
+ return node.ancestor( fn );
+ }
+ return node;
+ },
+
+ /**
+ * @method _animate
+ * @description Using Y.Anim to expand or collapse an item.
+ * @protected
+ * @param {String} id Global Unique ID for the animation.
+ * @param {Object} conf Configuration object for the animation.
+ * @param {Function} fn callback function that should be executed after the end of the anim.
+ * @return {Object} Animation handler.
+ */
+ _animate: function(id, conf, fn) {
+ var anim = anims[id];
+ // if the animation is underway: we need to stop it...
+ if ((anim) && (anim.get ('running'))) {
+ anim.stop();
+ }
+ if (Y.Lang.isFunction(this.get(ATTR_ANIM))) {
+ conf.easing = this.get(ATTR_ANIM);
+ }
+ anim = new Y.Anim(conf);
+ anim.on('end', fn, this);
+ anim.run();
+ anims[id] = anim;
+ return anim;
+ },
+
+ /**
+ * @method _openItem
+ * @description Open an item.
+ * @protected
+ * @param {Node} item Node instance representing an item.
+ */
+ _openItem: function (item) {
+ var bd,
+ id,
+ fn,
+ fs,
+ i,
+ list = this.get(ATTR_ITEMS),
+ o = this.get (ATTR_ORIENTATION),
+ conf = {
+ duration: this.get(ATTR_SPEED),
+ to: {
+ scroll: []
+ }
+ },
+ mirror;
+ // if the item is not already opened
+ if (item && list.size() && !item.hasClass(CLASS_ACTIVE) && (bd = item.one(SELECTOR_ACCORDION_ITEM_BD)) && (id = Y.stamp(bd))) {
+ // closing all the selected items if neccesary
+ if (!this.get(ATTR_MULTIPLE)) {
+ // close all items and open the actived ones
+ mirror = this._root.one(FC+CLASS_ACTIVE);
+ }
+ // opening the selected element, based on the orientation, timer and anim attributes...
+ conf.to[o] = (o==WIDTH?bd.get(SCROLL_WIDTH):bd.get(SCROLL_HEIGHT));
+ conf.node = bd;
+ item.addClass(CLASS_SLIDING);
+ fn = function() {
+ item.removeClass(CLASS_SLIDING);
+ item.addClass(CLASS_ACTIVE);
+ // broadcasting the corresponding event (close)...
+ // $B.fire ('accordionOpenItem', item);
+ };
+ if (!this.get(ATTR_ANIM)) {
+ // animation manually
+ // getting the desired dimension from the current item
+ fs = bd.get(o);
+ // override the desired dimension from the mirror if exists
+ if (Y.Lang.isObject(mirror)) {
+ fs = mirror.get(o);
+ mirror.addClass(CLASS_SLIDING);
+ }
+ for (i=1;i<=fs;i++){
+ if (Y.Lang.isObject(mirror)) {
+ mirror.setStyle (o, (fs-i)+PX);
+ }
+ bd.setStyle (o, i+PX);
+ }
+ if (Y.Lang.isObject(mirror)) {
+ mirror.removeClass(CLASS_SLIDING);
+ mirror.removeClass(CLASS_ACTIVE);
+ }
+ fn();
+ } else {
+ // scrolling effect
+ conf.to.scroll = [0,0];
+ // appliying fadeIn
+ if (this.get(ATTR_FADE)) {
+ conf.to.opacity = 1;
+ }
+ if (Y.Lang.isObject(mirror)) {
+ this._closeItem(mirror);
+ }
+ this._animate(id, conf, fn);
+ }
+ }
+ },
+
+ /**
+ * @method _closeItem
+ * @description Closes the specified item.
+ * @protected
+ * @param {Node} item Node instance representing an item.
+ */
+ _closeItem: function (item) {
+
+ var bd,
+ id,
+ fn,
+ fs,
+ i,
+ list = this.get(ATTR_ITEMS),
+ o = this.get (ATTR_ORIENTATION),
+ conf = {
+ duration: this.get(ATTR_SPEED),
+ to: {
+ scroll: []
+ }
+ };
+ if (item && list.size() && (bd = item.one(SELECTOR_ACCORDION_ITEM_BD)) && (id = Y.stamp(bd))) {
+ // closing the item, based on the orientation, timer and anim attributes...
+ conf.to[o] = (((o==HEIGHT) && UA.ie && (UA.ie<7))?1:0); // hack for vertical accordion issue on Safari and Opera
+ conf.node = bd;
+ item.addClass(CLASS_SLIDING);
+ fn = function() {
+ item.removeClass(CLASS_SLIDING);
+ item.removeClass(CLASS_ACTIVE);
+ // broadcasting the corresponding event (close)...
+ // $B.fire ('accordionCloseItem', item);
+ };
+ if (!this.get(ATTR_ANIM)) {
+ // animation manually
+ fs = bd.get(o);
+ for (i=fs;i>=conf.to[o].to;i--){
+ bd.setStyle (o, i+PX);
+ }
+ fn();
+ } else {
+ // scrolling effect
+ conf.to.scroll = (o==WIDTH?[bd.get(SCROLL_WIDTH),0]:[0,bd.get(SCROLL_HEIGHT)]);
+ // appliying fadeIn
+ if (this.get(ATTR_FADE)) {
+ conf.to.opacity = 0;
+ }
+ this._animate(id, conf, fn);
+ }
+ }
+
+ },
+
+ // Generic DOM Event handlers
+ /**
+ * @method expandAllItems
+ * @description Expanding all items.
+ * @public
+ * @return {object} Plugin reference for chaining
+ */
+ expandAllItems: function () {
+ if (this.get(ATTR_MULTIPLE)) {
+ this.get(ATTR_ITEMS).each(function (node) {
+ this.expandItem(node);
+ }, this);
+ }
+ return this;
+ },
+
+ /**
+ * @method collapseAllItems
+ * @description Collapsing all items.
+ * @public
+ * @return {object} Plugin reference for chaining
+ */
+ collapseAllItems: function () {
+ if (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT)) {
+ this.get(ATTR_ITEMS).each(function (node) {
+ this.collapseItem(node);
+ }, this);
+ }
+ return this;
+ },
+
+ /**
+ * @method expandItem
+ * @description Expand a certain item.
+ * @public
+ * @param {Node} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ expandItem: function ( node ) {
+ var item = this._getItem(node);
+ if (item) {
+ this._openItem (item);
+ }
+ return this;
+ },
+
+ /**
+ * @method collapseItem
+ * @description Collapse a certain item.
+ * @public
+ * @param {Node} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ collapseItem: function ( node ) {
+ var item = this._getItem(node);
+ if (item && item.hasClass(CLASS_ACTIVE) && (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT))) {
+ this._closeItem(item);
+ }
+ return this;
+ },
+
+ /**
+ * @method toggleItem
+ * @description toggle a certain item.
+ * @public
+ * @param {object} node Node reference
+ * @return {object} Plugin reference for chaining
+ */
+ toggleItem: function ( node ) {
+ var item = this._getItem(node);
+ if (item) {
+ // if the item is already opened, and is multiple and not persistent
+ ((item.hasClass(CLASS_ACTIVE) && (this.get(ATTR_MULTIPLE) || !this.get(ATTR_PERSISTENT)))?this._closeItem (item):this._openItem (item));
+ }
+ return this;
+ }
+
+});
+
+Y.namespace('Plugin');
+
+Y.Plugin.NodeAccordion = NodeAccordion;
+
+
+}, '@VERSION@' ,{requires:['node-base', 'node-style', 'plugin', 'node-event-delegate', 'classnamemanager'], optional:['anim']});
View
92 sandbox/caridy/node-accordion/.tmp_accordion-with-skin.html.45660~
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ }
+ .yui-accordion .yui-accordion-item {
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-debug.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-debug.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css" />
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active first-of-type">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 1</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 2</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 3</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 3 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "http://yui.yahooapis.com/3.0.0/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'gallery-node-accordion', function (Y) {
+
+ Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: Y.Easing.backIn
+ });
+
+ });
+ </script>
+</body>
+</html>
View
92 sandbox/caridy/node-accordion/.tmp_accordion-with-skin.html.57384~
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="../../../../yui3/build/cssfonts/fonts-min.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ }
+ .yui-accordion .yui-accordion-item {
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="../../../../yui3/build/yui/yui-debug.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-debug.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css" />
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active first-of-type">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 1</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 2</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 3</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 3 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "../../../../yui3/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'gallery-node-accordion', function (Y) {
+
+ Y.get("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: Y.Easing.backIn
+ });
+
+ });
+ </script>
+</body>
+</html>
View
111 sandbox/caridy/node-accordion/.tmp_custom-style.html.98284~
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" />
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-debug.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-debug.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/gallery-node-accordion-core.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ overflow:hidden;
+ }
+ .yui-accordion {
+ }
+ .yui-accordion .yui-accordion-item {
+ border: 1px solid #004c6d;
+ color: #004c6d;
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ background: #406ed9;
+ color: #fff;
+ border-bottom:1px solid #004c6d;
+ margin: 0px;
+ padding: 5px;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ background: #abceff;
+ color:#333333;
+ background: #ABCEFF;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion yui-accordion-hidden">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 1</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 2</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "http://yui.yahooapis.com/3.0.0/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'event', 'node', 'gallery-node-accordion', function (Y) {
+
+ Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: true,
+ speed: 'slow',
+ fade: true,
+ multiple: false,
+ persistent: true
+ });
+
+ });
+ </script>
+</body>
+</html>
View
111 sandbox/caridy/node-accordion/.tmp_custom-style.html.98581~
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="../../../../yui3/build/cssfonts/fonts-min.css" />
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="../../../../yui3/build/yui/yui-debug.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-debug.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/gallery-node-accordion-core.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ overflow:hidden;
+ }
+ .yui-accordion {
+ }
+ .yui-accordion .yui-accordion-item {
+ border: 1px solid #004c6d;
+ color: #004c6d;
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ background: #406ed9;
+ color: #fff;
+ border-bottom:1px solid #004c6d;
+ margin: 0px;
+ padding: 5px;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ background: #abceff;
+ color:#333333;
+ background: #ABCEFF;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion yui-accordion-hidden">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 1</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 2</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "../../../../yui3/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'event', 'node', 'gallery-node-accordion', function (Y) {
+
+ Y.get("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: true,
+ speed: 'slow',
+ fade: true,
+ multiple: false,
+ persistent: true
+ });
+
+ });
+ </script>
+</body>
+</html>
View
28 sandbox/caridy/node-accordion/LICENSE
@@ -0,0 +1,28 @@
+Software License Agreement (BSD License)
+
+Copyright (c) 2009, Caridy Patino <caridy@gmail.com>.
+All rights reserved.
+
+Redistribution and use of this software in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above
+ copyright notice, this list of conditions and the
+ following disclaimer.
+
+* Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the
+ following disclaimer in the documentation and/or other
+ materials provided with the distribution.
+
+* The name of Caridy Patino may not be used to endorse or promote products
+ derived from this software without specific prior written permission of Caridy Patino.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
View
92 sandbox/caridy/node-accordion/accordion-with-skin.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ }
+ .yui-accordion .yui-accordion-item {
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-min.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css" />
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active first-of-type">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 1</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 2</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+
+ <div class="yui-hd yui-accordion-item-hd">
+ <a href="#" class="yui-accordion-item-trigger">item 3</a>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 3 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "http://yui.yahooapis.com/3.0.0/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'gallery-node-accordion', function (Y) {
+
+ Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: Y.Easing.backIn
+ });
+
+ });
+ </script>
+</body>
+</html>
View
111 sandbox/caridy/node-accordion/custom-style.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Plugin: gallery-node-accordion </title>
+ <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" />
+ <!-- YUI3 Core //-->
+ <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
+ <script type="text/javascript" src="../../../build/gallery-node-accordion/gallery-node-accordion-min.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../build/gallery-node-accordion/assets/gallery-node-accordion-core.css" />
+ <style>
+ /* module examples */
+ div#demo {
+ position:relative;
+ width:22em;
+ overflow:hidden;
+ }
+ .yui-accordion {
+ }
+ .yui-accordion .yui-accordion-item {
+ border: 1px solid #004c6d;
+ color: #004c6d;
+ text-align: left;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ background: #406ed9;
+ color: #fff;
+ border-bottom:1px solid #004c6d;
+ margin: 0px;
+ padding: 5px;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ background: #abceff;
+ color:#333333;
+ background: #ABCEFF;
+ }
+ .yui-accordion .yui-accordion-item .yui-accordion-item-bd p {
+ padding: 5px;
+ }
+ </style>
+</head>
+<body class="yui-skin-sam">
+ <div id="doc">
+
+ <div id="demo">
+ <div class="hd"><h3 class="title">H3 - Title</h3></div>
+ <div class="bd">
+
+ <div id="myaccordion" class="yui-accordion yui-accordion-hidden">
+
+ <div class="yui-module yui-accordion-item yui-accordion-item-active">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 1</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ <p>
+ item 1 content here...
+ </p>
+ </div>
+
+ </div>
+ <div class="yui-module yui-accordion-item">
+ <div class="yui-hd yui-accordion-item-hd">
+ <h3 class="yui-accordion-item-trigger">item 2</h3>
+ </div>
+ <div class="yui-bd yui-accordion-item-bd">
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ <p>
+ item 2 content here...
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ </div>
+ </div>
+
+ </div>
+ <!-- Initialization process //-->
+ <script type="text/javascript">
+ YUI({
+ base: "http://yui.yahooapis.com/3.0.0/build/",
+ filter: 'debug',
+ combine: false
+ }).use('anim', 'event', 'node', 'gallery-node-accordion', function (Y) {
+
+ Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ anim: true,
+ speed: 'slow',
+ fade: true,
+ multiple: false,
+ persistent: true
+ });
+
+ });
+ </script>
+</body>
+</html>
View
32 src/gallery-node-accordion/assets/gallery-node-accordion-core.css
@@ -0,0 +1,32 @@
+.yui-accordion {
+ position: relative;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item {
+ display: block;
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ height: 0;
+ _height: 1px;
+ *height: 1px;
+ overflow: hidden;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item-active .yui-accordion-item-bd {
+ height: auto;
+}
+.yui-accordion-hidden {
+ /* absolute position off-screen and box collapsing used to
+ avoid display:none, which causes issues for some content (firefox
+ restarts flash movies) */
+ border:0;
+ height:0;
+ width:0;
+ padding:0;
+ position:absolute;
+ left:-999999px;
+ overflow:hidden;
+ visibility:hidden;
+}
View
43 src/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
@@ -0,0 +1,43 @@
+.yui-skin-sam .yui-accordion {
+ font-size: 93%; /* 12px */
+ line-height: 1.5; /* 18px */
+ *line-height: 1.45; /* For IE */
+ border-top: solid 1px #808080;
+ border-left: solid 1px #808080;
+ border-right: solid 1px #808080;
+ background: #fff;
+ padding: 0;
+ text-align: left;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item {
+ display: block;
+ border-bottom: solid 1px #808080;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ line-height: 2; /* ~24px */
+ *line-height: 1.9; /* For IE */
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;
+ padding: 0;
+ padding: 5px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+.yui-skin-sam .yui-accordion .first-of-type {
+
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ width: auto;
+ display: block;
+ color: #000;
+ text-decoration: none;
+ cursor: default;
+ padding: 0 5px 0 10px;
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -345px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-active .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -395px;
+}
View
6 src/gallery-node-accordion/build.properties
@@ -0,0 +1,6 @@
+# Gallery Node Accordion Build Properties
+builddir=../../../builder/componentbuild
+component=gallery-node-accordion
+component.jsfiles=gallery-node-accordion.js
+component.requires=node-base, node-style, plugin, node-event-delegate, classnamemanager
+component.optional=anim
View
7 src/gallery-node-accordion/build.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Gallery Node Accordion" default="local">
+ <description>Gallery Node Accordion Build File</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
View
592 src/gallery-node-accordion/js/gallery-node-accordion.js
@@ -0,0 +1,592 @@
+/**
+* <p>The Accordion Node Plugin makes it easy to transform existing
+* markup into an accordion element with expandable and collapsable elements,
+* elements are easy to customize, and only require a small set of dependencies.</p>
+*
+*
+* <p>To use the Accordion Node Plugin, simply pass a reference to the plugin to a
+* Node instance's <code>plug</code> method.</p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion); <br>
+* <br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* <p>The Accordion Node Plugin has several configuration properties that can be
+* set via an object literal that is passed as a second argument to a Node
+* instance's <code>plug</code> method.
+* </p>
+*
+* <p>
+* <code>
+* &#60;script type="text/javascript"&#62; <br>
+* <br>
+* // Call the "use" method, passing in "gallery-node-accordion". This will <br>
+* // load the script and CSS for the Accordion Node Plugin and all of <br>
+* // the required dependencies. <br>
+* <br>
+* YUI().use("gallery-node-accordion", function(Y) { <br>
+* <br>
+* // Use the "contentready" event to initialize the accordion when <br>
+* // the element that represente the accordion <br>
+* // (&#60;div id="accordion-1"&#62;) is ready to be scripted. <br>
+* <br>
+* Y.on("contentready", function () { <br>
+* <br>
+* // The scope of the callback will be a Node instance <br>
+* // representing the accordion (&#60;div id="accordion-1"&#62;). <br>
+* // Therefore, since "this" represents a Node instance, it <br>
+* // is possible to just call "this.plug" passing in a <br>
+* // reference to the Accordion Node Plugin. <br>
+* <br>
+* this.plug(Y.Plugin.NodeAccordion, { anim: true, effect: Y.Easing.backIn });
+* <br><br>
+* }, "#accordion-1"); <br>
+* <br>
+* }); <br>
+* <br>
+* &#60;/script&#62; <br>
+* </code>
+* </p>
+*
+* @module gallery-node-accordion
+*/
+
+
+// Util shortcuts
+
+var UA = Y.UA,
+ getClassName = Y.ClassNameManager.getClassName,
+ anims = {},
+ wheels = {fast:0.1,slow:0.6,normal:0.4},
+
+ // Frequently used strings
+ ACCORDION = "accordion",
+ ACCORDIONITEM = "item",
+ SCROLL_HEIGHT = "scrollHeight",
+ SCROLL_WIDTH = "scrollWidth",
+ WIDTH = "width",
+ HEIGHT = "height",
+ PX = "px",
+ PERIOD = ".",
+ HOST = "host",
+
+ // Attribute keys
+ ATTR_ORIENTATION = 'orientation',
+ ATTR_FADE = 'fade',
+ ATTR_MULTIPLE = 'multiple',
+ ATTR_PERSISTENT = 'persistent',
+ ATTR_SPEED = 'speed',
+ ATTR_ANIM = 'anim',
+ ATTR_ITEMS = 'items',
+
+ // CSS class names
+ CLASS_ACCORDION = getClassName(ACCORDION),
+ CLASS_ACCORDION_HIDDEN = getClassName(ACCORDION, 'hidden'),
+ CLASS_ACCORDION_ITEM = getClassName(ACCORDION, ACCORDIONITEM),
+ CLASS_ACTIVE = getClassName(ACCORDION, ACCORDIONITEM, "active"),
+ CLASS_SLIDING = getClassName(ACCORDION, ACCORDIONITEM, "sliding"),
+ CLASS_ACCORDION_ITEM_HD = getClassName(ACCORDION, ACCORDIONITEM, "hd"),
+ CLASS_ACCORDION_ITEM_BD = getClassName(ACCORDION, ACCORDIONITEM, "bd"),
+ CLASS_ACCORDION_ITEM_FT = getClassName(ACCORDION, ACCORDIONITEM, "ft"),
+ CLASS_ACCORDION_ITEM_TRIGGER = getClassName(ACCORDION, ACCORDIONITEM, "trigger"),
+
+ // CSS selectors
+ SELECTOR_ACCORDION_ITEM = PERIOD + CLASS_ACCORDION_ITEM,
+ SELECTOR_ACCORDION_ITEM_BD = PERIOD + CLASS_ACCORDION_ITEM_BD,
+ // few more just in case...
+ //SELECTOR_ACCORDION = PERIOD + CLASS_ACCORDION,
+ //SELECTOR_ACCORDION_ITEM_TRIGGER = PERIOD + CLASS_ACCORDION_ITEM_TRIGGER,
+
+ FC = '>.',
+ ITEM_QUERY = FC + CLASS_ACCORDION_ITEM,
+ ITEM_TRIGGER_QUERY = FC + CLASS_ACCORDION_ITEM + PERIOD + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_HD + FC + CLASS_ACCORDION_ITEM_TRIGGER + ',' +
+ FC + CLASS_ACCORDION_ITEM + FC + CLASS_ACCORDION_ITEM_FT + FC + CLASS_ACCORDION_ITEM_TRIGGER,
+ // few more just in case...
+ //ITEM_HD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_HD,
+ //ITEM_BD_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_BD,
+ //ITEM_FT_QUERY = FC+CLASS_ACCORDION_ITEM+FC+CLASS_ACCORDION_ITEM_FT,
+
+ // Utility functions
+ /**
+ * The NodeAccordion class is a plugin for a Node instance. The class is used via
+ * the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
+ * should not be instantiated directly.
+ * @namespace plugin
+ * @class NodeAccordion
+ */
+ NodeAccordion = function () {
+
+ NodeAccordion.superclass.constructor.apply(this, arguments);
+
+ };
+
+NodeAccordion.NAME = "NodeAccordion";
+NodeAccordion.NS = ACCORDION;
+
+NodeAccordion.ATTRS = {
+ /**
+ * Nodes representing the list of active items.
+ *
+ * @attribute activeItems
+ * @type Y.NodeList
+ */
+ activeItems: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(FC+CLASS_ACTIVE);
+ }
+ },
+ /**
+ * Nodes representing the list of items.
+ *
+ * @attribute items
+ * @type Y.NodeList
+ */
+ items: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(ITEM_QUERY);
+ }
+ },
+
+ /**
+ * orientation defines if the accordion will use width or height to expand and collapse items.
+ *
+ * @attribute orientation
+ * @writeOnce
+ * @default height
+ * @type string
+ */
+ orientation: {
+ value: HEIGHT,
+ writeOnce: true
+ },
+ /**
+ * Boolean indicating that animation should include opacity to fade in/out the content of the item.
+ *
+ * @attribute fade
+ * @default false
+ * @type boolean
+ */
+ fade: {
+ value: false
+ },
+ /**
+ * Boolean indicating that Y.Anim should be used to expand and collapse items.
+ * It also supports a function with an specific effect.
+ * <p>
+ * <code>
+ * &#60;script type="text/javascript"&#62; <br>
+ * <br>
+ * // Call the "use" method, passing in "anim" and "gallery-node-accordion". <br>
+ * <br>
+ * YUI().use("anim", "gallery-node-accordion", function(Y) { <br>
+ * <br>
+ * Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {<br>
+ * anim: Y.Easing.backIn<br>
+ * }); <br>
+ * <br>
+ * &#60;/script&#62; <br>
+ * </code>
+ * </p>
+ *
+ * @attribute anim
+ * @default false
+ * @type {boolean|function}
+ */
+ anim: {
+ value: false,
+ validator : function (v) {
+ return !Y.Lang.isUndefined(Y.Anim);
+ }
+ },
+ /**
+ * Boolean indicating that more than one item can be opened at the same time.
+ *
+ * @attribute multiple
+ * @default true
+ * @type boolean
+ */
+ multiple: {
+ value: true
+ },
+ /**
+ * Boolean indicating that one of the items should be open at any given time.
+ *
+ * @attribute persistent
+ * @default false
+ * @type boolean
+ */
+ persistent: {
+ value: false
+ },
+ /**
+ * Numeric value indicating the speed in mili-seconds for the animation process.
+ * Also support three predefined strings in lowercase:
+ * <ol>
+ * <li>fast = 0.1</li>
+ * <li>normal = 0.4</li>
+ * <li>slow = 0.6</li>
+ * </ol>
+ *
+ * @attribute speed
+ * @readOnly
+ * @default 0.4
+ * @type numeric
+ */
+ speed: {
+ value: 0.4,
+ validator : function (v) {
+ return (Y.Lang.isNumber(v) || (Y.Lang.isString(v) && wheels.hasOwnProperty(v)));
+ },
+ setter : function (v) {
+ return (wheels.hasOwnProperty(v)?wheels[v]:v);
+ }
+ }
+
+};
+
+
+Y.extend(NodeAccordion, Y.Plugin.Base, {
+
+ // Protected properties
+
+ /**
+ * @property _root
+ * @description Node instance representing the root node in the accordion.
+ * @default null
+ * @protected
+ * @type Node
+ */
+ _root: null,
+
+ // Public methods
+
+ initializer: function (config) {
+ var _root = this.get(HOST),
+ aHandlers = [];
+ if (_root) {
+
+ this._root = _root;
+
+ // close all items and open the actived ones
+ this.get(ATTR_ITEMS).each(function(item) {
+ if (item.hasClass(CLASS_ACTIVE)) {
+ this.expandItem(item);
+ } else {
+ this.collapseItem(item);
+ }
+ }, this);
+
+ // Wire up all event handlers
+ aHandlers.push(_root.delegate('click', function(e) {
+ Y.log ('Accordion Trigger: ' + e);
+ this.toggleItem(e.currentTarget); // probably is better to pass the ancestor for the item
+ e.target.blur();
+ e.halt();
+ }, ITEM_TRIGGER_QUERY, this));
+ aHandlers = this._eventHandlers;
+
+ _root.removeClass(CLASS_ACCORDION_HIDDEN);
+ }
+ },
+
+ destructor: function () {
+ var aHandlers = this._eventHandlers;
+ if (aHandlers) {
+ Y.Array.each(aHandlers, function (handle) {
+ handle.