dialog_canvas.html 29 KB
Newer Older
1
2
3
<!DOCTYPE html>
<html>
  <head>
4
    <meta charset="UTF-8">
5
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
Jonathan Wilkes's avatar
Jonathan Wilkes committed
6
    <title>Canvas Dialog</title>
7
  </head>
8
  <body class="dialog_body">
9
10
11
    <div class="container noselect">
    <form> 

12
      <fieldset class="canvas"> 
13
14
15
        <legend data-i18n="canvas.prop.heading.gop"></legend> 

        <table class="pairs">
16
17
          <tr class="prop no_scroll hidden" data-i18n="[title]canvas.prop.no_scroll_tt">
            <td colspan="2">
18
              <label>
19
20
21
                <input type="checkbox" name="no_scroll" value="off">
                <span data-i18n="canvas.prop.no_scroll"></span>
              </label>
22
            </td>
23
24
25
          </tr>
          <tr class="prop no_menu hidden" data-i18n="[title]canvas.prop.no_menu_tt">
            <td colspan="2">
26
              <label>
27
28
29
30
31
32
                <input type="checkbox" name="no_menu" value="off">
                <span data-i18n="canvas.prop.no_menu"></span>
              </label>
            </td>
          </tr>
          <tr class="display_flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
33
            <td colspan="2">
34
35
36
37
              <label>
                <input type="checkbox" name="gop" value="on">
                <span data-i18n="canvas.prop.gop"></span>
              </label>
38
39
            </td>
          </tr>
40
          <tr class="x_pix prop hidden">
41
42
43
44
45
46
            <td>
            </td>
            <td>
              <table>
                <tr>
                  <td> 
47
                    <label class="gop_opt" data-i18n="[title]canvas.prop.x_pix_tt">
48
49
50
51
                      <span data-i18n="canvas.prop.x_pix"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.x_pix_tt">
52
                    <input class="gop_opt" type="text" name="x_pix">
53
54
                  </td>
                  <td>
55
                    <label class="gop_opt" data-i18n="[title]canvas.prop.y_pix_tt">
56
57
58
59
                      <span data-i18n="canvas.prop.y_pix"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.y_pix_tt">
60
                    <input class="gop_opt" type="text" name="y_pix">
61
62
                  </td>
                </tr>
63
                <tr class="x_margin prop hidden">
64
                  <td>
65
                    <label class="gop_opt" data-i18n="[title]canvas.prop.x_margin_tt">
66
67
68
69
                      <span data-i18n="canvas.prop.x_margin"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.x_margin_tt">
70
                    <input class="gop_opt" type="text" name="x_margin">
71
72
                  </td>
                  <td>
73
                    <label class="gop_opt" data-i18n="[title]canvas.prop.y_margin_tt">
74
75
76
77
                      <span data-i18n="canvas.prop.y_margin"></span>
                    </label>
                  </td>
                  <td data-i18n="[title]canvas.prop.y_margin_tt">
78
                    <input class="gop_opt" type="text" name="y_margin">
79
80
81
82
83
                  </td>
                </tr>
              </table>
            </td>
          </tr>
84
          <tr class="display_flags prop hide_name_row">
85
86
87
            <td>
            </td>
            <td>
88
              <label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
89
                <input class="gop_opt" type="checkbox" name="hide_name" value="on">
90
91
92
93
94
95
96
                <span data-i18n="canvas.prop.hide_name"></span>
              </label>
            </td>
          </tr>
        </table>
      </fieldset> 

97
      <fieldset class="canvas"> 
98
        <legend data-i18n="canvas.prop.heading.data_scaling"></legend> 
99
<div style="display: inline-block; align: left;">
100
          <div class="x_scale prop hidden">
101
            <nobr>
102
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
103
              <span data-i18n="canvas.prop.x_scale"></span>
104
              <input class="no_gop_opt" type="text" name="x_scale">
105
            </label>
106
            <label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
107
              <span data-i18n="canvas.prop.y_scale"></span>
108
              <input class="no_gop_opt" type="text" name="y_scale">
109
            </label>
110
            </nobr>
111
112
113
114
          </div>

    <div class="gop-range">
        <div class="y1 prop hidden">
115
          <label class="gop_opt" data-i18n="[title]canvas.prop.y1_tt">
116
117
            <span data-i18n="canvas.prop.y1"></span>
            <br>
118
          <input class="gop_opt" type="text" name="y1">
119
120
121
122
123
124
125
          </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>
126
            <input class="gop_opt" type="text" name="x1">
127
128
          </label>
          <label class="gop_opt" data-i18n="[title]canvas.prop.x2_tt">
129
            <input class="gop_opt" type="text" name="x2">
130
131
132
133
134
135
            <span data-i18n="canvas.prop.x2"></span>
          </label>
          <br>
       </div>

       <div class="y2">
136
137
         <label class="gop_opt" data-i18n="[title]canvas.prop.y2_tt">
           <input class="gop_opt" type="text" name="y2">
138
139
140
141
142
           <br>
           <span data-i18n="canvas.prop.y2"></span>
         </label>
       </div>
    </div>
143
</div>
144
145
146
147
148
149
150
151
152
153
154
      </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">
155
156
            <label class="array-name"
                   data-i18n="[title]canvas.prop.array_name_tt">
157
              <span data-i18n="canvas.prop.array_name"></span>
158
              <input onchange="update_array_attr(this);"
159
                     class="array-name"
160
                     type="text"
161
162
                     name="array_name"
                     id="array_name_input">
163
            </label>
164
165
            <label class="array-size"
                   data-i18n="[title]canvas.prop.array_size_tt">
166
              <span data-i18n="canvas.prop.array_size"></span>
167
              <input onchange="update_array_attr(this);"
168
                     class="array-size"
169
                     type="text"
170
                     name="array_size">
171
            </label>
172
173
174
175
176
177
178
            <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">
179
180
              <span data-i18n="canvas.prop.array_save"></span>
            </label>
181
182
183
184
185
            <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">
186
187
              <span data-i18n="canvas.prop.array_jump"></span>
            </label>
188
            <br/>
189

190
191
            <span data-i18n="canvas.prop.array_style"></span>
            <br/>
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
            <table class="array_style">
              <tr>
                <td>
                  <label class="polygon"
                         data-i18n="[title]canvas.prop.array_polygon_tt">
                    <input class="array-style"
                           type="radio"
                           id="polygon"
                           value="0"
                           name="array_style"
                           onchange="flag_change(this);">
                    <span data-i18n="canvas.prop.array_polygon"></span>
                  </label>
                </td>
                <td>
                  <label class="points"
                         data-i18n="[title]canvas.prop.array_points_tt">
                    <input class="array-style"
                           type="radio"
                           id="points"
                           value="1"
                           name="array_style"
                           onchange="flag_change(this);">
                    <span data-i18n="canvas.prop.array_points"></span>
                  </label>
                </td>
              </tr>
              <tr>
                <td>
                  <label class="bezier-curve"
                         data-i18n="[title]canvas.prop.array_bezier_tt">
                    <input class="array-style"
                           type="radio"
                           id="bezier"
                           value="2"
                           name="array_style"
                           onchange="flag_change(this);">
                    <span data-i18n="canvas.prop.array_bezier"></span>
                  </label>
                </td>
                <td>
                  <label class="bar-graph"
                         data-i18n="[title]canvas.prop.array_bars_tt">
                    <input class="array-style"
                           type="radio"
                           id="bar-graph"
                           value="3"
                           name="array_style"
                           onchange="flag_change(this);">
                    <span data-i18n="canvas.prop.array_bars"></span>
                  </label>
                </td>
              </tr>
            </table>
246
247
248
249
          </div>

      <div class="array-fill">
        <label data-i18n="[title]canvas.prop.array_fill_tt">
250
          <input onchange="update_array_attr(this);"
251
252
                 type="color"
                 name="array_fill">
253
254
255
256
257
258
259
          <span data-i18n="canvas.prop.array_fill"></span>
        </label>
        <br>
      </div>

      <div class="array-outline">
        <label data-i18n="[title]canvas.prop.array_outline_tt">
260
          <input onchange="update_array_attr(this);"
261
262
                 type="color"
                 name="array_outline">
263
264
265
266
267
          <span data-i18n="canvas.prop.array_outline"></span>
        </label>
        <br>
      </div>

268
269
270
271
272
      <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
273
                 id="array_in_existing_graph"
274
275
276
277
278
                 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
279
280
281
282
283
284
285
286
287
288
289
290

      <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>
291
292
293
      </fieldset> 

    <div class="submit_buttons">
294
      <button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
295
296
        <span data-i18n="iem.prop.ok"></span>
      </button>
297
      <button type="button" id="apply_button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
298
299
        <span data-i18n="iem.prop.apply"></span>
      </button>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
300
301
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.close_tt">
        <span data-i18n="iem.prop.close"></span>
302
303
304
305
306
307
308
      </button>
    </div>

  </form> 
  </div>      

  <script>
309
"use strict";
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
310
311
312
313
314
315
316

if (typeof(pdbundle) !== "undefined"){
    var pdgui = pdbundle.pdgui
  }else{
    var gui = require("nw.gui");
    var pdgui = require("./pdgui.js");
}
317

318
319
// For translations
var l = pdgui.get_local_string;
320

321
// gui preset
322
pdgui.skin.apply(window);
323

324
var pd_object_callback;
325

326
327
328
329
// nested arrays of attributes for each garray
// in this canvas
var pd_garray_attrs;
var new_array_dialog;
330

331
function ok() {
332
333
334
335
336
337
    // 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();
338
339
340
    apply();
    cancel();
}
341

Jonathan Wilkes's avatar
Jonathan Wilkes committed
342
function toggle_fill_color(value) {
343
    var fill_color_div =  document.getElementsByClassName("array-fill")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
344
    if (value === 3) {
345
        fill_color_div.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
346
    } else {
347
        fill_color_div.classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
348
349
350
    }
}

351
function flag_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
352
    var array_attr, arrays_select, name, value, flag;
353
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
354
    array_attr = pd_garray_attrs[arrays_select.value];
355
356
    name = elem.name;
    // get value from radio group, checked from checkboxes
357
    if (name === "array_style") {
358
        value = document.querySelector('input[name="array_style"]:checked').value;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
359
360
361
        // Toggle visibility of the fill color button-- only show for bar
        // graph style (= 3)
        toggle_fill_color(+value);
362
    } else {
363
        // "+" for casting boolean to number
364
365
        value = +elem.checked;
    }
366
    //pdgui.post("value is " + value);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
367
    flag = array_attr.array_flags;
368
369
370
371
372
373
374
375
376
377
378
379
380
381
    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;
382
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
383
    array_attr.array_flags = flag;
384
}
385

386
function flag2_change(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
387
    var array_attr, arrays_select, name, value, flag;
388
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
389
    array_attr = pd_garray_attrs[arrays_select.value];
390
391
    name = elem.name;
    // get value from radio group, checked from checkboxes
392
    // "+" for casting boolean to number
393
    value = +elem.checked;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
394
    array_attr[name] = value;
395
}
396

Jonathan Wilkes's avatar
Jonathan Wilkes committed
397
function array_delete_change(elem) {
398
    var arrays_select = document.getElementById("arrays_select"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
399
400
401
402
        array_attr = pd_garray_attrs[arrays_select.value];
    array_attr.array_delete = elem.checked;
}

403
404
405
406
407
408
409
410
411
412
413
414
415
416
// Placeholder for updating gop margins and coords when the dialog window
// is open. Ideally we want to keep a record of all changes so that clicking
// "Cancel" will undo all of the changes made inside the dialog. However this
// is non-trivial with the canvas dialog because of all the state changes
// one can make to an array in the same dialog. For that reason we replace the
// "Cancel" button with one called "Close".
// The function in pdgui to update the form fields when a user drags the
// dimensions and margins is also used for iemguis, which *do* have a "Cancel"
// button. So we just set up a dummy function here to adhere to that interface.
function update_attr(elem) {
    // do nothing for now...
}

function update_array_attr(elem) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
417
    var array_index, array_attr, arrays_select, name;
418
    arrays_select = document.getElementById("arrays_select");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
419
    array_attr = pd_garray_attrs[arrays_select.value];
420
    name = elem.name;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
421
    array_attr[name] = elem.value;
422
    if (elem.name === "array-fill") {
423
424
        // Not sure what this was for...
        //array-fill
Jonathan Wilkes's avatar
Jonathan Wilkes committed
425
    }
426
}
427

428
429
430
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
431
432
433
434
435
436
437
    for (name in array_attr) {
        if (array_attr.hasOwnProperty(name)) {
            value = array_attr[name];
            switch (name) {
                case "array_gfxstub": break;
                case "array_flags":
                    // save contents
438
                    elem = document.getElementsByName("array_save")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
439
440
                    elem.checked = (value & 1) != 0;
                    // jump on click
441
                    elem = document.getElementsByName("array_jump")[0];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
442
443
                    elem.checked = (value & 16) != 0;
                    // draw style
444
                    style_opts = document.getElementsByName("array_style");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
445
446
447
448
449
450
451
452
                    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
453
                    //pdgui.post("name is " + name);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
454
455
456
457
                    elem = document.getElementsByName(name)[0];
                    elem.value = value;
                    break;
            }
458
459
        }
    }
460
}
461

462
var arrays_select = document.getElementById("arrays_select");
463
464
arrays_select.addEventListener("change", function(evt) {
    array_choose(evt.target.value);
465
466
});

467
468
var gop_button = document.getElementsByName("gop")[0];
gop_button.addEventListener("click", function(evt) {
469
470
471
472
473
474
475
    set_gop(this.checked);
});

function update_gop_form(opts, state) {
    var elem, i;
    for(i = 0; i < opts.length; i++) {
        elem = opts[i];
476
        if (elem.type === "checkbox" ||
477
            elem.type === "text") {
478
479
480
            elem.disabled = state ? false : true;
        }
        if (state) {
481
            elem.classList.remove("disabled");
482
        } else {
483
            elem.classList.add("disabled");
484
485
        }
    }
486
}
487

488
489
490
491
var gop_click_count = 0;

function show_sane_defaults() {
    var w, h, xoff, yoff;
492
493
494
495
    w = document.getElementsByName("x_pix")[0];
    h = document.getElementsByName("y_pix")[0];
    xoff = document.getElementsByName("x_margin")[0];
    yoff = document.getElementsByName("y_margin")[0];
496
    if (w.value === "0" && h.value === "0") {
497
498
499
500
        w.value = 85;
        h.value = 60;
        xoff.value = 100;
        yoff.value = 100;
501
    }
502
503
    gop_click_count++;
}
504

505
function show_gop_name_and_args_checkbutton(flag) {
506
    var row = document.getElementsByClassName("hide_name_row")[0];
507
508
509
    row.style.setProperty("visibility", flag ? "visible" : "hidden");
}

510
511
512
513
function set_gop(state) {
    var gop_opts, no_gop_opts;
    if (state === true && gop_click_count === 0) {
        show_sane_defaults();
514
    }
515
516
    gop_opts = document.getElementsByClassName("gop_opt");
    no_gop_opts = document.getElementsByClassName("no_gop_opt");
517
518
    update_gop_form(gop_opts, state);
    update_gop_form(no_gop_opts, state === false);
519
    // Hide or show the "hide_name" row
520
    show_gop_name_and_args_checkbutton(state);
521
}
522

523
524
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
525
    return arg.split(" ").join(fake_space);
526
}
527

528
function get_input(name) {
529
530
    var elem = document.getElementsByName(name)[0];
    return (elem.type === "checkbox") ? elem.checked : elem.value;
531
}
532

533
534
// get a value from the garray attr array
function get_array_value(name, attrs) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
535
    return attrs[name];
536
537
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
538
539
540
541
542
543
544
545
546
547
// 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) {
548
        return document.getElementById("array_in_existing_graph").checked ?
Jonathan Wilkes's avatar
Jonathan Wilkes committed
549
550
551
552
553
554
555
556
            "1" : "0";
    } else if (pd_garray_attrs.length > 1) {
        return attrs.array_delete ? "1" : "0";
    } else {
        return "0";
    }
}

557
function apply() {
558
    var gop, hide_name, slot_4;
559
    // If this is a dialog to create a new array
560
561
    // skip the canvas dialog callback
    if (!new_array_dialog) {
562
563
        gop = +get_input("gop");
        hide_name = +get_input("hide_name");
564

565
        pdgui.pdsend(pd_object_callback, "donecanvasdialog",
566
567
            +get_input("x_scale"),
            +get_input("y_scale"),
568
            (gop ? gop + 2 * hide_name : 0), // No hide_name bit if gop is off
569
570
571
572
            +get_input("x1"),
            +get_input("y1"),
            +get_input("x2"),
            +get_input("y2"),
573
574
575
            +get_input("x_pix"),
            +get_input("y_pix"),
            +get_input("x_margin"),
576
577
578
            +get_input("y_margin"),
            +get_input("no_scroll"),
            +get_input("no_menu")
579
        );
580
    }
581

582
583
    // Now send the array properties, in a separate
    // message for each array
584
585
    pd_garray_attrs.forEach(function(attrs) {
        var i;
586
        name = get_array_value("array_name", attrs);
587
        var arr = name.split("");
588
589
590
        // This is a bit too complicated-- isn't there a standardized
        // interface for doing this?
        for (i = 0; i < arr.length; i++) {
591
592
593
594
            if (arr[i] === "$" && i+1 < arr.length &&
                arr[i+1] >= "0" && arr[i+1] <= "9") {
                arr[i] = "#";
            }
595
        }
596
        name = arr.join("");
597
        pdgui.pdsend(
598
599
            get_array_value("array_gfxstub", attrs),
            "arraydialog",
600
            name,
601
602
            get_array_value("array_size", attrs),
            get_array_value("array_flags", attrs),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
603
            get_array_slot_4(attrs),
604
605
            0, // xdraw-- not sure if this is still used
            0, // ydraw-- not sure if this is still used
606
607
            get_array_value("array_fill", attrs),
            get_array_value("array_outline", attrs)
608
        );
609
    });
610
}
611

612
613
614
function cancel() {
    var i, attrs, gfxstub;
    //window.close(true);
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
615
    if(pdgui.is_webapp()){
Prakhar Agarwal's avatar
Prakhar Agarwal committed
616
      $("#dialog-modal").modal("hide");
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
617
618
    }

619
    pdgui.pdsend(pd_object_callback, "cancel");
620
621
    for (i = 0; i < pd_garray_attrs.length; i++) {
        attrs = pd_garray_attrs[i];
Jonathan Wilkes's avatar
Jonathan Wilkes committed
622
        gfxstub = attrs.array_gfxstub;
623
        pdgui.pdsend(gfxstub, "cancel");
624
    }
625
}
626

Jonathan Wilkes's avatar
Jonathan Wilkes committed
627
function populate_array_form(objects) {
628
629
    var arrays_select = document.getElementById("arrays_select"),
        a_field = document.getElementById("arrays"),
Jonathan Wilkes's avatar
Jonathan Wilkes committed
630
        opt, i;
631
    a_field.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
632
633
    if (objects.length > 1) {
        // show the select element if there's more than one array
634
        arrays_select.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
635
636
    }
    for (i = 0; i < objects.length; i++) {
637
638
639
        opt = document.createElement("option");
        opt.setAttribute("value", i);
        opt.textContent = "Array #" + (i+1);
640
641
        arrays_select.appendChild(opt);
    }
642
643
644
645
646
647
    // The "array in existing graph" interface is horrible. There should
    // just be a button in the graph dialog to create an additional array
    // if the user really wants to do that. Nevertheless, I just added a
    // color key for multi-array graphs. So I guess it should be "discoverable"
    // through this horrible interface.
    if (!new_array_dialog) {
648
649
        document.getElementsByClassName("array_in_existing_graph")[0]
            .classList.add("hidden");
650
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
651
652
653
    // Hide the "delete this array" button if we don't have
    // more than one array
    if (new_array_dialog || objects.length < 2) {
654
        document.getElementsByClassName("array_delete")[0].classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
655
    }
656
657
    array_choose(0);
}
658

659
// Set up arrays in an object
660

Jonathan Wilkes's avatar
Jonathan Wilkes committed
661
function init_arrays(attr_objects) {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
662
    if (attr_objects.length) {
663
        // populate form with first array
Jonathan Wilkes's avatar
Jonathan Wilkes committed
664
        populate_array_form(attr_objects);
665
        // hide x1 and x2 for garrays-- they
Jonathan Wilkes's avatar
Jonathan Wilkes committed
666
667
668
        // automatically get set to the array size
        document.getElementsByName("x1")[0].disabled = true;
        document.getElementsByName("x2")[0].disabled = true;
669
    }
670
}
671

672
673
674
// 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
675
function register_window_id(gfxstub, attr_objects) {
676
    pd_object_callback = gfxstub;
Jonathan Wilkes's avatar
Jonathan Wilkes committed
677
678
679
    var canvas_fieldsets, i, prop;
    // attr_objects[0]: canvas properties
    // attr_objects[1...n-1]: array properties
680
681
682
683
    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
684
685
    // If this is a new array dialog we might not have any canvas
    // properties to set. If so, just show the array form elements
686
    if (attr_objects[0].hasOwnProperty("array_gfxstub")) {
687
        pd_garray_attrs = attr_objects;
688
        new_array_dialog = true; // this is a new array dialog
689
        canvas_fieldsets = document.getElementsByClassName("canvas");
690
        for (i = 0; i < canvas_fieldsets.length; i++) {
691
            canvas_fieldsets[i].classList.add("hidden");
692
        }
693
694
695
696
        // Hide the "Apply" button, as it doesn't make sense for
        // creating a new array
        document.getElementById("apply_button").style.setProperty("display",
            "none");
697
    } else {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
698
        pd_garray_attrs = attr_objects.slice(1);
699
        new_array_dialog = false; // this is a canvas/array props dialog
Jonathan Wilkes's avatar
Jonathan Wilkes committed
700
        populate_form(attr_objects[0]);
701
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
702
        init_arrays(pd_garray_attrs);
703

704
705
706
707
    // Disabling the menus does not yet work, so we hide that button for
    // the moment
    document.getElementsByClassName("no_menu")[0].style.setProperty("display",
        "none");
708
709
    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
710
711
    // labels and form elements.  That makes it snappier, at least
    // on older machines.
712
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
713
    pdgui.resize_window(pd_object_callback);
714
}
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
715
window.register_dialog = register_window_id;
716

717
function tr_text(id) {
718
719
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
720
721
722
723
724
}

// Stop-gap translator
function translate_form() {
    var i
725
    var elements = document.querySelectorAll("[data-i18n]");
726
727
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
728
        if (data.slice(0,7) === "[title]") {
729
730
731
732
733
734
735
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

Jonathan Wilkes's avatar
Jonathan Wilkes committed
736
737
738
739
740
741
742
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) {
743
                prop_group.classList.remove("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
744
            }
745
            if (prop === "display_flags") {
746
                // reminder: "!!" forces Boolean, "+" forces Number type
Jonathan Wilkes's avatar
Jonathan Wilkes committed
747
                var flag = +attr_object[prop];
748
                document.getElementsByName("gop")[0].checked = !!flag;
749
750
                document.getElementsByName("hide_name")[0].checked = !!(flag & 2);
                // set visibility of the "hide_name" checkbox based on
751
752
753
                // the gop flag. This way users don't get the idea that it
                // can be set independently of gop.
                show_gop_name_and_args_checkbutton(!!flag);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
754
755
756
                // Set the gop-related parts of the form to be
                // enabled/disabled based on state
                set_gop(!!flag);
757
            }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
758
759
            var elem = document.getElementsByName(prop);
            if (elem.length > 0) {
760
                if(prop.slice(-5) === "color") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
761
762
                    var hex_string = Number(attr_object[prop]).toString(16);
                    var color_string = "#" +
763
                        (hex_string === "0" ? "000000" : hex_string);
Jonathan Wilkes's avatar
Jonathan Wilkes committed
764
                    elem[0].value = color_string;
765
                } else if (elem[0].type === "checkbox") {
Jonathan Wilkes's avatar
Jonathan Wilkes committed
766
767
768
769
770
771
                    // The attr here is a string, so we need to
                    // force it to number, hence the "+" below
                    elem[0].checked = +attr_object[prop];
                } else {
                    elem[0].value = attr_object[prop];
                }
772
773
774
            }
        }
    }
Jonathan Wilkes's avatar
Jonathan Wilkes committed
775
776
777
    // Some special cases for hiding options for garray dialogs
    if (pd_garray_attrs.length > 0) {
        // Graph-on-parent toggle
778
        document.getElementsByClassName("display_flags")[0]
779
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
780
        // Graph-on-parent flag for hiding object name/args
781
        document.getElementsByClassName("display_flags")[1]
782
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
783
        // GOP-rect margins don't make sense for garrays, so hide them
784
        document.getElementsByClassName("x_margin")[0]
785
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
786
        // X/Y scaling-- garray is always in a gop so not needed
787
        document.getElementsByClassName("x_scale")[0]
788
            .classList.add("hidden");
789
790
791
792
793
        // scrollbars and menu
        document.getElementsByClassName("no_scroll")[0]
            .classList.add("hidden");
         document.getElementsByClassName("no_menu")[0]
            .classList.add("hidden");
Jonathan Wilkes's avatar
Jonathan Wilkes committed
794
    }
795
796
797
798
}

function add_events(name) {
    // closing the Window
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
799
800
    if(!pdgui.is_webapp()){
      gui.Window.get().on("close", function() {
801
        // this needs to do whatever the "cancel" button does
802
        cancel();
Hugo Neves de Carvalho's avatar
Hugo Neves de Carvalho committed
803
804
      });
    }
805
    pdgui.dialog_bindings(name);
806
807
808
809
810
811
    if (pdgui.is_webapp) {
      $("#dialog-modal").on("hidden.bs.modal", function (e) {
        remove_dialog(pd_object_callback)
        $("#dialog-modal").off("hidden.bs.modal")
      })
    }
812
813
814
815
816
}

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