workarea-slick_slider 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.editorconfig +15 -0
- data/.eslintrc +34 -0
- data/.gitignore +10 -0
- data/.rubocop.yml +8 -0
- data/.scss-lint.yml +188 -0
- data/CHANGELOG.md +52 -0
- data/Gemfile +5 -0
- data/README.md +284 -0
- data/Rakefile +63 -0
- data/app/assets/images/workarea/storefront/icons/arrow_left.svg +4 -0
- data/app/assets/images/workarea/storefront/icons/arrow_right.svg +4 -0
- data/app/assets/javascripts/workarea/storefront/slick_slider/config.js +17 -0
- data/app/assets/javascripts/workarea/storefront/slick_slider/modules/slick_slider.js +71 -0
- data/app/assets/javascripts/workarea/storefront/slick_slider/modules/slick_slider_analytics.js +88 -0
- data/app/assets/javascripts/workarea/storefront/slick_slider/templates/slick_slider_nav_next.jst.ejs.ruby +5 -0
- data/app/assets/javascripts/workarea/storefront/slick_slider/templates/slick_slider_nav_prev.jst.ejs.ruby +5 -0
- data/app/assets/stylesheets/workarea/storefront/slick_slider/components/_slick_slider.scss +132 -0
- data/app/helpers/workarea/storefront/slider_helper.rb +57 -0
- data/app/views/workarea/storefront/style_guides/components/_slick_slider.html.haml +48 -0
- data/bin/rails +18 -0
- data/config/initializers/appends.rb +33 -0
- data/config/locales/en.yml +6 -0
- data/lib/workarea/slick_slider/engine.rb +12 -0
- data/lib/workarea/slick_slider/version.rb +5 -0
- data/lib/workarea/slick_slider.rb +13 -0
- data/script/admin_ci +9 -0
- data/script/ci +11 -0
- data/script/core_ci +9 -0
- data/script/plugins_ci +9 -0
- data/script/storefront_ci +9 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/config/manifest.js +4 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/controllers/concerns/.keep +0 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/jobs/application_job.rb +2 -0
- data/test/dummy/app/mailers/application_mailer.rb +4 -0
- data/test/dummy/app/models/concerns/.keep +0 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/app/views/layouts/mailer.html.erb +13 -0
- data/test/dummy/app/views/layouts/mailer.text.erb +1 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/bin/setup +34 -0
- data/test/dummy/bin/update +29 -0
- data/test/dummy/config/application.rb +28 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/cable.yml +9 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +54 -0
- data/test/dummy/config/environments/production.rb +86 -0
- data/test/dummy/config/environments/test.rb +43 -0
- data/test/dummy/config/initializers/application_controller_renderer.rb +6 -0
- data/test/dummy/config/initializers/assets.rb +11 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +5 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/new_framework_defaults.rb +21 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/workarea.rb +5 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/puma.rb +47 -0
- data/test/dummy/config/routes.rb +5 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/config/spring.rb +6 -0
- data/test/dummy/config.ru +5 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/apple-touch-icon-precomposed.png +0 -0
- data/test/dummy/public/apple-touch-icon.png +0 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/javascripts/fixtures/slick_slider.html.haml +3 -0
- data/test/javascripts/fixtures/slick_slider_with_options.html.haml +3 -0
- data/test/javascripts/slick_slider_spec.js +37 -0
- data/test/javascripts/spec_helper.js +2 -0
- data/test/teaspoon_env.rb +10 -0
- data/test/test_helper.rb +10 -0
- data/workarea-slick_slider.gemspec +23 -0
- metadata +159 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: a9b4d3295d203350d0d5bef6b77088209cd4e453dcbe2133519c68452488a90f
|
4
|
+
data.tar.gz: 3d056f6d1b07239464600f30d2d47fd7e807ca45ad4c5543f06e49d991d4a13c
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 1f83c389a98b9deeff7a03c9d8874676cfcd09cdd560b0a74dfc888c635055d5479790c996ee9a5f21e49b93b970ab03e46fff77ceab8c14a4deb19b21947f53
|
7
|
+
data.tar.gz: f9f0a891f8ee7379a6327a5138d1ecfe6093cd129160d259c5e3d827325b89cc0fc484a6c4cad3087932a9425fb3a59f9495b0904579ac608bf51cd0edf17489
|
data/.editorconfig
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
# editorconfig.org
|
2
|
+
root = true
|
3
|
+
|
4
|
+
[*]
|
5
|
+
charset = utf-8
|
6
|
+
indent_style = space
|
7
|
+
end_of_line = lf
|
8
|
+
trim_trailing_whitespace = true
|
9
|
+
insert_final_newline = true
|
10
|
+
|
11
|
+
[{*.rb,*.haml}]
|
12
|
+
indent_size = 2
|
13
|
+
|
14
|
+
[{*.js,*.jst,*.ejs,*.scss}]
|
15
|
+
indent_size = 4
|
data/.eslintrc
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
{
|
2
|
+
"extends": "eslint:recommended",
|
3
|
+
"rules": {
|
4
|
+
"semi": [1, "always"]
|
5
|
+
},
|
6
|
+
"globals": {
|
7
|
+
"window": true,
|
8
|
+
"document": true,
|
9
|
+
"WORKAREA": true,
|
10
|
+
"$": true,
|
11
|
+
"jQuery": true,
|
12
|
+
"_": true,
|
13
|
+
"feature": true,
|
14
|
+
"JST": true,
|
15
|
+
"Turbolinks": true,
|
16
|
+
"I18n": true,
|
17
|
+
"Chart": true,
|
18
|
+
"Dropzone": true,
|
19
|
+
"strftime": true,
|
20
|
+
"Waypoint": true,
|
21
|
+
"wysihtml": true,
|
22
|
+
"LocalTime": true,
|
23
|
+
"describe": true,
|
24
|
+
"after": true,
|
25
|
+
"afterEach": true,
|
26
|
+
"before": true,
|
27
|
+
"beforeEach": true,
|
28
|
+
"it": true,
|
29
|
+
"expect": true,
|
30
|
+
"sinon": true,
|
31
|
+
"fixture": true,
|
32
|
+
"chai": true
|
33
|
+
}
|
34
|
+
}
|
data/.gitignore
ADDED
data/.rubocop.yml
ADDED
data/.scss-lint.yml
ADDED
@@ -0,0 +1,188 @@
|
|
1
|
+
# Extension of the default configuration:
|
2
|
+
# https://github.com/causes/scss-lint/blob/master/config/default.yml
|
3
|
+
|
4
|
+
linters:
|
5
|
+
Comment:
|
6
|
+
enabled: false
|
7
|
+
|
8
|
+
DeclarationOrder:
|
9
|
+
enabled: true
|
10
|
+
|
11
|
+
ElsePlacement:
|
12
|
+
enabled: true
|
13
|
+
style: new_line
|
14
|
+
|
15
|
+
EmptyRule:
|
16
|
+
enabled: false
|
17
|
+
|
18
|
+
HexLength:
|
19
|
+
enabled: true
|
20
|
+
style: long
|
21
|
+
|
22
|
+
Indentation:
|
23
|
+
enabled: true
|
24
|
+
allow_non_nested_indentation: true
|
25
|
+
character: space
|
26
|
+
width: 4
|
27
|
+
|
28
|
+
LeadingZero:
|
29
|
+
enabled: true
|
30
|
+
style: include_zero
|
31
|
+
|
32
|
+
MergeableSelector:
|
33
|
+
enabled: true
|
34
|
+
force_nesting: false
|
35
|
+
|
36
|
+
PropertySortOrder:
|
37
|
+
enabled: true
|
38
|
+
ignore_unspecified: false
|
39
|
+
separate_groups: false
|
40
|
+
order:
|
41
|
+
- display
|
42
|
+
-
|
43
|
+
- position
|
44
|
+
- top
|
45
|
+
- right
|
46
|
+
- bottom
|
47
|
+
- left
|
48
|
+
- z-index
|
49
|
+
-
|
50
|
+
- margin
|
51
|
+
- margin-top
|
52
|
+
- margin-right
|
53
|
+
- margin-bottom
|
54
|
+
- margin-left
|
55
|
+
-
|
56
|
+
- margin-collapse
|
57
|
+
- margin-top-collapse
|
58
|
+
- margin-right-collapse
|
59
|
+
- margin-bottom-collapse
|
60
|
+
- margin-left-collapse
|
61
|
+
-
|
62
|
+
- padding
|
63
|
+
- padding-top
|
64
|
+
- padding-right
|
65
|
+
- padding-bottom
|
66
|
+
- padding-left
|
67
|
+
-
|
68
|
+
- width
|
69
|
+
- height
|
70
|
+
- max-width
|
71
|
+
- max-height
|
72
|
+
- min-width
|
73
|
+
- min-height
|
74
|
+
-
|
75
|
+
- float
|
76
|
+
- clear
|
77
|
+
-
|
78
|
+
- color
|
79
|
+
-
|
80
|
+
- font
|
81
|
+
- font-size
|
82
|
+
- font-style
|
83
|
+
- font-family
|
84
|
+
- font-weight
|
85
|
+
- font-variant
|
86
|
+
- font-smoothing
|
87
|
+
-
|
88
|
+
- line-height
|
89
|
+
- letter-spacing
|
90
|
+
- word-spacing
|
91
|
+
-
|
92
|
+
- text-align
|
93
|
+
- text-indent
|
94
|
+
- text-shadow
|
95
|
+
- text-overflow
|
96
|
+
- text-rendering
|
97
|
+
- text-transform
|
98
|
+
- text-decoration
|
99
|
+
- text-size-adjust
|
100
|
+
-
|
101
|
+
- word-break
|
102
|
+
- word-wrap
|
103
|
+
-
|
104
|
+
- white-space
|
105
|
+
-
|
106
|
+
- background
|
107
|
+
- background-size
|
108
|
+
- background-color
|
109
|
+
- background-image
|
110
|
+
- background-repeat
|
111
|
+
- background-position
|
112
|
+
- background-attachment
|
113
|
+
-
|
114
|
+
- border
|
115
|
+
- border-top
|
116
|
+
- border-right
|
117
|
+
- border-bottom
|
118
|
+
- border-left
|
119
|
+
-
|
120
|
+
- border-image
|
121
|
+
- border-spacing
|
122
|
+
- border-collapse
|
123
|
+
-
|
124
|
+
- border-color
|
125
|
+
- border-top-color
|
126
|
+
- border-right-color
|
127
|
+
- border-bottom-color
|
128
|
+
- border-left-color
|
129
|
+
-
|
130
|
+
- border-style
|
131
|
+
- border-top-style
|
132
|
+
- border-right-style
|
133
|
+
- border-bottom-style
|
134
|
+
- border-left-style
|
135
|
+
-
|
136
|
+
- border-width
|
137
|
+
- border-top-width
|
138
|
+
- border-right-width
|
139
|
+
- border-bottom-width
|
140
|
+
- border-left-width
|
141
|
+
-
|
142
|
+
- border-radius
|
143
|
+
- border-top-right-radius
|
144
|
+
- border-bottom-right-radius
|
145
|
+
- border-bottom-left-radius
|
146
|
+
- border-top-left-radius
|
147
|
+
- border-radius-topright
|
148
|
+
- border-radius-bottomright
|
149
|
+
- border-radius-bottomleft
|
150
|
+
- border-radius-topleft
|
151
|
+
-
|
152
|
+
- box-shadow
|
153
|
+
|
154
|
+
SelectorFormat:
|
155
|
+
enabled: true
|
156
|
+
convention: hyphenated_BEM
|
157
|
+
|
158
|
+
SingleLinePerSelector:
|
159
|
+
enabled: false
|
160
|
+
|
161
|
+
SpaceAfterPropertyColon:
|
162
|
+
enabled: true
|
163
|
+
style: at_least_one_space
|
164
|
+
|
165
|
+
SpaceBeforeBrace:
|
166
|
+
enabled: true
|
167
|
+
style: space
|
168
|
+
allow_single_line_padding: true
|
169
|
+
|
170
|
+
VariableForProperty:
|
171
|
+
enabled: true
|
172
|
+
properties:
|
173
|
+
- color
|
174
|
+
- font-family
|
175
|
+
- background-color
|
176
|
+
|
177
|
+
# These default settings may be problematic to implementors. They are not
|
178
|
+
# ommitted so that they may be adjusted as needed during an implementation.
|
179
|
+
#
|
180
|
+
# For documentation:
|
181
|
+
# https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md
|
182
|
+
|
183
|
+
DuplicateProperty:
|
184
|
+
enabled: true
|
185
|
+
|
186
|
+
PropertySpelling:
|
187
|
+
enabled: true
|
188
|
+
extra_properties: [] # Add experimental CSS to this array, if needed
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
Workarea Slick Slider 1.0.2 (2019-08-21)
|
2
|
+
--------------------------------------------------------------------------------
|
3
|
+
|
4
|
+
* Open Source!
|
5
|
+
|
6
|
+
|
7
|
+
|
8
|
+
Workarea Slick Slider 1.0.1 (2019-04-30)
|
9
|
+
--------------------------------------------------------------------------------
|
10
|
+
|
11
|
+
* Updates to README
|
12
|
+
|
13
|
+
* Use haml for markup examples
|
14
|
+
* Provide example for mounting helper
|
15
|
+
* Update readme language to read better
|
16
|
+
|
17
|
+
SLICKSLIDE-12
|
18
|
+
Jake Beresford
|
19
|
+
|
20
|
+
* Removed arrows from CSS background image
|
21
|
+
|
22
|
+
Arrows were being rendered twice in slick slider buttons, preferred implementation is to use inline SVG.
|
23
|
+
Updates to CSS should not be included when upgrading this plugin as implementations have typically changed this.
|
24
|
+
|
25
|
+
SLICKSLIDE-14
|
26
|
+
Jake Beresford
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
Workarea Slick Slider 1.0.0 (2018-04-11)
|
31
|
+
--------------------------------------------------------------------------------
|
32
|
+
|
33
|
+
* Remove style guide append - this is now handled automatically by the platform
|
34
|
+
|
35
|
+
SLICKSLIDE-10
|
36
|
+
Jake Beresford
|
37
|
+
|
38
|
+
|
39
|
+
Workarea Slick Slider 0.4.0 (2018-03-06)
|
40
|
+
--------------------------------------------------------------------------------
|
41
|
+
|
42
|
+
|
43
|
+
Workarea Slick Slider 0.3.0 (2017-11-06)
|
44
|
+
--------------------------------------------------------------------------------
|
45
|
+
|
46
|
+
|
47
|
+
Workarea Slick Slider 0.2.0 (2017-10-13)
|
48
|
+
--------------------------------------------------------------------------------
|
49
|
+
|
50
|
+
|
51
|
+
Workarea Slick Slider 0.1.0 (2017-07-13)
|
52
|
+
--------------------------------------------------------------------------------
|
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,284 @@
|
|
1
|
+
# Workarea Slick Slider
|
2
|
+
|
3
|
+
Slick Slider plugin for the Workarea platform.
|
4
|
+
|
5
|
+
This will include [Ken Wheeler's jQuery Slick](http://kenwheeler.github.io/slick/)
|
6
|
+
in your project and make available a data attribute that will initailize a
|
7
|
+
rotating slider on an element with several items inside of it.
|
8
|
+
|
9
|
+
Example markup using haml:
|
10
|
+
|
11
|
+
```haml
|
12
|
+
%div{ data: { slick_slider: '' } }
|
13
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')
|
14
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')
|
15
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')
|
16
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')
|
17
|
+
```
|
18
|
+
|
19
|
+
## Using Workarea Slick Slider
|
20
|
+
|
21
|
+
Apply a `data-slick-slider` attribute to any element that is meant to become a
|
22
|
+
slider. If no value is passed to the data attribute, then the default
|
23
|
+
`Workarea.config.slickSlider` options will be used to init the accordion.
|
24
|
+
|
25
|
+
### Modifying Options
|
26
|
+
|
27
|
+
Options can be passed in to the `WORKAREA.slickSlider` module by providing a
|
28
|
+
JSON object as the value for `data-slick-slider`. If these objects become large
|
29
|
+
and begin cluttering your view, feel free to move them into a helper or a view
|
30
|
+
model.
|
31
|
+
|
32
|
+
The following code shows an example of creating a new helper with some slider
|
33
|
+
configuration. Note that helpers need to be mounted in application.rb like this:
|
34
|
+
|
35
|
+
```ruby
|
36
|
+
config.to_prepare do
|
37
|
+
Workarea::Storefront::ApplicationController.helper(Workarea::Storefront::SliderHelper)
|
38
|
+
end
|
39
|
+
```
|
40
|
+
|
41
|
+
```ruby
|
42
|
+
# `app/helpers/workarea/storefront/slider_options.rb`
|
43
|
+
|
44
|
+
module Workarea
|
45
|
+
module Storefront
|
46
|
+
module SliderHelper
|
47
|
+
def style_guide_slider_options
|
48
|
+
{
|
49
|
+
options: {
|
50
|
+
slidesToShow: 1,
|
51
|
+
slidesToScroll: 1,
|
52
|
+
autoplay: true,
|
53
|
+
mobileFirst: true,
|
54
|
+
responsive: [
|
55
|
+
{
|
56
|
+
breakpoint: Workarea.config.storefront_break_points[:medium] - 1,
|
57
|
+
settings: {
|
58
|
+
arrows: false,
|
59
|
+
dots: true,
|
60
|
+
slidesToShow: 2,
|
61
|
+
slidesToScroll: 2
|
62
|
+
}
|
63
|
+
},
|
64
|
+
{
|
65
|
+
breakpoint: Workarea.config.storefront_break_points[:wide] - 1,
|
66
|
+
settings: {
|
67
|
+
arrows: false,
|
68
|
+
dots: true,
|
69
|
+
slidesToShow: 4,
|
70
|
+
slidesToScroll: 4
|
71
|
+
}
|
72
|
+
}
|
73
|
+
]
|
74
|
+
}
|
75
|
+
}.to_json
|
76
|
+
end
|
77
|
+
end
|
78
|
+
end
|
79
|
+
end
|
80
|
+
```
|
81
|
+
|
82
|
+
Now you can call the newly created style_guide_slider_options helper method
|
83
|
+
as the value for `data-slick-slider` and a new slider will be rendered with the
|
84
|
+
provided options.
|
85
|
+
|
86
|
+
```haml
|
87
|
+
%div{ data: { slick_slider: style_guide_slider_options } }
|
88
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')
|
89
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')
|
90
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')
|
91
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')
|
92
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_5')
|
93
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_6')
|
94
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_7')
|
95
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_8')
|
96
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_9')
|
97
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_10')
|
98
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_11')
|
99
|
+
= image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_12')
|
100
|
+
```
|
101
|
+
|
102
|
+
### Additional Options
|
103
|
+
|
104
|
+
There is an additional option called `stopOnInteraction` which will permanently
|
105
|
+
stop autoplay on your slider when it is interacted with (click or swipe event).
|
106
|
+
By default it is set to false in `config.js`. To set this option to true provide
|
107
|
+
the following options:
|
108
|
+
|
109
|
+
```ruby
|
110
|
+
module Workarea
|
111
|
+
module Storefront
|
112
|
+
module SliderHelper
|
113
|
+
def style_guide_autoplay_stop_options
|
114
|
+
{
|
115
|
+
options: {
|
116
|
+
autoplay: true
|
117
|
+
},
|
118
|
+
stopOnInteraction: true
|
119
|
+
}.to_json
|
120
|
+
end
|
121
|
+
end
|
122
|
+
end
|
123
|
+
end
|
124
|
+
```
|
125
|
+
|
126
|
+
Another additional option `waitForImages` will delay the init until the images
|
127
|
+
are loaded. This is helpful when experiencing a delay and slick automatically
|
128
|
+
sets the height to 0 or something incorrect. This is set to false by default in
|
129
|
+
config.js, this can be overridden for a single slider in Ruby, or for all slider
|
130
|
+
in JS configuration.
|
131
|
+
|
132
|
+
```ruby
|
133
|
+
module Workarea
|
134
|
+
module Storefront
|
135
|
+
module SliderHelper
|
136
|
+
def style_guide_wait_for_images
|
137
|
+
{
|
138
|
+
waitForImages: true
|
139
|
+
}.to_json
|
140
|
+
end
|
141
|
+
end
|
142
|
+
end
|
143
|
+
end
|
144
|
+
```
|
145
|
+
|
146
|
+
```javascript
|
147
|
+
_.merge(WORKAREA.config.slickSlider, {
|
148
|
+
waitForImages: true
|
149
|
+
});
|
150
|
+
```
|
151
|
+
|
152
|
+
## Analytics Tracking
|
153
|
+
|
154
|
+
Slider Analytics gets initialized on slider init. There are 4 different types of
|
155
|
+
events that get tracked:
|
156
|
+
|
157
|
+
* Drag / Swipe on slider
|
158
|
+
* Click on a slide
|
159
|
+
* Click on arrow navigation
|
160
|
+
* Click on dot navigation.
|
161
|
+
|
162
|
+
### Drag/Swipe
|
163
|
+
|
164
|
+
When a user drags or swipes (on mobile) a slide, a few things are tracked:
|
165
|
+
|
166
|
+
1. The action (swipe)
|
167
|
+
The action is used to track how a user interacted with the slider
|
168
|
+
2. The category (swipe)
|
169
|
+
The category is to categorize the type of action, mainly important for click actions
|
170
|
+
3. The target slider
|
171
|
+
This allows the tracker to send data if there are multiple sliders on a page
|
172
|
+
4. In which direction the user swiped (left or right)
|
173
|
+
This is tracked mainly to determine if a user decided to go back a slide or
|
174
|
+
wanted to speed up to see the next slide
|
175
|
+
5. The slide the user ended on
|
176
|
+
This is tracked to determine what the user wanted to view in the slider
|
177
|
+
|
178
|
+
### Clicking on a Slide
|
179
|
+
|
180
|
+
When a user clicks on a particular slide these events are tracked:
|
181
|
+
|
182
|
+
1. The category (click)
|
183
|
+
The click even is tracked to determine that only a slide was clicked
|
184
|
+
2. The target slider
|
185
|
+
This allows the tracker to send data if there are multiple sliders on a page
|
186
|
+
3. The current slide
|
187
|
+
Which slide was clicked, if there was a link leading to another page
|
188
|
+
|
189
|
+
### Clicking on Arrow Navigation
|
190
|
+
|
191
|
+
When a user drags or swipes (on mobile) a slide, a few things are tracked:
|
192
|
+
|
193
|
+
1. The action (navigation click)
|
194
|
+
The action is used to track how a user interacted with the slider
|
195
|
+
2. The category (click)
|
196
|
+
The category is to categorize the type of action, mainly important for click actions
|
197
|
+
3. The target slider
|
198
|
+
This allows the tracker to send data if there are multiple sliders on a page
|
199
|
+
4. In which direction the slider moved (left or right)
|
200
|
+
This is tracked mainly to determine if a user decided to go back a slide or
|
201
|
+
wanted to speed up to see the next slide
|
202
|
+
5. The slide the user ended on
|
203
|
+
This is tracked to determine what the user wanted to view in the slider
|
204
|
+
6. Click Target (navigation arrows)
|
205
|
+
This is tracked to note that the arrows were targeted
|
206
|
+
|
207
|
+
### Clicking on Dots Navigation
|
208
|
+
|
209
|
+
When a user drags or swipes (on mobile) a slide, a few things are tracked:
|
210
|
+
|
211
|
+
1. The action (dots click)
|
212
|
+
The action is used to track how a user interacted with the slider
|
213
|
+
2. The category (click)
|
214
|
+
The category is to categorize the type of action, mainly important for click actions
|
215
|
+
3. The target slider
|
216
|
+
This allows the tracker to send data if there are multiple sliders on a page
|
217
|
+
4. The slide the user ended on
|
218
|
+
This is tracked to determine what the user wanted to view in the slider
|
219
|
+
5. Click Target (navigation dots)
|
220
|
+
This is tracked to note that the dots were targeted
|
221
|
+
|
222
|
+
## Gotchas
|
223
|
+
|
224
|
+
### Using Mobile First
|
225
|
+
|
226
|
+
If using the `mobileFirst` option, you need to subtract 1 from your target
|
227
|
+
breakpoint otherwise, options will be applied too soon. For example, when
|
228
|
+
targeting wide devices and using mobile first you should define the breakpoint
|
229
|
+
value as:
|
230
|
+
|
231
|
+
```javascript
|
232
|
+
breakpoint: Workarea.config.storefront_break_points[:wide] - 1
|
233
|
+
```
|
234
|
+
|
235
|
+
If you are not using `mobileFirst`, this isn't necessary.
|
236
|
+
|
237
|
+
Also when using `mobileFirst` and adding multiple breakpoints, options will need
|
238
|
+
to be repeated if they will continue to the next breakpoint as seen in the
|
239
|
+
"Modifying Options" example where arrows and dots needs to be repeated for it to
|
240
|
+
show correctly in the `wide` breakpoint.
|
241
|
+
|
242
|
+
## Getting Started
|
243
|
+
|
244
|
+
This gem contains a rails engine that must be mounted onto a host Rails
|
245
|
+
application.
|
246
|
+
|
247
|
+
You must have access to a Workarea gems server to use this gem. Add your gems
|
248
|
+
server credentials to Bundler:
|
249
|
+
|
250
|
+
bundle config gems.weblinc.com my_username:my_password
|
251
|
+
|
252
|
+
Or set the appropriate environment variable in a shell startup file:
|
253
|
+
|
254
|
+
export BUNDLE_GEMS__WEBLINC__COM='my_username:my_password'
|
255
|
+
|
256
|
+
Then add the gem to your application's Gemfile specifying the source:
|
257
|
+
|
258
|
+
# ...
|
259
|
+
gem 'workarea-slick_slider', source: 'https://gems.weblinc.com'
|
260
|
+
# ...
|
261
|
+
|
262
|
+
Or use a source block:
|
263
|
+
|
264
|
+
# ...
|
265
|
+
source 'https://gems.weblinc.com' do
|
266
|
+
gem 'workarea-slick_slider'
|
267
|
+
end
|
268
|
+
# ...
|
269
|
+
|
270
|
+
Update your application's bundle.
|
271
|
+
|
272
|
+
cd path/to/application
|
273
|
+
bundle
|
274
|
+
|
275
|
+
## Workarea Platform Documentation
|
276
|
+
|
277
|
+
See [http://developer.weblinc.com](http://developer.weblinc.com) for Workarea
|
278
|
+
platform documentation.
|
279
|
+
|
280
|
+
## Copyright & Licensing
|
281
|
+
|
282
|
+
Copyright WebLinc 2017. All rights reserved.
|
283
|
+
|
284
|
+
For licensing, contact sales@workarea.com.
|
data/Rakefile
ADDED
@@ -0,0 +1,63 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'Slick Slider'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.md')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
18
|
+
load 'rails/tasks/engine.rake'
|
19
|
+
load 'rails/tasks/statistics.rake'
|
20
|
+
load 'workarea/changelog.rake'
|
21
|
+
|
22
|
+
require 'rake/testtask'
|
23
|
+
|
24
|
+
Rake::TestTask.new(:test) do |t|
|
25
|
+
t.libs << 'lib'
|
26
|
+
t.libs << 'test'
|
27
|
+
t.pattern = 'test/**/*_test.rb'
|
28
|
+
t.verbose = false
|
29
|
+
end
|
30
|
+
|
31
|
+
task default: :test
|
32
|
+
|
33
|
+
$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
|
34
|
+
require 'workarea/slick_slider/version'
|
35
|
+
|
36
|
+
desc "Release version #{Workarea::SlickSlider::VERSION} of the gem"
|
37
|
+
task :release do
|
38
|
+
host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
|
39
|
+
|
40
|
+
#Rake::Task['workarea:changelog'].execute
|
41
|
+
#system 'git add CHANGELOG.md'
|
42
|
+
#system 'git commit -m "Update CHANGELOG"'
|
43
|
+
#system 'git push origin HEAD'
|
44
|
+
|
45
|
+
system "git tag -a v#{Workarea::SlickSlider::VERSION} -m 'Tagging #{Workarea::SlickSlider::VERSION}'"
|
46
|
+
system 'git push --tags'
|
47
|
+
|
48
|
+
system "gem build workarea-slick_slider.gemspec"
|
49
|
+
system "gem push workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem"
|
50
|
+
system "gem push workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem --host #{host}"
|
51
|
+
system "rm workarea-slick_slider-#{Workarea::SlickSlider::VERSION}.gem"
|
52
|
+
end
|
53
|
+
|
54
|
+
desc 'Run the JavaScript tests'
|
55
|
+
ENV['TEASPOON_RAILS_ENV'] = File.expand_path('../test/dummy/config/environment', __FILE__)
|
56
|
+
task teaspoon: 'app:teaspoon'
|
57
|
+
|
58
|
+
desc 'Start a server at http://localhost:3000/teaspoon for JavaScript tests'
|
59
|
+
task :teaspoon_server do
|
60
|
+
Dir.chdir("test/dummy")
|
61
|
+
teaspoon_env = File.expand_path('../test/teaspoon_env.rb', __FILE__)
|
62
|
+
system "RAILS_ENV=test TEASPOON_ENV=#{teaspoon_env} rails s"
|
63
|
+
end
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<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">
|
2
|
+
<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
|
3
|
+
s0.7,1.4,0.2,2l-8.2,10.4l8.2,10.5C20.9,26.6,21,27.1,21,27.4z"/>
|
4
|
+
</svg>
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<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">
|
2
|
+
<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
|
3
|
+
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"/>
|
4
|
+
</svg>
|