myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mmarinsc...@apache.org
Subject svn commit: r292911 - in /myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion: HtmlAccordionPanelRenderer.java resource/testx.html resource/toggler.js
Date Sat, 01 Oct 2005 02:55:02 GMT
Author: mmarinschek
Date: Fri Sep 30 19:54:56 2005
New Revision: 292911

URL: http://svn.apache.org/viewcvs?rev=292911&view=rev
Log:
new feature: if set, a different content will be shown in closed mode

Modified:
    myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/HtmlAccordionPanelRenderer.java
    myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/testx.html
    myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/toggler.js

Modified: myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/HtmlAccordionPanelRenderer.java
URL: http://svn.apache.org/viewcvs/myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/HtmlAccordionPanelRenderer.java?rev=292911&r1=292910&r2=292911&view=diff
==============================================================================
--- myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/HtmlAccordionPanelRenderer.java
(original)
+++ myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/HtmlAccordionPanelRenderer.java
Fri Sep 30 19:54:56 2005
@@ -93,6 +93,17 @@
                             RendererUtils.renderChild(context, header);
                         }
                         writer.endElement(HTML.DIV_ELEM);
+
+                        UIComponent closedContent = pane.getFacet("closedContent");
+                    
+                        if(closedContent != null)
+                        {
+                            writer.startElement(HTML.DIV_ELEM, child);
+                            writer.writeAttribute(HTML.ID_ATTR,child.getClientId(context)+"_CLOSED_CONTENT_DIV",JSFAttr.ID_ATTR);
+                            RendererUtils.renderChild(context, closedContent);
+                            writer.endElement(HTML.DIV_ELEM);
+                        }
+
                         writer.startElement(HTML.DIV_ELEM, child);
                         writer.writeAttribute(HTML.ID_ATTR,child.getClientId(context)+"_CONTENT_DIV",JSFAttr.ID_ATTR);
                         RendererUtils.renderChildren(context, child);

Modified: myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/testx.html
URL: http://svn.apache.org/viewcvs/myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/testx.html?rev=292911&r1=292910&r2=292911&view=diff
==============================================================================
--- myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/testx.html
(original)
+++ myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/testx.html
Fri Sep 30 19:54:56 2005
@@ -7,15 +7,15 @@
 	</head>
 	<body>
 	 <div id="myAccordion">
-	    <div id="myFirstTab">
+	    <div id="one">
 	       <div>First Tab</div>
 	       <div>Content of first tab<br>and more content</div>
 	    </div>
-	    <div id="myFirstTab">
+	    <div id="two">
 	       <div>First Tab</div>
 	       <div>Content of first tab</div>
 	    </div>
-	    <div id="myFirstTab">
+	    <div id="three">
 	       <div>First Tab</div>
 	       <div>Content of first tab</div>
 	    </div>
@@ -26,11 +26,12 @@
 	  -->
 	 </script>
      <div id="myAccordion2">
-	    <div id="myFirstTab">
+	    <div id="two_one">
 	       <div>First Tab</div>
-	       <div>Content of first tab<br>and more content</div>
+	       <div>Panel closed! Don't look.</div>            
+           <div>Content of first tab<br>and more content</div>
 	    </div>
-	    <div id="mySecondTab">
+	    <div id="two_two">
 	       <div>Second Tab</div>
 	       <div>Content of second tab<br>and more content</div>
 	    </div>	    

Modified: myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/toggler.js
URL: http://svn.apache.org/viewcvs/myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/toggler.js?rev=292911&r1=292910&r2=292911&view=diff
==============================================================================
--- myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/toggler.js
(original)
+++ myfaces/sandbox/trunk/src/java/org/apache/myfaces/custom/accordion/resource/toggler.js
Fri Sep 30 19:54:56 2005
@@ -4,124 +4,221 @@
 
 Rico.Toggler.prototype = {
 
-   initialize: function(container, options) {
-      this.container            = $(container);
-      this.accordionTabs        = new Array();
-      this.setOptions(options);
-      this._attachBehaviors();
-
-      this.container.style.borderBottom = '1px solid ' + this.options.borderColor;
-
-      // set the initial visual state...
-      for ( var i=0 ; i < this.accordionTabs.length ; i++ )
-      {
-         this.accordionTabs[i].collapse();
-         this.accordionTabs[i].content.style.display = 'none';
-      }
-   },
-
-   setOptions: function(options) {
-      this.options = {
-         expandedBg          : '#63699c',
-         hoverBg             : '#63699c',
-         collapsedBg         : '#6b79a5',
-         expandedTextColor   : '#ffffff',
-         expandedFontWeight  : 'bold',
-         hoverTextColor      : '#ffffff',
-         collapsedTextColor  : '#ced7ef',
-         collapsedFontWeight : 'normal',
-         hoverTextColor      : '#ffffff',
-         borderColor         : '#1f669b',
-         panelHeight         : 200,
-         onHideTab           : null,
-         onShowTab           : null
-      }.extend(options || {});
-   },
-
-   showTabByIndex: function( anIndex, animate ) {
-      var doAnimate = arguments.length == 1 ? true : animate;
-      this.showTab( this.accordionTabs[anIndex], doAnimate );
-   },
-
-   toggleTab: function( accordionTab, animate ) {
-
-      var doAnimate = arguments.length == 1 ? true : animate;
-      
-      if(accordionTab.expanded)
-      {
-	      if ( this.options.onHideTab )
-		 this.options.onHideTab(accordionTab);
-	
-	      accordionTab.showCollapsed(); 
-	      var accordion = this;
-	
-	      accordionTab.content.style.height = (this.options.panelHeight - 1) + 'px';
-	
-	      if ( doAnimate ) {
-		 new Effect.TogglerSize( accordionTab.content,
-					   1,
-					   100, 10,
-					   { complete: function() {accordion.showTabDone(accordionTab)} } );
-	      }
-	      else {
-		 accordionTab.content.style.height = "1px";
-		 this.showTabDone(accordionTab);
-	      }	      
-      }
-      else
-      {	
-	      var accordion = this;
-	
-	      accordionTab.content.style.display = '';	
-	      accordionTab.titleBar.style.fontWeight = this.options.expandedFontWeight;
-	
-	      if ( doAnimate ) {
-		 new Effect.TogglerSize( accordionTab.content,
-					   this.options.panelHeight,
-					   100, 10,
-					   { complete: function() { 
-							   accordionTab.showExpanded();
-							   if ( accordionTab.accordion.options.onShowTab )
-								   accordionTab.accordion.options.onShowTab(accordionTab);
-					   } } );
-	      }
-	      else {
-		 accordionTab.content.style.height = this.options.panelHeight + "px";
-		 
-	   accordionTab.showExpanded();
-	   if ( this.options.onShowTab )
-		   this.options.onShowTab(accordionTab);
-		 
-	      }	      
-      }
-   },
-
-   showTabDone: function(collapsedTab) {
-      collapsedTab.content.style.display = 'none';
-   },
-
-   _attachBehaviors: function() {
-      var panels = this._getDirectChildrenByTag(this.container, 'DIV');
-      for ( var i = 0 ; i < panels.length ; i++ ) {
-
-         var tabChildren = this._getDirectChildrenByTag(panels[i],'DIV');
-         if ( tabChildren.length != 2 )
-            continue; // unexpected
-
-         var tabTitleBar   = tabChildren[0];
-         var tabContentBox = tabChildren[1];
-         this.accordionTabs.push( new Rico.Toggler.Tab(this,tabTitleBar,tabContentBox) );
-      }
-   },
-
-   _getDirectChildrenByTag: function(e, tagName) {
-      var kids = new Array();
-      var allKids = e.childNodes;
-      for( var i = 0 ; i < allKids.length ; i++ )
-         if ( allKids[i] && allKids[i].tagName && allKids[i].tagName == tagName
)
-            kids.push(allKids[i]);
-      return kids;
-   }
+    initialize: function(container, options)
+    {
+        this.container = $(container);
+        this.accordionTabs = new Array();
+        this.setOptions(options);
+        this._attachBehaviors();
+
+        this.container.style.borderBottom = '1px solid ' + this.options.borderColor;
+
+        // set the initial visual state...
+        for (var i = 0; i < this.accordionTabs.length; i++)
+        {
+            this.accordionTabs[i].collapse();
+            this.accordionTabs[i].content.style.display = 'none';
+            if (this.accordionTabs[i].closedContent)
+            {
+                this.accordionTabs[i].closedContent.style.display = '';
+                this.accordionTabs[i].closedContent.style.height = this.options.closedPanelHeight
+ "px";
+
+            }
+        }
+    },
+
+    setOptions: function(options)
+    {
+        this.options = {
+            expandedBg          : '#63699c',
+            hoverBg             : '#63699c',
+            collapsedBg         : '#6b79a5',
+            expandedTextColor   : '#ffffff',
+            expandedFontWeight  : 'bold',
+            hoverTextColor      : '#ffffff',
+            collapsedTextColor  : '#ced7ef',
+            collapsedFontWeight : 'normal',
+            hoverTextColor      : '#ffffff',
+            borderColor         : '#1f669b',
+            panelHeight         : 200,
+            closedPanelHeight   : 50,
+            onHideTab           : null,
+            onShowTab           : null
+        }.extend(options || {});
+    },
+
+    showTabByIndex: function(anIndex, animate)
+    {
+        var doAnimate = arguments.length == 1 ? true : animate;
+        this.showTab(this.accordionTabs[anIndex], doAnimate);
+    },
+
+    toggleTab: function(accordionTab, animate)
+    {
+
+        var doAnimate = arguments.length == 1 ? true : animate;
+
+        if (accordionTab.expanded)
+        {
+            this._collapseTab(accordionTab, doAnimate);
+        }
+        else
+        {
+            this._expandTab(accordionTab, doAnimate);
+        }
+    },
+
+    _collapseTab: function(accordionTab, doAnimate)
+    {
+        if (this.options.onHideTab)
+            this.options.onHideTab(accordionTab);
+
+        accordionTab.showCollapsed();
+        var accordion = this;
+
+        accordionTab.content.style.height = (this.options.panelHeight - 1) + 'px';
+
+        if (doAnimate)
+        {
+            if (!accordionTab.closedContent)
+            {
+                new Effect.TogglerSize(accordionTab.content,
+                        1,
+                        100, 10,
+                { complete: function()
+                {
+                    accordion.showTabDone(accordionTab)
+                } });
+            }
+            else
+            {
+                new Effect.AccordionSize(accordionTab.content,
+                        accordionTab.closedContent,
+                        1,
+                        this.options.closedPanelHeight,
+                        100, 10,
+                { complete: function()
+                {
+                    accordion.showTabDone(accordionTab)
+                } });
+            }
+        }
+        else
+        {
+            accordionTab.content.style.height = "1px";
+
+            if (accordionTab.closedContent)
+            {
+                accordionTab.closedContent.style.height = this.options.closedPanelHeight
+ "px";
+            }
+            this.showTabDone(accordionTab);
+        }
+    },
+
+    _expandTab: function(accordionTab, doAnimate)
+    {
+        var accordion = this;
+
+        accordionTab.content.style.display = '';
+        accordionTab.titleBar.style.fontWeight = this.options.expandedFontWeight;
+
+        if (accordionTab.closedContent)
+        {
+            accordionTab.closedContent.style.height = (this.options.closedPanelHeight - 1)
+ 'px';
+        }
+
+        if (doAnimate)
+        {
+            if (!accordionTab.closedContent)
+            {
+                new Effect.TogglerSize(accordionTab.content,
+                        this.options.panelHeight,
+                        100, 10,
+                { complete: function()
+                {
+                    accordionTab.showExpanded();
+                    if (accordionTab.accordion.options.onShowTab)
+                        accordionTab.accordion.options.onShowTab(accordionTab);
+                } });
+            }
+            else
+            {
+                new Effect.AccordionSize(accordionTab.closedContent,
+                        accordionTab.content,
+                        1,
+                        this.options.panelHeight,
+                        100, 10,
+                { complete: function()
+                {
+                    accordionTab.showExpanded();
+                    if (accordionTab.accordion.options.onShowTab)
+                        accordionTab.accordion.options.onShowTab(accordionTab);
+                } });
+            }
+
+        }
+        else
+        {
+            accordionTab.content.style.height = this.options.panelHeight + "px";
+
+            if (accordionTab.closedContent)
+            {
+                accordionTab.closedContent.style.height = "1px";
+            }
+            accordionTab.showExpanded();
+            if (this.options.onShowTab)
+                this.options.onShowTab(accordionTab);
+
+        }
+    },
+
+    showTabDone: function(collapsedTab)
+    {
+        collapsedTab.content.style.display = 'none';
+    },
+
+    _attachBehaviors: function()
+    {
+        var panels = this._getDirectChildrenByTag(this.container, 'DIV');
+        for (var i = 0; i < panels.length; i++)
+        {
+
+            var tabChildren = this._getDirectChildrenByTag(panels[i], 'DIV');
+            var tabTitleBar = null;
+            var tabClosedContentBox = null;
+            var tabContentBox = null;
+
+            if (tabChildren.length == 2)
+            {
+                tabTitleBar = tabChildren[0];
+                tabContentBox = tabChildren[1];
+            }
+            else if (tabChildren.length == 3)
+            {
+                tabTitleBar = tabChildren[0];
+                tabClosedContentBox = tabChildren[1];
+                tabContentBox = tabChildren[2];
+            }
+            else
+            {
+                continue;
+                // unexpected
+            }
+
+            this.accordionTabs.push(new Rico.Toggler.Tab(this, tabTitleBar,
+                    tabClosedContentBox, tabContentBox));
+        }
+    },
+
+    _getDirectChildrenByTag: function(e, tagName)
+    {
+        var kids = new Array();
+        var allKids = e.childNodes;
+        for (var i = 0; i < allKids.length; i++)
+            if (allKids[i] && allKids[i].tagName && allKids[i].tagName ==
tagName)
+                kids.push(allKids[i]);
+        return kids;
+    }
 
 };
 
@@ -129,63 +226,90 @@
 
 Rico.Toggler.Tab.prototype = {
 
-   initialize: function(accordion, titleBar, content) {
-      this.accordion = accordion;
-      this.titleBar  = titleBar;
-      this.content   = content;
-      this._attachBehaviors();
-   },
-
-   collapse: function() {
-      this.showCollapsed();
-      this.content.style.height = "1px";
-   },
-
-   showCollapsed: function() {
-      this.expanded = false;
-      this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
-      this.titleBar.style.color           = this.accordion.options.collapsedTextColor;
-      this.titleBar.style.fontWeight      = this.accordion.options.collapsedFontWeight;
-      this.content.style.overflow = "hidden";
-   },
-
-   showExpanded: function() {
-      this.expanded = true;
-      this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
-      this.titleBar.style.color           = this.accordion.options.expandedTextColor;
-      this.content.style.overflow         = "visible";
-   },
-
-   titleBarClicked: function(e) {
-      this.accordion.toggleTab(this);
-   },
-
-   hover: function(e) {
-		this.titleBar.style.backgroundColor = this.accordion.options.hoverBg;
-		this.titleBar.style.color           = this.accordion.options.hoverTextColor;
-   },
-
-   unhover: function(e) {
-      if ( this.expanded ) {
-         this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
-         this.titleBar.style.color           = this.accordion.options.expandedTextColor;
-      }
-      else {
-         this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
-         this.titleBar.style.color           = this.accordion.options.collapsedTextColor;
-      }
-   },
-
-   _attachBehaviors: function() {
-      this.content.style.border = "1px solid " + this.accordion.options.borderColor;
-      this.content.style.borderTopWidth    = "0px";
-      this.content.style.borderBottomWidth = "0px";
-      this.content.style.margin            = "0px";
-
-      this.titleBar.onclick     = this.titleBarClicked.bindAsEventListener(this);
-      this.titleBar.onmouseover = this.hover.bindAsEventListener(this);
-      this.titleBar.onmouseout  = this.unhover.bindAsEventListener(this);
-   }
+    initialize: function(accordion, titleBar, closedContent, content)
+    {
+        this.accordion = accordion;
+        this.titleBar = titleBar;
+        this.content = content;
+        this.closedContent = closedContent;
+        this._attachBehaviors();
+    },
+
+    collapse: function()
+    {
+        this.showCollapsed();
+        this.content.style.height = "1px";
+    },
+
+    showCollapsed: function()
+    {
+        this.expanded = false;
+        this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
+        this.titleBar.style.color = this.accordion.options.collapsedTextColor;
+        this.titleBar.style.fontWeight = this.accordion.options.collapsedFontWeight;
+        this.content.style.overflow = "hidden";
+        if (this.closedContent)
+        {
+            this.closedContent.style.overflow = "visible";
+        }
+    },
+
+    showExpanded: function()
+    {
+        this.expanded = true;
+        this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
+        this.titleBar.style.color = this.accordion.options.expandedTextColor;
+        this.content.style.overflow = "visible";
+        if (this.closedContent)
+        {
+            this.closedContent.style.overflow = "hidden";
+        }
+    },
+
+    titleBarClicked: function(e)
+    {
+        this.accordion.toggleTab(this);
+    },
+
+    hover: function(e)
+    {
+        this.titleBar.style.backgroundColor = this.accordion.options.hoverBg;
+        this.titleBar.style.color = this.accordion.options.hoverTextColor;
+    },
+
+    unhover: function(e)
+    {
+        if (this.expanded)
+        {
+            this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
+            this.titleBar.style.color = this.accordion.options.expandedTextColor;
+        }
+        else
+        {
+            this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
+            this.titleBar.style.color = this.accordion.options.collapsedTextColor;
+        }
+    },
+
+    _attachBehaviors: function()
+    {
+        this.content.style.border = "1px solid " + this.accordion.options.borderColor;
+        this.content.style.borderTopWidth = "0px";
+        this.content.style.borderBottomWidth = "0px";
+        this.content.style.margin = "0px";
+
+        if (this.closedContent)
+        {
+            this.closedContent.style.border = "1px solid " + this.accordion.options.borderColor;
+            this.closedContent.style.borderTopWidth = "0px";
+            this.closedContent.style.borderBottomWidth = "0px";
+            this.closedContent.style.margin = "0px";
+        }
+
+        this.titleBar.onclick = this.titleBarClicked.bindAsEventListener(this);
+        this.titleBar.onmouseover = this.hover.bindAsEventListener(this);
+        this.titleBar.onmouseout = this.unhover.bindAsEventListener(this);
+    }
 
 };
 
@@ -193,58 +317,64 @@
 
 Effect.TogglerSize.prototype = {
 
-   initialize: function(elem, end, duration, steps, options) {
-      this.elem     = $(elem);
-      this.end      = end;
-      this.duration = duration;
-      this.steps    = steps;
-      this.options  = arguments[4] || {};
-
-      this.togglerSize();
-   },
-
-   togglerSize: function() {
-
-      if (this.isFinished()) {
-         // just in case there are round errors or such...
-	 this.elem.style.height = this.end + "px";
-
-         if(this.options.complete)
-            this.options.complete(this);
-         return;
-      }
-
-      if (this.timer)
-         clearTimeout(this.timer);
-
-      var stepDuration = Math.round(this.duration/this.steps) ;
-
-      var diff = 0;
-      
-      if(this.steps > 0)
-      {
-	      diff=(this.end - parseInt(this.elem.offsetHeight))/this.steps;	      
-      }
-      
-      this.resizeBy(diff);
-
-      this.duration -= stepDuration;
-      this.steps--;
-
-      this.timer = setTimeout(this.togglerSize.bind(this), stepDuration);
-   },
-
-   isFinished: function() {
-      return this.steps <= 0;
-   },
-
-   resizeBy: function(diff) {
-	   
-      var elemHeight = this.elem.offsetHeight;
-      var intDiff = parseInt(diff);
-      if ( diff != 0 ) {
-         this.elem.style.height = (elemHeight + intDiff) + "px";
-      }
-   }
+    initialize: function(elem, end, duration, steps, options)
+    {
+        this.elem = $(elem);
+        this.end = end;
+        this.duration = duration;
+        this.steps = steps;
+        this.options = arguments[4] || {};
+
+        this.togglerSize();
+    },
+
+    togglerSize: function()
+    {
+
+        if (this.isFinished())
+        {
+            // just in case there are round errors or such...
+            this.elem.style.height = this.end + "px";
+
+            if (this.options.complete)
+                this.options.complete(this);
+            return;
+        }
+
+        if (this.timer)
+            clearTimeout(this.timer);
+
+        var stepDuration = Math.round(this.duration / this.steps) ;
+
+        var diff = 0;
+
+        if (this.steps > 0)
+        {
+            diff = (this.end - parseInt(this.elem.offsetHeight)) / this.steps;
+        }
+
+        this.resizeBy(diff);
+
+        this.duration -= stepDuration;
+        this.steps--;
+
+        this.timer = setTimeout(this.togglerSize.bind(this), stepDuration);
+    },
+
+    isFinished: function()
+    {
+        return this.steps <= 0;
+    },
+
+    resizeBy: function(diff)
+    {
+
+        var elemHeight = this.elem.offsetHeight;
+        var intDiff = parseInt(diff);
+        if (diff != 0)
+        {
+            this.elem.style.height = (elemHeight + intDiff) + "px";
+        }
+    }
 
 };



Mime
View raw message