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

View File

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

View File

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

View File

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

View File

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

View File

@ -1259,7 +1259,11 @@ div.dlgSecCont {
float : left; float : left;
font-size : 12px; font-size : 12px;
font-weight : normal; font-weight : normal;
line-height : 200%; }
div.dlgSecCont > * {
margin-top : 4px;
vertical-align : bottom;
} }
div.dlgButtons { div.dlgButtons {
@ -1603,3 +1607,8 @@ span.labelFixedLength {
display : inline-block; display : inline-block;
width : 70%; 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("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree"); dojo.require("dijit.Tree");
dojo.require("dijit.form.Select"); 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.Toolbar");
dojo.require("dijit.ProgressBar"); dojo.require("dijit.ProgressBar");
dojo.require("dijit.Menu"); dojo.require("dijit.Menu");