Changeset 12792

Timestamp:

02/29/08 14:51:10 (11 months ago)

Author:

peller

Message:

Fix bidi for TabContainer? vertical tabs. Thanks, Evan (IBM). Fixes #5752 !strict

Location:

dijit/trunk

Files:

• layout/StackContainer.js (modified) (2 diffs)
• layout/TabContainer.js (modified) (1 diff)
• layout/templates/_TabButton.html (modified) (1 diff)
• tests/layout/test_TabContainer.html (modified) (1 diff)
• themes/tundra/layout/TabContainer_rtl.css (modified) (2 diffs)

dijit/trunk/layout/StackContainer.js

@@ -298 +298 @@
                         }
                         if(!this._currentChild){ // put the first child into the tab order
-                                button.focusNode.setAttribute("tabIndex","0");
+                                button.focusNode.setAttribute("tabIndex", "0");
                                 this._currentChild = page;
+                        }
+                        //make sure all tabs have the same length
+                        if(!dojo._isBodyLtr() && dojo.isIE && this._rectifyRtlTabList){
+                                this._rectifyRtlTabList();
                         }
                 },
@@ -409 +413 @@
                                 }
                                 // handle page navigation
-                                if(forward != null){
+                                if(forward !== null){
                                         this.adjacent(forward).onClick();
                                         dojo.stopEvent(e);

dijit/trunk/layout/TabContainer.js

@@ -133 +133 @@
                 this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout");
                 this.inherited("postMixInProperties",arguments);
+        },
+        
+        _rectifyRtlTabList: function(){
+                //Summay: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE
+                if(0 >= this.tabPosition.indexOf('-h')){ return; }
+                if(!this.pane2button){ return; }
+                var maxLen = 0;
+                //this.tablist.pane2button is not array, so we can't use dojo.forEach here
+                //simplily get the max length among the tabs
+                for(var pane in this.pane2button){
+                        var tabButton = this.pane2button[pane];
+                        var len = dojo.marginBox(tabButton.innerDiv).w;
+                        maxLen = maxLen > len ? maxLen : len;
+                }
+                //unify the length of all the tabs
+                for(pane in this.pane2button){
+                        var tabButton = this.pane2button[pane];
+                        tabButton.innerDiv.style.width = maxLen + 'px';
+                }       
         }
 });

dijit/trunk/layout/templates/_TabButton.html

@@ -2 +2 @@
     <div waiRole="presentation" class='dijitTabInnerDiv' dojoAttachPoint='innerDiv'>
         <div waiRole="presentation" class='dijitTabContent' dojoAttachPoint='tabContent'>
-                <span dojoAttachPoint='containerNode,focusNode'>${!label}</span>
+                <span dojoAttachPoint='containerNode,focusNode' class='tabLabel'>${!label}</span>
                 <span dojoAttachPoint='closeButtonNode' class='closeImage' dojoAttachEvent='onmouseenter:_onMouse, onmouseleave:_onMouse, onclick:onClickCloseButton' stateModifier='CloseButton'>
                     <span dojoAttachPoint='closeText' class='closeText'>x</span>

dijit/trunk/tests/layout/test_TabContainer.html

@@ -151 +151 @@
         </div>
 
+<p></p>
+        <div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabPosition="left-h">
+      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
+      Once upon a time there was a dear little girl who was loved by
+      every one who looked at her, but most of all by her grandmother,
+      and there was nothing that she would not have given to the child.
+      </div>
+      <div id="HanselGretel" dojoType="dijit.layout.ContentPane"
+           title="Hansel and Gretel" closable="true" selected="true">
+      Hard by a great forest dwelt a poor wood-cutter with his wife
+      and his two children. The boy was called Hansel and the girl Gretel.
+      He had little to bite and to break, and once when great dearth fell
+      on the land, he could no longer procure even daily bread.
+      </div>
+      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
+             title="The Three Green Twigs">
+      There was once upon a time a hermit who lived in a forest at the foot
+      of a mountain, and passed his time in prayer and good works,
+      and every evening he carried, to the glory of God, two pails of water
+      up the mountain.
+        </div>
+
         <h3>Typical rendering time</h3>
         <table border=1>

dijit/trunk/themes/tundra/layout/TabContainer_rtl.css

@@ -54 +54 @@
 }
 
+.dj_ie .dijitRtl .dijitAlignLeft .dijitTab .dijitTabInnerDiv {
+        padding-left:19px;
+}
+
+.dj_gecko .dijitRtl .dijitAlignLeft .dijitTab .dijitTabInnerDiv {
+        padding-left:11px;
+}
+
 .dijitRtl .dijitAlignRight .dijitTab .dijitClosable .closeImage {
         left:auto;
@@ -59 +67 @@
 }
 
-.dijitRtl .dijitAlignLeft .dijitTab .dijitClosable .closeImage {
-        right:auto;
+.dj_ie7 .dijitRtl .dijitAlignLeft .dijitTab  .dijitTabContent{
+        position:relative;
+}
+
+.dj_ie7 .dijitRtl .dijitAlignLeft .dijitTab .dijitClosable .closeImage{
+        position:absolute;
+        top:2px;
         left:3px;
 }
+
+.dj_ie6 .dijitRtl .dijitAlignLeft .dijitTab .dijitClosable .closeImage{
+        float:left;
+}
+
+.dj_ie6 .dijitRtl .dijitAlignLeft .dijitTab .dijitClosable .tabLabel{
+        float:right;
+}
+
+.dj_ie .dijitTab .dijitTabInnerDiv{
+        width : 1%;
+}