[ADD] image preview to dialog

bzr revid: xmo@openerp.com-20130902134920-um72bldsv19mf5ij
This commit is contained in:
Xavier Morel
2013-09-02 15:49:20 +02:00
parent b11dc9d3da
commit cf9ab25816
2 changed files with 35 additions and 18 deletions
@@ -473,6 +473,7 @@
this.$('input[type=file]').click();
},
'change input[type=file]': 'file_selection',
'change input.url': 'preview_image',
}),
start: function () {
var selection = this.editor.getSelection();
@@ -481,6 +482,7 @@
if (el && el.is('img')) {
this.element = el;
this.$('input.url').val(el.getAttribute('src'));
this.preview_image();
}
return this._super();
@@ -524,6 +526,13 @@
}
$button.addClass('btn-success');
this.$('input.url').val(url);
this.preview_image();
},
preview_image: function () {
var image = this.$('input.url').val();
if (!image) { return; }
this.$('img').attr('src', image);
},
});
@@ -62,25 +62,33 @@
</t>
<t t-name="website.editor.dialog.image">
<t t-call="website.editor.dialog">
<t t-set="title">Image</t>
<form method="POST" action="/website/attach"
enctype="multipart/form-data"
target="fileframe">
<div class="well">
<!-- a href="#" class="pull-left">Find image</a -->
<h3 class="list-group-item-heading">Image URL</h3>
<input type="text" class="form-control url"
placeholder="http://openerp.com"/>
<t t-set="title">Image:</t>
<div class="row">
<form method="POST" action="/website/attach"
enctype="multipart/form-data"
target="fileframe"
class="col-sm-8">
<div class="well">
<!-- a href="#" class="pull-left">Find image</a -->
<h3 class="list-group-item-heading">Image URL</h3>
<input type="text" class="form-control url"
placeholder="http://openerp.com"/>
</div>
<div class="text-center">
<p class="">— or —</p>
<input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
<button type="button" class="btn btn-primary btn-lg filepicker">
Upload an image from your computer
</button>
</div>
<input type="hidden" name="func"/>
</form>
<div class="col-sm-4">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
class="pull-right img-rounded"
width="100%"/>
</div>
<div class="text-center">
<p class="">— or —</p>
<input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
<button type="button" class="btn btn-primary btn-lg filepicker">
Upload an image from your computer
</button>
</div>
<input type="hidden" name="func"/>
</form>
</div>
<iframe src="about:blank" name="fileframe" class="hidden"/>
</t>
</t>