dialog_canvas.html 28.6 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
17
18
19
20
21
          <tr class="prop no_scroll hidden" data-i18n="[title]canvas.prop.no_scroll_tt">
            <td colspan="2">
              <label>
                <input type="checkbox" name="no_scroll" value="off">
                <span data-i18n="canvas.prop.no_scroll"></span>
              </label>
22
            </td>
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
          </tr>
          <tr class="prop no_menu hidden" data-i18n="[title]canvas.prop.no_menu_tt">
            <td colspan="2">
              <label>
                <input type="checkbox" name="no_menu" value="off">
                <span data-i18n="canvas.prop.no_menu"></span>
              </label>
            </td>
          </tr>
          <tr class="display_flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
            <td colspan="2">
              <label>
                <input type="checkbox" name="gop" value="on">
                <span data-i18n="canvas.prop.gop"></span>
              </label>
38
39
            </td>
          </tr>
40
          <tr class="x_pix prop hidden">
41
42
43
44
45
46
47
48
49
50
51
            <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">
52
                    <input class="gop_opt" type="text" name="x_pix">
53
54
55
56
57
58
59
                  </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">
60
                    <input class="gop_opt" type="text" name="y_pix">
61
62
                  </td>
                </tr>
63
                <tr class="x_margin prop hidden">
64
65
66
67
68
69
                  <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">
70
                    <input class="gop_opt" type="text" name="x_margin">
71
72
73
74
75
76
77
                  </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">
78
                    <input class="gop_opt" type="text" name="y_margin">
79
80
81
82
83
                  </td>
                </tr>
              </table>
            </td>
          </tr>
84
          <tr class="display_flags prop hide_name_row">
85
86
87
88
            <td>
            </td>
            <td>
              <label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
89
                <input class="gop_opt" type="checkbox" name="hide_name" value="on">
90
91
92
93
94
95
96
                <span data-i18n="canvas.prop.hide_name"></span>
              </label>
            </td>
          </tr>
        </table>
      </fieldset> 

97
      <fieldset class="canvas"> 
98
        <legend data-i18n="canvas.prop.heading.data_scaling"></legend> 
99
<div style="display: inline-block; align: left;">
100
          <div class="x_scale prop hidden">
101
            <nobr>
102
103
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
              <span data-i18n="canvas.prop.x_scale"></span>
104
              <input class="no_gop_opt" type="text" name="x_scale">
105
106
107
            </label>
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
              <span data-i18n="canvas.prop.y_scale"></span>
108
              <input class="no_gop_opt" type="text" name="y_scale">
109
            </label>
110
            </nobr>
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
136
137
138
139
140
141
142
          </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>
143
</div>
144
145
146
147
148
149
150
151
152
153
154
      </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">
155
156
            <label class="array-name"
                   data-i18n="[title]canvas.prop.array_name_tt">
157
              <span data-i18n="canvas.prop.array_name"></span>
158
              <input onchange="update_array_attr(this);"
159
160
                     class="array-name"
                     type="text"
161
162
                     name="array_name"
                     id="array_name_input">
163
            </label>
164
165
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
166
              <span data-i18n="canvas.prop.array_size"></span>
167
              <input onchange="update_array_attr(this);"
168
169
170
                     class="array-size"
                     type="text"
                     name="array_size">
171
            </label>
172
173
174
175
176
177
178
            <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">
179
180
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
181
182
183
184
185
            <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">
186
187
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
188
            <br/>
189

190
191
            <span data-i18n="canvas.prop.array_style"></span>
            <br/>
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
            <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>
246
247
248
249
          </div>

      <div class="array-fill">
        <label data-i18n="[title]canvas.prop.array_fill_tt">
250
          <input onchange="update_array_attr(this);"
251
252
                 type="color"
                 name="array_fill">
253
254
255
256
257
258
259
          <span data-i18n="canvas.prop.array_fill"></span>
        </label>
        <br>
      </div>

      <div class="array-outline">
        <label data-i18n="[title]canvas.prop.array_outline_tt">
260
          <input onchange="update_array_attr(this);"
261
262
                 type="color"
                 name="array_outline">
263
264
265
266
267
          <span data-i18n="canvas.prop.array_outline"></span>
        </label>
        <br>
      </div>

268
269
270
271
272
      <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
273
                 id="array_in_existing_graph"
274
275
276
277
278
                 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
279
280
281
282
283
284
285
286
287
288
289
290

      <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>
291
292
293
      </fieldset> 

    <div class="submit_buttons">
294
      <button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
295
296
        <span data-i18n="iem.prop.ok"></span>
      </button>
297
      <button type="button" id="apply_button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
298
299
        <span data-i18n="iem.prop.apply"></span>
      </button>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
300
301
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.close_tt">
        <span data-i18n="iem.prop.close"></span>
302
303
304
305
306
307
308
      </button>
    </div>

  </form> 
  </div>      

  <script>
309
"use strict";
310
var gui = require("nw.gui");
311
var pdgui = require("./pdgui.js");
312

313
314
// For translations
var l = pdgui.get_local_string;
315

316
// gui preset
317
pdgui.skin.apply(window);
318

319
var pd_object_callback;
320

321
322
323
324
// nested arrays of attributes for each garray
// in this canvas
var pd_garray_attrs;
var new_array_dialog;
325

326
function ok() {
327
328
329
330
331
332
    // 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();
333
334
335
    apply();
    cancel();
}
336

Jonathan Wilkes's avatar
Jonathan Wilkes committed
337
function toggle_fill_color(value) {
338
    var fill_color_div =  document.getElementsByClassName("array-fill")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
339
    if (value === 3) {
340
        fill_color_div.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
341
    } else {
342
        fill_color_div.classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
343
344
345
    }
}

346
function flag_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
347
    var array_attr, arrays_select, name, value, flag;
348
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
349
    array_attr = pd_garray_attrs[arrays_select.value];
350
351
    name = elem.name;
    // get value from radio group, checked from checkboxes
352
    if (name === "array_style") {
353
        value = document.querySelector('input[name="array_style"]:checked').value;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
354
355
356
        // Toggle visibility of the fill color button-- only show for bar
        // graph style (= 3)
        toggle_fill_color(+value);
357
    } else {
358
        // "+" for casting boolean to number
359
360
        value = +elem.checked;
    }
361
    //pdgui.post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
362
    flag = array_attr.array_flags;
363
364
365
366
367
368
369
370
371
372
373
374
375
376
    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;
377
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
378
    array_attr.array_flags = flag;
379
}
380

381
function flag2_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
382
    var array_attr, arrays_select, name, value, flag;
383
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
384
    array_attr = pd_garray_attrs[arrays_select.value];
385
386
    name = elem.name;
    // get value from radio group, checked from checkboxes
387
    // "+" for casting boolean to number
388
    value = +elem.checked;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
389
    array_attr[name] = value;
390
}
391

Jonathan Wilkes's avatar
Jonathan Wilkes committed
392
function array_delete_change(elem) {
393
    var arrays_select = document.getElementById("arrays_select"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
394
395
396
397
        array_attr = pd_garray_attrs[arrays_select.value];
    array_attr.array_delete = elem.checked;
}

398
399
400
401
402
403
404
405
406
407
408
409
410
411
// 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
412
    var array_index, array_attr, arrays_select, name;
413
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
414
    array_attr = pd_garray_attrs[arrays_select.value];
415
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
416
    array_attr[name] = elem.value;
417
    if (elem.name === "array-fill") {
418
419
        // Not sure what this was for...
        //array-fill
Jonathan Wilkes's avatar
Jonathan Wilkes committed
420
    }
421
}
422

423
424
425
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
426
427
428
429
430
431
432
    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
433
                    elem = document.getElementsByName("array_save")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
434
435
                    elem.checked = (value & 1) != 0;
                    // jump on click
436
                    elem = document.getElementsByName("array_jump")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
437
438
                    elem.checked = (value & 16) != 0;
                    // draw style
439
                    style_opts = document.getElementsByName("array_style");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
440
441
442
443
444
445
446
447
                    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
448
                    //pdgui.post("name is " + name);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
449
450
451
452
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
453
454
        }
    }
455
}
456

457
var arrays_select = document.getElementById("arrays_select");
458
459
arrays_select.addEventListener("change", function(evt) {
    array_choose(evt.target.value);
460
461
});

462
463
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
464
465
466
467
468
469
470
    set_gop(this.checked);
});

function update_gop_form(opts, state) {
    var elem, i;
    for(i = 0; i < opts.length; i++) {
        elem = opts[i];
471
472
        if (elem.type === "checkbox" ||
            elem.type === "text") {
473
474
475
            elem.disabled = state ? false : true;
        }
        if (state) {
476
            elem.classList.remove("disabled");
477
        } else {
478
            elem.classList.add("disabled");
479
480
        }
    }
481
}
482

483
484
485
486
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
487
488
489
490
    w = document.getElementsByName("x_pix")[0];
    h = document.getElementsByName("y_pix")[0];
    xoff = document.getElementsByName("x_margin")[0];
    yoff = document.getElementsByName("y_margin")[0];
491
    if (w.value === "0" && h.value === "0") {
492
493
494
495
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
496
    }
497
498
    gop_click_count++;
}
499

500
function show_gop_name_and_args_checkbutton(flag) {
501
    var row = document.getElementsByClassName("hide_name_row")[0];
502
503
504
    row.style.setProperty("visibility", flag ? "visible" : "hidden");
}

505
506
507
508
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
509
    }
510
511
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
512
513
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
514
    // Hide or show the "hide_name" row
515
    show_gop_name_and_args_checkbutton(state);
516
}
517

518
519
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
520
    return arg.split(" ").join(fake_space);
521
}
522

523
function get_input(name) {
524
525
    var elem = document.getElementsByName(name)[0];
    return (elem.type === "checkbox") ? elem.checked : elem.value;
526
}
527

528
529
// get a value from the garray attr array
function get_array_value(name, attrs) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
530
    return attrs[name];
531
532
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
533
534
535
536
537
538
539
540
541
542
// 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) {
543
        return document.getElementById("array_in_existing_graph").checked ?
Jonathan Wilkes's avatar
Jonathan Wilkes committed
544
545
546
547
548
549
550
551
            "1" : "0";
    } else if (pd_garray_attrs.length > 1) {
        return attrs.array_delete ? "1" : "0";
    } else {
        return "0";
    }
}

552
function apply() {
553
    var gop, hide_name, slot_4;
554
    // If this is a dialog to create a new array
555
556
557
    // skip the canvas dialog callback
    if (!new_array_dialog) {
        // Note: the "+" casts Boolean to Number
558
559
        gop = +get_input("gop");
        hide_name = +get_input("hide_name");
560

561
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
562
563
            +get_input("x_scale"),
            +get_input("y_scale"),
564
            (gop ? gop + 2 * hide_name : 0), // No hide_name bit if gop is off
565
566
567
568
            +get_input("x1"),
            +get_input("y1"),
            +get_input("x2"),
            +get_input("y2"),
569
570
571
            +get_input("x_pix"),
            +get_input("y_pix"),
            +get_input("x_margin"),
572
573
574
            +get_input("y_margin"),
            +get_input("no_scroll"),
            +get_input("no_menu")
575
        );
576
    }
577

578
579
    // Now send the array properties, in a separate
    // message for each array
580
581
    pd_garray_attrs.forEach(function(attrs) {
        var i;
582
        name = get_array_value("array_name", attrs);
583
        var arr = name.split("");
584
585
586
        // This is a bit too complicated-- isn't there a standardized
        // interface for doing this?
        for (i = 0; i < arr.length; i++) {
587
588
589
590
            if (arr[i] === "$" && i+1 < arr.length &&
                arr[i+1] >= "0" && arr[i+1] <= "9") {
                arr[i] = "#";
            }
591
        }
592
        name = arr.join("");
593
        pdgui.pdsend(
594
595
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
596
            name,
597
598
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
599
            get_array_slot_4(attrs),
600
601
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
602
603
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
604
        );
605
    });
606
}
607

608
609
610
function cancel() {
    var i, attrs, gfxstub;
    //window.close(true);
611
    pdgui.pdsend(pd_object_callback, "cancel");
612
613
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
614
        gfxstub = attrs.array_gfxstub;
615
        pdgui.pdsend(gfxstub, "cancel");
616
    }
617
}
618

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

651
// Set up arrays in an object
652

Jonathan Wilkes's avatar
Jonathan Wilkes committed
653
function init_arrays(attr_objects) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
654
    if (attr_objects.length) {
655
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
656
        populate_array_form(attr_objects);
657
        // hide x1 and x2 for garrays-- they
Jonathan Wilkes's avatar
Jonathan Wilkes committed
658
659
660
        // automatically get set to the array size
        document.getElementsByName("x1")[0].disabled = true;
        document.getElementsByName("x2")[0].disabled = true;
661
    }
662
}
663

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

696
697
698
699
    // Disabling the menus does not yet work, so we hide that button for
    // the moment
    document.getElementsByClassName("no_menu")[0].style.setProperty("display",
        "none");
700
701
    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
702
703
    // labels and form elements.  That makes it snappier, at least
    // on older machines.
704
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
705
    pdgui.resize_window(pd_object_callback);
706
707
}

708
function tr_text(id) {
709
710
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
711
712
713
714
715
}

// Stop-gap translator
function translate_form() {
    var i
716
    var elements = document.querySelectorAll("[data-i18n]");
717
718
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
719
        if (data.slice(0,7) === "[title]") {
720
721
722
723
724
725
726
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
727
728
729
730
731
732
733
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) {
734
                prop_group.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
735
            }
736
            if (prop === "display_flags") {
737
                // reminder: "!!" forces Boolean, "+" forces Number type
Jonathan Wilkes's avatar
Jonathan Wilkes committed
738
                var flag = +attr_object[prop];
739
                document.getElementsByName("gop")[0].checked = !!flag;
740
741
                document.getElementsByName("hide_name")[0].checked = !!(flag & 2);
                // set visibility of the "hide_name" checkbox based on
742
743
744
                // 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
745
746
747
                // Set the gop-related parts of the form to be
                // enabled/disabled based on state
                set_gop(!!flag);
748
            }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
749
750
            var elem = document.getElementsByName(prop);
            if (elem.length > 0) {
751
                if(prop.slice(-5) === "color") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
752
753
                    var hex_string = Number(attr_object[prop]).toString(16);
                    var color_string = "#" +
754
                        (hex_string === "0" ? "000000" : hex_string);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
755
                    elem[0].value = color_string;
756
                } else if (elem[0].type === "checkbox") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
757
758
759
760
761
762
                    // 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];
                }
763
764
765
            }
        }
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
766
767
768
    // Some special cases for hiding options for garray dialogs
    if (pd_garray_attrs.length > 0) {
        // Graph-on-parent toggle
769
        document.getElementsByClassName("display_flags")[0]
770
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
771
        // Graph-on-parent flag for hiding object name/args
772
        document.getElementsByClassName("display_flags")[1]
773
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
774
        // GOP-rect margins don't make sense for garrays, so hide them
775
        document.getElementsByClassName("x_margin")[0]
776
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
777
        // X/Y scaling-- garray is always in a gop so not needed
778
        document.getElementsByClassName("x_scale")[0]
779
            .classList.add("hidden");
780
781
782
783
784
        // scrollbars and menu
        document.getElementsByClassName("no_scroll")[0]
            .classList.add("hidden");
         document.getElementsByClassName("no_menu")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
785
    }
786
787
788
789
}

function add_events(name) {
    // closing the Window
790
    gui.Window.get().on("close", function() {
791
        // this needs to do whatever the "cancel" button does
792
        cancel();
793
    });
794
    pdgui.dialog_bindings(name);
795
796
797
798
799
}

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