Switch to gulp-include for theme JS

package.json.ejs

@@ -19,8 +19,6 @@
   "dependencies": {
     "bluebird": "3.4.0",
     "browser-sync": "2.13.0",
-    "browserify": "13.1.0",
-    "browserify-shim": "^3.8.12",
     "chokidar": "1.5.2",
     "del": "2.2.0",
     "eslint": "3.2.2",
@@ -30,7 +28,8 @@
     "gulp-concat": "2.6.0",
     "gulp-cssimport": "3.0.2",
     "gulp-eslint": "2.0.0",
-    "gulp-ext-replace": "^0.3.0",
+    "gulp-ext-replace": "0.3.0",
+    "gulp-include": "2.3.1",
     "gulp-jsonlint": "1.1.2",
     "gulp-open": "2.0.0",
     "gulp-plumber": "1.1.0",
@@ -44,10 +43,7 @@
     "open": "0.0.5",
     "require-dir": "0.3.0",
     "run-sequence": "1.2.1",
-    "vinyl-buffer": "1.0.0",
     "vinyl-paths": "2.1.0",
-    "vinyl-source-stream": "1.1.0",
-    "watchify": "3.7.0",
     "yargs": "4.7.1"
   }
 }

src/layout/gift_card.liquid

@@ -20,13 +20,12 @@
 
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
-  <script>
-    var theme = {};
-  </script>
-
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}"></script><![endif]-->
 
+  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
+  <!--[if lt IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
+
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
 

src/layout/password.liquid

@@ -22,10 +22,6 @@
 
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
-  <script>
-    var theme = {};
-  </script>
-
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
 

src/layout/theme.liquid

@@ -24,7 +24,7 @@
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
   <script>
-    var theme = {
+    window.theme = {
       strings: {
         addToCart: {{ 'products.product.add_to_cart' | t | json }},
         soldOut: {{ 'products.product.sold_out' | t | json }},

src/scripts/global/global.js

@@ -1,13 +1,16 @@
-var a11y = require('./../slate/a11y.js');
-var rte = require('./../slate/rte.js');
+window.slate = window.slate || {};
+// =require ../slate/a11y.js
+// =require ../slate/rte.js
 
-// Common a11y fixes
-a11y.pageLinkFocus($(window.location.hash));
+$(document).ready(function() {
+  // Common a11y fixes
+  slate.a11y.pageLinkFocus($(window.location.hash));
 
-$('.in-page-link').on('click', function(evt) {
-  a11y.pageLinkFocus($(evt.currentTarget.hash));
-});
+  $('.in-page-link').on('click', function(evt) {
+    slate.a11y.pageLinkFocus($(evt.currentTarget.hash));
+  });
 
-// Wrap videos in div to force responsive layout.
-rte.wrapTable();
-rte.iframeReset();
+  // Wrap videos in div to force responsive layout.
+  slate.rte.wrapTable();
+  slate.rte.iframeReset();
+});

src/scripts/slate/a11y.js

@@ -8,7 +8,7 @@
  * @namespace a11y
  */
 
-module.exports = {
+slate.a11y = {
 
   /**
    * For use when focus shifts to a container rather than a link

src/scripts/slate/rte.js

@@ -6,7 +6,7 @@
  * @namespace rte
  */
 
-module.exports = {
+slate.rte = {
 
   wrapTable: function() {
     $('.rte table').wrap('<div class="rte__table-wrapper"></div>');

src/scripts/templates/customers-addresses.js

@@ -7,9 +7,13 @@
  * @namespace customerAddresses
  */
 
-var $newAddressForm = $('#AddressNewForm');
+theme.customerAddresses = (function() {
+  var $newAddressForm = $('#AddressNewForm');
+
+  if (!$newAddressForm.length) {
+    return;
+  }
 
-if ($newAddressForm.length) {
   // Initialize observers on address selectors, defined in shopify_common.js
   if (Shopify) {
     // eslint-disable-next-line no-new
@@ -18,7 +22,7 @@ if ($newAddressForm.length) {
     });
   }
 
-// Initialize each edit form's country/province selector
+  // Initialize each edit form's country/province selector
   $('.address-country-option').each(function() {
     var formId = $(this).data('form-id');
     var countrySelector = 'AddressCountry_' + formId;
@@ -31,7 +35,7 @@ if ($newAddressForm.length) {
     });
   });
 
-// Toggle new/edit address forms
+  // Toggle new/edit address forms
   $('.address-new-toggle').on('click', function() {
     $newAddressForm.toggleClass('hide');
   });
@@ -50,4 +54,4 @@ if ($newAddressForm.length) {
       Shopify.postLink('/account/addresses/' + formId, {parameters: {_method: 'delete'}});
     }
   });
-}
+})();

src/scripts/templates/customers-login.js

@@ -6,51 +6,56 @@
  * @namespace password
  */
 
-var config = {
-  recoverPasswordForm: '#RecoverPassword',
-  hideRecoverPasswordLink: '#HideRecoverPasswordLink'
-};
+theme.customerLogin = (function() {
+  var config = {
+    recoverPasswordForm: '#RecoverPassword',
+    hideRecoverPasswordLink: '#HideRecoverPasswordLink'
+  };
 
+  if (!$(config.recoverPasswordForm).length) {
+    return;
+  }
 
-checkUrlHash();
-resetPasswordSuccess();
-
-$(config.recoverPasswordForm).on('click', onShowHidePasswordForm);
-$(config.hideRecoverPasswordLink).on('click', onShowHidePasswordForm);
-
-function onShowHidePasswordForm(evt) {
-  evt.preventDefault();
-  toggleRecoverPasswordForm();
-}
+  checkUrlHash();
+  resetPasswordSuccess();
 
-function checkUrlHash() {
-  var hash = window.location.hash;
+  $(config.recoverPasswordForm).on('click', onShowHidePasswordForm);
+  $(config.hideRecoverPasswordLink).on('click', onShowHidePasswordForm);
 
-  // Allow deep linking to recover password form
-  if (hash === '#recover') {
+  function onShowHidePasswordForm(evt) {
+    evt.preventDefault();
     toggleRecoverPasswordForm();
   }
-}
 
-/**
- *  Show/Hide recover password form
- */
-function toggleRecoverPasswordForm() {
-  $('#RecoverPasswordForm').toggleClass('hide');
-  $('#CustomerLoginForm').toggleClass('hide');
-}
+  function checkUrlHash() {
+    var hash = window.location.hash;
 
-/**
- *  Show reset password success message
- */
-function resetPasswordSuccess() {
-  var $formState = $('.reset-password-success');
+    // Allow deep linking to recover password form
+    if (hash === '#recover') {
+      toggleRecoverPasswordForm();
+    }
+  }
 
-  // check if reset password form was successfully submited.
-  if (!$formState.length) {
-    return;
+  /**
+   *  Show/Hide recover password form
+   */
+  function toggleRecoverPasswordForm() {
+    $('#RecoverPasswordForm').toggleClass('hide');
+    $('#CustomerLoginForm').toggleClass('hide');
   }
 
-  // show success message
-  $('#ResetSuccess').removeClass('hide');
-}
+  /**
+   *  Show reset password success message
+   */
+  function resetPasswordSuccess() {
+    var $formState = $('.reset-password-success');
+
+    // check if reset password form was successfully submited.
+    if (!$formState.length) {
+      return;
+    }
+
+    // show success message
+    $('#ResetSuccess').removeClass('hide');
+  }
+})();

src/scripts/templates/giftcard.js

@@ -4,7 +4,10 @@
  * A file that contains scripts highly couple code to the Gift Card template.
  */
 
-if ($('body').hasClass('template-giftcard')) {
+theme.giftCard = (function() {
+  if (!$('body').hasClass('template-giftcard')) {
+    return;
+  }
 
   var config = {
     qrCode: '#QrCode',
@@ -25,23 +28,23 @@ if ($('body').hasClass('template-giftcard')) {
     window.print();
   });
 
-// Auto-select gift card code on click, based on ID passed to the function
+  // Auto-select gift card code on click, based on ID passed to the function
   $(config.giftCardCode).on('click', {element: 'GiftCardDigits'}, selectText);
-}
-
-function selectText(evt) {
-  var text = document.getElementById(evt.data.element);
-  var range = '';
-
-  if (document.body.createTextRange) { // ms method
-    range = document.body.createTextRange();
-    range.moveToElementText(text);
-    range.select();
-  } else if (window.getSelection) { // moz, opera, webkit method
-    var selection = window.getSelection();
-    range = document.createRange();
-    range.selectNodeContents(text);
-    selection.removeAllRanges();
-    selection.addRange(range);
+
+  function selectText(evt) {
+    var text = document.getElementById(evt.data.element);
+    var range = '';
+
+    if (document.body.createTextRange) { // ms method
+      range = document.body.createTextRange();
+      range.moveToElementText(text);
+      range.select();
+    } else if (window.getSelection) { // moz, opera, webkit method
+      var selection = window.getSelection();
+      range = document.createRange();
+      range.selectNodeContents(text);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
   }
-}
+})();