3 var PE = PixasticEditor;
5 function makeSlider(label, id, min, max, step, defaultVal, onChange) {
6 var $ctr = $j("<div></div>", PE.getDocument())
7 .addClass("ui-slider-container");
9 var $label = $j("<label></label>", PE.getDocument())
10 .addClass("ui-slider-label")
11 .attr("for", "input-slider-" + id)
15 var $value = $j("<div></div>", PE.getDocument())
16 .addClass("ui-slider-value")
19 var $valueField = $j("<input type='hidden'>", PE.getDocument())
20 .attr("id", "input-hidden-" + id)
24 var performOnChange = true;
26 var $slider = $j("<div class='ui-slider'><div class='ui-slider-handle'></div><div class='ui-slider-range'></div></div>", PE.getDocument())
28 .attr("id", "input-slider-" + id)
31 $value.html($j(this).slider("value"));
32 $valueField.val($j(this).slider("value"));
35 $value.html($j(this).slider("value"));
36 $valueField.val($j(this).slider("value"));
37 if (onChange && performOnChange)
46 $value.appendTo($ctr);
53 valueField : $valueField,
55 performOnChange = false;
56 $value.html(defaultVal());
57 $valueField.val(defaultVal());
58 $slider.slider("value", defaultVal());
59 performOnChange = true;
64 function makeCheckbox(label, id, defaultVal, onChange) {
65 var $ctr = $j("<div></div>", PE.getDocument())
66 .addClass("ui-checkbox-container");
68 var $label = $j("<label></label>", PE.getDocument())
69 .addClass("ui-checkbox-label")
70 .attr("for", "input-checkbox-" + id)
74 var $valueField = $j("<input type='hidden'>", PE.getDocument())
75 .attr("id", "input-hidden-" + id)
79 var performOnChange = true;
81 var $checkbox = $j("<input type=\"checkbox\"></input>", PE.getDocument())
82 .addClass("ui-checkbox")
83 .attr("id", "input-checkbox-" + id)
84 .attr("checked", defaultVal())
87 $valueField.val(this.checked);
88 if (onChange && performOnChange)
96 valueField : $valueField,
98 performOnChange = false;
99 $checkbox.attr("checked", defaultVal());
100 $valueField.val(defaultVal());
101 performOnChange = true;
106 function makeSelect(label, id, values, defaultVal, onChange) {
107 var $ctr = $j("<div></div>", PE.getDocument())
108 .addClass("ui-select-container");
110 var $label = $j("<label></label>", PE.getDocument())
111 .addClass("ui-checkbox-label")
112 .attr("for", "input-checkbox-" + id)
116 var $valueField = $j("<input type='hidden'>", PE.getDocument())
117 .attr("id", "input-hidden-" + id)
121 var selectHtml = "<select>";
122 for (var i=0;i<values.length;i++) {
123 selectHtml += "<option value='" + values[i].value + "' "
124 + (defaultVal() == values[i].value ? "selected" : "")
125 + ">" + values[i].name + "</option>";
127 selectHtml += "</select>";
129 var $select = $j(selectHtml).appendTo($ctr);
131 var performOnChange = true;
135 $valueField.val(this.options[this.selectedIndex].value);
136 if (onChange && performOnChange)
145 valueField : $valueField,
147 performOnChange = false;
148 var defVal = defaultVal();
150 $valueField.val(defVal);
151 performOnChange = true;
156 function makeNumericInput(label, labelRight, id, min, max, step, defaultVal, onChange) {
157 var $ctr = $j("<div></div>", PE.getDocument())
158 .addClass("ui-textinput-container");
160 var $label = $j("<label></label>", PE.getDocument())
161 .addClass("ui-textinput-label")
162 .attr("for", "input-numeric-" + id)
166 var $valueField = $j("<input type='hidden'>", PE.getDocument())
167 .attr("id", "input-hidden-" + id)
171 var performOnChange = true;
173 function setVal(val) {
174 val = Math.min(max, val);
175 val = Math.max(min, val);
177 $valueField.val(val);
180 var $textInput = $j("<input type=\"text\"></input>", PE.getDocument())
181 .addClass("ui-textinput")
182 .addClass("ui-numericinput")
185 .attr("id", "input-numeric-" + id)
187 var val = parseFloat(this.value);
189 if (onChange && performOnChange)
192 .keydown(function(e) {
193 var val = parseFloat($j(this).val());
194 if (e.keyCode == 38) { // up
197 if (e.keyCode == 40) { // down
203 var $labelRight = $j("<label></label>", PE.getDocument())
204 .addClass("ui-textinput-label-right")
212 textinput : $textInput,
213 valueField : $valueField,
215 performOnChange = false;
216 setVal(defaultVal());
217 performOnChange = true;
222 function makeButton(text) {
223 var $button = $j("<button></button>", PE.getDocument()).html(text);
229 makeSlider : makeSlider,
230 makeCheckbox : makeCheckbox,
231 makeNumericInput : makeNumericInput,
232 makeSelect : makeSelect,
233 makeButton : makeButton
236 })(PixasticEditor.jQuery);