diff options
Diffstat (limited to 'js/PrefLabelTree.js')
| -rw-r--r-- | js/PrefLabelTree.js | 185 |
1 files changed, 121 insertions, 64 deletions
diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js index 73f375f2d..2b78927c2 100644 --- a/js/PrefLabelTree.js +++ b/js/PrefLabelTree.js @@ -1,5 +1,5 @@ /* eslint-disable prefer-rest-params */ -/* global __, define, lib, dijit, dojo, xhrPost, Notify, fox */ +/* global __, define, lib, dijit, dojo, xhr, Notify, fox, App */ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/form/DropDownButton"], function (declare, domConstruct) { @@ -48,83 +48,140 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f const items = tree.model.getCheckedItems(); const rv = []; - items.each(function(item) { + items.forEach(function(item) { rv.push(tree.model.store.getValue(item, 'bare_id')); }); return rv; }, reload: function() { - xhrPost("backend.php", { op: "pref-labels" }, (transport) => { - dijit.byId('labelsTab').attr('content', transport.responseText); + xhr.post("backend.php", { op: "pref-labels" }, (reply) => { + dijit.byId('labelsTab').attr('content', reply); Notify.close(); }); }, editLabel: function(id) { - const dialog = new fox.SingleUseDialog({ - id: "labelEditDlg", - title: __("Label Editor"), - style: "width: 650px", - setLabelColor: function (id, fg, bg) { - - let kind = ''; - let color = ''; - - if (fg && bg) { - kind = 'both'; - } else if (fg) { - kind = 'fg'; - color = fg; - } else if (bg) { - kind = 'bg'; - color = bg; - } - - const e = $("icon-label-" + id); - - if (e) { - if (bg) e.style.color = bg; - } - - const query = { - op: "pref-labels", method: "colorset", kind: kind, - ids: id, fg: fg, bg: bg, color: color - }; - - xhrPost("backend.php", query, () => { - const tree = dijit.byId("filterTree"); - if (tree) tree.reload(); // maybe there's labels in there - }); - - }, - execute: function () { - if (this.validate()) { - const caption = this.attr('value').caption; - const fg_color = this.attr('value').fg_color; - const bg_color = this.attr('value').bg_color; - - dijit.byId('labelTree').setNameById(id, caption); - this.setLabelColor(id, fg_color, bg_color); - this.hide(); - - xhrPost("backend.php", this.attr('value'), () => { + xhr.json("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => { + + const fg_color = reply['fg_color']; + const bg_color = reply['bg_color'] ? reply['bg_color'] : '#fff7d5'; + + const dialog = new fox.SingleUseDialog({ + id: "labelEditDlg", + title: __("Label Editor"), + style: "width: 650px", + setLabelColor: function (id, fg, bg) { + + let kind = ''; + let color = ''; + + if (fg && bg) { + kind = 'both'; + } else if (fg) { + kind = 'fg'; + color = fg; + } else if (bg) { + kind = 'bg'; + color = bg; + } + + const e = App.byId(`icon-label-${id}`); + + if (e) { + if (bg) e.style.color = bg; + } + + const query = { + op: "pref-labels", method: "colorset", kind: kind, + ids: id, fg: fg, bg: bg, color: color + }; + + xhr.post("backend.php", query, () => { const tree = dijit.byId("filterTree"); if (tree) tree.reload(); // maybe there's labels in there }); - } - }, - content: __("Loading, please wait...") - }); - const tmph = dojo.connect(dialog, 'onShow', function () { - dojo.disconnect(tmph); + }, + execute: function () { + if (this.validate()) { + const caption = this.attr('value').caption; + const fg_color = this.attr('value').fg_color; + const bg_color = this.attr('value').bg_color; + + dijit.byId('labelTree').setNameById(id, caption); + this.setLabelColor(id, fg_color, bg_color); + this.hide(); + + xhr.post("backend.php", this.attr('value'), () => { + const tree = dijit.byId("filterTree"); + if (tree) tree.reload(); // maybe there's labels in there + }); + } + }, + content: ` + <form onsubmit='return false'> + + <header>${__("Caption")}</header> + <section> + <input style='font-size : 16px; color : ${fg_color}; background : ${bg_color}; transition : background 0.1s linear' + id='labelEdit_caption' + name='caption' + dojoType='dijit.form.ValidationTextBox' + required='true' + value="${App.escapeHtml(reply.caption)}"> + </section> + + ${App.FormFields.hidden_tag('id', id)} + ${App.FormFields.hidden_tag('op', 'pref-labels')} + ${App.FormFields.hidden_tag('method', 'save')} + + ${App.FormFields.hidden_tag('fg_color', fg_color, {}, 'labelEdit_fgColor')} + ${App.FormFields.hidden_tag('bg_color', bg_color, {}, 'labelEdit_bgColor')} + + <header>${__("Colors")}</header> + <section> + <table width='100%'> + <tr> + <th>${__("Foreground:")}</th> + <th>${__("Background:")}</th> + </tr> + <tr> + <td class='text-center'> + <div dojoType='dijit.ColorPalette'> + <script type='dojo/method' event='onChange' args='fg_color'> + dijit.byId('labelEdit_fgColor').attr('value', fg_color); + dijit.byId('labelEdit_caption').domNode.setStyle({color: fg_color}); + </script> + </div> + </td> + <td class='text-center'> + <div dojoType='dijit.ColorPalette'> + <script type='dojo/method' event='onChange' args='bg_color'> + dijit.byId('labelEdit_bgColor').attr('value', bg_color); + dijit.byId('labelEdit_caption').domNode.setStyle({backgroundColor: bg_color}); + </script> + </div> + </td> + </tr> + </table> + </section> + + <footer> + <button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'> + ${__('Save')} + </button> + <button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'> + ${__('Cancel')} + </button> + </footer> + + </form> + ` + }); - xhrPost("backend.php", {op: "pref-labels", method: "edit", id: id}, (transport) => { - dialog.attr('content', transport.responseText); - }) - }); + dialog.show(); - dialog.show(); + }); }, resetColors: function() { const labels = this.getSelectedLabels(); @@ -137,7 +194,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f ids: labels.toString() }; - xhrPost("backend.php", query, () => { + xhr.post("backend.php", query, () => { this.reload(); }); } @@ -158,7 +215,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f ids: sel_rows.toString() }; - xhrPost("backend.php", query, () => { + xhr.post("backend.php", query, () => { this.reload(); }); } |