spree_showcase 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/models/spree/slide.rb +36 -10
- data/app/overrides/{add_showcase_to_admin_configuration_menu.rb → showcase/add_showcase_to_admin_configuration_menu.rb} +0 -0
- data/app/overrides/{add_showcase_to_admin_configurations_side_menu.rb → showcase/add_showcase_to_admin_configurations_side_menu.rb} +0 -0
- data/app/overrides/showcase/add_showcase_to_home_layout.rb +12 -0
- data/app/views/spree/admin/shared/_showcase_submenu.html.erb +1 -1
- data/app/views/spree/admin/showcase_settings/edit.html.erb +4 -1
- data/app/views/spree/admin/showcase_settings/show.html.erb +17 -6
- data/app/views/spree/admin/slides/edit.html.erb +4 -1
- data/app/views/spree/admin/slides/index.html.erb +13 -9
- data/app/views/spree/admin/slides/new.html.erb +3 -1
- data/app/views/spree/slides/_showcase.html.erb +63 -28
- data/config/locales/en.yml +16 -1
- data/lib/generators/spree_showcase/install/assets/overrides/showcase/add_showcase_to_home_layout.rb +12 -0
- data/lib/generators/spree_showcase/install/assets/partials/_showcase.html.erb +32 -0
- data/lib/generators/spree_showcase/install/assets/stylesheets/store/showcase.css.scss +1 -1
- data/lib/generators/spree_showcase/install/assets/vendor/javascripts/jquery.flexslider.js +903 -0
- data/lib/generators/spree_showcase/install/assets/vendor/stylesheets/jquery.flexslider.css +76 -0
- data/lib/generators/spree_showcase/install/install_generator.rb +47 -22
- data/lib/spree/showcase_configuration.rb +1 -0
- data/spree_showcase-0.5.3.gem +0 -0
- data/spree_showcase.gemspec +3 -3
- data/vendor/assets/javascripts/jquery.flexslider.js +903 -0
- data/vendor/assets/stylesheets/jquery.flexslider.css +76 -0
- metadata +16 -14
- data/app/overrides/add_showcase_to_home_layout.rb +0 -8
- data/app/overrides/insert_slider_into_spree_application.rb +0 -10
- data/lib/generators/spree_showcase/install/assets/javascripts/store/jquery.flexslider.js +0 -563
- data/lib/generators/spree_showcase/install/assets/javascripts/store/showcase.js.erb +0 -32
- data/lib/generators/spree_showcase/install/assets/stylesheets/store/flexslider.css +0 -64
@@ -0,0 +1,76 @@
|
|
1
|
+
/*
|
2
|
+
* jQuery FlexSlider v2.0
|
3
|
+
* http://www.woothemes.com/flexslider/
|
4
|
+
*
|
5
|
+
* Copyright 2012 WooThemes
|
6
|
+
* Free to use under the GPLv2 license.
|
7
|
+
* http://www.gnu.org/licenses/gpl-2.0.html
|
8
|
+
*
|
9
|
+
* Contributing author: Tyler Smith (@mbmufffin)
|
10
|
+
*/
|
11
|
+
|
12
|
+
|
13
|
+
/* Browser Resets */
|
14
|
+
.flex-container a:active,
|
15
|
+
.flexslider a:active,
|
16
|
+
.flex-container a:focus,
|
17
|
+
.flexslider a:focus {outline: none;}
|
18
|
+
.slides,
|
19
|
+
.flex-control-nav,
|
20
|
+
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
|
21
|
+
|
22
|
+
/* FlexSlider Necessary Styles
|
23
|
+
*********************************/
|
24
|
+
.flexslider {margin: 0; padding: 0;}
|
25
|
+
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
|
26
|
+
.flexslider .slides img {width: 100%; display: block;}
|
27
|
+
.flex-pauseplay span {text-transform: capitalize;}
|
28
|
+
|
29
|
+
/* Clearfix for the .slides element */
|
30
|
+
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
|
31
|
+
html[xmlns] .slides {display: block;}
|
32
|
+
* html .slides {height: 1%;}
|
33
|
+
|
34
|
+
/* No JavaScript Fallback */
|
35
|
+
/* If you are not using another script, such as Modernizr, make sure you
|
36
|
+
* include js that eliminates this class on page load */
|
37
|
+
.no-js .slides > li:first-child {display: block;}
|
38
|
+
|
39
|
+
|
40
|
+
/* FlexSlider Default Theme
|
41
|
+
*********************************/
|
42
|
+
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
|
43
|
+
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
|
44
|
+
.loading .flex-viewport {max-height: 300px;}
|
45
|
+
.flexslider .slides {zoom: 1;}
|
46
|
+
|
47
|
+
.carousel li {margin-right: 5px}
|
48
|
+
|
49
|
+
|
50
|
+
/* Direction Nav */
|
51
|
+
.flex-direction-nav {*height: 0;}
|
52
|
+
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
|
53
|
+
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
|
54
|
+
.flex-direction-nav .flex-prev {left: -36px;}
|
55
|
+
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
|
56
|
+
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
|
57
|
+
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
|
58
|
+
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
|
59
|
+
|
60
|
+
/* Control Nav */
|
61
|
+
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
|
62
|
+
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
|
63
|
+
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
|
64
|
+
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
|
65
|
+
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
|
66
|
+
|
67
|
+
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
|
68
|
+
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
|
69
|
+
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
|
70
|
+
.flex-control-thumbs img:hover {opacity: 1;}
|
71
|
+
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
|
72
|
+
|
73
|
+
@media screen and (max-width: 860px) {
|
74
|
+
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
|
75
|
+
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
|
76
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: spree_showcase
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.6.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,24 +9,24 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-01-09 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: spree_core
|
16
16
|
requirement: !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
|
-
- -
|
19
|
+
- - ! '>='
|
20
20
|
- !ruby/object:Gem::Version
|
21
|
-
version: 1.
|
21
|
+
version: 1.3.0
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
24
|
version_requirements: !ruby/object:Gem::Requirement
|
25
25
|
none: false
|
26
26
|
requirements:
|
27
|
-
- -
|
27
|
+
- - ! '>='
|
28
28
|
- !ruby/object:Gem::Version
|
29
|
-
version: 1.
|
29
|
+
version: 1.3.0
|
30
30
|
- !ruby/object:Gem::Dependency
|
31
31
|
name: capybara
|
32
32
|
requirement: !ruby/object:Gem::Requirement
|
@@ -130,10 +130,9 @@ files:
|
|
130
130
|
- app/controllers/spree/admin/showcase_settings_controller.rb
|
131
131
|
- app/controllers/spree/admin/slides_controller.rb
|
132
132
|
- app/models/spree/slide.rb
|
133
|
-
- app/overrides/add_showcase_to_admin_configuration_menu.rb
|
134
|
-
- app/overrides/add_showcase_to_admin_configurations_side_menu.rb
|
135
|
-
- app/overrides/add_showcase_to_home_layout.rb
|
136
|
-
- app/overrides/insert_slider_into_spree_application.rb
|
133
|
+
- app/overrides/showcase/add_showcase_to_admin_configuration_menu.rb
|
134
|
+
- app/overrides/showcase/add_showcase_to_admin_configurations_side_menu.rb
|
135
|
+
- app/overrides/showcase/add_showcase_to_home_layout.rb
|
137
136
|
- app/views/spree/admin/shared/_showcase_settings.html.erb
|
138
137
|
- app/views/spree/admin/shared/_showcase_submenu.html.erb
|
139
138
|
- app/views/spree/admin/showcase_settings/edit.html.erb
|
@@ -150,19 +149,22 @@ files:
|
|
150
149
|
- config/routes.rb
|
151
150
|
- db/migrate/20120506161852_create_slides.rb
|
152
151
|
- db/migrate/20120507074922_add_position_to_slide.rb
|
153
|
-
- lib/generators/spree_showcase/install/assets/
|
154
|
-
- lib/generators/spree_showcase/install/assets/javascripts/store/showcase.js.erb
|
152
|
+
- lib/generators/spree_showcase/install/assets/overrides/showcase/add_showcase_to_home_layout.rb
|
155
153
|
- lib/generators/spree_showcase/install/assets/partials/_showcase.html.erb
|
156
|
-
- lib/generators/spree_showcase/install/assets/stylesheets/store/flexslider.css
|
157
154
|
- lib/generators/spree_showcase/install/assets/stylesheets/store/showcase.css.scss
|
155
|
+
- lib/generators/spree_showcase/install/assets/vendor/javascripts/jquery.flexslider.js
|
156
|
+
- lib/generators/spree_showcase/install/assets/vendor/stylesheets/jquery.flexslider.css
|
158
157
|
- lib/generators/spree_showcase/install/install_generator.rb
|
159
158
|
- lib/spree/showcase_configuration.rb
|
160
159
|
- lib/spree_showcase.rb
|
161
160
|
- lib/spree_showcase/engine.rb
|
162
161
|
- script/rails
|
163
162
|
- spec/spec_helper.rb
|
163
|
+
- spree_showcase-0.5.3.gem
|
164
164
|
- spree_showcase.gemspec
|
165
|
-
|
165
|
+
- vendor/assets/javascripts/jquery.flexslider.js
|
166
|
+
- vendor/assets/stylesheets/jquery.flexslider.css
|
167
|
+
homepage: http://damon.theidealweb.com
|
166
168
|
licenses: []
|
167
169
|
post_install_message:
|
168
170
|
rdoc_options: []
|
@@ -1,10 +0,0 @@
|
|
1
|
-
|
2
|
-
Deface::Override.new(
|
3
|
-
:virtual_path => "spree/layouts/spree_application",
|
4
|
-
:name => "add_showcase_yield_into_spree_layout",
|
5
|
-
:insert_after => %q{#header[data-hook]},
|
6
|
-
:text => %q{
|
7
|
-
<div id='spree-showcase' data-hook>
|
8
|
-
<%= yield :spree_showcase %>
|
9
|
-
</div>}
|
10
|
-
)
|
@@ -1,563 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* jQuery FlexSlider v1.8
|
3
|
-
* http://www.woothemes.com/flexslider/
|
4
|
-
*
|
5
|
-
* Copyright 2012 WooThemes
|
6
|
-
* Free to use under the MIT license.
|
7
|
-
* http://www.opensource.org/licenses/mit-license.php
|
8
|
-
*
|
9
|
-
* Contributing Author: Tyler Smith
|
10
|
-
*/
|
11
|
-
|
12
|
-
;(function ($) {
|
13
|
-
|
14
|
-
//FlexSlider: Object Instance
|
15
|
-
$.flexslider = function(el, options) {
|
16
|
-
var slider = $(el);
|
17
|
-
|
18
|
-
// slider DOM reference for use outside of the plugin
|
19
|
-
$.data(el, "flexslider", slider);
|
20
|
-
|
21
|
-
slider.init = function() {
|
22
|
-
slider.vars = $.extend({}, $.flexslider.defaults, options);
|
23
|
-
$.data(el, 'flexsliderInit', true);
|
24
|
-
slider.container = $('.slides', slider).first();
|
25
|
-
slider.slides = $('.slides:first > li', slider);
|
26
|
-
slider.count = slider.slides.length;
|
27
|
-
slider.animating = false;
|
28
|
-
slider.currentSlide = slider.vars.slideToStart;
|
29
|
-
slider.animatingTo = slider.currentSlide;
|
30
|
-
slider.atEnd = (slider.currentSlide == 0) ? true : false;
|
31
|
-
slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
|
32
|
-
slider.cloneCount = 0;
|
33
|
-
slider.cloneOffset = 0;
|
34
|
-
slider.manualPause = false;
|
35
|
-
slider.vertical = (slider.vars.slideDirection == "vertical");
|
36
|
-
slider.prop = (slider.vertical) ? "top" : "marginLeft";
|
37
|
-
slider.args = {};
|
38
|
-
|
39
|
-
//Test for webbkit CSS3 Animations
|
40
|
-
slider.transitions = "webkitTransition" in document.body.style;
|
41
|
-
if (slider.transitions) slider.prop = "-webkit-transform";
|
42
|
-
|
43
|
-
//Test for controlsContainer
|
44
|
-
if (slider.vars.controlsContainer != "") {
|
45
|
-
slider.controlsContainer = $(slider.vars.controlsContainer).eq($('.slides').index(slider.container));
|
46
|
-
slider.containerExists = slider.controlsContainer.length > 0;
|
47
|
-
}
|
48
|
-
//Test for manualControls
|
49
|
-
if (slider.vars.manualControls != "") {
|
50
|
-
slider.manualControls = $(slider.vars.manualControls, ((slider.containerExists) ? slider.controlsContainer : slider));
|
51
|
-
slider.manualExists = slider.manualControls.length > 0;
|
52
|
-
}
|
53
|
-
|
54
|
-
///////////////////////////////////////////////////////////////////
|
55
|
-
// FlexSlider: Randomize Slides
|
56
|
-
if (slider.vars.randomize) {
|
57
|
-
slider.slides.sort(function() { return (Math.round(Math.random())-0.5); });
|
58
|
-
slider.container.empty().append(slider.slides);
|
59
|
-
}
|
60
|
-
///////////////////////////////////////////////////////////////////
|
61
|
-
|
62
|
-
///////////////////////////////////////////////////////////////////
|
63
|
-
// FlexSlider: Slider Animation Initialize
|
64
|
-
if (slider.vars.animation.toLowerCase() == "slide") {
|
65
|
-
if (slider.transitions) {
|
66
|
-
slider.setTransition(0);
|
67
|
-
}
|
68
|
-
slider.css({"overflow": "hidden"});
|
69
|
-
if (slider.vars.animationLoop) {
|
70
|
-
slider.cloneCount = 2;
|
71
|
-
slider.cloneOffset = 1;
|
72
|
-
slider.container.append(slider.slides.filter(':first').clone().addClass('clone')).prepend(slider.slides.filter(':last').clone().addClass('clone'));
|
73
|
-
}
|
74
|
-
//create newSlides to capture possible clones
|
75
|
-
slider.newSlides = $('.slides:first > li', slider);
|
76
|
-
var sliderOffset = (-1 * (slider.currentSlide + slider.cloneOffset));
|
77
|
-
if (slider.vertical) {
|
78
|
-
slider.newSlides.css({"display": "block", "width": "100%", "float": "left"});
|
79
|
-
slider.container.height((slider.count + slider.cloneCount) * 200 + "%").css("position", "absolute").width("100%");
|
80
|
-
//Timeout function to give browser enough time to get proper height initially
|
81
|
-
setTimeout(function() {
|
82
|
-
slider.css({"position": "relative"}).height(slider.slides.filter(':first').height());
|
83
|
-
slider.args[slider.prop] = (slider.transitions) ? "translate3d(0," + sliderOffset * slider.height() + "px,0)" : sliderOffset * slider.height() + "px";
|
84
|
-
slider.container.css(slider.args);
|
85
|
-
}, 100);
|
86
|
-
|
87
|
-
} else {
|
88
|
-
slider.args[slider.prop] = (slider.transitions) ? "translate3d(" + sliderOffset * slider.width() + "px,0,0)" : sliderOffset * slider.width() + "px";
|
89
|
-
slider.container.width((slider.count + slider.cloneCount) * 200 + "%").css(slider.args);
|
90
|
-
//Timeout function to give browser enough time to get proper width initially
|
91
|
-
setTimeout(function() {
|
92
|
-
slider.newSlides.width(slider.width()).css({"float": "left", "display": "block"});
|
93
|
-
}, 100);
|
94
|
-
}
|
95
|
-
|
96
|
-
} else { //Default to fade
|
97
|
-
//Not supporting fade CSS3 transitions right now
|
98
|
-
slider.transitions = false;
|
99
|
-
slider.slides.css({"width": "100%", "float": "left", "marginRight": "-100%"}).eq(slider.currentSlide).fadeIn(slider.vars.animationDuration);
|
100
|
-
}
|
101
|
-
///////////////////////////////////////////////////////////////////
|
102
|
-
|
103
|
-
///////////////////////////////////////////////////////////////////
|
104
|
-
// FlexSlider: Control Nav
|
105
|
-
if (slider.vars.controlNav) {
|
106
|
-
if (slider.manualExists) {
|
107
|
-
slider.controlNav = slider.manualControls;
|
108
|
-
} else {
|
109
|
-
var controlNavScaffold = $('<ol class="flex-control-nav"></ol>');
|
110
|
-
var j = 1;
|
111
|
-
for (var i = 0; i < slider.count; i++) {
|
112
|
-
controlNavScaffold.append('<li><a>' + j + '</a></li>');
|
113
|
-
j++;
|
114
|
-
}
|
115
|
-
|
116
|
-
if (slider.containerExists) {
|
117
|
-
$(slider.controlsContainer).append(controlNavScaffold);
|
118
|
-
slider.controlNav = $('.flex-control-nav li a', slider.controlsContainer);
|
119
|
-
} else {
|
120
|
-
slider.append(controlNavScaffold);
|
121
|
-
slider.controlNav = $('.flex-control-nav li a', slider);
|
122
|
-
}
|
123
|
-
}
|
124
|
-
|
125
|
-
slider.controlNav.eq(slider.currentSlide).addClass('active');
|
126
|
-
|
127
|
-
slider.controlNav.bind(slider.eventType, function(event) {
|
128
|
-
event.preventDefault();
|
129
|
-
if (!$(this).hasClass('active')) {
|
130
|
-
(slider.controlNav.index($(this)) > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
|
131
|
-
slider.flexAnimate(slider.controlNav.index($(this)), slider.vars.pauseOnAction);
|
132
|
-
}
|
133
|
-
});
|
134
|
-
}
|
135
|
-
///////////////////////////////////////////////////////////////////
|
136
|
-
|
137
|
-
//////////////////////////////////////////////////////////////////
|
138
|
-
//FlexSlider: Direction Nav
|
139
|
-
if (slider.vars.directionNav) {
|
140
|
-
var directionNavScaffold = $('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + slider.vars.prevText + '</a></li><li><a class="next" href="#">' + slider.vars.nextText + '</a></li></ul>');
|
141
|
-
|
142
|
-
if (slider.containerExists) {
|
143
|
-
$(slider.controlsContainer).append(directionNavScaffold);
|
144
|
-
slider.directionNav = $('.flex-direction-nav li a', slider.controlsContainer);
|
145
|
-
} else {
|
146
|
-
slider.append(directionNavScaffold);
|
147
|
-
slider.directionNav = $('.flex-direction-nav li a', slider);
|
148
|
-
}
|
149
|
-
|
150
|
-
//Set initial disable styles if necessary
|
151
|
-
if (!slider.vars.animationLoop) {
|
152
|
-
if (slider.currentSlide == 0) {
|
153
|
-
slider.directionNav.filter('.prev').addClass('disabled');
|
154
|
-
} else if (slider.currentSlide == slider.count - 1) {
|
155
|
-
slider.directionNav.filter('.next').addClass('disabled');
|
156
|
-
}
|
157
|
-
}
|
158
|
-
|
159
|
-
slider.directionNav.bind(slider.eventType, function(event) {
|
160
|
-
event.preventDefault();
|
161
|
-
var target = ($(this).hasClass('next')) ? slider.getTarget('next') : slider.getTarget('prev');
|
162
|
-
|
163
|
-
if (slider.canAdvance(target)) {
|
164
|
-
slider.flexAnimate(target, slider.vars.pauseOnAction);
|
165
|
-
}
|
166
|
-
});
|
167
|
-
}
|
168
|
-
//////////////////////////////////////////////////////////////////
|
169
|
-
|
170
|
-
//////////////////////////////////////////////////////////////////
|
171
|
-
//FlexSlider: Keyboard Nav
|
172
|
-
if (slider.vars.keyboardNav && $('ul.slides').length == 1) {
|
173
|
-
function keyboardMove(event) {
|
174
|
-
if (slider.animating) {
|
175
|
-
return;
|
176
|
-
} else if (event.keyCode != 39 && event.keyCode != 37){
|
177
|
-
return;
|
178
|
-
} else {
|
179
|
-
if (event.keyCode == 39) {
|
180
|
-
var target = slider.getTarget('next');
|
181
|
-
} else if (event.keyCode == 37){
|
182
|
-
var target = slider.getTarget('prev');
|
183
|
-
}
|
184
|
-
|
185
|
-
if (slider.canAdvance(target)) {
|
186
|
-
slider.flexAnimate(target, slider.vars.pauseOnAction);
|
187
|
-
}
|
188
|
-
}
|
189
|
-
}
|
190
|
-
$(document).bind('keyup', keyboardMove);
|
191
|
-
}
|
192
|
-
//////////////////////////////////////////////////////////////////
|
193
|
-
|
194
|
-
///////////////////////////////////////////////////////////////////
|
195
|
-
// FlexSlider: Mousewheel interaction
|
196
|
-
if (slider.vars.mousewheel) {
|
197
|
-
slider.mousewheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
|
198
|
-
slider.bind(slider.mousewheelEvent, function(e) {
|
199
|
-
e.preventDefault();
|
200
|
-
e = e ? e : window.event;
|
201
|
-
var wheelData = e.detail ? e.detail * -1 : e.originalEvent.wheelDelta / 40,
|
202
|
-
target = (wheelData < 0) ? slider.getTarget('next') : slider.getTarget('prev');
|
203
|
-
|
204
|
-
if (slider.canAdvance(target)) {
|
205
|
-
slider.flexAnimate(target, slider.vars.pauseOnAction);
|
206
|
-
}
|
207
|
-
});
|
208
|
-
}
|
209
|
-
///////////////////////////////////////////////////////////////////
|
210
|
-
|
211
|
-
//////////////////////////////////////////////////////////////////
|
212
|
-
//FlexSlider: Slideshow Setup
|
213
|
-
if (slider.vars.slideshow) {
|
214
|
-
//pauseOnHover
|
215
|
-
if (slider.vars.pauseOnHover && slider.vars.slideshow) {
|
216
|
-
slider.hover(function() {
|
217
|
-
slider.pause();
|
218
|
-
}, function() {
|
219
|
-
if (!slider.manualPause) {
|
220
|
-
slider.resume();
|
221
|
-
}
|
222
|
-
});
|
223
|
-
}
|
224
|
-
|
225
|
-
//Initialize animation
|
226
|
-
slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
|
227
|
-
}
|
228
|
-
//////////////////////////////////////////////////////////////////
|
229
|
-
|
230
|
-
//////////////////////////////////////////////////////////////////
|
231
|
-
//FlexSlider: Pause/Play
|
232
|
-
if (slider.vars.pausePlay) {
|
233
|
-
var pausePlayScaffold = $('<div class="flex-pauseplay"><span></span></div>');
|
234
|
-
|
235
|
-
if (slider.containerExists) {
|
236
|
-
slider.controlsContainer.append(pausePlayScaffold);
|
237
|
-
slider.pausePlay = $('.flex-pauseplay span', slider.controlsContainer);
|
238
|
-
} else {
|
239
|
-
slider.append(pausePlayScaffold);
|
240
|
-
slider.pausePlay = $('.flex-pauseplay span', slider);
|
241
|
-
}
|
242
|
-
|
243
|
-
var pausePlayState = (slider.vars.slideshow) ? 'pause' : 'play';
|
244
|
-
slider.pausePlay.addClass(pausePlayState).text((pausePlayState == 'pause') ? slider.vars.pauseText : slider.vars.playText);
|
245
|
-
|
246
|
-
slider.pausePlay.bind(slider.eventType, function(event) {
|
247
|
-
event.preventDefault();
|
248
|
-
if ($(this).hasClass('pause')) {
|
249
|
-
slider.pause();
|
250
|
-
slider.manualPause = true;
|
251
|
-
} else {
|
252
|
-
slider.resume();
|
253
|
-
slider.manualPause = false;
|
254
|
-
}
|
255
|
-
});
|
256
|
-
}
|
257
|
-
//////////////////////////////////////////////////////////////////
|
258
|
-
|
259
|
-
//////////////////////////////////////////////////////////////////
|
260
|
-
//FlexSlider:Touch Swip Gestures
|
261
|
-
//Some brilliant concepts adapted from the following sources
|
262
|
-
//Source: TouchSwipe - http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
|
263
|
-
//Source: SwipeJS - http://swipejs.com
|
264
|
-
if ('ontouchstart' in document.documentElement) {
|
265
|
-
//For brevity, variables are named for x-axis scrolling
|
266
|
-
//The variables are then swapped if vertical sliding is applied
|
267
|
-
//This reduces redundant code...I think :)
|
268
|
-
//If debugging, recognize variables are named for horizontal scrolling
|
269
|
-
var startX,
|
270
|
-
startY,
|
271
|
-
offset,
|
272
|
-
cwidth,
|
273
|
-
dx,
|
274
|
-
startT,
|
275
|
-
scrolling = false;
|
276
|
-
|
277
|
-
slider.each(function() {
|
278
|
-
if ('ontouchstart' in document.documentElement) {
|
279
|
-
this.addEventListener('touchstart', onTouchStart, false);
|
280
|
-
}
|
281
|
-
});
|
282
|
-
|
283
|
-
function onTouchStart(e) {
|
284
|
-
if (slider.animating) {
|
285
|
-
e.preventDefault();
|
286
|
-
} else if (e.touches.length == 1) {
|
287
|
-
slider.pause();
|
288
|
-
cwidth = (slider.vertical) ? slider.height() : slider.width();
|
289
|
-
startT = Number(new Date());
|
290
|
-
offset = (slider.vertical) ? (slider.currentSlide + slider.cloneOffset) * slider.height() : (slider.currentSlide + slider.cloneOffset) * slider.width();
|
291
|
-
startX = (slider.vertical) ? e.touches[0].pageY : e.touches[0].pageX;
|
292
|
-
startY = (slider.vertical) ? e.touches[0].pageX : e.touches[0].pageY;
|
293
|
-
slider.setTransition(0);
|
294
|
-
|
295
|
-
this.addEventListener('touchmove', onTouchMove, false);
|
296
|
-
this.addEventListener('touchend', onTouchEnd, false);
|
297
|
-
}
|
298
|
-
}
|
299
|
-
|
300
|
-
function onTouchMove(e) {
|
301
|
-
dx = (slider.vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX;
|
302
|
-
scrolling = (slider.vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY));
|
303
|
-
|
304
|
-
if (!scrolling) {
|
305
|
-
e.preventDefault();
|
306
|
-
if (slider.vars.animation == "slide" && slider.transitions) {
|
307
|
-
if (!slider.vars.animationLoop) {
|
308
|
-
dx = dx/((slider.currentSlide == 0 && dx < 0 || slider.currentSlide == slider.count - 1 && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
|
309
|
-
}
|
310
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + (-offset - dx) + "px,0)": "translate3d(" + (-offset - dx) + "px,0,0)";
|
311
|
-
slider.container.css(slider.args);
|
312
|
-
}
|
313
|
-
}
|
314
|
-
}
|
315
|
-
|
316
|
-
function onTouchEnd(e) {
|
317
|
-
slider.animating = false;
|
318
|
-
if (slider.animatingTo == slider.currentSlide && !scrolling && !(dx == null)) {
|
319
|
-
var target = (dx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
|
320
|
-
if (slider.canAdvance(target) && Number(new Date()) - startT < 550 && Math.abs(dx) > 20 || Math.abs(dx) > cwidth/2) {
|
321
|
-
slider.flexAnimate(target, slider.vars.pauseOnAction);
|
322
|
-
} else {
|
323
|
-
slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction);
|
324
|
-
}
|
325
|
-
}
|
326
|
-
|
327
|
-
//Finish the touch by undoing the touch session
|
328
|
-
this.removeEventListener('touchmove', onTouchMove, false);
|
329
|
-
this.removeEventListener('touchend', onTouchEnd, false);
|
330
|
-
startX = null;
|
331
|
-
startY = null;
|
332
|
-
dx = null;
|
333
|
-
offset = null;
|
334
|
-
}
|
335
|
-
}
|
336
|
-
//////////////////////////////////////////////////////////////////
|
337
|
-
|
338
|
-
//////////////////////////////////////////////////////////////////
|
339
|
-
//FlexSlider: Resize Functions (If necessary)
|
340
|
-
if (slider.vars.animation.toLowerCase() == "slide") {
|
341
|
-
$(window).resize(function(){
|
342
|
-
if (!slider.animating && slider.is(":visible")) {
|
343
|
-
if (slider.vertical) {
|
344
|
-
slider.height(slider.slides.filter(':first').height());
|
345
|
-
slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.slides.filter(':first').height() + "px";
|
346
|
-
if (slider.transitions) {
|
347
|
-
slider.setTransition(0);
|
348
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
|
349
|
-
}
|
350
|
-
slider.container.css(slider.args);
|
351
|
-
} else {
|
352
|
-
slider.newSlides.width(slider.width());
|
353
|
-
slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.width() + "px";
|
354
|
-
if (slider.transitions) {
|
355
|
-
slider.setTransition(0);
|
356
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
|
357
|
-
}
|
358
|
-
slider.container.css(slider.args);
|
359
|
-
}
|
360
|
-
}
|
361
|
-
});
|
362
|
-
}
|
363
|
-
//////////////////////////////////////////////////////////////////
|
364
|
-
|
365
|
-
//FlexSlider: start() Callback
|
366
|
-
slider.vars.start(slider);
|
367
|
-
}
|
368
|
-
|
369
|
-
//FlexSlider: Animation Actions
|
370
|
-
slider.flexAnimate = function(target, pause) {
|
371
|
-
if (!slider.animating && slider.is(":visible")) {
|
372
|
-
//Animating flag
|
373
|
-
slider.animating = true;
|
374
|
-
|
375
|
-
//FlexSlider: before() animation Callback
|
376
|
-
slider.animatingTo = target;
|
377
|
-
slider.vars.before(slider);
|
378
|
-
|
379
|
-
//Optional paramter to pause slider when making an anmiation call
|
380
|
-
if (pause) {
|
381
|
-
slider.pause();
|
382
|
-
}
|
383
|
-
|
384
|
-
//Update controlNav
|
385
|
-
if (slider.vars.controlNav) {
|
386
|
-
slider.controlNav.removeClass('active').eq(target).addClass('active');
|
387
|
-
}
|
388
|
-
|
389
|
-
//Is the slider at either end
|
390
|
-
slider.atEnd = (target == 0 || target == slider.count - 1) ? true : false;
|
391
|
-
if (!slider.vars.animationLoop && slider.vars.directionNav) {
|
392
|
-
if (target == 0) {
|
393
|
-
slider.directionNav.removeClass('disabled').filter('.prev').addClass('disabled');
|
394
|
-
} else if (target == slider.count - 1) {
|
395
|
-
slider.directionNav.removeClass('disabled').filter('.next').addClass('disabled');
|
396
|
-
} else {
|
397
|
-
slider.directionNav.removeClass('disabled');
|
398
|
-
}
|
399
|
-
}
|
400
|
-
|
401
|
-
if (!slider.vars.animationLoop && target == slider.count - 1) {
|
402
|
-
slider.pause();
|
403
|
-
//FlexSlider: end() of cycle Callback
|
404
|
-
slider.vars.end(slider);
|
405
|
-
}
|
406
|
-
|
407
|
-
if (slider.vars.animation.toLowerCase() == "slide") {
|
408
|
-
var dimension = (slider.vertical) ? slider.slides.filter(':first').height() : slider.slides.filter(':first').width();
|
409
|
-
|
410
|
-
if (slider.currentSlide == 0 && target == slider.count - 1 && slider.vars.animationLoop && slider.direction != "next") {
|
411
|
-
slider.slideString = "0px";
|
412
|
-
} else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.vars.animationLoop && slider.direction != "prev") {
|
413
|
-
slider.slideString = (-1 * (slider.count + 1)) * dimension + "px";
|
414
|
-
} else {
|
415
|
-
slider.slideString = (-1 * (target + slider.cloneOffset)) * dimension + "px";
|
416
|
-
}
|
417
|
-
slider.args[slider.prop] = slider.slideString;
|
418
|
-
|
419
|
-
if (slider.transitions) {
|
420
|
-
slider.setTransition(slider.vars.animationDuration);
|
421
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.slideString + ",0)" : "translate3d(" + slider.slideString + ",0,0)";
|
422
|
-
slider.container.css(slider.args).one("webkitTransitionEnd transitionend", function(){
|
423
|
-
slider.wrapup(dimension);
|
424
|
-
});
|
425
|
-
} else {
|
426
|
-
slider.container.animate(slider.args, slider.vars.animationDuration, function(){
|
427
|
-
slider.wrapup(dimension);
|
428
|
-
});
|
429
|
-
}
|
430
|
-
} else { //Default to Fade
|
431
|
-
slider.slides.eq(slider.currentSlide).fadeOut(slider.vars.animationDuration);
|
432
|
-
slider.slides.eq(target).fadeIn(slider.vars.animationDuration, function() {
|
433
|
-
slider.wrapup();
|
434
|
-
});
|
435
|
-
}
|
436
|
-
}
|
437
|
-
}
|
438
|
-
|
439
|
-
//FlexSlider: Function to minify redundant animation actions
|
440
|
-
slider.wrapup = function(dimension) {
|
441
|
-
if (slider.vars.animation == "slide") {
|
442
|
-
//Jump the slider if necessary
|
443
|
-
if (slider.currentSlide == 0 && slider.animatingTo == slider.count - 1 && slider.vars.animationLoop) {
|
444
|
-
slider.args[slider.prop] = (-1 * slider.count) * dimension + "px";
|
445
|
-
if (slider.transitions) {
|
446
|
-
slider.setTransition(0);
|
447
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
|
448
|
-
}
|
449
|
-
slider.container.css(slider.args);
|
450
|
-
} else if (slider.currentSlide == slider.count - 1 && slider.animatingTo == 0 && slider.vars.animationLoop) {
|
451
|
-
slider.args[slider.prop] = -1 * dimension + "px";
|
452
|
-
if (slider.transitions) {
|
453
|
-
slider.setTransition(0);
|
454
|
-
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
|
455
|
-
}
|
456
|
-
slider.container.css(slider.args);
|
457
|
-
}
|
458
|
-
}
|
459
|
-
slider.animating = false;
|
460
|
-
slider.currentSlide = slider.animatingTo;
|
461
|
-
//FlexSlider: after() animation Callback
|
462
|
-
slider.vars.after(slider);
|
463
|
-
}
|
464
|
-
|
465
|
-
//FlexSlider: Automatic Slideshow
|
466
|
-
slider.animateSlides = function() {
|
467
|
-
if (!slider.animating) {
|
468
|
-
slider.flexAnimate(slider.getTarget("next"));
|
469
|
-
}
|
470
|
-
}
|
471
|
-
|
472
|
-
//FlexSlider: Automatic Slideshow Pause
|
473
|
-
slider.pause = function() {
|
474
|
-
clearInterval(slider.animatedSlides);
|
475
|
-
if (slider.vars.pausePlay) {
|
476
|
-
slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
|
477
|
-
}
|
478
|
-
}
|
479
|
-
|
480
|
-
//FlexSlider: Automatic Slideshow Start/Resume
|
481
|
-
slider.resume = function() {
|
482
|
-
slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
|
483
|
-
if (slider.vars.pausePlay) {
|
484
|
-
slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
|
485
|
-
}
|
486
|
-
}
|
487
|
-
|
488
|
-
//FlexSlider: Helper function for non-looping sliders
|
489
|
-
slider.canAdvance = function(target) {
|
490
|
-
if (!slider.vars.animationLoop && slider.atEnd) {
|
491
|
-
if (slider.currentSlide == 0 && target == slider.count - 1 && slider.direction != "next") {
|
492
|
-
return false;
|
493
|
-
} else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.direction == "next") {
|
494
|
-
return false;
|
495
|
-
} else {
|
496
|
-
return true;
|
497
|
-
}
|
498
|
-
} else {
|
499
|
-
return true;
|
500
|
-
}
|
501
|
-
}
|
502
|
-
|
503
|
-
//FlexSlider: Helper function to determine animation target
|
504
|
-
slider.getTarget = function(dir) {
|
505
|
-
slider.direction = dir;
|
506
|
-
if (dir == "next") {
|
507
|
-
return (slider.currentSlide == slider.count - 1) ? 0 : slider.currentSlide + 1;
|
508
|
-
} else {
|
509
|
-
return (slider.currentSlide == 0) ? slider.count - 1 : slider.currentSlide - 1;
|
510
|
-
}
|
511
|
-
}
|
512
|
-
|
513
|
-
//FlexSlider: Helper function to set CSS3 transitions
|
514
|
-
slider.setTransition = function(dur) {
|
515
|
-
slider.container.css({'-webkit-transition-duration': (dur/1000) + "s"});
|
516
|
-
}
|
517
|
-
|
518
|
-
//FlexSlider: Initialize
|
519
|
-
slider.init();
|
520
|
-
}
|
521
|
-
|
522
|
-
//FlexSlider: Default Settings
|
523
|
-
$.flexslider.defaults = {
|
524
|
-
animation: "fade", //String: Select your animation type, "fade" or "slide"
|
525
|
-
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
|
526
|
-
slideshow: true, //Boolean: Animate slider automatically
|
527
|
-
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
|
528
|
-
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
|
529
|
-
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
|
530
|
-
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
|
531
|
-
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
|
532
|
-
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
|
533
|
-
prevText: "Previous", //String: Set the text for the "previous" directionNav item
|
534
|
-
nextText: "Next", //String: Set the text for the "next" directionNav item
|
535
|
-
pausePlay: false, //Boolean: Create pause/play dynamic element
|
536
|
-
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
|
537
|
-
playText: 'Play', //String: Set the text for the "play" pausePlay item
|
538
|
-
randomize: false, //Boolean: Randomize slide order
|
539
|
-
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
|
540
|
-
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
|
541
|
-
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
|
542
|
-
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
|
543
|
-
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
|
544
|
-
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
|
545
|
-
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
|
546
|
-
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
|
547
|
-
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
|
548
|
-
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
|
549
|
-
}
|
550
|
-
|
551
|
-
//FlexSlider: Plugin Function
|
552
|
-
$.fn.flexslider = function(options) {
|
553
|
-
return this.each(function() {
|
554
|
-
if ($(this).find('.slides > li').length == 1) {
|
555
|
-
$(this).find('.slides > li').fadeIn(400);
|
556
|
-
}
|
557
|
-
else if ($(this).data('flexsliderInit') != true) {
|
558
|
-
new $.flexslider(this, options);
|
559
|
-
}
|
560
|
-
});
|
561
|
-
}
|
562
|
-
|
563
|
-
})(jQuery);
|