Advertisement
Guest User

Untitled

a guest
Sep 26th, 2017
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var Spry;
  2. if (!Spry) Spry = {};
  3. if (!Spry.Widget) Spry.Widget = {};
  4.  
  5. Spry.Widget.Accordion = function(element, opts)
  6. {
  7.     this.element = this.getElement(element);
  8.     this.defaultPanel = 0;
  9.     this.hoverClass = "AccordionPanelTabHover";
  10.     this.openClass = "AccordionPanelOpen";
  11.     this.closedClass = "AccordionPanelClosed";
  12.     this.focusedClass = "AccordionFocused";
  13.     this.enableAnimation = true;
  14.     this.enableKeyboardNavigation = true;
  15.     this.currentPanel = null;
  16.     this.animator = null;
  17.     this.hasFocus = null;
  18.     this.duration = 500;
  19.  
  20.     this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
  21.     this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
  22.  
  23.     this.useFixedPanelHeights = true;
  24.     this.fixedPanelHeight = 0;
  25.  
  26.     Spry.Widget.Accordion.setOptions(this, opts, true);
  27.     if (Spry.Widget.Accordion.onloadDidFire)
  28.         this.attachBehaviors();
  29.     else
  30.         Spry.Widget.Accordion.loadQueue.push(this);
  31. };
  32.  
  33. Spry.Widget.Accordion.onloadDidFire = false;
  34. Spry.Widget.Accordion.loadQueue = [];
  35.  
  36. Spry.Widget.Accordion.addLoadListener = function(handler)
  37. {
  38.     if (typeof window.addEventListener != 'undefined')
  39.         window.addEventListener('load', handler, false);
  40.     else if (typeof document.addEventListener != 'undefined')
  41.         document.addEventListener('load', handler, false);
  42.     else if (typeof window.attachEvent != 'undefined')
  43.         window.attachEvent('onload', handler);
  44. };
  45.  
  46. Spry.Widget.Accordion.processLoadQueue = function(handler)
  47. {
  48.     Spry.Widget.Accordion.onloadDidFire = true;
  49.     var q = Spry.Widget.Accordion.loadQueue;
  50.     var qlen = q.length;
  51.     for (var i = 0; i < qlen; i++)
  52.         q[i].attachBehaviors();
  53. };
  54.  
  55. Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
  56.  
  57. Spry.Widget.Accordion.prototype.getElement = function(ele)
  58. {
  59.     if (ele && typeof ele == "string")
  60.         return document.getElementById(ele);
  61.     return ele;
  62. };
  63.  
  64. Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
  65. {
  66.     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
  67.         return;
  68.     ele.className += (ele.className ? " " : "") + className;
  69. };
  70.  
  71. Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
  72. {
  73.     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
  74.         return;
  75.     ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
  76. };
  77.  
  78. Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
  79. {
  80.     if (!optionsObj)
  81.         return;
  82.     for (var optionName in optionsObj)
  83.     {
  84.         if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
  85.             continue;
  86.         obj[optionName] = optionsObj[optionName];
  87.     }
  88. };
  89.  
  90. Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
  91. {
  92.     if (panel)
  93.         this.addClassName(this.getPanelTab(panel), this.hoverClass);
  94. };
  95.  
  96. Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
  97. {
  98.     if (panel)
  99.         this.removeClassName(this.getPanelTab(panel), this.hoverClass);
  100. };
  101.  
  102. Spry.Widget.Accordion.prototype.openPanel = function(panel)
  103. {
  104.     var panelA = this.currentPanel;
  105.     var panelB = panel;
  106.    
  107.     if (!panelB || panelA == panelB)   
  108.         return;
  109.  
  110.     var contentA;
  111.     if( panelA )
  112.         contentA = this.getPanelContent(panelA);
  113.     var contentB = this.getPanelContent(panelB);
  114.  
  115.     if (! contentB)
  116.         return;
  117.  
  118.     if (this.useFixedPanelHeights && !this.fixedPanelHeight)
  119.     {
  120.         this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
  121.     }
  122.  
  123.     if (this.enableAnimation)
  124.     {
  125.         if (this.animator)
  126.             this.animator.stop();
  127.         this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
  128.         this.animator.start();
  129.     }
  130.     else
  131.     {
  132.         if(contentA)
  133.             contentA.style.height = "0px";
  134.         contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
  135.     }
  136.  
  137.     if(panelA)
  138.     {
  139.         this.removeClassName(panelA, this.openClass);
  140.         this.addClassName(panelA, this.closedClass);
  141.     }
  142.  
  143.     this.removeClassName(panelB, this.closedClass);
  144.     this.addClassName(panelB, this.openClass);
  145.  
  146.     this.currentPanel = panelB;
  147. };
  148.  
  149. Spry.Widget.Accordion.prototype.openNextPanel = function()
  150. {
  151.     var panels = this.getPanels();
  152.     var curPanelIndex = this.getCurrentPanelIndex();
  153.    
  154.     if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
  155.         this.openPanel(panels[curPanelIndex+1]);
  156. };
  157.  
  158. Spry.Widget.Accordion.prototype.openPreviousPanel = function()
  159. {
  160.     var panels = this.getPanels();
  161.     var curPanelIndex = this.getCurrentPanelIndex();
  162.    
  163.     if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
  164.         this.openPanel(panels[curPanelIndex-1]);
  165. };
  166.  
  167. Spry.Widget.Accordion.prototype.openFirstPanel = function()
  168. {
  169.     var panels = this.getPanels();
  170.     if( panels )
  171.         this.openPanel(panels[0]);
  172. };
  173.  
  174. Spry.Widget.Accordion.prototype.openLastPanel = function()
  175. {
  176.     var panels = this.getPanels();
  177.     if( panels )
  178.         this.openPanel(panels[panels.length-1]);
  179. };
  180.  
  181. Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
  182. {
  183.     if (panel != this.currentPanel)
  184.         this.openPanel(panel);
  185.     this.focus();
  186. };
  187.  
  188. Spry.Widget.Accordion.prototype.onFocus = function(e)
  189. {
  190.     this.hasFocus = true;
  191.     this.addClassName(this.element, this.focusedClass);
  192. };
  193.  
  194. Spry.Widget.Accordion.prototype.onBlur = function(e)
  195. {
  196.     this.hasFocus = false;
  197.     this.removeClassName(this.element, this.focusedClass);
  198. };
  199.  
  200. Spry.Widget.Accordion.KEY_UP = 38;
  201. Spry.Widget.Accordion.KEY_DOWN = 40;
  202.  
  203. Spry.Widget.Accordion.prototype.onKeyDown = function(e)
  204. {
  205.     var key = e.keyCode;
  206.     if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
  207.         return true;
  208.    
  209.     var panels = this.getPanels();
  210.     if (!panels || panels.length < 1)
  211.         return false;
  212.     var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
  213.     var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
  214.    
  215.     while (nextPanel)
  216.     {
  217.         if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
  218.             break;
  219.         nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
  220.     }
  221.    
  222.     if (nextPanel && currentPanel != nextPanel)
  223.         this.openPanel(nextPanel);
  224.  
  225.     if (e.stopPropagation)
  226.         e.stopPropagation();
  227.     if (e.preventDefault)
  228.         e.preventDefault();
  229.  
  230.     return false;
  231. };
  232.  
  233. Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
  234. {
  235.     if (!panel)
  236.         return;
  237.  
  238.     var tab = this.getPanelTab(panel);
  239.  
  240.     if (tab)
  241.     {
  242.         var self = this;
  243.         Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
  244.         Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
  245.         Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
  246.     }
  247. };
  248.  
  249. Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
  250. {
  251.     try
  252.     {
  253.         if (element.addEventListener)
  254.             element.addEventListener(eventType, handler, capture);
  255.         else if (element.attachEvent)
  256.             element.attachEvent("on" + eventType, handler);
  257.     }
  258.     catch (e) {}
  259. };
  260.  
  261. Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
  262. {
  263.     var content = this.getPanelContent(panel);
  264.     if (isDefault)
  265.     {
  266.         this.currentPanel = panel;
  267.         this.removeClassName(panel, this.closedClass);
  268.         this.addClassName(panel, this.openClass);
  269.     }
  270.     else
  271.     {
  272.         this.removeClassName(panel, this.openClass);
  273.         this.addClassName(panel, this.closedClass);
  274.         content.style.height = "0px";
  275.     }
  276.    
  277.     this.attachPanelHandlers(panel);
  278. };
  279.  
  280. Spry.Widget.Accordion.prototype.attachBehaviors = function()
  281. {
  282.     var panels = this.getPanels();
  283.     for (var i = 0; i < panels.length; i++)
  284.     {
  285.         this.initPanel(panels[i], i == this.defaultPanel);
  286.     }
  287.  
  288.     if (this.enableKeyboardNavigation)
  289.     {
  290.         var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
  291.         if (tabIndexAttr)
  292.         {
  293.             var self = this;
  294.             Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
  295.             Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
  296.             Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
  297.         }
  298.     }
  299. };
  300.  
  301. Spry.Widget.Accordion.prototype.getPanels = function()
  302. {
  303.     return this.getElementChildren(this.element);
  304. };
  305.  
  306. Spry.Widget.Accordion.prototype.getCurrentPanel = function()
  307. {
  308.     return this.currentPanel;
  309. };
  310.  
  311. Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
  312. {
  313.     var panels = this.getPanels();
  314.     for( var i = 0 ; i < panels.length; i++ )
  315.     {
  316.         if( this.currentPanel == panels[i] )
  317.             return i;
  318.     }
  319.     return 0;
  320. };
  321.  
  322. Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
  323. {
  324.     if (!panel)
  325.         return null;
  326.     return this.getElementChildren(panel)[0];
  327. };
  328.  
  329. Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
  330. {
  331.     if (!panel)
  332.         return null;
  333.     return this.getElementChildren(panel)[1];
  334. };
  335.  
  336. Spry.Widget.Accordion.prototype.getElementChildren = function(element)
  337. {
  338.     var children = [];
  339.     var child = element.firstChild;
  340.     while (child)
  341.     {
  342.         if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
  343.             children.push(child);
  344.         child = child.nextSibling;
  345.     }
  346.     return children;
  347. };
  348.  
  349. Spry.Widget.Accordion.prototype.focus = function()
  350. {
  351.     if (this.element && this.element.focus)
  352.         this.element.focus();
  353. };
  354.  
  355. /////////////////////////////////////////////////////
  356.  
  357. Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
  358. {
  359.     this.timer = null;
  360.     this.interval = 0;
  361.     this.stepCount = 0;
  362.  
  363.     this.fps = 0;
  364.     this.steps = 10;
  365.     this.duration = 500;
  366.     this.onComplete = null;
  367.  
  368.     this.panel = panel;
  369.     this.panelToOpen = accordion.getElement(panel);
  370.     this.panelData = [];
  371.  
  372.     Spry.Widget.Accordion.setOptions(this, opts, true);
  373.     if (this.fps > 0)
  374.     {
  375.         this.interval = Math.floor(1000 / this.fps);
  376.         this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
  377.     }
  378.     else if (this.steps > 0)
  379.         this.interval = this.duration / this.steps;
  380.     var panels = accordion.getPanels();
  381.     for (var i = 0; i < panels.length; i++)
  382.     {
  383.         var p = panels[i];
  384.         var c = accordion.getPanelContent(p);
  385.         if (c)
  386.         {
  387.             var h = c.offsetHeight;
  388.             if (h == undefined)
  389.                 h = 0;
  390.             if (p == panel || h > 0)
  391.             {
  392.                 var obj = new Object;
  393.                 obj.panel = p;
  394.                 obj.content = c;
  395.                 obj.fromHeight = h;
  396.                 obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
  397.                 obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
  398.                 obj.overflow = c.style.overflow;
  399.                 this.panelData.push(obj);
  400.  
  401.                 c.style.overflow = "hidden";
  402.                 c.style.height = h + "px";
  403.             }
  404.         }
  405.     }
  406. };
  407.  
  408. Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
  409. {
  410.     var self = this;
  411.     this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
  412. };
  413.  
  414. Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
  415. {
  416.     if (this.timer)
  417.     {
  418.         clearTimeout(this.timer);
  419.         if (this.stepCount < this.steps)
  420.         {
  421.             for (i = 0; i < this.panelData.length; i++)
  422.             {
  423.                 obj = this.panelData[i];
  424.                 obj.content.style.overflow = obj.overflow;
  425.             }
  426.         }
  427.     }
  428.  
  429.     this.timer = null;
  430. };
  431.  
  432. Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
  433. {
  434.     ++this.stepCount;
  435.  
  436.     this.animate();
  437.  
  438.     if (this.stepCount < this.steps)
  439.         this.start();
  440.     else if (this.onComplete)
  441.         this.onComplete();
  442. };
  443.  
  444. Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
  445. {
  446.     var i, obj;
  447.  
  448.     if (this.stepCount >= this.steps)
  449.     {
  450.         for (i = 0; i < this.panelData.length; i++)
  451.         {
  452.             obj = this.panelData[i];
  453.             if (obj.panel != this.panel)
  454.                 obj.content.style.height = "0px";
  455.             obj.content.style.overflow = obj.overflow;
  456.             obj.content.style.height = obj.toHeight + "px";
  457.         }
  458.     }
  459.     else
  460.     {
  461.         for (i = 0; i < this.panelData.length; i++)
  462.         {
  463.             obj = this.panelData[i];
  464.             obj.fromHeight += obj.increment;
  465.             obj.content.style.height = obj.fromHeight + "px";
  466.         }
  467.     }
  468. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement