initforthe-roundabound 0.4 → 0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +32 -0
- data/vendor/assets/javascripts/initforthe-roundabound.js.coffee +67 -54
- metadata +3 -3
- data/README.rdoc +0 -15
data/README.md
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
initforthe-roundabound
|
2
|
+
======================
|
3
|
+
|
4
|
+
Some CoffeeScript surrounding Bootstrap's Carousel code to make it easier to implement carousels.
|
5
|
+
|
6
|
+
Why roundabound?
|
7
|
+
----------------
|
8
|
+
|
9
|
+
http://www.youtube.com/watch?v=2ljFfL-mL70
|
10
|
+
|
11
|
+
How to use
|
12
|
+
----------
|
13
|
+
|
14
|
+
Options are set via data-\* attributes. Available options are:
|
15
|
+
|
16
|
+
<table>
|
17
|
+
<tr>
|
18
|
+
<td>data-interval</td><td>in thousanths of a second</td>
|
19
|
+
</tr>
|
20
|
+
<tr>
|
21
|
+
<td>data-pause</td><td>'hover' will force pause on hover. Anything else will prevent it</td>
|
22
|
+
</tr>
|
23
|
+
</table>
|
24
|
+
|
25
|
+
Add `initforthe-roundabound` to your application.js
|
26
|
+
|
27
|
+
If you need to instantiate further Roundabounds, call `new InitfortheCarousel(selector)` where `selector` can be one of a DOM object, jQuery element, or jQuery selector.
|
28
|
+
|
29
|
+
License
|
30
|
+
-------
|
31
|
+
|
32
|
+
MIT
|
@@ -1,56 +1,69 @@
|
|
1
|
+
class InitfortheCarousel
|
2
|
+
constructor: (carousel) ->
|
3
|
+
@carousel = $(carousel)
|
4
|
+
@setup()
|
5
|
+
|
6
|
+
setup: ->
|
7
|
+
return if @carousel.data('initforthe-carousel')
|
8
|
+
@options = {}
|
9
|
+
@options.interval = @carousel.data('interval') if @carousel.data('interval')
|
10
|
+
@options.pause = @carousel.data('pause') if @carousel.data('pause')
|
11
|
+
@$playButton = @carousel.find('[data-slide-play="1"]')
|
12
|
+
@$pauseButton = @carousel.find('[data-slide-play="0"]')
|
13
|
+
@$items = @carousel.find('.item')
|
14
|
+
@highlight()
|
15
|
+
@carousel.carousel(@options)
|
16
|
+
@carousel.data('initforthe-carousel', true)
|
17
|
+
|
18
|
+
# Hide play button
|
19
|
+
play = @carousel.find('[data-slide-play]')
|
20
|
+
play.hide() if play.data('slide-play') == 1
|
21
|
+
|
22
|
+
@carousel
|
23
|
+
.on 'click', '[data-slide],.carousel [data-slide-play="0"]', (e) =>
|
24
|
+
e.preventDefault()
|
25
|
+
@pause()
|
26
|
+
.on 'click', '[data-slide-play="1"]', (e) =>
|
27
|
+
e.preventDefault()
|
28
|
+
@resume()
|
29
|
+
.on 'click', '[data-slide-to]', (e) =>
|
30
|
+
e.preventDefault()
|
31
|
+
@slide(e.target)
|
32
|
+
.on 'slid', @highlight
|
33
|
+
|
34
|
+
pause: (e) =>
|
35
|
+
# can come from:
|
36
|
+
# * next/prev buttons
|
37
|
+
# * pause button
|
38
|
+
@carousel.carousel('pause')
|
39
|
+
@$pauseButton.hide()
|
40
|
+
@$playButton.show()
|
41
|
+
|
42
|
+
resume: (e) =>
|
43
|
+
# can only come from play button
|
44
|
+
@carousel.carousel('cycle')
|
45
|
+
@$playButton.hide()
|
46
|
+
@$pauseButton.show()
|
47
|
+
|
48
|
+
slide: (element) =>
|
49
|
+
# can only come from slide indicator
|
50
|
+
@carousel.carousel('pause')
|
51
|
+
# first pause, then select
|
52
|
+
@select $(element).data('slide-to')
|
53
|
+
|
54
|
+
select: (position) =>
|
55
|
+
@carousel.carousel(position)
|
56
|
+
|
57
|
+
highlight: =>
|
58
|
+
which = $.inArray(@$items.filter('.active')[0], @$items)
|
59
|
+
|
60
|
+
dataSlideTo = @carousel.find('[data-slide-to]')
|
61
|
+
|
62
|
+
dataSlideTo.removeClass('selected')
|
63
|
+
$(dataSlideTo[which]).addClass('selected')
|
64
|
+
|
65
|
+
window.InitfortheCarousel = InitfortheCarousel
|
66
|
+
|
1
67
|
$(document).ready ->
|
2
68
|
$('.carousel').each ->
|
3
|
-
|
4
|
-
options.interval = $(this).data('interval') if $(this).data('interval')
|
5
|
-
options.pause = $(this).data('pause') if $(this).data('pause')
|
6
|
-
$(this).carousel(options)
|
7
|
-
|
8
|
-
play = $('.carousel').find('[data-slide-play="1"]')
|
9
|
-
play.hide()
|
10
|
-
|
11
|
-
$('.carousel [data-slide-play]').on
|
12
|
-
click: (e) ->
|
13
|
-
e.preventDefault()
|
14
|
-
if $(this).attr('data-slide-play') is '0'
|
15
|
-
pause(this)
|
16
|
-
else
|
17
|
-
resume(this)
|
18
|
-
|
19
|
-
$('.carousel [data-slide]').on
|
20
|
-
click: (e) ->
|
21
|
-
pause(this)
|
22
|
-
|
23
|
-
$('.carousel [data-slide-to]').on
|
24
|
-
click: (e) ->
|
25
|
-
e.preventDefault()
|
26
|
-
pause(this)
|
27
|
-
select(this)
|
28
|
-
|
29
|
-
$('.carousel').on
|
30
|
-
slid: (e) ->
|
31
|
-
highlight($(e.target))
|
32
|
-
|
33
|
-
pause = (target) ->
|
34
|
-
carousel = $($(target).attr('href'))
|
35
|
-
carousel.carousel('pause')
|
36
|
-
carousel.find('[data-slide-play="1"]').show() # play
|
37
|
-
carousel.find('[data-slide-play="0"]').hide() # pause
|
38
|
-
|
39
|
-
resume = (target) ->
|
40
|
-
carousel = $($(target).attr('href'))
|
41
|
-
carousel.carousel('cycle')
|
42
|
-
carousel.find('[data-slide-play="1"]').hide() # play
|
43
|
-
carousel.find('[data-slide-play="0"]').show() # pause
|
44
|
-
|
45
|
-
select = (target) ->
|
46
|
-
carousel = $($(target).attr('href'))
|
47
|
-
pos = $(target).data('slide-to')
|
48
|
-
carousel.carousel(pos)
|
49
|
-
|
50
|
-
highlight = (carousel) ->
|
51
|
-
items = carousel.find('.item')
|
52
|
-
item = carousel.find('.item.active')[0]
|
53
|
-
which = $.inArray(item, items)
|
54
|
-
|
55
|
-
carousel.find('[data-slide-to]').removeClass('selected')
|
56
|
-
$(carousel.find('[data-slide-to]')[which]).addClass('selected')
|
69
|
+
new InitfortheCarousel(this)
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: initforthe-roundabound
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: '0.
|
4
|
+
version: '0.5'
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date:
|
13
|
+
date: 2013-03-11 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: rails
|
@@ -42,7 +42,7 @@ files:
|
|
42
42
|
- lib/initforthe-roundabound.rb
|
43
43
|
- MIT-LICENSE
|
44
44
|
- Rakefile
|
45
|
-
- README.
|
45
|
+
- README.md
|
46
46
|
homepage: http://github.com/initforthe/initforthe-roundabound
|
47
47
|
licenses: []
|
48
48
|
post_install_message:
|
data/README.rdoc
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
= initforthe-roundabound
|
2
|
-
|
3
|
-
Some CoffeeScript surrounding Bootstrap's Carousel code to make it easier to implement carousels.
|
4
|
-
|
5
|
-
= How to use
|
6
|
-
|
7
|
-
Yes, we really should tell you how to use it. We'll get to that bit.
|
8
|
-
|
9
|
-
= Why roundabound?
|
10
|
-
|
11
|
-
http://www.youtube.com/watch?v=2ljFfL-mL70
|
12
|
-
|
13
|
-
= License
|
14
|
-
|
15
|
-
MIT
|