* App: rename hidden to hidden_tag

 * search: use client dialog
 * add some form field helpers

9 files changed, 95 insertions, 37 deletions

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 `<input id="${id}" dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
+      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 `<input id="${App.escapeHtml(id)}" dojoType="dijit.form.TextBox" ${this.attributes_to_string(attributes)}
+            style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
+      },
+      // allow html inside because of icons
+      button_tag: function(value, type, attributes = {}) {
+         return `<button dojoType="dijit.form.Button" ${this.attributes_to_string(attributes)}
+            type="${type}">${value}</button>`
+
+      },
+      icon: function(icon, attributes = {}) {
+         return `<i class="material-icons" ${this.attributes_to_string(attributes)}>${icon}</i>`;
+      },
+      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 name="${name}" dojoType="fox.form.Select" id="${App.escapeHtml(id)}" ${this.attributes_to_string(attributes)}>
+               ${values.map((v) =>
+                  `<option ${v == value ? 'selected="selected"' : ''} value="${App.escapeHtml(v)}">${App.escapeHtml(v)}</option>`
+               ).join("")}
+            </select>
+         `
+      },
+      select_hash: function(name, value, values = {}, attributes = {}, id = "") {
          return `
-            <select name="${name}" dojoType="fox.form.Select" ${attributes}>
+            <select name="${name}" dojoType="fox.form.Select" id="${App.escapeHtml(id)}" ${this.attributes_to_string(attributes)}>
                ${Object.keys(values).map((vk) =>
-                     `<option name="" ${vk == value ? 'selected="selected"' : ''} value="${App.escapeHtml(vk)}">${App.escapeHtml(values[vk])}</option>`
+                     `<option ${vk == value ? 'selected="selected"' : ''} value="${App.escapeHtml(vk)}">${App.escapeHtml(values[vk])}</option>`
                ).join("")}
             </select>
          `
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")}
 
 				<header class='horizontal'>
 					${__("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: `
 								<form onsubmit='return false'>
 
-									${App.FormFields.hidden("op", "feeds")}
-									${App.FormFields.hidden("method", "add")}
+									${App.FormFields.hidden_tag("op", "feeds")}
+									${App.FormFields.hidden_tag("method", "add")}
 
 									<div id='fadd_error_message' style='display : none' class='alert alert-danger'></div>
 
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 = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'>
 						<span onclick='App.dialogOf(this).editRule(this)'>${transport.responseText}</span>
-					${App.FormFields.hidden("rule[]", rule)}`;
+					${App.FormFields.hidden_tag("rule[]", rule)}`;
 
 				dojo.parser.parse(li);
 
@@ -76,7 +76,7 @@ const	Filters = {
 
 				li.innerHTML = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'>
 						<span onclick='App.dialogOf(this).editAction(this)'>${transport.responseText}</span>
-					${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: `
+									<form onsubmit='return false'>
+										<section>
+											<fieldset>
+												<input dojoType='dijit.form.ValidationTextBox' id='search_query'
+													style='font-size : 16px; width : 540px;'
+													placeHolder="${__("Search %s...").replace("%s", Feeds.getName(Feeds.getActive(), Feeds.activeIsCat()))}"
+													name='query' type='search' value=''>
+											</fieldset>
+
+											${reply.show_language ?
+												`
+												<fieldset>
+													<label class='inline'>${__("Language:")}</label>
+													${App.FormFields.select_tag("search_language", reply.default_language, reply.all_languages,
+															{title: __('Used for word stemming')}, "search_language")}
+												</fieldset>
+												` : ''}
+										</section>
+
+										<footer>
+											${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'))}
+										</footer>
+									</form>
+								`,
 								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: `
 						<form onsubmit='return false'>
-							${App.FormFields.hidden("op", "pref-feeds")}
-							${App.FormFields.hidden("method", "batchaddfeeds")}
+							${App.FormFields.hidden_tag("op", "pref-feeds")}
+							${App.FormFields.hidden_tag("method", "batchaddfeeds")}
 
 							<header class='horizontal'>
 								${__("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.")}
 						</div>
 
-						${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')}
 
 						<div id='css_edit_apply_msg' style='display : none'>
 							<div class='alert alert-warning'>
diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js
index 88e88b669..f22423091 100644
--- a/js/PrefLabelTree.js
+++ b/js/PrefLabelTree.js
@@ -133,12 +133,12 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 								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_tag('id', id)}
+						${App.FormFields.hidden_tag('op', 'pref-labels')}
+						${App.FormFields.hidden_tag('method', 'save')}
 
-						${App.FormFields.hidden('fg_color', fg_color, 'labelEdit_fgColor')}
-						${App.FormFields.hidden('bg_color', bg_color, 'labelEdit_bgColor')}
+						${App.FormFields.hidden_tag('fg_color', fg_color, {}, 'labelEdit_fgColor')}
+						${App.FormFields.hidden_tag('bg_color', bg_color, {}, 'labelEdit_bgColor')}
 
 						<header>${__("Colors")}</header>
 						<section>
diff --git a/js/PrefUsers.js b/js/PrefUsers.js
index 1fe4db150..ebfe9231b 100644
--- a/js/PrefUsers.js
+++ b/js/PrefUsers.js
@@ -29,7 +29,7 @@ const	Users = {
 	edit: function(id) {
 		xhrJson('backend.php', {op: 'pref-users', method: 'edit', id: id}, (reply) => {
 			const user = reply.user;
-			const is_disabled = (user.id == 1) ? "disabled='disabled'" : '';
+			const admin_disabled = (user.id == 1);
 
 			const dialog = new fox.SingleUseDialog({
 				id: "userEditDlg",
@@ -47,9 +47,9 @@ const	Users = {
 				content: `
 					<form onsubmit='return false'>
 
-						${App.FormFields.hidden('id', user.id.toString())}
-						${App.FormFields.hidden('op', 'pref-users')}
-						${App.FormFields.hidden('method', 'editSave')}
+						${App.FormFields.hidden_tag('id', user.id.toString())}
+						${App.FormFields.hidden_tag('op', 'pref-users')}
+						${App.FormFields.hidden_tag('method', 'editSave')}
 
 						<div dojoType="dijit.layout.TabContainer" style="height : 400px">
 							<div dojoType="dijit.layout.ContentPane" title="${__('Edit user')}">
@@ -60,11 +60,11 @@ const	Users = {
 									<fieldset>
 										<label>${__("Login:")}</label>
 										<input style='font-size : 16px'
-											${is_disabled}
+											${admin_disabled ? "disabled='1'" : ''}
 											dojoType='dijit.form.ValidationTextBox' required='1'
 											name='login' value="${App.escapeHtml(user.login)}">
 
-										${is_disabled ? App.FormFields.hidden("login", user.login) : ''}
+										${admin_disabled ? App.FormFields.hidden_tag("login", user.login) : ''}
 									</fieldset>
 								</section>
 
@@ -74,9 +74,9 @@ const	Users = {
 									<fieldset>
 										<label>${__('Access level: ')}</label>
 										${App.FormFields.select_hash("access_level",
-											user.access_level, reply.access_level_names, is_disabled)}
+											user.access_level, reply.access_level_names, {disabled: admin_disabled.toString()})}
 
-										${is_disabled ? App.FormFields.hidden("access_level",
+										${admin_disabled ? App.FormFields.hidden_tag("access_level",
 											user.access_level.toString()) : ''}
 									</fieldset>
 									<fieldset>