dialog_canvas.html 26 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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
      </fieldset> 

    <div class="submit_buttons">
      <button type="button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
        <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
298
299
300
function ok() {
    apply();
    cancel();
}
301

Jonathan Wilkes's avatar
Jonathan Wilkes committed
302
function toggle_fill_color(value) {
303
    var fill_color_div =  document.getElementsByClassName("array-fill")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
304
    if (value === 3) {
305
        fill_color_div.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
306
    } else {
307
        fill_color_div.classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
308
309
310
    }
}

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

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

Jonathan Wilkes's avatar
Jonathan Wilkes committed
361
function array_delete_change(elem) {
362
    var arrays_select = document.getElementById("arrays_select"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
363
364
365
366
        array_attr = pd_garray_attrs[arrays_select.value];
    array_attr.array_delete = elem.checked;
}

367
function attr_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
368
    var array_index, array_attr, arrays_select, name;
369
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
370
    array_attr = pd_garray_attrs[arrays_select.value];
371
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
372
    array_attr[name] = elem.value;
373
    if (elem.name === "array-fill") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
374
375
        array-fill
    }
376
377
    pdgui.post("name is " + elem.name);
    pdgui.post("value is " + elem.value);
378
}
379

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

420
421
var arrays_select = document.getElementById("arrays_select");
arrays_select.addEventListener("change", function() {
422
    pdgui.post("changed the thing is " + this.value);
423
424
425
    array_choose(this.value);
});

426
427
428
var gop_label = document.getElementById("gop_label");
gop_label.addEventListener("click", function() {
    document.getElementsByName("gop")[0].click();
429
430
});

431
432
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
433
434
435
436
437
438
439
    set_gop(this.checked);
});

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

452
453
454
455
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
456
457
458
459
460
    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") {
461
462
463
464
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
465
    }
466
467
    gop_click_count++;
}
468

469
470
471
472
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
473
    }
474
475
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
476
477
478
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
}
479

480
481
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
482
    return arg.split(" ").join(fake_space);
483
}
484

485
function strip_problem_chars(arg) {
486
    var problem_chars = [";", ",", "{", "}", "\\"];
487
488
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
489
        ret = ret.split(";").join("");
490
    }
491
492
    return ret;
}
493

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

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

Jonathan Wilkes's avatar
Jonathan Wilkes committed
504
505
506
507
508
509
510
511
512
513
514

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

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

533
534
535
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
            +get_input("x-scale"),
            +get_input("y-scale"),
536
            (gop + 2 * hide_name),
537
538
539
540
541
542
543
544
            +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")
545
        );
546
    }
547

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

569
    }
570
}
571

572
573
function cancel() {
    var i, attrs, gfxstub;
574
    pdgui.post("closing the window at this point");
575
    //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
600
601
602
603
    // 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.
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
619
620
function init_arrays(attr_objects) {
    pd_garray_attrs = attr_objects; 
    if (attr_objects.length > 0) {
621
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
622
        populate_array_form(attr_objects);
623
    }
624
}
625

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

658
659
660
661
    // 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.
662
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
663
    pdgui.resize_window(pd_object_callback);
664
665
}

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

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

Jonathan Wilkes's avatar
Jonathan Wilkes committed
685
686
687
688
689
690
691
692
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);
693
                prop_group.classList.remove("hidden");
694
            } else {
695
                pdgui.post("Error: couldn't find iemgui prop group for " +
Jonathan Wilkes's avatar
Jonathan Wilkes committed
696
697
                    prop);
            }
698
699
            if (prop === "display-flags") {
                // protip: "!!" forces Boolean, "+" forces Number type
Jonathan Wilkes's avatar
Jonathan Wilkes committed
700
                var flag = +attr_object[prop];
701
702
                document.getElementsByName("gop")[0].checked = !!flag;
                document.getElementsByName("hide-name")[0].checked = !!(flag & 2);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
703
704
705
706
707
708
                // 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) {
709
                if(prop.slice(-5) === "color") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
710
711
                    var hex_string = Number(attr_object[prop]).toString(16);
                    var color_string = "#" +
712
                        (hex_string === "0" ? "000000" : hex_string);
713
                    pdgui.post("color is " + color_string);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
714
                    elem[0].value = color_string;
715
                } else if (elem[0].type === "checkbox") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
716
717
                    // The attr here is a string, so we need to
                    // force it to number, hence the "+" below
718
                    pdgui.post("found a CHECKED ITEM!!!");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
719
720
721
722
                    elem[0].checked = +attr_object[prop];
                } else {
                    elem[0].value = attr_object[prop];
                }
723
724
725
            }
        }
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
726
727
728
729
    // Some special cases for hiding options for garray dialogs
    if (pd_garray_attrs.length > 0) {
console.log("fungyfungyfungyfungy");
        // 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
749
        //pdgui.pdsend(name + " menuclose 0");
        //cancel();
750
751
752
        pdgui.remove_dialogwin(pd_object_callback);
        this.close(true);
    });
753
    pdgui.dialog_bindings(name);
754
755
756
757
758
}

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