Bug 660382: Hide the complex features of custom search by default

r=dkl, a=mkanat

2 files changed, 43 insertions, 15 deletions

diff --git a/js/custom-search.js b/js/custom-search.js
index 3f3ffeef2..800150440 100644
--- a/js/custom-search.js
+++ b/js/custom-search.js
@@ -19,6 +19,20 @@
  */
 
 var PAREN_INDENT_EM = 2;
+var ANY_ALL_SELECT_CLASS = 'any_all_select';
+
+// When somebody chooses to "Hide Advanced Features" for Custom Search,
+// we don't want to hide "Not" checkboxes if they've been checked. We
+// accomplish this by removing the custom_search_advanced class from Not
+// checkboxes when they are checked.
+//
+// We never add the custom_search_advanced class back. If we did, TUI
+// would get confused in this case: Check Not, Hide Advanced Features,
+// Uncheck Not, Show Advanced Features. (It hides "Not" when it shouldn't.)
+function custom_search_not_changed(id) {
+    var container = document.getElementById('custom_search_not_container_' + id);
+    YAHOO.util.Dom.removeClass(container, 'custom_search_advanced');
+}
 
 function custom_search_new_row() {
     var row = document.getElementById('custom_search_last_row');
@@ -47,11 +61,11 @@ function custom_search_open_paren() {
 
     // If there's an "Any/All" select in this row, it needs to stay as
     // part of the parent paren set.
-    var any_all = _remove_any_all(row);
-    if (any_all) {
+    var old_any_all = _remove_any_all(row);
+    if (old_any_all) {
         var any_all_row = row.cloneNode(false);
         any_all_row.id = null;
-        any_all_row.appendChild(any_all);
+        any_all_row.appendChild(old_any_all);
         row.parentNode.insertBefore(any_all_row, row);
     }
 
@@ -72,12 +86,13 @@ function custom_search_open_paren() {
     row.parentNode.insertBefore(paren_row, row);
     
     // New paren set needs a new "Any/All" select.
+    var any_all_container = document.createElement('div');
+    YAHOO.util.Dom.addClass(any_all_container, ANY_ALL_SELECT_CLASS);
     var j_top = document.getElementById('j_top');
-    var any_all_container = j_top.parentNode.cloneNode(true);
-    var any_all = YAHOO.util.Dom.getElementsBy(function() { return true },
-                                               'select', any_all_container);
-    any_all[0].name = 'j' + prev_id;
-    any_all[0].id = any_all[0].name;
+    var any_all = j_top.cloneNode(true);
+    any_all.name = 'j' + prev_id;
+    any_all.id = any_all.name;
+    any_all_container.appendChild(any_all);
     row.insertBefore(any_all_container, row.firstChild);
 
     var margin = YAHOO.util.Dom.getStyle(row, 'margin-left');
@@ -146,8 +161,8 @@ function _cs_fix_ids(parent, preserve_values) {
 }
 
 function _remove_any_all(parent) {
-    var any_all = YAHOO.util.Dom.getElementsByClassName('any_all_select', null,
-                                                        parent);
+    var any_all = YAHOO.util.Dom.getElementsByClassName(
+        ANY_ALL_SELECT_CLASS, null, parent);
     if (any_all[0]) {
         parent.removeChild(any_all[0]);
         return any_all[0];
diff --git a/template/en/default/search/boolean-charts.html.tmpl b/template/en/default/search/boolean-charts.html.tmpl
index 33d5df910..b90f5f1b6 100644
--- a/template/en/default/search/boolean-charts.html.tmpl
+++ b/template/en/default/search/boolean-charts.html.tmpl
@@ -71,6 +71,8 @@
   <script type="text/javascript">
     TUI_alternates['custom_search_query'] = '&#9658;';
     TUI_hide_default('custom_search_query');
+    TUI_alternates['custom_search_advanced'] = "Show Advanced Features";
+    TUI_hide_default('custom_search_advanced');
   </script>
   <script type="text/javascript" src="js/custom-search.js"></script>
 </div>
@@ -82,7 +84,8 @@
   
   [% IF !top_level_any_shown %]
     [% INCLUDE any_all_select
-      name = "j_top" id = "j_top" selected = default.j_top.0 %]
+      name = "j_top" selected = default.j_top.0
+      with_advanced_link = 1 %]
     [% top_level_any_shown = 1 %]
   [% END %]
 
@@ -96,22 +99,26 @@
     
     [% IF previous_condition.f == "OP" %]
       [% INCLUDE any_all_select
-        name = "j" _ (cond_num - 1) id = "j" _ (cond_num - 1)
+        name = "j" _ (cond_num - 1) 
         selected = previous_condition.j %]
     [% END %]
 
     [% IF with_buttons %]
-      <button id="op_button" type="button" 
+      <button id="op_button" type="button" class="custom_search_advanced"
               title="Start a new group of criteria, including this row"
               onclick="custom_search_open_paren()">(</button>
     [% END %]
 
     [% UNLESS condition.f == "CP" %]
-      <span class="custom_search_not_container" 
+      [%# This only gets hidden via custom_search_advanced if it isn't set. %]
+      <span id="custom_search_not_container_[% cond_num FILTER html %]"
+            class="custom_search_not_container
+                   [%- ' custom_search_advanced' UNLESS condition.n %]"
             title="Search for the opposite of the criteria here">
         <input type="checkbox" id="n[% cond_num FILTER html %]"
                class="custom_search_form_field"
                name="n[% cond_num FILTER html %]" value="1"
+               onclick="custom_search_not_changed([% cond_num FILTER js %])"
                [% ' checked="checked"' IF condition.n %]>
         <label for="n[% cond_num FILTER html %]">Not</label>
       </span>
@@ -163,10 +170,16 @@
 
 [% BLOCK any_all_select %]
   <div class="any_all_select">
-    <select name="[% name FILTER html %]" [% "id=\"$id\"" IF id %]>
+    <select name="[% name FILTER html %]" id="[% name FILTER html %]">
       <option value="AND">Match ALL of the following:</option>
       <option value="OR" [% ' selected="selected"' IF selected == "OR" %]>
         Match ANY of the following:</option>
     </select>
+    [% IF with_advanced_link %]
+      <a id="custom_search_advanced_controller"
+         href="javascript:TUI_toggle_class('custom_search_advanced')">
+        Hide Advanced Features
+      </a>
+    [% END %]
   </div>
 [% END %]