diff --git a/assets/ajaxify.js b/assets/ajaxify.js index 3f5f12909..9888c3347 100644 --- 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(''); + $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(''); + 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('

Your cart is empty

'); 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 index 1412e212b..b3657d760 100755 --- 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,7 +453,7 @@ 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%; @@ -461,7 +461,7 @@ form[action^="/cart/add"] { 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;