* App: rename hidden to hidden_tag

* search: use client dialog
 * add some form field helpers
This commit is contained in:
Andrew Dolgov 2021-02-17 19:34:54 +03:00
parent 92cb91e2e2
commit b16abc157e
11 changed files with 102 additions and 78 deletions

View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
"env": { "env": {
"browser": true, "browser": true,
"es6": true, "ecmaVersion": 8,
"jquery": true, "jquery": true,
"webextensions": true "webextensions": true
}, },

View File

@ -588,46 +588,12 @@ class Feeds extends Handler_Protected {
} }
function search() { function search() {
$this->params = explode(":", $_REQUEST["param"], 2); print json_encode([
"show_language" => DB_TYPE == "pgsql",
$active_feed_id = sprintf("%d", $this->params[0]); "show_syntax_help" => count(PluginHost::getInstance()->get_hooks(PluginHost::HOOK_SEARCH)) == 0,
$is_cat = $this->params[1] != "false"; "all_languages" => Pref_Feeds::get_ts_languages(),
"default_language" => get_pref('DEFAULT_SEARCH_LANGUAGE')
print "<form onsubmit='return false'>"; ]);
print "<section>";
print "<fieldset>";
print "<input dojoType='dijit.form.ValidationTextBox' id='search_query'
style='font-size : 16px; width : 540px;'
placeHolder=\"".T_sprintf("Search %s...", $this->_get_title($active_feed_id, $is_cat))."\"
name='query' type='search' value=''>";
print "</fieldset>";
if (DB_TYPE == "pgsql") {
print "<fieldset>";
print "<label class='inline'>" . __("Language:") . "</label>";
print \Controls\select_tag("search_language", get_pref('DEFAULT_SEARCH_LANGUAGE'), Pref_Feeds::get_ts_languages(),
["title" => __('Used for word stemming')], "search_language");
print "</fieldset>";
}
print "</section>";
print "<footer>";
if (count(PluginHost::getInstance()->get_hooks(PluginHost::HOOK_SEARCH)) == 0) {
print "<button dojoType='dijit.form.Button' style='float : left' class='alt-info' onclick='window.open(\"https://tt-rss.org/wiki/SearchSyntax\")'>
<i class='material-icons'>help</i> ".__("Search syntax")."</button>";
}
print "<button dojoType='dijit.form.Button' class='alt-primary'
type='submit' onclick='App.dialogOf(this).execute()'>".__('Search')."</button>
<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>".__('Cancel')."</button>";
print "</footer>";
print "</form>";
} }
function updatedebugger() { function updatedebugger() {

View File

@ -18,14 +18,44 @@ const App = {
is_prefs: false, is_prefs: false,
LABEL_BASE_INDEX: -1024, LABEL_BASE_INDEX: -1024,
FormFields: { FormFields: {
hidden: function(name, value, id = "") { attributes_to_string: function(attributes) {
return `<input id="${id}" dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>` 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 ` 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)}>
${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" id="${App.escapeHtml(id)}" ${this.attributes_to_string(attributes)}>
${Object.keys(values).map((vk) => ${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("")} ).join("")}
</select> </select>
` `

View File

@ -314,9 +314,9 @@ const Article = {
const dialog = new fox.SingleUseDialog({ const dialog = new fox.SingleUseDialog({
title: __("Edit article Tags"), title: __("Edit article Tags"),
content: ` content: `
${App.FormFields.hidden("id", id.toString())} ${App.FormFields.hidden_tag("id", id.toString())}
${App.FormFields.hidden("op", "article")} ${App.FormFields.hidden_tag("op", "article")}
${App.FormFields.hidden("method", "setArticleTags")} ${App.FormFields.hidden_tag("method", "setArticleTags")}
<header class='horizontal'> <header class='horizontal'>
${__("Tags for this article (separated by commas):")} ${__("Tags for this article (separated by commas):")}

View File

@ -86,8 +86,8 @@ const CommonDialogs = {
content: ` content: `
<form onsubmit='return false'> <form onsubmit='return false'>
${App.FormFields.hidden("op", "feeds")} ${App.FormFields.hidden_tag("op", "feeds")}
${App.FormFields.hidden("method", "add")} ${App.FormFields.hidden_tag("method", "add")}
<div id='fadd_error_message' style='display : none' class='alert alert-danger'></div> <div id='fadd_error_message' style='display : none' class='alert alert-danger'></div>

View File

@ -45,7 +45,7 @@ const Filters = {
li.innerHTML = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'> li.innerHTML = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'>
<span onclick='App.dialogOf(this).editRule(this)'>${transport.responseText}</span> <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); dojo.parser.parse(li);
@ -76,7 +76,7 @@ const Filters = {
li.innerHTML = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'> li.innerHTML = `<input dojoType='dijit.form.CheckBox' type='checkbox' onclick='Lists.onRowChecked(this)'>
<span onclick='App.dialogOf(this).editAction(this)'>${transport.responseText}</span> <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); dojo.parser.parse(li);

View File

@ -1,6 +1,6 @@
'use strict' '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 = { const Feeds = {
counters_last_request: 0, counters_last_request: 0,
@ -566,14 +566,42 @@ const Feeds = {
return tree.model.store.getValue(nuf, 'bare_id'); return tree.model.store.getValue(nuf, 'bare_id');
}, },
search: function() { search: function() {
xhrPost("backend.php", xhrJson("backend.php",
{op: "feeds", method: "search", {op: "feeds", method: "search"},
param: Feeds.getActive() + ":" + Feeds.activeIsCat()}, (reply) => {
(transport) => {
try { try {
const dialog = new fox.SingleUseDialog({ const dialog = new fox.SingleUseDialog({
id: "searchDlg", content: `
content: transport.responseText, <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"), title: __("Search"),
execute: function () { execute: function () {
if (this.validate()) { if (this.validate()) {

View File

@ -405,8 +405,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
}, },
content: ` content: `
<form onsubmit='return false'> <form onsubmit='return false'>
${App.FormFields.hidden("op", "pref-feeds")} ${App.FormFields.hidden_tag("op", "pref-feeds")}
${App.FormFields.hidden("method", "batchaddfeeds")} ${App.FormFields.hidden_tag("method", "batchaddfeeds")}
<header class='horizontal'> <header class='horizontal'>
${__("One valid feed per line (no detection is done)")} ${__("One valid feed per line (no detection is done)")}

View File

@ -183,9 +183,9 @@ const Helpers = {
${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")} ${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
</div> </div>
${App.FormFields.hidden('op', 'rpc')} ${App.FormFields.hidden_tag('op', 'rpc')}
${App.FormFields.hidden('method', 'setpref')} ${App.FormFields.hidden_tag('method', 'setpref')}
${App.FormFields.hidden('key', 'USER_STYLESHEET')} ${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}
<div id='css_edit_apply_msg' style='display : none'> <div id='css_edit_apply_msg' style='display : none'>
<div class='alert alert-warning'> <div class='alert alert-warning'>

View File

@ -133,12 +133,12 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
value="${App.escapeHtml(reply.caption)}"> value="${App.escapeHtml(reply.caption)}">
</section> </section>
${App.FormFields.hidden('id', id)} ${App.FormFields.hidden_tag('id', id)}
${App.FormFields.hidden('op', 'pref-labels')} ${App.FormFields.hidden_tag('op', 'pref-labels')}
${App.FormFields.hidden('method', 'save')} ${App.FormFields.hidden_tag('method', 'save')}
${App.FormFields.hidden('fg_color', fg_color, 'labelEdit_fgColor')} ${App.FormFields.hidden_tag('fg_color', fg_color, {}, 'labelEdit_fgColor')}
${App.FormFields.hidden('bg_color', bg_color, 'labelEdit_bgColor')} ${App.FormFields.hidden_tag('bg_color', bg_color, {}, 'labelEdit_bgColor')}
<header>${__("Colors")}</header> <header>${__("Colors")}</header>
<section> <section>

View File

@ -29,7 +29,7 @@ const Users = {
edit: function(id) { edit: function(id) {
xhrJson('backend.php', {op: 'pref-users', method: 'edit', id: id}, (reply) => { xhrJson('backend.php', {op: 'pref-users', method: 'edit', id: id}, (reply) => {
const user = reply.user; const user = reply.user;
const is_disabled = (user.id == 1) ? "disabled='disabled'" : ''; const admin_disabled = (user.id == 1);
const dialog = new fox.SingleUseDialog({ const dialog = new fox.SingleUseDialog({
id: "userEditDlg", id: "userEditDlg",
@ -47,9 +47,9 @@ const Users = {
content: ` content: `
<form onsubmit='return false'> <form onsubmit='return false'>
${App.FormFields.hidden('id', user.id.toString())} ${App.FormFields.hidden_tag('id', user.id.toString())}
${App.FormFields.hidden('op', 'pref-users')} ${App.FormFields.hidden_tag('op', 'pref-users')}
${App.FormFields.hidden('method', 'editSave')} ${App.FormFields.hidden_tag('method', 'editSave')}
<div dojoType="dijit.layout.TabContainer" style="height : 400px"> <div dojoType="dijit.layout.TabContainer" style="height : 400px">
<div dojoType="dijit.layout.ContentPane" title="${__('Edit user')}"> <div dojoType="dijit.layout.ContentPane" title="${__('Edit user')}">
@ -60,11 +60,11 @@ const Users = {
<fieldset> <fieldset>
<label>${__("Login:")}</label> <label>${__("Login:")}</label>
<input style='font-size : 16px' <input style='font-size : 16px'
${is_disabled} ${admin_disabled ? "disabled='1'" : ''}
dojoType='dijit.form.ValidationTextBox' required='1' dojoType='dijit.form.ValidationTextBox' required='1'
name='login' value="${App.escapeHtml(user.login)}"> 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> </fieldset>
</section> </section>
@ -74,9 +74,9 @@ const Users = {
<fieldset> <fieldset>
<label>${__('Access level: ')}</label> <label>${__('Access level: ')}</label>
${App.FormFields.select_hash("access_level", ${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()) : ''} user.access_level.toString()) : ''}
</fieldset> </fieldset>
<fieldset> <fieldset>