javascript to toggle record selection status

- checkboxes now show up only when JavaScript enabled
- toggling a single record checkbox adds/removes it from temporary list
- toggling the select all checkbox adds/removes all records on the page
- legacy add/remove links when a patron is not logged in tweaked to
  always be present, but to have visibility controlled based on checkbox
  chanegs

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index 01fb9f9..2c52ce6 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -68,6 +68,10 @@
 <script src='[% ctx.media_prefix %]/js/ui/default/opac/ac_google_books.js[% ctx.cache_key %]' async defer></script>
 [%- END %]
 
+[%- IF ctx.page == 'rresult' %]
+<script src='[% ctx.media_prefix %]/js/ui/default/opac/record_selectors.js[% ctx.cache_key %]' async defer></script>
+[%-END %]
+
 <!-- Require some inputs and selections for browsers that don't support required form field element -->
 [% IF ctx.page == 'place_hold' %]
   <script type="text/javascript" src="[% ctx.media_prefix %]/js/ui/default/opac/holds-validation.js[% ctx.cache_key %]">

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index a46d5d4..01965c4 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -468,18 +468,22 @@ END;
                                                                 INCLUDE "opac/parts/bookbag_actions.tt2";
                                                             %]
                                                             [%  ELSE;
-                                                                operation = ctx.mylist.grep(rec.id).size ? "delete" : "add";
-                                                                label = (operation == "add") ?  l("Add to my list") : l("Remove from my list");
-                                                                title_label = (operation == "add") ? 
-                                                                  l("Add [_1] to my list", attrs.title) : 
-                                                                  l("Remove [_1] from my list", attrs.title);
-                                                                href = mkurl(ctx.opac_root _ '/mylist/' _ operation, 
+                                                                addhref = mkurl(ctx.opac_root _ '/mylist/add',
                                                                         {record => rec.id, anchor => 'record_' _ rec.id}, 1);
-                                                            %]      
-                                                            <a href="[% href %]" class="no-dec" 
-                                                                [% html_text_attr('title', title_label) %] rel="nofollow" vocab="">
+                                                                delhref = mkurl(ctx.opac_root _ '/mylist/delete',
+                                                                        {record => rec.id, anchor => 'record_' _ rec.id}, 1);
+                                                            %]
+                                                            <a href="[% addhref %]" id="mylist_add_[% rec.id %]"
+                                                                [% IF ctx.mylist.grep(rec.id).size %] class="hidden" [% END %]
+                                                                title="[% l("Add [_1] to my list", attrs.title) %] rel="nofollow" vocab="">
+                                                                <img src="[% ctx.media_prefix %]/images/clipboard.png[% ctx.cache_key %]" alt="" />
+                                                                [% l("Add to my list") %]
+                                                            </a>
+                                                            <a href="[% delhref %]" id="mylist_delete_[% rec.id %]"
+                                                                [% IF !ctx.mylist.grep(rec.id).size %] class="hidden" [% END %]
+                                                                title="[% l("Remove [_1] from my list", attrs.title) %] rel="nofollow" vocab="">
                                                                 <img src="[% ctx.media_prefix %]/images/clipboard.png[% ctx.cache_key %]" alt="" />
-                                                                [% label %]
+                                                                [% l("Remove from my list") %]
                                                             </a>
                                                             [% END %]
                                                         [% END %]

diff --git a/Open-ILS/web/js/ui/default/opac/record_selectors.js b/Open-ILS/web/js/ui/default/opac/record_selectors.js
new file mode 100644 (file)
index 0000000..a04ec69
--- /dev/null
+++ b/Open-ILS/web/js/ui/default/opac/record_selectors.js
@@ -0,0 +1,96 @@
+;(function () {
+
+    var rec_selector_block = document.getElementById("record_selector_block");
+    var rec_selectors = document.getElementsByClassName("result_record_selector");
+    var mylist = [];
+
+    function mungeList(op, rec) {
+        console.debug('calling mungeList to ' + op + ' record ' + rec);
+        var req = new window.XMLHttpRequest();
+        if (Array.isArray(rec)) {
+            var qrec = rec.map(function(rec) {
+                         return 'record=' + encodeURIComponent(rec);
+                       }).join('&');
+        } else {
+            var qrec = 'record=' + encodeURIComponent(rec);
+        }
+        req.open('GET', '/eg/opac/api/mylist/' + op + '?' + qrec);
+        if (('responseType' in req) && (req.responseType = 'json')) {
+            req.onload = function (evt) {
+                var result = req.response;
+                if (result) {
+                    mylist = result.mylist;
+                }
+            }
+        } else {
+            // IE 10/11
+            req.onload = function (evt) {
+                var result = JSON.parse(req.responseText);
+                if (result) {
+                    mylist = result.mylist;
+                }
+            }
+        }
+        req.send();
+    }
+
+    function adjustLegacyControlsVis(op, rec) {
+        if (op == 'add') {
+            document.getElementById('mylist_add_' + rec).classList.add('hidden');
+            document.getElementById('mylist_delete_' + rec).classList.remove('hidden');
+        } else {
+            document.getElementById('mylist_add_' + rec).classList.remove('hidden');
+            document.getElementById('mylist_delete_' + rec).classList.add('hidden');
+        }
+    }
+
+    if (rec_selector_block) rec_selector_block.classList.remove("hidden");
+    var all_checked = true;
+    [].forEach.call(rec_selectors, function(el) {
+        el.addEventListener("click", function() {
+            if (this.checked) {
+                mungeList('add', this.value);
+                adjustLegacyControlsVis('add', this.value);
+            } else {
+                mungeList('delete', this.value);
+                adjustLegacyControlsVis('delete', this.value);
+            }
+        }, false);
+        el.classList.remove("hidden");
+        if (!el.checked) all_checked = false;
+    });
+    if (all_checked) {
+        document.getElementById('select_all_records').checked = true;
+    }
+
+    document.getElementById('select_all_records').addEventListener('click', function() {
+        if (this.checked) {
+            // adding
+            var to_add = [];
+            [].forEach.call(rec_selectors, function(el) {
+                if (!el.checked) {
+                    el.checked = true;
+                    adjustLegacyControlsVis('add', el.value);
+                    to_add.push(el.value);
+                }
+            });
+            if (to_add.length > 0) {
+                mungeList('add', to_add);
+            }
+        } else {
+            // deleting
+            var to_del = [];
+            [].forEach.call(rec_selectors, function(el) {
+                if (el.checked) {
+                    el.checked = false;
+                    adjustLegacyControlsVis('delete', el.value);
+                    to_del.push(el.value);
+                }
+            });
+            if (to_del.length > 0) {
+                mungeList('delete', to_del);
+            }
+        }
+    });
+
+})();