dialog_canvas.html 26.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
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
        <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>
68
          <tr class="display-flags prop hide-name-row">
69
70
71
72
73
74
75
76
77
78
79
80
            <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
        <span data-i18n="iem.prop.ok"></span>
      </button>
279
      <button type="button" id="apply_button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
280
281
        <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;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
336
337
338
        // Toggle visibility of the fill color button-- only show for bar
        // graph style (= 3)
        toggle_fill_color(+value);
339
    } else {
340
        // "+" for casting boolean to number
341
342
        value = +elem.checked;
    }
343
    //pdgui.post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
344
    flag = array_attr.array_flags;
345
346
347
348
349
350
351
352
353
354
355
356
357
358
    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;
359
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
360
    array_attr.array_flags = flag;
361
}
362

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

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

380
function attr_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
381
    var array_index, array_attr, arrays_select, name;
382
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
383
    array_attr = pd_garray_attrs[arrays_select.value];
384
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
385
    array_attr[name] = elem.value;
386
    if (elem.name === "array-fill") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
387
388
        array-fill
    }
389
}
390

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

425
var arrays_select = document.getElementById("arrays_select");
426
427
arrays_select.addEventListener("change", function(evt) {
    array_choose(evt.target.value);
428
429
});

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

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

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

456
457
458
459
var gop_click_count = 0;

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

473
474
475
476
477
function show_gop_name_and_args_checkbutton(flag) {
    var row = document.getElementsByClassName("hide-name-row")[0];
    row.style.setProperty("visibility", flag ? "visible" : "hidden");
}

478
479
480
481
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
482
    }
483
484
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
485
486
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
487
488
    // Hide or show the "hide-name" row
    show_gop_name_and_args_checkbutton(state);
489
}
490

491
492
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
493
    return arg.split(" ").join(fake_space);
494
}
495

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

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

Jonathan Wilkes's avatar
Jonathan Wilkes committed
506
507
508
509
510
511
512
513
514
515
// 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) {
516
        return document.getElementById("array_in_existing_graph").checked ?
Jonathan Wilkes's avatar
Jonathan Wilkes committed
517
518
519
520
521
522
523
524
            "1" : "0";
    } else if (pd_garray_attrs.length > 1) {
        return attrs.array_delete ? "1" : "0";
    } else {
        return "0";
    }
}

525
function apply() {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
526
    var i, attrs, gop, hide_name, slot_4;
527
528
529
530
    // 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
531
532
        gop = +document.getElementsByName("gop")[0].checked;
        hide_name = +document.getElementsByName("hide-name")[0].checked;
533

534
535
536
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
            +get_input("x-scale"),
            +get_input("y-scale"),
537
            (gop ? gop + 2 * hide_name : 0), // No hide_name bit if gop is off
538
539
540
541
542
543
544
545
            +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")
546
        );
547
    }
548

549
550
551
552
    // 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];
553
554
555
        name = get_array_value("array_name", attrs);
        if (name.slice(0, 1) === "$") {
            name = "#" + name.slice(1);
556
        }
557
        pdgui.pdsend(
558
559
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
560
            name,
561
562
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
563
            get_array_slot_4(attrs),
564
565
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
566
567
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
568
        );
569

570
    }
571
}
572

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

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

616
// Set up arrays in an object
617

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

629
630
631
// 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
632
function register_window_id(gfxstub, attr_objects) {
633
    pd_object_callback = gfxstub;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
634
635
636
    var canvas_fieldsets, i, prop;
    // attr_objects[0]: canvas properties
    // attr_objects[1...n-1]: array properties
637
638
639
640
    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
641
642
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
643
    if (attr_objects[0].hasOwnProperty("array_gfxstub")) {
644
        pd_garray_attrs = attr_objects;
645
        new_array_dialog = true; // this is a new array dialog
646
        canvas_fieldsets = document.getElementsByClassName("canvas");
647
        for (i = 0; i < canvas_fieldsets.length; i++) {
648
            canvas_fieldsets[i].classList.add("hidden");
649
        }
650
651
652
653
        // Hide the "Apply" button, as it doesn't make sense for
        // creating a new array
        document.getElementById("apply_button").style.setProperty("display",
            "none");
654
    } else {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
655
        pd_garray_attrs = attr_objects.slice(1);
656
        new_array_dialog = false; // this is a canvas/array props dialog
Jonathan Wilkes's avatar
Jonathan Wilkes committed
657
        populate_form(attr_objects[0]);
658
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
659
        init_arrays(pd_garray_attrs);
660

661
662
    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
663
664
    // labels and form elements.  That makes it snappier, at least
    // on older machines.
665
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
666
    pdgui.resize_window(pd_object_callback);
667
668
}

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

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

Jonathan Wilkes's avatar
Jonathan Wilkes committed
688
689
690
691
692
693
694
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) {
695
                prop_group.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
696
            }
697
            if (prop === "display-flags") {
698
                // reminder: "!!" forces Boolean, "+" forces Number type
Jonathan Wilkes's avatar
Jonathan Wilkes committed
699
                var flag = +attr_object[prop];
700
701
                document.getElementsByName("gop")[0].checked = !!flag;
                document.getElementsByName("hide-name")[0].checked = !!(flag & 2);
702
703
704
705
                // set visibility of the "hide-name" checkbox based on
                // 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
706
707
708
                // Set the gop-related parts of the form to be
                // enabled/disabled based on state
                set_gop(!!flag);
709
            }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
710
711
            var elem = document.getElementsByName(prop);
            if (elem.length > 0) {
712
                if(prop.slice(-5) === "color") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
713
714
                    var hex_string = Number(attr_object[prop]).toString(16);
                    var color_string = "#" +
715
                        (hex_string === "0" ? "000000" : hex_string);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
716
                    elem[0].value = color_string;
717
                } else if (elem[0].type === "checkbox") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
718
719
720
721
722
723
                    // 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];
                }
724
725
726
            }
        }
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
727
728
729
    // Some special cases for hiding options for garray dialogs
    if (pd_garray_attrs.length > 0) {
        // Graph-on-parent toggle
730
731
        document.getElementsByClassName("display-flags")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
732
        // Graph-on-parent flag for hiding object name/args
733
734
        document.getElementsByClassName("display-flags")[1]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
735
        // GOP-rect margins don't make sense for garrays, so hide them
736
737
        document.getElementsByClassName("x-margin")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
738
        // X/Y scaling-- garray is always in a gop so not needed
739
740
        document.getElementsByClassName("x-scale")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
741
    }
742
743
744
745
}

function add_events(name) {
    // closing the Window
746
    gui.Window.get().on("close", function() {
747
        // this needs to do whatever the "cancel" button does
748
        cancel();
749
    });
750
    pdgui.dialog_bindings(name);
751
752
753
754
755
}

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