|
182
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
|
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
|
|
3 <head> |
|
|
4 <script src="jquery-2.1.0.js"></script> |
|
|
5 <script> |
|
|
6 %include riot.min.js |
|
|
7 </script> |
|
|
8 |
|
|
9 <style type="text/css"> |
|
|
10 span.no_selection { |
|
|
11 -webkit-user-select: none; // webkit (safari, chrome) browsers |
|
|
12 -moz-user-select: none; // mozilla browsers |
|
|
13 -khtml-user-select: none; // webkit (konqueror) browsers |
|
|
14 } |
|
|
15 |
|
|
16 body { |
|
|
17 font-family: "sans-serif"; |
|
|
18 } |
|
|
19 |
|
|
20 input { |
|
|
21 border: 2px solid transparent; |
|
|
22 border-radius: 4px; |
|
|
23 background-color: white; |
|
|
24 border-color: black; |
|
|
25 padding: 0; |
|
|
26 font-size: 80%; |
|
|
27 } |
|
|
28 |
|
|
29 input[type="button"] { |
|
|
30 width: 4em; |
|
|
31 height: 4em; |
|
|
32 margin-left: 0.5em; |
|
|
33 } |
|
|
34 |
|
|
35 input[type="submit"] { |
|
|
36 width: 10em; |
|
|
37 height: 4em; |
|
|
38 margin-top: 1em; |
|
|
39 align: center; |
|
|
40 } |
|
|
41 |
|
|
42 input[type="text"] { |
|
|
43 height: 4em; |
|
|
44 text-align: center; |
|
|
45 } |
|
|
46 |
|
|
47 .onbutton { |
|
|
48 background-color: #cdf; |
|
|
49 } |
|
|
50 |
|
|
51 .existing { |
|
|
52 margin-top: 1em; |
|
|
53 font-size: 70%; |
|
|
54 } |
|
|
55 |
|
|
56 </style> |
|
|
57 <title>Set templog</title> |
|
|
58 </head> |
|
|
59 |
|
|
60 <body> |
|
|
61 |
|
|
62 <section id="paramlist"> |
|
|
63 </div> |
|
|
64 |
|
|
65 </body> |
|
|
66 |
|
|
67 <script type="html/num_input"> |
|
|
68 <div id="{id}"> |
|
|
69 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span>{unit}</span> |
|
|
70 <br/> |
|
|
71 <input type="text" id="input" name="input_{name}" /> |
|
|
72 <!-- |
|
|
73 <input type="button" class="button_down" id="down" name="down_{name}" value="-" "/> |
|
|
74 <input type="button" class="button_up" id="up" name="up_{name}" value="+" "/> |
|
|
75 --> |
|
|
76 </div> |
|
|
77 </script> |
|
|
78 |
|
|
79 <script type="html/yesno_button"> |
|
|
80 <div id="{id}"> |
|
|
81 <span class="existing">{title} <span id="existing_{name}">{oldvalue}</span></span> |
|
|
82 <br/> |
|
|
83 <input type="button" class="button_no" id="no_{name}" name="no_{name}" value="No"/> |
|
|
84 <input type="button" class="button_yes" id="yes_{name}" name="yes_{name}" value="Yes"/> |
|
|
85 </div> |
|
|
86 </script> |
|
|
87 |
|
|
88 <script> |
|
|
89 |
|
|
90 function Setter(params) { |
|
|
91 var self = $.observable(this); |
|
|
92 |
|
|
93 self.params = params; |
|
|
94 |
|
|
95 $.each(self.params, function(idx, param) { |
|
|
96 param.id = "param_id_" + idx; |
|
|
97 }); |
|
|
98 |
|
|
99 self.edit = function(param) { |
|
|
100 params[param.name] = param; |
|
|
101 self.trigger("edit", param); |
|
|
102 } |
|
|
103 |
|
|
104 self.adjust = function(param, updown) { |
|
|
105 // XXX increment |
|
|
106 self.trigger("edit", param); |
|
|
107 } |
|
|
108 |
|
|
109 } |
|
|
110 |
|
|
111 (function() { 'use strict'; |
|
|
112 |
|
|
113 var params = {{!inline_data}}; |
|
|
114 window.setter = new Setter(params); |
|
|
115 |
|
|
116 var root = $("#paramlist"); |
|
|
117 |
|
|
118 var number_template = $("[type='html/num_input']").html(); |
|
|
119 var button_template = $("[type='html/yesno_button']").html(); |
|
|
120 |
|
|
121 setter.on("add", add); |
|
|
122 setter.on("edit", function(param) |
|
|
123 { |
|
|
124 var el = $("#" + param.id); |
|
|
125 if (param.kind === "number") |
|
|
126 { |
|
|
127 $(".input", el).text(param.value).value(param.value); |
|
|
128 } |
|
|
129 else if (param.kind === "yesno") |
|
|
130 { |
|
|
131 set_state(el, param.value); |
|
|
132 } |
|
|
133 }) |
|
|
134 |
|
|
135 $.route(function(hash) { |
|
|
136 |
|
|
137 // clear list and add new ones |
|
|
138 root.empty() && $.each(setter.params, function (idx, p) { |
|
|
139 add(p); |
|
|
140 }) |
|
|
141 }) |
|
|
142 |
|
|
143 function set_state(el, value) |
|
|
144 { |
|
|
145 var button_yes = $(".button_yes", el); |
|
|
146 var button_no = $(".button_no", el); |
|
|
147 if (value) |
|
|
148 { |
|
|
149 button_yes.addClass("onbutton"); |
|
|
150 button_no.removeClass("onbutton"); |
|
|
151 } |
|
|
152 else |
|
|
153 { |
|
|
154 button_no.addClass("onbutton"); |
|
|
155 button_yes.removeClass("onbutton"); |
|
|
156 } |
|
|
157 } |
|
|
158 |
|
|
159 function add(param) |
|
|
160 { |
|
|
161 if (param.kind === "number") |
|
|
162 { |
|
|
163 var el = $($.render(number_template, param)).appendTo(root); |
|
|
164 var input = $(".input", el); |
|
|
165 } |
|
|
166 else if (param.kind === "yesno") |
|
|
167 { |
|
|
168 var el = $($.render(button_template, param)).appendTo(root); |
|
|
169 var button_yes = $(".button_yes", el); |
|
|
170 var button_no = $(".button_no", el); |
|
|
171 |
|
|
172 button_yes.click(function() { |
|
|
173 param.value = true; |
|
|
174 setter.edit(param); |
|
|
175 }) |
|
|
176 |
|
|
177 button_no.click(function() { |
|
|
178 param.value = false; |
|
|
179 setter.edit(param); |
|
|
180 }) |
|
|
181 |
|
|
182 set_state(el, param.value); |
|
|
183 } |
|
|
184 } |
|
|
185 |
|
|
186 })() |
|
|
187 |
|
|
188 </script> |
|
|
189 |
|
|
190 </html> |
