godmin-uploads 0.9.3 → 0.10.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/README.md +3 -1
- data/app/assets/javascripts/godmin-uploads/index.js +62 -54
- data/app/assets/stylesheets/godmin-uploads.css.scss +207 -4
- data/app/views/godmin/uploads/_uploader.html.erb +55 -27
- data/config/locales/en.yml +2 -1
- data/config/locales/sv.yml +2 -1
- data/lib/godmin/uploads/helper.rb +2 -2
- data/lib/godmin/uploads/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e41b83362c04b2785275e0a8360f73e694deee9b
|
4
|
+
data.tar.gz: 351ec083ce0230ab0188188843946b51b3d47637
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 674dc02a86d2ef09e0767f90b64c01dda875090411bc92baff1123f1fa44f165d9e9c65b78387c4b1479ac84e03d7321abee0ab6639eb957f65892086c4d11d7
|
7
|
+
data.tar.gz: 1296a41c5a85eb7c491ebe8683d76aa681d88299513e94c42bbe11c7b9dd8931ed155cc64e7aa5ffcf6c9b53946d2962b9f4ad19faa7e8ad558bd5c9bfd1cc60
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -27,12 +27,14 @@ Then, simply use the `uploader` in your form like so:
|
|
27
27
|
<%= f.input_field :title %>
|
28
28
|
<%= f.text_field :body %>
|
29
29
|
|
30
|
-
<%= f.uploader :attachment, preview: true %>
|
30
|
+
<%= f.uploader :attachment, preview: true, remove: false %>
|
31
31
|
<% end %>
|
32
32
|
```
|
33
33
|
|
34
34
|
The `preview` option should only be used for image attachments.
|
35
35
|
|
36
|
+
By setting `remove: false` the uploader's remove image action is hidden.
|
37
|
+
|
36
38
|
## Contributors
|
37
39
|
|
38
40
|
https://github.com/varvet/godmin-uploads/graphs/contributors
|
@@ -7,44 +7,72 @@
|
|
7
7
|
(function() {
|
8
8
|
|
9
9
|
var initialize = function() {
|
10
|
-
|
11
|
-
|
10
|
+
|
11
|
+
$('[data-toggle="tooltip"]').tooltip()
|
12
|
+
|
13
|
+
$(document).on("upload:start", ".godmin-uploads", function(e) {
|
14
|
+
var $el = $(this);
|
15
|
+
$el.removeClass("godmin-uploads-success");
|
16
|
+
$el.addClass("godmin-uploads-start");
|
17
|
+
showProgressBar($el);
|
12
18
|
});
|
13
19
|
|
14
|
-
$(document).on("upload:progress", ".godmin-
|
20
|
+
$(document).on("upload:progress", ".godmin-uploads", function(e) {
|
15
21
|
setProgressBarPercentage($(this), 50);
|
16
22
|
});
|
17
23
|
|
18
|
-
$(document).on("upload:complete", ".godmin-
|
19
|
-
|
24
|
+
$(document).on("upload:complete", ".godmin-uploads", function(e) {
|
25
|
+
var $el = $(this);
|
26
|
+
setProgressBarPercentage($el, 100);
|
27
|
+
$el.removeClass("godmin-uploads-start");
|
28
|
+
$el.addClass("godmin-uploads-complete");
|
20
29
|
});
|
21
30
|
|
22
|
-
$(document).on("upload:success", ".godmin-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
31
|
+
$(document).on("upload:success", ".godmin-uploads", function(e) {
|
32
|
+
var $el = $(this);
|
33
|
+
var fileObject = getFileObject($el);
|
34
|
+
setUploadPreview($el, fileObject);
|
35
|
+
setDownloadUrl($el, fileObject);
|
36
|
+
hideProgressBar($el);
|
37
|
+
$el.removeClass("godmin-uploads-complete");
|
38
|
+
$el.addClass("godmin-uploads-success");
|
27
39
|
});
|
28
40
|
|
29
|
-
$(document).on("upload:failure", ".godmin-
|
41
|
+
$(document).on("upload:failure", ".godmin-uploads", function(e) {
|
30
42
|
setProgressBarContext($(this), "danger");
|
31
43
|
});
|
32
44
|
|
33
|
-
$(document).on("click", ".godmin-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
+
$(document).on("click", ".godmin-uploads__remove-link", function(e) {
|
46
|
+
e.preventDefault();
|
47
|
+
var $el = $(this).parents(".godmin-uploads");
|
48
|
+
$el.removeClass("godmin-uploads-success");
|
49
|
+
$el.addClass("godmin-uploads-remove");
|
50
|
+
setDestroy($el);
|
51
|
+
});
|
52
|
+
|
53
|
+
$(document).on("click", ".remove__actions__undo", function(e) {
|
54
|
+
var $el = $(this).parents(".godmin-uploads");
|
55
|
+
$el.removeClass("godmin-uploads-remove");
|
56
|
+
$el.addClass("godmin-uploads-success");
|
57
|
+
unsetDestroy($el);
|
45
58
|
});
|
46
59
|
};
|
47
60
|
|
61
|
+
var setDestroy = function($el) {
|
62
|
+
$el.find(".godmin-uploads__remove-field").val("true");
|
63
|
+
}
|
64
|
+
|
65
|
+
var unsetDestroy = function($el) {
|
66
|
+
$el.find(".godmin-uploads__remove-field").val("");
|
67
|
+
}
|
68
|
+
var setProgressBarPercentage = function($el, percentage) {
|
69
|
+
$el.find(".progress").find(".progress-bar").css("width", percentage + "%");
|
70
|
+
};
|
71
|
+
|
72
|
+
var setProgressBarContext = function($el, context) {
|
73
|
+
$el.find(".progress-bar").addClass("progress-bar-" + context);
|
74
|
+
};
|
75
|
+
|
48
76
|
var showProgressBar = function($el) {
|
49
77
|
$el.find(".progress").show();
|
50
78
|
};
|
@@ -52,47 +80,27 @@
|
|
52
80
|
var hideProgressBar = function($el) {
|
53
81
|
setTimeout(function() {
|
54
82
|
$el.find(".progress").slideUp();
|
55
|
-
|
56
83
|
setTimeout(function() {
|
57
84
|
setProgressBarPercentage($el, 0);
|
58
85
|
}, 1000);
|
59
86
|
}, 2000);
|
60
87
|
};
|
61
88
|
|
62
|
-
var
|
63
|
-
$el.find(".godmin-
|
89
|
+
var setUploadPreview = function($el, fileObject) {
|
90
|
+
$el.find(".godmin-uploads__preview__image").attr(
|
91
|
+
"src", fileObject.url + "/fill/0/400/" + fileObject.id + "/image");
|
64
92
|
};
|
65
93
|
|
66
|
-
var
|
67
|
-
$el.find(".
|
94
|
+
var setDownloadUrl = function($el, fileObject) {
|
95
|
+
$el.find(".godmin-uploads__preview__download__link").attr(
|
96
|
+
"href", fileObject.url + "/" + fileObject.id + "/image");
|
68
97
|
};
|
69
98
|
|
70
|
-
var
|
71
|
-
$el.find(".
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
var $urlParts = getFileUrlParts($el);
|
76
|
-
|
77
|
-
$el.find(".godmin-upload-preview").attr(
|
78
|
-
"src", $urlParts[0] + "/fill/150/150/" + $urlParts[1].id + "/foobar"
|
79
|
-
);
|
80
|
-
};
|
81
|
-
|
82
|
-
var setDownloadUrl = function($el) {
|
83
|
-
var $urlParts = getFileUrlParts($el);
|
84
|
-
|
85
|
-
$el.find(".godmin-upload-download-link").attr(
|
86
|
-
"href", $urlParts[0] + "/" + $urlParts[1].id + "/foobar"
|
87
|
-
);
|
88
|
-
};
|
89
|
-
|
90
|
-
var getFileUrlParts = function($el) {
|
91
|
-
var $file = $el.find(".godmin-upload-file-field");
|
92
|
-
|
93
|
-
return [
|
94
|
-
$file.data("url"), JSON.parse($file.prev().val())
|
95
|
-
];
|
99
|
+
var getFileObject = function($el) {
|
100
|
+
var $file = $el.find(".godmin-uploads__file-field")
|
101
|
+
var fileObject = JSON.parse($file.prev().val());
|
102
|
+
fileObject.url = $file.data("url")
|
103
|
+
return fileObject;
|
96
104
|
};
|
97
105
|
|
98
106
|
$(function() {
|
@@ -1,13 +1,216 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
$border-radius: 4px;
|
2
|
+
|
3
|
+
.godmin-uploads__info__progress { display: none; }
|
4
|
+
|
5
|
+
.godmin-uploads {
|
6
|
+
max-height: 152px;
|
7
|
+
min-height: 152px;
|
8
|
+
width: 100%;
|
9
|
+
display: flex;
|
10
|
+
flex-direction: row;
|
11
|
+
justify-content: center;
|
12
|
+
align-items: center;
|
13
|
+
position: relative;
|
14
|
+
border-radius: $border-radius;
|
15
|
+
overflow: hidden;
|
16
|
+
}
|
17
|
+
|
18
|
+
///States///
|
19
|
+
.godmin-uploads {
|
20
|
+
border: 1px dashed #ddd;
|
21
|
+
.godmin-uploads__preview,
|
22
|
+
.godmin-uploads__remove-link,
|
23
|
+
.godmin-uploads__complete,
|
24
|
+
.godmin-uploads__info {
|
3
25
|
display: none;
|
4
26
|
}
|
27
|
+
.godmin-uploads__placeholder {
|
28
|
+
display: block;
|
29
|
+
}
|
30
|
+
}
|
5
31
|
|
6
|
-
|
32
|
+
.godmin-uploads-start {
|
33
|
+
border: 1px dashed #ddd;
|
34
|
+
.godmin-uploads__preview__actions
|
35
|
+
.godmin-uploads__remove-link,
|
36
|
+
.godmin-uploads__placeholder,
|
37
|
+
.godmin-uploads__preview__actions {
|
7
38
|
display: none;
|
8
39
|
}
|
40
|
+
.godmin-uploads__info {
|
41
|
+
display: block;
|
42
|
+
}
|
43
|
+
}
|
9
44
|
|
10
|
-
|
45
|
+
.godmin-uploads-complete {
|
46
|
+
border: 1px dashed #ddd;
|
47
|
+
.godmin-uploads__preview__actions
|
48
|
+
.godmin-uploads__remove-link,
|
49
|
+
.godmin-uploads__placeholder,
|
50
|
+
.godmin-uploads__preview__actions {
|
11
51
|
display: none;
|
12
52
|
}
|
53
|
+
.godmin-uploads__info {
|
54
|
+
display: block;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.godmin-uploads-success {
|
59
|
+
max-height: 1200px;
|
60
|
+
transition: max-height 0.5s ease-in-out 0.3s;
|
61
|
+
border: none;
|
62
|
+
.godmin-uploads__placeholder,
|
63
|
+
.godmin-uploads__preview__set-to-remove,
|
64
|
+
.godmin-uploads__complete {
|
65
|
+
display: none
|
66
|
+
}
|
67
|
+
.godmin-uploads__preview,
|
68
|
+
.godmin-uploads__remove-link {
|
69
|
+
display: block;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
.godmin-uploads-remove {
|
74
|
+
border: none;
|
75
|
+
.godmin-uploads__remove-link,
|
76
|
+
.godmin-uploads__placeholder,
|
77
|
+
.godmin-uploads__preview__actions,
|
78
|
+
.godmin-uploads__complete {
|
79
|
+
display: none;
|
80
|
+
}
|
81
|
+
.godmin-uploads__preview,
|
82
|
+
.godmin-uploads__preview__set-to-remove {
|
83
|
+
display: block;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
///end States///
|
88
|
+
|
89
|
+
.godmin-uploads__preview__set-to-remove {
|
90
|
+
border-radius: $border-radius;
|
91
|
+
font-size: 1em;
|
92
|
+
height: 100%;
|
93
|
+
width: 100%;
|
94
|
+
background-color: rgba(39, 39, 39, 0.8);
|
95
|
+
color: #fff;
|
96
|
+
position: absolute;
|
97
|
+
top: 0;
|
98
|
+
.godmin-uploads__preview__set-to-remove__actions {
|
99
|
+
display: flex;
|
100
|
+
flex-direction: column;
|
101
|
+
justify-content: center;
|
102
|
+
align-items: center;
|
103
|
+
width: 100%;
|
104
|
+
height: 100%;
|
105
|
+
.remove__actions__undo {
|
106
|
+
padding: 20px 0;
|
107
|
+
cursor: pointer;
|
108
|
+
.glyphicon-repeat {
|
109
|
+
font-size: 2em;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
.godmin-uploads__preview {
|
116
|
+
position: relative;
|
117
|
+
text-align: center;
|
118
|
+
&:hover {
|
119
|
+
.godmin-uploads__preview__actions {
|
120
|
+
opacity: 1;
|
121
|
+
transition: opacity 0.2s ease-in-out 0.1s;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
.godmin-uploads__preview__image {
|
127
|
+
border: 1px solid #ddd;
|
128
|
+
border-radius: $border-radius;
|
129
|
+
max-width: 100%;
|
130
|
+
max-height: 100%;
|
131
|
+
min-width: 152px;
|
132
|
+
min-height: 152px;
|
133
|
+
}
|
134
|
+
|
135
|
+
.godmin-uploads__preview .glyphicon-file {
|
136
|
+
font-size: 80px;
|
137
|
+
height: 150px;
|
138
|
+
width: 150px;
|
139
|
+
line-height: 150px;
|
140
|
+
}
|
141
|
+
|
142
|
+
.godmin-uploads__placeholder {
|
143
|
+
cursor: pointer;
|
144
|
+
text-align: center;
|
145
|
+
width: 100px;
|
146
|
+
.glyphicon-cloud-upload {
|
147
|
+
font-size: 40px;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
.godmin-uploads__placeholder__file-label {
|
152
|
+
cursor: pointer;
|
153
|
+
}
|
154
|
+
|
155
|
+
.godmin-uploads__placeholder {
|
156
|
+
color: #ddd;
|
157
|
+
&:hover {
|
158
|
+
color: #bbb;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
.godmin-uploads__preview__actions {
|
163
|
+
opacity: 0;
|
164
|
+
background-color: rgba(0, 0, 0, 0.5);
|
165
|
+
width: 3em;
|
166
|
+
height: 100%;
|
167
|
+
position: absolute;
|
168
|
+
top: 0;
|
169
|
+
right: 0;
|
170
|
+
z-index: 1;
|
171
|
+
border-top: 1px solid #ddd;
|
172
|
+
border-bottom: 1px solid #ddd;
|
173
|
+
border-top-right-radius: 4px;
|
174
|
+
border-bottom-right-radius: 4px;
|
175
|
+
}
|
176
|
+
|
177
|
+
.godmin-uploads__remove-link,
|
178
|
+
.godmin-uploads__preview__download,
|
179
|
+
.godmin-uploads__preview__update {
|
180
|
+
float: right;
|
181
|
+
display: block;
|
182
|
+
width: 100%;
|
183
|
+
height: 50px;
|
184
|
+
color: #fff;
|
185
|
+
font-weight: bold;
|
186
|
+
.glyphicon {
|
187
|
+
font-size: 1.5em;
|
188
|
+
line-height: 50px;
|
189
|
+
}
|
190
|
+
&:hover {
|
191
|
+
background-color: rgba(0, 0, 0, 0.8);
|
192
|
+
cursor: pointer;
|
193
|
+
color: #ddd;
|
194
|
+
text-decoration: none;
|
195
|
+
}
|
196
|
+
&:active {
|
197
|
+
color: #bbb;
|
198
|
+
}
|
199
|
+
a{
|
200
|
+
color: #fff;
|
201
|
+
text-decoration: none;
|
202
|
+
&:hover { color: #ddd; }
|
203
|
+
&:active { color: #bbb; }
|
204
|
+
}
|
205
|
+
}
|
206
|
+
|
207
|
+
.godmin-uploads__preview__update__file-label { cursor: pointer; }
|
208
|
+
|
209
|
+
.godmin-uploads__info {
|
210
|
+
width: 100%;
|
211
|
+
}
|
212
|
+
|
213
|
+
.godmin-uploads__info__progress {
|
214
|
+
margin: 0 auto;
|
215
|
+
width: 80%;
|
13
216
|
}
|
@@ -1,34 +1,62 @@
|
|
1
|
-
<div class="godmin-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
<div class="media-body">
|
10
|
-
<%= f.label attachment do %>
|
11
|
-
<span class="btn btn-default godmin-upload-upload-link">
|
12
|
-
<i class="glyphicon glyphicon-arrow-up"></i>
|
13
|
-
<span><%= t("godmin.uploads.upload_file") %></span>
|
14
|
-
</span>
|
1
|
+
<div class="godmin-uploads <%= 'godmin-uploads-success' if f.object.send(attachment) %>">
|
2
|
+
|
3
|
+
<%= f.attachment_field attachment, direct: true, class: "hidden godmin-uploads__file-field" %>
|
4
|
+
|
5
|
+
<div class="godmin-uploads__placeholder">
|
6
|
+
<%= f.label attachment, class:"godmin-uploads__placeholder__file-label" do %>
|
7
|
+
<div class="glyphicon glyphicon-cloud-upload"></div>
|
8
|
+
<div><%= t("godmin.uploads.upload_file")%></div>
|
15
9
|
<% end %>
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<div class="godmin-uploads__preview">
|
13
|
+
<% if preview %>
|
14
|
+
<%= attachment_image_tag(f.object, attachment, :fill, 0, 400, fallback: "http://placehold.it/150/f5f5f5/cccccc", class:"godmin-uploads__preview__image", alt:"") %>
|
15
|
+
<% else %>
|
16
|
+
<div class="glyphicon glyphicon-file godmin-uploads__preview__icon"></div>
|
17
|
+
<% end %>
|
18
|
+
|
19
|
+
<div class="godmin-uploads__preview__actions">
|
20
|
+
|
21
|
+
<% if remove %>
|
22
|
+
<%= f.hidden_field "remove_#{attachment}", class: "godmin-uploads__remove-field" %>
|
23
|
+
<div class="godmin-uploads__preview__remove" title="<%= t("godmin.uploads.destroy_file") %>">
|
24
|
+
<%= link_to "#", class: "godmin-uploads__remove-link" do %>
|
25
|
+
<i class="glyphicon glyphicon-remove"></i>
|
26
|
+
<% end %>
|
27
|
+
</div>
|
27
28
|
<% end %>
|
28
|
-
|
29
|
-
|
29
|
+
|
30
|
+
<div class="godmin-uploads__preview__download" title="<%= t("godmin.uploads.download_file") %>">
|
31
|
+
<%= link_to attachment_url(f.object, attachment), class: "godmin-uploads__preview__download__link" do %>
|
32
|
+
<i class="glyphicon glyphicon-cloud-download"></i>
|
33
|
+
<% end %>
|
34
|
+
</div>
|
35
|
+
|
36
|
+
<div class="godmin-uploads__preview__update" title="<%= t("godmin.uploads.upload_file") %>">
|
37
|
+
<%= f.label attachment, class:"godmin-uploads__preview__update__file-label" do %>
|
38
|
+
<i class="glyphicon glyphicon-cloud-upload"></i>
|
39
|
+
<% end %>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
</div>
|
43
|
+
|
44
|
+
<div class="godmin-uploads__preview__set-to-remove">
|
45
|
+
<div class="godmin-uploads__preview__set-to-remove__actions">
|
46
|
+
<div> <%= t("godmin.uploads.set_to_remove") %> </div>
|
47
|
+
<div class="remove__actions__undo">
|
48
|
+
<i class="glyphicon glyphicon-repeat"></i>
|
49
|
+
<div> <%= t("godmin.uploads.undo_destroy_file") %> </div>
|
50
|
+
</div>
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div class="godmin-uploads__info">
|
56
|
+
<div class="godmin-uploads__info__progress progress">
|
30
57
|
<div class="progress-bar progress-bar-striped active" style="width: 0%;">
|
31
58
|
</div>
|
32
59
|
</div>
|
33
60
|
</div>
|
61
|
+
|
34
62
|
</div>
|
data/config/locales/en.yml
CHANGED
data/config/locales/sv.yml
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
module Godmin
|
2
2
|
module Uploads
|
3
3
|
module Helper
|
4
|
-
def uploader(attachment, preview: false)
|
4
|
+
def uploader(attachment, preview: false, remove: true)
|
5
5
|
@template.render partial: "godmin/uploads/uploader", locals: {
|
6
|
-
f: self, attachment: attachment, preview: preview
|
6
|
+
f: self, attachment: attachment, preview: preview, remove: remove
|
7
7
|
}
|
8
8
|
end
|
9
9
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: godmin-uploads
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.10.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jens Ljungblad
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2015-
|
12
|
+
date: 2015-06-25 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: godmin
|