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 --- js/PrefLabelTree.js | 167 +++++++++++++++++++++++++++++++++++----------------- 1 file changed, 113 insertions(+), 54 deletions(-) (limited to 'js/PrefLabelTree.js') 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-54-g00ecf From b16abc157ee584f4be80a537ee24ec9e5ff25496 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 17 Feb 2021 19:34:54 +0300 Subject: * App: rename hidden to hidden_tag * search: use client dialog * add some form field helpers --- .eslintrc.js | 2 +- classes/feeds.php | 46 ++++++---------------------------------------- js/App.js | 40 +++++++++++++++++++++++++++++++++++----- js/Article.js | 6 +++--- js/CommonDialogs.js | 4 ++-- js/CommonFilters.js | 4 ++-- js/Feeds.js | 42 +++++++++++++++++++++++++++++++++++------- js/PrefFeedTree.js | 4 ++-- js/PrefHelpers.js | 6 +++--- js/PrefLabelTree.js | 10 +++++----- js/PrefUsers.js | 16 ++++++++-------- 11 files changed, 102 insertions(+), 78 deletions(-) (limited to 'js/PrefLabelTree.js') diff --git a/.eslintrc.js b/.eslintrc.js index 6d76f6082..523ada08e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ module.exports = { "env": { "browser": true, - "es6": true, + "ecmaVersion": 8, "jquery": true, "webextensions": true }, diff --git a/classes/feeds.php b/classes/feeds.php index 68edfbf89..30478ae39 100755 --- a/classes/feeds.php +++ b/classes/feeds.php @@ -588,46 +588,12 @@ class Feeds extends Handler_Protected { } function search() { - $this->params = explode(":", $_REQUEST["param"], 2); - - $active_feed_id = sprintf("%d", $this->params[0]); - $is_cat = $this->params[1] != "false"; - - print "
"; - - print "
"; - - print "
"; - print "_get_title($active_feed_id, $is_cat))."\" - name='query' type='search' value=''>"; - print "
"; - - if (DB_TYPE == "pgsql") { - print "
"; - print ""; - print \Controls\select_tag("search_language", get_pref('DEFAULT_SEARCH_LANGUAGE'), Pref_Feeds::get_ts_languages(), - ["title" => __('Used for word stemming')], "search_language"); - print "
"; - } - - print "
"; - - print "
"; - - if (count(PluginHost::getInstance()->get_hooks(PluginHost::HOOK_SEARCH)) == 0) { - print ""; - } - - print " - "; - - print "
"; - - print "
"; + print json_encode([ + "show_language" => DB_TYPE == "pgsql", + "show_syntax_help" => count(PluginHost::getInstance()->get_hooks(PluginHost::HOOK_SEARCH)) == 0, + "all_languages" => Pref_Feeds::get_ts_languages(), + "default_language" => get_pref('DEFAULT_SEARCH_LANGUAGE') + ]); } function updatedebugger() { diff --git a/js/App.js b/js/App.js index bb861829d..9d8f6c275 100644 --- a/js/App.js +++ b/js/App.js @@ -18,14 +18,44 @@ const App = { is_prefs: false, LABEL_BASE_INDEX: -1024, FormFields: { - hidden: function(name, value, id = "") { - return `` + attributes_to_string: function(attributes) { + return Object.keys(attributes).map((k) => + `${App.escapeHtml(k)}="${App.escapeHtml(attributes[k])}"`) + .join(" "); }, - select_hash: function(name, value, values, attributes) { + hidden_tag: function(name, value, attributes = {}, id = "") { + return `` + }, + // allow html inside because of icons + button_tag: function(value, type, attributes = {}) { + return `` + + }, + icon: function(icon, attributes = {}) { + return `${icon}`; + }, + submit_tag: function(value, attributes = {}) { + return this.button_tag(value, "submit", {...{class: "alt-primary"}, ...attributes}); + }, + cancel_dialog_tag: function(value, attributes = {}) { + return this.button_tag(value, "", {...{onclick: "App.dialogOf(this).hide()"}, ...attributes}); + }, + select_tag: function(name, value, values = [], attributes = {}, id = "") { + return ` + + ` + }, + select_hash: function(name, value, values = {}, attributes = {}, id = "") { return ` - ${Object.keys(values).map((vk) => - `` + `` ).join("")} ` diff --git a/js/Article.js b/js/Article.js index 4d400e2dc..a42d3af67 100644 --- a/js/Article.js +++ b/js/Article.js @@ -314,9 +314,9 @@ const Article = { const dialog = new fox.SingleUseDialog({ title: __("Edit article Tags"), content: ` - ${App.FormFields.hidden("id", id.toString())} - ${App.FormFields.hidden("op", "article")} - ${App.FormFields.hidden("method", "setArticleTags")} + ${App.FormFields.hidden_tag("id", id.toString())} + ${App.FormFields.hidden_tag("op", "article")} + ${App.FormFields.hidden_tag("method", "setArticleTags")}
${__("Tags for this article (separated by commas):")} diff --git a/js/CommonDialogs.js b/js/CommonDialogs.js index c16afed82..dd0d56194 100644 --- a/js/CommonDialogs.js +++ b/js/CommonDialogs.js @@ -86,8 +86,8 @@ const CommonDialogs = { content: `
- ${App.FormFields.hidden("op", "feeds")} - ${App.FormFields.hidden("method", "add")} + ${App.FormFields.hidden_tag("op", "feeds")} + ${App.FormFields.hidden_tag("method", "add")} diff --git a/js/CommonFilters.js b/js/CommonFilters.js index 5afffafdc..e3629157b 100644 --- a/js/CommonFilters.js +++ b/js/CommonFilters.js @@ -45,7 +45,7 @@ const Filters = { li.innerHTML = ` ${transport.responseText} - ${App.FormFields.hidden("rule[]", rule)}`; + ${App.FormFields.hidden_tag("rule[]", rule)}`; dojo.parser.parse(li); @@ -76,7 +76,7 @@ const Filters = { li.innerHTML = ` ${transport.responseText} - ${App.FormFields.hidden("action[]", action)}`; + ${App.FormFields.hidden_tag("action[]", action)}`; dojo.parser.parse(li); diff --git a/js/Feeds.js b/js/Feeds.js index 73f1bc338..0567cf8c5 100644 --- a/js/Feeds.js +++ b/js/Feeds.js @@ -1,6 +1,6 @@ 'use strict' -/* global __, App, Headlines, xhrPost, dojo, dijit, Form, fox, PluginHost, Notify, $$, fox */ +/* global __, App, Headlines, xhrPost, xhrJson, dojo, dijit, Form, fox, PluginHost, Notify, $$, fox */ const Feeds = { counters_last_request: 0, @@ -566,14 +566,42 @@ const Feeds = { return tree.model.store.getValue(nuf, 'bare_id'); }, search: function() { - xhrPost("backend.php", - {op: "feeds", method: "search", - param: Feeds.getActive() + ":" + Feeds.activeIsCat()}, - (transport) => { + xhrJson("backend.php", + {op: "feeds", method: "search"}, + (reply) => { try { const dialog = new fox.SingleUseDialog({ - id: "searchDlg", - content: transport.responseText, + content: ` + +
+
+ +
+ + ${reply.show_language ? + ` +
+ + ${App.FormFields.select_tag("search_language", reply.default_language, reply.all_languages, + {title: __('Used for word stemming')}, "search_language")} +
+ ` : ''} +
+ +
+ ${reply.show_syntax_help ? + `${App.FormFields.button_tag(App.FormFields.icon("help") + " " + __("Search syntax"), "", + {class: 'alt-info pull-left', onclick: "window.open('https://tt-rss.org/wiki/SearchSyntax')"})} + ` : ''} + + ${App.FormFields.submit_tag(__('Search'), {onclick: "App.dialogOf(this).execute()"})} + ${App.FormFields.cancel_dialog_tag(__('Cancel'))} +
+
+ `, title: __("Search"), execute: function () { if (this.validate()) { diff --git a/js/PrefFeedTree.js b/js/PrefFeedTree.js index e0a2dd932..e081e2e31 100644 --- a/js/PrefFeedTree.js +++ b/js/PrefFeedTree.js @@ -405,8 +405,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b }, content: `
- ${App.FormFields.hidden("op", "pref-feeds")} - ${App.FormFields.hidden("method", "batchaddfeeds")} + ${App.FormFields.hidden_tag("op", "pref-feeds")} + ${App.FormFields.hidden_tag("method", "batchaddfeeds")}
${__("One valid feed per line (no detection is done)")} diff --git a/js/PrefHelpers.js b/js/PrefHelpers.js index f7eca59a0..96d524953 100644 --- a/js/PrefHelpers.js +++ b/js/PrefHelpers.js @@ -183,9 +183,9 @@ const Helpers = { ${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")} - ${App.FormFields.hidden('op', 'rpc')} - ${App.FormFields.hidden('method', 'setpref')} - ${App.FormFields.hidden('key', 'USER_STYLESHEET')} + ${App.FormFields.hidden_tag('op', 'rpc')} + ${App.FormFields.hidden_tag('method', 'setpref')} + ${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}