workarea-haven_theme 1.3.0

data/app/assets/images/workarea/storefront/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>share</title><g ><path d="M12.69,9.88A1.88,1.88,0,1,1,14.56,8,1.88,1.88,0,0,1,12.69,9.88ZM3.31,14.56a1.88,1.88,0,1,1,1.88-1.87A1.87,1.87,0,0,1,3.31,14.56Zm0-9.37A1.88,1.88,0,1,1,5.19,3.31,1.88,1.88,0,0,1,3.31,5.19Zm9.44.06a2.77,2.77,0,0,0-2.2,1.09L5.91,4A3,3,0,0,0,6,3.25a2.75,2.75,0,1,0-.49,1.57l4.61,2.36a2.86,2.86,0,0,0,0,1.64L5.51,11.18A2.75,2.75,0,1,0,6,12.75,2.84,2.84,0,0,0,5.91,12l4.64-2.37a2.75,2.75,0,1,0,2.2-4.41Z"/></g></svg>

data/app/assets/images/workarea/storefront/icons/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>twitter</title><path d="M15,3.8a6.09,6.09,0,0,1-1.65.44A2.78,2.78,0,0,0,14.61,2.7a6,6,0,0,1-1.82.68,2.91,2.91,0,0,0-2.1-.88A2.83,2.83,0,0,0,7.82,5.28a3.29,3.29,0,0,0,.07.63A8.28,8.28,0,0,1,2,3a2.75,2.75,0,0,0,.89,3.71,3,3,0,0,1-1.3-.35v0A2.81,2.81,0,0,0,3.87,9.13a3.16,3.16,0,0,1-.76.09,2.41,2.41,0,0,1-.54-.05A2.85,2.85,0,0,0,5.25,11.1a5.85,5.85,0,0,1-3.57,1.19,5.07,5.07,0,0,1-.68,0A8.31,8.31,0,0,0,5.4,13.5a8,8,0,0,0,8.18-7.9c0-.12,0-.24,0-.36A5.76,5.76,0,0,0,15,3.8"/></svg>

data/app/assets/images/workarea/storefront/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>x</title><polygon points="1.78 0 0 1.78 6.22 8 0 14.22 1.78 16 8 9.78 14.22 16 16 14.22 9.78 8 16 1.78 14.22 0 8 6.22 1.78 0"/></svg>

data/app/assets/javascripts/workarea/storefront/haven_theme/config.js

@@ -0,0 +1,44 @@
+(function () {
+    'use strict';
+
+    WORKAREA.config.maximumFilterCount = 7;
+
+    _.merge(WORKAREA.config.scrollToButtons, {
+        topOffset: 110
+    });
+
+    WORKAREA.config.havenTheme = {
+        quantityControl: {
+            autoSubmitDelay: 500
+        }
+    };
+
+    WORKAREA.config.productDetailTabs = {
+        animationSpeed: 500,
+        topOffset: 110
+    };
+
+    _.merge(WORKAREA.config.dialog, {
+        options: {
+            initModules: true,
+
+            uiDialogOptions: {
+                width: 'auto',
+                modal: true
+            }
+        },
+    });
+
+    _.merge(WORKAREA.config.hoverZooms, {
+        triggerZoomFromSelector: '.product-media__primary-image-item',
+        addZoomWindowToSelector: '.product-details__name',
+        primaryImageContainer: '.product-media__primary-image-item'
+    });
+
+    if (!_.isEmpty($.validator)) {
+        // Add `CVV` method to jQuery Validate
+        $.validator.addMethod('cvv', function (value, element) {
+            return WORKAREA.checkoutPrimaryPayments.checkCvvCode(element);
+        });
+    }
+})();

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('.styled-select').addClass('hidden');
+                $regionTextBox.removeClass('hidden');
+                $regionRequirementIndicator.addClass('hidden');
+            } else {
+                updateSelectUI($regionField, $regionOptGroup);
+                $regionTextBox.addClass('hidden');
+                $regionSelect.removeClass('hidden');
+                $regionSelect.closest('.styled-select').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/checkout_primary_payments.js

@@ -0,0 +1,130 @@
+/**
+ * @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);
+        },
+
+        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.target)
+                .find('input[name="payment"]')
+                .prop('checked', true)
+                .trigger('change');
+        },
+
+        activatePaymentMethod = function (event) {
+            $(event.target)
+                .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);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.checkoutPrimaryPayments
+         */
+        init = function ($scope) {
+            $('[data-checkout-primary-payment]', $scope)
+            .on('change', 'input[name="payment"]', activatePaymentMethod)
+            .on('click', '.checkout-payment__primary-method', handlePaymentMethodClick)
+            .on('keyup', '[name="credit_card[number]"]', function (event) {
+                updateCardIcon($(event.target));
+            })
+            .each(setupForm);
+        };
+
+    return {
+        init: init,
+        checkCvvCode: checkCvvCode
+    };
+}()));

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

@@ -0,0 +1,50 @@
+/**
+ * @namespace WORKAREA.expandableFilters
+ */
+WORKAREA.registerModule('expandableFilters', (function () {
+    'use strict';
+
+    var isTruncated = function ($group) {
+            return $group.hasClass('result-filters__group--truncated');
+        },
+
+        toggleTruncated = function (event) {
+            var $button = $(event.currentTarget),
+                $group = $button.siblings('.result-filters__group');
+
+            if (isTruncated($group)) {
+                $group.removeClass('result-filters__group--truncated');
+                $button.text(I18n.t('workarea.storefront.filters.view_less'));
+            } else {
+                $group.addClass('result-filters__group--truncated');
+                $button.text(I18n.t('workarea.storefront.filters.view_more'));
+            }
+        },
+
+        toggleFilterGroupClosed = function($group) {
+            $group.toggleClass('result-filters__container--closed');
+        },
+
+        setupGroup = function(index, group) {
+            var $group = $(group),
+                $heading = $('.result-filters__attribute', $group),
+                $viewMoreButton = $('.result-filters__view-more-button', $group);
+
+            if (index > 0) { // First filter group is expanded by default
+                toggleFilterGroupClosed($group);
+            }
+
+            $heading.on('click', _.partial(toggleFilterGroupClosed, $group));
+            $viewMoreButton.on('click', toggleTruncated);
+        },
+
+        init = function ($scope) {
+            $('[data-expandable-filters]', $scope)
+                .find('.result-filters__container')
+                .each(setupGroup);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,89 @@
+/**
+ * @namespace WORKAREA.mobileFilterButtons
+ *
+ * A clone of WORKAREA.mobileNavButton
+ */
+WORKAREA.registerModule('mobileFilterButtons', (function () {
+    'use strict';
+
+    var closeButton = JST['workarea/storefront/templates/mobile_filters_nav_close_button'],
+
+        deactivate = function ($nav) {
+            $nav.removeClass('mobile-filters-nav--active');
+        },
+
+        activate = function ($nav) {
+            $nav.addClass('mobile-filters-nav--active');
+        },
+
+        close = function ($nav, event) {
+            event.preventDefault();
+            deactivate($nav);
+        },
+
+        addCloseButton = function ($nav, $wrapper) {
+            var $button = $(closeButton({
+                content: I18n.t('workarea.storefront.products.filter_nav_close_button')
+            }));
+
+            $button.on('click', _.partial(close, $nav));
+
+            $wrapper.prepend($button);
+        },
+
+        inject = function () {
+            var $nav = $('<div class="mobile-filters-nav" id="mobile_filters_nav" />'),
+                $wrapper = $('<div class="mobile-filters-nav__wrapper" />'),
+                $content = $('#aside-content').clone(true);
+
+            $nav.append($wrapper);
+            $wrapper.append($content);
+
+            activate($nav);
+            addCloseButton($nav, $wrapper);
+
+            WORKAREA.initModules($nav);
+
+            $('body').append($nav);
+        },
+
+        openMobileFilters = function (event) {
+            event.preventDefault();
+
+            if (_.isEmpty($('#mobile_filters_nav'))) {
+                inject();
+            } else {
+                activate($('#mobile_filters_nav'));
+            }
+        },
+
+        testBodyClick = function (event) {
+            var $target = $(event.target),
+                $nav = $('#mobile_filters_nav'),
+                $navButton = $('[data-mobile-filter-button]'),
+
+                navIsActive = $nav.hasClass('mobile-filters-nav--active'),
+                clickIsOutsideNav = _.isEmpty($target.closest($nav).addBack($nav)),
+                clickIsNavButton = ! _.isEmpty($target.closest($navButton).addBack($navButton));
+
+            if (navIsActive && clickIsOutsideNav && ( ! clickIsNavButton)) {
+                close($nav, event);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mobileFilterButtons
+         */
+        init = function ($scope) {
+            $('[data-mobile-filter-button]', $scope)
+            .on('click', openMobileFilters);
+        };
+
+    $('body').on('click.mobileFilterButtons', testBodyClick);
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,104 @@
+/**
+ * @namespace WORKAREA.mobileNavButton
+ *
+ * A clone of WORKAREA.mobileFilterButtons
+ */
+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)
+            .on('click', '.mobile-nav__close-button', function (event) {
+                event.preventDefault();
+                deactivateMobileNav($(event.delegateTarget), $('#overlay'));
+            });
+        },
+
+        deactivateMobileNav = function ($mobileNav, $overlay) {
+            $mobileNav.removeClass('mobile-nav--active');
+            $overlay.removeClass('overlay--active');
+        },
+
+        activateMobileNav = function ($mobileNav, $overlay) {
+            $mobileNav.addClass('mobile-nav--active');
+            $overlay.addClass('overlay--active');
+        },
+
+        injectMobileNav = function (response) {
+            var $mobileNav = $('<div class="mobile-nav" id="mobile_nav" />'),
+                $overlay = $('<div class="overlay" id="overlay"/>');
+
+            $mobileNav.append(response);
+
+            WORKAREA.initModules($mobileNav);
+
+            activateMobileNav($mobileNav, $overlay);
+            bindNavigationActions($mobileNav);
+
+            $('body').append($overlay, $mobileNav);
+        },
+
+        requestMobileNav = function (href) {
+            $.get(href).done(injectMobileNav);
+        },
+
+        openMobileNav = function (event) {
+            event.preventDefault();
+
+            if (_.isEmpty($('#mobile_nav'))) {
+                requestMobileNav(event.currentTarget.href);
+            } else {
+                activateMobileNav($('#mobile_nav'), $('#overlay'));
+            }
+        },
+
+        testBodyClick = function (event) {
+            var $target = $(event.target),
+                $mobileNav = $('#mobile_nav'),
+                $navButton = $('#mobile_nav_button'),
+                $overlay = $('#overlay'),
+
+                navIsActive = $mobileNav.hasClass('mobile-nav--active'),
+                clickIsOutsideNav = _.isEmpty($target.closest($mobileNav).addBack($mobileNav)),
+                clickIsNavButton = ! _.isEmpty($target.closest($navButton).addBack($navButton));
+
+            if (navIsActive && clickIsOutsideNav && ( ! clickIsNavButton)) {
+                event.preventDefault();
+                deactivateMobileNav($mobileNav, $overlay);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mobileNavButton
+         */
+        init = function ($scope) {
+            $('#mobile_nav_button', $scope).on('click', openMobileNav);
+        };
+
+    $('body').on('click.mobileNavButton', testBodyClick);
+
+    return {
+        init: init
+    };
+}()));