workarea-haven_theme 1.3.0

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

@@ -0,0 +1,59 @@
+/**
+ * @namespace WORKAREA.productDetailTabs
+ */
+WORKAREA.registerModule('productDetailTabs', (function () {
+    'use strict';
+
+    var scrollToElement = function ($element) {
+            $('html, body').animate({
+                scrollTop: $element.offset().top - WORKAREA.config.productDetailTabs.topOffset
+            }, WORKAREA.config.productDetailTabs.animationSpeed);
+        },
+
+        closeOverlay = function ($overlay) {
+            $overlay.removeClass('product-detail-container__section--open-overlay');
+        },
+
+        openOverlay = function ($eventTarget) {
+            $eventTarget.addClass('product-detail-container__section--open-overlay');
+        },
+
+        isMobile = function() {
+            return WORKAREA.breakPoints.currentlyLessThan('medium');
+        },
+
+        handleCloseOverlayClick = function(event) {
+            var $button = $(event.target),
+            $overlay = $button.closest('.product-detail-container__section--open-overlay');
+
+            closeOverlay($overlay);
+        },
+
+        handleClick = function(event) {
+            var $targetElement = $(event.target.hash);
+
+            if (_.isEmpty($targetElement)) { return; }
+
+            event.preventDefault();
+
+            if (isMobile()) {
+                openOverlay($targetElement);
+            } else {
+                scrollToElement($targetElement);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.productDetailTabs
+         */
+        init = function ($scope) {
+            $('[data-product-detail-tabs]', $scope).on('click', handleClick);
+            $('[data-product-detail-tabs-close-overlay]', $scope).on('click', handleCloseOverlayClick);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,56 @@
+/**
+ * @namespace WORKAREA.quantityControl
+ */
+WORKAREA.registerModule('quantityControl', (function () {
+    'use strict';
+
+    var handleQtyEvent = function (event) {
+            var $button = $(event.currentTarget),
+                data = $button.data('quantityControl'),
+                $qtyInput = $button.closest('form').find('.quantity-control__input'),
+                currentQty = parseInt($qtyInput.val()),
+                changeDirection = data.direction,
+                autoSubmit = data.autosubmit || false;
+
+            event.preventDefault();
+
+            updateQty($qtyInput, calculateQty(currentQty, changeDirection));
+
+            if(autoSubmit) {
+                _.delay(submitForm, WORKAREA.config.havenTheme.quantityControl.autoSubmitDelay, $qtyInput);
+            }
+        },
+
+        calculateQty = function(currentQty, changeDirection) {
+            if (changeDirection === 'inc') {
+                return currentQty + 1;
+            } else {
+                return currentQty > 0 ? currentQty - 1 : currentQty;
+            }
+        },
+
+        updateQty = function ($qtyInput, newQty) {
+            $qtyInput.val(newQty);
+        },
+
+        submitForm = function($qtyInput) {
+            var $form = $qtyInput.closest('form');
+
+            if($form.valid()) {
+                $form.submit();
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.quantityControl
+         */
+        init = function ($scope) {
+            $('[data-quantity-control]', $scope).on('click', handleQtyEvent);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,56 @@
+/**
+ * @namespace WORKAREA.searchButtons
+ */
+WORKAREA.registerModule('searchButtons', (function () {
+    'use strict';
+
+    var searchOpen = function ($search) {
+            return $search.hasClass('search--open');
+        },
+
+        closeSearch = function($search) {
+            $search.removeClass('search--open');
+        },
+
+        openSearch = function ($search) {
+            $search.addClass('search--open');
+        },
+
+        focusOnSearchInput = function ($search) {
+            var $searchInput = $search.find('.text-box');
+            $searchInput.trigger('focus');
+        },
+
+        closeSearchIfOpen = function () {
+            var $search = $('#search');
+
+            if (searchOpen($search)) {
+                closeSearch($search);
+            }
+        },
+
+        searchButtonClicked = function() {
+            var $search = $('#search');
+
+            if (searchOpen($search)) {
+                closeSearch($search);
+            } else {
+                openSearch($search);
+                focusOnSearchInput($search);
+            }
+        },
+
+        init = function ($scope) {
+            $('[data-search-button]', $scope).on('click', searchButtonClicked);
+        };
+
+    $(document).keyup(function (e) {
+        if (e.keyCode === 27) { // escape key maps to keycode `27`
+            closeSearchIfOpen();
+        }
+    });
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,43 @@
+/**
+ * @namespace WORKAREA.toggleClassButton
+ */
+WORKAREA.registerModule('toggleClassButton', (function () {
+    'use strict';
+
+    var handleToggleEvent = function (event) {
+            var $button = $(event.currentTarget),
+                data = $button.data('toggleClassButton');
+
+            if (data.closest === true) {
+                updateClosest(data.target, data.class, $button);
+                return;
+            }
+
+            event.preventDefault();
+
+            updateClass(data.target, data.class);
+        },
+
+        updateClass = function (toggleTarget, className) {
+            $(toggleTarget).toggleClass(className);
+        },
+
+        updateClosest = function (toggleTarget, className, $button) {
+            $button.closest(toggleTarget).toggleClass(className);
+        },
+
+        /**
+         * Module Init
+         * Add a class to anoter element on click
+         * Accepts: data{'target': 'x', class: 'y', closest: boolean}
+         */
+
+        init = function ($scope) {
+            $('[data-toggle-class-button]', $scope)
+                .on('click', handleToggleEvent);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,38 @@
+/**
+ * @namespace WORKAREA.userWelcomePlaceholders
+ */
+WORKAREA.registerModule('userWelcomePlaceholders', (function () {
+    'use strict';
+
+    var userWelcomeTemplate = JST['workarea/storefront/templates/user_welcome'],
+
+        injectUserWelcomeMessage = function (currentUser, index, element) {
+            $(element).replaceWith(userWelcomeTemplate({
+                username: currentUser.first_name
+            }));
+        },
+
+        testPlaceholders = function ($scope, currentUser) {
+            $('[data-user-welcome-placeholder]', $scope).each(_.partial(injectUserWelcomeMessage, currentUser));
+        },
+
+        testCurrentUser = function ($scope, currentUser) {
+            if (!currentUser.logged_in) { return; }
+
+            testPlaceholders($scope, currentUser);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.userWelcomePlaceholders
+         */
+        init = function ($scope) {
+            WORKAREA.currentUser.gettingUserData
+            .done(_.partial(testCurrentUser, $scope));
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/reviews/modules/product_reviews_sort_menus.js

@@ -0,0 +1,82 @@
+/**
+ * @namespace WORKAREA.productReviewsSortMenus
+ */
+WORKAREA.registerModule('productReviewsSortMenus', (function () {
+    'use strict';
+
+    var insertSortSelectBox = function (index, section) {
+            $('.reviews__sort', section).append(
+                JST['workarea/storefront/reviews/templates/sort_by_property']()
+            );
+        },
+
+        sortNewToOld = function ($reviews) {
+            return _.sortBy($reviews, function (review) {
+                return -($(review).data('productReviewSectionEntry').createdAt);
+            });
+        },
+
+        sortOldToNew = function ($reviews) {
+            return _.sortBy($reviews, function (review) {
+                return $(review).data('productReviewSectionEntry').createdAt;
+            });
+        },
+
+
+        sortHighToLow = function ($reviews) {
+            return _.sortBy($reviews, function (review) {
+                return -($(review).data('productReviewSectionEntry').rating);
+            });
+        },
+
+        sortLowToHigh = function ($reviews) {
+            return _.sortBy($reviews, function (review) {
+                return $(review).data('productReviewSectionEntry').rating;
+            });
+        },
+
+        handleSortSelectChange = function (event) {
+            var $reviews = $(
+                    '[data-product-review-section-entry]', event.delegateTarget
+                ),
+
+                action = $(event.currentTarget).val(),
+
+                actions = {
+                    oldest: function () {
+                        return sortOldToNew($reviews);
+                    },
+                    newest: function () {
+                        return sortNewToOld($reviews);
+                    },
+                    lowest: function () {
+                        return sortLowToHigh($reviews);
+                    },
+                    highest: function () {
+                        return sortHighToLow($reviews);
+                    }
+                };
+
+            $('.reviews__review-group', event.delegateTarget)
+            .html(actions[action]());
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.productReviewsSortMenus
+         */
+        init = function ($scope) {
+            $('.reviews', $scope)
+            .each(insertSortSelectBox)
+            .on(
+                'change',
+                '[data-product-reviews-sort-menu]',
+                handleSortSelectChange
+            );
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/reviews/templates/sort_by_property.jst.ejs

@@ -0,0 +1,13 @@
+<div class="property">
+    <label class="property__name"><span class="property__text">Sort By</span></label>
+    <div class="value value--block">
+        <div class="styled-select">
+            <select data-product-reviews-sort-menu="">
+                <option value="newest" selected>Most Recent</option>
+                <option value="oldest">Oldest First</option>
+                <option value="highest">Rating: High to Low</option>
+                <option value="lowest">Rating: Low to High</option>
+            </select>
+        </div>
+    </div>
+</div>

data/app/assets/javascripts/workarea/storefront/templates/back_to_top_button.jst.ejs

@@ -0,0 +1,3 @@
+<a href="#top" class="back-to-top-button button" id="back-to-top-button">
+    <%= I18n.t('workarea.storefront.searches.back_to_top') %>
+</a>

data/app/assets/javascripts/workarea/storefront/templates/log_out_link.jst.ejs

@@ -0,0 +1 @@
+<li class="account-menu__item"><a href="<%= WORKAREA.routes.storefront.logoutPath() %>" data-analytics="{'event':'logout', 'domEvent':'click'}" data-method="delete" class="account-menu__logout-link"><%= I18n.t('workarea.storefront.users.logout') %></a></li>

data/app/assets/javascripts/workarea/storefront/templates/mobile_filters_nav_close_button.jst.ejs

@@ -0,0 +1,3 @@
+<span class="mobile-filters-nav__close-action">
+    <%= content %>
+</span>

data/app/assets/javascripts/workarea/storefront/templates/optional_field_prompt.jst.ejs

@@ -0,0 +1,8 @@
+<p><button type='button' class='button button--secondary button--small'>
+  <%= text %>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="button__icon">
+    <title>plus</title>
+    <polygon points="1 6.63 1 9.13 6.75 9.13 6.75 14.88 9.25 14.88 9.25 9.13 15 9.13 15 6.63 9.25 6.63 9.25 0.88 6.75 0.88 6.75 6.63 1 6.63"
+    />
+  </svg>
+</button></p>

data/app/assets/javascripts/workarea/storefront/templates/saved_addresses_property.jst.ejs

@@ -0,0 +1,23 @@
+<div class="property">
+    <label for="saved_addresses_<%= counter %>" class="property__name">
+        <span><%= I18n.t('workarea.storefront.checkouts.saved_addresses') %></span>
+    </label>
+    <div class="value value--block">
+        <div class="styled-select">
+            <select id="saved_addresses_<%= counter %>" name="saved_addresses_<%= counter %>">
+                <option value="" selected><%= I18n.t('workarea.storefront.checkouts.select_an_address') %></option>
+                <% _.forEach(addresses, function(address) { %>
+                    <option value="<%= address._id %>">
+                        <%= address.first_name %>
+                        <%= address.last_name %>
+                        <%= address.street %>
+                        <%= address.street_2 %>
+                        <%= address.city %>
+                        <%= address.region %>
+                        <%= address.postal_code %>
+                    </option>
+                <% }); %>
+            </select>
+        </div>
+    </div>
+</div>

data/app/assets/javascripts/workarea/storefront/templates/ui_menu_item.jst.ejs

@@ -0,0 +1,9 @@
+<!-- TODO: Move this to storefront once v3.3 is released -->
+<li class="ui-menu-item ui-menu-item--<%= type %>">
+  <span class="ui-menu-item-wrapper">
+    <% if (image) { %>
+      <img class="ui-menu-item__image" src="<%= image %>" alt="">
+    <% } %>
+    <span class="ui-menu-item__text"><%= label %></span>
+  </span>
+</li>

data/app/assets/javascripts/workarea/storefront/templates/user_welcome.jst.ejs

@@ -0,0 +1,7 @@
+<h4 class="account-menu__heading">
+<% if(_.isEmpty(username)) { %>
+  <%= I18n.t('workarea.storefront.users.welcome_generic') %></h4>
+<% } else { %>
+  <%= I18n.t('workarea.storefront.users.welcome_name', { name: username }) %>
+<% } %>
+</h4>

data/app/assets/stylesheets/jquery_ui/storefront/_ui_autocomplete.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    #UI-AUTOCOMPLETE
+\*------------------------------------*/
+
+$ui-autocomplete-bg-color:  $transparent !default;
+
+
+.ui-autocomplete {
+    @extend %list-reset;
+    z-index: index($components, ui-autocomplete);
+    padding: $spacing-unit;
+    background: $ui-autocomplete-bg-color;
+}

data/app/assets/stylesheets/jquery_ui/storefront/_ui_dialog.scss

@@ -0,0 +1,168 @@
+/*------------------------------------*\
+    #UI-DIALOG
+\*------------------------------------*/
+
+$ui-dialog-bg-color: $background-color !default;
+$ui-dialog-loading-background-color: $transparent !default;
+$ui-dialog-titlebar-bg-color:  $ui-dialog-titlebar-bg-color !default;
+$ui-dialog-shadow: 0 6px 8px 0 $black-alpha-50 !default;
+$ui-dialog-content-height: 90vh !default;
+$ui-dialog-close-button-offset: $spacing-unit * -4 !default;
+
+
+.ui-dialog {
+    position: absolute;
+    z-index: index($components, ui-dialog);
+    max-height: 100vh;
+    background: $ui-dialog-bg-color;
+    box-shadow: $ui-dialog-shadow;
+    outline: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    .ui-draggable-handle {
+        cursor: move;
+        touch-action: none;
+    }
+
+    .ui-resizable-handle {
+        display: block;
+        position: absolute;
+        font-size: 0.1px;
+        touch-action: none;
+    }
+
+    .ui-resizable-n {
+        top: -5px;
+        left: 0;
+        width: 100%;
+        height: 7px;
+        cursor: n-resize;
+    }
+
+    .ui-resizable-s {
+        bottom: -5px;
+        left:    0;
+        width: 100%;
+        height: 7px;
+        cursor: s-resize;
+    }
+
+    .ui-resizable-e {
+        top:    0;
+        right: -5px;
+        width: 7px;
+        height: 100%;
+        cursor: e-resize;
+    }
+
+    .ui-resizable-w {
+        top:   0;
+        left: -5px;
+        width: 7px;
+        height: 100%;
+        cursor: w-resize;
+    }
+
+    .ui-resizable-se {
+        right:  -5px;
+        bottom: -5px;
+        width:  12px;
+        height: 12px;
+        cursor: se-resize;
+    }
+
+    .ui-resizable-sw {
+        bottom: -5px;
+        left:   -5px;
+        width:  9px;
+        height: 9px;
+        cursor: sw-resize;
+    }
+
+    .ui-resizable-nw {
+        top:  -5px;
+        left: -5px;
+        width:  9px;
+        height: 9px;
+        cursor: nw-resize;
+    }
+
+    .ui-resizable-ne {
+        top:   -5px;
+        right: -5px;
+        width:  9px;
+        height: 9px;
+        cursor: ne-resize;
+    }
+}
+
+    .ui-dialog-titlebar {
+        line-height: 1;
+        text-align: right;
+        background: $ui-dialog-titlebar-bg-color;
+
+        .ui-dialog-image & {
+            position: absolute;
+            top:   0;
+            right: 0;
+        }
+
+        .ui-dialog-loading & {
+            display: none;
+        }
+    }
+
+        .ui-dialog-title {
+            display: none;
+        }
+
+        .ui-dialog-titlebar-close {
+            position: absolute;
+            top: $ui-dialog-close-button-offset;
+            padding: 0;
+            font-size: 0;
+            line-height: 1;
+            background: none;
+            border: 0;
+            cursor: pointer;
+
+            .ui-button-icon {
+                @include svg('dialog_close.svg', 32px);
+                padding: $spacing-unit;
+                cursor: pointer;
+            }
+        }
+
+    .ui-dialog-content {
+        padding: $spacing-unit * 2;
+        // NOTE: Because jQuery UI generates the .ui-dialog-content HTML with
+        // an inline style that sets `max-height: none`, we need the
+        // `!important` designation here to properly override.
+        // scss-lint:disable ImportantRule
+        max-height: $ui-dialog-content-height !important;
+        overflow: auto;
+
+        .ui-dialog-add-to-cart &,
+        .ui-dialog-image & {
+            padding: 0;
+        }
+
+        .ui-dialog-loading & {
+            padding: 50px 0;
+        }
+    }
+
+
+.ui-dialog-image img {
+    display: block;
+}
+
+.ui-dialog-loading {
+    width: 100vw;
+    height: 100vh;
+    background-color: $ui-dialog-loading-background-color;
+    box-shadow: none;
+}