simple_images 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/README.md +22 -13
- data/app/assets/javascripts/simple_images/ajax_uploader.js.coffee +7 -0
- data/app/assets/stylesheets/simple_images/spinner.css.scss +172 -0
- data/app/assets/stylesheets/simple_images/uploader.css.scss +2 -0
- data/app/helpers/simple_images_helper.rb +6 -2
- data/app/views/simple_images/_edit.html.erb +4 -2
- data/app/views/simple_images/_form.html.erb +5 -1
- data/app/views/simple_images/_spinner.html.erb +10 -0
- data/lib/simple_images/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 27ab8bcbc1e9ea90eb02d5ff22f1dd9ea560b24b
|
|
4
|
+
data.tar.gz: 494052d1e5ead54ee24c022417f2dfac118be033
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 13a82414ce8a636a97433320f2aae7c9ad23b0c0508beba5c4c23bebb6babe4a42b314f7aaa1a7fbff2485e9e2bc8387652b421d127cc099c4ab8eb21b6b0ec2
|
|
7
|
+
data.tar.gz: da3c7ad2f5276abb9f9fe8d9fdc960b5dd33c7d8a9fbe4125e36441db112645fff25d8b8699979bb2f7b03c5922a30400d1083b5f00c00b7c228301034e26b0a
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://travis-ci.org/kainage/simple_images)
|
|
4
4
|
|
|
5
|
-
Add simple one-click image uploading to active record models
|
|
5
|
+
Add simple one-click image uploading to active record models using **Dragonfly**
|
|
6
6
|
|
|
7
7
|
**Requires ruby >= 1.9.3**
|
|
8
8
|
|
|
@@ -107,6 +107,18 @@ An image must be associated to an active record model. If you want all images to
|
|
|
107
107
|
availible to all things just pick an arbitrary object that you are not going to
|
|
108
108
|
destroy (such as first user) and associate all images with that record.
|
|
109
109
|
|
|
110
|
+
Include the stylesheets in your application.css manifest:
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
/*
|
|
114
|
+
*= require simple_images/uploader
|
|
115
|
+
*= require simple_images/spinner
|
|
116
|
+
*/
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
You can omit either stylesheet if you want to style your own upload button from scratch
|
|
120
|
+
or you do not want to use the spinner (or are not using AJAX)
|
|
121
|
+
|
|
110
122
|
Include the javascript file in your application.js manifest. If you want the basic,
|
|
111
123
|
page reloading functionality:
|
|
112
124
|
|
|
@@ -132,26 +144,23 @@ An example of create:
|
|
|
132
144
|
<% end %>
|
|
133
145
|
```
|
|
134
146
|
|
|
135
|
-
Include the stylesheet in your application.css manifest:
|
|
136
|
-
|
|
137
|
-
```
|
|
138
|
-
/*
|
|
139
|
-
*= require simple_images/uploader
|
|
140
|
-
*/
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
You can omit the stylesheet if you want to style your own upload button from scratch
|
|
144
|
-
|
|
145
147
|
In your views you can call the following methods:
|
|
146
148
|
|
|
147
149
|
```
|
|
148
150
|
<%= render_simple_images_edit_link_for(image) %>
|
|
149
151
|
<%= render_simple_images_destroy_link_for(image) %>
|
|
150
152
|
<%= render_simple_images_actions_for(image) %>
|
|
151
|
-
<%= render_simple_images_form_for(imageable) %>
|
|
153
|
+
<%= render_simple_images_form_for(imageable, spinner: false) %>
|
|
154
|
+
<%= render_simple_images_spinner(klass) %>
|
|
152
155
|
```
|
|
153
156
|
|
|
154
|
-
|
|
157
|
+
The spinner on the 'form_for' is if you want to render the spinner with the form.
|
|
158
|
+
It will have a class of 'spinner' and a class of ```<%= dom_id(imageable) %>_spinner```
|
|
159
|
+
(ex 'article_4_spinner'). You can then show/hide this with javascript.
|
|
160
|
+
|
|
161
|
+
The spinner helper, you pass it the class that you want the spinner to have.
|
|
162
|
+
For the spinner to automatically show, make sure your edit form id and the
|
|
163
|
+
spinner class are the same (ex 'edit_simple_image_134').
|
|
155
164
|
|
|
156
165
|
There is a helper ```si_dom_id``` to help you make a unique id (or class) to
|
|
157
166
|
push items to upon successful upload. It can be the simple_image, or the imageable:
|
|
@@ -9,6 +9,13 @@ simpleImagesForm = ->
|
|
|
9
9
|
|
|
10
10
|
$('.new_simple_image, .edit_simple_image').fileupload
|
|
11
11
|
dataType: 'script'
|
|
12
|
+
add: (e, data) ->
|
|
13
|
+
$('#' + data.form.context.id).children('.simple_image_btn').hide()
|
|
14
|
+
$('.' + data.form.context.id).show()
|
|
15
|
+
data.submit()
|
|
16
|
+
done: (e, data) ->
|
|
17
|
+
$('#' + data.form.context.id).children('.simple_image_btn').show()
|
|
18
|
+
$('.' + data.form.context.id).hide()
|
|
12
19
|
|
|
13
20
|
jQuery ->
|
|
14
21
|
simpleImagesForm()
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
.si_spinner {
|
|
2
|
+
display: none;
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 10px;
|
|
5
|
+
left: 10px;
|
|
6
|
+
}
|
|
7
|
+
.floatingCirclesG{
|
|
8
|
+
width:45px;
|
|
9
|
+
height:45px;
|
|
10
|
+
-moz-transform:scale(0.6);
|
|
11
|
+
-webkit-transform:scale(0.6);
|
|
12
|
+
-ms-transform:scale(0.6);
|
|
13
|
+
-o-transform:scale(0.6);
|
|
14
|
+
transform:scale(0.6);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.f_circleG{
|
|
18
|
+
position:absolute;
|
|
19
|
+
background-color:#FFFFFF;
|
|
20
|
+
height:8px;
|
|
21
|
+
width:8px;
|
|
22
|
+
-moz-border-radius:4px;
|
|
23
|
+
-moz-animation-name:f_fadeG;
|
|
24
|
+
-moz-animation-duration:1.04s;
|
|
25
|
+
-moz-animation-iteration-count:infinite;
|
|
26
|
+
-moz-animation-direction:linear;
|
|
27
|
+
-webkit-border-radius:4px;
|
|
28
|
+
-webkit-animation-name:f_fadeG;
|
|
29
|
+
-webkit-animation-duration:1.04s;
|
|
30
|
+
-webkit-animation-iteration-count:infinite;
|
|
31
|
+
-webkit-animation-direction:linear;
|
|
32
|
+
-ms-border-radius:4px;
|
|
33
|
+
-ms-animation-name:f_fadeG;
|
|
34
|
+
-ms-animation-duration:1.04s;
|
|
35
|
+
-ms-animation-iteration-count:infinite;
|
|
36
|
+
-ms-animation-direction:linear;
|
|
37
|
+
-o-border-radius:4px;
|
|
38
|
+
-o-animation-name:f_fadeG;
|
|
39
|
+
-o-animation-duration:1.04s;
|
|
40
|
+
-o-animation-iteration-count:infinite;
|
|
41
|
+
-o-animation-direction:linear;
|
|
42
|
+
border-radius:4px;
|
|
43
|
+
animation-name:f_fadeG;
|
|
44
|
+
animation-duration:1.04s;
|
|
45
|
+
animation-iteration-count:infinite;
|
|
46
|
+
animation-direction:linear;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.frotateG_01{
|
|
50
|
+
left:0;
|
|
51
|
+
top:18px;
|
|
52
|
+
-moz-animation-delay:0.39s;
|
|
53
|
+
-webkit-animation-delay:0.39s;
|
|
54
|
+
-ms-animation-delay:0.39s;
|
|
55
|
+
-o-animation-delay:0.39s;
|
|
56
|
+
animation-delay:0.39s;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.frotateG_02{
|
|
60
|
+
left:5px;
|
|
61
|
+
top:5px;
|
|
62
|
+
-moz-animation-delay:0.52s;
|
|
63
|
+
-webkit-animation-delay:0.52s;
|
|
64
|
+
-ms-animation-delay:0.52s;
|
|
65
|
+
-o-animation-delay:0.52s;
|
|
66
|
+
animation-delay:0.52s;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.frotateG_03{
|
|
70
|
+
left:18px;
|
|
71
|
+
top:0;
|
|
72
|
+
-moz-animation-delay:0.65s;
|
|
73
|
+
-webkit-animation-delay:0.65s;
|
|
74
|
+
-ms-animation-delay:0.65s;
|
|
75
|
+
-o-animation-delay:0.65s;
|
|
76
|
+
animation-delay:0.65s;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.frotateG_04{
|
|
80
|
+
right:5px;
|
|
81
|
+
top:5px;
|
|
82
|
+
-moz-animation-delay:0.78s;
|
|
83
|
+
-webkit-animation-delay:0.78s;
|
|
84
|
+
-ms-animation-delay:0.78s;
|
|
85
|
+
-o-animation-delay:0.78s;
|
|
86
|
+
animation-delay:0.78s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.frotateG_05{
|
|
90
|
+
right:0;
|
|
91
|
+
top:18px;
|
|
92
|
+
-moz-animation-delay:0.91s;
|
|
93
|
+
-webkit-animation-delay:0.91s;
|
|
94
|
+
-ms-animation-delay:0.91s;
|
|
95
|
+
-o-animation-delay:0.91s;
|
|
96
|
+
animation-delay:0.91s;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.frotateG_06{
|
|
100
|
+
right:5px;
|
|
101
|
+
bottom:5px;
|
|
102
|
+
-moz-animation-delay:1.04s;
|
|
103
|
+
-webkit-animation-delay:1.04s;
|
|
104
|
+
-ms-animation-delay:1.04s;
|
|
105
|
+
-o-animation-delay:1.04s;
|
|
106
|
+
animation-delay:1.04s;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.frotateG_07{
|
|
110
|
+
left:18px;
|
|
111
|
+
bottom:0;
|
|
112
|
+
-moz-animation-delay:1.17s;
|
|
113
|
+
-webkit-animation-delay:1.17s;
|
|
114
|
+
-ms-animation-delay:1.17s;
|
|
115
|
+
-o-animation-delay:1.17s;
|
|
116
|
+
animation-delay:1.17s;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.frotateG_08{
|
|
120
|
+
left:5px;
|
|
121
|
+
bottom:5px;
|
|
122
|
+
-moz-animation-delay:1.3s;
|
|
123
|
+
-webkit-animation-delay:1.3s;
|
|
124
|
+
-ms-animation-delay:1.3s;
|
|
125
|
+
-o-animation-delay:1.3s;
|
|
126
|
+
animation-delay:1.3s;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@-moz-keyframes f_fadeG{
|
|
130
|
+
0%{
|
|
131
|
+
background-color:#000000}
|
|
132
|
+
|
|
133
|
+
100%{
|
|
134
|
+
background-color:#FFFFFF}
|
|
135
|
+
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@-webkit-keyframes f_fadeG{
|
|
139
|
+
0%{
|
|
140
|
+
background-color:#000000}
|
|
141
|
+
|
|
142
|
+
100%{
|
|
143
|
+
background-color:#FFFFFF}
|
|
144
|
+
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@-ms-keyframes f_fadeG{
|
|
148
|
+
0%{
|
|
149
|
+
background-color:#000000}
|
|
150
|
+
|
|
151
|
+
100%{
|
|
152
|
+
background-color:#FFFFFF}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@-o-keyframes f_fadeG{
|
|
157
|
+
0%{
|
|
158
|
+
background-color:#000000}
|
|
159
|
+
|
|
160
|
+
100%{
|
|
161
|
+
background-color:#FFFFFF}
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@keyframes f_fadeG{
|
|
166
|
+
0%{
|
|
167
|
+
background-color:#000000}
|
|
168
|
+
|
|
169
|
+
100%{
|
|
170
|
+
background-color:#FFFFFF}
|
|
171
|
+
|
|
172
|
+
}
|
|
@@ -14,8 +14,12 @@ module SimpleImagesHelper
|
|
|
14
14
|
end.join.html_safe
|
|
15
15
|
end
|
|
16
16
|
|
|
17
|
-
def render_simple_images_form_for(imageable)
|
|
18
|
-
render 'simple_images/form', imageable: imageable
|
|
17
|
+
def render_simple_images_form_for(imageable, spinner: false)
|
|
18
|
+
render 'simple_images/form', imageable: imageable, spinner: spinner
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
def render_simple_images_spinner(klass)
|
|
22
|
+
render 'simple_images/spinner', klass: klass
|
|
19
23
|
end
|
|
20
24
|
|
|
21
25
|
def si_dom_id(image_or_imageable)
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
<% form_id = "edit_simple_image_#{dom_id(image)}" %>
|
|
2
|
+
|
|
3
|
+
<%= form_for [main_app, image], html: { id: form_id, multipart: true } do |f| %>
|
|
4
|
+
<%= content_tag :div, 'Edit', :class => 'simple_image_btn simple_images_edit_link' %>
|
|
3
5
|
<div style='display: none'>
|
|
4
6
|
<%= f.file_field :image, :class => 'simple_image_input' %>
|
|
5
7
|
</div>
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
<% form_id = "new_simple_image_#{dom_id(imageable)}" %>
|
|
2
|
+
|
|
3
|
+
<%= form_for [main_app, imageable, SimpleImage.new], html: { id: form_id, multipart: true } do |f| %>
|
|
2
4
|
<%= content_tag :div, 'Add Image', :class => 'simple_image_btn' %>
|
|
3
5
|
<div style='display: none'>
|
|
4
6
|
<%= f.file_field :image, multiple: true, name: 'simple_image[image]', class: 'simple_image_input' %>
|
|
5
7
|
</div>
|
|
8
|
+
|
|
9
|
+
<%= render 'simple_images/spinner', klass: form_id if spinner %>
|
|
6
10
|
<% end %>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<div class="floatingCirclesG si_spinner <%= klass %>">
|
|
2
|
+
<div class="f_circleG frotateG_01"></div>
|
|
3
|
+
<div class="f_circleG frotateG_02"></div>
|
|
4
|
+
<div class="f_circleG frotateG_03"></div>
|
|
5
|
+
<div class="f_circleG frotateG_04"></div>
|
|
6
|
+
<div class="f_circleG frotateG_05"></div>
|
|
7
|
+
<div class="f_circleG frotateG_06"></div>
|
|
8
|
+
<div class="f_circleG frotateG_07"></div>
|
|
9
|
+
<div class="f_circleG frotateG_08"></div>
|
|
10
|
+
</div>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: simple_images
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kainage
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-09-
|
|
11
|
+
date: 2013-09-10 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -223,6 +223,7 @@ files:
|
|
|
223
223
|
- Rakefile
|
|
224
224
|
- app/assets/javascripts/simple_images/ajax_uploader.js.coffee
|
|
225
225
|
- app/assets/javascripts/simple_images/uploader.js.coffee
|
|
226
|
+
- app/assets/stylesheets/simple_images/spinner.css.scss
|
|
226
227
|
- app/assets/stylesheets/simple_images/uploader.css.scss
|
|
227
228
|
- app/controllers/.keep
|
|
228
229
|
- app/controllers/simple_images_controller.rb
|
|
@@ -233,6 +234,7 @@ files:
|
|
|
233
234
|
- app/views/simple_images/_destroy.html.erb
|
|
234
235
|
- app/views/simple_images/_edit.html.erb
|
|
235
236
|
- app/views/simple_images/_form.html.erb
|
|
237
|
+
- app/views/simple_images/_spinner.html.erb
|
|
236
238
|
- config/initializers/dragonfly.rb
|
|
237
239
|
- lib/generators/simple_images_generator.rb
|
|
238
240
|
- lib/generators/templates/create_simple_images.rb
|