rework filter dialogs to use dijit.Form

7 files changed, 144 insertions, 145 deletions

diff --git a/functions.js b/functions.js
index 48a9ef230..bbfd32e4e 100644
--- a/functions.js
+++ b/functions.js
@@ -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"];
-	
-		if (!form) {
-			form = document.forms["filter_edit_form"];
-		}
+		var dialog = dijit.byId("filterEditDlg");
 
-		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);
diff --git a/functions.php b/functions.php
index fe42ea43b..2dcf5d3fc 100644
--- a/functions.php
+++ b/functions.php
@@ -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>";
 
diff --git a/modules/popup-dialog.php b/modules/popup-dialog.php
index ad434bd9b..2f339e669 100644
--- a/modules/popup-dialog.php
+++ b/modules/popup-dialog.php
@@ -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 "<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)\"
-					name=\"action_param\">";
+			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;
 		}
diff --git a/modules/pref-filters.php b/modules/pref-filters.php
index 12bfd4397..28f30fa69 100644
--- a/modules/pref-filters.php
+++ b/modules/pref-filters.php
@@ -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;
 		}
diff --git a/prefs.js b/prefs.js
index 2309e29ce..fa4804ff4 100644
--- a/prefs.js
+++ b/prefs.js
@@ -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);
+		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: dojo.objectToQuery(this.attr('value')),
+						onComplete: function(transport) {
+							updateFilterList();				
+					}});
+				}
+			},
+			href: query});
+
+		dialog.show();
 
-			var query = "?op=pref-filters&subop=edit&id=" + 
-				param_escape(id);
-	
-			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) {
 		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");
diff --git a/tt-rss.css b/tt-rss.css
index 54eefc6b6..b0733d186 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -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;
+}
+
diff --git a/tt-rss.js b/tt-rss.js
index aa23ea075..5409fe899 100644
--- a/tt-rss.js
+++ b/tt-rss.js
@@ -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");