},
/**
- * Creates a "hover" button for image and link edition
+ * Creates a "hover" button for link edition
*
- * @param {String} label the button's label
* @param {Function} editfn edition function, called when clicking the button
- * @param {String} [classes] additional classes to set on the button
* @returns {jQuery}
*/
- make_hover_button: function (label, editfn, classes, styleButton) {
- var $div = $(openerp.qweb.render('website.editor.hoverbutton', {
- label: label,
- classes: classes,
- styleButton: styleButton
- })).hide().appendTo(document.body);
-
- $div.find("button.hover-edition-button").click(function (e) {
+ make_hover_button_link: function (editfn) {
+ return $(openerp.qweb.render('website.editor.hoverbutton.link', {}))
+ .hide()
+ .click(function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ editfn.call(this, e);
+ })
+ .appendTo(document.body);
+ },
+
+ /**
+ * Creates a "hover" button for image
+ *
+ * @param {Function} editfn edition function, called when clicking the button
+ * @param {Function} stylefn edition style function, called when clicking the button
+ * @returns {jQuery}
+ */
+ make_hover_button_image: function (editfn, stylefn) {
+ var $div = $(openerp.qweb.render('website.editor.hoverbutton.image', {}))
+ .hide()
+ .appendTo(document.body);
+
+ $div.find('[data-toggle="dropdown"]').dropdown();
+ $div.find(".hover-edition-button").click(function (e) {
e.preventDefault();
e.stopPropagation();
editfn.call(this, e);
});
- if (styleButton) {
- $div.find("button.hover-style-button").click(function (e) {
+ if (stylefn) {
+ $div.find(".hover-style-button").click(function (e) {
e.preventDefault();
e.stopPropagation();
- styleButton.call(this, e);
+ stylefn.call(this, e);
});
}
return $div;
*/
setup_hover_buttons: function () {
var editor = this.rte.editor;
- var $link_button = this.make_hover_button(_t("Change"), function () {
+ var $link_button = this.make_hover_button_link(function () {
var sel = new CKEDITOR.dom.element(previous);
editor.getSelection().selectElement(sel);
if(sel.hasClass('fa')) {
}
$link_button.hide();
previous = null;
- }, 'btn-xs');
+ });
- var $image_button = this.make_hover_button(_t("Change"), function () {
+ var $image_button = this.make_hover_button_image(function () {
image_dialog(editor, new CKEDITOR.dom.element(previous));
$image_button.hide();
previous = null;
- }, 'btn-sm', function () {
+ }, function () {
var prev = previous;
var sel = new CKEDITOR.dom.element(prev);
var $sel = $(sel.$);
});
website.editor.Media = openerp.Widget.extend({
- init: function (editor) {
+ init: function (editor, media) {
this._super();
this.editor = editor;
+ this.media = media;
},
save: function () {
},
this._super(editor);
},
start: function (editor, media) {
+ var self = this;
+ this.$preview = this.$(".preview-container");
+
this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
this.imageDialog.appendTo(this.$("#editor-media-image"));
this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
this.iconDialog.appendTo(this.$("#editor-media-icon"));
this.videoDialog = null;
//this.videoDialog.appendTo(this.$("#editor-media-video"));
+
+ this.preview(this.imageDialog);
+
+ $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
+ self.active.$preview.detach();
+ if ($(event.relatedTarget).is('[href="#editor-media-image"]'))
+ if ($(event.target).is('[href="#editor-media-image"]'))
+ event.target // activated tab
+ event.relatedTarget // previous tab
+ console.log(event);
+ console.log($(event.target).is('[href="#editor-media-image"]'));
+ })
+
return this._super();
},
+ preview: function (active) {
+ this.active = active;
+ this.$preview.after(active.$preview);
+ },
save: function () {
this.imageDialog.save();
this.iconDialog.save();
}),
start: function () {
- this.$('button.wait').text("Uploading…");
+ this.$preview = this.$('.preview-container').detach();
+
var $options = this.$('.image-style').children();
this.image_styles = $options.map(function () { return this.value; }).get();
var image = this.$('input.url').val();
if (!image) { loaded(); return; }
- var $img = this.$('img.image-preview')
+ var $img = this.$preview.find('img.image-preview')
.attr('src', image)
.removeClass(this.image_styles.join(' '))
.addClass(this.$('select.image-style').val());
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <div class="preview-container hidden"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
</div>
</t>
<t t-name="website.editor.dialog.image">
- <div class="row">
+ <div>
<form method="POST" action="/website/attach"
enctype="multipart/form-data"
- target="fileframe"
- class="col-sm-8">
+ target="fileframe">
<div class="text-center">
<input type="file" name="upload" accept="image/*" 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>
- <button type="button" class="btn btn-lg hidden wait" disabled="disabled"/>
+ <button type="button" class="btn btn-lg hidden wait" disabled="disabled">Uploading...</button>
<p class="text-muted mt16">— or —</p>
</div>
<div class="well">
<input type="hidden" name="func"/>
<div class="help-block"/>
</form>
- <div class="col-sm-4 image-preview-container">
- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
- class="pull-right img-rounded image-preview"
- width="100%"/>
- <img src="/web/static/src/img/throbber-large.gif"
- class="pull-right img-rounded wait hidden"
- width="100%"/>
- <select class="form-control image-style">
+ <div class="preview-container">
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D" class="image-preview"/>
+ <img src="/web/static/src/img/throbber-large.gif" class="wait hidden"/>
+ <!--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>
<option value="shadow">Shadow</option>
- </select>
+ </select-->
</div>
</div>
<iframe src="about:blank" name="fileframe" class="hidden"/>
</div>
</t>
- <t t-name="website.editor.hoverbutton">
- <div contentEditable="false" class="hover-edition">
- <button type="button" t-attf-class="btn btn-primary hover-edition-button #{classes or ''}"><t t-esc="label"/></button>
- <button t-if="styleButton" type="button" t-attf-class="btn btn-primary hover-style-button #{classes or ''}">Style</button>
+ <t t-name="website.editor.hoverbutton.link">
+ <button contentEditable="false" type="button" class="btn btn-primary hover-edition-button btn-xs">Change</button>
+ </t>
+
+ <t t-name="website.editor.hoverbutton.image">
+ <div contentEditable="false" class="hover-edition dropdown">
+ <a class="btn btn-primary btn-sm" data-toggle="dropdown" href="#">Customize</a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ <li><a href="#" class="hover-edition-button">Change Media</a></li>
+ <li><a href="#" class="hover-style-button">Style</a></li>
+ </ul>
</div>
</t>
projects / odoo / odoo.git / commitdiff