More improvements for Boolean Charts

* Save them upon browser history navigation using onbeforeunload event
* Allow to delete charts with JS
* Remove incorrect margins between buttons

js/charts.js

@@ -4,30 +4,44 @@
  * Contributor(s): Vitaliy Filippov <vitalif@mail.ru>
  */
 
+addListener(window, 'beforeunload', function()
+{
+    // Save boolean charts upon window unload
+    document.getElementById('boolean_chart_form_save').value = document.getElementById('boolean_chart_form').innerHTML;
+});
+onDomReady(function()
+{
+    // Restore boolean charts on clicking "Back"
+    var v = document.getElementById('boolean_chart_form_save').value;
+    if (v)
+        document.getElementById('boolean_chart_form').innerHTML = v;
+});
+
 function chart_add_second(btn)
 {
     var n = btn.id.substr(5, btn.id.length-9);
     // Transform <div> to <fieldset>
     var d = document.getElementById('chart'+n);
-    d.id = 'divchart'+n; // prevent id collisions
+    btn.parentNode.removeChild(btn);
-    btn.id = 'btnchart'+n; // prevent id collisions
     var op = (n != 'R' && n.indexOf('-') < 0 ? 'and' : 'or');
     // Create <fieldset>
     var f = document.createElement('fieldset');
-    f.id = 'chart'+n;
+    f.setAttribute('id', 'chart'+n);
-    f.className = 'chart _'+op;
+    f.setAttribute('class', 'chart _'+op);
-    var legend_html = op.toUpperCase() + ' ' +
+    var legend_html = op.toUpperCase() +
-        '<input type="button" value="+" class="chart_add_button" id="chart'+n+'-btn" onclick="chart_add(this.id)" />';
+        ' <input type="button" value="+" id="chart'+n+'-btn" onclick="chart_add(this.id)" />' +
+        ' <input type="button" value="&#x2718;" class="chart_rm_button" id="rm'+n+'-btn" onclick="chart_rm(this)" />';
     // Create <legend>
     var l = document.createElement('legend');
-    l.className = '_'+op;
+    l.setAttribute('class', '_'+op);
     l.innerHTML = legend_html;
     f.appendChild(l);
     d.parentNode.insertBefore(f, d);
-    btn.parentNode.removeChild(btn);
     d.parentNode.removeChild(d);
     while (d.childNodes.length)
+    {
         f.appendChild(d.childNodes[0]);
+    }
     // Add an operand
     chart_add('chart'+n+'-btn');
 }
@@ -39,7 +53,6 @@ function chart_add_btn(d, s)
     i.setAttribute('id', d.id+'-btn');
     i.setAttribute('onclick', 'chart_add_second(this)');
     i.setAttribute('value', s);
-    d.appendChild(document.createTextNode(' '));
     d.appendChild(i);
 }
 
@@ -47,10 +60,10 @@ function chart_add_btn(d, s)
 function chart_add_div(d, n)
 {
     var i, nd;
-    for (i = 0; document.getElementById(n+i); i++);
+    for (i = 0; document.getElementById(n+i); i++) {}
     nd = document.createElement('div');
-    nd.id = n+i;
+    nd.setAttribute('id', n+i);
-    nd.className = 'chart';
+    nd.setAttribute('class', 'chart');
     d.appendChild(nd);
     return nd;
 }
@@ -59,10 +72,13 @@ function chart_add_div(d, n)
 function chart_copy_select(cp_id, new_id)
 {
     var s = document.createElement('select');
-    s.id = s.name = new_id;
+    s.setAttribute('id', new_id);
+    s.setAttribute('name', new_id);
     var o = document.getElementById(cp_id).options;
     for (var i = 0; i < o.length; i++)
+    {
         bz_createOptionInSelect(s, o[i].text, o[i].value);
+    }
     s.selectedIndex = 0;
     return s;
 }
@@ -70,48 +86,47 @@ function chart_copy_select(cp_id, new_id)
 // Add another term into chart when clicked on button with id=btnid
 function chart_add(btnid)
 {
-    var d, i, add_and, add_or, n;
+    var d, i, n;
     d = document.getElementById(btnid.substr(0, btnid.length-4)); // chartN-btn
     if (d.id == 'chartR')
     {
         var clr = document.createElement('div');
-        clr.style.clear = 'both';
+        clr.setAttribute('style', 'clear: both');
         d.appendChild(clr);
-        add_and = d = chart_add_div(d, 'chart');
+        d = chart_add_div(d, 'chart');
-    }
+        // Add 'AND' button
-    if (d.id.indexOf('-') < 0)
+        chart_add_btn(d, 'AND');
-        add_or = d = chart_add_div(d, d.id+'-');
-    var cn = d.id.substr(5);
-    for (i = 0; document.getElementById('field'+cn+'-'+i); i++);
-    cn = cn+'-'+i;
-    if (!add_or)
-        d.appendChild(document.createElement('br'));
-    // Append field-type-value inputs
-    d.appendChild(chart_copy_select('field0-0-0', 'field'+cn));
-    d.appendChild(chart_copy_select('type0-0-0', 'type'+cn));
-    s = document.createElement('input');
-    s.id = s.name = "value"+cn;
-    s.size = 40;
-    d.appendChild(s);
-    if (add_and)
-    {
-        chart_add_btn(add_and, 'AND');
         // Add negate button
-        var n = add_and.id.substr(5);
+        var n = d.id.substr(5);
         var i = document.createElement('input');
         i.setAttribute('type', 'button');
         i.setAttribute('id', 'negate'+n+'-btn');
         i.setAttribute('onclick', 'chart_neg(this)');
         i.setAttribute('value', 'NOT');
-        add_and.parentNode.appendChild(i);
+        d.parentNode.appendChild(i);
         // Add hidden input for negate button
         i = document.createElement('input');
-        i.type = 'hidden';
+        i.setAttribute('type', 'hidden');
-        i.name = i.id = 'negate'+n;
+        i.setAttribute('name', 'negate'+n);
+        i.setAttribute('id', 'negate'+n);
         document.getElementById('chartR').appendChild(i);
     }
-    if (add_or)
+    if (d.id.indexOf('-') < 0)
-        chart_add_btn(add_or, 'OR');
+    {
+        d = chart_add_div(d, d.id+'-');
+        // Add 'OR' button
+        chart_add_btn(d, 'OR');
+    }
+    d = chart_add_div(d, d.id+'-');
+    var cn = d.id.substr(5);
+    // Append field-type-value inputs
+    d.appendChild(chart_copy_select('field0-0-0', 'field'+cn));
+    d.appendChild(chart_copy_select('type0-0-0', 'type'+cn));
+    s = document.createElement('input');
+    s.setAttribute('id', 'value'+cn);
+    s.setAttribute('name', 'value'+cn);
+    s.setAttribute('size', '40');
+    d.appendChild(s);
 }
 
 function chart_rm(btn)
@@ -131,6 +146,49 @@ function chart_rm(btn)
         e.parentNode.insertBefore(btn, e);
         e.parentNode.removeChild(e);
     }
+    else if (m = /^rm(.*)-btn$/.exec(btn.id))
+    {
+        // Remove last part of current chart
+        var chartid = m[1] == 'R' ? '' : m[1]+'-';
+        var i;
+        for (i = 0; document.getElementById('chart'+chartid+i); i++) {}
+        i--;
+        if (i >= 1)
+        {
+            var e = document.getElementById('negchart'+chartid+i)
+                || document.getElementById('chart'+chartid+i);
+            if (e.previousSibling.nodeName == 'DIV' &&
+                e.previousSibling.style.clear == 'both' &&
+                e.previousSibling.childNodes.length == 0)
+            {
+                // Remove <div style="clear: both"></div> divider
+                e.parentNode.removeChild(e.previousSibling);
+            }
+            e.parentNode.removeChild(e);
+            if (e = document.getElementById('negate'+chartid+i+'-btn'))
+                e.parentNode.removeChild(e);
+            if (e = document.getElementById('negate'+chartid+i))
+                e.parentNode.removeChild(e);
+            if (i == 1)
+            {
+                // Remove fieldset
+                var d = document.createElement('div');
+                d.setAttribute('id', 'chart'+m[1]);
+                d.setAttribute('class', 'chart');
+                var f = document.getElementById('chart'+m[1]);
+                while (f.childNodes.length)
+                {
+                    if (f.childNodes[0].nodeName == 'LEGEND')
+                        f.removeChild(f.childNodes[0]);
+                    else
+                        d.appendChild(f.childNodes[0]);
+                }
+                chart_add_btn(d, f.className.indexOf('_and') >= 0 ? 'AND' : 'OR');
+                f.parentNode.insertBefore(d, f);
+                f.parentNode.removeChild(f);
+            }
+        }
+    }
 }
 
 function chart_neg(btn)
@@ -141,12 +199,11 @@ function chart_neg(btn)
     btn.setAttribute('id', 'unneg'+chartid+'-btn');
     btn.setAttribute('onclick', 'chart_rm(this)');
     btn.setAttribute('value', '✘');
-    btn.setAttribute('class', 'chart_rm_button');
     var fieldset = document.createElement('fieldset');
-    fieldset.id = 'negchart'+chartid;
+    fieldset.setAttribute('id', 'negchart'+chartid);
-    fieldset.className = 'chart _neg';
+    fieldset.setAttribute('class', 'chart _neg');
     var l = document.createElement('legend');
-    l.className = '_neg';
+    l.setAttribute('class', '_neg');
     l.appendChild(document.createTextNode(' NOT '));
     l.appendChild(btn);
     fieldset.appendChild(l);

skins/contrib/Mozilla/global.css

@@ -126,6 +126,9 @@ legend {
     padding: 1px .8em;
     margin-left: 4px;
 }
+.chart input[type=button].chart_rm_button {
+    margin-left: 0;
+}
 .chart select, .chart input {
     margin-top: 0 !important;
 }

template/en/default/search/boolean-charts.html.tmpl

@@ -21,13 +21,15 @@
 <p><strong><a name="chart">Advanced Searching Using Boolean Charts:</a></strong></p>
 
 [% charts = default.charts %]
-<div class="chart">
+<div class="chart" id="boolean_chart_form">
+[% chart_html = BLOCK %]
 
 [% IF charts.size > 1 %]
 <fieldset class="chart _or">
 <legend class="_or">
   OR
-  <input type="button" value="+" class="chart_add_button" id="chartR-btn" onclick="chart_add(this.id)" />
+  <input type="button" value="+" id="chartR-btn" onclick="chart_add(this.id)" />
+  <input type="button" value="&#x2718;" class="chart_rm_button" id="rmR-btn" onclick="chart_rm(this)" />
 </legend>
 [% ELSE %]
 <div class="chart" id="chartR">
@@ -44,7 +46,7 @@
   <fieldset class="chart _neg" id="negchart[% C %]">
     <legend class="_neg">
       NOT
-      <input type="button" value="&#x2718;" class="chart_rm_button" id="unneg[% C %]-btn" onclick="chart_rm(this)" />
+      <input type="button" value="&#x2718;" id="unneg[% C %]-btn" onclick="chart_rm(this)" />
     </legend>
   [% END %]
 
@@ -52,28 +54,34 @@
   <fieldset class="chart _and" id="chart[% C %]">
     <legend class="_and">
       AND
-      <input type="button" value="+" class="chart_add_button" id="chart[% C %]-btn" onclick="chart_add(this.id)" />
+      <input type="button" value="+" id="chart[% C %]-btn" onclick="chart_add(this.id)" />
+      <input type="button" value="&#x2718;" class="chart_rm_button" id="rm[% C %]-btn" onclick="chart_rm(this)" />
     </legend>
   [% ELSE %]
   <div class="chart" id="chart[% C %]">
   [% END %]
 
   [% FOREACH row = chart.rows %]
-    [% I = loop.count - 1 %]
+    [% I = loop.index %]
 
     [% IF row.size > 1 %]
     <fieldset class="chart _or" id="chart[% C %]-[% I %]">
-      <legend class="_or">OR <input type="button" value="+" class="chart_add_button" id="chart[% C %]-[% I %]-btn" onclick="chart_add(this.id)" /></legend>
+      <legend class="_or">
+        OR
+        <input type="button" value="+" id="chart[% C %]-[% I %]-btn" onclick="chart_add(this.id)" />
+        <input type="button" value="&#x2718;" class="chart_rm_button" id="rm[% C %]-[% I %]-btn" onclick="chart_rm(this)" />
+      </legend>
     [% ELSE %]
     <div class="chart" id="chart[% C %]-[% I %]">
     [% END %]
 
     [% FOREACH col = row %]
-      [% J = loop.count - 1 %]
+    [% J = loop.index %]
-      [% "<br />" IF J %]
+    <div class="chart" id="chart[% C %]-[% I %]-[% J %]">
-      [% html_select("field$C-$I-$J", col.field, chart_fields) %]
+      [%- html_select("field$C-$I-$J", col.field, chart_fields) -%]
-      [%- html_select("type$C-$I-$J", col.type, chart_types, lc_messages.operator_descs)
+      [%- html_select("type$C-$I-$J", col.type, chart_types, lc_messages.operator_descs) -%]
-      %]<input id="[% "value$C-$I-$J" %]" name="[% "value$C-$I-$J" %]" value="[% col.value | html %]" size="40" />
+      <input id="[% "value$C-$I-$J" %]" name="[% "value$C-$I-$J" %]" value="[% col.value | html %]" size="40" />
+    </div>
     [% END %]
 
     [% IF row.size > 1 %]
@@ -95,14 +103,11 @@
   [% END %]
   [% IF !chart.negate %]
     <input type="button" value="NOT" id="negate[% C %]-btn" onclick="chart_neg(this)" />
-  [% END %]
+  [% ELSE %]
-
-  [% IF chart.negate %]
   </fieldset>
   [% END %]
 
   <input type="hidden" value="[% chart.negate ? '1' : '' %]" id="negate[% C %]" name="negate[% C %]" />
-
 [% END %]
 
 [% IF charts.size > 1 %]
@@ -112,7 +117,10 @@
 </div>
 [% END %]
 
+[% END %]
+[% chart_html.replace('\s*\n\s*', '') %]
 </div>
-<br style="clear: both" />
+<input type="hidden" id="boolean_chart_form_save" />
+<div style="clear: both"></div>
 
 <script language="JavaScript" type="text/javascript" src="js/charts.js"></script>