workarea-storefront 3.4.12

data/app/assets/javascripts/workarea/storefront/head.js.erb

@@ -0,0 +1,18 @@
+<%
+  # Feature.js
+  require_asset 'featurejs_rails/feature'
+
+  # Allow custom features to be tested
+  append_javascripts('storefront.featurejs')
+
+  # Test Helper
+  require_asset 'workarea/core/feature_test_helper' if Rails.env.test?
+%>
+
+// apply Feature.js classes to the root HTML element
+window.feature.testAll();
+
+<%
+  # Plugin Head Append Point
+  append_javascripts('storefront.head')
+%>

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

@@ -0,0 +1,91 @@
+// 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');
+                $regionTextBox.removeClass('hidden');
+                $regionRequirementIndicator.addClass('hidden');
+            } else {
+                updateSelectUI($regionField, $regionOptGroup);
+                $regionTextBox.addClass('hidden');
+                $regionSelect.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/admin_toolbar.js

@@ -0,0 +1,105 @@
+/**
+ * @namespace WORKAREA.adminToolbar
+ */
+WORKAREA.registerModule('adminToolbar', (function () {
+    'use strict';
+
+    var focusSearch = function ($toolbar) {
+            var $scope = $toolbar.contents();
+
+            $('#primary_nav_admin_search', $scope).trigger('focus');
+        },
+
+        collapse = function ($toolbar) {
+            var $header = $('.header', $toolbar.contents());
+
+            $toolbar.removeClass('admin-toolbar--expanded');
+            $header.removeClass('header--takeover');
+        },
+
+        expand = function ($toolbar) {
+            var $header = $('.header', $toolbar.contents());
+
+            $toolbar.addClass('admin-toolbar--expanded');
+            $header.addClass('header--takeover');
+        },
+
+        bindEscapeKey = function ($toolbar) {
+            var toolbarWindow = $toolbar[0].contentWindow;
+
+            $(toolbarWindow).on('keyup.adminToolbar', function (event) {
+                if (event.keyCode !== 27) { return; } // only care about escape
+                collapse($toolbar);
+            });
+        },
+
+        bindTakeoverToggle = function ($toolbar) {
+            var $scope = $toolbar.contents(),
+                triggerSelectors = [
+                    '.header__search-form',
+                    '.header__menu-button'
+                ].join(',');
+
+            $(triggerSelectors, $scope).on('click', function (event) {
+                event.preventDefault();
+
+                if ($(event.currentTarget).is('.header__menu-button--close')) {
+                    collapse($toolbar);
+                } else {
+                    expand($toolbar);
+                    focusSearch($toolbar);
+                }
+            });
+
+            return $toolbar;
+        },
+
+        notify = function ($toolbar) {
+            $(window).trigger('adminToolbar:loaded');
+            return $toolbar;
+        },
+
+        url = function () {
+            var globalId = $('meta[property="global-id"]').attr('content'),
+                params = {};
+
+            params.return_to = window.location.href;
+            if (globalId) { params.id = globalId; }
+
+            return '/admin/toolbar?' + $.param(params);
+        },
+
+        shouldDisplay = function (user) {
+            return user.impersonating
+                || user.browsing_as_guest
+                || (user.admin && user.logged_in);
+        },
+
+        create = function (user) {
+            if ( ! shouldDisplay(user)) { return; }
+
+            $('<iframe />').attr({
+                src: url(),
+                scrolling: 'no', // technically unsupported, but required
+                class: 'admin-toolbar',
+                id: 'admin-toolbar',
+                role: 'document',
+                title: 'Admin Toolbar'
+            })
+            .prependTo('body')
+            .on('load', function (event) {
+                var $toolbar = $(event.currentTarget);
+                _.flow(notify, bindTakeoverToggle, bindEscapeKey)($toolbar);
+            });
+        },
+
+        init = _.once(function () {
+            if ( ! _.isEmpty($('[data-disable-admin-toolbar]'))) { return; }
+            if (WORKAREA.breakPoints.currentlyLessThan('medium')) { return; }
+            WORKAREA.currentUser.gettingUserData.done(create);
+        });
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,78 @@
+/**
+ * @namespace WORKAREA.alternateImageButtons
+ */
+WORKAREA.registerModule('alternateImageButtons', (function () {
+    'use strict';
+
+    var updateImageButtons = function ($selectedImageButton, $container) {
+            var $imageButtons = $(
+                    '.product-details__alt-image-link',
+                    $container
+                );
+
+            $imageButtons
+            .removeClass('product-details__alt-image-link--selected');
+
+            $selectedImageButton
+            .addClass('product-details__alt-image-link--selected');
+        },
+
+        updatePrimaryImageButton = function ($selectedImageButton, $container) {
+            var $primaryImageButton = $(
+                    '.product-details__primary-image-link', $container
+                ),
+                zoomImageSrc = $selectedImageButton.attr('href');
+
+            $primaryImageButton.attr('href', zoomImageSrc);
+        },
+
+        updatePrimaryImage = function ($selectedImageButton, $container) {
+            var $primaryImage = $(
+                    '.product-details__primary-image-link-image', $container
+                ),
+                imageData = $selectedImageButton.data('alternateImageButton'),
+                detailImageSrc = imageData.src;
+
+            $primaryImage.attr('src', detailImageSrc);
+        },
+
+        handleImageResponse = function ($selectedImageButton, $container) {
+            updateImageButtons($selectedImageButton, $container);
+            updatePrimaryImageButton($selectedImageButton, $container);
+            updatePrimaryImage($selectedImageButton, $container);
+        },
+
+        handleImageButtonClick = function (event) {
+            var $selectedImageButton = $(event.currentTarget),
+                $details = $selectedImageButton.closest('.product-details'),
+                $primaryImage = $('.product-details__primary-image', $details),
+                imageData = $selectedImageButton.data('alternateImageButton'),
+                detailImageSrc = imageData.src,
+                gettingImage = WORKAREA.image.get(detailImageSrc);
+
+            event.preventDefault();
+
+            WORKAREA.loading.createLoadingIndicator(gettingImage, {
+                container: $primaryImage,
+                cssModifiers: 'loading--fill-parent'
+            });
+
+            gettingImage.done(
+                _.partial(handleImageResponse, $selectedImageButton, $details)
+            );
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.alternateImageButtons
+         */
+        init = function ($scope) {
+            $('[data-alternate-image-button]', $scope)
+            .on('click', handleImageButtonClick);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,285 @@
+/**
+ * @namespace WORKAREA.analytics
+ * @property {boolean} debug
+ * @property {object} events - a collection of events fired for the current page
+ * @property {object} callbacks
+ * @property {function} fireCallbacks
+ * @property {function} registerAdapter
+ * @property {function} disableDomEvents - allow tests to disable dom events
+ */
+WORKAREA.registerModule('analytics', (function () {
+    'use strict';
+
+    var debug = WORKAREA.environment.isDevelopment,
+
+        handledEvents = [
+            'productList',
+            'productClick',
+            'updateCartItem'
+        ],
+
+        handledDomEvents = [
+            'submit'
+        ],
+
+        preventDomEvents = false,
+
+
+        /**
+         * Test Helpers
+         */
+
+        /**
+         * Ceases the triggering of DOM events handled by the module, for
+         * testing purposes.
+         *
+         * @method
+         * @name disableDomEvents
+         * @memberOf WORKAREA.analytics
+         */
+        disableDomEvents = function () {
+            preventDomEvents = true;
+        },
+
+        domEventsDisabled = function () {
+            return preventDomEvents;
+        },
+
+
+        /**
+         * Adapter Management
+         */
+
+        events = [],
+        callbacks = {},
+
+
+        /**
+         * Utility
+         */
+
+        analyticsDisabled = function () {
+            return $('meta[property=analytics]').attr('content') === 'disable';
+        },
+
+
+        /**
+         * @method
+         * @name fireCallback
+         * @memberof WORKAREA.analytics
+         */
+        fireCallback = function () {
+            var name = arguments[0],
+                callbackArgs = _.tail(arguments);
+
+            if (analyticsDisabled()) { return; }
+
+            if (debug && window.console) {
+                window.console.log(
+                    'WORKAREA.analytics: firing',
+                    '"' + name + '" with arguments',
+                    callbackArgs
+                );
+            }
+
+            events.push({ name: name, arguments: callbackArgs});
+
+            _.forEach(callbacks[name], function (callback) {
+                callback.apply(callback, callbackArgs);
+            });
+        },
+
+        /**
+         * @method
+         * @name registerAdapter
+         * @memberof WORKAREA.analytics
+         */
+        registerAdapter = function (name, fn) {
+            _.forEach(fn(), function (callback, event) {
+                callbacks[event] = callbacks[event] || [];
+                callbacks[event].push(callback);
+            });
+        },
+
+
+        /**
+         * Event Management
+         */
+
+        getBreadcrumbs = _.memoize(function () {
+            return $('.breadcrumbs .breadcrumbs__node')
+                .map(function () { return $.trim($(this).text()); })
+                .get()
+                .join('/');
+        }),
+
+        calculateListPosition = function (position, page, perPage) {
+            position = position || 0;
+            page = page || 1;
+            perPage = perPage || 20;
+
+            return position + ((page - 1) * perPage);
+        },
+
+        forEachAnalyticsElement = function ($scope, conditions, iterator) {
+            function isConditionsMatch(data) {
+                return (!conditions.event || conditions.event === data.event) &&
+                    (!conditions.domEvent || conditions.domEvent === data.domEvent);
+            }
+
+            $scope
+                .find('[data-analytics]')
+                    .addBack('[data-analytics]')
+                    .each(function () {
+                        var data = $(this).data('analytics');
+
+                        if (isConditionsMatch(data)) {
+                            iterator.call(this, data);
+                        }
+                    });
+        },
+
+        setupProductClicks = _.partialRight(forEachAnalyticsElement, { 'event': 'productClick' }, function (data) {
+            var $clickElement = $(this);
+
+            $clickElement.on('click', function (event) {
+                var $closestList = $clickElement.parents('[data-analytics]').filter(function () {
+                        return $(this).data('analytics').event === 'productList';
+                    }),
+
+                    listData = $closestList.data('analytics') || {},
+
+                    $allImpressions = $closestList.find('[data-analytics-product-impression]'),
+                    $thisImpression = $clickElement
+                                        .closest('.product-summary')
+                                        .find('[data-analytics-product-impression]'),
+
+                    position = calculateListPosition(
+                        $allImpressions.index($thisImpression),
+                        listData.page,
+                        listData.per_page
+                    ),
+
+                    listName = listData.name || getBreadcrumbs();
+
+                if (preventDomEvents) { event.preventDefault(); }
+
+                WORKAREA.analytics.fireCallback(
+                    'productClick',
+                    _.merge(data.payload, { 'list': listName, 'position': position })
+                );
+            });
+        }),
+
+        setupFormSubmissions = _.partialRight(forEachAnalyticsElement, { 'domEvent': 'submit' }, function (data) {
+            if(data.event === 'updateCartItem') { return; }
+
+            var $form = $(this),
+                addQuantityToPayload = function (form, data) {
+                    if (data.event === 'addToCart') {
+                        data.payload.quantity =
+                            $('[name=quantity]', form).val();
+                    }
+                    return data;
+                };
+
+            $form.on('submit', function (event) {
+                if (preventDomEvents) { event.preventDefault(); }
+
+                if ($form.valid()) {
+                    data = addQuantityToPayload(this, data);
+                    WORKAREA.analytics.fireCallback(data.event, data.payload);
+                }
+            });
+        }),
+
+        // TODO This is also a form submission, so quantity data can be included
+        // in setupFormSubmissions (see duplicate addToCart logic above)
+        setupCartItemUpdates = _.partialRight(forEachAnalyticsElement, { 'event': 'updateCartItem' }, function (data) {
+            var $form = $(this);
+
+            $form.on('submit', function (event) {
+                if (preventDomEvents) { event.preventDefault(); }
+
+                if ($form.valid()) {
+                    var newQuantity = $('input[name=quantity]', $form).val();
+
+                    WORKAREA.analytics.fireCallback(
+                        data.event,
+                        _.merge(
+                            data.payload,
+                            { 'from': data.payload.quantity, 'to': newQuantity }
+                        )
+                    );
+                }
+            });
+        }),
+
+        setupProductLists = _.partialRight(forEachAnalyticsElement, { 'event': 'productList' }, function (data) {
+            var $list = $(this),
+                page = data.page,
+                perPage = data.per_page,
+                impressions = $list.find('[data-analytics-product-impression]').map(function (index) {
+                    return _.assign(
+                        $(this).data('analyticsProductImpression'),
+                        { 'position': calculateListPosition(index, page, perPage) }
+                    );
+                }).get();
+
+            if (_.isEmpty(impressions)) {
+                return;
+            }
+
+            data.name = data.name || getBreadcrumbs();
+            data.impressions = impressions;
+
+            WORKAREA.analytics.fireCallback('productList', data);
+        }),
+
+        setupGenericCallbacks = _.partialRight(forEachAnalyticsElement, {}, function (data) {
+            if (_.includes(handledEvents, data.event)) { return; }
+            if (_.includes(handledDomEvents, data.domEvent)) { return; }
+
+            if (data.domEvent) {
+                $(this).on(data.domEvent, function (event) {
+                    if (preventDomEvents) { event.preventDefault(); }
+
+                    WORKAREA.analytics.fireCallback(data.event, data.payload);
+                });
+            } else {
+                WORKAREA.analytics.fireCallback(data.event, data.payload);
+            }
+        }),
+
+        firePageView = _.once(function () {
+            WORKAREA.analytics.fireCallback('pageView');
+        }),
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.analytics
+         */
+        init = function ($scope) {
+            if (analyticsDisabled()) { return; }
+
+            setupProductClicks($scope);
+            setupCartItemUpdates($scope);
+            setupFormSubmissions($scope);
+            setupProductLists($scope);
+
+            setupGenericCallbacks($scope);
+            firePageView();
+        };
+
+    return {
+        init: init,
+        registerAdapter: registerAdapter,
+        debug: debug,
+        fireCallback: fireCallback,
+        callbacks: callbacks,
+        disableDomEvents: disableDomEvents,
+        domEventsDisabled: domEventsDisabled,
+        events: events
+    };
+}()));