godmin-uploads 0.9.3 → 0.10.0

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 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