Skip to content
Browse files

Show image, once uploaded.

  • Loading branch information...
1 parent d732c3c commit f7f5b2b81c8c2e2aa99b7691911ce787f78da191 Michael Aufreiter committed Mar 26, 2012
Showing with 23 additions and 11 deletions.
  1. +10 −4 public/javascripts/substance.js
  2. +3 −3 public/javascripts/substance.min.js
  3. +10 −4 src/client/views/node/image.js
View
14 public/javascripts/substance.js
@@ -4173,15 +4173,21 @@ s.views.Node.define('/type/image', {
},
onSuccess: function (assembly) {
- // This triggers a node re-render
+
updateNode(this.model, {
url: assembly.results.web_version[1].url,
original_url: assembly.results.print_version[1].url,
dirty: true
});
-
- this.$('.progress-container').hide();
- this.$('.info').show();
+
+ this.img.attr({src: this.model.get('url')});
+
+ this.img[0].onload = _.bind(function() {
+ // Re-render node once ready
+ this.root.document.deselect()
+ this.$('.progress-container').hide();
+ this.$('.info').show();
+ }, this);
},
onError: function (assembly) {
View
6 public/javascripts/substance.min.js
@@ -149,9 +149,9 @@ this.operationsEl.empty();var a=this.model.get("creator"),b=this.model.get("publ
delete this.movedParent;$("#document").removeClass("move-mode")}}}});
s.views.Node.define("/type/image",{className:"content-node image",events:_.extend({"change .image-file":"upload"},s.views.Node.prototype.events),focus:function(){this.caption.click()},initializeUploadForm:function(){_.bindAll(this,"onStart","onProgress","onError");this.$(".upload-image-form").transloadit({modal:false,wait:true,autoSubmit:false,onStart:this.onStart,onProgress:this.onProgress,onError:this.onError,onSuccess:_.bind(function(a){a.results.web_version&&a.results.web_version[1]&&a.results.web_version[1].url?
this.onSuccess(a):this.onInvalid()},this)})},onStart:function(){this.$(".image-progress").show();this.$(".info").hide();this.$(".image-progress .label").html("Uploading …");this.$(".progress-bar").css("width","0%")},onProgress:function(a,b){var c=Math.max(0,parseInt(a/b*100));c||(c=0);this.$(".image-progress .label").html("Uploading … "+c+"%");this.$(".progress-bar").css("width",c+"%")},onSuccess:function(a){updateNode(this.model,{url:a.results.web_version[1].url,original_url:a.results.print_version[1].url,
-dirty:true});this.$(".progress-container").hide();this.$(".info").show()},onError:function(){},onInvalid:function(){this.$(".image-progress .label").html("Invalid image. Skipping &hellip;");this.$(".progress-container").hide();setTimeout(_.bind(function(){this.$(".info").show()},this),3E3)},upload:function(){this.$(".upload-image-form").submit()},render:function(){s.views.Node.prototype.render.apply(this);this.imageContent=$('<div class="image-content" />').appendTo(this.contentEl);this.model.get("url")||
-this.imageContent.addClass("placeholder");this.img=$("<img />").attr({src:this.model.get("url")||"/images/image_placeholder.png"});$('<a target="_blank" />').attr({href:this.model.get("original_url")}).append(this.img).appendTo(this.imageContent);this.imageEditor=$(s.util.tpl("image_editor",{transloadit_params:config.transloadit.image})).appendTo(this.imageContent);this.initializeUploadForm();this.caption=this.makeEditable($('<div class="caption" />'),"caption","Enter Caption").insertAfter(this.contentEl);
-return this}},{states:{write:{enter:function(){s.views.Node.states.write.enter.apply(this);this.img.unwrap()},leave:function(){s.views.Node.states.write.leave.apply(this);this.img.wrap($('<a target="_blank" />').attr({href:this.model.get("original_url")}))}}}});
+dirty:true});this.img.attr({src:this.model.get("url")});this.img[0].onload=_.bind(function(){this.root.document.deselect();this.$(".progress-container").hide();this.$(".info").show()},this)},onError:function(){},onInvalid:function(){this.$(".image-progress .label").html("Invalid image. Skipping &hellip;");this.$(".progress-container").hide();setTimeout(_.bind(function(){this.$(".info").show()},this),3E3)},upload:function(){this.$(".upload-image-form").submit()},render:function(){s.views.Node.prototype.render.apply(this);
+this.imageContent=$('<div class="image-content" />').appendTo(this.contentEl);this.model.get("url")||this.imageContent.addClass("placeholder");this.img=$("<img />").attr({src:this.model.get("url")||"/images/image_placeholder.png"});$('<a target="_blank" />').attr({href:this.model.get("original_url")}).append(this.img).appendTo(this.imageContent);this.imageEditor=$(s.util.tpl("image_editor",{transloadit_params:config.transloadit.image})).appendTo(this.imageContent);this.initializeUploadForm();this.caption=
+this.makeEditable($('<div class="caption" />'),"caption","Enter Caption").insertAfter(this.contentEl);return this}},{states:{write:{enter:function(){s.views.Node.states.write.enter.apply(this);this.img.unwrap()},leave:function(){s.views.Node.states.write.leave.apply(this);this.img.wrap($('<a target="_blank" />').attr({href:this.model.get("original_url")}))}}}});
s.views.Node.define("/type/question",{className:"content-node question",focus:function(){this.questionEl.click()},render:function(){s.views.Node.prototype.render.apply(this,arguments);this.questionEl=this.makeEditable($('<p class="question" />'),"content","Enter Question").appendTo(this.contentEl);return this}});
s.views.Node.define("/type/quote",{className:"content-node quote",focus:function(){this.quoteContentEl.click()},render:function(){s.views.Node.prototype.render.apply(this);var a=$("<blockquote />").appendTo(this.contentEl);this.quoteContentEl=this.makeEditable($('<p class="quote-content" />'),"content","Enter Quote").appendTo($("<div />").appendTo(a));this.quoteAuthorEl=this.makeEditable($('<cite class="quote-author" />'),"author","Enter Author").appendTo($("<div />").appendTo(a));$('<br clear="both" />').appendTo(this.contentEl);
return this}});
View
14 src/client/views/node/image.js
@@ -47,15 +47,21 @@ s.views.Node.define('/type/image', {
},
onSuccess: function (assembly) {
- // This triggers a node re-render
+
updateNode(this.model, {
url: assembly.results.web_version[1].url,
original_url: assembly.results.print_version[1].url,
dirty: true
});
-
- this.$('.progress-container').hide();
- this.$('.info').show();
+
+ this.img.attr({src: this.model.get('url')});
+
+ this.img[0].onload = _.bind(function() {
+ // Re-render node once ready
+ this.root.document.deselect()
+ this.$('.progress-container').hide();
+ this.$('.info').show();
+ }, this);
},
onError: function (assembly) {

0 comments on commit f7f5b2b

Please sign in to comment.
Something went wrong with that request. Please try again.