From e7924c6dacef405a6e20b41d078f4a90a210cb51 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Sat, 13 Feb 2021 13:17:34 +0300 Subject: label editor: use client dialog --- classes/pref/labels.php | 68 ++------------------ js/App.js | 4 +- js/PrefLabelTree.js | 167 ++++++++++++++++++++++++++++++++---------------- 3 files changed, 120 insertions(+), 119 deletions(-) diff --git a/classes/pref/labels.php b/classes/pref/labels.php index a787ce388..6102ab8dd 100644 --- a/classes/pref/labels.php +++ b/classes/pref/labels.php @@ -10,72 +10,14 @@ class Pref_Labels extends Handler_Protected { function edit() { $label_id = clean($_REQUEST['id']); - $sth = $this->pdo->prepare("SELECT * FROM ttrss_labels2 WHERE + $sth = $this->pdo->prepare("SELECT id, caption, fg_color, bg_color FROM ttrss_labels2 WHERE id = ? AND owner_uid = ?"); $sth->execute([$label_id, $_SESSION['uid']]); - if ($line = $sth->fetch()) { - - print_hidden("id", "$label_id"); - print_hidden("op", "pref-labels"); - print_hidden("method", "save"); - - print "
"; - - print "
".__("Caption")."
"; - - print "
"; - - $fg_color = $line['fg_color']; - $bg_color = $line['bg_color'] ? $line['bg_color'] : '#fff7d5'; - - print ""; - - print "
"; - - print "
" . __("Colors") . "
"; - print "
"; - - print ""; - print ""; - print "
".__("Foreground:")."".__("Background:")."
"; - - print ""; - print ""; - - print "
- -
"; - - print "		"; - - print "
- -
"; - - print "
"; - print "
"; - - print "
"; - print ""; - print ""; - print "
"; - - print "
"; + if ($line = $sth->fetch(PDO::FETCH_ASSOC)) { + print json_encode($line); + } else { + print json_encode(["error" => "LABEL_NOT_FOUND"]); } } diff --git a/js/App.js b/js/App.js index 514a6d4b7..4646145ea 100644 --- a/js/App.js +++ b/js/App.js @@ -18,8 +18,8 @@ const App = { is_prefs: false, LABEL_BASE_INDEX: -1024, FormFields: { - hidden: function(name, value) { - return `` + hidden: function(name, value, id = "") { + return `` } }, Scrollable: { diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js index 73f375f2d..88e88b669 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, xhrPost, Notify, fox, App */ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/form/DropDownButton"], function (declare, domConstruct) { @@ -61,70 +61,129 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f }); }, 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; - } + xhrJson("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => { - const query = { - op: "pref-labels", method: "colorset", kind: kind, - ids: id, fg: fg, bg: bg, color: color - }; + console.log(reply); - xhrPost("backend.php", query, () => { - const tree = dijit.byId("filterTree"); - if (tree) tree.reload(); // maybe there's labels in there - }); + 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 = ''; - }, - 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; + if (fg && bg) { + kind = 'both'; + } else if (fg) { + kind = 'fg'; + color = fg; + } else if (bg) { + kind = 'bg'; + color = bg; + } - dijit.byId('labelTree').setNameById(id, caption); - this.setLabelColor(id, fg_color, bg_color); - this.hide(); + const e = $("icon-label-" + id); - xhrPost("backend.php", this.attr('value'), () => { + 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 }); - } - }, - 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(); + + xhrPost("backend.php", this.attr('value'), () => { + const tree = dijit.byId("filterTree"); + if (tree) tree.reload(); // maybe there's labels in there + }); + } + }, + content: ` +
+ +
${__("Caption")}
+
+ +
+ + ${App.FormFields.hidden('id', id)} + ${App.FormFields.hidden('op', 'pref-labels')} + ${App.FormFields.hidden('method', 'save')} + + ${App.FormFields.hidden('fg_color', fg_color, 'labelEdit_fgColor')} + ${App.FormFields.hidden('bg_color', bg_color, 'labelEdit_bgColor')} + +
${__("Colors")}
+
+ + + + + + + + + +
${__("Foreground:")}${__("Background:")}
+
+ +
+ 		+
+ +
+
+
+ + + +
+ ` + }); - 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(); -- cgit v1.2.3