workarea-slick_slider 1.0.2

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

@@ -0,0 +1,17 @@
+(function () {
+    'use strict';
+
+    /**
+     * Config Variables
+     */
+
+    WORKAREA.config.slickSlider = {
+        options: {
+            prevArrow: JST['workarea/storefront/slick_slider/templates/slick_slider_nav_prev'](),
+            nextArrow: JST['workarea/storefront/slick_slider/templates/slick_slider_nav_next'](),
+            dotsClass: 'slick-slider__dots'
+        },
+        stopOnInteraction: false,
+        waitForImages: false
+    };
+})();

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

@@ -0,0 +1,71 @@
+/**
+ * @namespace WORKAREA.slickSlider
+ */
+WORKAREA.registerModule('slickSlider', (function () {
+    'use strict';
+
+    var checkImagesAndLoad = function(loadCount, imageCount, $slider, options) {
+            if (loadCount === imageCount) {
+                $slider.slick(options)
+                .addClass('slick-slider--images-loaded')
+                .removeClass('slick-slider--waiting-for-images');
+            }
+        },
+
+        waitForImages = function($slider, options) {
+            var $images = $('img', $slider),
+                imageCount = $images.length,
+                loadCount = 0;
+
+            $slider.addClass('slick-slider--waiting-for-images');
+            $images.each(function(index, image){
+                if ( $(image).prop('complete') ) {
+                    loadCount ++;
+                    checkImagesAndLoad(loadCount, imageCount, $slider, options);
+                } else {
+                    $(image).on('load', function() {
+                        loadCount ++;
+                        checkImagesAndLoad(loadCount, imageCount, $slider, options);
+                    });
+                }
+            });
+        },
+
+        getConfig = function(options) {
+            return _.merge({}, WORKAREA.config.slickSlider, options);
+        },
+
+        stopAutoplay = function(event) {
+            $(event.currentTarget).slick('slickPause');
+        },
+
+        initSlider = function(index, slider) {
+            var $slider = $(slider),
+                slickSettings = getConfig($slider.data('slickSlider'));
+
+            if ( slickSettings.waitForImages ) {
+                waitForImages($slider, slickSettings.options);
+            } else {
+                $slider.slick(slickSettings.options);
+            }
+
+            if (slickSettings.stopOnInteraction) {
+                $slider.on('click swipe', stopAutoplay);
+            }
+
+            WORKAREA.slickSliderAnalytics.initSliderAnalytics($slider);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.slickSlider
+         */
+        init = function ($scope) {
+            $('[data-slick-slider]', $scope).each(initSlider);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/slick_slider/modules/slick_slider_analytics.js

@@ -0,0 +1,88 @@
+/**
+ * @namespace WORKAREA.slickSliderAnalytics
+ */
+WORKAREA.registerModule('slickSliderAnalytics', (function () {
+    'use strict';
+
+    var sendSwipeAnalyticsEvent = function (changeEvent, direction, currentSlide) {
+            WORKAREA.analytics.fireCallback('sliderSwipeEvent', {
+                domEvent: 'swipe',
+                payload: {
+                    eventAction: 'swipe',
+                    eventCategory: 'swipe',
+                    eventTarget: changeEvent.delegateTarget,
+                    eventDirection: direction,
+                    eventCurrentSlide: currentSlide
+                }
+            });
+        },
+
+        swipeAnalyticsHandler = function(event, slider, direction) {
+            // Using one here allows each slide to be bound to the event only the first time the slide changes
+            // rather than continuing to be bound for later changes resulting in resending the analytics event
+            // multiple times as the slides keep changing
+            $(event.currentTarget).one('afterChange', function(changeEvent, slick, currentSlide) {
+                sendSwipeAnalyticsEvent(changeEvent, direction, currentSlide);
+            });
+        },
+
+        sendAnalytics = function(analytics) {
+            WORKAREA.analytics.fireCallback('sliderClickEvent', analytics);
+        },
+
+        setUpAnalyticsData = function(event) {
+            var analytics = {
+                    domEvent: 'click',
+                    payload: {
+                        eventCategory: 'click'
+                    }
+                };
+
+            if (event.data.target === '.slick-current') {
+                _.merge(analytics.payload, {
+                    eventTarget: event.delegateTarget,
+                    eventCurrentSlide: $(event.currentTarget).data('slickIndex')
+                });
+            } else {
+                // Using one here allows each slide to be bound to the event only the first time the slide changes
+                // rather than continuing to be bound for later changes resulting in resending the analytics event
+                // multiple times as the slides keep changing
+                $(event.delegateTarget).one('afterChange', { eventTarget: event.currentTarget, target: event.data.target }, function(changeEvent, slick, currentSlide) {
+                    analytics.payload.eventAction = 'dots click';
+
+                    if (changeEvent.data.target === '.slick-slider__nav') {
+                        analytics.payload.eventAction = 'navigation click';
+                        analytics.payload.direction = 'left';
+
+                        if ($(changeEvent.data.eventTarget).hasClass('slick-slider__nav--prev')) {
+                            analytics.payload.direction = 'right';
+                        }
+                    }
+
+                    _.merge(analytics.payload, {
+                        eventTarget: changeEvent.delegateTarget,
+                        eventClickTarget: changeEvent.data.eventTarget,
+                        eventCurrentSlide: currentSlide
+                    });
+                });
+            }
+
+            sendAnalytics(analytics);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.slickSliderAnalytics
+         */
+        initSliderAnalytics = function ($slider) {
+            $slider.on('swipe', swipeAnalyticsHandler)
+                   .on('click', '.slick-slider__nav', { target: '.slick-slider__nav' }, setUpAnalyticsData)
+                   .on('click', '.slick-slider__dots button', { target: '.slick-slider__dots button' }, setUpAnalyticsData)
+                   .on('click', '.slick-current', { target: '.slick-current' }, setUpAnalyticsData);
+        };
+
+    return {
+        initSliderAnalytics: initSliderAnalytics
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/slick_slider/templates/slick_slider_nav_next.jst.ejs.ruby

@@ -0,0 +1,5 @@
+%Q{
+    <button type="button" class="slick-slider__nav slick-slider__nav--next">
+        #{ inline_svg("workarea/storefront/icons/arrow_right.svg", class: 'slick-slider__nav-icon slick-slider__nav-icon--right', title: I18n.t('workarea.storefront.slick_slider.next')) }
+    </button>
+}

data/app/assets/javascripts/workarea/storefront/slick_slider/templates/slick_slider_nav_prev.jst.ejs.ruby

@@ -0,0 +1,5 @@
+%Q{
+    <button type="button" class="slick-slider__nav slick-slider__nav--prev">
+        #{ inline_svg("workarea/storefront/icons/arrow_left.svg", class: 'slick-slider__nav-icon slick-slider__nav-icon--left', title: I18n.t('workarea.storefront.slick_slider.previous')) }
+    </button>
+}

data/app/assets/stylesheets/workarea/storefront/slick_slider/components/_slick_slider.scss

@@ -0,0 +1,132 @@
+/*------------------------------------*\
+    #SLICK-SLIDER
+\*------------------------------------*/
+
+$slick-slider-elements: (
+    slick-list,
+    slick-slider__nav,
+    slick-slider__dots
+) !default;
+
+$slick-slider-dots-width:         $font-size !default;
+$slick-slider-dots-color:         $link-color !default;
+$slick-slider-dots-bg-color:      $background-color !default;
+$slick-slider-dots-border-width:  2px !default;
+$slick-slider-dots-spacing:       2 * $spacing-unit !default;
+
+$slick-slider-nav-color:          $font-color !default;
+$slick-slider-nav-bg-color:       $transparent !default;
+$slick-slider-arrow-size:         24px !default;
+$slick-slider-arrows-offset:      0 !default;
+
+$slick-slider-active-color:    $slick-slider-dots-color !default;
+
+.slick-slider {}
+
+.slick-slider--waiting-for-images {
+    opacity: 0;
+}
+
+.slick-slider--images-loaded {
+    opacity: 1;
+    transition: opacity 0.15s ease-in;
+}
+
+        .slick-slider__image-wrapper {}
+
+            .slick-slider__image {}
+
+    .slick-slider__nav {
+        @extend %button-reset;
+        @include center('vertical');
+        z-index: index($slick-slider-elements, slick-slider__nav);
+        background: $slick-slider-nav-bg-color;
+        cursor: pointer;
+    }
+
+    .slick-slider__nav--prev {
+        left: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: $slick-slider-arrows-offset;
+            right: 50%;
+            left: auto;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+    .slick-slider__nav--next {
+        right: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: auto;
+            right: 50%;
+            bottom: $slick-slider-arrows-offset;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+        .slick-slider__nav-icon {
+            width: $slick-slider-arrow-size;
+            height: $slick-slider-arrow-size;
+            fill: $slick-slider-nav-color;
+        }
+
+        .slick-slider__nav-icon--left  {}
+        .slick-slider__nav-icon--right { background-image: image-url('workarea/storefront/icons/arrow_right.svg'); }
+
+
+    .slick-slider__dots {
+        @extend %inline-list;
+        z-index: index($slick-slider-elements, slick-slider__dots);
+        text-align: center;
+
+        .slick-vertical & {
+            @include center($to: vertical);
+            left: -100%;
+        }
+
+        li {
+            margin: $slick-slider-dots-spacing;
+
+            .slick-vertical & {
+                display: block;
+            }
+        }
+
+        button {
+            display: block;
+            padding: 0;
+            width:  $slick-slider-dots-width;
+            height: $slick-slider-dots-width;
+            font-size: 0;
+            background: $slick-slider-dots-bg-color;
+            border: $slick-slider-dots-border-width solid $slick-slider-dots-color;
+            border-radius: 50%;
+            cursor: pointer;
+            outline: 0;
+
+            &:hover,
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+
+
+/*------------------------------------*\
+    #SLICK-LIST
+\*------------------------------------*/
+
+.slick-list { z-index: index($slick-slider-elements, slick-list); }
+
+
+/*------------------------------------*\
+    #SLICK-ACTIVE
+\*------------------------------------*/
+
+.slick-active {
+    button {
+        background: $slick-slider-active-color;
+    }
+}

data/app/helpers/workarea/storefront/slider_helper.rb

@@ -0,0 +1,57 @@
+module Workarea
+  module Storefront
+    module SliderHelper
+      def style_guide_slider_options
+        {
+          options: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            autoplay: true,
+            mobileFirst: true,
+            responsive: [
+              {
+                breakpoint: Workarea.config.storefront_break_points[:medium] - 1,
+                settings: {
+                  arrows: false,
+                  dots: true,
+                  slidesToShow: 2,
+                  slidesToScroll: 2
+                }
+              },
+              {
+                breakpoint: Workarea.config.storefront_break_points[:wide] - 1,
+                settings: {
+                  arrows: false,
+                  dots: true,
+                  slidesToShow: 4,
+                  slidesToScroll: 4
+                }
+              }
+            ]
+          }
+        }.to_json
+      end
+
+      def style_guide_autoplay_stop_options
+        {
+          options: {
+            autoplay: true,
+            autoplaySpeed: 2000,
+            pauseOnHover: false
+          },
+          stopOnInteraction: true
+        }.to_json
+      end
+
+      def style_guide_slider_wait_for_images
+        {
+          options: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+          },
+          waitForImages: true
+        }.to_json
+      end
+    end
+  end
+end

data/app/views/workarea/storefront/style_guides/components/_slick_slider.html.haml

@@ -0,0 +1,48 @@
+#slick-slider.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'slick_slider')
+
+  %p Displays a set of images as a slider
+  %p
+    Use
+    = link_to 'Ken Wheeler\'s Slick', 'http://kenwheeler.github.io/slick/'
+    to see additional options
+
+  %p Default Slider Options:
+
+  .style-guide__example-block
+
+    .slick-slider{ data: { slick_slider: '' } }
+
+      - (1..4).each do |i|
+        .slick-slider__image-wrapper= image_tag('workarea/storefront/style_guide_light_banner.png', alt: "Image #{i}", class: 'slick-slider__image')
+
+
+  %p Custom Slider Options added inside of helper:
+
+  .style-guide__example-block
+
+    .slick-slider{ data: { slick_slider: style_guide_slider_options } }
+
+      - (1..8).each do |i|
+        .slick-slider__image-wrapper= image_tag('workarea/storefront/style_guide_product.jpg', alt: "Image #{i}", class: 'slick-slider__image')
+
+
+  %p Slider Options with Stop Autoplay on Interaction (click or slide):
+
+  .style-guide__example-block
+
+    .slick-slider{ data: { slick_slider: style_guide_autoplay_stop_options } }
+
+      - (1..4).each do |i|
+        .slick-slider__image-wrapper= image_tag('workarea/storefront/style_guide_light_banner.png', alt: "Image #{i}", class: 'slick-slider__image')
+
+
+  %p Custom Slider That Waits for Images
+
+  .style-guide__example-block
+
+    .slick-slider{ data: { slick_slider: style_guide_slider_wait_for_images } }
+
+      - (1..4).each do |i|
+        .slick-slider__image-wrapper= image_tag('workarea/storefront/style_guide_light_banner.png', alt: "Image #{i}", class: 'slick-slider__image')

data/bin/rails

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/slick_slider/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require "action_controller/railtie"
+require "action_view/railtie"
+require "action_mailer/railtie"
+require "rails/test_unit/railtie"
+require "sprockets/railtie"
+
+require 'rails/engine/commands'

data/config/initializers/appends.rb

@@ -0,0 +1,33 @@
+module Workarea
+  Plugin.append_javascripts(
+    'storefront.templates',
+    'workarea/storefront/slick_slider/templates/slick_slider_nav_prev',
+    'workarea/storefront/slick_slider/templates/slick_slider_nav_next'
+  )
+
+  Plugin.append_javascripts(
+    'storefront.config',
+    'workarea/storefront/slick_slider/config'
+  )
+
+  Plugin.append_javascripts(
+    'storefront.dependencies',
+    'jquery.slick'
+  )
+
+  Plugin.append_javascripts(
+    'storefront.modules',
+    'workarea/storefront/slick_slider/modules/slick_slider',
+    'workarea/storefront/slick_slider/modules/slick_slider_analytics'
+  )
+
+  Plugin.append_stylesheets(
+    'storefront.dependencies',
+    'slick'
+  )
+
+  Plugin.append_stylesheets(
+    'storefront.components',
+    'workarea/storefront/slick_slider/components/slick_slider'
+  )
+end

data/config/locales/en.yml

@@ -0,0 +1,6 @@
+en:
+  workarea:
+    storefront:
+      slick_slider:
+        previous: Previous
+        next: Next

data/lib/workarea/slick_slider/engine.rb

@@ -0,0 +1,12 @@
+module Workarea
+  module SlickSlider
+    class Engine < ::Rails::Engine
+      include Workarea::Plugin
+      isolate_namespace Workarea::SlickSlider
+
+      config.to_prepare do
+        Storefront::ApplicationController.helper(Storefront::SliderHelper)
+      end
+    end
+  end
+end

data/lib/workarea/slick_slider/version.rb

@@ -0,0 +1,5 @@
+module Workarea
+  module SlickSlider
+    VERSION = "1.0.2"
+  end
+end

data/lib/workarea/slick_slider.rb

@@ -0,0 +1,13 @@
+require 'workarea'
+require 'workarea/storefront'
+require 'workarea/admin'
+
+require 'workarea/slick_slider/engine'
+require 'workarea/slick_slider/version'
+
+require 'jquery-slick-rails'
+
+module Workarea
+  module SlickSlider
+  end
+end

data/script/admin_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:admin

data/script/ci

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bundle exec workarea-lint
+bundle exec workarea-audit
+bin/rails test test/**/*_test.rb

data/script/core_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:core

data/script/plugins_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:plugins

data/script/storefront_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:storefront

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks

data/test/dummy/app/assets/config/manifest.js

@@ -0,0 +1,4 @@
+
+//= link_tree ../images
+//= link_directory ../javascripts .js
+//= link_directory ../stylesheets .css

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/test/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery with: :exception
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/jobs/application_job.rb

@@ -0,0 +1,2 @@
+class ApplicationJob < ActiveJob::Base
+end

data/test/dummy/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: 'from@example.com'
+  layout 'mailer'
+end

data/test/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dummy</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>