dialog_gatom.html 11.8 KB
Newer Older
user's avatar
user committed
1
2
3
<!DOCTYPE html>
<html>
  <head>
4
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
user's avatar
user committed
5
  </head>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
6
  <body class="dialog_body">
user's avatar
user committed
7
8
9
    <div class="container">
    <form> 
      <fieldset> 
10
        <legend id="dialog_header"></legend>
user's avatar
user committed
11
12

        <table class="pairs">
13
          <tr class="width prop">
user's avatar
user committed
14
            <td>
15
16
              <label data-i18n="[title]gatom.prop.width_tt"> 
                <span data-i18n="gatom.prop.width"></span>
user's avatar
user committed
17
18
              </label>
            </td>
19
            <td data-i18n="[title]gatom.prop.width_tt">
20
21
              <input type="text" id="width" name="width"
                     onchange="update_attr(this)">
user's avatar
user committed
22
23
24
            </td>
            <td>
            </td>
25
            <td>
user's avatar
user committed
26
27
            </td>
          </tr>
28
          <tr class="draglo prop pair">
user's avatar
user committed
29
30
31
32
33
34
            <td>
              <label data-i18n="[title]iem.prop.minimum_tt">
                <span data-i18n="iem.prop.minimum"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.minimum_tt">
35
36
              <input type="text" id="draglo" name="draglo"
                     onchange="update_attr(this)">
user's avatar
user committed
37
38
39
40
41
42
43
            </td>
            <td>
              <label data-i18n="[title]iem.prop.maximum_tt">
                <span data-i18n="iem.prop.maximum"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.maximum_tt">
44
45
              <input type="text" id="draghi" name="draghi"
                     onchange="update_attr(this)">
user's avatar
user committed
46
47
            </td>
          </tr>
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

          <tr class="outtype prop">
            <td>
              <label data-i18n="[title]gatom.prop.dropdown_outtype_tt">
                <span data-i18n="gatom.prop.dropdown_outtype"></span>
              </label>
            </td>
            <td colspan="3"
                data-i18n="[title]gatom.prop.dropdown_outtype_tt">
              <select id="outtype_select"
                      onchange="update_dropdown_outtype(this);">
                <option>index</option>
                <option>value</option>
              </select>
            </td>
          </tr>
64
          <tr>
user's avatar
user committed
65
66
67
68
69
            <td>
              <label data-i18n="[title]iem.prop.send_tt">
                <span data-i18n="iem.prop.send"></span>
              </label>
            </td>
70
71
            <td colspan="3"
                data-i18n="[title]iem.prop.send_tt">
72
              <input type="text" id="send_symbol" name="send_symbol"
73
                     onchange="update_attr(this);">
user's avatar
user committed
74
            </td>
75
76
          </tr>
          <tr>
user's avatar
user committed
77
78
79
80
81
            <td>
              <label data-i18n="[title]iem.prop.receive_tt">
                <span data-i18n="iem.prop.receive"></span>
              </label>
            </td>
82
83
            <td colspan="3"
                data-i18n="[title]iem.prop.receive_tt">
84
85
            <input type="text" id="receive_symbol" name="receive_symbol"
                   onchange="update_attr(this);">
user's avatar
user committed
86
87
            </td>
          </tr>
88
          <tr>
user's avatar
user committed
89
            <td>
90
91
              <label data-i18n="[title]gatom.prop.label_tt">
                <span data-i18n="gatom.prop.label"></span>
user's avatar
user committed
92
93
              </label>
            </td>
94
95
            <td colspan="3"
                data-i18n="[title]gatom.prop.label_tt">
96
97
              <input type="text" id="label" name="label"
                     onchange="update_attr(this)">
user's avatar
user committed
98
            </td>
99
100
          </tr>
          <tr>
user's avatar
user committed
101
            <td>
102
103
104
              <label data-i18n="[title]gatom.prop.labelpos_tt">
                <span data-i18n="gatom.prop.labelpos"></span>
              </label> 
user's avatar
user committed
105
            </td>
106
107
108
109
110
111
112
113
            <td colspan="3">
              <label class="points"
                     data-i18n="[title]gatom.prop.labelpos_tt">

                <input class="label-pos"
                       type="radio"
                       id="labelpos_left"
                       value="2"
114
115
                       name="labelpos"
                       onchange="update_attr(this)">
116
117
118
119
120
121
122
123
                <span data-i18n="gatom.prop.label_top"></span>

                <br/>

                <input class="array-style"
                       type="radio"
                       id="labelpos_left"
                       value="0"
124
125
                       name="labelpos"
                       onchange="update_attr(this)">
126
127
                <span data-i18n="gatom.prop.label_left"></span>

128
129
130
131
132
133
134
                <input class="array-style"
                       type="radio"
                       id="labelpos_right"
                       value="1"
                       name="labelpos"
                       onchange="update_attr(this)">
                <span data-i18n="gatom.prop.label_right"></span>
135

136
                <br/>
137

138
139
140
141
142
143
144
                <input class="array-style"
                       type="radio"
                       id="labelpos_bottom"
                       value="3"
                       name="labelpos"
                       onchange="update_attr(this)">
                <span data-i18n="gatom.prop.label_bottom"></span>
145

146
              </label>
147

user's avatar
user committed
148
        </table>
149

user's avatar
user committed
150
151
152
153
154
155
156
157
158
      </fieldset> 

    <div class="submit_buttons">
      <button type="button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
        <span data-i18n="iem.prop.ok"></span>
      </button>
      <button type="button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
        <span data-i18n="iem.prop.apply"></span>
      </button>
159
      <button type="button" onClick="cancel(true)" data-i18n="[title]iem.prop.cancel_tt">
user's avatar
user committed
160
161
162
163
164
165
166
167
        <span data-i18n="iem.prop.cancel"></span>
      </button>
    </div>

  </form> 
  </div>      

  <script>
168
"use strict";
169
var gui = require("nw.gui");
170
var pdgui = require("./pdgui.js");
user's avatar
user committed
171

172
173
// For translations
var l = pdgui.get_local_string;
user's avatar
user committed
174

175
pdgui.skin.apply(window);
176

177
178
179
var pd_object_callback,
    old_attrs = {}, // original state. Used if we cancel the dialog
    new_attrs = {}; // changed state. Used if we apply or click "Ok"
user's avatar
user committed
180

181
182
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
183
    return arg.split(" ").join(fake_space);
184
}
user's avatar
user committed
185

186
function strip_problem_chars(arg) {
187
    var problem_chars = [";", ",", "\\"];
188
189
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
190
        ret = ret.split(problem_chars[i]).join("");
user's avatar
user committed
191
    }
192
193
    return ret;
}
user's avatar
user committed
194

195
function gatom_escape(str) {
196
    var ret;
197
    if (str.length === 0) {
198
199
200
        ret = "-";
    } else if (str.slice(0,1) === "-") {
        ret = "-" + str;
201
    } else {
202
203
204
205
        var arr = str.split("");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === "$" && i+1 < arr.length &&
                arr[i+1] >= "0" && arr[i+1] <= "9") {
206
                arr[i] = "#";
user's avatar
user committed
207
208
            }
        }
209
        ret = arr.join("");
210
211
212
    }
    return strip_problem_chars(ret);
}
user's avatar
user committed
213

214
function gatom_unescape(str) {
215
216
    if (str.slice(0,1) === "-") {
        str = str.slice(1);
217
218
219
220
221
222
223
224
225
226
227
228
229
    } else {
        var arr = str.split("");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === "#" && i+1 < arr.length &&
                arr[i+1] >= "0" && arr[i+1] <= "9") {
                arr[i] = "$";
            }
        }
        str = arr.join("");
    }
    return str;
}

230
231
232
233
function update_attr(elem) {
    new_attrs[elem.name] = elem.value;
}

234
235
236
237
function update_dropdown_outtype(elem) {
    new_attrs.outtype = elem.selectedIndex;
}

238
239
function send_params(attrs, create_undo_point) {
    //pdgui.post("we're applying gatom changes!");
240
    var gatom = attrs.name === "atom";
241
    pdgui.pdsend(pd_object_callback, "param",
242
        +attrs.width,
243
244
        gatom ? +attrs.draglo : +attrs.outtype,
        gatom ? +attrs.draghi : 0,
245
246
247
248
249
        gatom_escape(attrs.label),
        +attrs.labelpos,
        gatom_escape(attrs.receive_symbol),
        gatom_escape(attrs.send_symbol),
        create_undo_point ? 1 : 0
250
    );
251
}
user's avatar
user committed
252

253
254
function cancel(revert_changes) {
    var dirty = false, attr;
255
    //window.close(true);
256
257
258
259
260
261
262
263
264
265
    if (revert_changes) {
        for (attr in old_attrs) {
            if (old_attrs[attr] !== new_attrs[attr]) {
                dirty = true;
            }
        }
        if (dirty) {
            send_params(old_attrs, false);
        }
    }
266
    pdgui.pdsend(pd_object_callback, "cancel");
267
}
user's avatar
user committed
268

269
270
271
272
273
274
275
276
function apply() {
    send_params(new_attrs, false);
}

function ok() {
    // Steal focus from any active input to make sure it triggers an
    // onchange event
    document.querySelector("button").focus();
277
278
    // send the old attrs first so we can set an undo point on them
    send_params(old_attrs, false);
279
280
281
282
    send_params(new_attrs, true);
    cancel(false);
}

283
284
285
// This gets called from the nw_create_window function in index.html
// It provides us with our window id from the C side.  Once we have it
// we can create the menu and register event callbacks
286
function register_window_id(gfxstub, attributes) {
287
    var attr;
288
289
    pd_object_callback = gfxstub;
    add_events(gfxstub);
290
291
292
293
294
295

    // before translating, set the header based on class name:
    document.querySelector("#dialog_header")
        .setAttribute("data-i18n", "gatom.prop." +
            (attributes.name === "dropdown" ? "dropdown" : "gatom"));

296
    translate_form();
297
    populate_form(attributes);
298

299
300
301
302
303
    // hide outtype select for "dropdown", or draglo/hi for "gatom"
    document.querySelector(attributes.name === "atom" ? ".outtype" : ".draglo")
        .style.setProperty("display", "none");


304
305
306
307
308
309
310
311
312
313
314
    // Hack... change incoming "-" to empty string
    if (attributes.label === "-") { attributes.label = ""; }
    if (attributes.send_symbol === "-") { attributes.send_symbol= ""; }
    if (attributes.receive_symbol === "-") { attributes.receive_symbol = ""; }

    // Initialize the new_attrs to the current ones
    for (attr in attributes) {
        if (attributes.hasOwnProperty(attr)) {
            new_attrs[attr] = attributes[attr];
        }
    }
315

316
    old_attrs = attributes;
317
318
319
320
    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
    // labels and form elements.  That makes it more efficient and
    // snappier, at least on older machines.
321
322
    document.getElementsByClassName("container")[0]
        .style.setProperty("display", "inline");
323
    pdgui.resize_window(pd_object_callback);
324
}
user's avatar
user committed
325
326

function tr_text(id) {
327
328
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
user's avatar
user committed
329
330
331
332
333
}

// Stop-gap translator
function translate_form() {
    var i
334
    var elements = document.querySelectorAll("[data-i18n]");
user's avatar
user committed
335
336
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
337
        if (data.slice(0,7) === "[title]") {
user's avatar
user committed
338
339
340
341
342
343
344
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

345
346
347
function get_attr(name, attrs) {
    return attrs[attrs.indexOf(name)+1];
}
user's avatar
user committed
348

349
350
351
function get_elem(name) {
    return document.getElementById(name);
}
user's avatar
user committed
352

353
function populate_form(attributes) {
354
    var label, snd, rcv, labelpos, i, radios;
355
    get_elem("width").value = attributes.width;
356
357
358
359
360
361
    if (attributes.name === "atom") {
        get_elem("draglo").value = attributes.draglo;
        get_elem("draghi").value = attributes.draghi;
    } else {
        get_elem("outtype_select").selectedIndex = attributes.outtype;
    }
362
    label = attributes.label;
363
    get_elem("label").value = gatom_unescape(label);
364
    snd = attributes.send_symbol;
365
    get_elem("send_symbol").value = gatom_unescape(snd);
366
    rcv = attributes.receive_symbol;
367
    get_elem("receive_symbol").value = gatom_unescape(rcv);
368

369
    labelpos = attributes.labelpos;
370
    radios = document.getElementsByName("labelpos");
371
372
373
    for (i = 0; i < radios.length; i++) {
        if (+radios[i].value === labelpos) {
            radios[i].checked = true;
user's avatar
user committed
374
375
376
377
378
379
        }
    }
}

function add_events(name) {
    // closing the Window
380
    gui.Window.get().on("close", function() {
user's avatar
user committed
381
        // this needs to do whatever the "cancel" button does
382
        cancel(false);
user's avatar
user committed
383
    });
384
    pdgui.dialog_bindings(name);
user's avatar
user committed
385
386
387
388
389
}

  </script>
  </body>
</html>