workarea-storefront 3.4.12

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

@@ -0,0 +1,100 @@
+/**
+ * @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));
+            });
+        },
+
+        deactivateMobileNav = function ($mobileNav) {
+            $mobileNav.removeClass('mobile-nav--active');
+        },
+
+        activateMobileNav = function ($mobileNav) {
+            $mobileNav.addClass('mobile-nav--active');
+        },
+
+        injectMobileNav = function (response) {
+            var $mobileNav = $('<div class="mobile-nav" id="mobile_nav" />');
+
+            $mobileNav.append(response);
+
+            WORKAREA.initModules($mobileNav);
+
+            activateMobileNav($mobileNav);
+            bindNavigationActions($mobileNav);
+
+            $('body').append($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'));
+            }
+        },
+
+        testBodyClick = function (event) {
+            var $target = $(event.target),
+                $mobileNav = $('#mobile_nav'),
+                $navButton = $('#mobile_nav_button'),
+
+                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);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mobileNavButton
+         */
+        init = function ($scope) {
+            $('#mobile_nav_button', $scope).on('click', openMobileNav);
+        };
+
+    $('body').on('click.mobileNavButton', testBodyClick);
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,40 @@
+/**
+ * @namespace WORKAREA.optionButtons
+ */
+WORKAREA.registerModule('optionButtons', (function () {
+    'use strict';
+
+    var replaceProductDetails = function (event) {
+            var $link = $(event.delegateTarget),
+                newUrl = $link.attr('href');
+
+            event.preventDefault();
+
+            $.get(newUrl, function (html) {
+                var $newDetails = $(html)
+                                    .find('.product-details')
+                                        .addBack('.product-details');
+
+                $link.closest('.product-details').replaceWith($newDetails);
+
+                if (_.isEmpty($newDetails.closest('.ui-dialog'))) {
+                    window.history.replaceState(null, null, newUrl);
+                }
+
+                WORKAREA.initModules($newDetails);
+            });
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.optionButtons
+         */
+        init = function ($scope) {
+            $('[data-option-button]', $scope).on('click', replaceProductDetails);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,49 @@
+/**
+ * @namespace WORKAREA.optionalFields
+ */
+WORKAREA.registerModule('optionalFields', (function () {
+    'use strict';
+
+    var prompt = JST['workarea/storefront/templates/optional_field_prompt'],
+
+        reveal = function ($container, $prompt, event) {
+            event.preventDefault();
+            event.stopPropagation();
+            $prompt.remove();
+            $container.removeClass('hidden-if-js-enabled');
+            $container.find(':focusable').first().trigger('focus');
+        },
+
+        inject = function ($prompt, $container) {
+            $container.before($prompt);
+        },
+
+        build = function ($container) {
+            var $prompt = $(prompt({
+                text: $container.data('optionalField')
+            }));
+
+            $prompt.on('click', _.partial(reveal, $container, $prompt));
+            $container.on('change', _.partial(reveal, $container, $prompt));
+
+            return $prompt;
+        },
+
+        setup = function (index, container) {
+            var $container = $(container);
+            inject(build($container), $container);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.optionalFields
+         */
+        init = function ($scope) {
+            $('[data-optional-field]', $scope).each(setup);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,284 @@
+/**
+ * @namespace WORKAREA.pagination
+ */
+WORKAREA.registerModule('pagination', (function () {
+    'use strict';
+
+    var paginationButton = JST['workarea/storefront/templates/pagination_button'],
+
+
+        //
+        // Utility
+        //
+
+        appendChildren = function ($pagination, $newChildren) {
+            $('[data-pagination-item]:last', $pagination).after($newChildren);
+        },
+
+        findMiddleChild = function ($children) {
+            var index = Math.floor($children.length / 2);
+            return $children.eq(index);
+        },
+
+
+        //
+        // State Management
+        //
+
+        setSession = function (state) {
+            window.history.replaceState({
+                pagination: state
+            }, document.title, window.location.href);
+        },
+
+        getSession = function () {
+            return window.history.state.pagination;
+        },
+
+        saveUIStateToSession = function ($pagination) {
+            var session;
+
+            if ( ! sessionExists()) { return; }
+
+            session = getSession();
+
+            session.scrollTop = $(window).scrollTop();
+            session.height = $pagination.height();
+
+            setSession(session);
+        },
+
+        saveUrlToSession = function (nextPageUrl) {
+            var session = getSession();
+
+            session.pages.push(nextPageUrl);
+
+            setSession(session);
+        },
+
+        initSession = function () {
+            window.history.replaceState({
+                pagination: {
+                    pages: [],
+                    scrollTop: 0,
+                    height: 'auto'
+                }
+            }, document.title, window.location.href);
+        },
+
+        sessionExists = function () {
+            var state = window.history.state;
+            return (state && ! _.isEmpty(state.pagination));
+        },
+
+
+        //
+        // Button Management
+        //
+
+        bindNextPageButtonClick = function ($pagination) {
+            $('.pagination__button', $pagination)
+            .on('click', _.partial(restartPagination, $pagination));
+        },
+
+        showNextPageButton = function ($pagination, url) {
+            $('.pagination__button', $pagination).replaceWith(paginationButton({
+                loading: false,
+                nextPageUrl: url
+            }));
+        },
+
+        removePaginationButton = function ($pagination) {
+            $('.pagination__button', $pagination).remove();
+        },
+
+        setupPaginationButton = function ($pagination) {
+            $('.pagination__button', $pagination).replaceWith(paginationButton({
+                loading: true
+            }));
+        },
+
+
+        //
+        // Response Handling
+        //
+
+        handleResponse = function ($pagination, $trigger, url, response) {
+            var $newPagination = $('[data-pagination]', response),
+                $newChildren = $('[data-pagination-item]', $newPagination),
+                $newTrigger = findMiddleChild($newChildren);
+
+            WORKAREA.initModules($newPagination);
+
+            if ($trigger) { destroyWaypoint($trigger); }
+
+            appendChildren($pagination, $newChildren);
+            saveUrlToSession(url);
+            saveStateToTrigger($newPagination, $newTrigger);
+            initWaypoint($newTrigger);
+        },
+
+        requestNextPage = function ($pagination, $trigger, url) {
+            $.get(url)
+            .done(_.partial(handleResponse, $pagination, $trigger, url))
+            .fail(_.partial(showNextPageButton, $pagination, url));
+        },
+
+
+        //
+        // Waypoints
+        //
+
+        destroyWaypoint = function ($trigger) {
+            $trigger.data('paginationWaypoint').destroy();
+        },
+
+        handleWaypoint = function (direction) {
+            var $trigger = $(this.element),
+                $pagination = $trigger.closest('[data-pagination]'),
+                state = $trigger.data('paginationState');
+
+            if (direction !== 'down') { return; }
+
+            if ( ! sessionExists()) { initSession(); }
+
+            if (state.lastPage) {
+                removePaginationButton($pagination);
+            } else if (state.currentPage % state.pagesToLoad === 0) {
+                showNextPageButton($pagination, state.nextPageUrl);
+                bindNextPageButtonClick($pagination);
+            } else {
+                requestNextPage($pagination, $trigger, state.nextPageUrl);
+            }
+        },
+
+        initWaypoint = function ($trigger) {
+            $trigger.data('paginationWaypoint', new Waypoint({
+                element: $trigger[0],
+                handler: handleWaypoint,
+                offset: 'bottom-in-view'
+            }));
+        },
+
+        //
+        // Setup
+        //
+
+        saveStateToTrigger = function ($pagination, $trigger) {
+            var state = $pagination.data('pagination');
+
+            $trigger.data('paginationState', _.merge(
+                {}, state, WORKAREA.config.pagination
+            ));
+        },
+
+        restartPagination = function ($pagination, event) {
+            event.preventDefault();
+
+            setupPaginationButton($pagination);
+
+            requestNextPage($pagination, false, event.target.href);
+        },
+
+        setup = function ($pagination) {
+            var $children = $('[data-pagination-item]', $pagination),
+                $trigger = findMiddleChild($children);
+
+            saveStateToTrigger($pagination, $trigger);
+            initWaypoint($trigger);
+            setupPaginationButton($pagination);
+        },
+
+
+        //
+        // State Management
+        //
+
+        resetUIState = function ($pagination) {
+            $pagination.height('auto');
+        },
+
+        injectFetchedPage = function ($pagination, lastPage, response) {
+            var $newPagination = $('[data-pagination]', response),
+                $newChildren = $('[data-pagination-item]', $newPagination),
+                $newTrigger = findMiddleChild($newChildren);
+
+            WORKAREA.initModules($newPagination);
+
+            appendChildren($pagination, $newChildren);
+
+            if (lastPage) {
+                saveStateToTrigger($newPagination, $newTrigger);
+                initWaypoint($newTrigger);
+                resetUIState($pagination);
+            }
+        },
+
+        handleFetchedPages = function (pages, $pagination) {
+            _.forEach(pages, function (page, index) {
+                var lastPage = (index + 1 === pages.length);
+
+                // Don't use the promise's .done method because there's no
+                // guarantee they will be run in order.
+                injectFetchedPage($pagination, lastPage, page.responseText);
+            });
+        },
+
+        fetchPagesFromSession = function () {
+            return _.map(getSession().pages, function (url) {
+                return $.get(url);
+            });
+        },
+
+        awaitPageResquests = function ($pagination) {
+            var pages = fetchPagesFromSession();
+
+            $.when
+            .apply(null, pages)
+            .always(_.partial(handleFetchedPages, pages, $pagination));
+        },
+
+        recallUIState = function ($pagination) {
+            var session = getSession();
+
+            $pagination.height(session.height);
+            $(window).scrollTop(session.scrollTop);
+        },
+
+        bindPageUnloadEvent = function ($pagination) {
+            $(window).on('unload', _.partial(saveUIStateToSession, $pagination));
+        },
+
+
+        //
+        // Session Mediator
+        //
+
+        checkSession = function (index, pagination) {
+            var $pagination = $(pagination);
+
+            bindPageUnloadEvent($pagination);
+
+            if (sessionExists()) {
+                recallUIState($pagination);
+                awaitPageResquests($pagination);
+                setupPaginationButton($pagination);
+            } else {
+                setup($pagination);
+            }
+        },
+
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.pagination
+         */
+        init = function ($scope) {
+            $('[data-pagination]', $scope).each(checkSession);
+        };
+
+    return {
+        init: init
+    };
+}()));