dialog_canvas.html 26.5 KB
Newer Older
1
2
3
<!DOCTYPE html>
<html>
  <head>
4
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
5
    <title>Pd Preferences</title>
6
7
8
9
10
  </head>
  <body>
    <div class="container noselect">
    <form> 

11
      <fieldset class="canvas"> 
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
        <legend data-i18n="canvas.prop.heading.gop"></legend> 

        <table class="pairs">
          <tr class="display-flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
            <td>
              <input type="checkbox" name="gop" value="on">
            </td>
            <td>
              <span id="gop_label" data-i18n="canvas.prop.gop"></span>
            </td>
          </tr>
          <tr class="x-pix prop hidden">
            <td>
            </td>
            <td>
              <table>
                <tr>
                  <td> 
                    <label class="gop_opt" data-i18n="[title]canvas.prop.x_pix_tt">
                      <span data-i18n="canvas.prop.x_pix"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.x_pix_tt">
                    <input class="gop_opt" type="text" name="x-pix">
                  </td>
                  <td>
                    <label class="gop_opt" data-i18n="[title]canvas.prop.y_pix_tt">
                      <span data-i18n="canvas.prop.y_pix"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.y_pix_tt">
                    <input class="gop_opt" type="text" name="y-pix">
                  </td>
                </tr>
                <tr class="x-margin prop hidden">
                  <td>
                    <label class="gop_opt" data-i18n="[title]canvas.prop.x_margin_tt">
                      <span data-i18n="canvas.prop.x_margin"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.x_margin_tt">
                    <input class="gop_opt" type="text" name="x-margin">
                  </td>
                  <td>
                    <label class="gop_opt" data-i18n="[title]canvas.prop.y_margin_tt">
                      <span data-i18n="canvas.prop.y_margin"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.y_margin_tt">
                    <input class="gop_opt" type="text" name="y-margin">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr class="display-flags prop">
            <td>
            </td>
            <td>
              <label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
                <input class="gop_opt" type="checkbox" name="hide-name" value="on">
                <span data-i18n="canvas.prop.hide_name"></span>
              </label>
            </td>
          </tr>
        </table>
      </fieldset> 

80
      <fieldset class="canvas"> 
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
        <legend data-i18n="canvas.prop.heading.data_scaling"></legend> 

          <div class="x-scale prop hidden">
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
              <span data-i18n="canvas.prop.x_scale"></span>
              <input class="no_gop_opt" type="text" name="x-scale">
            </label>
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
              <span data-i18n="canvas.prop.y_scale"></span>
              <input class="no_gop_opt" type="text" name="y-scale">
            </label>
          </div>

    <div class="gop-range">
        <div class="y1 prop hidden">
          <label class="gop_opt" data-i18n="[title]canvas.prop.y1_tt">
            <span data-i18n="canvas.prop.y1"></span>
            <br>
          <input class="gop_opt" type="text" name="y1">
          </label>
          <br>
        </div>

        <div class="x1 prop hidden">
          <label class="gop_opt" data-i18n="[title]canvas.prop.x1_tt">
            <span data-i18n="canvas.prop.x1"></span>
            <input class="gop_opt" type="text" name="x1">
          </label>
          <label class="gop_opt" data-i18n="[title]canvas.prop.x2_tt">
            <input class="gop_opt" type="text" name="x2">
            <span data-i18n="canvas.prop.x2"></span>
          </label>
          <br>
       </div>

       <div class="y2">
         <label class="gop_opt" data-i18n="[title]canvas.prop.y2_tt">
           <input class="gop_opt" type="text" name="y2">
           <br>
           <span data-i18n="canvas.prop.y2"></span>
         </label>
       </div>
    </div>

      </fieldset> 


      <fieldset id="arrays" class="hidden">
        <legend data-i18n="canvas.prop.heading.arrays"></legend> 

        <label class="arrays" data-i18n="[title]canvas.prop.array_name">
          <select id="arrays_select" class="hidden"></select>
        </label>

          <div class="array-name prop">
136
137
            <label class="array-name"
                   data-i18n="[title]canvas.prop.array_name_tt">
138
              <span data-i18n="canvas.prop.array_name"></span>
139
140
141
142
              <input onchange="attr_change(this);"
                     class="array-name"
                     type="text"
                     name="array_name">
143
            </label>
144
145
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
146
              <span data-i18n="canvas.prop.array_size"></span>
147
148
149
150
              <input onchange="attr_change(this);"
                     class="array-size"
                     type="text"
                     name="array_size">
151
            </label>
152
153
154
155
156
157
158
            <br/>
            <label class="array-save"
                   data-i18n="[title]canvas.prop.array_save_tt">
              <input onchange="flag_change(this);"
                     type="checkbox"
                     name="array_save"
                     value="on">
159
160
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
161
162
163
164
165
            <br/>
            <label class="array-jump"
                   data-i18n="[title]canvas.prop.array_jump_tt">
              <input onchange="flag_change(this);"
                     type="checkbox" name="array_jump" value="on">
166
167
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
168
            <br/>
169

170
171
172
173
            <span data-i18n="canvas.prop.array_style"></span>
            <br/>
            <label class="polygon"
                   data-i18n="[title]canvas.prop.array_polygon_tt">
174
175
176
177
178
179
              <input class="array-style"
                     type="radio"
                     id="polygon"
                     value="0"
                     name="array_style"
                     onchange="flag_change(this);">
180
              <span data-i18n="canvas.prop.array_polygon"></span>
181
            </label>
182
183
184
            <br/>
            <label class="points"
                   data-i18n="[title]canvas.prop.array_points_tt">
185
186
187
188
189
190
              <input class="array-style"
                     type="radio"
                     id="points"
                     value="1"
                     name="array_style"
                     onchange="flag_change(this);">
191
              <span data-i18n="canvas.prop.array_points"></span>
192
            </label>
193
194
195
            <br/>
            <label class="bezier-curve"
                   data-i18n="[title]canvas.prop.array_bezier_tt">
196
197
198
199
200
201
              <input class="array-style"
                     type="radio"
                     id="bezier"
                     value="2"
                     name="array_style"
                     onchange="flag_change(this);">
202
              <span data-i18n="canvas.prop.array_bezier"></span>
203
            </label>
204
205
206
            <br/>
            <label class="bar-graph"
                   data-i18n="[title]canvas.prop.array_bars_tt">
207
208
209
210
211
212
              <input class="array-style"
                     type="radio"
                     id="bar-graph"
                     value="3"
                     name="array_style"
                     onchange="flag_change(this);">
213
              <span data-i18n="canvas.prop.array_bars"></span>
214
            </label>
215
            <br/>
216
217
218
219
          </div>

      <div class="array-fill">
        <label data-i18n="[title]canvas.prop.array_fill_tt">
220
221
222
          <input onchange="attr_change(this);"
                 type="color"
                 name="array_fill">
223
224
225
226
227
228
229
          <span data-i18n="canvas.prop.array_fill"></span>
        </label>
        <br>
      </div>

      <div class="array-outline">
        <label data-i18n="[title]canvas.prop.array_outline_tt">
230
231
232
          <input onchange="attr_change(this);"
                 type="color"
                 name="array_outline">
233
234
235
236
237
          <span data-i18n="canvas.prop.array_outline"></span>
        </label>
        <br>
      </div>

238
239
240
241
242
      <div class="array_in_existing_graph">
        <label class="array-in-existing-graph"
               data-i18n="[title]canvas.prop.array_in_existing_graph_tt">
          <input onchange="flag2_change(this);"
                 type="checkbox"
Jonathan Wilkes's avatar
Jonathan Wilkes committed
243
                 id="array_in_existing_graph"
244
245
246
247
248
                 name="array_in_existing_graph"
                 value="on">
          <span data-i18n="canvas.prop.array_in_existing_graph"></span>
        </label>
      </div>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
249
250
251
252
253
254
255
256
257
258
259
260

      <div class="array_delete">
        <label class="array-delete"
               data-i18n="[title]canvas.prop.array_delete_tt">
          <input onchange="array_delete_change(this);"
                 type="checkbox"
                 id="array_delete"
                 name="array_delete"
                 value="on">
          <span data-i18n="canvas.prop.array_delete"></span>
        </label>
      </div>
261
262
263
      </fieldset> 

    <div class="submit_buttons">
264
      <button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
265
266
267
268
269
        <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>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
270
271
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.close_tt">
        <span data-i18n="iem.prop.close"></span>
272
273
274
275
276
277
278
      </button>
    </div>

  </form> 
  </div>      

  <script>
279
"use strict";
280
var gui = require("nw.gui"); 
281
var pdgui = require("./pdgui.js");
282

283
284
// For translations
var l = pdgui.get_local_string;
285

286
287
// gui preset
pdgui.skin.apply(this);
288

289
var pd_object_callback;
290

291
292
293
294
// nested arrays of attributes for each garray
// in this canvas
var pd_garray_attrs;
var new_array_dialog;
295

296
function ok() {
297
298
299
300
301
302
    // Put the focus on the "ok" button, to make sure we call the change
    // method for an attribute. For some reason I don't need to do this
    // in the iemgui dialog, but I haven't looked close to figure out why.
    // A lot of this could probably be abstracted out, but I'm not sure of
    // the best way to do that yet.
    document.getElementById("ok_button").focus();
303
304
305
    apply();
    cancel();
}
306

Jonathan Wilkes's avatar
Jonathan Wilkes committed
307
function toggle_fill_color(value) {
308
    var fill_color_div =  document.getElementsByClassName("array-fill")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
309
    if (value === 3) {
310
        fill_color_div.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
311
    } else {
312
        fill_color_div.classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
313
314
315
    }
}

316
function flag_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
317
    var array_attr, arrays_select, name, value, flag;
318
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
319
    array_attr = pd_garray_attrs[arrays_select.value];
320
321
    name = elem.name;
    // get value from radio group, checked from checkboxes
322
    if (name === "array_style") {
323
        value = document.querySelector('input[name="array_style"]:checked').value;
324
        pdgui.post("array style found: " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
325
326
327
        // Toggle visibility of the fill color button-- only show for bar
        // graph style (= 3)
        toggle_fill_color(+value);
328
    } else {
329
        // "+" for casting boolean to number
330
331
        value = +elem.checked;
    }
332
    //pdgui.post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
333
    flag = array_attr.array_flags;
334
    pdgui.post("flag before is " + flag);
335
336
337
338
339
340
341
342
343
344
345
346
347
348
    switch (name) {
        case "array_save":
            flag &= ~1;    // clear the save bit
            flag |= value; // set it
            break;
        case "array_style":
            flag &= ~(1 << 2); // clear style bit 2...
            flag &= ~(1 << 1); // ... and style bit 1 ...
            flag += (2 * value); // set them
            break;
        case "array_jump":
            flag &= ~(1 << 4);
            flag += (16 * value);
            break;
349
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
350
    array_attr.array_flags = flag;
351
    pdgui.post("array is " + array_attr);
352
}
353

354
function flag2_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
355
    var array_attr, arrays_select, name, value, flag;
356
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
357
    array_attr = pd_garray_attrs[arrays_select.value];
358
359
    name = elem.name;
    // get value from radio group, checked from checkboxes
360
    // "+" for casting boolean to number
361
    value = +elem.checked;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
362
    array_attr[name] = value;
363
    pdgui.post("array is " + array_attr);
364
}
365

Jonathan Wilkes's avatar
Jonathan Wilkes committed
366
function array_delete_change(elem) {
367
    var arrays_select = document.getElementById("arrays_select"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
368
369
370
371
        array_attr = pd_garray_attrs[arrays_select.value];
    array_attr.array_delete = elem.checked;
}

372
function attr_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
373
    var array_index, array_attr, arrays_select, name;
374
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
375
    array_attr = pd_garray_attrs[arrays_select.value];
376
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
377
    array_attr[name] = elem.value;
378
    if (elem.name === "array-fill") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
379
380
        array-fill
    }
381
382
    pdgui.post("name is " + elem.name);
    pdgui.post("value is " + elem.value);
383
}
384

385
386
387
function array_choose(array_index) {
    var i, name, value, elem, style_index, style_opts,
        array_attr = pd_garray_attrs[array_index];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
388
389
390
391
392
393
394
395
396
397
398
399
    for (name in array_attr) {
        if (array_attr.hasOwnProperty(name)) {
            console.log("name is " + name);
        }
    }
    for (name in array_attr) {
        if (array_attr.hasOwnProperty(name)) {
            value = array_attr[name];
            switch (name) {
                case "array_gfxstub": break;
                case "array_flags":
                    // save contents
400
                    elem = document.getElementsByName("array_save")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
401
402
                    elem.checked = (value & 1) != 0;
                    // jump on click
403
                    elem = document.getElementsByName("array_jump")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
404
405
                    elem.checked = (value & 16) != 0;
                    // draw style
406
                    style_opts = document.getElementsByName("array_style");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
407
408
409
410
411
412
413
414
                    style_index = (value & 6) >> 1;
                    elem = style_opts[style_index];
                    elem.checked = true;
                      // hide "fill" color if we're a bar graph style (= 3)
                    toggle_fill_color(style_index);
                    break;
                default:
                    // name, size, fill, and outline
415
                    pdgui.post("name is " + name);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
416
417
418
419
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
420
421
        }
    }
422
}
423

424
425
var arrays_select = document.getElementById("arrays_select");
arrays_select.addEventListener("change", function() {
426
    pdgui.post("changed the thing is " + this.value);
427
428
429
    array_choose(this.value);
});

430
431
432
var gop_label = document.getElementById("gop_label");
gop_label.addEventListener("click", function() {
    document.getElementsByName("gop")[0].click();
433
434
});

435
436
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
437
438
439
440
441
442
443
    set_gop(this.checked);
});

function update_gop_form(opts, state) {
    var elem, i;
    for(i = 0; i < opts.length; i++) {
        elem = opts[i];
444
445
        if (elem.type === "checkbox" ||
            elem.type === "text") {
446
447
448
            elem.disabled = state ? false : true;
        }
        if (state) {
449
            elem.classList.remove("disabled");
450
        } else {
451
            elem.classList.add("disabled");
452
453
        }
    }
454
}
455

456
457
458
459
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
460
461
462
463
464
    w = document.getElementsByName("x-pix")[0];
    h = document.getElementsByName("y-pix")[0];
    xoff = document.getElementsByName("x-margin")[0];
    yoff = document.getElementsByName("y-margin")[0];
    if (w.value === "0" && h.value === "0") {
465
466
467
468
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
469
    }
470
471
    gop_click_count++;
}
472

473
474
475
476
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
477
    }
478
479
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
480
481
482
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
}
483

484
485
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
486
    return arg.split(" ").join(fake_space);
487
}
488

489
function strip_problem_chars(arg) {
490
    var problem_chars = [";", ",", "{", "}", "\\"];
491
492
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
493
        ret = ret.split(";").join("");
494
    }
495
496
    return ret;
}
497

498
499
500
501
function get_input(name) {
    var val = document.getElementsByName(name)[0].value;
    return val;
}
502

503
504
// get a value from the garray attr array
function get_array_value(name, attrs) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
505
    return attrs[name];
506
507
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
508
509
510
511
512
513
514
515
516
517
// for a new array, slot 4 is:
//   "0" to create the array in a new graph
//   "1" to create the array in existing graph
// for a graph with more than one array in it, slot 4 is:
//   "0" to do nothing
//   "1" to delete the array when the dialog is finished
// The deletion interface is bad, but it is also an obscure
// feature probably not worth improving.
function get_array_slot_4(attrs) {
    if (new_array_dialog) {
518
        return document.getElementById("array_in_existing_graph").checked ?
Jonathan Wilkes's avatar
Jonathan Wilkes committed
519
520
521
522
523
524
525
526
            "1" : "0";
    } else if (pd_garray_attrs.length > 1) {
        return attrs.array_delete ? "1" : "0";
    } else {
        return "0";
    }
}

527
function apply() {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
528
    var i, attrs, gop, hide_name, slot_4;
529
530
531
532
    // If this is a dialog to create a new array, we
    // skip the canvas dialog callback
    if (!new_array_dialog) {
        // Note: the "+" casts Boolean to Number
533
534
        gop = +document.getElementsByName("gop")[0].checked;
        hide_name = +document.getElementsByName("hide-name")[0].checked;
535

536
537
538
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
            +get_input("x-scale"),
            +get_input("y-scale"),
539
            (gop + 2 * hide_name),
540
541
542
543
544
545
546
547
            +get_input("x1"),
            +get_input("y1"),
            +get_input("x2"),
            +get_input("y2"),
            +get_input("x-pix"),
            +get_input("y-pix"),
            +get_input("x-margin"),
            +get_input("y-margin")
548
        );
549
    }
550

551
552
553
554
    // Now send the array properties, in a separate
    // message for each array
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
555
556
557
        name = get_array_value("array_name", attrs);
        if (name.slice(0, 1) === "$") {
            name = "#" + name.slice(1);
558
        }
559
        pdgui.pdsend(
560
561
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
562
            name,
563
564
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
565
            get_array_slot_4(attrs),
566
567
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
568
569
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
570
        );
571

572
    }
573
}
574

575
576
577
function cancel() {
    var i, attrs, gfxstub;
    //window.close(true);
578
    pdgui.pdsend(pd_object_callback, "cancel");
579
580
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
581
        gfxstub = attrs.array_gfxstub;
582
        pdgui.pdsend(gfxstub, "cancel");
583
    }
584
}
585

Jonathan Wilkes's avatar
Jonathan Wilkes committed
586
function populate_array_form(objects) {
587
588
    var arrays_select = document.getElementById("arrays_select"),
        a_field = document.getElementById("arrays"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
589
        opt, i;
590
    a_field.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
591
592
    if (objects.length > 1) {
        // show the select element if there's more than one array
593
        arrays_select.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
594
595
    }
    for (i = 0; i < objects.length; i++) {
596
597
598
        opt = document.createElement("option");
        opt.setAttribute("value", i);
        opt.textContent = "Array #" + (i+1);
599
600
        arrays_select.appendChild(opt);
    }
601
602
603
604
605
    // We're permanently hiding the checkbutton for creating a new array 
    // inside an existing graph. It's just a weird interface with very
    // few benefits. However, patches that already have multiple arrays 
    // inside a graph will continue to work.  (And if users really want 
    // this feature back it's easy to turn it back on.
606
607
608
    if (!new_array_dialog || 1) {  // to re-enable, remove the "|| 1"
        document.getElementsByClassName("array_in_existing_graph")[0]
            .classList.add("hidden");
609
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
610
611
612
    // Hide the "delete this array" button if we don't have
    // more than one array
    if (new_array_dialog || objects.length < 2) {
613
        document.getElementsByClassName("array_delete")[0].classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
614
    }
615
616
    array_choose(0);
}
617

618
// Set up arrays in an object
619
    
Jonathan Wilkes's avatar
Jonathan Wilkes committed
620
function init_arrays(attr_objects) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
621
    if (attr_objects.length) {
622
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
623
        populate_array_form(attr_objects);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
624
625
626
627
        // disable x1 and x2 for garrays-- they
        // automatically get set to the array size
        document.getElementsByName("x1")[0].disabled = true;
        document.getElementsByName("x2")[0].disabled = true;
628
    }
629
}
630

631
632
633
// 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
634
function register_window_id(gfxstub, attr_objects) {
635
    pd_object_callback = gfxstub;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
636
637
638
639
640
    var canvas_fieldsets, i, prop;
    // attr_objects[0]: canvas properties
    // attr_objects[1...n-1]: array properties
    for (prop in attr_objects[0]) {
        if (attr_objects[0].hasOwnProperty(prop)) {
641
            pdgui.post(prop + ": " + attr_objects[0][prop]);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
642
        }
643
644
645
646
647
    }
    add_events(gfxstub);
    // not sure that we need this for properties windows...
    // pdgui.canvas_map(gfxstub);
    translate_form();
Jonathan Wilkes's avatar
Jonathan Wilkes committed
648
649
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
650
    if (attr_objects[0].hasOwnProperty("array_gfxstub")) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
651
        pd_garray_attrs = attr_objects; 
652
        new_array_dialog = true; // this is a new array dialog
653
        canvas_fieldsets = document.getElementsByClassName("canvas");
654
        for (i = 0; i < canvas_fieldsets.length; i++) {
655
            canvas_fieldsets[i].classList.add("hidden");
656
        }
657
    } else {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
658
        pd_garray_attrs = attr_objects.slice(1);
659
        new_array_dialog = false; // this is a canvas/array props dialog
Jonathan Wilkes's avatar
Jonathan Wilkes committed
660
        populate_form(attr_objects[0]);
661
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
662
        init_arrays(pd_garray_attrs);
663

664
665
666
667
    // 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.
668
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
669
    pdgui.resize_window(pd_object_callback);
670
671
}

672
function tr_text(id) {
673
674
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
675
676
677
678
679
}

// Stop-gap translator
function translate_form() {
    var i
680
    var elements = document.querySelectorAll("[data-i18n]");
681
682
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
683
        if (data.slice(0,7) === "[title]") {
684
685
686
687
688
689
690
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
691
692
693
694
695
696
697
698
function populate_form(attr_object) {
    var prop;
    for (prop in attr_object) {
        if (attr_object.hasOwnProperty(prop)) {
            // Unhide the span with the class with the same name as the id
            var prop_group = document.getElementsByClassName(prop)[0];
            if (prop_group !== undefined) {
                console.log("the thing here is " + prop);
699
                prop_group.classList.remove("hidden");
700
            } else {
701
                pdgui.post("Error: couldn't find iemgui prop group for " +
Jonathan Wilkes's avatar
Jonathan Wilkes committed
702
703
                    prop);
            }
704
705
            if (prop === "display-flags") {
                // protip: "!!" forces Boolean, "+" forces Number type
Jonathan Wilkes's avatar
Jonathan Wilkes committed
706
                var flag = +attr_object[prop];
707
708
                document.getElementsByName("gop")[0].checked = !!flag;
                document.getElementsByName("hide-name")[0].checked = !!(flag & 2);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
709
710
711
712
713
714
                // Set the gop-related parts of the form to be
                // enabled/disabled based on state
                set_gop(!!flag);
            }            
            var elem = document.getElementsByName(prop);
            if (elem.length > 0) {
715
                if(prop.slice(-5) === "color") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
716
717
                    var hex_string = Number(attr_object[prop]).toString(16);
                    var color_string = "#" +
718
                        (hex_string === "0" ? "000000" : hex_string);
719
                    pdgui.post("color is " + color_string);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
720
                    elem[0].value = color_string;
721
                } else if (elem[0].type === "checkbox") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
722
723
                    // The attr here is a string, so we need to
                    // force it to number, hence the "+" below
724
                    pdgui.post("found a CHECKED ITEM!!!");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
725
726
727
728
                    elem[0].checked = +attr_object[prop];
                } else {
                    elem[0].value = attr_object[prop];
                }
729
730
731
            }
        }
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
732
733
734
    // Some special cases for hiding options for garray dialogs
    if (pd_garray_attrs.length > 0) {
        // Graph-on-parent toggle
735
736
        document.getElementsByClassName("display-flags")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
737
        // Graph-on-parent flag for hiding object name/args
738
739
        document.getElementsByClassName("display-flags")[1]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
740
        // GOP-rect margins don't make sense for garrays, so hide them
741
742
        document.getElementsByClassName("x-margin")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
743
        // X/Y scaling-- garray is always in a gop so not needed
744
745
        document.getElementsByClassName("x-scale")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
746
    }
747
748
749
750
}

function add_events(name) {
    // closing the Window
751
    gui.Window.get().on("close", function() {
752
        // this needs to do whatever the "cancel" button does
753
754
        //pdgui.pdsend(name + " menuclose 0");
        //cancel();
755
        pdgui.remove_dialogwin(pd_object_callback);
756
        gui.Window.get().close(true);
757
    });
758
    pdgui.dialog_bindings(name);
759
760
761
762
763
}

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