Mercurial > templog
comparison web/views/set.tpl @ 184:cbe14244a372
a few fixes
author | Matt Johnston <matt@ucc.asn.au> |
---|---|
date | Thu, 06 Feb 2014 20:35:43 +0800 |
parents | 177f616893e6 |
children | adbf70d1449f |
comparison
equal
deleted
inserted
replaced
183:177f616893e6 | 184:cbe14244a372 |
---|---|
48 | 48 |
49 .onbutton { | 49 .onbutton { |
50 background-color: #cdf; | 50 background-color: #cdf; |
51 } | 51 } |
52 | 52 |
53 .modified { | |
54 color: #d00; | |
55 font-weight: bold; | |
56 } | |
57 | |
53 .existing { | 58 .existing { |
54 margin-top: 1em; | 59 margin-top: 1em; |
55 font-size: 70%; | 60 font-size: 70%; |
56 } | 61 } |
57 | 62 |
71 | 76 |
72 </body> | 77 </body> |
73 | 78 |
74 <script type="html/num_input"> | 79 <script type="html/num_input"> |
75 <div id="{id}"> | 80 <div id="{id}"> |
76 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span>{unit}</span> | 81 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}{unit}</span></span> |
77 <br/> | 82 <br/> |
78 <input type="text" class="input" name="input_{name}" /> | 83 <input type="text" class="input" name="input_{name}" /> |
79 <input type="button" class="button_down" value="-"/> | 84 <input type="button" class="button_down" value="-"/> |
80 <input type="button" class="button_up" value="+"/> | 85 <input type="button" class="button_up" value="+"/> |
81 </div> | 86 </div> |
82 </script> | 87 </script> |
83 | 88 |
84 <script type="html/yesno_button"> | 89 <script type="html/yesno_button"> |
85 <div id="{id}"> | 90 <div id="{id}"> |
86 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span></span> | 91 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}</span></span> |
87 <br/> | 92 <br/> |
88 <input type="button" class="button_no" value="No"/> | 93 <input type="button" class="button_no" value="No"/> |
89 <input type="button" class="button_yes" value="Yes"/> | 94 <input type="button" class="button_yes" value="Yes"/> |
90 </div> | 95 </div> |
91 </script> | 96 </script> |
97 | 102 |
98 self.params = params; | 103 self.params = params; |
99 | 104 |
100 $.each(self.params, function(idx, param) { | 105 $.each(self.params, function(idx, param) { |
101 param.id = "param_id_" + idx; | 106 param.id = "param_id_" + idx; |
102 param.oldvalue = param.value; | 107 param.oldvalue = param.value |
108 if (typeof(param.oldvalue) == "boolean") | |
109 { | |
110 param.oldvaluetext = param.oldvalue ? "Yes" : "No"; | |
111 } | |
112 else | |
113 { | |
114 param.oldvaluetext = param.oldvalue; | |
115 } | |
103 }); | 116 }); |
104 | 117 |
105 self.edit = function(param) { | 118 self.edit = function(param, newvalue) { |
119 param.value = newvalue; | |
106 params[param.name] = param; | 120 params[param.name] = param; |
107 self.trigger("edit", param); | 121 self.trigger("edit", param); |
108 } | 122 } |
109 | 123 |
110 self.adjust = function(param, updown) { | 124 self.adjust = function(param, updown) { |
134 setter.on("edit", function(param) | 148 setter.on("edit", function(param) |
135 { | 149 { |
136 var el = $("#" + param.id); | 150 var el = $("#" + param.id); |
137 if (param.kind === "number") | 151 if (param.kind === "number") |
138 { | 152 { |
139 set_text_state(el, param.value); | 153 set_text_state(el, param); |
140 } | 154 } |
141 else if (param.kind === "yesno") | 155 else if (param.kind === "yesno") |
142 { | 156 { |
143 set_button_state(el, param.value); | 157 set_button_state(el, param.value); |
144 } | 158 } |
159 var same; | |
160 switch (typeof(param.oldvalue)) | |
161 { | |
162 case "boolean": | |
163 same = ((!param.value) == (!param.oldvalue)); | |
164 break; | |
165 case "number": | |
166 same = Math.abs(param.value - param.oldvalue) < 1e-3 * param.amount; | |
167 break; | |
168 default: | |
169 same = (param.value === param.oldvalue); | |
170 } | |
171 | |
172 $("#oldvalue", el).toggleClass("modified", !same); | |
145 }); | 173 }); |
146 | 174 |
147 setter.on("saved", function(j) { | 175 setter.on("saved", function(j) { |
148 $("#jsontest").text(j); | 176 $("#jsontest").text(j); |
149 }); | 177 }); |
160 setter.save(); | 188 setter.save(); |
161 }) | 189 }) |
162 }) | 190 }) |
163 }) | 191 }) |
164 | 192 |
165 function set_text_state(el, value) | 193 function set_text_state(el, param) |
166 { | 194 { |
167 var input = $(".input", el); | 195 var input = $(".input", el); |
168 input.text(value).val(value) | 196 var s = Number(param.value).toFixed(param.digits) |
197 input.text(s).val(s) | |
169 } | 198 } |
170 | 199 |
171 function set_button_state(el, value) | 200 function set_button_state(el, value) |
172 { | 201 { |
173 var button_yes = $(".button_yes", el); | 202 $(".button_yes", el).toggleClass("onbutton", value); |
174 var button_no = $(".button_no", el); | 203 $(".button_no", el).toggleClass("onbutton", !value); |
175 if (value) | |
176 { | |
177 button_yes.addClass("onbutton"); | |
178 button_no.removeClass("onbutton"); | |
179 } | |
180 else | |
181 { | |
182 button_no.addClass("onbutton"); | |
183 button_yes.removeClass("onbutton"); | |
184 } | |
185 } | 204 } |
186 | 205 |
187 function add(param) | 206 function add(param) |
188 { | 207 { |
189 if (param.kind === "number") | 208 if (param.kind === "number") |
192 var input = $(".input", el); | 211 var input = $(".input", el); |
193 | 212 |
194 input.keyup(function(e) { | 213 input.keyup(function(e) { |
195 if (e.which == 13) | 214 if (e.which == 13) |
196 { | 215 { |
197 param.value = Number(this.value); | 216 setter.edit(param, Number(this.value)); |
198 setter.edit(param); | |
199 } | 217 } |
218 }); | |
219 | |
220 input.blur(function(e) { | |
221 setter.edit(param, Number(this.value)); | |
200 }); | 222 }); |
201 | 223 |
202 $(".button_up", el).click(function() { | 224 $(".button_up", el).click(function() { |
203 setter.adjust(param, 1); | 225 setter.adjust(param, 1); |
226 this.blur() | |
204 }); | 227 }); |
205 $(".button_down", el).click(function() { | 228 $(".button_down", el).click(function() { |
206 setter.adjust(param, -1); | 229 setter.adjust(param, -1); |
207 }); | 230 this.blur() |
208 | 231 }); |
209 set_text_state(el, param.value); | 232 |
233 set_text_state(el, param); | |
210 } | 234 } |
211 else if (param.kind === "yesno") | 235 else if (param.kind === "yesno") |
212 { | 236 { |
213 var el = $($.render(button_template, param)).appendTo(root); | 237 var el = $($.render(button_template, param)).appendTo(root); |
214 var button_yes = $(".button_yes", el); | 238 var button_yes = $(".button_yes", el); |
215 var button_no = $(".button_no", el); | 239 var button_no = $(".button_no", el); |
216 | 240 |
217 button_yes.click(function() { | 241 button_yes.click(function() { |
218 param.value = true; | 242 setter.edit(param, true); |
219 setter.edit(param); | 243 this.blur() |
220 }) | 244 }) |
221 | 245 |
222 button_no.click(function() { | 246 button_no.click(function() { |
223 param.value = false; | 247 setter.edit(param, false); |
224 setter.edit(param); | 248 this.blur() |
225 }) | 249 }) |
226 | 250 |
227 set_button_state(el, param.value); | 251 set_button_state(el, param.value); |
228 } | 252 } |
229 } | 253 } |