rework filter dialogs to use dijit.Form

This commit is contained in:
Andrew Dolgov 2010-11-20 14:10:26 +03:00
parent 48b05a2986
commit d90868d719
7 changed files with 144 additions and 145 deletions

View File

@ -741,26 +741,15 @@ function filterDlgCheckType(sender) {
try {
var ftype = sender[sender.selectedIndex].value;
var form = document.forms["filter_add_form"];
if (!form) {
form = document.forms["filter_edit_form"];
}
if (!form) {
console.log("filterDlgCheckType: can't find form!");
return;
}
var ftype = sender.value;
// if selected filter type is 5 (Date) enable the modifier dropbox
if (ftype == 5) {
Element.show("filter_dlg_date_mod_box");
Element.show("filter_dlg_date_chk_box");
Element.show("filterDlg_dateModBox");
Element.show("filterDlg_dateChkBox");
} else {
Element.hide("filter_dlg_date_mod_box");
Element.hide("filter_dlg_date_chk_box");
Element.hide("filterDlg_dateModBox");
Element.hide("filterDlg_dateChkBox");
}
@ -774,20 +763,9 @@ function filterDlgCheckAction(sender) {
try {
var action = sender[sender.selectedIndex].value;
var action = sender.value;
var form = document.forms["filter_add_form"];
if (!form) {
form = document.forms["filter_edit_form"];
}
if (!form) {
console.log("filterDlgCheckAction: can't find form!");
return;
}
var action_param = $("filter_dlg_param_box");
var action_param = $("filterDlg_paramBox");
if (!action_param) {
console.log("filterDlgCheckAction: can't find action param box!");
@ -796,13 +774,13 @@ function filterDlgCheckAction(sender) {
// if selected action supports parameters, enable params field
if (action == 4 || action == 6 || action == 7) {
Element.show(action_param);
new Effect.Appear(action_param, {duration : 0.5});
if (action != 7) {
Element.show(form.action_param);
Element.hide(form.action_param_label);
Element.show(dijit.byId("filterDlg_actionParam").domNode);
Element.hide(dijit.byId("filterDlg_actionParamLabel").domNode);
} else {
Element.show(form.action_param_label);
Element.hide(form.action_param);
Element.show(dijit.byId("filterDlg_actionParamLabel").domNode);
Element.hide(dijit.byId("filterDlg_actionParam").domNode);
}
} else {
Element.hide(action_param);
@ -816,18 +794,9 @@ function filterDlgCheckAction(sender) {
function filterDlgCheckDate() {
try {
var form = document.forms["filter_add_form"];
var dialog = dijit.byId("filterEditDlg");
if (!form) {
form = document.forms["filter_edit_form"];
}
if (!form) {
console.log("filterDlgCheckAction: can't find form!");
return;
}
var reg_exp = form.reg_exp.value;
var reg_exp = dialog.attr('value').reg_exp;
var query = "?op=rpc&subop=checkDate&date=" + reg_exp;
@ -835,26 +804,18 @@ function filterDlgCheckDate() {
parameters: query,
onComplete: function(transport) {
var form = document.forms["filter_add_form"];
if (!form) {
form = document.forms["filter_edit_form"];
}
if (transport.responseXML) {
var result = transport.responseXML.getElementsByTagName("result")[0];
if (result && result.firstChild) {
if (result.firstChild.nodeValue == "1") {
new Effect.Highlight(form.reg_exp, {startcolor : '#00ff00'});
alert(__("Date syntax appears to be correct."));
return;
}
}
}
new Effect.Highlight(form.reg_exp, {startcolor : '#ff0000'});
alert(__("Date syntax is incorrect."));
} });
@ -1211,8 +1172,37 @@ function quickAddFeed() {
}
function quickAddFilter() {
displayDlg('quickAddFilter', '',
function () {document.forms['filter_add_form'].reg_exp.focus();});
try {
var query = "backend.php?op=dlg&id=quickAddFilter";
if (dijit.byId("filterEditDlg"))
dijit.byId("filterEditDlg").destroyRecursive();
dialog = new dijit.Dialog({
id: "filterEditDlg",
title: __("Create Filter"),
style: "width: 600px",
execute: function() {
if (this.validate()) {
console.log(dojo.objectToQuery(this.attr('value')));
new Ajax.Request("backend.php", {
parameters: dojo.objectToQuery(this.attr('value')),
onComplete: function(transport) {
this.hide();
notify_info(transport.responseText);
if (inPreferences()) {
updateFilterList();
}
}});
}
},
href: query});
dialog.show();
} catch (e) {
exception_error("quickAddFilter", e);
}
}
function unsubscribeFeed(feed_id, title) {
@ -1408,7 +1398,7 @@ function genUrlChangeKey(feed, is_cat) {
function labelSelectOnChange(elem) {
try {
var value = elem[elem.selectedIndex].value;
/* var value = elem[elem.selectedIndex].value;
var def = elem.getAttribute('default');
if (value == "ADD_LABEL") {
@ -1433,7 +1423,7 @@ function labelSelectOnChange(elem) {
exception_error("addLabel", e);
}
});
}
} */
} catch (e) {
exception_error("labelSelectOnChange", e);

View File

@ -6794,23 +6794,24 @@
return true;
}
function print_label_select($link, $name, $value, $style = "") {
function print_label_select($link, $name, $value, $attributes = "") {
$result = db_query($link, "SELECT caption FROM ttrss_labels2
WHERE owner_uid = '".$_SESSION["uid"]."' ORDER BY caption");
print "<select default=\"$value\" name=\"" . htmlspecialchars($name) .
"\" style=\"$style\" onchange=\"labelSelectOnChange(this)\" >";
"\" $attributes onchange=\"labelSelectOnChange(this)\" >";
while ($line = db_fetch_assoc($result)) {
$issel = ($line["caption"] == $value) ? "selected=\"1\"" : "";
print "<option $issel>" . htmlspecialchars($line["caption"]) . "</option>";
print "<option value=\"".htmlspecialchars($line["caption"])."\"
$issel>" . htmlspecialchars($line["caption"]) . "</option>";
}
print "<option value=\"ADD_LABEL\">" .__("Add label...") . "</option>";
# print "<option value=\"ADD_LABEL\">" .__("Add label...") . "</option>";
print "</select>";

View File

@ -451,14 +451,9 @@
$active_feed_id = db_escape_string($_REQUEST["param"]);
print "<title>".__('Create Filter')."</title>";
print "<content><![CDATA[";
print "<form id=\"filter_add_form\" onsubmit='return false'>";
print "<input type=\"hidden\" name=\"op\" value=\"pref-filters\">";
print "<input type=\"hidden\" name=\"quiet\" value=\"1\">";
print "<input type=\"hidden\" name=\"subop\" value=\"add\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"op\" value=\"pref-filters\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"quiet\" value=\"1\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"subop\" value=\"add\">";
$result = db_query($link, "SELECT id,description
FROM ttrss_filter_types ORDER BY description");
@ -474,33 +469,36 @@
print "<div class=\"dlgSecCont\">";
print "<span id=\"filter_dlg_date_mod_box\" style=\"display : none\">";
print __("Date") . " ";
print "<span id=\"filterDlg_dateModBox\" style=\"display : none\">";
$filter_params = array(
"before" => __("before"),
"after" => __("after"));
print_select_hash("filter_date_modifier", "before", $filter_params);
print_select_hash("filter_date_modifier", "before",
$filter_params, 'dojoType="dijit.form.Select"');
print "&nbsp;</span>";
print "<input onkeypress=\"return filterCR(event, createFilter)\"
name=\"reg_exp\" size=\"30\" value=\"$reg_exp\">";
print "<input dojoType=\"dijit.form.ValidationTextBox\"
required=\"true\" id=\"filterDlg_regExp\"
style=\"font-size : 16px\"
name=\"reg_exp\" value=\"$reg_exp\"/>";
print "<span id=\"filter_dlg_date_chk_box\" style=\"display : none\">";
print "<span id=\"filterDlg_dateChkBox\" style=\"display : none\">";
print "&nbsp;<button onclick=\"return filterDlgCheckDate()\">".
__('Check it')."</button>";
print "</span>";
print "<br/>" . __("on field") . " ";
print_select_hash("filter_type", 1, $filter_types,
'onchange="filterDlgCheckType(this)"');
'onchange="filterDlgCheckType(this)" dojoType="dijit.form.Select"');
print "<br/>";
print __("in") . " ";
print_feed_select($link, "feed_id", $active_feed_id);
print_feed_select($link, "feed_id", $active_feed_id,
'dojoType="dijit.form.FilteringSelect"');
print "</div>";
@ -508,7 +506,7 @@
print "<div class=\"dlgSecCont\">";
print "<select name=\"action_id\"
print "<select name=\"action_id\" dojoType=\"dijit.form.Select\"
onchange=\"filterDlgCheckAction(this)\">";
$result = db_query($link, "SELECT id,description FROM ttrss_filter_actions
@ -520,13 +518,14 @@
print "</select>";
print "<span id=\"filter_dlg_param_box\" style=\"display : none\">";
print "<span id=\"filterDlg_paramBox\" style=\"display : none\">";
print " " . __("with parameters:") . " ";
print "<input size=\"20\"
onkeypress=\"return filterCR(event, createFilter)\"
print "<input dojoType=\"dijit.form.TextBox\"
id=\"filterDlg_actionParam\"
name=\"action_param\">";
print_label_select($link, "action_param_label", $action_param);
print_label_select($link, "action_param_label", $action_param,
'id="filterDlg_actionParamLabel" dojoType="dijit.form.Select"');
print "</span>";
@ -537,30 +536,23 @@
print "<div class=\"dlgSec\">".__("Options")."</div>";
print "<div class=\"dlgSecCont\">";
print "<div style=\"line-height : 100%\">";
print "<input type=\"checkbox\" name=\"enabled\" id=\"enabled\" checked=\"1\">
print "<input dojoType=\"dijit.form.CheckBox\" type=\"checkbox\" name=\"enabled\" id=\"enabled\" checked=\"1\">
<label for=\"enabled\">".__('Enabled')."</label><br/>";
print "<input type=\"checkbox\" name=\"inverse\" id=\"inverse\">
print "<input dojoType=\"dijit.form.CheckBox\" type=\"checkbox\" name=\"inverse\" id=\"inverse\">
<label for=\"inverse\">".__('Inverse match')."</label>";
print "</div>";
print "</div>";
print "</form>";
print "<div class=\"dlgButtons\">";
print "<button onclick=\"return createFilter()\">".
print "<button onclick=\"return dijit.byId('filterEditDlg').execute()\">".
__('Create')."</button> ";
print "<button onclick=\"return closeInfoBox()\">".__('Cancel').
"</button>";
print "<button onclick=\"return dijit.byId('filterEditDlg').hide()\">".
__('Cancel')."</button>";
print "]]></content>";
// print "</td></tr></table>";
print "</div>";
//return;
}

View File

@ -103,11 +103,6 @@
$filter_id = db_escape_string($_REQUEST["id"]);
header("Content-Type: text/xml");
print "<dlg id=\"$subop\">";
print "<title>".__('Filter Editor')."</title>";
print "<content><![CDATA[";
$result = db_query($link,
"SELECT * FROM ttrss_filters WHERE id = '$filter_id' AND owner_uid = " . $_SESSION["uid"]);
@ -123,9 +118,9 @@
print "<form id=\"filter_edit_form\" onsubmit='return false'>";
print "<input type=\"hidden\" name=\"op\" value=\"pref-filters\">";
print "<input type=\"hidden\" name=\"id\" value=\"$filter_id\">";
print "<input type=\"hidden\" name=\"subop\" value=\"editSave\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"op\" value=\"pref-filters\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"id\" value=\"$filter_id\">";
print "<input dojoType=\"dijit.form.TextBox\" style=\"display : none\" name=\"subop\" value=\"editSave\">";
$result = db_query($link, "SELECT id,description
FROM ttrss_filter_types ORDER BY description");
@ -145,7 +140,7 @@
$date_ops_invisible = 'style="display : none"';
}
print "<span id=\"filter_dlg_date_mod_box\" $date_ops_invisible>";
print "<span id=\"filterDlg_dateModBox\" $date_ops_invisible>";
print __("Date") . " ";
$filter_params = array(
@ -153,26 +148,28 @@
"after" => __("after"));
print_select_hash("filter_date_modifier", $filter_param,
$filter_params);
$filter_params, 'dojoType="dijit.form.Select"');
print "&nbsp;</span>";
print "<input onkeypress=\"return filterCR(event, filterEditSave)\"
name=\"reg_exp\" size=\"30\" value=\"$reg_exp\">";
print "<input dojoType=\"dijit.form.ValidationTextBox\"
required=\"1\"
name=\"reg_exp\" style=\"font-size : 16px;\" value=\"$reg_exp\">";
print "<span id=\"filter_dlg_date_chk_box\" $date_ops_invisible>";
print "<span id=\"filterDlg_dateChkBox\" $date_ops_invisible>";
print "&nbsp;<button onclick=\"return filterDlgCheckDate()\">".
__('Check it')."</button>";
print "</span>";
print "<br/> " . __("on field") . " ";
print_select_hash("filter_type", $filter_type, $filter_types,
'onchange="filterDlgCheckType(this)"');
'onchange="filterDlgCheckType(this)" dojoType="dijit.form.Select"');
print "<br/>";
print __("in") . " ";
print_feed_select($link, "feed_id", $feed_id);
print_feed_select($link, "feed_id", $feed_id,
'dojoType="dijit.form.FilteringSelect"');
print "</div>";
@ -180,14 +177,14 @@
print "<div class=\"dlgSecCont\">";
print "<select name=\"action_id\"
print "<select name=\"action_id\" dojoType=\"dijit.form.Select\"
onchange=\"filterDlgCheckAction(this)\">";
$result = db_query($link, "SELECT id,description FROM ttrss_filter_actions
ORDER BY name");
while ($line = db_fetch_assoc($result)) {
$is_sel = ($line["id"] == $action_id) ? "selected" : "";
$is_sel = ($line["id"] == $action_id) ? "selected=\"1\"" : "";
printf("<option value='%d' $is_sel>%s</option>", $line["id"], __($line["description"]));
}
@ -195,19 +192,20 @@
$param_hidden = ($action_id == 4 || $action_id == 6 || $action_id == 7) ? "" : "display : none";
print "<span id=\"filter_dlg_param_box\" style=\"$param_hidden\">";
print "<span id=\"filterDlg_paramBox\" style=\"$param_hidden\">";
print " " . __("with parameters:") . " ";
$param_int_hidden = ($action_id != 7) ? "" : "display : none";
print "<input size=\"20\" style=\"$param_int_hidden\"
onkeypress=\"return filterCR(event, filterEditSave)\"
print "<input style=\"$param_int_hidden\"
dojoType=\"dijit.form.TextBox\" id=\"filterDlg_actionParam\"
name=\"action_param\" value=\"$action_param\">";
$param_int_hidden = ($action_id == 7) ? "" : "display : none";
print_label_select($link, "action_param_label", $action_param,
$param_int_hidden);
"style=\"$param_int_hidden\"" .
'id="filterDlg_actionParamLabel" dojoType="dijit.form.Select"');
print "</span>";
@ -221,21 +219,21 @@
print "<div style=\"line-height : 100%\">";
if ($enabled) {
$checked = "checked";
$checked = "checked=\"1\"";
} else {
$checked = "";
}
print "<input type=\"checkbox\" name=\"enabled\" id=\"enabled\" $checked>
print "<input dojoType=\"dijit.form.CheckBox\" type=\"checkbox\" name=\"enabled\" id=\"enabled\" $checked>
<label for=\"enabled\">".__('Enabled')."</label><br/>";
if ($inverse) {
$checked = "checked";
$checked = "checked=\"1\"";
} else {
$checked = "";
}
print "<input type=\"checkbox\" name=\"inverse\" id=\"inverse\" $checked>
print "<input dojoType=\"dijit.form.CheckBox\" type=\"checkbox\" name=\"inverse\" id=\"inverse\" $checked>
<label for=\"inverse\">".__('Inverse match')."</label>";
print "</div>";
@ -250,13 +248,13 @@
__('Remove')."</button>";
print "</div>";
print "<button onclick=\"return filterEditSave()\">".
print "<button onclick=\"return dijit.byId('filterEditDlg').execute()\">".
__('Save')."</button> ";
print "<button onclick=\"return filterEditCancel()\">".
print "<button onclick=\"return dijit.byId('filterEditDlg').hide()\">".
__('Cancel')."</button>";
print "]]></content></dlg>";
print "</div>";
return;
}

View File

@ -288,27 +288,31 @@ function editUser(id, event) {
}
function editFilter(id, event) {
try {
if (!event || !event.ctrlKey) {
var query = "backend.php?op=pref-filters&subop=edit&id=" + param_escape(id);
notify_progress("Loading, please wait...", true);
var query = "?op=pref-filters&subop=edit&id=" +
param_escape(id);
if (dijit.byId("filterEditDlg"))
dijit.byId("filterEditDlg").destroyRecursive();
dialog = new dijit.Dialog({
id: "filterEditDlg",
title: __("Edit Filter"),
style: "width: 600px",
execute: function() {
if (this.validate()) {
this.hide();
new Ajax.Request("backend.php", {
parameters: query,
parameters: dojo.objectToQuery(this.attr('value')),
onComplete: function(transport) {
infobox_callback2(transport);
document.forms['filter_edit_form'].reg_exp.focus();
updateFilterList();
}});
} else if (event.ctrlKey) {
var cb = $('FICHK-' + id);
cb.checked = !cb.checked;
toggleSelectRow(cb);
}
},
href: query});
dialog.show();
} catch (e) {
exception_error("editFilter", e);
@ -1099,6 +1103,8 @@ function init() {
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.RadioButton");

View File

@ -1259,7 +1259,11 @@ div.dlgSecCont {
float : left;
font-size : 12px;
font-weight : normal;
line-height : 200%;
}
div.dlgSecCont > * {
margin-top : 4px;
vertical-align : bottom;
}
div.dlgButtons {
@ -1603,3 +1607,8 @@ span.labelFixedLength {
display : inline-block;
width : 70%;
}
#filter_dlg_date_chk_box {
display : inline-block;
}

View File

@ -276,6 +276,9 @@ function init() {
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.Toolbar");
dojo.require("dijit.ProgressBar");
dojo.require("dijit.Menu");