mirrors/EWF
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Image preview

Browse Source
This commit is contained in:
YNH Webdev
2014-01-25 23:43:18 +01:00
parent 13349d07a8
commit 5c9edeeae8
3 changed files with 69 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
draft/library/wsf_js_widget/kernel/input/wsf_file_control.e
View File

@@ -15,7 +15,7 @@ inherit
end
create
make
make, make_with_image_preview
feature {NONE} -- Initialization
@@ -24,6 +24,12 @@ feature {NONE} -- Initialization
make_value_control ("input")
end
make_with_image_preview
do
make
image_preview := True
end
feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
set_state (new_state: JSON_OBJECT)
@@ -37,6 +43,12 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
end
create file.make (new_name.unescaped_string_32, new_type.unescaped_string_32, new_size.item.to_integer_32, id);
end
if attached {JSON_BOOLEAN} new_state.item ("disabled") as a_disabled then
disabled := a_disabled.item
end
if attached {JSON_BOOLEAN} new_state.item ("image_preview") as a_image_preview then
image_preview := a_image_preview.item
end
end
state: WSF_JSON_OBJECT
@@ -52,6 +64,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
Result.put_string (f.id, "file_id")
end
Result.put_boolean (disabled, "disabled")
Result.put_boolean (image_preview, "image_preview")
end
feature -- Event handling
@@ -115,7 +128,7 @@ feature -- Implementation
if disabled then
attr.append ("disabled=%"disabled%" ")
end
Result := render_tag ("", attr)
Result := render_tag_with_tagname ("div", render_tag ("", attr), Void, "")
end
feature -- Change
@@ -151,11 +164,22 @@ feature -- Change
file := v
end
set_image_preview (b: BOOLEAN)
do
if image_preview /= b then
image_preview := b
state_changes.replace_with_boolean (image_preview, "image_preview")
end
end
feature -- Properties
disabled: BOOLEAN
-- Defines if the a file is selectable and if a file can be removed once it is uploaded
image_preview: BOOLEAN
-- Preview uploaded image
file: detachable WSF_FILE
-- Text to be displayed

21
examples/widgetapp/assets/widget.coffee
View File

@@ -385,7 +385,7 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
@uploading = true
@$el.hide()
@progressbar = $ """<div class="progress progress-striped active upload"><div rstyle="width: 10%;" class="progress-bar"></div></div>"""
@$el.parent().append(@progressbar)
@$el.parent().prepend(@progressbar)
formData = new FormData();
action = @callback_url
@@ -433,6 +433,15 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
@state['file_name'] = file.name
@state['file_type'] = file.type
@state['file_size'] = file.size
if @state['image_preview']
reader = new FileReader();
reader.readAsDataURL(@$el[0].files[0]);
self = @
reader.onload = (e)->
self.$el.parent().find("img").remove()
preview = $("""<img >""").addClass("media thumbnail")
preview[0].src = e.target.result
self.$el.parent().append(preview)
if @state['callback_change']
@trigger_callback(@control_name, 'change')
@trigger('change')
@@ -441,6 +450,9 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
return @$el.val()
update: (state) ->
if state.image_preview != undefined
@state['image_preview'] = state.image_preview
@refresh()
if state.disabled != undefined
@state['disabled'] = state.disabled
@$el.prop('disabled', state.disabled)
@@ -463,18 +475,21 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
if @uploading
return
@progressbar?.remove()
@$el.parent().find("p").remove()
@$el.parent().find("p, img").remove()
if @state['file_id'] != null
@$el.hide()
fname = $("""<p></p>""").addClass("form-control-static").text(@state['file_name'])
@$el.parent().append(fname)
if @state['image_preview']
preview = $("""<img >""").attr('src', @state['file_id']).addClass("media thumbnail")
@$el.parent().append(preview)
if not @state['disabled']
fname.append(" ");
removebtn = $("<button />").text("Remove").addClass("btn btn-xs btn-danger")
self = @
removebtn.click ()->
self.progressbar?.remove()
self.$el.parent().find("p").remove()
self.$el.parent().find("p, img").remove()
self.$el.show()
self.$el.val('')
self.change()

30
examples/widgetapp/assets/widget.js
View File

@@ -628,7 +628,7 @@ WSF_FILE_CONTROL = (function(_super) {
this.uploading = true;
this.$el.hide();
this.progressbar = $("<div class=\"progress progress-striped active upload\"><div rstyle=\"width: 10%;\" class=\"progress-bar\"></div></div>");
this.$el.parent().append(this.progressbar);
this.$el.parent().prepend(this.progressbar);
formData = new FormData();
action = this.callback_url({
control_name: this.get_full_control_name(),
@@ -674,7 +674,7 @@ WSF_FILE_CONTROL = (function(_super) {
};
WSF_FILE_CONTROL.prototype.change = function() {
var file;
var file, reader, self;
this.state['file_name'] = null;
this.state['file_type'] = null;
this.state['file_size'] = null;
@@ -685,6 +685,18 @@ WSF_FILE_CONTROL = (function(_super) {
this.state['file_type'] = file.type;
this.state['file_size'] = file.size;
}
if (this.state['image_preview']) {
reader = new FileReader();
reader.readAsDataURL(this.$el[0].files[0]);
self = this;
reader.onload = function(e) {
var preview;
self.$el.parent().find("img").remove();
preview = $("<img >").addClass("media thumbnail");
preview[0].src = e.target.result;
return self.$el.parent().append(preview);
};
}
if (this.state['callback_change']) {
this.trigger_callback(this.control_name, 'change');
}
@@ -696,6 +708,10 @@ WSF_FILE_CONTROL = (function(_super) {
};
WSF_FILE_CONTROL.prototype.update = function(state) {
if (state.image_preview !== void 0) {
this.state['image_preview'] = state.image_preview;
this.refresh();
}
if (state.disabled !== void 0) {
this.state['disabled'] = state.disabled;
this.$el.prop('disabled', state.disabled);
@@ -723,18 +739,22 @@ WSF_FILE_CONTROL = (function(_super) {
};
WSF_FILE_CONTROL.prototype.refresh = function() {
var fname, removebtn, self, _ref;
var fname, preview, removebtn, self, _ref;
if (this.uploading) {
return;
}
if ((_ref = this.progressbar) != null) {
_ref.remove();
}
this.$el.parent().find("p").remove();
this.$el.parent().find("p, img").remove();
if (this.state['file_id'] !== null) {
this.$el.hide();
fname = $("<p></p>").addClass("form-control-static").text(this.state['file_name']);
this.$el.parent().append(fname);
if (this.state['image_preview']) {
preview = $("<img >").attr('src', this.state['file_id']).addClass("media thumbnail");
this.$el.parent().append(preview);
}
if (!this.state['disabled']) {
fname.append(" ");
removebtn = $("<button />").text("Remove").addClass("btn btn-xs btn-danger");
@@ -744,7 +764,7 @@ WSF_FILE_CONTROL = (function(_super) {
if ((_ref1 = self.progressbar) != null) {
_ref1.remove();
}
self.$el.parent().find("p").remove();
self.$el.parent().find("p, img").remove();
self.$el.show();
self.$el.val('');
return self.change();