Guest User

Untitled

a guest
Feb 6th, 2013
155
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function() { // BeginSpryComponent
  2.  
  3. if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
  4.  
  5. Spry.Widget.CollapsiblePanel = function(element, opts)
  6. {
  7.     this.element = this.getElement(element);
  8.     this.focusElement = null;
  9.     this.hoverClass = "CollapsiblePanelTabHover";
  10.     this.openClass = "CollapsiblePanelOpen";
  11.     this.closedClass = "CollapsiblePanelClosed";
  12.     this.focusedClass = "CollapsiblePanelFocused";
  13.     this.enableAnimation = true;
  14.     this.enableKeyboardNavigation = true;
  15.     this.animator = null;
  16.     this.hasFocus = false;
  17.     this.contentIsOpen = false;
  18.  
  19.     this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
  20.     this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
  21.  
  22.     Spry.Widget.CollapsiblePanel.setOptions(this, opts);
  23.  
  24.     this.attachBehaviors();
  25. };
  26.  
  27. Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
  28. {
  29.     if (ele && typeof ele == "string")
  30.         return document.getElementById(ele);
  31.     return ele;
  32. };
  33.  
  34. Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
  35. {
  36.     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
  37.         return;
  38.     ele.className += (ele.className ? " " : "") + className;
  39. };
  40.  
  41. Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
  42. {
  43.     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
  44.         return;
  45.     ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
  46. };
  47.  
  48. Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
  49. {
  50.     if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
  51.         return false;
  52.     return true;
  53. };
  54.  
  55. Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
  56. {
  57.     if( ele )
  58.         ele.style.display = display;
  59. };
  60.  
  61. Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
  62. {
  63.     if (!optionsObj)
  64.         return;
  65.     for (var optionName in optionsObj)
  66.     {
  67.         if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
  68.             continue;
  69.         obj[optionName] = optionsObj[optionName];
  70.     }
  71. };
  72.  
  73. Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e)
  74. {
  75.     this.addClassName(this.getTab(), this.hoverClass);
  76.     return false;
  77. };
  78.  
  79. Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
  80. {
  81.     this.removeClassName(this.getTab(), this.hoverClass);
  82.     return false;
  83. };
  84.  
  85. Spry.Widget.CollapsiblePanel.prototype.open = function()
  86. {
  87.     this.contentIsOpen = true;
  88.     if (this.enableAnimation)
  89.     {
  90.         if (this.animator)
  91.             this.animator.stop();
  92.         this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
  93.         this.animator.start();
  94.     }
  95.     else
  96.         this.setDisplay(this.getContent(), "block");
  97.  
  98.     this.removeClassName(this.element, this.closedClass);
  99.     this.addClassName(this.element, this.openClass);
  100. };
  101.  
  102. Spry.Widget.CollapsiblePanel.prototype.close = function()
  103. {
  104.     this.contentIsOpen = false;
  105.     if (this.enableAnimation)
  106.     {
  107.         if (this.animator)
  108.             this.animator.stop();
  109.         this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
  110.         this.animator.start();
  111.     }
  112.     else
  113.         this.setDisplay(this.getContent(), "none");
  114.  
  115.     this.removeClassName(this.element, this.openClass);
  116.     this.addClassName(this.element, this.closedClass);
  117. };
  118.  
  119. Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
  120. {
  121.     if (this.isOpen())
  122.         this.close();
  123.     else
  124.     {
  125.         this.open();
  126.     }
  127.        
  128.  
  129.     this.focus();
  130.  
  131.     return this.stopPropagation(e);
  132. };
  133.  
  134. Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
  135. {
  136.     this.hasFocus = true;
  137.     this.addClassName(this.element, this.focusedClass);
  138.     return false;
  139. };
  140.  
  141. Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
  142. {
  143.     this.hasFocus = false;
  144.     this.removeClassName(this.element, this.focusedClass);
  145.     return false;
  146. };
  147.  
  148. Spry.Widget.CollapsiblePanel.KEY_UP = 38;
  149. Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
  150.  
  151. Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
  152. {
  153.     var key = e.keyCode;
  154.     if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
  155.         return true;
  156.  
  157.     if (this.isOpen() && key == this.closePanelKeyCode)
  158.         this.close();
  159.     else if ( key == this.openPanelKeyCode)
  160.         this.open();
  161.    
  162.     return this.stopPropagation(e);
  163. };
  164.  
  165. Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
  166. {
  167.     if (e.preventDefault) e.preventDefault();
  168.     else e.returnValue = false;
  169.     if (e.stopPropagation) e.stopPropagation();
  170.     else e.cancelBubble = true;
  171.     return false;
  172. };
  173.  
  174. Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
  175. {
  176.     var tab = this.getTab();
  177.     if (!tab)
  178.         return;
  179.  
  180.     var self = this;
  181.     Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
  182.     Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
  183.     Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false);
  184.  
  185.     if (this.enableKeyboardNavigation)
  186.     {
  187.         // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
  188.         // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
  189.         // by default.
  190.  
  191.         // Find the first element within the tab container that has a tabindex or the first
  192.         // anchor tag.
  193.        
  194.         var tabIndexEle = null;
  195.         var tabAnchorEle = null;
  196.  
  197.         this.preorderTraversal(tab, function(node) {
  198.             if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
  199.             {
  200.                 var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
  201.                 if (tabIndexAttr)
  202.                 {
  203.                     tabIndexEle = node;
  204.                     return true;
  205.                 }
  206.                 if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
  207.                     tabAnchorEle = node;
  208.             }
  209.             return false;
  210.         });
  211.  
  212.         if (tabIndexEle)
  213.             this.focusElement = tabIndexEle;
  214.         else if (tabAnchorEle)
  215.             this.focusElement = tabAnchorEle;
  216.  
  217.         if (this.focusElement)
  218.         {
  219.             Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
  220.             Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
  221.             Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
  222.         }
  223.     }
  224. };
  225.  
  226. Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)
  227. {
  228.     try
  229.     {
  230.         if (element.addEventListener)
  231.             element.addEventListener(eventType, handler, capture);
  232.         else if (element.attachEvent)
  233.             element.attachEvent("on" + eventType, handler);
  234.     }
  235.     catch (e) {}
  236. };
  237.  
  238. Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)
  239. {
  240.     var stopTraversal = false;
  241.     if (root)
  242.     {
  243.         stopTraversal = func(root);
  244.         if (root.hasChildNodes())
  245.         {
  246.             var child = root.firstChild;
  247.             while (!stopTraversal && child)
  248.             {
  249.                 stopTraversal = this.preorderTraversal(child, func);
  250.                 try { child = child.nextSibling; } catch (e) { child = null; }
  251.             }
  252.         }
  253.     }
  254.     return stopTraversal;
  255. };
  256.  
  257. Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
  258. {
  259.     var panel = this.element;
  260.     var tab = this.getTab();
  261.     var content = this.getContent();
  262.  
  263.     if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
  264.     {
  265.         this.addClassName(panel, this.openClass);
  266.         this.removeClassName(panel, this.closedClass);
  267.         this.setDisplay(content, "block");
  268.         this.contentIsOpen = true;
  269.     }
  270.     else
  271.     {
  272.         this.removeClassName(panel, this.openClass);
  273.         this.addClassName(panel, this.closedClass);
  274.         this.setDisplay(content, "none");
  275.         this.contentIsOpen = false;
  276.     }
  277.  
  278.     this.attachPanelHandlers();
  279. };
  280.  
  281. Spry.Widget.CollapsiblePanel.prototype.getTab = function()
  282. {
  283.     return this.getElementChildren(this.element)[0];
  284. };
  285.  
  286. Spry.Widget.CollapsiblePanel.prototype.getContent = function()
  287. {
  288.     return this.getElementChildren(this.element)[1];
  289. };
  290.  
  291. Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
  292. {
  293.     return this.contentIsOpen;
  294. };
  295.  
  296. Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)
  297. {
  298.     var children = [];
  299.     var child = element.firstChild;
  300.     while (child)
  301.     {
  302.         if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
  303.             children.push(child);
  304.         child = child.nextSibling;
  305.     }
  306.     return children;
  307. };
  308.  
  309. Spry.Widget.CollapsiblePanel.prototype.focus = function()
  310. {
  311.     if (this.focusElement && this.focusElement.focus)
  312.         this.focusElement.focus();
  313. };
  314.  
  315. /////////////////////////////////////////////////////
  316.  
  317. Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
  318. {
  319.     this.timer = null;
  320.     this.interval = 0;
  321.  
  322.     this.fps = 60;
  323.     this.duration = 500;
  324.     this.startTime = 0;
  325.  
  326.     this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
  327.  
  328.     this.onComplete = null;
  329.  
  330.     this.panel = panel;
  331.     this.content = panel.getContent();
  332.     this.doOpen = doOpen;
  333.  
  334.     Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
  335.  
  336.     this.interval = Math.floor(1000 / this.fps);
  337.  
  338.     var c = this.content;
  339.  
  340.     var curHeight = c.offsetHeight ? c.offsetHeight : 0;
  341.     this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
  342.  
  343.     if (!doOpen)
  344.         this.toHeight = 0;
  345.     else
  346.     {
  347.         if (c.style.display == "none")
  348.         {
  349.             // The content area is not displayed so in order to calculate the extent
  350.             // of the content inside it, we have to set its display to block.
  351.  
  352.             c.style.visibility = "hidden";
  353.             c.style.display = "block";
  354.         }
  355.  
  356.         // Clear the height property so we can calculate
  357.         // the full height of the content we are going to show.
  358.  
  359.         c.style.height = "";
  360.         this.toHeight = c.offsetHeight;
  361.     }
  362.  
  363.     this.distance = this.toHeight - this.fromHeight;
  364.     this.overflow = c.style.overflow;
  365.  
  366.     c.style.height = this.fromHeight + "px";
  367.     c.style.visibility = "visible";
  368.     c.style.overflow = "hidden";
  369.     c.style.display = "block";
  370. };
  371.  
  372. Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
  373.  
  374. Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
  375. {
  376.     var self = this;
  377.     this.startTime = (new Date).getTime();
  378.     this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
  379. };
  380.  
  381. Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
  382. {
  383.     if (this.timer)
  384.     {
  385.         clearTimeout(this.timer);
  386.  
  387.         // If we're killing the timer, restore the overflow property.
  388.  
  389.         this.content.style.overflow = this.overflow;
  390.     }
  391.  
  392.     this.timer = null;
  393. };
  394.  
  395. Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
  396. {
  397.     var curTime = (new Date).getTime();
  398.     var elapsedTime = curTime - this.startTime;
  399.  
  400.     if (elapsedTime >= this.duration)
  401.     {
  402.         if (!this.doOpen)
  403.             this.content.style.display = "none";
  404.         this.content.style.overflow = this.overflow;
  405.         this.content.style.height = this.toHeight + "px";
  406.         if (this.onComplete)
  407.             this.onComplete();
  408.         return;
  409.     }
  410.  
  411.     var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
  412.  
  413.     this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
  414.  
  415.     var self = this;
  416.     this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
  417. };
  418.  
  419. Spry.Widget.CollapsiblePanelGroup = function(element, opts)
  420. {
  421.     this.element = this.getElement(element);
  422.     this.opts = opts;
  423.  
  424.     this.attachBehaviors();
  425. };
  426.  
  427. Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
  428. Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
  429. Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
  430.  
  431. Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
  432. {
  433.     if (!element || !widget)
  434.         return;
  435.     if (!element.spry)
  436.         element.spry = new Object;
  437.     element.spry.collapsiblePanel = widget;
  438. };
  439.  
  440. Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
  441. {
  442.     return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
  443. };
  444.  
  445. Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
  446. {
  447.     if (!this.element)
  448.         return [];
  449.     return this.getElementChildren(this.element);
  450. };
  451.  
  452. Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
  453. {
  454.     return this.getPanels()[panelIndex];
  455. };
  456.  
  457. Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
  458. {
  459.     if (!this.element)
  460.         return;
  461.  
  462.     var cpanels = this.getPanels();
  463.     var numCPanels = cpanels.length;
  464.     for (var i = 0; i < numCPanels; i++)
  465.     {
  466.         var cpanel = cpanels[i];
  467.         this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
  468.     }
  469. };
  470.  
  471. Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
  472. {
  473.     var w = this.getElementWidget(this.getPanel(panelIndex));
  474.     if (w && w.isOpen())
  475.     {
  476.         w.open();
  477.     }
  478.    
  479. };
  480.  
  481. Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
  482. {
  483.     var w = this.getElementWidget(this.getPanel(panelIndex));
  484.     if (w && w.isOpen())
  485.         w.close();
  486. };
  487.  
  488. Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
  489. {
  490.     var cpanels = this.getPanels();
  491.     var numCPanels = cpanels.length;
  492.     for (var i = 0; i < numCPanels; i++)
  493.     {
  494.         var w = this.getElementWidget(cpanels[i]);
  495.         if (w && !w.isOpen())
  496.             w.open();
  497.     }
  498. };
  499.  
  500.  
  501. Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
  502. {
  503.     var cpanels = this.getPanels();
  504.     var numCPanels = cpanels.length;
  505.     for (var i = 0; i < numCPanels; i++)
  506.     {
  507.         var w = this.getElementWidget(cpanels[i]);
  508.         if (w && w.isOpen())
  509.             w.close();
  510.     }
  511. };
  512.  
  513. })(); // EndSpryComponent
Advertisement
Add Comment
Please, Sign In to add comment