make legacy (and page-specific) add/remove cart budgets use AJAX when JS available

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

diff --git a/Open-ILS/src/templates/opac/parts/record/summary.tt2 b/Open-ILS/src/templates/opac/parts/record/summary.tt2
index e8ec227..57bfb2d 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/summary.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/summary.tt2
@@ -99,11 +99,25 @@
 
             <div class="rdetail_aux_utils toggle_list">
             [% operation = ctx.mylist.grep('^' _ ctx.bre_id _ '$').size ? "delete" : "add";
+                addhref = mkurl(ctx.opac_root _ '/mylist/add',    {record => ctx.bre_id}, stop_parms);
+                delhref = mkurl(ctx.opac_root _ '/mylist/delete', {record => ctx.bre_id}, stop_parms);
                 label = (operation == "add") ? l("Add to Cart") : l("Remove from Cart");
             %]
-                <a href="[% mkurl(ctx.opac_root _ '/mylist/' _ operation, {record => ctx.bre_id}, stop_parms) %]" class="no-dec" rel="nofollow" vocab="">
+                <a href="[% addhref %]" id="mylist_add_[% ctx.bre_id %]"
+                    rel="nofollow" vocab=""
+                    data-recid="[% ctx.bre_id %]" data-action="add"
+                    class="no-dec mylist_action [% IF ctx.mylist.grep('^' _ ctx.bre_id _ '$').size %]hidden[% END %]"
+                    title="[% l("Add [_1] to cart", attrs.title) %]" rel="nofollow" vocab="">
                     <img src="[% ctx.media_prefix %]/images/add-to-cart.png[% ctx.cache_key %]" alt="" />
-                    [% label %]
+                    [% l("Add to cart") %]
+                </a>
+                <a href="[% delhref %]" id="mylist_delete_[% ctx.bre_id %]"
+                     rel="nofollow" vocab=""
+                    data-recid="[% ctx.bre_id %]" data-action="delete"
+                    class="mylist_action [% IF !ctx.mylist.grep('^' _ ctx.bre_id _ '$').size %]hidden[% END %]"
+                    title="[% l("Remove [_1] from cart", attrs.title) %]" rel="nofollow" vocab="">
+                    <img src="[% ctx.media_prefix %]/images/add-to-cart.png[% ctx.cache_key %]" alt="" />
+                    [% l("Remove from cart") %]
                 </a>
             </div>
             <div class="rdetail_aux_utils toggle_list">

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index cb9c0bb..36c26dc 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -486,14 +486,16 @@ END;
                                                                         {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 cart", attrs.title) %] rel="nofollow" vocab="">
+                                                                data-recid="[% rec.id %]" data-action="add"
+                                                                class="mylist_action [% IF ctx.mylist.grep('^' _ rec.id _ '$').size %]hidden[% END %]"
+                                                                title="[% l("Add [_1] to cart", attrs.title) %]" rel="nofollow" vocab="">
                                                                 <img src="[% ctx.media_prefix %]/images/add-to-cart.png[% ctx.cache_key %]" alt="" />
                                                                 [% l("Add to cart") %]
                                                             </a>
                                                             <a href="[% delhref %]" id="mylist_delete_[% rec.id %]"
-                                                                [% IF !ctx.mylist.grep('^' _ rec.id _ '$').size %] class="hidden" [% END %]
-                                                                title="[% l("Remove [_1] from cart", attrs.title) %] rel="nofollow" vocab="">
+                                                                data-recid="[% rec.id %]" data-action="delete"
+                                                                class="mylist_action [% IF !ctx.mylist.grep('^' _ rec.id _ '$').size %]hidden[% END %]"
+                                                                title="[% l("Remove [_1] from cart", attrs.title) %]" rel="nofollow" vocab="">
                                                                 <img src="[% ctx.media_prefix %]/images/add-to-cart.png[% ctx.cache_key %]" alt="" />
                                                                 [% l("Remove from cart") %]
                                                             </a>

diff --git a/Open-ILS/web/js/ui/default/opac/record_selectors.js b/Open-ILS/web/js/ui/default/opac/record_selectors.js
index 89de973..8290ed5 100644 (file)
--- a/Open-ILS/web/js/ui/default/opac/record_selectors.js
+++ b/Open-ILS/web/js/ui/default/opac/record_selectors.js
@@ -2,6 +2,7 @@
 
     var rec_selector_block = document.getElementById("record_selector_block");
     var rec_selectors = document.getElementsByClassName("result_record_selector");
+    var mylist_action_links = document.getElementsByClassName("mylist_action");
     var record_cart_count_el = document.getElementById('record_cart_count');
     var selected_records_count_el = document.getElementById('selected_records_count');
     var select_all_records_el = document.getElementById('select_all_records');
@@ -31,6 +32,7 @@
 
     function syncPageState() {
         var all_checked = true;
+        var legacy_adjusted = false;
         [].forEach.call(rec_selectors, function(el) {
             el.checked = mylist.includes(parseInt(el.value));
             if (el.checked) {
@@ -40,7 +42,18 @@
                 adjustLegacyControlsVis('unchecked', el.value);
             }
             toggleRowHighlighting(el);
+            legacy_adjusted = true;
         });
+        if (!legacy_adjusted) {
+            [].forEach.call(mylist_action_links, function(el) {
+                if ('dataset' in el) {
+                    if (el.dataset.action == 'delete') return;
+                    // only need to do this once
+                    var op = mylist.includes(parseInt(el.dataset.recid)) ? 'checked' : 'unchecked';
+                    adjustLegacyControlsVis(op, el.dataset.recid);
+                }
+            });
+        }
         if (select_all_records_el && rec_selectors.length) {
             select_all_records_el.checked = all_checked;
         }
@@ -60,7 +73,7 @@
         }
     }
 
-    function mungeList(op, rec) {
+    function mungeList(op, rec, resync) {
         console.debug('calling mungeList to ' + op + ' record ' + rec);
         var req = new window.XMLHttpRequest();
         if (Array.isArray(rec)) {
@@ -75,12 +88,14 @@
             req.onload = function (evt) {
                 var result = req.response;
                 handleUpdate(result);
+                if (resync) syncPageState();
             }
         } else {
             // IE 10/11
             req.onload = function (evt) {
                 var result = JSON.parse(req.responseText);
                 handleUpdate(result);
+                if (resync) syncPageState();
             }
         }
         req.send();
@@ -117,6 +132,18 @@
         [].forEach.call(rec_selectors, function(el) {
             if (!el.checked) el.disabled = (mylist.length >= max_cart_size);
         });
+        [].forEach.call(mylist_action_links, function(el) {
+            if ('dataset' in el && el.dataset.action == 'add') {
+                if (mylist.length >= max_cart_size) {
+                    // hide the add link
+                    el.classList.add('hidden');
+                } else {
+                    // show the add link unless the record is
+                    // already in the cart
+                    if (!mylist.includes(parseInt(el.dataset.recid))) el.classList.remove('hidden');
+                }
+            }
+        });
         if (mylist.length >= max_cart_size) {
             if (alertel) alertel.classList.remove('hidden');
             if (select_all_records_el && !select_all_records_el.checked) {
@@ -207,5 +234,17 @@
         });
     }
 
+    [].forEach.call(mylist_action_links, function(el) {
+        el.addEventListener("click", function(evt) {
+            var recid;
+            var action;
+            if ('dataset' in el) {
+                recid = el.dataset.recid;
+                action = el.dataset.action;
+                mungeList(action, recid, true);
+                evt.preventDefault();
+            }
+        });
+    });
 
 })();