volt-slider 0.1.2 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +3 -1
- data/README.md +5 -1
- data/app/slider/assets/css/slider.sass +33 -0
- data/app/slider/assets/images/circle-left.png +0 -0
- data/app/slider/assets/images/circle-right.png +0 -0
- data/app/slider/controllers/main_controller.rb +25 -5
- data/app/slider/views/main/index.html +6 -2
- data/lib/volt/slider/version.rb +1 -1
- data/volt-slider.gemspec +1 -0
- metadata +3 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8ef829bfe555ab6c22f84211fd2bb304f57cb4ea
|
4
|
+
data.tar.gz: 06c9a3b5c4a4f733344d56d3de7185514292a9f5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 10d653723bf5ae2c964b3ca4fd1a06b89a3af2b4b1adc8bc96cad160cc31533465668e7e6ec5c906e7134af4c6bfb6e1dafcdd055274ac9616b8cf215919e040
|
7
|
+
data.tar.gz: c23bef4815834ef64546446738ecafcbcaf2a674569294149f3b12be1f09bdf672aac63a1d245e31b6de05ca422d00300d64af82987e075085305058e10751b5
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -6,6 +6,10 @@ Simple slider of any content for Volt framework.
|
|
6
6
|
|
7
7
|
.slider-viewport with fixed width and overflow: hidden, inside it .slider-container with much longer width, it's moving inside .slider-viewport by jquery.animate on it's left property
|
8
8
|
|
9
|
+
## Changelog
|
10
|
+
|
11
|
+
0.2.0 Added prev/next buttons
|
12
|
+
|
9
13
|
## Installation
|
10
14
|
|
11
15
|
Add this line to your application's Gemfile:
|
@@ -57,7 +61,7 @@ defaults:
|
|
57
61
|
css_visible_width: 800
|
58
62
|
css_visible_height: 260px
|
59
63
|
css_container_length: 9999
|
60
|
-
|
64
|
+
show_prev_next_icons: true
|
61
65
|
|
62
66
|
## Contributing
|
63
67
|
|
@@ -7,3 +7,36 @@
|
|
7
7
|
left: 0px
|
8
8
|
height: 100%
|
9
9
|
|
10
|
+
.icon
|
11
|
+
display: inline-block
|
12
|
+
width: 1em
|
13
|
+
height: 1em
|
14
|
+
fill: currentColor
|
15
|
+
opacity: 0.1
|
16
|
+
z-index: 999
|
17
|
+
transition: opacity .25s ease-in-out
|
18
|
+
-moz-transition: opacity .25s ease-in-out
|
19
|
+
-webkit-transition: opacity .25s ease-in-out
|
20
|
+
|
21
|
+
.slider-viewport:hover .icon
|
22
|
+
opacity: 0.9
|
23
|
+
|
24
|
+
.icon-circle-right:hover, .icon-circle-left:hover
|
25
|
+
cursor: pointer
|
26
|
+
|
27
|
+
.icon-circle-right
|
28
|
+
position: absolute
|
29
|
+
right: 0px
|
30
|
+
font-size: 32px
|
31
|
+
color: black
|
32
|
+
background-size: contain
|
33
|
+
background-image: asset-url("../images/circle-right.png")
|
34
|
+
|
35
|
+
.icon-circle-left
|
36
|
+
position: absolute
|
37
|
+
left: 0px
|
38
|
+
font-size: 32px
|
39
|
+
color: black
|
40
|
+
background-size: contain
|
41
|
+
background-image: asset-url("../images/circle-left.png")
|
42
|
+
|
Binary file
|
Binary file
|
@@ -14,7 +14,8 @@ module Slider
|
|
14
14
|
stop_on_mouseover: true,
|
15
15
|
css_visible_width: 800,
|
16
16
|
css_visible_height: 260,
|
17
|
-
css_container_length: 9999
|
17
|
+
css_container_length: 9999,
|
18
|
+
show_prev_next_icons: true
|
18
19
|
}
|
19
20
|
end
|
20
21
|
|
@@ -23,25 +24,44 @@ module Slider
|
|
23
24
|
end
|
24
25
|
|
25
26
|
def create_options_vars(options)
|
26
|
-
|
27
|
-
# options.each { |k,v| puts "@#{k}" + (( (attrs.send(k) == '') ? nil : attrs.send(k) ) || v).to_s }
|
27
|
+
options.each { |k,v| puts "@#{k}" + (( (attrs.send(k) == '') ? nil : attrs.send(k) ) || v).to_s }
|
28
28
|
options.each { |k,v| instance_variable_set("@#{k}", (( (attrs.send(k) == '') ? nil : attrs.send(k) )|| v)) } #instance variables from attrs
|
29
|
+
|
30
|
+
(@show_prev_next_icons == true or @show_prev_next_icons == 'true') ? @show_prev_next_icons = true : @show_prev_next_icons = false
|
31
|
+
(@stop_on_mouseover==true or @stop_on_mouseover=='true') ? @stop_on_mouseover = true : @stop_on_mouseover = false
|
32
|
+
end
|
33
|
+
|
34
|
+
def show_icons?
|
35
|
+
(@show_prev_next_icons == true or @show_prev_next_icons == 'true') ? true : false
|
29
36
|
end
|
30
37
|
|
38
|
+
|
31
39
|
def move
|
32
40
|
if RUBY_PLATFORM == 'opal'
|
33
41
|
el = Element.find('.slider-container')
|
34
42
|
moveto = el.css('left').to_i - @css_visible_width.to_i
|
35
43
|
if moveto < @leftmost_point.to_i
|
44
|
+
@leftmost_point_set = moveto + @css_visible_width.to_i
|
36
45
|
moveto = 0
|
37
46
|
end
|
38
|
-
el.animate({left: moveto, speed:
|
47
|
+
el.animate({left: moveto, speed: @transition_time.to_i })
|
48
|
+
end
|
49
|
+
end
|
50
|
+
|
51
|
+
def prev
|
52
|
+
if RUBY_PLATFORM == 'opal'
|
53
|
+
el = Element.find('.slider-container')
|
54
|
+
moveto = el.css('left').to_i + @css_visible_width.to_i
|
55
|
+
if moveto > 0
|
56
|
+
moveto = @leftmost_point_set || @leftmost_point
|
57
|
+
end
|
58
|
+
el.animate({left: moveto, speed: @transition_time.to_i })
|
39
59
|
end
|
40
60
|
end
|
41
61
|
|
42
62
|
def index_ready
|
43
63
|
if RUBY_PLATFORM == 'opal'
|
44
|
-
if @stop_on_mouseover
|
64
|
+
if @stop_on_mouseover
|
45
65
|
el = Element.find('.slider-viewport')
|
46
66
|
|
47
67
|
el.on :mouseover do
|
@@ -1,8 +1,12 @@
|
|
1
|
-
|
2
1
|
<:Body>
|
3
2
|
<div class="slider-viewport" style="height: {{ @css_visible_height }}px; width: {{ @css_visible_width }}px;">
|
4
|
-
|
3
|
+
{{ if show_icons? }}
|
5
4
|
|
5
|
+
<span class="icon icon-circle-right" style="top: {{ @css_visible_height.to_i / 2 }}px;" e-click="move"></span>
|
6
|
+
<span class="icon icon-circle-left" style="top: {{ @css_visible_height.to_i / 2 }}px;" e-click="prev"></span>
|
7
|
+
|
8
|
+
{{ end }}
|
9
|
+
<div class="slider-container" style="width: {{ @css_container_length }}px;">
|
6
10
|
|
7
11
|
{{ yield }}
|
8
12
|
|
data/lib/volt/slider/version.rb
CHANGED
data/volt-slider.gemspec
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: volt-slider
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Kostafun
|
@@ -220,6 +220,8 @@ files:
|
|
220
220
|
- README.md
|
221
221
|
- Rakefile
|
222
222
|
- app/slider/assets/css/slider.sass
|
223
|
+
- app/slider/assets/images/circle-left.png
|
224
|
+
- app/slider/assets/images/circle-right.png
|
223
225
|
- app/slider/config/dependencies.rb
|
224
226
|
- app/slider/config/initializers/boot.rb
|
225
227
|
- app/slider/config/routes.rb
|