},
'change input[type=file]': 'file_selection',
'change input.url': 'preview_image',
+ 'change select.image-style': 'preview_image',
'click .existing-attachments a': 'select_existing',
}),
start: function () {
var selection = this.editor.getSelection();
var el = selection && selection.getSelectedElement();
this.element = null;
+
+ var $select = this.$('.image-style');
+ var $options = $select.children();
+ this.image_styles = $options.map(function () { return this.value; }).get();
+
if (el && el.is('img')) {
this.element = el;
+ _(this.image_styles).each(function (style) {
+ if (el.hasClass(style)) {
+ $select.val(style);
+ }
+ });
+ // set_image should follow setup of image style
this.set_image(el.getAttribute('src'));
}
},
save: function () {
var url = this.$('input.url').val();
+ var style = this.$('.image-style').val();
var element, editor = this.editor;
if (!(element = this.element)) {
element = editor.document.createElement('img');
}, 0);
}
element.setAttribute('src', url);
- this._super();
+ $(element.$).removeClass(this.image_styles.join(' '));
+ if (style) { element.addClass(style); }
+
+ return this._super();
},
/**
var image = this.$('input.url').val();
if (!image) { return; }
- this.$('img.image-preview').attr('src', image);
+ this.$('img.image-preview')
+ .attr('src', image)
+ .removeClass(this.image_styles.join(' '))
+ .addClass(this.$('select.image-style').val());
},
fetch_existing: function () {
<t t-call="website.editor.dialog">
<t t-set="title">Image:</t>
<div>
- <div>
+ <div class="image-preview-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
class="pull-right img-rounded image-preview"
width="100%"/>
+ <select class="form-control image-style">
+ <option value="">No styling</option>
+ <option value="img-rounded">Rounded corners</option>
+ <option value="img-thumbnail">Box</option>
+ <option value="img-circle">Circle</option>
+ </select>
</div>
<form method="POST" action="/website/attach"
enctype="multipart/form-data"