Changeset 1568
Legend:
- Unmodified
- Added
- Removed
-
trunk/modules/kauri-forms/kauri-forms-extra/src/main/kauri/static/dblselect/js/dblselect.js
r1480 r1568 16 16 // TODO: can we improve the auto-layout, e.g. by either creating everything or requiring the user to define everything. 17 17 18 // Tested in: FF3.6, IE6, IE7, CHR5 19 18 20 ; 19 21 (function($) { … … 38 40 labels: [] 39 41 } 40 } 41 42 DoubleSelectControl.prototype.elements = {}; 43 $.extend(DoubleSelectControl.prototype.elements, kf.Control.prototype.elements); 44 $.extend(DoubleSelectControl.prototype.elements, { 45 input : { 46 /* Kauri Forms needs an input-role element, but we don't, therefore 47 simply create a hidden div. */ 48 create : "<div style='display:none'/>" 49 }, 50 available : { 51 create : "<select size='5' multiple='multiple'/>" 52 }, 53 selected : { 54 create : "<select size='5' multiple='multiple'/>" 55 }, 56 add : { 57 create: "<button>></button>" 58 }, 59 remove : { 60 create: "<button><</button>" 61 } 42 43 this.initial = { 44 enable : true, 45 show: true 46 } 47 } 48 49 DoubleSelectControl.prototype.templates = {}; 50 $.extend(DoubleSelectControl.prototype.templates, kf.Control.prototype.templates); 51 $.extend(DoubleSelectControl.prototype.templates, { 52 control : 53 "<table kauri-role='input' style='width: auto'>" + 54 " <tr><td>Available:</td><td/><td>Selected:</td></tr>" + 55 " <tr>" + 56 " <td style='vertical-align: top;'>" + 57 " <select kauri-role='available' size='6' style='width: 10em;' multiple='multiple'/>" + 58 " </td>" + 59 " <td style='vertical-align: top'>" + 60 " <button kauri-role='add'>></button><br/>" + 61 " <button kauri-role='addAll'>>></button><br/><br/>" + 62 " <button kauri-role='remove'><</button><br/>" + 63 " <button kauri-role='removeAll'><<</button><br/>" + 64 " </td>" + 65 " <td style='vertical-align: top'>" + 66 " <select kauri-role='selected' size='6' style='width: 10em;' multiple='multiple'/>" + 67 " </td>" + 68 " </tr>" + 69 " <tr class='addOtherContainer'>" + 70 " <td style='vertical-align: top'>" + 71 " Other: <br/>" + 72 " <input kauri-role='other' size='10'/>" + 73 " <button kauri-role='addOther'>></button>" + 74 " </td>" + 75 " </tr>" + 76 "</table>" 62 77 }); 63 78 … … 69 84 70 85 DoubleSelectControl.prototype.initElements = function(create) { 71 $available = kf.ControlElements.lookup(this, "available", true); 72 $add = kf.ControlElements.lookup(this, "add", true); 73 $remove = kf.ControlElements.lookup(this, "remove", true); 74 $selected = kf.ControlElements.lookup(this, "selected", true); 75 $addAll = kf.ControlElements.lookup(this, "addAll", false); 76 $removeAll = kf.ControlElements.lookup(this, "removeAll", false); 77 $other = kf.ControlElements.lookup(this, "other", false); 78 $addOther = kf.ControlElements.lookup(this, "addOther", false); 79 80 var me = this; 81 82 $add.click(function(event) { 83 event.preventDefault(); 84 event.stopPropagation(); 85 me.handleAdd(); 86 var me = this; 87 var $dblSelect = this.getElement(); 88 89 var $available = kf.ControlElements.lookup(this, "available"); 90 var $selected = kf.ControlElements.lookup(this, "selected"); 91 var $add = kf.ControlElements.lookup(this, "add"); 92 var $remove = kf.ControlElements.lookup(this, "remove"); 93 94 var $addAll = kf.ControlElements.lookup(this, "addAll"); 95 var $removeAll = kf.ControlElements.lookup(this, "removeAll"); 96 97 var $other = kf.ControlElements.lookup(this, "other"); 98 var $addOther = kf.ControlElements.lookup(this, "addOther"); 99 100 if (this.showAddAll){ 101 $addAll.click(function(event) { 102 event.preventDefault(); 103 event.stopPropagation(); 104 me.handleAddAll(); 86 105 }); 87 88 $available.keypress(function(event) { 89 // Ctrl + key right 90 if (event.ctrlKey && event.keyCode == 39) { 91 me.handleAdd(); 92 } 106 } else { 107 $addAll.remove(); 108 } 109 if (this.showRemoveAll) { 110 $removeAll.click(function(event) { 111 event.preventDefault(); 112 event.stopPropagation(); 113 me.handleRemoveAll(); 93 114 }); 94 95 $available.dblclick(function() { 96 me.handleAdd(); 115 } else { 116 $removeAll.remove(); 117 } 118 119 if (this.showAddOther && $other && $addOther) { 120 $other.keypress(function(event) { 121 if (event.keyCode == 13) { 122 event.preventDefault(); 123 event.stopPropagation(); 124 me.handleAddOther(); 125 } 97 126 }); 98 99 $remove.click(function(event) { 100 event.preventDefault(); 101 event.stopPropagation(); 102 me.handleRemove(); 127 128 $other.keyup(function(event) { 129 me.refreshAddOtherButtonState(); 103 130 }); 104 105 $selected.keypress(function(event) { 106 // Ctrl + key left 107 if (event.ctrlKey && event.keyCode == 37) { 108 me.handleRemove(); 109 } else if (event.keyCode == 46) { 110 // delete key 111 me.handleRemove(); 112 } 113 }) 114 115 $selected.dblclick(function() { 116 me.handleRemove(); 131 132 $addOther.click(function(event) { 133 event.preventDefault(); 134 event.stopPropagation(); 135 me.handleAddOther(); 117 136 }); 118 119 if ($addAll) { 120 $addAll.click(function(event) { 121 event.preventDefault(); 122 event.stopPropagation(); 123 me.handleAddAll(); 124 }); 125 } 126 127 if ($removeAll) { 128 $removeAll.click(function(event) { 129 event.preventDefault(); 130 event.stopPropagation(); 131 me.handleRemoveAll(); 132 }); 133 } 134 135 $available.change(function() { 136 me.refreshButtonsState(); 137 }); 138 139 $selected.change(function() { 140 me.refreshButtonsState(); 141 }); 142 143 if ($other && $addOther) { 144 $addOther.click(function(event) { 145 event.preventDefault(); 146 event.stopPropagation(); 147 me.handleAddOther(); 148 }); 149 150 $other.keypress(function(event) { 151 if (event.keyCode == 13) { 152 event.preventDefault(); 153 event.stopPropagation(); 154 me.handleAddOther(); 155 } 156 }) 157 158 $other.keyup(function(event) { 159 me.refreshAddOtherButtonState(); 160 }); 161 } 162 163 this.valueChanged(function() { 164 me.refreshSelectedSelect(); 165 me.refreshAvailableSelect(); 166 me.refreshButtonsState(); 167 }); 168 169 this.refreshAvailableSelect(); 170 this.refreshButtonsState(); 171 this.refreshAddOtherButtonState(); 172 } 137 } else { 138 $dblSelect.find('.addOtherContainer').remove(); 139 } 140 141 $add.click(function(event) { 142 event.preventDefault(); 143 event.stopPropagation(); 144 me.handleAdd(); 145 }); 146 147 $available.keypress(function(event) { 148 // Ctrl + key right 149 if (event.ctrlKey && event.keyCode == 39) { 150 me.handleAdd(); 151 } 152 }); 153 154 $available.dblclick(function() { 155 me.handleAdd(); 156 }); 157 158 $remove.click(function(event) { 159 event.preventDefault(); 160 event.stopPropagation(); 161 me.handleRemove(); 162 }); 163 164 $selected.keypress(function(event) { 165 // Ctrl + key left 166 if (event.ctrlKey && event.keyCode == 37) { 167 me.handleRemove(); 168 } else if (event.keyCode == 46) { 169 // delete key 170 me.handleRemove(); 171 } 172 }) 173 174 $selected.dblclick(function() { 175 me.handleRemove(); 176 }); 177 178 $available.change(function() { 179 me.refreshButtonsState(); 180 }); 181 182 $selected.change(function() { 183 me.refreshButtonsState(); 184 }); 185 186 this.valueChanged(function() { 187 me.refreshSelectedSelect(); 188 me.refreshAvailableSelect(); 189 me.refreshButtonsState(); 190 }); 191 192 this.refreshAvailableSelect(); 193 this.refreshButtonsState(); 194 this.refreshAddOtherButtonState(); 195 } 173 196 174 197 DoubleSelectControl.prototype.readUserValue = function() { -
trunk/samples/kauri-forms-sample/src/main/kauri/pages/dblselect.html.xml
r1210 r1568 19 19 "options": { 20 20 "data": ["red", "green", "blue", "white", "black", "yellow", "purple"] 21 } 21 }, 22 "showRemoveAll": true, 23 "showAddAll": true 22 24 } 23 25 }, 24 26 "colors2": { 25 27 "base": "string", 26 "label": "Another colors select ",28 "label": "Another colors select (predefined HTML)", 27 29 "control": { 28 30 base: "dblselect-control", … … 34 36 "colors3": { 35 37 "base": "string", 36 "label": "Another colors select, with free input ",38 "label": "Another colors select, with free input (predefined HTML)", 37 39 "control": { 38 40 base: "dblselect-control", 39 41 "options": { 40 42 "data": ["red", "green", "blue", "white", "black", "yellow", "purple"] 41 } 43 }, 44 "showAddOther": true 42 45 } 43 46 }, 44 47 "numbers": { 45 48 "base": "integer", 46 "label": "Integers: a test with a non-string field type ",49 "label": "Integers: a test with a non-string field type (HTML auto-generated)", 47 50 "control": { 48 51 base: "dblselect-control", … … 50 53 "uri": "${publicUri('service:/main/randomlist')}", 51 54 "valueTemplate": "{value}" 52 } 55 }, 56 "showAddOther": true 53 57 } 54 58 }, 55 59 "carmakes": { 56 60 "base": "string", 57 "label": "Car makes: a test where values and labels are different ",61 "label": "Car makes: a test where values and labels are different (HTML auto-generated)", 58 62 "control": { 59 63 base: "dblselect-control", … … 93 97 <form id="dblselect-form" method="get" action=""> 94 98 <fieldset> 99 <dt><label kauri-role="label" kauri-idref="colors"/></dt> 100 <dd><div kauri-role="control" kauri-idref="colors"></div></dd> 101 95 102 <dt><label kauri-role="label" kauri-idref="colors2"/></dt> 96 103 <dd kauri-idref="colors2"> … … 149 156 150 157 <dt><label kauri-role="label" kauri-idref="numbers"/></dt> 151 <dd kauri-idref="numbers"> 152 <table style="width: auto"> 153 <tr> 154 <td>Available:</td> 155 <td/> 156 <td>Selected:</td> 157 </tr> 158 <tr> 159 <td style="vertical-align: top"> 160 <select kauri-role="available" size="6" style="width: 10em;" multiple="multiple"/> 161 <br/> 162 Other: 163 <br/> 164 <input kauri-role="other" size="10"/> 165 <button kauri-role="addOther">></button> 166 </td> 167 <td style="vertical-align: top"> 168 <button kauri-role="add">></button><br/> 169 <button kauri-role="addAll">>></button><br/><br/> 170 <button kauri-role="remove"><</button><br/> 171 <button kauri-role="removeAll"><<</button><br/> 172 </td> 173 <td style="vertical-align: top"> 174 <select kauri-role="selected" size="9" style="width: 10em;" multiple="multiple"/> 175 </td> 176 </tr> 177 </table> 178 </dd> 158 <dd><div kauri-role="control" kauri-idref="numbers"/></dd> 159 160 <dt><label kauri-role="label" kauri-idref="carmakes"/></dt> 161 <dd><div kauri-role="control" kauri-idref="carmakes"></div></dd> 179 162 180 163 </fieldset>
Note: See TracChangeset
for help on using the changeset viewer.