add axes in web view
[scilab.git] / scilab / node / static / scilab_setter.js
1 function setParent(uid, parent) {
2     var $child = getJElementById(uid);
3     var $parent = getJElementById(parent);
4     
5     if($child.hasClass("GO_AXES")) {
6         $child.width($parent.width());
7         $child.height($parent.height());
8
9         var layout = {
10             xaxis: {
11                 showgrid: false,
12                 zeroline: false,
13                 autotick: true,
14                 showticklabels: false //for clean display
15             },
16             yaxis: {
17                 showgrid: false,
18                 zeroline: false,
19                 autotick: true,
20                 showticklabels: false //for clean display
21             }
22         };
23         
24         Plotly.newPlot($child.prop('id'), [{}], layout, {displayModeBar:false, showLink:false, scrollZoom:true});
25     }
26
27     if($parent.hasClass("GO_UI_FRAME")) {
28         $parent = getJElementById(parent, "_body");
29     }
30     
31     $parent.append($child);
32 }
33
34 function setFigureSize(uid, val) {
35     var child = getElementById(uid);
36     child.style.width = val[0] + 'px';
37     child.style.height = val[1] + 'px';
38 }
39
40 function setFigureName(uid, val) {
41     var $fig = getJElementById(uid, '_btn');
42     $fig.text(val);
43 }
44
45 function setUIPosition(uid, val, units) {
46     var u = 'px';
47     if(units === 'normalized') {
48         u = '%';
49         val[0] *= 100;
50         val[1] *= 100;
51         val[2] *= 100;
52         val[3] *= 100;
53     }
54     
55     var child = getElementById(uid);
56     child.style.left = val[0] + u;
57     child.style.bottom = val[1] + u;
58     child.style.width = val[2] + u;
59     child.style.height = val[3] + u;
60 }
61
62 function setUIString(uid, val, parent) {
63     var child = getElementById(uid);
64     
65     var $child = getJElementById(uid);
66     
67     if($child.hasClass('GO_UI_CHECKBOX') || $child.hasClass('GO_UI_RADIOBUTTON')) {
68         var label = getElementById(uid + '_span');
69         label.textContent = val[0];
70         return;
71     }
72
73     if($child.hasClass('GO_UI_POPUPMENU') || $child.hasClass('GO_UI_LISTBOX')) {
74         //remove previous values
75         while (child.length) {child.remove(0);}
76
77        var size = val.length;
78         for(var i = 0 ; i < size ; ++i) {
79             child.add(new Option(val[i]));
80         }
81
82         if(child.className === 'GO_UI_LISTBOX') {
83             //switch to listbox instead of combobox
84            child.size = 2;
85         }
86         
87         return;
88     }
89     
90     if($child.hasClass('GO_UI_FRAME')) {
91        var $parent = getJElementById(parent);
92         if($parent && $parent.hasClass('GO_UI_TAB')) {
93            var tab = getElementById(uid + '_tab');
94             tab.textContent = val[0];
95         }
96         
97         return;
98     }
99
100     if($child.hasClass('GO_UI_TAB')) {
101         return;
102     }
103
104     if(isInputType(uid)) {
105         child.value = val[0];
106     } else {
107         child.textContent = val[0];
108     }
109 }
110
111 function setVisible(uid, val) {
112     var child = getElementById(uid);
113     if(!child) {
114         console.log("setVisible : " + uid);
115         return;
116     }
117     child.style.visibility = val;
118 }
119
120 function setUIEnable(uid, val) {
121     var child = getJElementById(uid);
122     if(val) {
123         child.removeClass("disabled");
124     } else {
125         child.addClass("disabled");
126     }
127 }
128
129 function setUIForegroundColor(uid, val) {
130     var child = getElementById(uid);
131     child.style.color = val;
132 }
133
134 function setUIBackgroundColor(uid, val) {
135     var child = getElementById(uid);
136     child.style.backgroundColor = val;
137 }
138
139 function setUIFontAngle(uid, val) {
140     var child = getElementById(uid);
141     child.style.fontStyle = val;
142 }
143
144 function setUIFontName(uid, val) {
145     var child = getElementById(uid);
146     child.style.fontFamily = val;
147 }
148
149 function setUIFontSize(uid, val) {
150     var child = getElementById(uid);
151     child.style.fontSize = val;
152 }
153
154 function setUIFontWeight(uid, val) {
155     var child = getElementById(uid);
156     child.style.fontWeight = val;
157 }
158
159 function setUIHorizontalAlignment(uid, val) {
160     var $child = getJElementById(uid);
161     if($child.hasClass('GO_UI_TEXT')) {
162         switch(val) {
163             default:
164             case 'left' :
165                 val = 'flex-start';
166                 break;
167             case 'center' :
168                 break;
169             case 'right' :
170                 val = 'flex-end';
171                 break;
172         }
173         
174         $child.css("justify-content", val);
175     } else {
176         $child.css("text-align", val);
177     }
178 }
179
180 function setUIVerticalAlignment(uid, val) {
181     var child = getElementById(uid);
182     child.style.lineHeight = val;
183 }
184
185 function setUILayout(uid, val) {
186     var child = getElementById(uid);
187
188     switch(val) {
189         case LayoutType.LAYOUT_BORDER :
190             //add 'frame' in child to be more ... flexible ;)
191             var layout = createElement('DIV');
192             layout.id = getIdString(uid, '_layout');
193             layout.style.display = 'flex';
194             layout.style.flexDirection = 'column';
195             layout.style.width = '100%';
196             layout.style.height = 'inherit';
197
198             //add top
199             var header = createElement('HEADER');
200             header.id = getIdString(uid, '_top');
201             header.style.width = '100%';
202
203             //add middle band
204             var middle = createElement('DIV');
205             middle.id = getIdString(uid, '_middle');
206             middle.style.flex = '1';
207             middle.style.display = 'flex';
208
209             //add left
210             var left = createElement('ASIDE');
211             left.id = getIdString(uid, '_left');
212             left.style.display = 'flex';
213
214             //add center
215             var center = createElement('ARTICLE');
216             center.id = getIdString(uid, '_center');
217             center.style.flex = '1';
218             center.style.display = 'flex';
219             center.style.width = '100%';
220
221             //add right
222             var right = createElement('ASIDE');
223             right.id = getIdString(uid, '_right');
224             right.style.display = 'flex';
225
226             //add bottom
227             var footer = createElement('FOOTER');
228             footer.id = getIdString(uid, '_bottom');
229             footer.style.width = '100%';
230
231             //hierarchy
232             middle.appendChild(left);
233             middle.appendChild(center);
234             middle.appendChild(right);
235
236             layout.appendChild(header);
237             layout.appendChild(middle);
238             layout.appendChild(footer);
239
240             child.appendChild(layout);
241             break;
242
243         case LayoutType.LAYOUT_GRID:
244             break;
245
246         case LayoutType.LAYOUT_GRIDBAG:
247             //add empty table
248            var table = createElement('TABLE');
249             table.id = getIdString(uid, '_table');
250             table.style.margin = '0';
251             table.style.padding = '0';
252             table.style.width = '100%';
253             table.style.height = '100%';
254             table.style.borderCollapse = 'collapse';
255
256             //insert table in parent
257             child.appendChild(table);
258             break;
259
260         default:
261         case LayoutType.LAYOUT_NONE:
262             break;
263     }
264 }
265
266 function setUIMin(uid, val) {
267     var child = getElementById(uid);
268     child.min  = val;
269 }
270
271 function setUIMax(uid, val) {
272     var child = getElementById(uid);
273     child.max  = val;
274 }
275
276 function setUIStep(uid, val) {
277     var child = getElementById(uid);
278     child.step  = val;
279 }
280
281 function setUIValue(uid, val) {
282     var child = getElementById(uid);
283     if(!child) {
284         console.log("setUIValue : " + uid);
285         return;
286     }
287     switch(child.className) {
288         case 'GO_UI_SPINNER':
289         case 'GO_UI_SLIDER':
290             child.value  = '' + val;
291             break;
292         case 'GO_UI_TAB':
293             tabSelectHelper(child, val);
294             break;
295     }
296 }
297
298 function setUIBorder(uid, parent, pos, pad, size) {
299     var child = getElementById(uid);
300     var position;
301     var padding;
302     switch(pos) {
303         case BorderLayoutType.BORDER_CENTER:
304             position = '_center';
305             child.style.width = 'inherit';
306             child.style.height = 'inherit';
307             padding = getPadding(0, 0, 0, 0);
308             break;
309
310         case BorderLayoutType.BORDER_BOTTOM:
311             position = '_bottom';
312             child.style.width = '100%';
313             if(size[1] === -1) {
314                 child.style.height = 'inherit';
315             } else {
316                 child.style.height = getSubPadding(size[1]);
317             }
318
319             padding = getPadding(pad[1], 0, 0, 0);
320             break;
321
322         case BorderLayoutType.BORDER_TOP:
323             position = '_top';
324             child.style.width = '100%';
325
326             if (size[1] === -1) {
327                 child.style.height = 'inherit';
328             } else {
329                 child.style.height = getSubPadding(size[1]);
330             }
331
332             padding = getPadding(0, 0, pad[1], 0);
333             break;
334
335         case BorderLayoutType.BORDER_LEFT:
336             position = '_left';
337
338             if (size[0] == -1){
339                 child.style.width = 'inherit';
340             } else {
341                 child.style.width = getSubPadding(size[0]);
342             }
343
344             child.style.height = 'inherit';
345             padding = getPadding(0, pad[0], 0, 0);
346             break;
347
348         case BorderLayoutType.BORDER_RIGHT:
349             position = '_right';
350
351             if (size[0] == -1) {
352                 child.style.width = 'inherit';
353             } else {
354                 child.style.width = getSubPadding(size[0]);
355             }
356
357             child.style.height = 'inherit';
358             padding = getPadding(0, 0, 0, pad[0]);
359             break;
360     }
361
362     //move child in targeted cell
363     var parentGrid = getElementById(parent, position);
364     parentGrid.appendChild(child);
365     parentGrid.style.padding = padding;
366
367     //to well perform positionning, we must clear some default properties
368     //position left, right, width, height,
369
370     child.style.position = 'inherit';
371     child.style.left = 'inherit';
372     child.style.bottom = 'inherit';
373 }
374
375 function setUIGridBag(uid, parent, grid) {
376     var child = getElementById(uid);
377     if(!child) {
378         console.log("setUIGridBag: " + uid);
379         return;
380     }
381     child.style.position = 'inherit';
382     child.style.left = 'inherit';
383     child.style.bottom = 'inherit';
384     child.style.width = '100%';
385     child.style.height = '100%';
386
387     //create a td with grid information and add it to the good cell ( or create if not exist ! )
388
389     //build td child
390     var td = createElement('TD');
391     td.id = getIdString(parent, '_' + grid[0] + '_' + grid[1]);
392
393     if (grid[2] !== '1') {
394         td.colSpan = grid[2];
395     }
396
397     if (grid[3] !== '1') {
398         td.rowSpan = grid[3];
399     }
400
401     td.appendChild(child);
402
403     var table = getElementById(parent, '_table');
404
405     //build or get tr
406     var trName = '_' + grid[1];
407     var tr = getElementById(parent, trName);
408
409     if(tr == null) {
410         tr = createElement('TR');
411         tr.id = getIdString(parent, trName);
412         gridbagHelperTR(table, tr, grid[1]);
413     }
414
415     gridbagHelperTD(tr,td, grid[0]);
416
417     //force refresh of table, move it to another component and rollback
418     var scilab = getScilab();
419     scilab.appendChild(table);
420     var elem = getElementById(parent);
421     elem.appendChild(table);
422 }
423
424
425
426 function setUIFrameBorder(uid, title) {
427     
428     if(title.position === "") {
429         return;
430     }
431     var border;
432     var header = getElementById(uid, "_header");
433     var footer = getElementById(uid, "_footer");
434
435     if(title.position === "top") {
436        header.style.display = 'block';
437        footer.style.display = 'none';
438        border = header;
439     } else { //bottom
440        footer.style.display = 'block';
441        header.style.display = 'none';
442        border = footer;
443     }
444     
445     border.textContent = title.text;
446     border.style.textAlign = title.alignment;
447     border.style.fontName = title.fontName;
448     border.style.fontStyle = title.fontStyle;
449     border.style.fontSize = title.fontSize + 'px';
450     border.style.fontWeight = title.fontWeight;
451     border.style.color = title.fontColor;
452 }
453
454 function setUIIcon(uid, icon, val) {
455     var child = getElementById(uid);
456
457     //add span element in button to show image
458     var span = createElement('SPAN');
459     if(icon.substring(0, 5) === 'glyph') {
460         span.className = "glyphicon " + icon;
461         span.style.paddingRight = '4px';
462     } else {
463         span.style.background = '#f3f3f3 url(' + icon + ') no-repeat left center';
464         span.style.paddingLeft = '20px';
465     }
466
467     var text = createElement('SPAN');
468     text.textContent = val;
469     text.style = child.style;
470
471     child.innerHTML = "";
472     child.appendChild(span);
473     child.appendChild(text);
474 }
475
476 function setUIGroupName(uid, val) {
477     var child = getElementById(uid, "_radio");
478     if(child) {
479         child.name  = val;
480     }
481 }
482
483
484 function setCallback(uid) {
485     var event;
486     var func;
487
488     var child = getElementById(uid);
489
490     var $child = getJElementById(uid);
491
492     if($child.hasClass('GO_UI_PUSHBUTTON')) {
493         event = "click";
494         func = onPushButton;
495     } else if($child.hasClass('GO_UI_CHECKBOX')) {
496         //change child to real checkbox
497         child = getElementById(uid, "_checkbox");
498         event = "click";
499         func = onCheckBox;
500     } else if($child.hasClass('GO_UI_RADIOBUTTON')) {
501         //change child to real radio
502         child = getElementById(uid, "_radio");
503         event = "click";
504         func = onRadioButton;
505     } else if($child.hasClass('GO_UI_LISTBOX')) {
506         event = "change";
507         func = onListBox;
508     } else if($child.hasClass('GO_UI_POPUPMENU')) {
509         event = "change";
510         func = onComboBox;
511     } else if($child.hasClass('GO_UI_SLIDER')) {
512         event = "input";
513         func = onSlider;
514     } else if($child.hasClass('GO_UI_EDIT')) {
515         event = "input";
516         func = onEditBox;
517     } else if($child.hasClass('GO_UI_SPINNER')) {
518         event = "input";
519         func = onSpinner;
520     }
521
522     //add callback listener
523     child.addEventListener(event, func);
524 }