Merge pull request Shopify#58 from Shopify/modal-close-button

Added a close button to the cart modal.
cimocimocimo · May 1, 2014 · 26e2d5c · 26e2d5c
2 parents 963de9c + 00edc78
commit 26e2d5c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/assets/ajaxify.js b/assets/ajaxify.js
@@ -263,7 +263,7 @@ var ajaxifyShopify = (function(module, $) {
   var $formContainer, $btnClass, $wrapperClass, $addToCart, $flipClose, $flipCart, $flipContainer, $cartCountSelector, $cartCostSelector, $toggleCartButton, $modal, $cartContainer, $drawerCaret, $modalContainer, $modalOverlay, $closeCart, $drawerContainer;
 
   // Private functions
-  var updateCountPrice, flipSetup, revertFlipButton, modalSetup, showModal, hideModal, drawerSetup, showDrawer, hideDrawer, sizeDrawer, formOverride, itemAddedCallback, itemErrorCallback, cartUpdateCallback, setToggleButtons, flipCartUpdateCallback, buildCart, cartTemplate, adjustCart, adjustCartCallback, createQtySelectors, qtySelectors, scrollTop, isEmpty, log;
+  var updateCountPrice, flipSetup, revertFlipButton, modalSetup, showModal, hideModal, closeModalButton, drawerSetup, showDrawer, hideDrawer, sizeDrawer, formOverride, itemAddedCallback, itemErrorCallback, cartUpdateCallback, setToggleButtons, flipCartUpdateCallback, buildCart, cartTemplate, adjustCart, adjustCartCallback, createQtySelectors, qtySelectors, scrollTop, isEmpty, log;
 
   /**
    * Initialise the plugin and define global options
@@ -442,12 +442,20 @@ var ajaxifyShopify = (function(module, $) {
     }
   };
 
-  hideModal = function () {
+  hideModal = function (e) {
+    e.preventDefault();
     if ($modalContainer) {
       $modalContainer.removeClass('is-visible');
     }
   };
 
+  closeModalButton = function () {
+    // Link up close modal link
+    $closeCart = $('.ajaxifyCart--close');
+    $closeCart.off('click');
+    $closeCart.on('click', hideModal);
+  };
+
   drawerSetup = function () {
     // Create drawer DOM elements with handlebars.js template
     var source   = $("#drawerTemplate").html(),
@@ -704,18 +712,14 @@ var ajaxifyShopify = (function(module, $) {
     }
     $cartContainer.append(template(data));
 
-    // Link up close modal link
-    if (settings.method == 'modal') {
-      $closeCart = $('.ajaxifyCart--close');
-      $closeCart.off( 'click', hideModal );
-      $closeCart.on( 'click', hideModal );
-    }
-
     // With new elements we need to relink the adjust cart functions
     adjustCart();
 
-    // Size drawer at this point
+    // Setup close modal button and size drawer
     switch (settings.method) {
+      case 'modal':
+        closeModalButton();
+        break;
       case 'flip':
       case 'drawer':
         if (cart.item_count > 0) {
@@ -746,6 +750,10 @@ var ajaxifyShopify = (function(module, $) {
 
       // Size drawer at this point
       switch (settings.method) {
+        case 'modal':
+          $cartContainer.prepend('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
+          closeModalButton();
+          break;
         case 'flip':
         case 'drawer':
           if (cart.item_count > 0) {

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
@@ -466,6 +466,7 @@ form[action^="/cart/add"] {
 
   &.is-visible {
     visibility: visible;
+    overflow: visible;
     @include box-shadow(0px 10px 80px rgba(0,0,0,.25));
   }
 
@@ -683,22 +684,27 @@ form[action^="/cart/add"] {
 .ajaxifyCart--close {
   @extend .sprite;
   display: none;
-  position: relative;
+  position: absolute;
+  top: -15px;
+  right: -15px;
   z-index: 10;
   border: none;
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   float: right;
   cursor: pointer;
+  border-radius: 30px;
   background-position: center center;
+  background-color: $ajaxifyGreyDark;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=);
+  @include transition(background-color 0.1s);
 
   #ajaxifyModal & {
     display: block;
   }
 
   &:hover {
-    opacity: 0.7;
+    background-color: $ajaxifyGreyLight;
   }
 }
 

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -1554,7 +1554,7 @@ a.btn-secondary {
   padding-bottom: $gutter;
   border-bottom: 1px solid $borderColor;
 
-  .ajaxifyCart--content & {
+  #ajaxifyDrawer & {
     border-bottom-color: #444;
   }
 }

diff --git a/snippets/ajax-cart-template.liquid b/snippets/ajax-cart-template.liquid
@@ -7,8 +7,8 @@
 {% endcomment %}
   <script id="cartTemplate" type="text/template">
   {% raw %}
+    <button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>
     <form action="/cart" method="post" novalidate>
-      <button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>
       <div class="ajaxifyCart--products">
         {{#items}}
         <div class="ajaxifyCart--product">