workarea-slick_slider 1.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a9b4d3295d203350d0d5bef6b77088209cd4e453dcbe2133519c68452488a90f
+  data.tar.gz: 3d056f6d1b07239464600f30d2d47fd7e807ca45ad4c5543f06e49d991d4a13c
+SHA512:
+  metadata.gz: 1f83c389a98b9deeff7a03c9d8874676cfcd09cdd560b0a74dfc888c635055d5479790c996ee9a5f21e49b93b970ab03e46fff77ceab8c14a4deb19b21947f53
+  data.tar.gz: f9f0a891f8ee7379a6327a5138d1ecfe6093cd129160d259c5e3d827325b89cc0fc484a6c4cad3087932a9425fb3a59f9495b0904579ac608bf51cd0edf17489

data/.editorconfig

@@ -0,0 +1,15 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.rb,*.haml}]
+indent_size = 2
+
+[{*.js,*.jst,*.ejs,*.scss}]
+indent_size = 4

data/.eslintrc

@@ -0,0 +1,34 @@
+{
+    "extends": "eslint:recommended",
+    "rules": {
+      "semi": [1, "always"]
+    },
+    "globals": {
+      "window": true,
+      "document": true,
+      "WORKAREA": true,
+      "$": true,
+      "jQuery": true,
+      "_": true,
+      "feature": true,
+      "JST": true,
+      "Turbolinks": true,
+      "I18n": true,
+      "Chart": true,
+      "Dropzone": true,
+      "strftime": true,
+      "Waypoint": true,
+      "wysihtml": true,
+      "LocalTime": true,
+      "describe": true,
+      "after": true,
+      "afterEach": true,
+      "before": true,
+      "beforeEach": true,
+      "it": true,
+      "expect": true,
+      "sinon": true,
+      "fixture": true,
+      "chai": true
+    }
+}

data/.gitignore

@@ -0,0 +1,10 @@
+.bundle/
+log/*.log
+pkg/
+test/dummy/db/*.sqlite3
+test/dummy/db/*.sqlite3-journal
+test/dummy/log/*.log
+test/dummy/tmp/
+Gemfile.lock
+test/dummy/public/system/
+.DS_STORE

data/.rubocop.yml

@@ -0,0 +1,8 @@
+inherit_gem:
+  workarea-ci: rubocop.yml
+
+AllCops:
+  Exclude:
+    - 'test/dummy/**/*'
+    - 'lib/workarea/slick_slider.rb'
+    - 'lib/workarea/slick_slider/**/*'

data/.scss-lint.yml

@@ -0,0 +1,188 @@
+# Extension of the default configuration:
+# https://github.com/causes/scss-lint/blob/master/config/default.yml
+
+linters:
+  Comment:
+    enabled: false
+
+  DeclarationOrder:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: new_line
+
+  EmptyRule:
+    enabled: false
+
+  HexLength:
+    enabled: true
+    style: long
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: true
+    character: space
+    width: 4
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: false
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    separate_groups: false
+    order:
+      - display
+      -
+      - position
+      - top
+      - right
+      - bottom
+      - left
+      - z-index
+      -
+      - margin
+      - margin-top
+      - margin-right
+      - margin-bottom
+      - margin-left
+      -
+      - margin-collapse
+      - margin-top-collapse
+      - margin-right-collapse
+      - margin-bottom-collapse
+      - margin-left-collapse
+      -
+      - padding
+      - padding-top
+      - padding-right
+      - padding-bottom
+      - padding-left
+      -
+      - width
+      - height
+      - max-width
+      - max-height
+      - min-width
+      - min-height
+      -
+      - float
+      - clear
+      -
+      - color
+      -
+      - font
+      - font-size
+      - font-style
+      - font-family
+      - font-weight
+      - font-variant
+      - font-smoothing
+      -
+      - line-height
+      - letter-spacing
+      - word-spacing
+      -
+      - text-align
+      - text-indent
+      - text-shadow
+      - text-overflow
+      - text-rendering
+      - text-transform
+      - text-decoration
+      - text-size-adjust
+      -
+      - word-break
+      - word-wrap
+      -
+      - white-space
+      -
+      - background
+      - background-size
+      - background-color
+      - background-image
+      - background-repeat
+      - background-position
+      - background-attachment
+      -
+      - border
+      - border-top
+      - border-right
+      - border-bottom
+      - border-left
+      -
+      - border-image
+      - border-spacing
+      - border-collapse
+      -
+      - border-color
+      - border-top-color
+      - border-right-color
+      - border-bottom-color
+      - border-left-color
+      -
+      - border-style
+      - border-top-style
+      - border-right-style
+      - border-bottom-style
+      - border-left-style
+      -
+      - border-width
+      - border-top-width
+      - border-right-width
+      - border-bottom-width
+      - border-left-width
+      -
+      - border-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+      - border-top-left-radius
+      - border-radius-topright
+      - border-radius-bottomright
+      - border-radius-bottomleft
+      - border-radius-topleft
+      -
+      - box-shadow
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_BEM
+
+  SingleLinePerSelector:
+    enabled: false
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: at_least_one_space
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  VariableForProperty:
+    enabled: true
+    properties:
+      - color
+      - font-family
+      - background-color
+
+  # These default settings may be problematic to implementors. They are not
+  # ommitted so that they may be adjusted as needed during an implementation.
+  #
+  # For documentation:
+  # https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md
+
+  DuplicateProperty:
+    enabled: true
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: [] # Add experimental CSS to this array, if needed

data/CHANGELOG.md

@@ -0,0 +1,52 @@
+Workarea Slick Slider 1.0.2 (2019-08-21)
+--------------------------------------------------------------------------------
+
+*   Open Source!
+
+
+
+Workarea Slick Slider 1.0.1 (2019-04-30)
+--------------------------------------------------------------------------------
+
+*   Updates to README
+
+    * Use haml for markup examples
+    * Provide example for mounting helper
+    * Update readme language to read better
+
+    SLICKSLIDE-12
+    Jake Beresford
+
+*   Removed arrows from CSS background image
+
+    Arrows were being rendered twice in slick slider buttons, preferred implementation is to use inline SVG.
+    Updates to CSS should not be included when upgrading this plugin as implementations have typically changed this.
+
+    SLICKSLIDE-14
+    Jake Beresford
+
+
+
+Workarea Slick Slider 1.0.0 (2018-04-11)
+--------------------------------------------------------------------------------
+
+*   Remove style guide append - this is now handled automatically by the platform
+
+    SLICKSLIDE-10
+    Jake Beresford
+
+
+Workarea Slick Slider 0.4.0 (2018-03-06)
+--------------------------------------------------------------------------------
+
+
+Workarea Slick Slider 0.3.0 (2017-11-06)
+--------------------------------------------------------------------------------
+
+
+Workarea Slick Slider 0.2.0 (2017-10-13)
+--------------------------------------------------------------------------------
+
+
+Workarea Slick Slider 0.1.0 (2017-07-13)
+--------------------------------------------------------------------------------

data/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+gemspec
+
+gem 'workarea', source: 'https://gems.weblinc.com'

data/README.md

@@ -0,0 +1,284 @@
+# Workarea Slick Slider
+
+Slick Slider plugin for the Workarea platform.
+
+This will include [Ken Wheeler's jQuery Slick](http://kenwheeler.github.io/slick/)
+in your project and make available a data attribute that will initailize a
+rotating slider on an element with several items inside of it.
+
+Example markup using haml:
+
+```haml
+%div{ data: { slick_slider: '' } }
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')
+```
+
+## Using Workarea Slick Slider
+
+Apply a `data-slick-slider` attribute to any element that is meant to become a
+slider. If no value is passed to the data attribute, then the default
+`Workarea.config.slickSlider` options will be used to init the accordion.
+
+### Modifying Options
+
+Options can be passed in to the `WORKAREA.slickSlider` module by providing a
+JSON object as the value for `data-slick-slider`. If these objects become large
+and begin cluttering your view, feel free to move them into a helper or a view
+model.
+
+The following code shows an example of creating a new helper with some slider
+configuration. Note that helpers need to be mounted in application.rb like this:
+
+```ruby
+config.to_prepare do
+  Workarea::Storefront::ApplicationController.helper(Workarea::Storefront::SliderHelper)
+end
+```
+
+```ruby
+# `app/helpers/workarea/storefront/slider_options.rb`
+
+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
+    end
+  end
+end
+```
+
+Now you can call the newly created style_guide_slider_options helper method
+as the value for `data-slick-slider` and a new slider will be rendered with the
+provided options.
+
+```haml
+%div{ data: { slick_slider: style_guide_slider_options } }
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_5')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_6')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_7')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_8')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_9')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_10')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_11')
+  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_12')
+```
+
+### Additional Options
+
+There is an additional option called `stopOnInteraction` which will permanently
+stop autoplay on your slider when it is interacted with (click or swipe event).
+By default it is set to false in `config.js`. To set this option to true provide
+the following options:
+
+```ruby
+module Workarea
+  module Storefront
+    module SliderHelper
+      def style_guide_autoplay_stop_options
+        {
+          options: {
+            autoplay: true
+          },
+          stopOnInteraction: true
+        }.to_json
+      end
+    end
+  end
+end
+```
+
+Another additional option `waitForImages` will delay the init until the images
+are loaded. This is helpful when experiencing a delay and slick automatically
+sets the height to 0 or something incorrect. This is set to false by default in
+config.js, this can be overridden for a single slider in Ruby, or for all slider
+in JS configuration.
+
+```ruby
+module Workarea
+  module Storefront
+    module SliderHelper
+      def style_guide_wait_for_images
+        {
+          waitForImages: true
+        }.to_json
+      end
+    end
+  end
+end
+```
+
+```javascript
+_.merge(WORKAREA.config.slickSlider, {
+    waitForImages: true
+});
+```
+
+## Analytics Tracking
+
+Slider Analytics gets initialized on slider init. There are 4 different types of
+events that get tracked:
+
+* Drag / Swipe on slider
+* Click on a slide
+* Click on arrow navigation
+* Click on dot navigation.
+
+### Drag/Swipe
+
+When a user drags or swipes (on mobile) a slide, a few things are tracked:
+
+1. The action (swipe)
+  The action is used to track how a user interacted with the slider
+2. The category (swipe)
+  The category is to categorize the type of action, mainly important for click actions
+3. The target slider
+  This allows the tracker to send data if there are multiple sliders on a page
+4. In which direction the user swiped (left or right)
+  This is tracked mainly to determine if a user decided to go back a slide or
+  wanted to speed up to see the next slide
+5. The slide the user ended on
+  This is tracked to determine what the user wanted to view in the slider
+
+### Clicking on a Slide
+
+When a user clicks on a particular slide these events are tracked:
+
+1. The category (click)
+  The click even is tracked to determine that only a slide was clicked
+2. The target slider
+  This allows the tracker to send data if there are multiple sliders on a page
+3. The current slide
+  Which slide was clicked, if there was a link leading to another page
+
+### Clicking on Arrow Navigation
+
+When a user drags or swipes (on mobile) a slide, a few things are tracked:
+
+1. The action (navigation click)
+  The action is used to track how a user interacted with the slider
+2. The category (click)
+  The category is to categorize the type of action, mainly important for click actions
+3. The target slider
+  This allows the tracker to send data if there are multiple sliders on a page
+4. In which direction the slider moved (left or right)
+  This is tracked mainly to determine if a user decided to go back a slide or
+  wanted to speed up to see the next slide
+5. The slide the user ended on
+  This is tracked to determine what the user wanted to view in the slider
+6. Click Target (navigation arrows)
+  This is tracked to note that the arrows were targeted
+
+### Clicking on Dots Navigation
+
+When a user drags or swipes (on mobile) a slide, a few things are tracked:
+
+1. The action (dots click)
+  The action is used to track how a user interacted with the slider
+2. The category (click)
+  The category is to categorize the type of action, mainly important for click actions
+3. The target slider
+  This allows the tracker to send data if there are multiple sliders on a page
+4. The slide the user ended on
+  This is tracked to determine what the user wanted to view in the slider
+5. Click Target (navigation dots)
+  This is tracked to note that the dots were targeted
+
+## Gotchas
+
+### Using Mobile First
+
+If using the `mobileFirst` option, you need to subtract 1 from your target
+breakpoint otherwise, options will be applied too soon. For example, when
+targeting wide devices and using mobile first you should define the breakpoint
+value as:
+
+```javascript
+  breakpoint: Workarea.config.storefront_break_points[:wide] - 1
+```
+
+If you are not using `mobileFirst`, this isn't necessary.
+
+Also when using `mobileFirst` and adding multiple breakpoints, options will need
+to be repeated if they will continue to the next breakpoint as seen in the
+"Modifying Options" example where arrows and dots needs to be repeated for it to
+show correctly in the `wide` breakpoint.
+
+## Getting Started
+
+This gem contains a rails engine that must be mounted onto a host Rails
+application.
+
+You must have access to a Workarea gems server to use this gem. Add your gems
+server credentials to Bundler:
+
+    bundle config gems.weblinc.com my_username:my_password
+
+Or set the appropriate environment variable in a shell startup file:
+
+    export BUNDLE_GEMS__WEBLINC__COM='my_username:my_password'
+
+Then add the gem to your application's Gemfile specifying the source:
+
+    # ...
+    gem 'workarea-slick_slider', source: 'https://gems.weblinc.com'
+    # ...
+
+Or use a source block:
+
+    # ...
+    source 'https://gems.weblinc.com' do
+      gem 'workarea-slick_slider'
+    end
+    # ...
+
+Update your application's bundle.
+
+    cd path/to/application
+    bundle
+
+## Workarea Platform Documentation
+
+See [http://developer.weblinc.com](http://developer.weblinc.com) for Workarea
+platform documentation.
+
+## Copyright & Licensing
+
+Copyright WebLinc 2017. All rights reserved.
+
+For licensing, contact sales@workarea.com.

data/Rakefile

@@ -0,0 +1,63 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Slick Slider'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+load 'rails/tasks/statistics.rake'
+load 'workarea/changelog.rake'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test
+
+$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
+require 'workarea/slick_slider/version'
+
+desc "Release version #{Workarea::SlickSlider::VERSION} of the gem"
+task :release do
+  host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
+
+  #Rake::Task['workarea:changelog'].execute
+  #system 'git add CHANGELOG.md'
+  #system 'git commit -m "Update CHANGELOG"'
+  #system 'git push origin HEAD'
+
+  system "git tag -a v#{Workarea::SlickSlider::VERSION} -m 'Tagging #{Workarea::SlickSlider::VERSION}'"
+  system 'git push --tags'
+
+  system "gem build workarea-slick_slider.gemspec"
+  system "gem push workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem"
+  system "gem push workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem --host #{host}"
+  system "rm workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem"
+end
+
+desc 'Run the JavaScript tests'
+ENV['TEASPOON_RAILS_ENV'] = File.expand_path('../test/dummy/config/environment', __FILE__)
+task teaspoon: 'app:teaspoon'
+
+desc 'Start a server at http://localhost:3000/teaspoon for JavaScript tests'
+task :teaspoon_server do
+  Dir.chdir("test/dummy")
+  teaspoon_env = File.expand_path('../test/teaspoon_env.rb', __FILE__)
+  system "RAILS_ENV=test TEASPOON_ENV=#{teaspoon_env} rails s"
+end

data/app/assets/images/workarea/storefront/icons/arrow_left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+    <path d="M21,27.4c0,0.4-0.2,0.8-0.5,1.1c-0.6,0.5-1.5,0.4-2-0.2L8.9,15.9l9.6-12.2c0.5-0.6,1.4-0.7,2-0.2
+    s0.7,1.4,0.2,2l-8.2,10.4l8.2,10.5C20.9,26.6,21,27.1,21,27.4z"/>
+</svg>

data/app/assets/images/workarea/storefront/icons/arrow_right.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <path d="M14.3,37c-0.4,0-0.8-0.1-1.2-0.4c-0.9-0.7-1.1-1.9-0.4-2.8l10.4-13.9L12.7,6.2c-0.7-0.9-0.5-2.1,0.4-2.8
+        c0.9-0.7,2.1-0.5,2.8,0.4l11.3,14.9c0.5,0.7,0.5,1.7,0,2.4L15.9,36.2C15.5,36.7,14.9,37,14.3,37z"/>
+</svg>