Skip to content
This repository was archived by the owner on Aug 30, 2018. It is now read-only.

Add events to notify of drawer opening / closing #481

Merged
cshold merged 15 commits into from
May 26, 2016
Merged

Add events to notify of drawer opening / closing #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
0b259ff
Add events to notify of drawer opening / closing
Oct 30, 2015
aa00267
Use timber.cache.$body for event triggering
Oct 30, 2015
c499183
Merge branch 'master' of github.com:Shopify/Timber
Feb 7, 2016
792f620
Merge branch 'master' of github.com:Shopify/Timber
Mar 3, 2016
0cdd5cd
Merge branch 'master' of github.com:Shopify/Timber
May 14, 2016
b1df478
Add more triggers
May 14, 2016
da2e6db
Event namespace should come last
May 14, 2016
9e0a5c8
Add complete triggers for add / change item
May 14, 2016
0e83b52
Fix multiple arguments trigger and add 2 triggers for adjustCart
May 14, 2016
bbcf781
Cache $('body')
May 16, 2016
c44fab4
$('body') -> $(document.body)
May 18, 2016
e7946c8
Change to before / after name scheme for events
May 18, 2016
d1ebe56
afterCartLoad.ajaxCart not ajaxCart.afterCartLoad
May 20, 2016
fd1b169
afterGetCart
May 20, 2016
ee91ccf
Remove redundant events
May 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions assets/ajax-cart.js.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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') {
Expand All @@ -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);
Expand Down Expand Up @@ -178,7 +207,7 @@ var ajaxCart = (function(module, $) {
$cartCostSelector = $(settings.cartCostSelector);

// General Selectors
$body = $('body');
$body = $(document.body);

// Track cart activity status
isUpdating = false;
Expand Down Expand Up @@ -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);
Copy link
Contributor

@cshold cshold May 20, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you revert this name. It's the only breaking change I can see in the PR

Copy link
Contributor

@cshold cshold May 20, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scratch that. I'll update the version number differently instead. All good

};

adjustCart = function () {
Expand All @@ -336,7 +365,7 @@ var ajaxCart = (function(module, $) {
if (isUpdating) {
return;
}

var $el = $(this),
line = $el.data('line'),
$qtySelector = $el.siblings('.ajaxcart__qty-num'),
Expand Down Expand Up @@ -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, ''));
Expand Down
14 changes: 13 additions & 1 deletion assets/timber.js.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ timber.cacheSelectors = function () {
timber.cache = {
// General
$html : $('html'),
$body : $('body'),
$body : $(document.body),

// Navigation
$navigation : $('#AccessibleNav'),
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');

Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions layout/theme.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,8 +424,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>
Expand Down