dialog_canvas.html 26.4 KB
Newer Older
1
2
3
<!DOCTYPE html>
<html>
  <head>
4
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
5
    <title>Pd Preferences</title>
6
7
8
9
10
  </head>
  <body>
    <div class="container noselect">
    <form> 

11
      <fieldset class="canvas"> 
12
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
271
272
273
274
275
276
277
278
279
        <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>
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.cancel_tt">
        <span data-i18n="iem.prop.cancel"></span>
      </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
288
// gui preset
pdgui.skin.apply(this);
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
401
    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)) {
console.log("namer is " + name);
            value = array_attr[name];
            switch (name) {
                case "array_gfxstub": break;
                case "array_flags":
                    // save contents
402
                    elem = document.getElementsByName("array_save")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
403
404
                    elem.checked = (value & 1) != 0;
                    // jump on click
405
                    elem = document.getElementsByName("array_jump")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
406
407
                    elem.checked = (value & 16) != 0;
                    // draw style
408
                    style_opts = document.getElementsByName("array_style");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
409
410
411
412
413
414
415
416
                    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
417
                    pdgui.post("name is " + name);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
418
419
420
421
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
422
423
        }
    }
424
}
425

426
427
var arrays_select = document.getElementById("arrays_select");
arrays_select.addEventListener("change", function() {
428
    pdgui.post("changed the thing is " + this.value);
429
430
431
    array_choose(this.value);
});

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

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

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

458
459
460
461
var gop_click_count = 0;

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

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

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

491
function strip_problem_chars(arg) {
492
    var problem_chars = [";", ",", "{", "}", "\\"];
493
494
    var ret = arg;
    for(var 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
520

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

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

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

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

575
    }
576
}
577

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

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

622
// Set up arrays in an object
623
    
Jonathan Wilkes's avatar
Jonathan Wilkes committed
624
625
626
function init_arrays(attr_objects) {
    pd_garray_attrs = attr_objects; 
    if (attr_objects.length > 0) {
627
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
628
        populate_array_form(attr_objects);
629
    }
630
}
631

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

664
665
666
667
    // 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.
668
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
669
    pdgui.resize_window(pd_object_callback);
670
671
}

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

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

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

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

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