dialog_canvas.html 27.1 KB
Newer Older
1
2
3
<!DOCTYPE html>
<html>
  <head>
4
    <meta charset="UTF-8">
5
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
Jonathan Wilkes's avatar
Jonathan Wilkes committed
6
    <title>Canvas Dialog</title>
7
  </head>
8
  <body class="dialog_body">
9
10
11
    <div class="container noselect">
    <form> 

12
      <fieldset class="canvas"> 
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
80
        <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> 

81
      <fieldset class="canvas"> 
82
        <legend data-i18n="canvas.prop.heading.data_scaling"></legend> 
83
<div style="display: inline-block; align: left;">
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
          <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>
125
</div>
126
127
128
129
130
131
132
133
134
135
136
      </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">
137
138
            <label class="array-name"
                   data-i18n="[title]canvas.prop.array_name_tt">
139
              <span data-i18n="canvas.prop.array_name"></span>
140
141
142
              <input onchange="attr_change(this);"
                     class="array-name"
                     type="text"
143
144
                     name="array_name"
                     id="array_name_input">
145
            </label>
146
147
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
148
              <span data-i18n="canvas.prop.array_size"></span>
149
150
151
152
              <input onchange="attr_change(this);"
                     class="array-size"
                     type="text"
                     name="array_size">
153
            </label>
154
155
156
157
158
159
160
            <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">
161
162
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
163
164
165
166
167
            <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">
168
169
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
170
            <br/>
171

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

      <div class="array-fill">
        <label data-i18n="[title]canvas.prop.array_fill_tt">
232
233
234
          <input onchange="attr_change(this);"
                 type="color"
                 name="array_fill">
235
236
237
238
239
240
241
          <span data-i18n="canvas.prop.array_fill"></span>
        </label>
        <br>
      </div>

      <div class="array-outline">
        <label data-i18n="[title]canvas.prop.array_outline_tt">
242
243
244
          <input onchange="attr_change(this);"
                 type="color"
                 name="array_outline">
245
246
247
248
249
          <span data-i18n="canvas.prop.array_outline"></span>
        </label>
        <br>
      </div>

250
251
252
253
254
      <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
255
                 id="array_in_existing_graph"
256
257
258
259
260
                 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
261
262
263
264
265
266
267
268
269
270
271
272

      <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>
273
274
275
      </fieldset> 

    <div class="submit_buttons">
276
      <button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
277
278
279
280
281
        <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
282
283
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.close_tt">
        <span data-i18n="iem.prop.close"></span>
284
285
286
287
288
289
290
      </button>
    </div>

  </form> 
  </div>      

  <script>
291
"use strict";
292
var gui = require("nw.gui");
293
var pdgui = require("./pdgui.js");
294

295
296
// For translations
var l = pdgui.get_local_string;
297

298
// gui preset
299
pdgui.skin.apply(window);
300

301
var pd_object_callback;
302

303
304
305
306
// nested arrays of attributes for each garray
// in this canvas
var pd_garray_attrs;
var new_array_dialog;
307

308
function ok() {
309
310
311
312
313
314
    // 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();
315
316
317
    apply();
    cancel();
}
318

Jonathan Wilkes's avatar
Jonathan Wilkes committed
319
function toggle_fill_color(value) {
320
    var fill_color_div =  document.getElementsByClassName("array-fill")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
321
    if (value === 3) {
322
        fill_color_div.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
323
    } else {
324
        fill_color_div.classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
325
326
327
    }
}

328
function flag_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
329
    var array_attr, arrays_select, name, value, flag;
330
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
331
    array_attr = pd_garray_attrs[arrays_select.value];
332
333
    name = elem.name;
    // get value from radio group, checked from checkboxes
334
    if (name === "array_style") {
335
        value = document.querySelector('input[name="array_style"]:checked').value;
336
        pdgui.post("array style found: " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
337
338
339
        // Toggle visibility of the fill color button-- only show for bar
        // graph style (= 3)
        toggle_fill_color(+value);
340
    } else {
341
        // "+" for casting boolean to number
342
343
        value = +elem.checked;
    }
344
    //pdgui.post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
345
    flag = array_attr.array_flags;
346
    pdgui.post("flag before is " + flag);
347
348
349
350
351
352
353
354
355
356
357
358
359
360
    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;
361
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
362
    array_attr.array_flags = flag;
363
    pdgui.post("array is " + array_attr);
364
}
365

366
function flag2_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
367
    var array_attr, arrays_select, name, value, flag;
368
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
369
    array_attr = pd_garray_attrs[arrays_select.value];
370
371
    name = elem.name;
    // get value from radio group, checked from checkboxes
372
    // "+" for casting boolean to number
373
    value = +elem.checked;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
374
    array_attr[name] = value;
375
    pdgui.post("array is " + array_attr);
376
}
377

Jonathan Wilkes's avatar
Jonathan Wilkes committed
378
function array_delete_change(elem) {
379
    var arrays_select = document.getElementById("arrays_select"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
380
381
382
383
        array_attr = pd_garray_attrs[arrays_select.value];
    array_attr.array_delete = elem.checked;
}

384
function attr_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
385
    var array_index, array_attr, arrays_select, name;
386
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
387
    array_attr = pd_garray_attrs[arrays_select.value];
388
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
389
    array_attr[name] = elem.value;
390
    if (elem.name === "array-fill") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
391
392
        array-fill
    }
393
394
    pdgui.post("name is " + elem.name);
    pdgui.post("value is " + elem.value);
395
}
396

397
398
399
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
400
401
402
403
404
405
406
407
408
409
410
411
    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
412
                    elem = document.getElementsByName("array_save")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
413
414
                    elem.checked = (value & 1) != 0;
                    // jump on click
415
                    elem = document.getElementsByName("array_jump")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
416
417
                    elem.checked = (value & 16) != 0;
                    // draw style
418
                    style_opts = document.getElementsByName("array_style");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
419
420
421
422
423
424
425
426
                    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
427
                    pdgui.post("name is " + name);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
428
429
430
431
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
432
433
        }
    }
434
}
435

436
var arrays_select = document.getElementById("arrays_select");
437
438
439
arrays_select.addEventListener("change", function(evt) {
    pdgui.post("changing to array index " + evt.target.value);
    array_choose(evt.target.value);
440
441
});

442
443
444
var gop_label = document.getElementById("gop_label");
gop_label.addEventListener("click", function() {
    document.getElementsByName("gop")[0].click();
445
446
});

447
448
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
449
450
451
452
453
454
455
    set_gop(this.checked);
});

function update_gop_form(opts, state) {
    var elem, i;
    for(i = 0; i < opts.length; i++) {
        elem = opts[i];
456
457
        if (elem.type === "checkbox" ||
            elem.type === "text") {
458
459
460
            elem.disabled = state ? false : true;
        }
        if (state) {
461
            elem.classList.remove("disabled");
462
        } else {
463
            elem.classList.add("disabled");
464
465
        }
    }
466
}
467

468
469
470
471
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
472
473
474
475
476
    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") {
477
478
479
480
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
481
    }
482
483
    gop_click_count++;
}
484

485
486
487
488
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
489
    }
490
491
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
492
493
494
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
}
495

496
497
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
498
    return arg.split(" ").join(fake_space);
499
}
500

501
function strip_problem_chars(arg) {
502
503
504
505
    var problem_chars = [";", ",", "{", "}", "\\"],
        ret = arg,
        i;
    for (i = 0; i < problem_chars.length; i++) {
506
        ret = ret.split(";").join("");
507
    }
508
509
    return ret;
}
510

511
512
513
514
function get_input(name) {
    var val = document.getElementsByName(name)[0].value;
    return val;
}
515

516
517
// get a value from the garray attr array
function get_array_value(name, attrs) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
518
    return attrs[name];
519
520
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
521
522
523
524
525
526
527
528
529
530
// 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) {
531
        return document.getElementById("array_in_existing_graph").checked ?
Jonathan Wilkes's avatar
Jonathan Wilkes committed
532
533
534
535
536
537
538
539
            "1" : "0";
    } else if (pd_garray_attrs.length > 1) {
        return attrs.array_delete ? "1" : "0";
    } else {
        return "0";
    }
}

540
function apply() {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
541
    var i, attrs, gop, hide_name, slot_4;
542
543
544
545
    // 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
546
547
        gop = +document.getElementsByName("gop")[0].checked;
        hide_name = +document.getElementsByName("hide-name")[0].checked;
548

549
550
551
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
            +get_input("x-scale"),
            +get_input("y-scale"),
552
            (gop + 2 * hide_name),
553
554
555
556
557
558
559
560
            +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")
561
        );
562
    }
563

564
565
566
567
    // 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];
568
569
570
        name = get_array_value("array_name", attrs);
        if (name.slice(0, 1) === "$") {
            name = "#" + name.slice(1);
571
        }
572
        pdgui.pdsend(
573
574
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
575
            name,
576
577
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
578
            get_array_slot_4(attrs),
579
580
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
581
582
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
583
        );
584

585
    }
586
}
587

588
589
590
function cancel() {
    var i, attrs, gfxstub;
    //window.close(true);
591
    pdgui.pdsend(pd_object_callback, "cancel");
592
593
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
594
        gfxstub = attrs.array_gfxstub;
595
        pdgui.pdsend(gfxstub, "cancel");
596
    }
597
}
598

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

631
// Set up arrays in an object
632

Jonathan Wilkes's avatar
Jonathan Wilkes committed
633
function init_arrays(attr_objects) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
634
    if (attr_objects.length) {
635
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
636
        populate_array_form(attr_objects);
637
        // hide x1 and x2 for garrays-- they
Jonathan Wilkes's avatar
Jonathan Wilkes committed
638
639
640
        // automatically get set to the array size
        document.getElementsByName("x1")[0].disabled = true;
        document.getElementsByName("x2")[0].disabled = true;
641
    }
642
}
643

644
645
646
// 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
647
function register_window_id(gfxstub, attr_objects) {
648
    pd_object_callback = gfxstub;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
649
650
651
652
653
    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)) {
654
            pdgui.post(prop + ": " + attr_objects[0][prop]);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
655
        }
656
657
658
659
660
    }
    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
661
662
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
663
    if (attr_objects[0].hasOwnProperty("array_gfxstub")) {
664
        pd_garray_attrs = attr_objects;
665
        new_array_dialog = true; // this is a new array dialog
666
        canvas_fieldsets = document.getElementsByClassName("canvas");
667
        for (i = 0; i < canvas_fieldsets.length; i++) {
668
            canvas_fieldsets[i].classList.add("hidden");
669
        }
670
    } else {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
671
        pd_garray_attrs = attr_objects.slice(1);
672
        new_array_dialog = false; // this is a canvas/array props dialog
Jonathan Wilkes's avatar
Jonathan Wilkes committed
673
        populate_form(attr_objects[0]);
674
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
675
        init_arrays(pd_garray_attrs);
676

677
678
679
680
    // 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.
681
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
682
    pdgui.resize_window(pd_object_callback);
683
684
}

685
function tr_text(id) {
686
687
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
688
689
690
691
692
}

// Stop-gap translator
function translate_form() {
    var i
693
    var elements = document.querySelectorAll("[data-i18n]");
694
695
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
696
        if (data.slice(0,7) === "[title]") {
697
698
699
700
701
702
703
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

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

function add_events(name) {
    // closing the Window
764
    gui.Window.get().on("close", function() {
765
        // this needs to do whatever the "cancel" button does
766
767
        //pdgui.pdsend(name + " menuclose 0");
        //cancel();
768
        pdgui.remove_dialogwin(pd_object_callback);
769
        gui.Window.get().close(true);
770
    });
771
    pdgui.dialog_bindings(name);
772
773
774
775
776
}

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