corn_starch 1.8.25 → 1.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/corn_starch/carousel.js.coffee +53 -0
- data/app/assets/stylesheets/corn_starch/application.css +15 -0
- data/app/assets/stylesheets/corn_starch/carousel.css +55 -0
- data/app/helpers/corn_starch/carousel_helper.rb +22 -0
- data/app/views/corn_starch/layouts/_carousel.html.erb +21 -0
- data/lib/corn_starch/version.rb +1 -1
- metadata +6 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 66233bcd2bdb2f42f5c5985d3c52f34e78716929
|
|
4
|
+
data.tar.gz: 0b96f8e9de657749ba289442efc48c07ebd9d6d5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 19474b76741155a1f1c118f56eefc7a03046eb971cfcc0be61b8c6c7ea56793447086d7b5c53b1f892926af9f90078eb67b8d053ec063dee2fc1e7f8f4f76782
|
|
7
|
+
data.tar.gz: 9af3d6b63af370bc56e651983d56177efc9f55eb5c53493fd1a83584b21c523df2899cfa9e300ee8b37ef3325b34dc0bb134f1b81a66f614af2e8288ba22d7c7
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# CornStarch
|
|
2
|
+
# by Eresse <eresse@eresse.net>
|
|
3
|
+
|
|
4
|
+
# Carousel JS
|
|
5
|
+
|
|
6
|
+
# Init Carousel
|
|
7
|
+
window.init_carousel = (id, extent) ->
|
|
8
|
+
|
|
9
|
+
# Acquire Carousel
|
|
10
|
+
box = document.querySelector "##{id}"
|
|
11
|
+
|
|
12
|
+
# Acquire Actions & Items
|
|
13
|
+
next = box.querySelector '.next'
|
|
14
|
+
prev = box.querySelector '.prev'
|
|
15
|
+
items = box.querySelectorAll '.carousel-content li'
|
|
16
|
+
|
|
17
|
+
# Init Params
|
|
18
|
+
current_idx = 0
|
|
19
|
+
amount = items.length
|
|
20
|
+
extended = items.slice current_idx, extent
|
|
21
|
+
|
|
22
|
+
# Set Active
|
|
23
|
+
box.classList.add 'active'
|
|
24
|
+
|
|
25
|
+
# Navigate
|
|
26
|
+
navigate = (dir) ->
|
|
27
|
+
|
|
28
|
+
# Re-Acquire Items
|
|
29
|
+
items = box.querySelectorAll '.carousel-content li'
|
|
30
|
+
amount = items.length
|
|
31
|
+
current_idx = 0 if current_idx > amount
|
|
32
|
+
extended = items.slice current_idx, extent
|
|
33
|
+
|
|
34
|
+
# Drop Flag
|
|
35
|
+
for e in extended do (e) -> e.classList.remove 'current'
|
|
36
|
+
|
|
37
|
+
# Update Position
|
|
38
|
+
current_idx = current_idx + dir
|
|
39
|
+
current_idx = amount - 1 if dir == -1 && current_idx < 0
|
|
40
|
+
current_idx = 0 if dir == 1 && !items[current_idx]
|
|
41
|
+
current = items[current_idx]
|
|
42
|
+
extended = items.slice current_idx, extent
|
|
43
|
+
extended.concat items.slice(0, extent - amount) if extent > amount
|
|
44
|
+
|
|
45
|
+
# Flag Elements
|
|
46
|
+
for e in extended do (e) -> e.classList.add 'current'
|
|
47
|
+
|
|
48
|
+
# Actions
|
|
49
|
+
next.click -> navigate 1
|
|
50
|
+
prev.click -> navigate -1
|
|
51
|
+
|
|
52
|
+
# Initial Nav
|
|
53
|
+
navigate 0
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
|
3
|
+
* listed below.
|
|
4
|
+
*
|
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
|
7
|
+
*
|
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any styles
|
|
10
|
+
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
|
|
11
|
+
* file per style scope.
|
|
12
|
+
*
|
|
13
|
+
*= require_tree .
|
|
14
|
+
*= require_self
|
|
15
|
+
*/
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* CornStarch
|
|
2
|
+
* by Eresse <eresse@eresse.net>
|
|
3
|
+
|
|
4
|
+
* Carousel CSS
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.carousel {
|
|
8
|
+
width: 100px;
|
|
9
|
+
position: relative;
|
|
10
|
+
margin: 1em;
|
|
11
|
+
border: 1px solid #ccc;
|
|
12
|
+
box-shadow: 2px 2px 10px #ccc;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
.carousel-content {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
}
|
|
19
|
+
.carousel-content li {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
width: 100%;
|
|
23
|
+
list-style: none;
|
|
24
|
+
text-align: center;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.carousel.active {
|
|
28
|
+
height: 130px;
|
|
29
|
+
}
|
|
30
|
+
.carousel.active li {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 200px;
|
|
33
|
+
}
|
|
34
|
+
.carousel.active li.current {
|
|
35
|
+
top: 30px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.carousel.active .carousel-buttons {
|
|
39
|
+
padding: 5px 0;
|
|
40
|
+
background: #eee;
|
|
41
|
+
text-align: center;
|
|
42
|
+
z-index: 10;
|
|
43
|
+
position: relative;
|
|
44
|
+
}
|
|
45
|
+
.carousel-buttons button {
|
|
46
|
+
border: none;
|
|
47
|
+
display: none;
|
|
48
|
+
}
|
|
49
|
+
.carousel.active .carousel-buttons button {
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
.carousel-buttons .offscreen {
|
|
53
|
+
position: absolute;
|
|
54
|
+
left: -2000px;
|
|
55
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# CornStarch
|
|
2
|
+
# by Eresse <eresse@eresse.net>
|
|
3
|
+
|
|
4
|
+
# CornStarch Module
|
|
5
|
+
module CornStarch
|
|
6
|
+
|
|
7
|
+
# Carousel Helper
|
|
8
|
+
module CarouselHelper
|
|
9
|
+
|
|
10
|
+
# Carousel Tag
|
|
11
|
+
def carousel_tag params
|
|
12
|
+
render layout: 'corn_starch/layouts/carousel', locals: { carousel: params } do
|
|
13
|
+
yield params if block_given?
|
|
14
|
+
end
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
# Carousel Name
|
|
18
|
+
def carousel_name name
|
|
19
|
+
"carousel-#{name}"
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%# Carousel %>
|
|
2
|
+
<%= div_tag class: :carousel, id: carousel_name(carousel[:name]) do %>
|
|
3
|
+
|
|
4
|
+
<%# Navigation Buttons %>
|
|
5
|
+
<div class='carousel-buttons'>
|
|
6
|
+
<button type='button' class='prev'><span class='offscreen'> ◀ </span></button>
|
|
7
|
+
<button type='button' class='next'><span class='offscreen'> ▶ </span></button>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<%# Elements %>
|
|
11
|
+
<%= ol_tag class: 'carousel-content' do %>
|
|
12
|
+
<% carousel[:elements].each do |e| %>
|
|
13
|
+
<%= li_tag do %>
|
|
14
|
+
<%= image_tag e[:url] %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
|
|
20
|
+
<%# Carousel JS %>
|
|
21
|
+
<script>carousel_init('#<%= carousel_name carousel[:name] %>', <%= carousel[:extent] %>);</script>
|
data/lib/corn_starch/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: corn_starch
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.9.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Eresse
|
|
@@ -51,15 +51,20 @@ files:
|
|
|
51
51
|
- README.md
|
|
52
52
|
- Rakefile
|
|
53
53
|
- app/assets/javascripts/corn_starch/application.js
|
|
54
|
+
- app/assets/javascripts/corn_starch/carousel.js.coffee
|
|
54
55
|
- app/assets/javascripts/corn_starch/infiniscroll.js.coffee
|
|
55
56
|
- app/assets/javascripts/corn_starch/modal.js.coffee
|
|
56
57
|
- app/assets/javascripts/corn_starch/notifications.js.coffee
|
|
58
|
+
- app/assets/stylesheets/corn_starch/application.css
|
|
59
|
+
- app/assets/stylesheets/corn_starch/carousel.css
|
|
57
60
|
- app/controllers/corn_starch/corn_starch_controller.rb
|
|
58
61
|
- app/controllers/corn_starch/sessions_controller.rb
|
|
62
|
+
- app/helpers/corn_starch/carousel_helper.rb
|
|
59
63
|
- app/helpers/corn_starch/corn_starch_helper.rb
|
|
60
64
|
- app/helpers/corn_starch/gravatar_helper.rb
|
|
61
65
|
- app/helpers/corn_starch/infiniscroll_helper.rb
|
|
62
66
|
- app/helpers/corn_starch/modal_helper.rb
|
|
67
|
+
- app/views/corn_starch/layouts/_carousel.html.erb
|
|
63
68
|
- app/views/corn_starch/layouts/_modal.html.erb
|
|
64
69
|
- app/views/corn_starch/layouts/_notifications.html.erb
|
|
65
70
|
- app/views/corn_starch/layouts/_pagination.html.erb
|