workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,44 @@
+/**
+ * @namespace WORKAREA.toggleClassButton
+ */
+WORKAREA.registerModule('toggleClassButton', (function () {
+    'use strict';
+
+    var handleToggleEvent = function (event) {
+            var $button = $(event.currentTarget),
+                data = $button.data('toggleClassButton');
+
+            // Prevent anchor default event only.
+            if ($button.is('a')) { event.preventDefault(); }
+
+            if (data.closest === true) {
+                updateClosest(data.target, data.class, $button);
+                return;
+            }
+
+            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 another 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/product_quickview/templates/quickview_button.jst.ejs

@@ -0,0 +1,3 @@
+<div class="quickview-button">
+    <a class="button button--large" rel="nofollow" data-analytics='<%= analytics_data %>' href="<%= url %>"><%= I18n.t('workarea.storefront.products.quick_view') %></a>
+</div>

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__header', 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,15 @@
+<div class="reviews__sort">
+    <div class="property property--responsive">
+        <label class="property__name"><span class="property__text">Sort By</span></label>
+        <div class="value">
+            <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>
+</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 button--small" 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 @@
+<button class="button button--full mobile-filters-nav__close-button" type="button">
+    <%= content %>
+</button>

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">
+        <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/user_welcome.jst.ejs

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

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

@@ -0,0 +1,169 @@
+/*------------------------------------*\
+    #UI-DIALOG
+\*------------------------------------*/
+
+$ui-dialog-bg-color:           $background-color !default;
+$ui-dialog-titlebar-bg-color:  $dialog-header-bacground-color !default;
+
+$ui-dialog-shadow:             0 0 0 100vh $dialog-overlay-color !default;
+$ui-dialog-content-height:     90vh !default;
+
+
+.ui-dialog {
+    position: absolute;
+    z-index: index($components, ui-dialog);
+    padding: $spacing-unit * 2;
+    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 {
+        position: absolute;
+        top: $spacing-unit * 2;
+        right: $spacing-unit / 2;
+        line-height: 1;
+        text-align: right;
+        background: $ui-dialog-titlebar-bg-color;
+
+        @include respond-to($medium-breakpoint) {
+            right: $spacing-unit * 2;
+        }
+
+        .ui-dialog-image & {}
+
+        .ui-dialog-loading & {
+            display: none;
+        }
+    }
+
+        .ui-dialog-title {
+            display: none;
+        }
+
+        .ui-dialog-titlebar-close {
+            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;
+            }
+        }
+
+    .ui-dialog-content {
+        padding: 0 ($spacing-unit * 2) $spacing-unit;
+        // 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.
+        max-height: $ui-dialog-content-height !important;
+        overflow: auto;
+
+        @include respond-to($medium-breakpoint) {
+            padding: 0 ($spacing-unit * 5) $spacing-unit;
+        }
+
+        .ui-dialog-image & {
+            padding: 0;
+        }
+
+        .ui-dialog-loading & {
+            padding: 50px 0;
+        }
+
+        h1 {
+            text-align: center;
+        }
+    }
+
+
+.ui-dialog-image img {
+    display: block;
+}
+
+.ui-dialog-loading {}

data/app/assets/stylesheets/workarea/storefront/base/_forms.scss

@@ -0,0 +1,113 @@
+/*------------------------------------*\
+    #FORMS
+\*------------------------------------*/
+
+$forms-color: $forms-color !default;
+$forms-bg-color: $forms-bg-color !default;
+$forms-disabled-color: $forms-disabled-color !default;
+$forms-disabled-bg-color: $forms-disabled-bg-color !default;
+$forms-placeholder-color: $forms-placeholder-color !default;
+
+$forms-disabled-opacity:  0.5 !default; // TODO: v4 Remove
+
+
+/**
+ * Provide default margins for form containment elements.
+ */
+fieldset, legend {
+    margin-bottom: $vertical-margin;
+}
+
+
+/**
+ * Provide consistent padding for fieldsets
+ */
+fieldset {
+    padding: $spacing-unit;
+}
+
+
+/**
+ * Set a larger default font size for basic form controls
+ * For accessibility purposes, all input types are highlighted on focus.
+ */
+select,
+input, textarea {
+    color: $forms-color;
+    font-size: $form-control-font-size;
+    background-color: $forms-bg-color;
+}
+
+label {
+    font-size: $form-control-font-size;
+}
+
+
+/**
+ * Ensure select menus cannot exceed with width of their parents.
+ * We use a trick on mobile to let the select gracefully truncates
+ * his content.
+ *
+ * @url https://stackoverflow.com/a/10795269/1538101
+ */
+select {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 0;
+
+    @include respond-to($medium-breakpoint) {
+        width: auto;
+    }
+}
+
+
+/**
+ * Ensure text within in a `textarea` displays at the top of the element now
+ * that they can be wrapped within a `display: table-cell` element.
+ */
+textarea {
+    vertical-align: baseline;
+}
+
+
+/**
+ * Ensure form controls in OSX will look more consistent with other OSes that do
+ * not utilize sub-pixel anti-aliasing.
+ */
+select,
+button,
+input, textarea {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing:  antialiased;
+}
+
+
+/**
+ * Show clear indication that a form control is not interactive by changing the
+ * cursor:
+ *
+ * 1. if the element itself is disabled or readonly
+ * 2. if the fieldset wrapping the element is disabled
+ */
+button,
+input, textarea,
+select, optgroup, option {
+    &[disabled], &[readonly], /* [1] */
+    fieldset[disabled] & { /* [2] */
+        color: $forms-disabled-color;
+        background-color: $forms-disabled-bg-color;
+        cursor: not-allowed;
+    }
+}
+
+
+/**
+ * Set default color for elements using `[placeholder]` attributes.
+ *
+ * 1. becaue normalize thinks a 54% opacity on placeholders helps, somehow.
+ */
+::placeholder,
+input::placeholder {
+    color: $forms-placeholder-color;
+    opacity: 1; /* [1] */
+}