From e7924c6dacef405a6e20b41d078f4a90a210cb51 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Sat, 13 Feb 2021 13:17:34 +0300
Subject: [PATCH] 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 "<form onsubmit='return false;'>";
-
- print "<header>".__("Caption")."</header>";
-
- print "<section>";
-
- $fg_color = $line['fg_color'];
- $bg_color = $line['bg_color'] ? $line['bg_color'] : '#fff7d5';
-
- print "<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=\"".htmlspecialchars($line['caption'])."\">";
-
- print "</section>";
-
- print "<header>" . __("Colors") . "</header>";
- print "<section>";
-
- print "<table>";
- print "<tr><th style='text-align : left'>".__("Foreground:")."</th><th style='text-align : left'>".__("Background:")."</th></tr>";
- print "<tr><td style='padding-right : 10px'>";
-
- print "<input dojoType='dijit.form.TextBox'
- style='display : none' id='labelEdit_fgColor'
- name='fg_color' value='$fg_color'>";
- print "<input dojoType='dijit.form.TextBox'
- style='display : none' id='labelEdit_bgColor'
- name='bg_color' value='$bg_color'>";
-
- print "<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>";
-
- print "</td><td>";
-
- print "<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>";
-
- print "</td></tr></table>";
- print "</section>";
-
- print "<footer>";
- print "<button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'>".
- __('Save')."</button>";
- print "<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>".
- __('Cancel')."</button>";
- print "</footer>";
-
- print "</form>";
+ 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 `<input dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
+ hidden: function(name, value, id = "") {
+ return `<input id="${id}" dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
}
},
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: `
+ <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('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')}
+
+ <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();
--
GitLab