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">
6
    <title>Pd Preferences</title>
7
8
9
10
11
  </head>
  <body>
    <div class="container noselect">
    <form> 

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

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

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

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

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

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

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

      </fieldset> 


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

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

          <div class="array-name prop">
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
143
              <input onchange="attr_change(this);"
                     class="array-name"
                     type="text"
                     name="array_name">
144
            </label>
145
146
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
147
              <span data-i18n="canvas.prop.array_size"></span>
148
149
150
151
              <input onchange="attr_change(this);"
                     class="array-size"
                     type="text"
                     name="array_size">
152
            </label>
153
154
155
156
157
158
159
            <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">
160
161
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
162
163
164
165
166
            <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">
167
168
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
169
            <br/>
170

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

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

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

239
240
241
242
243
      <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
244
                 id="array_in_existing_graph"
245
246
247
248
249
                 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
250
251
252
253
254
255
256
257
258
259
260
261

      <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>
262
263
264
      </fieldset> 

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

  </form> 
  </div>      

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

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

287
// gui preset
288
pdgui.skin.apply(window);
289

290
var pd_object_callback;
291

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

297
function ok() {
298
299
300
301
302
303
    // 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();
304
305
306
    apply();
    cancel();
}
307

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

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

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

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

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

386
387
388
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
389
390
391
392
393
394
395
396
397
398
399
400
    for (name in array_attr) {
        if (array_attr.hasOwnProperty(name)) {
            console.log("name is " + name);
        }
    }
    for (name in array_attr) {
        if (array_attr.hasOwnProperty(name)) {
            value = array_attr[name];
            switch (name) {
                case "array_gfxstub": break;
                case "array_flags":
                    // save contents
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
428
arrays_select.addEventListener("change", function(evt) {
    pdgui.post("changing to array index " + evt.target.value);
    array_choose(evt.target.value);
429
430
});

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

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

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

457
458
459
460
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
461
462
463
464
465
    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") {
466
467
468
469
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
470
    }
471
472
    gop_click_count++;
}
473

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

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

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

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

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

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

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

538
539
540
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
            +get_input("x-scale"),
            +get_input("y-scale"),
541
            (gop + 2 * hide_name),
542
543
544
545
546
547
548
549
            +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")
550
        );
551
    }
552

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

574
    }
575
}
576

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

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

620
// Set up arrays in an object
621

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

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

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

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

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

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

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

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