dialog_canvas.html 26.1 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
281
282
'use strict';
var nw = require('nw.gui'); 
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
303
304
305
306
307
308
309
310
function toggle_fill_color(value) {
    var fill_color_div =  document.getElementsByClassName('array-fill')[0];
    if (value === 3) {
        fill_color_div.classList.remove('hidden');
    } else {
        fill_color_div.classList.add('hidden');
    }
}

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
317
318
319
    name = elem.name;
    // get value from radio group, checked from checkboxes
    if (name === 'array_style') {
        value = document.querySelector('input[name="array_style"]:checked').value;
        pdgui.gui_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
325
326
        // '+' for casting boolean to number
        value = +elem.checked;
    }
327
    //pdgui.gui_post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
328
    flag = array_attr.array_flags;
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
    pdgui.gui_post("flag before is " + flag);
    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
346
    array_attr.array_flags = flag;
    pdgui.gui_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
355
356
    name = elem.name;
    // get value from radio group, checked from checkboxes
    // '+' for casting boolean to number
    value = +elem.checked;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
357
358
    array_attr[name] = value;
    pdgui.gui_post("array is " + array_attr);
359
}
360

Jonathan Wilkes's avatar
Jonathan Wilkes committed
361
362
363
364
365
366
function array_delete_change(elem) {
    var arrays_select = document.getElementById('arrays_select'),
        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
373
374
375
    array_attr[name] = elem.value;
    if (elem.name === 'array-fill') {
        array-fill
    }
376
377
378
    pdgui.gui_post("name is " + elem.name);
    pdgui.gui_post("value is " + elem.value);
}
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
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
    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
                    elem = document.getElementsByName('array_save')[0];
                    elem.checked = (value & 1) != 0;
                    // jump on click
                    elem = document.getElementsByName('array_jump')[0];
                    elem.checked = (value & 16) != 0;
                    // draw style
                    style_opts = document.getElementsByName('array_style');
                    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
                    pdgui.gui_post("name is " + name);
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
416
417
        }
    }
418
}
419

420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
var arrays_select = document.getElementById('arrays_select');
arrays_select.addEventListener('change', function() {
    pdgui.gui_post('changed the thing is ' + this.value);
    array_choose(this.value);
});

var gop_label = document.getElementById('gop_label');
gop_label.addEventListener('click', function() {
    document.getElementsByName('gop')[0].click();
});

var gop_button = document.getElementsByName('gop')[0];
gop_button.addEventListener('click', function(evt) {
    set_gop(this.checked);
});

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

452
453
454
455
456
457
458
459
460
461
462
463
464
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
    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') {
        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
476
477
478
    gop_opts = document.getElementsByClassName('gop_opt');
    no_gop_opts = document.getElementsByClassName('no_gop_opt');
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
}
479

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

485
486
487
488
489
function strip_problem_chars(arg) {
    var problem_chars = [';', ',', '{', '}', '\\'];
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
        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
515
516
517
518
519
520
521
522
523

// 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) {
        return document.getElementById('array_in_existing_graph').checked ?
            "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
530
531
532
    // 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
        gop = +document.getElementsByName('gop')[0].checked;
        hide_name = +document.getElementsByName('hide-name')[0].checked;

533
        pdgui.pdsend(pd_object_callback, 'donecanvasdialog',
534
535
536
537
538
539
540
541
542
543
            +get_input('x-scale'),
            +get_input('y-scale'),
            (gop + 2 * hide_name),
            +get_input('x1'),
            +get_input('y1'),
            +get_input('x2'),
            +get_input('y2'),
            +get_input('x-pix'),
            +get_input('y-pix'),
            +get_input('x-margin'),
544
545
            +get_input('y-margin')
        );
546
    }
547

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

569
    }
570
}
571

572
573
574
575
function cancel() {
    var i, attrs, gfxstub;
    pdgui.gui_post("closing the window at this point");
    //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) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
585
586
587
    var arrays_select = document.getElementById('arrays_select'),
        a_field = document.getElementById('arrays'),
        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
Jonathan Wilkes's avatar
Jonathan Wilkes committed
591
592
593
        arrays_select.classList.remove('hidden');
    }
    for (i = 0; i < objects.length; i++) {
594
595
596
597
598
        opt = document.createElement('option');
        opt.setAttribute('value', i);
        opt.textContent = 'Array #' + (i+1);
        arrays_select.appendChild(opt);
    }
599
600
601
602
603
604
    // 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.
    if (!new_array_dialog || 1) {  // to re-enable, remove the '|| 1'
605
606
        document.getElementsByClassName('array_in_existing_graph')[0]
            .classList.add('hidden');
607
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
608
609
610
611
612
    // Hide the "delete this array" button if we don't have
    // more than one array
    if (new_array_dialog || objects.length < 2) {
        document.getElementsByClassName('array_delete')[0].classList.add('hidden');
    }
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
636
637
    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)) {
            pdgui.gui_post(prop + ": " + attr_objects[0][prop]);
        }
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
645
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
    if (attr_objects[0].hasOwnProperty('array_gfxstub')) {
646
647
648
649
        new_array_dialog = true; // this is a new array dialog
        canvas_fieldsets = document.getElementsByClassName('canvas');
        for (i = 0; i < canvas_fieldsets.length; i++) {
            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
662
    // 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.
    document.getElementsByClassName('container')[0].style.setProperty('display', 'inline');
663
    pdgui.resize_window(pd_object_callback);
664
665
}

666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
function tr_text(id) {
    var elem = document.getElementById('iem.prop.' + id);
    elem.textContent = l('iem.prop.' + id);
}

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

function add_events(name) {
    // closing the Window
    nw.Window.get().on("close", function() {
        // 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>