simple_images 0.0.3 → 0.0.4
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.
- 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
|