From e289e23298fc91e675f0a7686d3a769ff53663fb Mon Sep 17 00:00:00 2001 From: "chm@openerp.com" <> Date: Thu, 27 Mar 2014 18:14:17 +0100 Subject: [PATCH] [WIP] website media editor bzr revid: chm@openerp.com-20140327171417-nz2cd8tn2dmmljge --- addons/website/static/src/css/editor.css | 4 ++ addons/website/static/src/css/editor.sass | 3 + .../website/static/src/js/website.editor.js | 64 +++++++++++-------- .../website/static/src/xml/website.editor.xml | 39 ++++------- 4 files changed, 59 insertions(+), 51 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 1f4e0aecfdb..208cde08b45 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -324,6 +324,10 @@ ul.oe_menu_editor .disclose { cursor: pointer; } +.img-responsive { + text-align: center; +} + /* ---- MOBILE PREVIEW ---- {{{ */ .oe_mobile_preview.modal .modal-content { height: 660px; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 50f9b3e815e..f3aeb492883 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -284,6 +284,9 @@ $attachment-border-color: #848490 .cke_editable .fa cursor: pointer +.img-responsive + text-align: center + // }}} /* ---- MOBILE PREVIEW ---- {{{ */ diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index 87bce899025..d756f3c67d3 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -653,7 +653,7 @@ * @returns {jQuery} */ make_hover_button_image: function (editfn, stylefn) { - var $div = $(openerp.qweb.render('website.editor.hoverbutton.image', {})) + var $div = $(openerp.qweb.render('website.editor.hoverbutton.media', {})) .hide() .appendTo(document.body); @@ -1344,8 +1344,9 @@ }); website.editor.Media = openerp.Widget.extend({ - init: function (editor, media) { + init: function (parent, editor, media) { this._super(); + this.parent = parent; this.editor = editor; this.media = media; }, @@ -1353,6 +1354,8 @@ this.$preview = this.$('.preview-container').detach(); return this._super(); }, + search: function (needle) { + }, save: function () { }, cancel: function () { @@ -1362,6 +1365,9 @@ }); website.editor.MediaDialog = website.editor.Dialog.extend({ template: 'website.editor.dialog.media', + events : _.extend({}, website.editor.Dialog.prototype.events, { + 'input input#icon-search': 'search', + }), init: function (editor, media) { this.media = media; @@ -1371,9 +1377,9 @@ }, start: function (editor, media) { var self = this; - this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media); + this.imageDialog = new website.editor.RTEImageDialog(this, this.editor, this.media); this.imageDialog.appendTo(this.$("#editor-media-image")); - this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media); + this.iconDialog = new website.editor.FontIconsDialog(this, this.editor, this.media); this.iconDialog.appendTo(this.$("#editor-media-icon")); this.videoDialog = {}; //this.videoDialog.appendTo(this.$("#editor-media-video")); @@ -1401,11 +1407,23 @@ return this._super(); }, save: function () { - if (this.active) { - this.active.save(); + this.active.save(); + if (this.active === this.imageDialog) { + this.media.$.className = this.media.$.className.replace(/(^|\s)fa[^\s]+/g, ''); + $(this.media.$).addClass("img img-responsive"); + } + if (this.active === this.iconDialog) { + this.media.$.className = this.media.$.className.replace(/(^|\s)img[^\s]+/g, ''); + } + if (this.active === this.videoDialog) { + this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, ''); } return this._super(); }, + search: function () { + var needle = this.$("input#icon-search").val(); + this.active.search(needle || ""); + } }); /** @@ -1612,8 +1630,8 @@ }); website.editor.RTEImageDialog = website.editor.ImageDialog.extend({ - init: function (editor, media) { - this._super(editor, media); + init: function (parent, editor, media) { + this._super(parent, editor, media); this.on('start', this, this.proxy('started')); this.on('save', this, this.proxy('saved')); @@ -1690,20 +1708,6 @@ this.$('#fa-size').val(e.target.getAttribute('data-size')); this.update_preview(); }, - 'input input#icon-search': function () { - var needle = this.$('#icon-search').val(); - var icons = this.icons; - if (needle) { - icons = _(icons).filter(function (icon) { - return icon.id.substring(3).indexOf(needle) !== -1; - }); - } - - this.$('div.font-icons-icons').html( - openerp.qweb.render( - 'website.editor.dialog.font-icons.icons', - {icons: icons})); - }, }), // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet. @@ -1720,6 +1724,19 @@ start: function () { return this._super().then(this.proxy('load_data')); }, + search: function (needle) { + var icons = this.icons; + if (needle) { + icons = _(icons).filter(function (icon) { + return icon.id.substring(3).indexOf(needle) !== -1; + }); + } + + this.$('div.font-icons-icons').html( + openerp.qweb.render( + 'website.editor.dialog.font-icons.icons', + {icons: icons})); + }, /** * Removes existing FontAwesome classes on the bound element, and sets * all the new ones if necessary. @@ -1765,9 +1782,6 @@ this.$('#fa-icon').val(cls); } } - if (this.$('#fa-icon').val() === "") { - this.$('#fa-icon').val("fa-glass"); - } this.update_preview(); }, /** diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index f6fe37c5bd4..607e603e724 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -108,10 +108,8 @@
  • -
    +
    - -
    @@ -256,23 +254,29 @@ - +
    Customize
    - + +
    @@ -281,23 +285,6 @@
    -
    - - -
    -
    - -