staple 0.0.9 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +9 -7
- data/Rakefile +1 -0
- data/lib/staple/install_generator.rb +11 -1
- data/source/stylesheets/after.scss +5 -0
- data/source/stylesheets/before.scss +9 -0
- data/source/stylesheets/buttons.scss +0 -0
- data/source/stylesheets/color.scss +0 -0
- data/source/stylesheets/forms.scss +0 -0
- data/source/stylesheets/foundation_and_overrides.scss +3 -0
- data/source/stylesheets/sizing.scss +0 -0
- data/source/stylesheets/typography.scss +0 -0
- data/source/stylesheets/utilities.scss +0 -0
- data/staple.gemspec +6 -6
- metadata +12 -190
- data/config.rb +0 -24
- data/source/CNAME +0 -1
- data/source/_accordion.html.erb +0 -24
- data/source/_accordion_tabs.html.erb +0 -26
- data/source/_accordion_tabs_minimal.html.erb +0 -26
- data/source/_badges.html.erb +0 -7
- data/source/_breadcrumbs.html.erb +0 -7
- data/source/_browser.html.erb +0 -29
- data/source/_button_group.html.erb +0 -18
- data/source/_cards.html.erb +0 -59
- data/source/_centered_navigation.html.erb +0 -38
- data/source/_code.html.erb +0 -10
- data/source/_comment.html.erb +0 -21
- data/source/_device.html.erb +0 -10
- data/source/_dropdown.html.erb +0 -12
- data/source/_expander.html.erb +0 -6
- data/source/_flashes.html.erb +0 -15
- data/source/_footer.html.erb +0 -28
- data/source/_footer_2.html.erb +0 -33
- data/source/_grid_items.html.erb +0 -37
- data/source/_grid_items_lines.html.erb +0 -44
- data/source/_hero.html.erb +0 -11
- data/source/_hover_tile_animation.html.erb +0 -11
- data/source/_icon_bullet_points.html.erb +0 -30
- data/source/_image_gradient_dynamic.html.erb +0 -7
- data/source/_intro_text.html.erb +0 -6
- data/source/_label_alerts.html.erb +0 -5
- data/source/_modal.html.erb +0 -14
- data/source/_navigation.html.erb +0 -44
- data/source/_pagination.html.erb +0 -17
- data/source/_progress_bar.html.erb +0 -3
- data/source/_progress_bar_indication.html.erb +0 -5
- data/source/_search_bar.html.erb +0 -8
- data/source/_search_tools.html.erb +0 -58
- data/source/_side_image.html.erb +0 -10
- data/source/_sliding_menu.html.erb +0 -13
- data/source/_snippet.html.erb +0 -4
- data/source/_switch.html.erb +0 -4
- data/source/_tables.html.erb +0 -31
- data/source/_tables_minimal.html.erb +0 -31
- data/source/_texture-legend.html.erb +0 -24
- data/source/_textures.html.erb +0 -4
- data/source/_tooltip.html.erb +0 -6
- data/source/_type_system_geometric.html.erb +0 -18
- data/source/_type_system_rounded.html.erb +0 -18
- data/source/_type_system_sans.html.erb +0 -18
- data/source/_type_system_serif.html.erb +0 -19
- data/source/_type_system_slab.html.erb +0 -18
- data/source/_type_system_traditional.html.erb +0 -18
- data/source/_vertical_tabs.html.erb +0 -30
- data/source/_video.html.erb +0 -5
- data/source/components.html.erb +0 -174
- data/source/foundation/application.html.slim +0 -17
- data/source/foundation/foundation_and_overrides.scss +0 -4
- data/source/index.html.erb +0 -162
- data/source/javascripts/all.js +0 -11
- data/source/javascripts/jquery.erToc.js +0 -477
- data/source/javascripts/jquery.glide.js +0 -941
- data/source/javascripts/staple/accordion.js +0 -5
- data/source/javascripts/staple/accordion_tabs.js +0 -19
- data/source/javascripts/staple/accordion_tabs_minimal.js +0 -19
- data/source/javascripts/staple/centered_navigation.js +0 -14
- data/source/javascripts/staple/dropdown.js +0 -9
- data/source/javascripts/staple/expander.js +0 -53
- data/source/javascripts/staple/navigation.js +0 -23
- data/source/javascripts/staple/search_tools.js +0 -110
- data/source/javascripts/staple/sliding_menu.js +0 -13
- data/source/javascripts/staple/vertical_tabs.js +0 -32
- data/source/layouts/layout.erb +0 -1
- data/source/refills-hero.html.erb +0 -7
- data/source/refills-menu.html.erb +0 -5
- data/source/refills-page-scripts.html.erb +0 -66
- data/source/stylesheets/_bourbon-nav.scss +0 -86
- data/source/stylesheets/_normalize.scss +0 -425
- data/source/stylesheets/_refills-nav.scss +0 -102
- data/source/stylesheets/_refills-styles.scss +0 -543
- data/source/stylesheets/all.scss +0 -61
- data/source/stylesheets/staple/_accordion-tabs-minimal.scss +0 -60
- data/source/stylesheets/staple/_accordion-tabs.scss +0 -88
- data/source/stylesheets/staple/_accordion.scss +0 -55
- data/source/stylesheets/staple/_badges.scss +0 -44
- data/source/stylesheets/staple/_breadcrumbs.scss +0 -84
- data/source/stylesheets/staple/_browser.scss +0 -141
- data/source/stylesheets/staple/_button-group.scss +0 -81
- data/source/stylesheets/staple/_cards.scss +0 -132
- data/source/stylesheets/staple/_centered-navigation.scss +0 -251
- data/source/stylesheets/staple/_comment.scss +0 -60
- data/source/stylesheets/staple/_device.scss +0 -83
- data/source/stylesheets/staple/_dropdown.scss +0 -127
- data/source/stylesheets/staple/_expander.scss +0 -30
- data/source/stylesheets/staple/_flashes.scss +0 -29
- data/source/stylesheets/staple/_footer-2.scss +0 -117
- data/source/stylesheets/staple/_footer.scss +0 -76
- data/source/stylesheets/staple/_grid-items-lines.scss +0 -86
- data/source/stylesheets/staple/_grid-items.scss +0 -97
- data/source/stylesheets/staple/_hero.scss +0 -54
- data/source/stylesheets/staple/_hover-tile-animation.scss +0 -52
- data/source/stylesheets/staple/_icon-bullet-points.scss +0 -63
- data/source/stylesheets/staple/_image-gradient-dynamic.scss +0 -59
- data/source/stylesheets/staple/_intro-text.scss +0 -67
- data/source/stylesheets/staple/_label-alerts.scss +0 -11
- data/source/stylesheets/staple/_modal.scss +0 -147
- data/source/stylesheets/staple/_navigation.scss +0 -329
- data/source/stylesheets/staple/_pagination.scss +0 -51
- data/source/stylesheets/staple/_progress-bar-indication.scss +0 -39
- data/source/stylesheets/staple/_progress-bar.scss +0 -83
- data/source/stylesheets/staple/_search-bar.scss +0 -40
- data/source/stylesheets/staple/_search-tools.scss +0 -67
- data/source/stylesheets/staple/_side-image.scss +0 -59
- data/source/stylesheets/staple/_sliding-menu.scss +0 -63
- data/source/stylesheets/staple/_switch.scss +0 -77
- data/source/stylesheets/staple/_tables-minimal.scss +0 -60
- data/source/stylesheets/staple/_tables.scss +0 -88
- data/source/stylesheets/staple/_texture-legend.scss +0 -182
- data/source/stylesheets/staple/_textures.scss +0 -119
- data/source/stylesheets/staple/_tooltip.scss +0 -57
- data/source/stylesheets/staple/_type-system-geometric.scss +0 -103
- data/source/stylesheets/staple/_type-system-rounded.scss +0 -107
- data/source/stylesheets/staple/_type-system-sans.scss +0 -110
- data/source/stylesheets/staple/_type-system-serif.scss +0 -111
- data/source/stylesheets/staple/_type-system-slab.scss +0 -107
- data/source/stylesheets/staple/_type-system-traditional.scss +0 -114
- data/source/stylesheets/staple/_vertical-tabs.scss +0 -105
- data/source/stylesheets/staple/_video.scss +0 -21
- data/source/type-systems.html.erb +0 -67
- data/source/vendor/javascripts/ZeroClipboard.min.js +0 -9
- data/source/vendor/javascripts/fixedsticky.js +0 -185
- data/source/vendor/javascripts/prism.js +0 -13
- data/source/vendor/javascripts/smooth-scroll.js +0 -125
- data/source/vendor/stylesheets/fixedsticky.css +0 -22
- data/source/vendor/stylesheets/prism.css +0 -126
@@ -1,941 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Glide.js
|
3
|
-
* Version: 1.0.6
|
4
|
-
* Simple, lightweight and fast jQuery slider
|
5
|
-
* Author: @JedrzejChalubek
|
6
|
-
* Site: http://jedrzejchalubek.com/
|
7
|
-
* Licensed under the MIT license
|
8
|
-
*/
|
9
|
-
;(function ($, window, document, undefined) {
|
10
|
-
|
11
|
-
var name = 'glide',
|
12
|
-
defaults = {
|
13
|
-
|
14
|
-
// {Int or Bool} False for turning off autoplay
|
15
|
-
autoplay: 4000,
|
16
|
-
// {Bool} Pause autoplay on mouseover slider
|
17
|
-
hoverpause: true,
|
18
|
-
|
19
|
-
// {Bool} Circual play
|
20
|
-
circular: true,
|
21
|
-
|
22
|
-
// {Int} Animation time
|
23
|
-
animationDuration: 500,
|
24
|
-
// {String} Animation easing function
|
25
|
-
animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
|
26
|
-
|
27
|
-
/**
|
28
|
-
* {Bool or String} Show/hide/appendTo arrows
|
29
|
-
* True for append arrows to slider wrapper
|
30
|
-
* False for not appending arrows
|
31
|
-
* Id or class name (e.g. '.class-name') for appending to specific HTML markup
|
32
|
-
*/
|
33
|
-
arrows: true,
|
34
|
-
// {String} Arrows wrapper class
|
35
|
-
arrowsWrapperClass: 'slider-arrows',
|
36
|
-
// {String} Main class for both arrows
|
37
|
-
arrowMainClass: 'slider-arrow',
|
38
|
-
// {String} Right arrow
|
39
|
-
arrowRightClass: 'slider-arrow--right',
|
40
|
-
// {String} Right arrow text
|
41
|
-
arrowRightText: 'next',
|
42
|
-
// {String} Left arrow
|
43
|
-
arrowLeftClass: 'slider-arrow--left',
|
44
|
-
// {String} Left arrow text
|
45
|
-
arrowLeftText: 'prev',
|
46
|
-
|
47
|
-
/**
|
48
|
-
* {Bool or String} Show/hide/appendTo bullets navigation
|
49
|
-
* True for append arrows to slider wrapper
|
50
|
-
* False for not appending arrows
|
51
|
-
* Id or class name (e.g. '.class-name') for appending to specific HTML markup
|
52
|
-
*/
|
53
|
-
navigation: true,
|
54
|
-
// {Bool} Center bullet navigation
|
55
|
-
navigationCenter: true,
|
56
|
-
// {String} Navigation class
|
57
|
-
navigationClass: 'slider-nav',
|
58
|
-
// {String} Navigation item class
|
59
|
-
navigationItemClass: 'slider-nav__item',
|
60
|
-
// {String} Current navigation item class
|
61
|
-
navigationCurrentItemClass: 'slider-nav__item--current',
|
62
|
-
|
63
|
-
// {Bool} Slide on left/right keyboard arrows press
|
64
|
-
keyboard: true,
|
65
|
-
|
66
|
-
// {Int or Bool} Touch settings
|
67
|
-
touchDistance: 60,
|
68
|
-
|
69
|
-
// {Function} Callback before plugin init
|
70
|
-
beforeInit: function() {},
|
71
|
-
// {Function} Callback after plugin init
|
72
|
-
afterInit: function() {},
|
73
|
-
|
74
|
-
// {Function} Callback before slide change
|
75
|
-
beforeTransition: function() {},
|
76
|
-
// {Function} Callback after slide change
|
77
|
-
afterTransition: function() {}
|
78
|
-
|
79
|
-
};
|
80
|
-
|
81
|
-
/**
|
82
|
-
* Slider Constructor
|
83
|
-
* @param {Object} parent
|
84
|
-
* @param {Object} options
|
85
|
-
*/
|
86
|
-
function Glide(parent, options) {
|
87
|
-
|
88
|
-
// Cache this
|
89
|
-
var self = this;
|
90
|
-
|
91
|
-
// Extend options
|
92
|
-
this.options = $.extend({}, defaults, options);
|
93
|
-
// Current slide id
|
94
|
-
this.currentSlide = 0;
|
95
|
-
// If CSS3 Transition isn't supported switch cssSupport variable to false and use $.animate()
|
96
|
-
this.cssSupport = ( !this.css.isSupported("transition") || !this.css.isSupported("transform") ) ? false : true;
|
97
|
-
// If circular set offset, two cloned slides
|
98
|
-
this.offset = (this.options.circular) ? 2 : 0;
|
99
|
-
|
100
|
-
// Callbacks before plugin init
|
101
|
-
this.options.beforeInit.call(this);
|
102
|
-
|
103
|
-
// Sidebar
|
104
|
-
this.parent = parent;
|
105
|
-
// Initialize
|
106
|
-
this.init();
|
107
|
-
// Start autoplay
|
108
|
-
this.play();
|
109
|
-
|
110
|
-
// Callback after plugin init
|
111
|
-
this.options.afterInit.call(this);
|
112
|
-
|
113
|
-
/**
|
114
|
-
* API
|
115
|
-
* Returning slider methods
|
116
|
-
*/
|
117
|
-
return {
|
118
|
-
|
119
|
-
/**
|
120
|
-
* Get current slide number
|
121
|
-
* @return {Int}
|
122
|
-
*/
|
123
|
-
current: function() {
|
124
|
-
return -(self.currentSlide) + 1;
|
125
|
-
},
|
126
|
-
|
127
|
-
/**
|
128
|
-
* Reinit
|
129
|
-
* Rebuild and recalculate dimensions of slider elements
|
130
|
-
*/
|
131
|
-
reinit: function() {
|
132
|
-
self.init();
|
133
|
-
},
|
134
|
-
|
135
|
-
/**
|
136
|
-
* Start autoplay
|
137
|
-
*/
|
138
|
-
play: function() {
|
139
|
-
self.play();
|
140
|
-
},
|
141
|
-
|
142
|
-
/**
|
143
|
-
* Stop autoplay
|
144
|
-
*/
|
145
|
-
pause: function() {
|
146
|
-
self.pause();
|
147
|
-
},
|
148
|
-
|
149
|
-
/**
|
150
|
-
* Slide one forward
|
151
|
-
* @param {Function} callback
|
152
|
-
*/
|
153
|
-
next: function(callback) {
|
154
|
-
self.slide(1, false, callback);
|
155
|
-
},
|
156
|
-
|
157
|
-
/**
|
158
|
-
* Slide one backward
|
159
|
-
* @param {Function} callback
|
160
|
-
*/
|
161
|
-
prev: function(callback) {
|
162
|
-
self.slide(-1, false, callback);
|
163
|
-
},
|
164
|
-
|
165
|
-
/**
|
166
|
-
* Jump to specifed slide
|
167
|
-
* @param {Int} distance
|
168
|
-
* @param {Function} callback
|
169
|
-
*/
|
170
|
-
jump: function(distance, callback) {
|
171
|
-
self.slide(distance-1, true, callback);
|
172
|
-
},
|
173
|
-
|
174
|
-
/**
|
175
|
-
* Append navigation to specifet target
|
176
|
-
* @param {Mixed} target
|
177
|
-
*/
|
178
|
-
nav: function(target) {
|
179
|
-
|
180
|
-
/**
|
181
|
-
* If navigation wrapper already exist
|
182
|
-
* Remove it, protection before doubled navigation
|
183
|
-
*/
|
184
|
-
if (self.navigation.wrapper) self.navigation.wrapper.remove();
|
185
|
-
|
186
|
-
// While target isn't specifed, use slider wrapper
|
187
|
-
self.options.navigation = (target) ? target : self.options.navigation;
|
188
|
-
// Build
|
189
|
-
self.navigation();
|
190
|
-
|
191
|
-
},
|
192
|
-
|
193
|
-
/**
|
194
|
-
* Append arrows to specifet target
|
195
|
-
* @param {Mixed} target
|
196
|
-
*/
|
197
|
-
arrows: function(target) {
|
198
|
-
|
199
|
-
/**
|
200
|
-
* If arrows wrapper already exist
|
201
|
-
* Remove it, protection before doubled arrows
|
202
|
-
*/
|
203
|
-
if (self.arrows.wrapper) self.arrows.wrapper.remove();
|
204
|
-
|
205
|
-
// While target isn't specifed, use slider wrapper
|
206
|
-
self.options.arrows = (target) ? target : self.options.arrows;
|
207
|
-
// Build
|
208
|
-
self.arrows();
|
209
|
-
|
210
|
-
}
|
211
|
-
|
212
|
-
};
|
213
|
-
|
214
|
-
}
|
215
|
-
|
216
|
-
/**
|
217
|
-
* Building slider
|
218
|
-
*/
|
219
|
-
Glide.prototype.build = function() {
|
220
|
-
|
221
|
-
/**
|
222
|
-
* Attatch bindings
|
223
|
-
*/
|
224
|
-
this.bindings();
|
225
|
-
|
226
|
-
/**
|
227
|
-
* There is more than one slide
|
228
|
-
*/
|
229
|
-
if (this.slides.length > 1) {
|
230
|
-
/**
|
231
|
-
* Circular
|
232
|
-
* If circular option is true
|
233
|
-
* Append left and right arrow
|
234
|
-
*/
|
235
|
-
if (this.options.circular) this.circular();
|
236
|
-
|
237
|
-
/**
|
238
|
-
* Arrows
|
239
|
-
* If arrows option is true
|
240
|
-
* Append left and right arrow
|
241
|
-
*/
|
242
|
-
if (this.options.arrows) this.arrows();
|
243
|
-
|
244
|
-
/**
|
245
|
-
* Navigation
|
246
|
-
* If navigation option is true
|
247
|
-
* Append navigation item for each slide
|
248
|
-
*/
|
249
|
-
if (this.options.navigation) this.navigation();
|
250
|
-
}
|
251
|
-
|
252
|
-
/**
|
253
|
-
* Attatch events
|
254
|
-
*/
|
255
|
-
this.events();
|
256
|
-
|
257
|
-
};
|
258
|
-
|
259
|
-
/**
|
260
|
-
* Build circular DOM elements
|
261
|
-
* Clone first and last slide
|
262
|
-
* Set wrapper width with addional slides
|
263
|
-
* Move slider wrapper to first slide
|
264
|
-
*/
|
265
|
-
Glide.prototype.circular = function() {
|
266
|
-
|
267
|
-
/**
|
268
|
-
* Clone first and last slide
|
269
|
-
* and set width for each
|
270
|
-
*/
|
271
|
-
this.firstClone = this.slides.filter(':first-child').clone().width(this.slides.spread);
|
272
|
-
this.lastClone = this.slides.filter(':last-child').clone().width(this.slides.spread);
|
273
|
-
|
274
|
-
/**
|
275
|
-
* Append clodes slides to slider wrapper at the beginning and end
|
276
|
-
* Increase wrapper with with values of addional slides
|
277
|
-
* Clear translate and skip cloned last slide at the beginning
|
278
|
-
*/
|
279
|
-
this.wrapper.append(this.firstClone).prepend(this.lastClone).width( this.parent.width() * (this.slides.length+2) )
|
280
|
-
.trigger('clearTransition')
|
281
|
-
.trigger('setTranslate', [-this.slides.spread]);
|
282
|
-
|
283
|
-
};
|
284
|
-
|
285
|
-
/**
|
286
|
-
* Building navigation DOM
|
287
|
-
*/
|
288
|
-
Glide.prototype.navigation = function() {
|
289
|
-
|
290
|
-
this.navigation.items = {};
|
291
|
-
|
292
|
-
// Navigation wrapper
|
293
|
-
this.navigation.wrapper = $('<div />', {
|
294
|
-
'class': this.options.navigationClass
|
295
|
-
}).appendTo(
|
296
|
-
/**
|
297
|
-
* Setting append target
|
298
|
-
* If option is true set default target, that is slider wrapper
|
299
|
-
* Else get target set in options
|
300
|
-
* @type {Bool or String}
|
301
|
-
*/
|
302
|
-
(this.options.navigation === true) ? this.parent : this.options.navigation
|
303
|
-
);
|
304
|
-
|
305
|
-
for (var i = 0; i < this.slides.length; i++) {
|
306
|
-
this.navigation.items[i] = $('<a />', {
|
307
|
-
'href': '#',
|
308
|
-
'class': this.options.navigationItemClass,
|
309
|
-
// Direction and distance -> Item index forward
|
310
|
-
'data-distance': i
|
311
|
-
}).appendTo(this.navigation.wrapper);
|
312
|
-
}
|
313
|
-
|
314
|
-
// Add navCurrentItemClass to the first navigation item
|
315
|
-
this.navigation.items[0].addClass(this.options.navigationCurrentItemClass);
|
316
|
-
|
317
|
-
// If centered option is true
|
318
|
-
if (this.options.navigationCenter) {
|
319
|
-
// Center bullet navigation
|
320
|
-
this.navigation.wrapper.css({
|
321
|
-
'left': '50%',
|
322
|
-
'width': this.navigation.wrapper.children().outerWidth(true) * this.navigation.wrapper.children().length,
|
323
|
-
'margin-left': -(this.navigation.wrapper.outerWidth(true)/2)
|
324
|
-
});
|
325
|
-
}
|
326
|
-
|
327
|
-
};
|
328
|
-
|
329
|
-
/**
|
330
|
-
* Building arrows DOM
|
331
|
-
*/
|
332
|
-
Glide.prototype.arrows = function() {
|
333
|
-
|
334
|
-
/**
|
335
|
-
* Arrows wrapper
|
336
|
-
* @type {Obejct}
|
337
|
-
*/
|
338
|
-
this.arrows.wrapper = $('<div />', {
|
339
|
-
'class': this.options.arrowsWrapperClass
|
340
|
-
}).appendTo(
|
341
|
-
/**
|
342
|
-
* Setting append target
|
343
|
-
* If option is true set default target, that is slider wrapper
|
344
|
-
* Else get target set in options
|
345
|
-
* @type {Bool or String}
|
346
|
-
*/
|
347
|
-
(this.options.arrows === true) ? this.parent : this.options.arrows
|
348
|
-
);
|
349
|
-
|
350
|
-
/**
|
351
|
-
* Right arrow
|
352
|
-
* @type {Obejct}
|
353
|
-
*/
|
354
|
-
this.arrows.right = $('<a />', {
|
355
|
-
'href': '#',
|
356
|
-
'class': this.options.arrowMainClass + ' ' + this.options.arrowRightClass,
|
357
|
-
// Direction and distance -> One forward
|
358
|
-
'data-distance': '1',
|
359
|
-
'html': this.options.arrowRightText
|
360
|
-
}).appendTo(this.arrows.wrapper);
|
361
|
-
|
362
|
-
/**
|
363
|
-
* Left arrow
|
364
|
-
* @type {Object}
|
365
|
-
*/
|
366
|
-
this.arrows.left = $('<a />', {
|
367
|
-
'href': '#',
|
368
|
-
'class': this.options.arrowMainClass + ' ' + this.options.arrowLeftClass,
|
369
|
-
// Direction and distance -> One backward
|
370
|
-
'data-distance': '-1',
|
371
|
-
'html': this.options.arrowLeftText
|
372
|
-
}).appendTo(this.arrows.wrapper);
|
373
|
-
|
374
|
-
};
|
375
|
-
|
376
|
-
/**
|
377
|
-
* Function bindings
|
378
|
-
*/
|
379
|
-
Glide.prototype.bindings = function() {
|
380
|
-
|
381
|
-
var self = this,
|
382
|
-
o = this.options,
|
383
|
-
prefix = this.css.getPrefix();
|
384
|
-
|
385
|
-
/**
|
386
|
-
* Setup slider wrapper bindings
|
387
|
-
* for translate and transition control
|
388
|
-
*/
|
389
|
-
this.wrapper.bind({
|
390
|
-
|
391
|
-
/**
|
392
|
-
* Set transition
|
393
|
-
*/
|
394
|
-
'setTransition': function() {
|
395
|
-
$(this).css( prefix + 'transition', prefix + 'transform ' + o.animationDuration + 'ms ' + o.animationTimingFunc);
|
396
|
-
},
|
397
|
-
|
398
|
-
/**
|
399
|
-
* Clear transition
|
400
|
-
* for immediate jump effect
|
401
|
-
*/
|
402
|
-
'clearTransition': function() {
|
403
|
-
$(this).css( prefix + 'transition', 'none');
|
404
|
-
},
|
405
|
-
|
406
|
-
/**
|
407
|
-
* Set translate value
|
408
|
-
* @param {Object} event
|
409
|
-
* @param {Ind} translate
|
410
|
-
*/
|
411
|
-
'setTranslate': function(event, translate) {
|
412
|
-
// if css3 suported set translate3d
|
413
|
-
if (self.cssSupport) $(this).css( prefix + 'transform', 'translate3d(' + translate + 'px, 0px, 0px)');
|
414
|
-
// if not set left margin
|
415
|
-
else $(this).css('margin-left', translate);
|
416
|
-
}
|
417
|
-
|
418
|
-
});
|
419
|
-
|
420
|
-
};
|
421
|
-
|
422
|
-
/**
|
423
|
-
* Events controllers
|
424
|
-
*/
|
425
|
-
Glide.prototype.events = function() {
|
426
|
-
|
427
|
-
/**
|
428
|
-
* Swipe
|
429
|
-
* If swipe option is true
|
430
|
-
* Attach touch events
|
431
|
-
*/
|
432
|
-
if (this.options.touchDistance) {
|
433
|
-
this.parent.on({
|
434
|
-
'touchstart MSPointerDown': $.proxy(this.events.touchstart, this),
|
435
|
-
'touchmove MSPointerMove': $.proxy(this.events.touchmove, this),
|
436
|
-
'touchend MSPointerUp': $.proxy(this.events.touchend, this),
|
437
|
-
});
|
438
|
-
}
|
439
|
-
|
440
|
-
/**
|
441
|
-
* Arrows
|
442
|
-
* If arrows exists
|
443
|
-
* Attach click event
|
444
|
-
*/
|
445
|
-
if (this.arrows.wrapper) {
|
446
|
-
$(this.arrows.wrapper).children().on('click touchstart',
|
447
|
-
$.proxy(this.events.arrows, this)
|
448
|
-
);
|
449
|
-
}
|
450
|
-
|
451
|
-
/**
|
452
|
-
* Navigation
|
453
|
-
* If navigation exists
|
454
|
-
* Attach click event
|
455
|
-
*/
|
456
|
-
if (this.navigation.wrapper) {
|
457
|
-
$(this.navigation.wrapper).children().on('click touchstart',
|
458
|
-
$.proxy(this.events.navigation, this)
|
459
|
-
);
|
460
|
-
}
|
461
|
-
|
462
|
-
/**
|
463
|
-
* Keyboard
|
464
|
-
* If keyboard option is true
|
465
|
-
* Attach press event
|
466
|
-
*/
|
467
|
-
if (this.options.keyboard) {
|
468
|
-
$(document).on('keyup.glideKeyup',
|
469
|
-
$.proxy(this.events.keyboard, this)
|
470
|
-
);
|
471
|
-
}
|
472
|
-
|
473
|
-
/**
|
474
|
-
* Slider hover
|
475
|
-
* If hover option is true
|
476
|
-
* Attach hover event
|
477
|
-
*/
|
478
|
-
if (this.options.hoverpause) {
|
479
|
-
this.parent.on('mouseover mouseout',
|
480
|
-
$.proxy(this.events.hover, this)
|
481
|
-
);
|
482
|
-
}
|
483
|
-
|
484
|
-
/**
|
485
|
-
* Slider resize
|
486
|
-
* On window resize
|
487
|
-
* Attach resize event
|
488
|
-
*/
|
489
|
-
$(window).on('resize',
|
490
|
-
$.proxy(this.events.resize, this)
|
491
|
-
);
|
492
|
-
|
493
|
-
};
|
494
|
-
|
495
|
-
/**
|
496
|
-
* Navigation event controller
|
497
|
-
* On click in navigation item get distance
|
498
|
-
* Then slide specified distance with jump
|
499
|
-
*/
|
500
|
-
Glide.prototype.events.navigation = function(event) {
|
501
|
-
|
502
|
-
if ( !this.wrapper.attr('disabled') ) {
|
503
|
-
// Prevent default behaviour
|
504
|
-
event.preventDefault();
|
505
|
-
// Slide distance specified in data attribute
|
506
|
-
this.slide( $(event.currentTarget).data('distance'), true );
|
507
|
-
}
|
508
|
-
|
509
|
-
};
|
510
|
-
|
511
|
-
/**
|
512
|
-
* Arrows event controller
|
513
|
-
* On click in arrows get direction and distance
|
514
|
-
* Then slide specified distance without jump
|
515
|
-
* @param {Obejct} event
|
516
|
-
*/
|
517
|
-
Glide.prototype.events.arrows = function(event) {
|
518
|
-
|
519
|
-
if ( !this.wrapper.attr('disabled') ) {
|
520
|
-
// Prevent default behaviour
|
521
|
-
event.preventDefault();
|
522
|
-
// Slide distance specified in data attribute
|
523
|
-
this.slide( $(event.currentTarget).data('distance'), false );
|
524
|
-
}
|
525
|
-
|
526
|
-
};
|
527
|
-
|
528
|
-
/**
|
529
|
-
* Keyboard arrows event controller
|
530
|
-
* Keyboard left and right arrow keys press
|
531
|
-
*/
|
532
|
-
Glide.prototype.events.keyboard = function(event) {
|
533
|
-
|
534
|
-
if ( !this.wrapper.attr('disabled') ) {
|
535
|
-
// Next
|
536
|
-
if (event.keyCode === 39) this.slide(1);
|
537
|
-
// Prev
|
538
|
-
if (event.keyCode === 37) this.slide(-1);
|
539
|
-
}
|
540
|
-
|
541
|
-
};
|
542
|
-
|
543
|
-
/**
|
544
|
-
* When mouse is over slider, pause autoplay
|
545
|
-
* On out, start autoplay again
|
546
|
-
*/
|
547
|
-
Glide.prototype.events.hover = function(event) {
|
548
|
-
|
549
|
-
// Pasue autoplay
|
550
|
-
this.pause();
|
551
|
-
|
552
|
-
// When mouse left slider or touch end, start autoplay anew
|
553
|
-
if (event.type === 'mouseout') this.play();
|
554
|
-
|
555
|
-
};
|
556
|
-
|
557
|
-
/**
|
558
|
-
* When resize browser window
|
559
|
-
* Reinit plugin for new slider dimensions
|
560
|
-
* Correct crop to current slide
|
561
|
-
*/
|
562
|
-
Glide.prototype.events.resize = function(event) {
|
563
|
-
|
564
|
-
// Reinit plugin (set new slider dimensions)
|
565
|
-
this.dimensions();
|
566
|
-
// Crop to current slide
|
567
|
-
this.slide(0);
|
568
|
-
|
569
|
-
};
|
570
|
-
|
571
|
-
/**
|
572
|
-
* Disable events thats controls slide changes
|
573
|
-
*/
|
574
|
-
Glide.prototype.disableEvents = function() {
|
575
|
-
this.wrapper.attr( "disabled", true );
|
576
|
-
};
|
577
|
-
|
578
|
-
/**
|
579
|
-
* Enable events thats controls slide changes
|
580
|
-
*/
|
581
|
-
Glide.prototype.enableEvents = function() {
|
582
|
-
this.wrapper.attr( "disabled", false );
|
583
|
-
};
|
584
|
-
|
585
|
-
/**
|
586
|
-
* Touch start
|
587
|
-
* @param {Object} e event
|
588
|
-
*/
|
589
|
-
Glide.prototype.events.touchstart = function(event) {
|
590
|
-
|
591
|
-
// Cache event
|
592
|
-
var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
|
593
|
-
|
594
|
-
// Get touch start points
|
595
|
-
this.events.touchStartX = touch.pageX;
|
596
|
-
this.events.touchStartY = touch.pageY;
|
597
|
-
this.events.touchSin = null;
|
598
|
-
|
599
|
-
};
|
600
|
-
|
601
|
-
/**
|
602
|
-
* Touch move
|
603
|
-
* From swipe length segments calculate swipe angle
|
604
|
-
* @param {Obejct} e event
|
605
|
-
*/
|
606
|
-
Glide.prototype.events.touchmove = function(event) {
|
607
|
-
|
608
|
-
// Cache event
|
609
|
-
var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
|
610
|
-
|
611
|
-
// Calculate start, end points
|
612
|
-
var subExSx = touch.pageX - this.events.touchStartX;
|
613
|
-
var subEySy = touch.pageY - this.events.touchStartY;
|
614
|
-
// Bitwise subExSx pow
|
615
|
-
var powEX = Math.abs( subExSx << 2 );
|
616
|
-
// Bitwise subEySy pow
|
617
|
-
var powEY = Math.abs( subEySy << 2 );
|
618
|
-
// Calculate the length of the hypotenuse segment
|
619
|
-
var touchHypotenuse = Math.sqrt( powEX + powEY );
|
620
|
-
// Calculate the length of the cathetus segment
|
621
|
-
var touchCathetus = Math.sqrt( powEY );
|
622
|
-
|
623
|
-
// Calculate the sine of the angle
|
624
|
-
this.events.touchSin = Math.asin( touchCathetus/touchHypotenuse );
|
625
|
-
|
626
|
-
if ( (this.events.touchSin * (180 / Math.PI)) < 45 ) event.preventDefault();
|
627
|
-
|
628
|
-
};
|
629
|
-
|
630
|
-
/**
|
631
|
-
* Touch end
|
632
|
-
* @param {Object} e event
|
633
|
-
*/
|
634
|
-
Glide.prototype.events.touchend = function(event) {
|
635
|
-
|
636
|
-
// Cache event
|
637
|
-
var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
|
638
|
-
|
639
|
-
// Calculate touch distance
|
640
|
-
var touchDistance = touch.pageX - this.events.touchStartX;
|
641
|
-
|
642
|
-
// While touch is positive and greater than distance set in options
|
643
|
-
if ( (touchDistance > this.options.touchDistance) && ( (this.events.touchSin * (180 / Math.PI)) < 45) ) {
|
644
|
-
// Slide one backward
|
645
|
-
this.slide(-1);
|
646
|
-
// While touch is negative and lower than negative distance set in options
|
647
|
-
} else if (
|
648
|
-
(touchDistance < -this.options.touchDistance) && ( (this.events.touchSin * (180 / Math.PI)) < 45) ) {
|
649
|
-
// Slide one forward
|
650
|
-
this.slide(1);
|
651
|
-
}
|
652
|
-
|
653
|
-
};
|
654
|
-
|
655
|
-
/**
|
656
|
-
* Slides change & animate logic
|
657
|
-
* @param {int} distance
|
658
|
-
* @param {bool} jump
|
659
|
-
* @param {function} callback
|
660
|
-
*/
|
661
|
-
Glide.prototype.slide = function(distance, jump, callback) {
|
662
|
-
|
663
|
-
/**
|
664
|
-
* Stop autoplay
|
665
|
-
* Clearing timer
|
666
|
-
*/
|
667
|
-
this.pause();
|
668
|
-
|
669
|
-
// Callbacks before slide change
|
670
|
-
this.options.beforeTransition.call(this);
|
671
|
-
|
672
|
-
// Setup variables
|
673
|
-
var self = this,
|
674
|
-
currentSlide = (jump) ? 0 : this.currentSlide,
|
675
|
-
slidesLength = -(this.slides.length-1),
|
676
|
-
fromFirst = false,
|
677
|
-
fromLast = false;
|
678
|
-
|
679
|
-
/**
|
680
|
-
* Check if current slide is first and direction is previous, then go to last slide
|
681
|
-
* or current slide is last and direction is next, then go to the first slide
|
682
|
-
* else change current slide normally
|
683
|
-
*/
|
684
|
-
if ( currentSlide === 0 && distance === -1 ) {
|
685
|
-
fromFirst = true;
|
686
|
-
currentSlide = slidesLength;
|
687
|
-
} else if ( currentSlide === slidesLength && distance === 1 ) {
|
688
|
-
fromLast = true;
|
689
|
-
currentSlide = 0;
|
690
|
-
} else {
|
691
|
-
currentSlide = currentSlide + (-distance);
|
692
|
-
}
|
693
|
-
|
694
|
-
/**
|
695
|
-
* Crop to current slide.
|
696
|
-
* Mul slide width by current slide number.
|
697
|
-
*/
|
698
|
-
var offset = this.slides.spread * currentSlide;
|
699
|
-
|
700
|
-
/**
|
701
|
-
* While circular decrease offset with the width of single slide
|
702
|
-
* When fromFirst and fromLast flags are set, unbind events thats controls changing
|
703
|
-
* When fromLast flags is set, set offset to slide width mulled by slides count without cloned slides
|
704
|
-
* When fromFirst flags is set, set offset to zero
|
705
|
-
*/
|
706
|
-
if (this.options.circular) {
|
707
|
-
offset = offset - this.slides.spread;
|
708
|
-
if (fromLast || fromFirst) this.disableEvents();
|
709
|
-
if (fromLast) offset = this.slides.spread * (slidesLength - 2);
|
710
|
-
if (fromFirst) offset = 0;
|
711
|
-
}
|
712
|
-
|
713
|
-
/**
|
714
|
-
* Slide change animation
|
715
|
-
* While CSS3 is supported use offset
|
716
|
-
* if not, use $.animate();
|
717
|
-
*/
|
718
|
-
if (this.cssSupport) this.wrapper.trigger('setTransition').trigger('setTranslate', [offset]);
|
719
|
-
else this.wrapper.stop().animate({ 'margin-left': offset }, this.options.animationDuration);
|
720
|
-
|
721
|
-
/**
|
722
|
-
* While circular
|
723
|
-
*/
|
724
|
-
if (this.options.circular) {
|
725
|
-
|
726
|
-
/**
|
727
|
-
* When fromFirst and fromLast flags are set
|
728
|
-
* after animation clear transition and bind events that control slides changing
|
729
|
-
*/
|
730
|
-
if (fromFirst || fromLast) {
|
731
|
-
this.afterAnimation(function(){
|
732
|
-
self.wrapper.trigger('clearTransition');
|
733
|
-
self.enableEvents();
|
734
|
-
});
|
735
|
-
}
|
736
|
-
|
737
|
-
/**
|
738
|
-
* When fromLast flag is set
|
739
|
-
* after animation make immediate jump from cloned slide to proper one
|
740
|
-
*/
|
741
|
-
if (fromLast) {
|
742
|
-
this.afterAnimation(function(){
|
743
|
-
fromLast = false;
|
744
|
-
self.wrapper.trigger('setTranslate', [-self.slides.spread]);
|
745
|
-
});
|
746
|
-
}
|
747
|
-
|
748
|
-
/**
|
749
|
-
* When fromFirst flag is set
|
750
|
-
* after animation make immediate jump from cloned slide to proper one
|
751
|
-
*/
|
752
|
-
if (fromFirst) {
|
753
|
-
this.afterAnimation(function(){
|
754
|
-
fromFirst = false;
|
755
|
-
self.wrapper.trigger('setTranslate', [self.slides.spread * (slidesLength-1)]);
|
756
|
-
});
|
757
|
-
}
|
758
|
-
|
759
|
-
}
|
760
|
-
|
761
|
-
// Set to navigation item current class
|
762
|
-
if (this.options.navigation && this.navigation.wrapper) {
|
763
|
-
$(this.parent).children('.' + this.options.navigationClass).children()
|
764
|
-
.eq(-currentSlide)
|
765
|
-
.addClass(this.options.navigationCurrentItemClass)
|
766
|
-
.siblings()
|
767
|
-
.removeClass(this.options.navigationCurrentItemClass);
|
768
|
-
}
|
769
|
-
|
770
|
-
// Update current slide globaly
|
771
|
-
this.currentSlide = currentSlide;
|
772
|
-
|
773
|
-
// Callbacks after slide change
|
774
|
-
this.afterAnimation(function(){
|
775
|
-
self.options.afterTransition.call(self);
|
776
|
-
if ( (callback !== 'undefined') && (typeof callback === 'function') ) callback();
|
777
|
-
});
|
778
|
-
|
779
|
-
/**
|
780
|
-
* Start autoplay
|
781
|
-
* Setting up timer
|
782
|
-
*/
|
783
|
-
this.play();
|
784
|
-
|
785
|
-
};
|
786
|
-
|
787
|
-
/**
|
788
|
-
* Autoplay logic
|
789
|
-
* Setup counting
|
790
|
-
*/
|
791
|
-
Glide.prototype.play = function() {
|
792
|
-
|
793
|
-
// Cache this
|
794
|
-
var self = this;
|
795
|
-
|
796
|
-
/**
|
797
|
-
* If autoplay turn on
|
798
|
-
* Slide one forward after a set time
|
799
|
-
*/
|
800
|
-
if (this.options.autoplay) {
|
801
|
-
this.auto = setInterval(function() {
|
802
|
-
self.slide(1, false);
|
803
|
-
}, this.options.autoplay);
|
804
|
-
}
|
805
|
-
|
806
|
-
};
|
807
|
-
|
808
|
-
/**
|
809
|
-
* Autoplay pause
|
810
|
-
* Clear counting
|
811
|
-
*/
|
812
|
-
Glide.prototype.pause = function() {
|
813
|
-
|
814
|
-
/**
|
815
|
-
* If autoplay turn on
|
816
|
-
* Clear interial
|
817
|
-
*/
|
818
|
-
if (this.options.autoplay) this.auto = clearInterval(this.auto);
|
819
|
-
|
820
|
-
};
|
821
|
-
|
822
|
-
/**
|
823
|
-
* Call callback after animation duration
|
824
|
-
* Added 10 ms to duration to be sure is fired after animation
|
825
|
-
* @param {Function} callback
|
826
|
-
*/
|
827
|
-
Glide.prototype.afterAnimation = function(callback) {
|
828
|
-
|
829
|
-
setTimeout(function(){
|
830
|
-
callback();
|
831
|
-
}, this.options.animationDuration + 10);
|
832
|
-
|
833
|
-
};
|
834
|
-
|
835
|
-
/**
|
836
|
-
* Dimensions
|
837
|
-
* Get & set dimensions of slider elements
|
838
|
-
*/
|
839
|
-
Glide.prototype.dimensions = function() {
|
840
|
-
|
841
|
-
// Get slide width
|
842
|
-
this.slides.spread = this.parent.width();
|
843
|
-
// Set wrapper width
|
844
|
-
this.wrapper.width(this.slides.spread * (this.slides.length + this.offset));
|
845
|
-
// Set slide width
|
846
|
-
this.slides.add(this.firstClone).add(this.lastClone).width(this.slides.spread);
|
847
|
-
|
848
|
-
};
|
849
|
-
|
850
|
-
/**
|
851
|
-
* Initialize
|
852
|
-
* Set wrapper
|
853
|
-
* Set slides
|
854
|
-
* Set animation type
|
855
|
-
*/
|
856
|
-
Glide.prototype.init = function() {
|
857
|
-
|
858
|
-
// Set slides wrapper
|
859
|
-
this.wrapper = this.parent.children();
|
860
|
-
// Set slides
|
861
|
-
this.slides = this.wrapper.children();
|
862
|
-
// Set slider dimentions
|
863
|
-
this.dimensions();
|
864
|
-
|
865
|
-
// Build DOM
|
866
|
-
this.build();
|
867
|
-
|
868
|
-
};
|
869
|
-
|
870
|
-
|
871
|
-
/**
|
872
|
-
* Methods for css3 management
|
873
|
-
*/
|
874
|
-
Glide.prototype.css = {
|
875
|
-
|
876
|
-
/**
|
877
|
-
* Check css3 support
|
878
|
-
* @param {String} Declaration name to check
|
879
|
-
* @return {Boolean}
|
880
|
-
*/
|
881
|
-
isSupported: function(declaration) {
|
882
|
-
|
883
|
-
var isSupported = false,
|
884
|
-
prefixes = 'Khtml ms O Moz Webkit'.split(' '),
|
885
|
-
clone = document.createElement('div'),
|
886
|
-
declarationCapital = null;
|
887
|
-
|
888
|
-
declaration = declaration.toLowerCase();
|
889
|
-
if (clone.style[declaration] !== undefined) isSupported = true;
|
890
|
-
if (isSupported === false) {
|
891
|
-
declarationCapital = declaration.charAt(0).toUpperCase() + declaration.substr(1);
|
892
|
-
for( var i = 0; i < prefixes.length; i++ ) {
|
893
|
-
if( clone.style[prefixes[i] + declarationCapital ] !== undefined ) {
|
894
|
-
isSupported = true;
|
895
|
-
break;
|
896
|
-
}
|
897
|
-
}
|
898
|
-
}
|
899
|
-
|
900
|
-
if (window.opera) {
|
901
|
-
if (window.opera.version() < 13) isSupported = false;
|
902
|
-
}
|
903
|
-
|
904
|
-
if (isSupported === 'undefined' || isSupported === undefined) isSupported = false;
|
905
|
-
|
906
|
-
return isSupported;
|
907
|
-
|
908
|
-
},
|
909
|
-
|
910
|
-
/**
|
911
|
-
* Get browser css prefix
|
912
|
-
* @return {String} Returns prefix in "-{prefix}-" format
|
913
|
-
*/
|
914
|
-
getPrefix: function () {
|
915
|
-
|
916
|
-
if (!window.getComputedStyle) return '';
|
917
|
-
|
918
|
-
var styles = window.getComputedStyle(document.documentElement, '');
|
919
|
-
return '-' + (Array.prototype.slice
|
920
|
-
.call(styles)
|
921
|
-
.join('')
|
922
|
-
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
|
923
|
-
)[1] + '-';
|
924
|
-
|
925
|
-
}
|
926
|
-
|
927
|
-
};
|
928
|
-
|
929
|
-
$.fn[name] = function(options) {
|
930
|
-
|
931
|
-
return this.each(function () {
|
932
|
-
if ( !$.data(this, 'api_' + name) ) {
|
933
|
-
$.data(this, 'api_' + name,
|
934
|
-
new Glide($(this), options)
|
935
|
-
);
|
936
|
-
}
|
937
|
-
});
|
938
|
-
|
939
|
-
};
|
940
|
-
|
941
|
-
})(jQuery, window, document);
|