fixed bug with IE and multiselect + added twincol style for select

svn changeset:143/svn branch:toolkit

diff --git a/WebContent/themes/default/theme.css b/WebContent/themes/default/theme.css
index 777c819730ba67ec800313ee427a14eeb977e10f..c5f152a42d57db9b6e6386b25c70e1fdd0c3594e 100644 (file)
--- a/WebContent/themes/default/theme.css
+++ b/WebContent/themes/default/theme.css
@@ -196,7 +196,29 @@ IMG.overlay {
 .select-optiongroup DIV.newitem {\r
        margin-left: 1.2em;\r
        margin-top: 0.3em;\r
-}\r
+}
+.select-twincol {
+       width: 350px;
+}
+.select-twincol div.buttons {
+       text-align:center;
+}\r
+.select-twincol div.buttons button {
+       text-align:center;
+       widht:35px;
+}
+.select-twincol select.unselected {
+       float:left;
+       width: 150px;
+       /* force white, may be grey if empty initially */
+       background-color: white;
+}
+.select-twincol select.selected {
+       float:right;
+       width: 150px;
+       /* force white, may be grey if empty initially */
+       background-color: white;
+}
 \r
 /* Table */\r
 \r

diff --git a/WebContent/themes/default/theme.js b/WebContent/themes/default/theme.js
index 0b3be291693628b8f1e410621a212b142527cf50..f4d605141657ebe9c121e2e40fd7dcf949604a00 100644 (file)
--- a/WebContent/themes/default/theme.js
+++ b/WebContent/themes/default/theme.js
@@ -55,6 +55,7 @@ DefaultTheme.prototype.registerTo = function(client) {
        client.registerRenderer(this,"datefield","calendar",this.renderDateFieldCalendar);\r
        client.registerRenderer(this,"select",null,this.renderSelect);\r
        client.registerRenderer(this,"select","optiongroup",this.renderSelectOptionGroup);\r
+       client.registerRenderer(this,"select","twincol",this.renderSelectTwincol);\r
        client.registerRenderer(this,"upload",null,this.renderUpload);\r
        client.registerRenderer(this,"embedded",null,this.renderEmbedded);\r
 \r
@@ -3314,12 +3315,18 @@ DefaultTheme.prototype.renderSelect = function(renderer,uidl,target,layoutInfo)
        // Selected options\r
        if (options != null && options.length >0) {\r
                for (var i=0; i<options.length;i++) {\r
-                       var optionNode = theme.createElementTo(select,"option");\r
-                       optionNode.setAttribute("value", options[i].getAttribute("key"));       \r
+            var optionNode = new Option(\r
+                options[i].getAttribute("caption"),\r
+                options[i].getAttribute("key")\r
+            );\r
+            select.options[select.options.length] = optionNode;\r
                        if (options[i].getAttribute("selected") == "true") {\r
-                               optionNode.selected="true";     \r
+                               optionNode.selected = true;\r
+                // IE bug workaraund to preserve selection in multiselect\r
+                if(document.all) {\r
+                    window.scrollBy(0,0);\r
+                }\r
                        }\r
-                       theme.createTextNodeTo(optionNode,options[i].getAttribute("caption"));\r
                }\r
        }\r
        \r
@@ -3332,6 +3339,160 @@ DefaultTheme.prototype.renderSelect = function(renderer,uidl,target,layoutInfo)
        }\r
 }\r
 \r
+DefaultTheme.prototype.renderSelectTwincol = function(renderer,uidl,target,layoutInfo) {\r
+    function deleteOptionFromSelectByOptionValue(select, value) {\r
+        for(var i = 0; i < select.options.length; i++) {\r
+            if(select.options[i].value == value) {\r
+                select.options[i] = null;\r
+                return true;\r
+            }\r
+        }\r
+    }\r
+    function setSelectedOfOptionFromSelectByOptionValue(select, value, sel) {\r
+        for(var i = 0; i < select.options.length; i++) {\r
+            if(select.options[i].value == value) {\r
+                select.options[i].selected = sel;\r
+                return true;\r
+            }\r
+        }\r
+    }\r
+       var theme = renderer.theme;\r
+       var client = renderer.client;\r
+       \r
+       // Create containing element\r
+       var div = renderer.theme.createPaintableElement(renderer,uidl,target,layoutInfo);       \r
+       if (uidl.getAttribute("invisible")) return; // Don't render content if invisible\r
+\r
+       // Create selection variable\r
+       var selectMode = uidl.getAttribute("selectmode");\r
+       var selectable = selectMode == "multi" || selectMode == "single";\r
+       var immediate = ("true" == uidl.getAttribute("immediate"));\r
+       var disabled = ("true" == uidl.getAttribute("disabled"));\r
+       var readonly = ("true" == uidl.getAttribute("readonly"));\r
+       var newitem = ("true" == uidl.getAttribute("allownewitem"));\r
+       var focusid = uidl.getAttribute("focusid");\r
+       var tabindex = uidl.getAttribute("tabindex");\r
+       \r
+       var selectionVariable = theme.createVariableElementTo(div,theme.getVariableElement(uidl,"array","selected"));\r
+\r
+       // Render default header\r
+       theme.renderDefaultComponentHeader(renderer,uidl,div,layoutInfo);\r
+\r
+    if (newitem) {\r
+        theme.createElementTo(div,"br");\r
+    }\r
+    // create two selects\r
+    var unselected = theme.createElementTo(div,"select");\r
+    unselected.setAttribute("multiple","true");\r
+    unselected.className = "unselected";\r
+    var selected = theme.createElementTo(div,"select");\r
+    selected.setAttribute("multiple","true");\r
+    selected.className = "selected";\r
+    // buttons to move selections\r
+    var buttonsDiv = theme.createElementTo(div,"div");\r
+    buttonsDiv.className = "buttons";\r
+\r
+    //set focus and tabindex to unselected select    \r
+       if (focusid) unselected.focusid = focusid;\r
+       if (tabindex) unselected.tabIndex = tabindex;\r
+\r
+       var options = theme.getFirstElement(uidl,"options");\r
+       if (options != null) {\r
+               options = options.getElementsByTagName("so");\r
+               unselected.size = (options.length>7?7:options.length);\r
+        selected.size = (options.length>7?7:options.length);\r
+       }\r
+    \r
+       // Select options\r
+       if (options != null && options.length >0) {\r
+        for (var i=0; i<options.length;i++) {\r
+            var modelOptionNode;\r
+            if (options[i].getAttribute("selected") == "true") {\r
+                modelOptionNode = theme.createElementTo(selected,"option");\r
+            } else {\r
+                modelOptionNode = theme.createElementTo(unselected,"option");\r
+            }\r
+            theme.createTextNodeTo(modelOptionNode,options[i].getAttribute("caption"));\r
+            modelOptionNode.setAttribute("value", options[i].getAttribute("key"));\r
+        }\r
+       }\r
+       \r
+       if (newitem) {\r
+               var input = theme.createInputElementTo(div,"text");\r
+               var button = theme.createElementTo(div,"button");\r
+               theme.createTextNodeTo(button,"+");\r
+               var newitemVariable = theme.createVariableElementTo(div,theme.getVariableElement(uidl,"string","newitem"));\r
+               theme.addSetVarListener(theme,client,input,"change",newitemVariable,input,true);\r
+       }\r
+    var moveRightButton = theme.createElementTo(buttonsDiv, "button");\r
+    moveRightButton.innerHTML = "&gt;&gt;";\r
+    moveRightButton.onclick = function() {\r
+        // loop all selected options unselected-list\r
+        while(unselected.selectedIndex > -1) {\r
+            var option = unselected.options[unselected.selectedIndex];\r
+            //add selected options to end of selected-list\r
+            selected.options[selected.options.length] = \r
+                new Option(\r
+                    option.text,\r
+                    option.value                  \r
+                    );\r
+            // remove from unselected-list\r
+            deleteOptionFromSelectByOptionValue(unselected,option.value)\r
+        }\r
+        if(selectMode != "multi") {\r
+            // in single select mode, ensure only one option on right side\r
+            // not ment for single select mode, just to be more compatible\r
+            while(selected.options.length > 1) {\r
+                var optionToLeft = selected.options[0];\r
+                unselected.options[unselected.options.length] = \r
+                    new Option(\r
+                        optionToLeft.text,\r
+                        optionToLeft.value                  \r
+                );\r
+                selected.options[0] = null;\r
+                // remove from selected-list\r
+                deleteOptionFromSelectByOptionValue(selected,optionToLeft.value)\r
+            }\r
+        } // end checking for single variable\r
+        // fire variable change\r
+        var s = new Array();\r
+               for (var i = 0; i < selected.options.length; i++) {\r
+                       s[s.length] = selected.options[i].value;\r
+               }\r
+               var value = s.join(',');                \r
+        theme.setVariable(client,selectionVariable,value,immediate);\r
+    }\r
+    var moveLeftButton = theme.createElementTo(buttonsDiv, "button");\r
+    moveLeftButton.innerHTML = "&lt;&lt;";\r
+    moveLeftButton.onclick = function() {\r
+        // loop all selected options selected-list\r
+        while(selected.selectedIndex > -1) {\r
+            var option = selected.options[selected.selectedIndex];\r
+            //add selected options to end of selected-list\r
+            unselected.options[unselected.options.length] = \r
+                new Option(\r
+                    option.text,\r
+                    option.value                  \r
+                    );\r
+            // remove from unselected-list\r
+            deleteOptionFromSelectByOptionValue(selected,option.value)\r
+        }\r
+        // fire variable change\r
+        var s = new Array();\r
+               for (var i = 0; i < selected.options.length; i++) {\r
+                       s[s.length] = selected.options[i].value;\r
+               }\r
+               var value = s.join(',');                \r
+        theme.setVariable(client,selectionVariable,value,immediate);\r
+    }\r
+    if (disabled||readonly) {\r
+        selected.disabled = "true";\r
+        unselected.disabled = "true";\r
+        moveLeftButton.disabled = "true";\r
+        moveRightButton.disabled = "true";\r
+    }\r
+    \r
+}\r
 \r
 DefaultTheme.prototype.renderSelectOptionGroup = function(renderer,uidl,target,layoutInfo) {\r
        // TODO: \r

diff --git a/src/com/itmill/toolkit/demo/features/FeatureSelect.java b/src/com/itmill/toolkit/demo/features/FeatureSelect.java
index 6b0e4087d298b3bc928fe44afd7d59c1f22f0400..93b0ad8d3b7ff950b8260b4b284b0088d5046667 100644 (file)
--- a/src/com/itmill/toolkit/demo/features/FeatureSelect.java
+++ b/src/com/itmill/toolkit/demo/features/FeatureSelect.java
@@ -57,6 +57,10 @@ public class FeatureSelect extends Feature {
                        .addItem("optiongroup")
                        .getItemProperty(themes.getItemCaptionPropertyId())
                        .setValue("optiongroup");
+               themes
+                       .addItem("twincol")
+                       .getItemProperty(themes.getItemCaptionPropertyId())
+                       .setValue("twincol");
                l.addComponent(p);
 
                return l;