Merge pull request #85 from Shopify/payment-icons

Icons and Modernizer Adjustments
Shopify · Jun 4, 2014 · ee6b828 · ee6b828
2 parents f72e80c + dc698bf
commit ee6b828
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 95 deletions.
diff --git a/assets/ajaxify.js b/assets/ajaxify.js
@@ -5,20 +5,18 @@
  * show the cart in a modal, or a 3D drawer.
  *
  * This file includes:
- *    - Modernizer | Slim custom build
  *    - Basic Shopify Ajax API calls
  *    - Ajaxify plugin
  *
  * This requires:
  *    - jQuery 1.8+
  *    - handlebars.min.js (for cart template)
+ *    - modernizer.min.js
  *    - snippet/ajax-cart-template.liquid
 */
 
 /*
- * Plugin Documentation
- *
- * View the complete documentation at http://shopify.com/timber
+ * Plugin Documentation - http://shopify.github.io/Timber/#ajax-cart
 */
 
 // JQUERY API (c) Copyright 2009-2014 Shopify Inc. Author: Caroline Schnapp. All Rights Reserved.
@@ -230,11 +228,6 @@ Shopify.changeItem = function(variant_id, quantity, callback) {
   jQuery.ajax(params);
 };
 
-/* Modernizr 2.7.0 (Custom Build) | MIT & BSD
- * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-touch-teststyles-testprop-testallprops-prefixes-domprefixes
- */
-;window.Modernizr=function(a,b,c){function y(a){i.cssText=a}function z(a,b){return y(l.join(a+";")+(b||""))}function A(a,b){return typeof a===b}function B(a,b){return!!~(""+a).indexOf(b)}function C(a,b){for(var d in a){var e=a[d];if(!B(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}return!1}function D(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}return!1}function E(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),D(e,b,c))}var d="2.7.0",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v=function(a,c,d,e){var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=["&#173;",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},w={}.hasOwnProperty,x;!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){return w.call(a,b)}:x=function(a,b){return b in a&&A(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:v(["@media (",l.join("touch-enabled),("),g,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},p.csstransforms=function(){return!!E("transform")},p.csstransforms3d=function(){var a=!!E("perspective");return a&&"webkitPerspective"in f.style&&v("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var F in p)x(p,F)&&(u=F.toLowerCase(),e[u]=p[F](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)x(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},y(""),h=j=null,e._version=d,e._prefixes=l,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return C([a])},e.testAllProps=E,e.testStyles=v,e}(this,this.document);
-
 // -------------------------------------------------------------------------------------
 // Ajaxify Shopify Add To Cart
 // -------------------------------------------------------------------------------------
@@ -247,7 +240,7 @@ var ajaxifyShopify = (function(module, $) {
   var init;
 
   // Private general variables
-  var settings, cartInit, $drawerHeight, $cssTransforms, $cssTransforms3d, $isTouch, $nojQueryLoad, $w, $body;
+  var settings, cartInit, $drawerHeight, $cssTransforms, $cssTransforms3d, $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;
@@ -299,19 +292,11 @@ var ajaxifyShopify = (function(module, $) {
     // CSS Checks
     $cssTransforms   = Modernizr.csstransforms;
     $cssTransforms3d = Modernizr.csstransforms3d;
-    $isTouch         = Modernizr.touch;
 
     // General Selectors
     $w    = $(window);
     $body = $('body');
 
-    // Touch check
-    if ($isTouch) {
-      $body.addClass('ajaxify-touch');
-    } else {
-      $body.addClass('ajaxify-notouch');
-    }
-
     // Check if we can use .load
     $nojQueryLoad = $('html').hasClass('lt-ie9');
     if ($nojQueryLoad) {

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
@@ -438,7 +438,7 @@ form[action^="/cart/add"] {
   input[type="text"] {
     @include transition(all 0.1s ease-out);
 
-    .ajaxify-notouch & {
+    .supports-no-touch & {
       border: 1px solid rgba(0,0,0,0);
     }
   }
@@ -455,7 +455,7 @@ form[action^="/cart/add"] {
 
   .cart-row:hover &,
   .ajaxifyCart--product:hover &,
-  .ajaxify-touch & {
+  .supports-touch & {
     opacity: 1;
     @include transition(background-color 0.2s ease-out);
   }
@@ -625,7 +625,7 @@ form[action^="/cart/add"] {
 #ajaxifyModal {
   .cart-row:hover input[type="text"],
   .ajaxifyCart--product:hover input[type="text"],
-  .ajaxify-touch input[type="text"],
+  .supports-touch input[type="text"],
   .page-header {
     border-color: $modalBorderColor;
   }
@@ -709,7 +709,7 @@ form[action^="/cart/add"] {
 #ajaxifyDrawer {
   .cart-row:hover input[type="text"],
   .ajaxifyCart--product:hover input[type="text"],
-  .ajaxify-touch input[type="text"],
+  .supports-touch input[type="text"],
   .page-header {
     border-color: $drawerBorderColor;
   }

diff --git a/assets/modernizr.min.js b/assets/modernizr.min.js
diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -1353,6 +1353,61 @@ label.error {
 // ==============================================================================
 // #Icons
 // ==============================================================================
+.icon-fallback-text .icon {
+  display: none;
+
+  .supports-fontface & {
+    display: inline-block;
+  }
+}
+
+.supports-fontface .icon-fallback-text .fallback-text {
+  /* a generic way to visually hide content while remaining accessible to screen readers (h5bp.com) */
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+}
+
+.icon:before {
+  display: none;
+}
+
+.supports-fontface .icon:before {
+  display: inline;
+  font-family: $socialIconFontStack;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Payment icons
+.icon-diners_club:before { content: 'c'; }
+.icon-maestro:before { content: 'm'; }
+.icon-interact:before { content: 'I'; }
+.icon-visa:before { content: 'V'; }
+.icon-master:before { content: 'M'; }
+.icon-discover:before { content: 'D'; }
+.icon-dk:before { content: 'd'; }
+.icon-american_express:before { content: 'A'; }
+.icon-google:before { content: 'G'; }
+.icon-paypal:before { content: 'P'; }
+.icon-jcb:before { content: 'J'; }
+.icon-cirrus:before { content: 'C'; }
+.icon-stripe:before { content: 'S'; }
+.icon-bitcoin:before { content: 'B'; }
+
+// Social icons
+.icon-twitter:before { content: 'T'; }
+.icon-facebook:before { content: 'f'; }
+.icon-pinterest:before { content: 'p'; }
+.icon-fancy:before { content: 'F'; }
+.icon-google:before { content: 'g'; }
+.icon-instagram:before { content: 'i'; }
+.icon-youtube:before { content: 'y'; }
+.icon-vimeo:before { content: 'v'; }
+.icon-tumblr:before { content: 't'; }
+
 .payment-icons {
   -webkit-user-select: none;
   -moz-user-select:    none;
@@ -1363,10 +1418,17 @@ label.error {
 
   li {
     margin: 0 $gutter/4 $gutter/4;
-    font-family: $socialIconFontStack;
+    color: {{ settings.footer_social_link_color }};
+    cursor: default;
+  }
+
+  .icon {
     font-size: 30px;
     line-height: 30px;
-    color: {{ settings.footer_social_link_color }};
+  }
+
+  .fallback-text {
+    text-transform: capitalize;
   }
 }
 
@@ -1378,16 +1440,16 @@ label.error {
     margin-left: 0;
   }
 
-  a {
-    font-family: $socialIconFontStack;
+  .icon {
     font-size: 30px;
-    line-height: 26px; // same as .social-link height
+    line-height: 26px;
+  }
+
+  a {
     color: {{ settings.footer_social_link_color }};
-    text-decoration: none;
-    -webkit-font-smoothing: antialiased;
 
     &:hover {
-      color: $colorPrimary;
+      color: darken({{ settings.footer_social_link_color }}, 10%);
     }
   }
 }

diff --git a/config/settings.html b/config/settings.html
@@ -139,42 +139,10 @@ <h3 class="heading">Footer Colors</h3>
       <td><label for="twitter_link">Twitter link</label></td>
       <td colspan="2"><input type="url" id="twitter_link" name="twitter_link" size="50" /></td>
     </tr>
-    <tr>
-      <td><label for="twitter_link">Twitter link</label></td>
-      <td colspan="2"><input type="url" id="twitter_link" name="twitter_link" size="50" /></td>
-    </tr>
     <tr>
       <td><label for="facebook_link">Facebook link</label></td>
       <td colspan="2"><input type="url" id="facebook_link" name="facebook_link" size="50" /></td>
     </tr>
-    <tr>
-      <td><label for="pinterest_link">Pinterest link</label></td>
-      <td colspan="2"><input type="url" id="pinterest_link" name="pinterest_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="google_plus_link">Google Plus link</label></td>
-      <td colspan="2"><input type="url" id="google_plus_link" name="google_plus_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="instagram_link">Instagram link</label></td>
-      <td colspan="2"><input type="url" id="instagram_link" name="instagram_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="tumblr_link">Tumblr link</label></td>
-      <td colspan="2"><input type="url" id="tumblr_link" name="tumblr_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="youtube_link">YouTube link</label></td>
-      <td colspan="2"><input type="url" id="youtube_link" name="youtube_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="vimeo_link">Vimeo link</label></td>
-      <td colspan="2"><input type="url" id="vimeo_link" name="vimeo_link" size="50" /></td>
-    </tr>
-    <tr>
-      <td><label for="fancy_link">Fancy link</label></td>
-      <td colspan="2"><input type="url" id="fancy_link" name="fancy_link" size="50" /></td>
-    </tr>
     <tr>
       <td colspan="3">
         <hr />
@@ -205,7 +173,7 @@ <h3 class="heading">Social Media Meta Tags</h3>
       <td colspan="2">Social meta tags include <a href="https://developers.facebook.com/docs/opengraph/using-objects/" title="About Facebook Open Graph Objects">Facebook</a> and <a href="https://developers.pinterest.com/rich_pins/" title="About Pinterest Rich Pins">Pinterest</a> Open Graph Tags and <a href="https://dev.twitter.com/docs/cards/types/product-card" title="About Twitter Product Cards">Twitter Cards</a>. These are enabled by default to make the store more accessible on different platforms, and more readable for search engines.</td>
     </tr>
     <tr>
-      <th><label for="twittercard_handle">The site's Twitter Handle</label></th>
+      <th><label for="twittercard_handle">The Site's Twitter Handle</label></th>
       <td>
         <input type="text" id="twittercard_handle" name="twittercard_handle" size="50" /><br />
         <small>E.g. @Shopify. Required for Twitter Cards.</small>

diff --git a/config/settings_data.json b/config/settings_data.json
@@ -6,13 +6,6 @@
     "footer_display_social": true,
     "twitter_link": "https://twitter.com/shopify",
     "facebook_link": "https://facebook.com/shopify",
-    "pinterest_link": "http://www.pinterest.com/shopify/",
-    "google_plus_link": "https://plus.google.com/+shopify",
-    "instagram_link": "http://instagram.com/shopify",
-    "tumblr_link": "http://www.tumblr.com/tagged/shopify",
-    "youtube_link": "https://www.youtube.com/user/shopify",
-    "vimeo_link": "http://vimeo.com/shopify",
-    "fancy_link": "http://fancy.com/search?q=shopify",
     "footer_display_newsletter": true,
     "cart_notes": true,
     "ajax_cart": true,

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -55,6 +55,7 @@
     However, jQuery is included here so that it can be used inside the templates, e.g. in product.liquid.
   {% endcomment %}
   {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
+  {{ 'modernizr.min.js' | asset_url | script_tag }}
 
 </head>
 

diff --git a/snippets/footer.liquid b/snippets/footer.liquid
@@ -25,15 +25,22 @@
           Loop through the persistent theme settings and list out each social network link.
         {% endcomment %}
         <ul class="inline-list social-icons">
-          {% if settings.twitter_link != blank %}<li class="twitter"><a href="{{ settings.twitter_link }}" title="{{ shop.name }} on Twitter">T</a></li>{% endif %}
-          {% if settings.facebook_link != blank %}<li class="facebook"><a href="{{ settings.facebook_link }}" title="{{ shop.name }} on Facebook">f</a></li>{% endif %}
-          {% if settings.pinterest_link != blank %}<li class="pinterest"><a href="{{ settings.pinterest_link }}" title="{{ shop.name }} on Pinterest">p</a></li>{% endif %}
-          {% if settings.google_plus_link != blank %}<li class="google-plus"><a href="{{ settings.google_plus_link }}" title="{{ shop.name }} on Google+">g</a></li>{% endif %}
-          {% if settings.instagram_link != blank %}<li class="instagram"><a href="{{ settings.instagram_link }}" title="{{ shop.name }} on Instagram">i</a></li>{% endif %}
-          {% if settings.tumblr_link != blank %}<li class="tumblr"><a href="{{ settings.tumblr_link }}" title="{{ shop.name }} on Tumblr">t</a></li>{% endif %}
-          {% if settings.youtube_link != blank %}<li class="youtube"><a href="{{ settings.youtube_link }}" title="{{ shop.name }} on YouTube">y</a></li>{% endif %}
-          {% if settings.vimeo_link != blank %}<li class="vimeo"><a href="{{ settings.vimeo_link }}" title="{{ shop.name }} on Vimeo">v</a></li>{% endif %}
-          {% if settings.fancy_link != blank %}<li class="fancy"><a href="{{ settings.fancy_link }}" title="{{ shop.name }} on Fancy">F</a></li>{% endif %}
+          {% if settings.twitter_link != blank %}
+            <li>
+              <a class="icon-fallback-text" href="{{ settings.twitter_link }}" title="{{ shop.name }} on Twitter">
+                <span class="icon icon-twitter" aria-hidden="true"></span>
+                <span class="fallback-text">Twitter</span>
+              </a>
+            </li>
+          {% endif %}
+          {% if settings.facebook_link != blank %}
+            <li>
+              <a class="icon-fallback-text" href="{{ settings.facebook_link }}" title="{{ shop.name }} on Facebook">
+                <span class="icon icon-facebook" aria-hidden="true"></span>
+                <span class="fallback-text">Facebook</span>
+              </a>
+            </li>
+          {% endif %}
         </ul>
       </div>
       {% endif %}
@@ -55,20 +62,12 @@
     <h4 class="text-center">Accepted Payments</h4>
     <ul class="inline-list payment-icons text-center">
       {% for type in shop.enabled_payment_types %}
-        {% if type == "diners_club" %}<li>c</li>{% endif %}
-        {% if type == "maestro" %}<li>m</li>{% endif %}
-        {% if type == "interac" %}<li>I</li>{% endif %}
-        {% if type == "visa" %}<li>V</li>{% endif %}
-        {% if type == "master" %}<li>M</li>{% endif %}
-        {% if type == "discover" %}<li>D</li>{% endif %}
-        {% if type == "dk" %}<li>d</li>{% endif %}
-        {% if type == "american_express" %}<li>A</li>{% endif %}
-        {% if type == "google" %}<li>G</li>{% endif %}
-        {% if type == "paypal" %}<li>P</li>{% endif %}
-        {% if type == "jcb" %}<li>J</li>{% endif %}
-        {% if type == "cirrus" %}<li>C</li>{% endif %}
-        {% if type == "stripe" %}<li>S</li>{% endif %}
-        {% if type == "bitcoin" %}<li>B</li>{% endif %}
+        <li>
+          <span class="icon-fallback-text">
+            <span class="icon icon-{{type}}" aria-hidden="true"></span>
+            <span class="fallback-text">{{type | replace: '_',' '}}</span>
+          </span>
+        </li>
       {% endfor %}
     </ul>
     {% endunless %}