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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: adeac71675a578bacd3f774193af88bc3656afac
4
- data.tar.gz: 93153bec0a5e9896a49efb88d17ddb637b98f97e
3
+ metadata.gz: e41b83362c04b2785275e0a8360f73e694deee9b
4
+ data.tar.gz: 351ec083ce0230ab0188188843946b51b3d47637
5
5
  SHA512:
6
- metadata.gz: faccc9d2eec676636f08676730e96d49a29b097c43981092d2d98f081f150596d721e43d044350a60a408193b322750798df8476446489c1a030bb6fdf2154f8
7
- data.tar.gz: e8e89f66c66ea19d924f87468f18f67f4e2f0a783f185a043980b64a60dca8de42449e149219b6749927cc7fe4a24d08387abc7cb9872221582f233ee6f53ded
6
+ metadata.gz: 674dc02a86d2ef09e0767f90b64c01dda875090411bc92baff1123f1fa44f165d9e9c65b78387c4b1479ac84e03d7321abee0ab6639eb957f65892086c4d11d7
7
+ data.tar.gz: 1296a41c5a85eb7c491ebe8683d76aa681d88299513e94c42bbe11c7b9dd8931ed155cc64e7aa5ffcf6c9b53946d2962b9f4ad19faa7e8ad558bd5c9bfd1cc60
data/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ### 0.10.0 - 2015-06-25
4
+ Features
5
+ - New look
6
+
7
+ Fixes
8
+ - Works with nested fields
9
+
3
10
  ### 0.9.3 - 2015-02-11
4
11
  Features
5
12
  - Internationalization support
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
- $(document).on("upload:start", ".godmin-upload", function(e) {
11
- showProgressBar($(this));
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-upload", function(e) {
20
+ $(document).on("upload:progress", ".godmin-uploads", function(e) {
15
21
  setProgressBarPercentage($(this), 50);
16
22
  });
17
23
 
18
- $(document).on("upload:complete", ".godmin-upload", function(e) {
19
- setProgressBarPercentage($(this), 100);
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-upload", function(e) {
23
- setUploadPreview($(this));
24
- setDownloadUrl($(this));
25
- hideProgressBar($(this));
26
- showButtons($(this));
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-upload", function(e) {
41
+ $(document).on("upload:failure", ".godmin-uploads", function(e) {
30
42
  setProgressBarContext($(this), "danger");
31
43
  });
32
44
 
33
- $(document).on("click", ".godmin-upload-destroy-link", function(e) {
34
- var $destroyField = $(this).parents(".godmin-upload").find(".godmin-upload-destroy-field");
35
-
36
- if ($destroyField.val() === "") {
37
- $(this).find(".godmin-upload-destroy-label").hide();
38
- $(this).find(".godmin-upload-undo-destroy-label").show();
39
- $destroyField.val("true");
40
- } else {
41
- $(this).find(".godmin-upload-destroy-label").show();
42
- $(this).find(".godmin-upload-undo-destroy-label").hide();
43
- $destroyField.val("");
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 showButtons = function($el) {
63
- $el.find(".godmin-upload-buttons").removeClass("hidden");
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 setProgressBarPercentage = function($el, percentage) {
67
- $el.find(".progress").find(".progress-bar").css("width", percentage + "%");
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 setProgressBarContext = function($el, context) {
71
- $el.find(".progress-bar").addClass("progress-bar-" + context);
72
- };
73
-
74
- var setUploadPreview = function($el) {
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
- .godmin-upload {
2
- .godmin-upload-progress {
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
- .godmin-upload-file-field {
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
- .godmin-upload-undo-destroy-label {
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-upload media">
2
- <% if preview %>
3
- <div class="media-left">
4
- <%= attachment_image_tag(
5
- @resource, attachment, :fill, 100, 100, fallback: "http://placehold.it/100/f5f5f5/cccccc", size: "100", class: "godmin-upload-preview"
6
- ) %>
7
- </div>
8
- <% end %>
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
- <%= f.attachment_field attachment, direct: true, class: "godmin-upload-file-field" %>
17
- <%= f.hidden_field "remove_#{attachment}", class: "godmin-upload-destroy-field" %>
18
- <span class="godmin-upload-buttons <%= "hidden" unless f.object.send(attachment) %>">
19
- <%= link_to attachment_url(f.object, attachment), class: "btn btn-default godmin-upload-download-link" do %>
20
- <i class="glyphicon glyphicon-arrow-down"></i>
21
- <span><%= t("godmin.uploads.download_file") %></span>
22
- <% end %>
23
- <%= link_to "#", class: "btn btn-danger godmin-upload-destroy-link" do %>
24
- <i class="glyphicon glyphicon-remove"></i>
25
- <span class="godmin-upload-destroy-label"><%= t("godmin.uploads.destroy_file") %></span>
26
- <span class="godmin-upload-undo-destroy-label"><%= t("godmin.uploads.undo_destroy_file") %></span>
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
- </span>
29
- <div class="godmin-upload-progress progress">
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>
@@ -4,4 +4,5 @@ en:
4
4
  upload_file: Upload
5
5
  download_file: Download
6
6
  destroy_file: Remove
7
- undo_destroy_file: Undo remove
7
+ undo_destroy_file: Undo
8
+ set_to_remove: The file will be removed on save
@@ -4,4 +4,5 @@ sv:
4
4
  upload_file: Ladda upp
5
5
  download_file: Ladda ner
6
6
  destroy_file: Ta bort
7
- undo_destroy_file: Ångra borttagning
7
+ undo_destroy_file: Ångra
8
+ set_to_remove: Filen tas bort när du sparar
@@ -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
@@ -1,5 +1,5 @@
1
1
  module Godmin
2
2
  module Uploads
3
- VERSION = "0.9.3"
3
+ VERSION = "0.10.0"
4
4
  end
5
5
  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.9.3
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-02-11 00:00:00.000000000 Z
12
+ date: 2015-06-25 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: godmin