Merge pull request #481 from humancopy/master

Add events to notify of drawer opening / closing
Shopify · May 26, 2016 · 0f43c66 · 0f43c66
2 parents f94f1d8 + ee91ccf
commit 0f43c66
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/assets/ajax-cart.js.liquid b/assets/ajax-cart.js.liquid
@@ -39,21 +39,30 @@ ShopifyAPI.onCartUpdate = function(cart) {
 };
 
 ShopifyAPI.updateCartNote = function(note, callback) {
-  var params = {
+  var $body = $(document.body),
+  params = {
     type: 'POST',
     url: '/cart/update.js',
     data: 'note=' + attributeToString(note),
     dataType: 'json',
+    beforeSend: function() {
+      $body.trigger('beforeUpdateCartNote.ajaxCart', note);
+    },
     success: function(cart) {
       if ((typeof callback) === 'function') {
         callback(cart);
       }
       else {
         ShopifyAPI.onCartUpdate(cart);
       }
+      $body.trigger('afterUpdateCartNote.ajaxCart', [note, cart]);
     },
     error: function(XMLHttpRequest, textStatus) {
+      $body.trigger('errorUpdateCartNote.ajaxCart', [XMLHttpRequest, textStatus]);
       ShopifyAPI.onError(XMLHttpRequest, textStatus);
+    },
+    complete: function(jqxhr, text) {
+      $body.trigger('completeUpdateCartNote.ajaxCart', [this, jqxhr, text]);
     }
   };
   jQuery.ajax(params);
@@ -72,18 +81,23 @@ ShopifyAPI.onError = function(XMLHttpRequest, textStatus) {
     - Allow custom error callback
 ==============================================================================*/
 ShopifyAPI.addItemFromForm = function(form, callback, errorCallback) {
-  var params = {
+  var $body = $(document.body),
+  params = {
     type: 'POST',
     url: '/cart/add.js',
     data: jQuery(form).serialize(),
     dataType: 'json',
+    beforeSend: function(jqxhr, settings) {
+      $body.trigger('beforeAddItem.ajaxCart', form);
+    },
     success: function(line_item) {
       if ((typeof callback) === 'function') {
         callback(line_item, form);
       }
       else {
         ShopifyAPI.onItemAdded(line_item, form);
       }
+      $body.trigger('afterAddItem.ajaxCart', [line_item, form]);
     },
     error: function(XMLHttpRequest, textStatus) {
       if ((typeof errorCallback) === 'function') {
@@ -92,40 +106,55 @@ ShopifyAPI.addItemFromForm = function(form, callback, errorCallback) {
       else {
         ShopifyAPI.onError(XMLHttpRequest, textStatus);
       }
+      $body.trigger('errorAddItem.ajaxCart', [XMLHttpRequest, textStatus]);
+    },
+    complete: function(jqxhr, text) {
+      $body.trigger('completeAddItem.ajaxCart', [this, jqxhr, text]);
     }
   };
   jQuery.ajax(params);
 };
 
 // Get from cart.js returns the cart in JSON
 ShopifyAPI.getCart = function(callback) {
+  $(document.body).trigger('beforeGetCart.ajaxCart');
   jQuery.getJSON('/cart.js', function (cart, textStatus) {
     if ((typeof callback) === 'function') {
       callback(cart);
     }
     else {
       ShopifyAPI.onCartUpdate(cart);
     }
+    $(document.body).trigger('afterGetCart.ajaxCart', cart);
   });
 };
 
 // POST to cart/change.js returns the cart in JSON
 ShopifyAPI.changeItem = function(line, quantity, callback) {
-  var params = {
+  var $body = $(document.body),
+  params = {
     type: 'POST',
     url: '/cart/change.js',
     data: 'quantity=' + quantity + '&line=' + line,
     dataType: 'json',
+    beforeSend: function() {
+      $body.trigger('beforeChangeItem.ajaxCart', [line, quantity]);
+    },
     success: function(cart) {
       if ((typeof callback) === 'function') {
         callback(cart);
       }
       else {
         ShopifyAPI.onCartUpdate(cart);
       }
+      $body.trigger('afterChangeItem.ajaxCart', [line, quantity, cart]);
     },
     error: function(XMLHttpRequest, textStatus) {
+      $body.trigger('errorChangeItem.ajaxCart', [XMLHttpRequest, textStatus]);
       ShopifyAPI.onError(XMLHttpRequest, textStatus);
+    },
+    complete: function(jqxhr, text) {
+      $body.trigger('completeChangeItem.ajaxCart', [this, jqxhr, text]);
     }
   };
   jQuery.ajax(params);
@@ -178,7 +207,7 @@ var ajaxCart = (function(module, $) {
     $cartCostSelector  = $(settings.cartCostSelector);
 
     // General Selectors
-    $body = $('body');
+    $body = $(document.body);
 
     // Track cart activity status
     isUpdating = false;
@@ -325,7 +354,7 @@ var ajaxCart = (function(module, $) {
 
   cartCallback = function(cart) {
     $body.removeClass('drawer--is-loading');
-    $body.trigger('ajaxCart.afterCartLoad', cart);
+    $body.trigger('afterCartLoad.ajaxCart', cart);
   };
 
   adjustCart = function () {
@@ -336,7 +365,7 @@ var ajaxCart = (function(module, $) {
       if (isUpdating) {
         return;
       }
-      
+
       var $el = $(this),
           line = $el.data('line'),
           $qtySelector = $el.siblings('.ajaxcart__qty-num'),
@@ -366,7 +395,7 @@ var ajaxCart = (function(module, $) {
       if (isUpdating) {
         return;
       }
-      
+
       var $el = $(this),
           line = $el.data('line'),
           qty = parseInt($el.val().replace(/\D/g, ''));

diff --git a/assets/timber.js.liquid b/assets/timber.js.liquid
@@ -68,7 +68,7 @@ timber.cacheSelectors = function () {
   timber.cache = {
     // General
     $html                    : $('html'),
-    $body                    : $('body'),
+    $body                    : $(document.body),
 
     // Navigation
     $navigation              : $('#AccessibleNav'),
@@ -401,6 +401,9 @@ timber.Drawers = (function () {
       return this.close();
     }
 
+    // Notify the drawer is going to open
+    timber.cache.$body.trigger('beforeDrawerOpen.timber', this);
+
     // Add is-transitioning class to moved elements on open so drawer can have
     // transition for close animation
     this.$nodes.moved.addClass('is-transitioning');
@@ -432,13 +435,19 @@ timber.Drawers = (function () {
       this.close();
       return false;
     }, this));
+
+    // Notify the drawer has opened
+    timber.cache.$body.trigger('afterDrawerOpen.timber', this);
   };
 
   Drawer.prototype.close = function () {
     if (!this.drawerIsOpen) { // don't close a closed drawer
       return;
     }
 
+    // Notify the drawer is going to close
+    timber.cache.$body.trigger('beforeDrawerClose.timber', this);
+
     // deselect any focused form elements
     $(document.activeElement).trigger('blur');
 
@@ -454,6 +463,9 @@ timber.Drawers = (function () {
     this.removeTrapFocus(this.$drawer, 'drawer_focus');
 
     this.$nodes.page.off('.drawer');
+
+    // Notify the drawer is closed now
+    timber.cache.$body.trigger('afterDrawerClose.timber', this);
   };
 
   Drawer.prototype.trapFocus = function ($container, eventNamespace) {

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -427,8 +427,8 @@
         });
       });
 
-      jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
-        // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM
+      jQuery(document.body).on('afterCartLoad.ajaxCart', function(evt, cart) {
+        // Bind to 'afterCartLoad.ajaxCart' to run any javascript after the cart has loaded in the DOM
         timber.RightDrawer.open();
       });
     </script>