dialog_gatom.html 12.2 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
            <td colspan="3">
              <label class="points"
                     data-i18n="[title]gatom.prop.labelpos_tt">

                <input class="label-pos"
                       type="radio"
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
112
                       id="labelpos_top"
113
                       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";
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
169
170
171
172
173
174
175

if (typeof(pdbundle) !== "undefined"){
    var pdgui = pdbundle.pdgui
  }else{
    var gui = require("nw.gui");
    var pdgui = require("./pdgui.js");
}
user's avatar
user committed
176

177
178
// For translations
var l = pdgui.get_local_string;
user's avatar
user committed
179

180
pdgui.skin.apply(window);
181

182
183
184
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
185

186
187
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
188
    return arg.split(" ").join(fake_space);
189
}
user's avatar
user committed
190

191
function strip_problem_chars(arg) {
192
    var problem_chars = [";", ",", "\\"];
193
194
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
195
        ret = ret.split(problem_chars[i]).join("");
user's avatar
user committed
196
    }
197
198
    return ret;
}
user's avatar
user committed
199

200
function gatom_escape(str) {
201
    var ret;
202
    if (str.length === 0) {
203
204
205
        ret = "-";
    } else if (str.slice(0,1) === "-") {
        ret = "-" + str;
206
    } else {
207
208
209
210
        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") {
211
                arr[i] = "#";
user's avatar
user committed
212
213
            }
        }
214
        ret = arr.join("");
215
216
217
    }
    return strip_problem_chars(ret);
}
user's avatar
user committed
218

219
function gatom_unescape(str) {
220
221
    if (str.slice(0,1) === "-") {
        str = str.slice(1);
222
223
224
225
226
227
228
229
230
231
232
233
234
    } 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;
}

235
236
237
238
function update_attr(elem) {
    new_attrs[elem.name] = elem.value;
}

239
240
241
242
function update_dropdown_outtype(elem) {
    new_attrs.outtype = elem.selectedIndex;
}

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

258
259
function cancel(revert_changes) {
    var dirty = false, attr;
260
    //window.close(true);
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
261
    if(pdgui.is_webapp()){
Prakhar Agarwal's avatar
Prakhar Agarwal committed
262
      $("#dialog-modal").modal("hide");
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
263
264
    }

265
266
267
268
269
270
271
272
273
274
    if (revert_changes) {
        for (attr in old_attrs) {
            if (old_attrs[attr] !== new_attrs[attr]) {
                dirty = true;
            }
        }
        if (dirty) {
            send_params(old_attrs, false);
        }
    }
275
    pdgui.pdsend(pd_object_callback, "cancel");
276
}
user's avatar
user committed
277

278
279
280
281
282
283
284
285
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();
286
287
    // send the old attrs first so we can set an undo point on them
    send_params(old_attrs, false);
288
289
290
291
    send_params(new_attrs, true);
    cancel(false);
}

292
293
294
// 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
295
function register_window_id(gfxstub, attributes) {
296
    var attr;
297
298
    pd_object_callback = gfxstub;
    add_events(gfxstub);
299
300
301
302
303
304

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

305
    translate_form();
306
    populate_form(attributes);
307

308
309
310
311
312
    // hide outtype select for "dropdown", or draglo/hi for "gatom"
    document.querySelector(attributes.name === "atom" ? ".outtype" : ".draglo")
        .style.setProperty("display", "none");


313
314
315
316
317
318
319
320
321
322
323
    // 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];
        }
    }
324

325
    old_attrs = attributes;
326
327
328
329
    // 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.
330
331
    document.getElementsByClassName("container")[0]
        .style.setProperty("display", "inline");
332
    pdgui.resize_window(pd_object_callback);
333
}
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
334
window.register_dialog = register_window_id;
user's avatar
user committed
335
336

function tr_text(id) {
337
338
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
user's avatar
user committed
339
340
341
342
343
}

// Stop-gap translator
function translate_form() {
    var i
344
    var elements = document.querySelectorAll("[data-i18n]");
user's avatar
user committed
345
346
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
347
        if (data.slice(0,7) === "[title]") {
user's avatar
user committed
348
349
350
351
352
353
354
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

355
356
357
function get_attr(name, attrs) {
    return attrs[attrs.indexOf(name)+1];
}
user's avatar
user committed
358

359
360
361
function get_elem(name) {
    return document.getElementById(name);
}
user's avatar
user committed
362

363
function populate_form(attributes) {
364
    var label, snd, rcv, labelpos, i, radios;
365
    get_elem("width").value = attributes.width;
366
367
368
369
370
371
    if (attributes.name === "atom") {
        get_elem("draglo").value = attributes.draglo;
        get_elem("draghi").value = attributes.draghi;
    } else {
        get_elem("outtype_select").selectedIndex = attributes.outtype;
    }
372
    label = attributes.label;
373
    get_elem("label").value = gatom_unescape(label);
374
    snd = attributes.send_symbol;
375
    get_elem("send_symbol").value = gatom_unescape(snd);
376
    rcv = attributes.receive_symbol;
377
    get_elem("receive_symbol").value = gatom_unescape(rcv);
378

379
    labelpos = attributes.labelpos;
380
    radios = document.getElementsByName("labelpos");
381
382
383
    for (i = 0; i < radios.length; i++) {
        if (+radios[i].value === labelpos) {
            radios[i].checked = true;
user's avatar
user committed
384
385
386
387
388
389
        }
    }
}

function add_events(name) {
    // closing the Window
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
390
391
392
393
394
395
    if(!pdgui.is_webapp()){
        gui.Window.get().on("close", function() {
            // this needs to do whatever the "cancel" button does
            cancel(false);
        });
    }
396
    pdgui.dialog_bindings(name);
Prakhar Agarwal's avatar
Prakhar Agarwal committed
397
398
399
400
401
402
    if (pdgui.is_webapp) {
      $("#dialog-modal").on("hidden.bs.modal", function (e) {
        remove_dialog(pd_object_callback)
        $("#dialog-modal").off("hidden.bs.modal")
      })
    }
user's avatar
user committed
403
404
405
406
407
}

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