workarea-one_theme 1.3.0

data/app/assets/javascripts/workarea/storefront/modules/address_region_fields.js

@@ -0,0 +1,93 @@
+// TODO: v4 refactor, and may god have mercy on our souls.
+/**
+ * @namespace WORKAREA.addressRegionFields
+ */
+WORKAREA.registerModule('addressRegionFields', (function () {
+    'use strict';
+
+    var updateSelectUI = function ($regionField, $regionOptGroup) {
+            var $select = $('select', $regionField),
+                optGroupHTML = $regionOptGroup.prop('outerHTML');
+
+            $select.find('optgroup').remove();
+            $select.append(optGroupHTML);
+        },
+
+        resetSelectUI = function (countryField) {
+            var $countryField = $(countryField),
+                $addressFields = $countryField.closest('.address-fields'),
+                $regionField = $('[data-address-region-fields="region"]', $addressFields),
+                initialSelectState = $regionField.data('regionSelect');
+
+            $('select', $regionField).empty().append(initialSelectState);
+        },
+
+        swapRegionField = function (index, countryField) {
+            var $countryField = $(countryField),
+                countryName = $('option:selected', $countryField).text(),
+                $addressFields = $countryField.closest('.address-fields'),
+                $regionField = $('[data-address-region-fields="region"]', $addressFields),
+                regionCode = $('option:selected', $regionField).val(),
+                $regionSelect = $('select', $regionField),
+                $regionTextBox = $('input', $regionField),
+                $regionOptGroup = $('optgroup[label="' + countryName + '"]', $regionSelect),
+                $regionOptions = $('option', $regionOptGroup),
+                $currentOption = $regionOptions.filter(function (_index, option) {
+                    return $(option).val() === regionCode;
+                }),
+                $regionRequirementIndicator = $('.property__requirement', $regionField);
+
+            $regionOptions.prop('selected', false);
+            $currentOption.prop('selected', true);
+
+            if (_.isEmpty($regionOptions)) {
+                $regionSelect.addClass('hidden');
+                $regionSelect.closest('.select-menu').addClass('hidden');
+                $regionTextBox.removeClass('hidden');
+                $regionRequirementIndicator.addClass('hidden');
+            } else {
+                updateSelectUI($regionField, $regionOptGroup);
+                $regionTextBox.addClass('hidden');
+                $regionSelect.removeClass('hidden');
+                $regionSelect.closest('.select-menu').removeClass('hidden');
+                $regionRequirementIndicator.removeClass('hidden');
+            }
+        },
+
+        setRegionField = function (event) {
+            var $selectBox = $(event.currentTarget),
+                $textBox = $('input', event.delegateTarget);
+
+            $textBox.val($selectBox.val());
+        },
+
+        saveInitialSelectState = function (index, regionField) {
+            var $select = $('select', regionField);
+            $(regionField).data('regionSelect', $select.prop('innerHTML'));
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.addressRegionFields
+         */
+        init = function ($scope) {
+            var $countryField = $('[data-address-region-fields="country"]', $scope),
+                $regionField = $('[data-address-region-fields="region"]', $scope);
+
+            $regionField.each(saveInitialSelectState);
+
+            $countryField
+                .on('change', 'select', function (event) {
+                    resetSelectUI(event.delegateTarget);
+                    swapRegionField(null, event.delegateTarget);
+                })
+                .each(swapRegionField);
+
+            $regionField.on('change', 'select', setRegionField);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/cart_indicator.js

@@ -0,0 +1,35 @@
+/**
+ * @namespace WORKAREA.cartIndicator
+ */
+WORKAREA.registerModule('cartIndicator', (function () {
+    'use strict';
+
+    var show = function (quantity) {
+            if (quantity > 0) {
+                $('.page-header__cart-link').addClass('page-header__cart-link--has-items');
+            } else {
+                $('.page-header__cart-link').removeClass('page-header__cart-link--has-items');
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.cartIndicator
+         */
+        init = function ($scope) {
+            var quantity = $('[data-cart-indicator]', $scope).data('cartIndicator');
+
+            if (_.isUndefined(quantity)) { return; }
+
+            show(quantity);
+        };
+
+    WORKAREA.currentUser.gettingUserData.done(function (user) {
+        show(user.cart_quantity);
+    });
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/checkout_primary_payments.js

@@ -0,0 +1,136 @@
+/**
+ * @namespace WORKAREA.checkoutPrimaryPayments
+ */
+WORKAREA.registerModule('checkoutPrimaryPayments', (function () {
+    'use strict';
+
+    var fieldExists = function ($field) {
+            return !_.isEmpty($field);
+        },
+
+        fieldNeedsRule = function ($field) {
+            return !$field.rules().creditcard;
+        },
+
+        addCreditCardValidation = function ($field) {
+            if (fieldExists($field) && fieldNeedsRule($field)) {
+                $field.rules('add', { extendedCreditCard: true });
+            }
+        },
+
+        addCardNumberFormatting = function ($field) {
+            $field.payment('formatCardNumber');
+        },
+
+        setUpCardNumberInput = function ($form) {
+            var $field = $('[name="credit_card[number]"]', $form);
+
+            if (_.isEmpty($field)) { return; }
+
+            addCreditCardValidation($field);
+            addCardNumberFormatting($field);
+
+            $field.on('keyup', function (event) {
+                updateCardIcon($(event.currentTarget));
+            });
+        },
+
+        getCardType = function ($ccInput) {
+            var cardNumber = $ccInput.val();
+            return cardNumber.length ? $.payment.cardType(cardNumber) : '';
+        },
+
+        cardTypeClass = function(cardType) {
+            var issuers = {
+                'visa': 'visa',
+                'mastercard': 'mastercard',
+                'discover': 'discover',
+                'amex': 'american-express',
+                'dinersclub': 'diner-s-club'
+            };
+
+            return '.payment-icon--' + issuers[cardType];
+        },
+
+        addCvvValidation = function ($field) {
+            if (fieldExists($field) && fieldNeedsRule($field, 'cvv')) {
+                $field
+                    .rules('add', { cvv: true });
+            }
+        },
+
+        checkCvvCode = function (cvvField) {
+            var $form = $(cvvField).closest('form'),
+                $ccInput = $('input[name="credit_card[number]"]', $form),
+                cardType = getCardType($ccInput);
+
+            return $.payment.validateCardCVC($(cvvField).val(), cardType);
+        },
+
+        setUpCvvInput = function ($form) {
+            var $field = $('[name="credit_card[cvv]"]', $form);
+            addCvvValidation($field);
+        },
+
+        paymentTypeChanged = function ($field, newType) {
+            return !$field.hasClass('payment-icon--' + newType);
+        },
+
+        updateCardIcon = function ($field) {
+            var
+                $primaryPayment = $field.closest('.checkout-payment__primary-method'),
+                cardType = getCardType($field),
+                $paymentIcons = $('.payment-icon', $primaryPayment),
+                $activeIcon = $(cardTypeClass(cardType), $primaryPayment);
+
+            $paymentIcons.removeClass('payment-icon--selected');
+
+            if (_.isEmpty(cardType)) { return; }
+
+            if (paymentTypeChanged($field, cardType)) {
+                $activeIcon.addClass('payment-icon--selected');
+            }
+        },
+
+        handlePaymentMethodClick = function (event) {
+            $(event.currentTarget)
+                .find('input[name="payment"]')
+                .prop('checked', true)
+                .trigger('change');
+        },
+
+        activatePaymentMethod = function (event) {
+            $(event.currentTarget)
+                .closest('.checkout-payment__primary-method')
+                .addClass('checkout-payment__primary-method--selected')
+                .siblings('.checkout-payment__primary-method')
+                .removeClass('checkout-payment__primary-method--selected');
+        },
+
+        setupForm = function (index, section) {
+            var $form = $('form', section);
+
+            setUpCardNumberInput($form);
+            setUpCvvInput($form);
+
+            $('input[name="payment"]', $form)
+                .on('change', activatePaymentMethod);
+
+            $('.checkout-payment__primary-method', $form)
+                .on('click', handlePaymentMethodClick);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.checkoutPrimaryPayments
+         */
+        init = function ($scope) {
+            $('[data-checkout-primary-payment]', $scope).each(setupForm);
+        };
+
+    return {
+        init: init,
+        checkCvvCode: checkCvvCode
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/header_search_ui.js

@@ -0,0 +1,64 @@
+/**
+ * @namespace WORKAREA.headerSearchUI
+ */
+WORKAREA.registerModule('headerSearchUI', (function () {
+    'use strict';
+
+    var searchUiOpenClass = 'page-header__search-form--open',
+
+        getSearchInput = function($searchHeader) {
+            return $searchHeader.find('.text-box');
+        },
+
+        focusOnSearchInput = function($searchHeader) {
+            var $searchInput = getSearchInput($searchHeader);
+            $searchInput.trigger('focus');
+        },
+
+        openheaderSearchUi = function($searchHeader) {
+            $searchHeader.addClass(searchUiOpenClass);
+            focusOnSearchInput($searchHeader);
+        },
+
+        closeheaderSearchUi = function($searchHeader) {
+            $searchHeader.removeClass(searchUiOpenClass);
+        },
+
+        headerSearchUiIsOpen = function($searchHeader) {
+            return $searchHeader.hasClass(searchUiOpenClass);
+        },
+
+        searchInputEmpty = function($searchHeader) {
+            var $searchInput = getSearchInput($searchHeader);
+            return _.isEmpty($searchInput.val());
+        },
+
+        handleSearchToggleClick = function(event) {
+            var $searchHeader = $(event.delegateTarget);
+
+            event.preventDefault();
+
+            if (headerSearchUiIsOpen($searchHeader) && searchInputEmpty($searchHeader)) {
+                closeheaderSearchUi ($searchHeader);
+            } else if (!headerSearchUiIsOpen($searchHeader)) {
+                openheaderSearchUi($searchHeader);
+            } else {
+                $('form', $searchHeader).trigger('submit');
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.headerSearchUI
+         */
+        init = function ($scope) {
+            var $searchHeader = $('[data-header-search-ui]', $scope);
+
+            $searchHeader.on('click', 'button', handleSearchToggleClick);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/mobile_filters.js

@@ -0,0 +1,79 @@
+/**
+ * @namespace WORKAREA.mobileFilters
+ */
+WORKAREA.registerModule('mobileFilters', (function () {
+    'use strict';
+
+    var allowBodyScroll = function () {
+            var offsetY = -parseInt($('body').css('top'));
+
+            $('body').css({
+                'position': 'static',
+                'right': '',
+                'left': '',
+                'overflow': ''
+            });
+
+            $(window).scrollTop(offsetY);
+        },
+
+        /**
+         * 1. required to prevent scrolling in ios when an input
+         *    in a drawer is focused.
+         */
+        preventBodyScroll = function () {
+            var offsetY = window.pageYOffset;
+
+            $('body').css({
+                'position': 'fixed',
+                'top': -(offsetY) + 'px',
+                'right': '0px',
+                'left': '0px',
+                'overflow': 'hidden' /* [1] */
+            });
+        },
+
+        closeFilters = function($mobileFilters) {
+            var $overlay = $('#mobile-filters-overlay');
+
+            $('.page-container').removeClass('page-container--drawer-left-open');
+            $mobileFilters.removeClass('mobile-filters--is-open');
+            $overlay.addClass('hidden');
+            allowBodyScroll();
+        },
+
+        openFilters = function($mobileFilters) {
+            var $overlay = $('#mobile-filters-overlay');
+
+            $('.page-container').addClass('page-container--drawer-left-open');
+            $mobileFilters.addClass('mobile-filters--is-open');
+            $overlay.removeClass('hidden');
+            preventBodyScroll();
+        },
+
+        handleEvent = function() {
+            var $mobileFilters = $('#mobile-filter-drawer');
+
+            openFilters($mobileFilters);
+        },
+
+        handleOverlayEvent = function () {
+            var $mobileFilters = $('#mobile-filter-drawer');
+
+            closeFilters($mobileFilters);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mobileFilters
+         */
+        init = function ($scope) {
+            $('[data-mobile-filters]', $scope).on('click', handleEvent);
+            $('#mobile-filters-overlay', $scope).on('click', handleOverlayEvent);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/mobile_nav_button.js

@@ -0,0 +1,137 @@
+/**
+ * @namespace WORKAREA.mobileNavButton
+ */
+WORKAREA.registerModule('mobileNavButton', (function () {
+    'use strict';
+
+    var replaceNavigation = function ($mobileNav, response) {
+            var $navigation = $(response);
+
+            WORKAREA.initModules($navigation);
+            $mobileNav.empty().append($navigation);
+        },
+
+        requestNav = function (event) {
+            var $mobileNav = $(event.delegateTarget);
+
+            event.preventDefault();
+
+            $.get(event.currentTarget.href)
+            .done(_.partial(replaceNavigation, $mobileNav));
+        },
+
+        bindNavigationActions = function ($mobileNav) {
+            $mobileNav
+            .on('click', '.mobile-nav__back-button', requestNav)
+            .on('click', '.mobile-nav__item--has-children a', requestNav);
+        },
+
+        /**
+         * 1. required to prevent scrolling in ios when an input
+         *    in a drawer is focused.
+         */
+        preventBodyScroll = function () {
+            var offsetY = window.pageYOffset;
+
+            $('body').css({
+                'position': 'fixed',
+                'top': -(offsetY) + 'px',
+                'right': '0px',
+                'left': '0px',
+                'overflow': 'hidden' /* [1] */
+            });
+        },
+
+        allowBodyScroll = function () {
+            var offsetY = -parseInt($('body').css('top'));
+
+            $('body').css({
+                'position': 'static',
+                'right': '',
+                'left': '',
+                'overflow': ''
+            });
+
+            $(window).scrollTop(offsetY);
+        },
+
+        setNavButtonOpen = function ($mobileNavButton) {
+            $mobileNavButton.data('mobileNavOpen', true);
+        },
+
+        setNavButtonClosed = function ($mobileNavButton) {
+            $mobileNavButton.data('mobileNavOpen', false);
+        },
+
+        deactivateMobileNav = function ($mobileNav) {
+            $mobileNav.removeClass('mobile-nav--active');
+            $('.page-container').removeClass('page-container--drawer-left-open');
+            setNavButtonClosed($('#mobile_nav_button'));
+            $('#mobile_nav_overlay').addClass('hidden');
+            allowBodyScroll();
+        },
+
+        activateMobileNav = function ($mobileNav) {
+            $mobileNav.addClass('mobile-nav--active');
+            $('.page-container').addClass('page-container--drawer-left-open');
+            setNavButtonOpen($('#mobile_nav_button'));
+            $('#mobile_nav_overlay').removeClass('hidden');
+            preventBodyScroll();
+        },
+
+        injectMobileNav = function (response) {
+            var $mobileNav = $('<div class="mobile-nav" id="mobile_nav" />'),
+                $overlay = $('<div class="mobile-nav-overlay" id="mobile_nav_overlay" />');
+
+            $mobileNav.append(response);
+
+            WORKAREA.initModules($mobileNav);
+            $overlay.on('click', function () {
+                deactivateMobileNav($('#mobile_nav'));
+            });
+
+            activateMobileNav($mobileNav);
+            bindNavigationActions($mobileNav);
+
+            $('body').append($mobileNav, $overlay);
+        },
+
+        requestMobileNav = function (href) {
+            $.get(href).done(injectMobileNav);
+        },
+
+        openMobileNav = function ($nav, navUrl) {
+            if (_.isEmpty($nav)) {
+                requestMobileNav(navUrl);
+            } else {
+                activateMobileNav($nav);
+            }
+        },
+
+        handleNavButtonClick = function(event) {
+            var $button = $(event.currentTarget),
+                navOpen = $button.data('mobileNavOpen'),
+                navUrl = $button.attr('href');
+
+            event.preventDefault();
+
+            if (navOpen) {
+                deactivateMobileNav($('#mobile_nav'));
+            } else {
+                openMobileNav($('#mobile_nav'), navUrl);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mobileNavButton
+         */
+        init = function ($scope) {
+            $('#mobile_nav_button', $scope).on('click', handleNavButtonClick);
+        };
+
+    return {
+        init: init
+    };
+}()));