rework filter dialogs to use dijit.Form

diff --git a/functions.js b/functions.js
index 48a9ef230fed360a1fd0a13ad28d2b76cbd44e66..bbfd32e4e2649ed5cf3143b17f37cf3d279e44b6 100644 (file)
--- 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 fe42ea43bc7cc181202e96b70fc1a33b38f17940..2dcf5d3fc3490809710087f74a5d495ca5079bff 100644 (file)
--- 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 ad434bd9b73d93c10851b400491e949b256166b8..2f339e6697ac78762970592cf9e1f412fc230546 100644 (file)
--- 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 12bfd43978f39080e9214d95a34d82b3a5ba1cff..28f30fa691c687c0a310ab51448a8d9cd73c5ae7 100644 (file)
--- 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 2309e29ce9d9b49e14a9563e7f2b3bc6ab7e1a19..fa4804ff474ac381378711e73ad4d2ffcf0c1b4c 100644 (file)
--- 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 54eefc6b678db21ae7aeef4c577efed9f7d74c01..b0733d1869702116479e73025a755c09bec5034e 100644 (file)
--- 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 aa23ea075be67f7e24146b85c61d619e9525b1eb..5409fe89915643d8de58b8faa439387776d5e364 100644 (file)
--- 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");