Merge pull request Shopify#79 from Shopify/ajax-browser-checking

IE8 bug fixes, code cleaning
cimocimocimo · May 22, 2014 · 6c06eec · 6c06eec
2 parents 01c27a7 + 42a8f20
commit 6c06eec
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 70 deletions.
diff --git a/assets/ajaxify.js b/assets/ajaxify.js
@@ -247,10 +247,10 @@ var ajaxifyShopify = (function(module, $) {
  var init;
 
  // Private general variables
- var settings, cartInit, $drawerHeight, $cssTransforms, $cssTransforms3d, $isTouch;
+ var settings, cartInit, $drawerHeight, $cssTransforms, $cssTransforms3d, $isTouch, $nojQueryLoad, $w, $body;
 
  // Private plugin variables
- var $formContainer, $btnClass, $wrapperClass, $addToCart, $flipClose, $flipCart, $flipContainer, $cartCountSelector, $cartCostSelector, $toggleCartButton, $modal, $cartContainer, $drawerCaret, $modalContainer, $modalOverlay, $closeCart, $drawerContainer, $prependDrawerTo, $w, $body;
+ var $formContainer, $btnClass, $wrapperClass, $addToCart, $flipClose, $flipCart, $flipContainer, $cartCountSelector, $cartCostSelector, $toggleCartButton, $modal, $cartContainer, $drawerCaret, $modalContainer, $modalOverlay, $closeCart, $drawerContainer, $prependDrawerTo;
 
  // Private functions
  var updateCountPrice, flipSetup, revertFlipButton, modalSetup, showModal, sizeModal, hideModal, drawerSetup, showDrawer, hideDrawer, sizeDrawer, loadCartImages, formOverride, itemAddedCallback, itemErrorCallback, cartUpdateCallback, setToggleButtons, flipCartUpdateCallback, buildCart, cartTemplate, adjustCart, adjustCartCallback, createQtySelectors, qtySelectors, scrollTop;
@@ -311,6 +311,12 @@ var ajaxifyShopify = (function(module, $) {
  $body.addClass('ajaxify-touch');
  }
 
+ // Check if we can use .load
+ $nojQueryLoad = $('html').hasClass('lt-ie9');
+ if ($nojQueryLoad) {
+ settings.useCartTemplate = false;
+ }
+
  // Setup ajax quantity selectors on the any template if enableQtySelectors is true
  if (settings.enableQtySelectors) {
  qtySelectors();
@@ -412,11 +418,33 @@ var ajaxifyShopify = (function(module, $) {
  $modalOverlay = $('#ajaxifyCart-overlay');
  $cartContainer = $('#ajaxifyCart');
 
+ // Close modal when clicking the overlay
+ $modalOverlay.on('click', hideModal);
+
+ // Create a close modal button
+ $modalContainer.after('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
+ $closeCart = $('.ajaxifyCart--close');
+ $closeCart.on('click', hideModal);
+
  // Add a class if CSS translate isn't available
  if (!$cssTransforms) {
  $modalContainer.addClass('no-transforms')
  }
 
+ // Update modal position on screen changes
+ $(window).on({
+ orientationchange: function(e) {
+ if ($modalContainer.hasClass('is-visible')) {
+ sizeModal('resize');
+ }
+ }, resize: function(e) {
+ // IE8 fires this when overflow on body is changed. Ignore IE8.
+ if (!$nojQueryLoad && $modalContainer.hasClass('is-visible')) {
+ sizeModal('resize');
+ }
+ }
+ });
+
  // Toggle modal with cart button
  setToggleButtons();
  };
@@ -428,70 +456,41 @@ var ajaxifyShopify = (function(module, $) {
  } else {
  sizeModal();
  }
-
- if ($modalContainer) {
- $modalOverlay.off( 'click', hideModal );
- $modalOverlay.on( 'click', hideModal );
- }
  };
 
- sizeModal = function(invisible) {
- // Create close button if it doesn't exist
- if ( !$('.ajaxifyCart--close').length ) {
- $modalContainer.after('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
+ sizeModal = function(isResizing) {
+ if (!isResizing) {
+  $modalContainer.css('opacity', 0);
+ $closeCart.css('opacity', 0);
  }
 
- // Reset close modal listener
- $closeCart = $('.ajaxifyCart--close');
- $closeCart.off('click');
- $closeCart.on('click', hideModal);
-
- // Position modal on load
- positionModal();
-
- // Update modal position on screen change
- $(window).on({
- orientationchange: function(e) {
- positionModal(true);
- }, resize: function(e) {
- positionModal(true);
- }
+ // Position modal by negative margin
+ $modalContainer.css({
+ 'margin-left': - ($modalContainer.outerWidth() / 2),
+ 'margin-top': - ($modalContainer.outerHeight() / 2),
+ 'opacity': 1
  });
 
- function positionModal(isResizing) {
-  if (!isResizing) {
- $modalContainer.css('opacity', 0);
-  $closeCart.css('opacity', 0);
-  }
-
-  // Position modal by negative margin
- $modalContainer.css({
- 'margin-left': - ($modalContainer.outerWidth() / 2),
- 'margin-top': - ($modalContainer.outerHeight() / 2),
- 'opacity': 1
+ $modalContainer.addClass('is-visible');
+ $body.addClass('ajaxify-lock');
+
+ // Position close button on slight timeout
+ clearTimeout(positionTimeout);
+ var fromTop = window.pageYOffset | document.documentElement.scrollTop;
+ var positionTimeout = setTimeout(function() {
+ $closeCart.css({
+ top: ( $w.height() - ( $modalContainer.offset().top - fromTop + $modalContainer.outerHeight() ) - 15 ),
+ right: ( $w.width() - ( $modalContainer.offset().left + $modalContainer.outerWidth() ) - 15 ),
+ opacity: 1
  });
-
- if (!invisible) {
- $modalContainer.addClass('is-visible');
- $body.addClass('ajaxify-lock');
- }
-
- // Position close button on slight timeout
- clearTimeout(positionTimeout);
- var positionTimeout = setTimeout(function() {
- $closeCart.css({
- top: ( $w.height() - ( $modalContainer.offset().top - document.body.scrollTop + $modalContainer.outerHeight() ) - 15 ),
- right: ( $w.width() - ( $modalContainer.offset().left + $modalContainer.outerWidth() ) - 15 ),
- opacity: 1
- });
- }, 200);
- }
+ }, 200);
  };
 
  hideModal = function (e) {
  if (e) {
  e.preventDefault();
  }
+
  if ($modalContainer) {
  $modalContainer.removeClass('is-visible');
  $body.removeClass('ajaxify-lock');
@@ -658,7 +657,6 @@ var ajaxifyShopify = (function(module, $) {
  break;
  case 'modal':
  buildCart(cart);
- showModal();
  break;
  case 'drawer':
  buildCart(cart);
@@ -709,17 +707,17 @@ var ajaxifyShopify = (function(module, $) {
 
  buildCart = function (cart) {
  // Empty cart if using default layout or not using the .load method to get /cart
- if (!settings.useCartTemplate || cart.item_count == 0) {
+ if (!settings.useCartTemplate || cart.item_count === 0) {
  $cartContainer.empty();
  }
 
  // Show empty cart
- if (cart.item_count <= 0) {
+ if (cart.item_count === 0) {
  $cartContainer.append('<h2>Your cart is empty</h2>');
 
  switch (settings.method) {
  case 'modal':
- sizeModal(true);
+ sizeModal('resize');
  break;
  case 'flip':
  case 'drawer':
@@ -929,7 +927,7 @@ var ajaxifyShopify = (function(module, $) {
  var row = $('.cart-row[data-id="' + id + '"]').addClass('ajaxifyCart--is-loading');
  }
 
- if ( qty == 0 ) {
+ if ( qty === 0 ) {
  row.addClass('is-removed');
  }
 
@@ -956,11 +954,10 @@ var ajaxifyShopify = (function(module, $) {
  updateCountPrice(cart);
 
  // Hide the modal or drawer if we're at 0 items
- if ( cart.item_count == 0 ) {
+ if ( cart.item_count === 0 ) {
  // Handle each add to cart method
  switch (settings.method) {
  case 'modal':
- hideModal();
  break;
  case 'flip':
  case 'drawer':

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
@@ -78,11 +78,11 @@
 }
 
 @mixin transition($transition) {
- -webkit-transition: $transition;
- -moz-transition: $transition;
- -ms-transition: $transition;
- -o-transition: $transition;
- transition: $transition;
+ -webkit-transition: #{$transition};
+ -moz-transition: #{$transition};
+ -ms-transition: #{$transition};
+ -o-transition: #{$transition};
+ transition: #{$transition};
 }
 
 @mixin clearfix() {
@@ -453,15 +453,15 @@ form[action^="/cart/add"] {
  position: fixed;
  top: 50%;
  left: 50%;
- margin: -50% 0 0 -50%; // overridden with JS
+ margin: -300px 0 0 -500px; // overridden with JS
  width: 100%;
  max-width: 1000px;
  max-height: 80%;
  height: auto;
  z-index: 99999999;
  visibility: hidden;
  overflow: auto;
- @include transition(box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms);
+ @include transition('box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out');
 
  .ajaxifyCart--content {
  padding: 30px;
@@ -511,14 +511,18 @@ form[action^="/cart/add"] {
  z-index: 99999998;
  opacity: 0;
  cursor: pointer;
- background-color: rgba(211,211,211,0.8);
+ background-color: #d3d3d3;
  @include transition(opacity 450ms cubic-bezier(0.57,.06,.05,.95));
 }
 
 .is-visible ~ #ajaxifyCart-overlay {
- opacity: 1;
+ opacity: 0.8;
  visibility: visible;
  @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
+
+ .lt-ie9 & {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ }
 }
 
 // Modal colors and general styles
@@ -727,7 +731,7 @@ form[action^="/cart/add"] {
  background-color: $ajaxifyGreyDark;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=);
  z-index: 999999999;
- @include transition(all 0.1s);
+ @include transition('background-color 100ms ease-in-out, margin 100ms ease-in-out');
 
  #ajaxifyModal.is-visible + & {
  display: block;