Mercurial > templog

comparison web/views/set.tpl @ 182:e731c0d30b09

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
set nearly working
author Matt Johnston <matt@ucc.asn.au>
date Tue, 04 Feb 2014 22:49:16 +0800
parents
children 177f616893e6
comparison
equal deleted inserted replaced
180:15ebb9de5049 182:e731c0d30b09
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>