dialog_gatom.html 10.5 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
10
11
12
    <div class="container">
    <form> 
      <fieldset> 
        <legend data-i18n="gatom.prop.gatom"></legend> 

        <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
          <tr>
user's avatar
user committed
49
50
51
52
53
            <td>
              <label data-i18n="[title]iem.prop.send_tt">
                <span data-i18n="iem.prop.send"></span>
              </label>
            </td>
54
55
            <td colspan="3"
                data-i18n="[title]iem.prop.send_tt">
56
              <input type="text" id="send_symbol" name="send_symbol"
57
                     onchange="update_attr(this);">
user's avatar
user committed
58
            </td>
59
60
          </tr>
          <tr>
user's avatar
user committed
61
62
63
64
65
            <td>
              <label data-i18n="[title]iem.prop.receive_tt">
                <span data-i18n="iem.prop.receive"></span>
              </label>
            </td>
66
67
            <td colspan="3"
                data-i18n="[title]iem.prop.receive_tt">
68
69
            <input type="text" id="receive_symbol" name="receive_symbol"
                   onchange="update_attr(this);">
user's avatar
user committed
70
71
            </td>
          </tr>
72
          <tr>
user's avatar
user committed
73
            <td>
74
75
              <label data-i18n="[title]gatom.prop.label_tt">
                <span data-i18n="gatom.prop.label"></span>
user's avatar
user committed
76
77
              </label>
            </td>
78
79
            <td colspan="3"
                data-i18n="[title]gatom.prop.label_tt">
80
81
              <input type="text" id="label" name="label"
                     onchange="update_attr(this)">
user's avatar
user committed
82
            </td>
83
84
          </tr>
          <tr>
user's avatar
user committed
85
            <td>
86
87
88
              <label data-i18n="[title]gatom.prop.labelpos_tt">
                <span data-i18n="gatom.prop.labelpos"></span>
              </label> 
user's avatar
user committed
89
            </td>
90
91
92
93
94
95
96
97
            <td colspan="3">
              <label class="points"
                     data-i18n="[title]gatom.prop.labelpos_tt">

                <input class="label-pos"
                       type="radio"
                       id="labelpos_left"
                       value="2"
98
99
                       name="labelpos"
                       onchange="update_attr(this)">
100
101
102
103
104
105
106
107
                <span data-i18n="gatom.prop.label_top"></span>

                <br/>

                <input class="array-style"
                       type="radio"
                       id="labelpos_left"
                       value="0"
108
109
                       name="labelpos"
                       onchange="update_attr(this)">
110
111
                <span data-i18n="gatom.prop.label_left"></span>

112
113
114
115
116
117
118
                <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>
119

120
                <br/>
121

122
123
124
125
126
127
128
                <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>
129

130
              </label>
131

user's avatar
user committed
132
        </table>
133

user's avatar
user committed
134
135
136
137
138
139
140
141
142
      </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>
143
      <button type="button" onClick="cancel(true)" data-i18n="[title]iem.prop.cancel_tt">
user's avatar
user committed
144
145
146
147
148
149
150
151
        <span data-i18n="iem.prop.cancel"></span>
      </button>
    </div>

  </form> 
  </div>      

  <script>
152
"use strict";
153
var gui = require("nw.gui");
154
var pdgui = require("./pdgui.js");
user's avatar
user committed
155

156
157
// For translations
var l = pdgui.get_local_string;
user's avatar
user committed
158

159
pdgui.skin.apply(window);
160

161
162
163
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
164

165
166
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
167
    return arg.split(" ").join(fake_space);
168
}
user's avatar
user committed
169

170
function strip_problem_chars(arg) {
171
    var problem_chars = [";", ",", "\\"];
172
173
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
174
        ret = ret.split(problem_chars[i]).join("");
user's avatar
user committed
175
    }
176
177
    return ret;
}
user's avatar
user committed
178

179
function gatom_escape(str) {
180
    var ret;
181
    if (str.length === 0) {
182
183
184
        ret = "-";
    } else if (str.slice(0,1) === "-") {
        ret = "-" + str;
185
    } else {
186
187
188
189
        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") {
190
                arr[i] = "#";
user's avatar
user committed
191
192
            }
        }
193
        ret = arr.join("");
194
195
196
    }
    return strip_problem_chars(ret);
}
user's avatar
user committed
197

198
function gatom_unescape(str) {
199
200
    if (str.slice(0,1) === "-") {
        str = str.slice(1);
201
202
203
204
205
206
207
208
209
210
211
212
213
    } 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;
}

214
215
216
217
218
219
function update_attr(elem) {
    new_attrs[elem.name] = elem.value;
}

function send_params(attrs, create_undo_point) {
    //pdgui.post("we're applying gatom changes!");
220
    pdgui.pdsend(pd_object_callback, "param",
221
222
223
224
225
226
227
228
        +attrs.width,
        +attrs.draglo,
        +attrs.draghi,
        gatom_escape(attrs.label),
        +attrs.labelpos,
        gatom_escape(attrs.receive_symbol),
        gatom_escape(attrs.send_symbol),
        create_undo_point ? 1 : 0
229
    );
230
}
user's avatar
user committed
231

232
233
function cancel(revert_changes) {
    var dirty = false, attr;
234
    //window.close(true);
235
236
237
238
239
240
241
242
243
244
    if (revert_changes) {
        for (attr in old_attrs) {
            if (old_attrs[attr] !== new_attrs[attr]) {
                dirty = true;
            }
        }
        if (dirty) {
            send_params(old_attrs, false);
        }
    }
245
    pdgui.pdsend(pd_object_callback, "cancel");
246
}
user's avatar
user committed
247

248
249
250
251
252
253
254
255
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();
256
257
    // send the old attrs first so we can set an undo point on them
    send_params(old_attrs, false);
258
259
260
261
    send_params(new_attrs, true);
    cancel(false);
}

262
263
264
// 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
265
function register_window_id(gfxstub, attributes) {
266
    var attr;
267
268
269
    pd_object_callback = gfxstub;
    add_events(gfxstub);
    translate_form();
270
    populate_form(attributes);
271
272
273
274
275
276
277
278
279
280
281
282
283

    // 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];
        }
    }
    old_attrs = attributes;
284
285
286
287
    // 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.
288
289
    document.getElementsByClassName("container")[0]
        .style.setProperty("display", "inline");
290
    pdgui.resize_window(pd_object_callback);
291
}
user's avatar
user committed
292
293

function tr_text(id) {
294
295
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
user's avatar
user committed
296
297
298
299
300
}

// Stop-gap translator
function translate_form() {
    var i
301
    var elements = document.querySelectorAll("[data-i18n]");
user's avatar
user committed
302
303
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
304
        if (data.slice(0,7) === "[title]") {
user's avatar
user committed
305
306
307
308
309
310
311
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

312
313
314
function get_attr(name, attrs) {
    return attrs[attrs.indexOf(name)+1];
}
user's avatar
user committed
315

316
317
318
function get_elem(name) {
    return document.getElementById(name);
}
user's avatar
user committed
319

320
function populate_form(attributes) {
321
    var label, snd, rcv, labelpos, i, radios;
322
    get_elem("width").value = attributes.width;
323
324
    get_elem("draglo").value = attributes.draglo;
    get_elem("draghi").value = attributes.draghi;
325
    label = attributes.label;
326
    get_elem("label").value = gatom_unescape(label);
327
    snd = attributes.send_symbol;
328
    get_elem("send_symbol").value = gatom_unescape(snd);
329
    rcv = attributes.receive_symbol;
330
    get_elem("receive_symbol").value = gatom_unescape(rcv);
331

332
    labelpos = attributes.labelpos;
333
    radios = document.getElementsByName("labelpos");
334
335
336
    for (i = 0; i < radios.length; i++) {
        if (+radios[i].value === labelpos) {
            radios[i].checked = true;
user's avatar
user committed
337
338
339
340
341
342
        }
    }
}

function add_events(name) {
    // closing the Window
343
    gui.Window.get().on("close", function() {
user's avatar
user committed
344
        // this needs to do whatever the "cancel" button does
345
        cancel(false);
user's avatar
user committed
346
    });
347
    pdgui.dialog_bindings(name);
user's avatar
user committed
348
349
350
351
352
}

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