dialog_canvas.html 27.7 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
        <legend data-i18n="canvas.prop.heading.gop"></legend> 

        <table class="pairs">
16
          <tr class="display_flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
17
18
19
20
21
22
23
            <td>
              <input type="checkbox" name="gop" value="on">
            </td>
            <td>
              <span id="gop_label" data-i18n="canvas.prop.gop"></span>
            </td>
          </tr>
24
          <tr class="x_pix prop hidden">
25
26
27
28
29
30
31
32
33
34
35
            <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">
36
                    <input class="gop_opt" type="text" name="x_pix">
37
38
39
40
41
42
43
                  </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">
44
                    <input class="gop_opt" type="text" name="y_pix">
45
46
                  </td>
                </tr>
47
                <tr class="x_margin prop hidden">
48
49
50
51
52
53
                  <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">
54
                    <input class="gop_opt" type="text" name="x_margin">
55
56
57
58
59
60
61
                  </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">
62
                    <input class="gop_opt" type="text" name="y_margin">
63
64
65
66
67
                  </td>
                </tr>
              </table>
            </td>
          </tr>
68
          <tr class="display_flags prop hide_name_row">
69
70
71
72
            <td>
            </td>
            <td>
              <label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
73
                <input class="gop_opt" type="checkbox" name="hide_name" value="on">
74
75
76
77
78
79
80
                <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
          <div class="x_scale prop hidden">
85
            <nobr>
86
87
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
              <span data-i18n="canvas.prop.x_scale"></span>
88
              <input class="no_gop_opt" type="text" name="x_scale">
89
90
91
            </label>
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
              <span data-i18n="canvas.prop.y_scale"></span>
92
              <input class="no_gop_opt" type="text" name="y_scale">
93
            </label>
94
            </nobr>
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
          </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>
127
</div>
128
129
130
131
132
133
134
135
136
137
138
      </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">
139
140
            <label class="array-name"
                   data-i18n="[title]canvas.prop.array_name_tt">
141
              <span data-i18n="canvas.prop.array_name"></span>
142
              <input onchange="update_array_attr(this);"
143
144
                     class="array-name"
                     type="text"
145
146
                     name="array_name"
                     id="array_name_input">
147
            </label>
148
149
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
150
              <span data-i18n="canvas.prop.array_size"></span>
151
              <input onchange="update_array_attr(this);"
152
153
154
                     class="array-size"
                     type="text"
                     name="array_size">
155
            </label>
156
157
158
159
160
161
162
            <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">
163
164
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
165
166
167
168
169
            <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">
170
171
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
172
            <br/>
173

174
175
            <span data-i18n="canvas.prop.array_style"></span>
            <br/>
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
228
229
            <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>
230
231
232
233
          </div>

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

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

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

      <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>
275
276
277
      </fieldset> 

    <div class="submit_buttons">
278
      <button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
279
280
        <span data-i18n="iem.prop.ok"></span>
      </button>
281
      <button type="button" id="apply_button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
282
283
        <span data-i18n="iem.prop.apply"></span>
      </button>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
284
285
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.close_tt">
        <span data-i18n="iem.prop.close"></span>
286
287
288
289
290
291
292
      </button>
    </div>

  </form> 
  </div>      

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

297
298
// For translations
var l = pdgui.get_local_string;
299

300
// gui preset
301
pdgui.skin.apply(window);
302

303
var pd_object_callback;
304

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

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

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

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

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

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

382
383
384
385
386
387
388
389
390
391
392
393
394
395
// Placeholder for updating gop margins and coords when the dialog window
// is open. Ideally we want to keep a record of all changes so that clicking
// "Cancel" will undo all of the changes made inside the dialog. However this
// is non-trivial with the canvas dialog because of all the state changes
// one can make to an array in the same dialog. For that reason we replace the
// "Cancel" button with one called "Close".
// The function in pdgui to update the form fields when a user drags the
// dimensions and margins is also used for iemguis, which *do* have a "Cancel"
// button. So we just set up a dummy function here to adhere to that interface.
function update_attr(elem) {
    // do nothing for now...
}

function update_array_attr(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
396
    var array_index, array_attr, arrays_select, name;
397
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
398
    array_attr = pd_garray_attrs[arrays_select.value];
399
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
400
    array_attr[name] = elem.value;
401
    if (elem.name === "array-fill") {
402
403
        // Not sure what this was for...
        //array-fill
Jonathan Wilkes's avatar
Jonathan Wilkes committed
404
    }
405
}
406

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

441
var arrays_select = document.getElementById("arrays_select");
442
443
arrays_select.addEventListener("change", function(evt) {
    array_choose(evt.target.value);
444
445
});

446
447
448
var gop_label = document.getElementById("gop_label");
gop_label.addEventListener("click", function() {
    document.getElementsByName("gop")[0].click();
449
450
});

451
452
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
453
454
455
456
457
458
459
    set_gop(this.checked);
});

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

472
473
474
475
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
476
477
478
479
    w = document.getElementsByName("x_pix")[0];
    h = document.getElementsByName("y_pix")[0];
    xoff = document.getElementsByName("x_margin")[0];
    yoff = document.getElementsByName("y_margin")[0];
480
    if (w.value === "0" && h.value === "0") {
481
482
483
484
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
485
    }
486
487
    gop_click_count++;
}
488

489
function show_gop_name_and_args_checkbutton(flag) {
490
    var row = document.getElementsByClassName("hide_name_row")[0];
491
492
493
    row.style.setProperty("visibility", flag ? "visible" : "hidden");
}

494
495
496
497
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
498
    }
499
500
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
501
502
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
503
    // Hide or show the "hide_name" row
504
    show_gop_name_and_args_checkbutton(state);
505
}
506

507
508
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
509
    return arg.split(" ").join(fake_space);
510
}
511

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

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

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

541
function apply() {
542
    var gop, hide_name, slot_4;
543
544
545
546
    // 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
547
        gop = +document.getElementsByName("gop")[0].checked;
548
        hide_name = +document.getElementsByName("hide_name")[0].checked;
549

550
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
551
552
            +get_input("x_scale"),
            +get_input("y_scale"),
553
            (gop ? gop + 2 * hide_name : 0), // No hide_name bit if gop is off
554
555
556
557
            +get_input("x1"),
            +get_input("y1"),
            +get_input("x2"),
            +get_input("y2"),
558
559
560
561
            +get_input("x_pix"),
            +get_input("y_pix"),
            +get_input("x_margin"),
            +get_input("y_margin")
562
        );
563
    }
564

565
566
    // Now send the array properties, in a separate
    // message for each array
567
568
    pd_garray_attrs.forEach(function(attrs) {
        var i;
569
        name = get_array_value("array_name", attrs);
570
        var arr = name.split("");
571
572
573
        // This is a bit too complicated-- isn't there a standardized
        // interface for doing this?
        for (i = 0; i < arr.length; i++) {
574
575
576
577
            if (arr[i] === "$" && i+1 < arr.length &&
                arr[i+1] >= "0" && arr[i+1] <= "9") {
                arr[i] = "#";
            }
578
        }
579
        name = arr.join("");
580
        pdgui.pdsend(
581
582
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
583
            name,
584
585
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
586
            get_array_slot_4(attrs),
587
588
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
589
590
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
591
        );
592
    });
593
}
594

595
596
597
function cancel() {
    var i, attrs, gfxstub;
    //window.close(true);
598
    pdgui.pdsend(pd_object_callback, "cancel");
599
600
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
601
        gfxstub = attrs.array_gfxstub;
602
        pdgui.pdsend(gfxstub, "cancel");
603
    }
604
}
605

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

638
// Set up arrays in an object
639

Jonathan Wilkes's avatar
Jonathan Wilkes committed
640
function init_arrays(attr_objects) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
641
    if (attr_objects.length) {
642
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
643
        populate_array_form(attr_objects);
644
        // hide x1 and x2 for garrays-- they
Jonathan Wilkes's avatar
Jonathan Wilkes committed
645
646
647
        // automatically get set to the array size
        document.getElementsByName("x1")[0].disabled = true;
        document.getElementsByName("x2")[0].disabled = true;
648
    }
649
}
650

651
652
653
// 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
654
function register_window_id(gfxstub, attr_objects) {
655
    pd_object_callback = gfxstub;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
656
657
658
    var canvas_fieldsets, i, prop;
    // attr_objects[0]: canvas properties
    // attr_objects[1...n-1]: array properties
659
660
661
662
    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
663
664
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
665
    if (attr_objects[0].hasOwnProperty("array_gfxstub")) {
666
        pd_garray_attrs = attr_objects;
667
        new_array_dialog = true; // this is a new array dialog
668
        canvas_fieldsets = document.getElementsByClassName("canvas");
669
        for (i = 0; i < canvas_fieldsets.length; i++) {
670
            canvas_fieldsets[i].classList.add("hidden");
671
        }
672
673
674
675
        // Hide the "Apply" button, as it doesn't make sense for
        // creating a new array
        document.getElementById("apply_button").style.setProperty("display",
            "none");
676
    } else {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
677
        pd_garray_attrs = attr_objects.slice(1);
678
        new_array_dialog = false; // this is a canvas/array props dialog
Jonathan Wilkes's avatar
Jonathan Wilkes committed
679
        populate_form(attr_objects[0]);
680
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
681
        init_arrays(pd_garray_attrs);
682

683
684
    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
685
686
    // labels and form elements.  That makes it snappier, at least
    // on older machines.
687
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
688
    pdgui.resize_window(pd_object_callback);
689
690
}

691
function tr_text(id) {
692
693
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
694
695
696
697
698
}

// Stop-gap translator
function translate_form() {
    var i
699
    var elements = document.querySelectorAll("[data-i18n]");
700
701
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
702
        if (data.slice(0,7) === "[title]") {
703
704
705
706
707
708
709
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

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

function add_events(name) {
    // closing the Window
768
    gui.Window.get().on("close", function() {
769
        // this needs to do whatever the "cancel" button does
770
        cancel();
771
    });
772
    pdgui.dialog_bindings(name);
773
774
775
776
777
}

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