14 Replies Latest reply: Mar 8, 2012 7:22 AM by krizcortes RSS

    Spry SlidingPanels AUTO HEIGHT TWEAK

    krizcortes Community Member

      Hi guys,

       

      Ive been trying for a while to make the sliding panels widget

      show each panel in its own height instead of the longest panel's height in the container.

      I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.

       

      I do, however, have a list of things that i believe if implemented should work,

      could you guys help me do these fixes on the js? ( the one you think will work )

       

      1. edit so that:  Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.

       

      2. edit so that:  PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.

       

      3. edit so that:  Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )

       

      Please, if you can make the change in the js, i would appreciate greatly appreciate it. There is nothing in the entire web in to fixing this.

       


        • 1. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
          krizcortes Community Member

          This is the SprySlidingPanels.js

           

          // SprySlidingPanels.js - version 0.5 - Spry Pre-Release 1.6

          //

          // Copyright (c) 2006. Adobe Systems Incorporated.

          // All rights reserved.

          //

          // Redistribution and use 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.

          //   * Neither the name of Adobe Systems Incorporated nor the names of its

          //     contributors may be used to endorse or promote products derived from this

          //     software without specific prior written permission.

          //

          // 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.

           

          var Spry;

          if (!Spry) Spry = {};

          if (!Spry.Widget) Spry.Widget = {};

           

          Spry.Widget.SlidingPanels = function(element, opts)

          {

              this.element = this.getElement(element);

              this.enableAnimation = true;

              this.currentPanel = null;

              this.enableKeyboardNavigation = true;

              this.hasFocus = false;

              this.previousPanelKeyCode = Spry.Widget.SlidingPanels.KEY_LEFT;

              this.nextPanelKeyCode = Spry.Widget.SlidingPanels.KEY_RIGHT;

           

              this.currentPanelClass = "SlidingPanelsCurrentPanel";

              this.focusedClass = "SlidingPanelsFocused";

              this.animatingClass = "SlidingPanelsAnimating";

           

              Spry.Widget.SlidingPanels.setOptions(this, opts);

           

              if (this.element)

                  this.element.style.overflow = "hidden";

           

              // Developers can specify the default panel as an index,

              // id or an actual element node. Make sure to normalize

              // it into an element node because that is what we expect

              // internally.

           

              if (this.defaultPanel)

              {

                  if (typeof this.defaultPanel == "number")

                      this.currentPanel = this.getContentPanels()[this.defaultPanel];

                  else

                      this.currentPanel = this.getElement(this.defaultPanel);

              }

           

              // If we still don't have a current panel, use the first one!

           

              if (!this.currentPanel)

                  this.currentPanel = this.getContentPanels()[0];

           

              // Since we rely on the positioning information of the

              // panels, we need to wait for the onload event to fire before

              // we can attempt to show the initial panel. Once the onload

              // fires, we know that all CSS files have loaded. This is

              // especially important for Safari.

           

              if (Spry.Widget.SlidingPanels.onloadDidFire)

                  this.attachBehaviors();

              else

                  Spry.Widget.SlidingPanels.loadQueue.push(this);

          };

           

          Spry.Widget.SlidingPanels.prototype.onFocus = function(e)

          {

              this.hasFocus = true;

              this.addClassName(this.element, this.focusedClass);

              return false;

          };

           

          Spry.Widget.SlidingPanels.prototype.onBlur = function(e)

          {

              this.hasFocus = false;

              this.removeClassName(this.element, this.focusedClass);

              return false;

          };

           

          Spry.Widget.SlidingPanels.KEY_LEFT = 37;

          Spry.Widget.SlidingPanels.KEY_UP = 38;

          Spry.Widget.SlidingPanels.KEY_RIGHT = 39;

          Spry.Widget.SlidingPanels.KEY_DOWN = 40;

           

          Spry.Widget.SlidingPanels.prototype.onKeyDown = function(e)

          {

              var key = e.keyCode;

              if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))

                  return true;

           

              if (key == this.nextPanelKeyCode)

                  this.showNextPanel();

              else /* if (key == this.previousPanelKeyCode) */

                  this.showPreviousPanel();

           

              if (e.preventDefault) e.preventDefault();

              else e.returnValue = false;

              if (e.stopPropagation) e.stopPropagation();

              else e.cancelBubble = true;

           

              return false;

          };

           

          Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()

          {

              var ele = this.element;

              if (!ele)

                  return;

           

              if (this.enableKeyboardNavigation)

              {

                  var focusEle = null;

                  var tabIndexAttr = ele.attributes.getNamedItem("tabindex");

                  if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")

                      focusEle = ele;

             

                  if (focusEle)

                  {

                      var self = this;

                      Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);

                      Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);

                      Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);

                  }

              }

           

              if (this.currentPanel)

              {

                  // Temporarily turn off animation when showing the

                  // initial panel.

           

                  var ea = this.enableAnimation;

                  this.enableAnimation = false;

                  this.showPanel(this.currentPanel);

                  this.enableAnimation = ea;

              }

          };

           

          Spry.Widget.SlidingPanels.prototype.getElement = function(ele)

          {

              if (ele && typeof ele == "string")

                  return document.getElementById(ele);

              return ele;

          };

           

          Spry.Widget.SlidingPanels.prototype.addClassName = function(ele, className)

          {

              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))

                  return;

              ele.className += (ele.className ? " " : "") + className;

          };

           

          Spry.Widget.SlidingPanels.prototype.removeClassName = function(ele, className)

          {

              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))

                  return;

              ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");

          };

           

          Spry.Widget.SlidingPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)

          {

              if (!optionsObj)

                  return;

              for (var optionName in optionsObj)

              {

                  if (ignoreUndefinedProps && optionsObj[optionName] == undefined)

                      continue;

                  obj[optionName] = optionsObj[optionName];

              }

          };

           

          Spry.Widget.SlidingPanels.prototype.getElementChildren = function(element)

          {

              var children = [];

              var child = element.firstChild;

              while (child)

              {

                  if (child.nodeType == 1 /* Node.ELEMENT_NODE */)

                      children.push(child);

                  child = child.nextSibling;

              }

              return children;

          };

           

          Spry.Widget.SlidingPanels.prototype.getCurrentPanel = function()

          {

              return this.currentPanel;

          };

           

          Spry.Widget.SlidingPanels.prototype.getContentGroup = function()

          {

              return this.getElementChildren(this.element)[0];

          };

           

          Spry.Widget.SlidingPanels.prototype.getContentPanels = function()

          {

              return this.getElementChildren(this.getContentGroup());

          };

           

          Spry.Widget.SlidingPanels.prototype.getContentPanelsCount = function()

          {

              return this.getContentPanels().length;

          };

           

          Spry.Widget.SlidingPanels.onloadDidFire = false;

          Spry.Widget.SlidingPanels.loadQueue = [];

           

          Spry.Widget.SlidingPanels.addLoadListener = function(handler)

          {

              if (typeof window.addEventListener != 'undefined')

                  window.addEventListener('load', handler, false);

              else if (typeof document.addEventListener != 'undefined')

                  document.addEventListener('load', handler, false);

              else if (typeof window.attachEvent != 'undefined')

                  window.attachEvent('onload', handler);

          };

           

          Spry.Widget.SlidingPanels.processLoadQueue = function(handler)

          {

              Spry.Widget.SlidingPanels.onloadDidFire = true;

              var q = Spry.Widget.SlidingPanels.loadQueue;

              var qlen = q.length;

              for (var i = 0; i < qlen; i++)

                  q[i].attachBehaviors();

          };

           

          Spry.Widget.SlidingPanels.addLoadListener(Spry.Widget.SlidingPanels.processLoadQueue);

           

          Spry.Widget.SlidingPanels.addEventListener = function(element, eventType, handler, capture)

          {

              try

              {

                  if (element.addEventListener)

                      element.addEventListener(eventType, handler, capture);

                  else if (element.attachEvent)

                      element.attachEvent("on" + eventType, handler);

              }

              catch (e) {}

          };

           

          Spry.Widget.SlidingPanels.prototype.getContentPanelIndex = function(ele)

          {

              if (ele)

              {

                  ele = this.getElement(ele);

                  var panels = this.getContentPanels();

                  var numPanels = panels.length;

                  for (var i = 0; i < numPanels; i++)

                  {

                      if (panels[i] == ele)

                          return i;

                  }

              }

              return -1;

          };

           

          Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)

          {

              var pIndex = -1;

             

              if (typeof elementOrIndex == "number")

                  pIndex = elementOrIndex;

              else // Must be the element for the content panel.

                  pIndex = this.getContentPanelIndex(elementOrIndex);

           

              var numPanels = this.getContentPanelsCount();

              if (numPanels > 0)

                  pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;

              else

                  pIndex = 0;

           

              var panel = this.getContentPanels()[pIndex];

              var contentGroup = this.getContentGroup();

           

              if (panel && contentGroup)

              {

                  if (this.currentPanel)

                      this.removeClassName(this.currentPanel, this.currentPanelClass);

                  this.currentPanel = panel;

           

                  var nx = -panel.offsetLeft;

                  var ny = -panel.offsetTop;

           

                  if (this.enableAnimation)

                  {

                      if (this.animator)

                          this.animator.stop();

                      var cx = contentGroup.offsetLeft;

                      var cy = contentGroup.offsetTop;

                      if (cx != nx || cy != ny)

                      {

                          var self = this;

                          this.addClassName(this.element, this.animatingClass);

                          this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()

                          {

                              self.removeClassName(self.element, self.animatingClass);

                              self.addClassName(panel, self.currentPanelClass);

                          } });

                          this.animator.start();

                      }

                  }

                  else

                  {

                      contentGroup.style.left = nx + "px";

                      contentGroup.style.top = ny + "px";

                      this.addClassName(panel, this.currentPanelClass);

                  }

              }

           

              return panel;

          };

           

          Spry.Widget.SlidingPanels.prototype.showFirstPanel = function()

          {

              return this.showPanel(0);

          };

           

          Spry.Widget.SlidingPanels.prototype.showLastPanel = function()

          {

              return this.showPanel(this.getContentPanels().length - 1);

          };

           

          Spry.Widget.SlidingPanels.prototype.showPreviousPanel = function()

          {

              return this.showPanel(this.getContentPanelIndex(this.currentPanel) - 1);

          };

           

          Spry.Widget.SlidingPanels.prototype.showNextPanel = function()

          {

              return this.showPanel(this.getContentPanelIndex(this.currentPanel) + 1);

          };

           

          Spry.Widget.SlidingPanels.PanelAnimator = function(ele, curX, curY, dstX, dstY, opts)

          {

              this.element = ele;

           

              this.curX = curX;

              this.curY = curY;

              this.dstX = dstX;

              this.dstY = dstY;

              this.fps = 60;

              this.duration = 500;

              this.transition = Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;

              this.startTime = 0;

              this.timerID = 0;

              this.finish = null;

           

              var self = this;

              this.intervalFunc = function() { self.step(); };

             

              Spry.Widget.SlidingPanels.setOptions(this, opts, true);

           

              this.interval = 1000/this.fps;

          };

           

          Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

           

          Spry.Widget.SlidingPanels.PanelAnimator.prototype.start = function()

          {

              this.stop();

              this.startTime = (new Date()).getTime();

              this.timerID = setTimeout(this.intervalFunc, this.interval);

          };

           

          Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop = function()

          {

              if (this.timerID)

                  clearTimeout(this.timerID);

              this.timerID = 0;

          };

           

          Spry.Widget.SlidingPanels.PanelAnimator.prototype.step = function()

          {

              var elapsedTime = (new Date()).getTime() - this.startTime;

              var done = elapsedTime >= this.duration;

              var x, y;

           

              if (done)

              {

                  x = this.curX = this.dstX;

                  y = this.curY = this.dstY;

              }

              else

              {

                  x = this.transition(elapsedTime, this.curX, this.dstX - this.curX, this.duration);

                  y = this.transition(elapsedTime, this.curY, this.dstY - this.curY, this.duration);

              }

           

              this.element.style.left = x + "px";

              this.element.style.top = y + "px";

           

              if (!done)

                  this.timerID = setTimeout(this.intervalFunc, this.interval);

              else if (this.finish)

                  this.finish();

          };

          • 2. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
            Bernd Alheit CommunityMVP

            Why did you post this in the forum for Acrobat Javascript?

            • 3. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
              krizcortes Community Member

              because i need to edit the js file, to fix this problem.

              Is acrobat javascript a different js?

              • 4. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                Bernd Alheit CommunityMVP

                What kind of Javascript do you use? There are Acrobat Javascript, Illustrator Javascript, and so on.

                • 5. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                  krizcortes Community Member

                  I did not know there were different types of javascript, this is new for me, and i thank you for letting me know.

                   

                  I guess i use Web javascript? Dreamweaver javascript? I dont know how to edit it, i can get an idea out of how whatever was written works, kindof, if i read it, because it reminds me of actionscript (flash) where i did some basic stuff once. But since i dont know what i Could write Where in a Way that makes Sence to the Code and would Work, i cant edit it. I tried, but what i did obviously didnt work.

                   

                  Do you think the ideas/approaches i stated, if implemented, would work?

                  Can you make the fix to the js i copied for the SprySlidingPanels?,

                  If not, can you please guide me to what exactly i would need to change and the type of commands/attributes/whatever i could write that would allow me to do this?

                   

                  Ive been looking for a while, posted the same problem in different ways in various posts in the forums. With double and triple digits views, no one has ever commented anything. I think, by the ammount of views my questions have, and the ammount of answers ( 0 ), we can assume many people would love to know how to do this.

                  • 6. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                    krizcortes Community Member

                    look, im currently playing with this:

                    <<

                     

                    <script>

                    // The following function - setPanelNavigation() - assumes the following

                    // 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID

                    // 2. The Previous Panel button has an ID of previousPanel

                    // 3. The Next Panel button has an ID of nextPanel

                    // 4. SpryDOMUtils.js has been linked

                    function setPanelNavigation() {

                        var current = sp1.getCurrentPanel(); // Get the current panel

                        var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels

                        var panelNumber=1; // Give a value to the first panel number

                        Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels

                                                                          if (node.id==current.id){ // The current panel now receives a number

                     

                     

                                if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //

                                if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //

                     

                            }

                            panelNumber++; // Go to next panel after incrementing the count

                        });

                    }

                    Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value

                     

                    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");

                    </script>

                     

                    >>

                     

                    This came from Gramp's

                    Spry Sliding Panels Group Navigation Buttons cookbook

                     

                    He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one.

                     

                    What do you think? Am i close?

                    ( the above pasted is the one im editing, not the original one )

                    • 7. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                      Bernd Alheit CommunityMVP

                      I can't help.

                      • 8. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                        George_Johnson CommunityMVP

                        You should post this in the Dreamweaver forum, not the Acrobat JavaScript forum.

                        • 9. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                          krizcortes Community Member

                          This is posted in the:

                           

                          Dreamweaver forum,

                          Spry Framework for Ajax,

                          Dreamweaver Application Development.

                           

                          Acrobat Javascript is the only one with answers, which arent really answers.

                           

                          Why cant you help?

                          • 10. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                            try67 CommunityMVP

                            Because this has nothing to do with JavaScript code used in Acrobat ...

                            • 11. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                              krizcortes Community Member

                              so the javascript code used in acrobat

                              is so different to the javascript code used for web

                              that you dont have any idea on how to do the suggested approaches i wrote for that bit of code?

                               

                              Ignore the fact that "this is not the correct forum"

                              we're all here to find help and to give help to others, arent we?


                              • 12. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                                Bernd Alheit CommunityMVP

                                so the javascript code used in acrobat

                                is so different to the javascript code used for web

                                Yes. When you run the code in Acrobat you will get a long list of errors.

                                • 13. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                                  try67 CommunityMVP

                                  There are about a million forums on the web dedicated to web-based JS, and

                                  about 2 or 3 dedicated to Acrobat-based JS. So why not look for a place

                                  where you're more likely to get help?

                                  • 14. Re: Spry SlidingPanels AUTO HEIGHT TWEAK
                                    krizcortes Community Member

                                    Fair enough Bernd, thanks for your mature answer