diff options
Diffstat (limited to 'addons/website/static/src/js/website.editor.js')
| -rw-r--r-- | addons/website/static/src/js/website.editor.js | 859 |
1 files changed, 623 insertions, 236 deletions
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index dc82c0c17b9..365b8cf46ea 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -20,6 +20,10 @@ website.form(this.pathname, 'POST'); }); + $(document).on('click', '.cke_editable label', function (ev) { + ev.preventDefault(); + }); + $(document).on('submit', '.cke_editable form', function (ev) { // Disable form submition in editable mode ev.preventDefault(); @@ -60,28 +64,35 @@ return new website.editor.RTELinkDialog(editor).appendTo(document.body); } function image_dialog(editor, image) { - return new website.editor.RTEImageDialog(editor, image).appendTo(document.body); + return new website.editor.MediaDialog(editor, image).appendTo(document.body); } // only enable editors manually CKEDITOR.disableAutoInline = true; // EDIT ALL THE THINGS - CKEDITOR.dtd.$editable = $.extend( - {}, CKEDITOR.dtd.$block, CKEDITOR.dtd.$inline); + CKEDITOR.dtd.$editable = _.omit( + $.extend({}, CKEDITOR.dtd.$block, CKEDITOR.dtd.$inline), + // well maybe not *all* the things + 'ul', 'ol', 'li', 'table', 'tr', 'th', 'td'); // Disable removal of empty elements on CKEDITOR activation. Empty // elements are used for e.g. support of FontAwesome icons CKEDITOR.dtd.$removeEmpty = {}; website.init_editor = function () { CKEDITOR.plugins.add('customdialogs', { -// requires: 'link,image', + // requires: 'link,image', init: function (editor) { editor.on('doubleclick', function (evt) { var element = evt.data.element; - if (element.is('img') && is_editable_node(element)) { + if ((element.is('img') || element.$.className.indexOf(' fa-') != -1) && is_editable_node(element)) { image_dialog(editor, element); return; } + var parent = new CKEDITOR.dom.element(element.$.parentNode); + if (parent.$.className.indexOf('media_iframe_video') != -1 && is_editable_node(parent)) { + image_dialog(editor, parent); + return; + } element = get_selected_link(editor) || evt.data.element; if (!(element.is('a') && is_editable_node(element))) { @@ -100,15 +111,17 @@ }, canUndo: false, editorFocus: true, + context: 'a', }); //noinspection JSValidateTypes - editor.addCommand('image', { + editor.addCommand('cimage', { exec: function (editor) { image_dialog(editor); return true; }, canUndo: false, editorFocus: true, + context: 'img', }); editor.ui.addButton('Link', { @@ -118,7 +131,7 @@ }); editor.ui.addButton('Image', { label: 'Image', - command: 'image', + command: 'cimage', toolbar: 'insert,10', }); @@ -199,8 +212,9 @@ icon: '/website/static/src/img/bglink.png', modes: { wysiwyg: true }, editorFocus: true, + context: 'a', panel: { - css: '/website/static/lib/bootstrap/css/bootstrap.css', + css: '/web/static/lib/bootstrap/css/bootstrap.css', attributes: { 'role': 'listbox', 'aria-label': label }, }, @@ -340,14 +354,40 @@ requires: 'widget', init: function (editor) { + var specials = { + // Can't find the correct ACL rule to only allow img tags + image: { content: '*' }, + html: { text: '*' }, + monetary: { + text: { + selector: 'span.oe_currency_value', + allowedContent: { } + } + } + }; + _(specials).each(function (editable, type) { + editor.widgets.add(type, { + draggable: false, + editables: editable, + upcast: function (el) { + return el.attributes['data-oe-type'] === type; + + } + }); + }); editor.widgets.add('oeref', { - editables: { text: '*' }, draggable: false, - + editables: { + text: { + selector: '*', + allowedContent: { } + }, + }, upcast: function (el) { - var matches = el.attributes['data-oe-type'] && el.attributes['data-oe-type'] !== 'monetary'; - if (!matches) { return false; } - + var type = el.attributes['data-oe-type']; + if (!type || (type in specials)) { + return false; + } if (el.attributes['data-oe-original']) { while (el.children.length) { el.children[0].remove(); @@ -357,28 +397,24 @@ )); } return true; - }, - }); - editor.widgets.add('monetary', { - editables: { text: 'span.oe_currency_value' }, - draggable: false, - - upcast: function (el) { - return el.attributes['data-oe-type'] === 'monetary'; } }); + editor.widgets.add('icons', { draggable: false, init: function () { this.on('edit', function () { - new website.editor.FontIconsDialog(editor, this.element.$) + new website.editor.MediaDialog(editor, this.element) .appendTo(document.body); }); }, upcast: function (el) { - return el.attributes['class'] - && (/\bfa\b/.test(el.attributes['class'])); + return el.hasClass('fa') + // ignore ir.ui.view (other data-oe-model should + // already have been matched by oeref and + // monetary? + && !el.attributes['data-oe-model']; } }); } @@ -598,22 +634,48 @@ }, /** - * Creates a "hover" button for image and link edition + * Creates a "hover" button for link edition + * + * @param {Function} editfn edition function, called when clicking the button + * @returns {jQuery} + */ + 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 {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 + * @param {Function} stylefn edition style function, called when clicking the button * @returns {jQuery} */ - make_hover_button: function (label, editfn, classes) { - return $(openerp.qweb.render('website.editor.hoverbutton', { - label: label, - classes: classes, - })).hide().appendTo(document.body).click(function (e) { + make_hover_button_image: function (editfn, stylefn) { + var $div = $(openerp.qweb.render('website.editor.hoverbutton.media', {})) + .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 (stylefn) { + $div.find(".hover-style-button").click(function (e) { + e.preventDefault(); + e.stopPropagation(); + stylefn.call(this, e); + }); + } + return $div; }, /** * For UI clarity, during RTE edition when the user hovers links and @@ -622,69 +684,61 @@ */ 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 (previous.tagName.toUpperCase() === 'A') { - link_dialog(editor); - } else if(sel.hasClass('fa')) { - new website.editor.FontIconsDialog(editor, previous) + if(sel.hasClass('fa')) { + new website.editor.MediaDialog(editor, previous) .appendTo(document.body); + } else if (previous.tagName.toUpperCase() === 'A') { + link_dialog(editor); } $link_button.hide(); previous = null; - }, 'btn-xs'); - var $image_button = this.make_hover_button(_t("Change"), function () { - image_dialog(editor, new CKEDITOR.dom.element(previous)); - $image_button.hide(); - previous = null; - }, 'btn-sm'); + }); + + function is_icons_widget(element) { + var w = editor.widgets.getByElement(element); + return w && w.name === 'icons'; + } // previous is the state of the button-trigger: it's the // currently-ish hovered element which can trigger a button showing. // -ish, because when moving to the button itself ``previous`` is // still set to the element having triggered showing the button. var previous; - $(editor.element.$).on('mouseover', 'a, img, .fa', function () { + $(editor.element.$).on('mouseover', 'a', function () { // Back from edit button -> ignore if (previous && previous === this) { return; } + // hover button should appear for "editable" links and images + // (img and a nodes whose *attributes* are editable, they + // can not be "editing hosts") *or* for non-editing-host + // elements bearing an ``fa`` class. These should have been + // made into CKE widgets which are editing hosts by + // definition, so instead check if the element has been + // converted/upcasted to an fa widget var selected = new CKEDITOR.dom.element(this); - if (!is_editable_node(selected) && !selected.hasClass('fa')) { + if (!(is_editable_node(selected) || is_icons_widget(selected))) { return; } previous = this; var $selected = $(this); var position = $selected.offset(); - if ($selected.is('img')) { - $link_button.hide(); - // center button on image - $image_button.show().offset({ - top: $selected.outerHeight() / 2 - + position.top - - $image_button.outerHeight() / 2, - left: $selected.outerWidth() / 2 - + position.left - - $image_button.outerWidth() / 2, - }); - } else { - $image_button.hide(); - // put button below link, horizontally centered - $link_button.show().offset({ - top: $selected.outerHeight() - + position.top, - left: $selected.outerWidth() / 2 - + position.left - - $link_button.outerWidth() / 2 - }) - } + $link_button.show().offset({ + top: $selected.outerHeight() + + position.top, + left: $selected.outerWidth() / 2 + + position.left + - $link_button.outerWidth() / 2 + }) }).on('mouseleave', 'a, img, .fa', function (e) { var current = document.elementFromPoint(e.clientX, e.clientY); - if (current === $link_button[0] || current === $image_button[0]) { + if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) { return; } - $image_button.add($link_button).hide(); + $link_button.hide(); previous = null; }); } @@ -837,7 +891,6 @@ document.execCommand("enableInlineTableEditing", false, "false"); } catch (e) {} - // detect & setup any CKEDITOR widget within a newly dropped // snippet. There does not seem to be a simple way to do it for // HTML not inserted via ckeditor APIs: @@ -999,6 +1052,7 @@ }, save: function () { this.close(); + this.trigger("saved"); }, cancel: function () { }, @@ -1248,6 +1302,128 @@ }, }); + website.editor.Media = openerp.Widget.extend({ + init: function (parent, editor, media) { + this._super(); + this.parent = parent; + this.editor = editor; + this.media = media; + }, + start: function () { + this.$preview = this.$('.preview-container').detach(); + return this._super(); + }, + search: function (needle) { + }, + save: function () { + }, + clear: function () { + }, + cancel: function () { + }, + close: function () { + }, + }); + 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._super(editor); + this.editor = editor; + this.page = 0; + this.media = media; + }, + start: function () { + var self = this; + + 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, this.editor, this.media); + this.iconDialog.appendTo(this.$("#editor-media-icon")); + this.videoDialog = new website.editor.VideoDialog(this, this.editor, this.media); + this.videoDialog.appendTo(this.$("#editor-media-video")); + + this.active = this.imageDialog; + + $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { + if ($(event.target).is('[href="#editor-media-image"]')) { + self.active = self.imageDialog; + self.$('li.search, li.previous, li.next').removeClass("hidden"); + } else if ($(event.target).is('[href="#editor-media-icon"]')) { + self.active = self.iconDialog; + self.$('li.search, li.previous, li.next').removeClass("hidden"); + self.$('.nav-tabs li.previous, .nav-tabs li.next').addClass("hidden"); + } else if ($(event.target).is('[href="#editor-media-video"]')) { + self.active = self.videoDialog; + self.$('.nav-tabs li.search').addClass("hidden"); + } + }); + + if (this.media) { + if (this.media.$.nodeName === "IMG") { + this.$('[href="#editor-media-image"]').tab('show'); + } else if (this.media.$.className.match(/(^|\s)media_iframe_video($|\s)/)) { + this.$('[href="#editor-media-video"]').tab('show'); + } else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) { + this.$('[href="#editor-media-icon"]').tab('show'); + } + + if ($(this.media.$).parent().data("oe-field") === "image") { + this.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden'); + } + } + + return this._super(); + }, + save: function () { + var self = this; + if (self.media) { + this.media.$.innerHTML = ""; + if (this.active !== this.imageDialog) { + this.imageDialog.clear(); + } + if (this.active !== this.iconDialog) { + this.iconDialog.clear(); + } + if (this.active !== this.videoDialog) { + this.videoDialog.clear(); + } + } else { + var selection = this.editor.getSelection(); + var range = selection.getRanges(true)[0]; + this.media = new CKEDITOR.dom.element("img"); + range.insertNode(this.media); + range.selectNodeContents(this.media); + this.active.media = this.media; + } + + var $el = $(self.active.media.$); + + this.active.save(); + + this.media.$.className = this.media.$.className.replace(/\s+/g, ' '); + + setTimeout(function () { + $el.trigger("saved", self.active.media.$); + $(document.body).trigger("media-saved", [$el[0], self.active.media.$]); + },0); + + this._super(); + }, + searchTimer: null, + search: function () { + var self = this; + var needle = this.$("input#icon-search").val(); + clearTimeout(this.searchTimer); + this.searchTimer = setTimeout(function () { + self.active.search(needle || ""); + },250); + } + }); + /** * ImageDialog widget. Lets users change an image, including uploading a * new image in OpenERP or selecting the image style (if supported by @@ -1265,73 +1441,118 @@ * selected by the users (or possibly the ones * originally passed in) */ - website.editor.ImageDialog = website.editor.Dialog.extend({ + var IMAGES_PER_ROW = 6; + var IMAGES_ROWS = 2; + website.editor.ImageDialog = website.editor.Media.extend({ template: 'website.editor.dialog.image', events: _.extend({}, website.editor.Dialog.prototype.events, { - 'change .url-source': function (e) { this.changed($(e.target)); }, + 'change .url-source': function (e) { + this.changed($(e.target)); + }, 'click button.filepicker': function () { this.$('input[type=file]').click(); }, 'change input[type=file]': 'file_selection', - 'change input.url': 'preview_image', - 'click a[href=#existing]': 'browse_existing', - 'change select.image-style': 'preview_image', + 'submit form': 'form_submit', + 'change input.url': "change_input", + 'keyup input.url': "change_input", + //'change select.image-style': 'preview_image', + 'click .existing-attachments img': 'select_existing', + 'click .existing-attachment-remove': 'try_remove', }), + init: function (parent, editor, media) { + this.page = 0; + this._super(parent, editor, media); + }, start: function () { - this.$('button.wait').text("Uploading…"); - var $options = this.$('.image-style').children(); - this.image_styles = $options.map(function () { return this.value; }).get(); + var self = this; + var res = this._super(); - var o = { url: null, style: null, }; + var o = { url: null }; // avoid typos, prevent addition of new properties to the object Object.preventExtensions(o); this.trigger('start', o); - if (o.url) { - if (o.style) { - this.$('.image-style').val(o.style); + this.parent.$(".pager > li").click(function (e) { + e.preventDefault(); + var $target = $(e.currentTarget); + if ($target.hasClass('disabled')) { + return; } - this.set_image(o.url); - } + self.page += $target.hasClass('previous') ? -1 : 1; + self.display_attachments(); + }); - return this._super(); + this.set_image(o.url); + + return res; }, save: function () { + if (!this.link) { + this.link = this.$(".existing-attachments img:first").attr('src'); + } this.trigger('save', { - url: this.$('input.url').val(), - style: this.$('.image-style').val(), + url: this.link }); + this.media.renameNode("img"); + this.media.$.attributes.src = this.link; return this._super(); }, + clear: function () { + this.media.$.className = this.media.$.className.replace(/(^|\s)(img(\s|$)|img-[^\s]*)/g, ' '); + }, cancel: function () { this.trigger('cancel'); }, - /** - * Sets the provided image url as the dialog's value-to-save and - * refreshes the preview element to use it. - */ - set_image: function (url, error) { - this.$('input.url').val( - error ? '' : url); - this.$('input.url').val(url); - this.preview_image(); + change_input: function (e) { + var $input = $(e.target); + var $button = $input.parent().find("button"); + if ($input.val() === "") { + $button.addClass("btn-default").removeClass("btn-primary"); + } else { + $button.removeClass("btn-default").addClass("btn-primary"); + } }, - file_selection: function () { - this.$el.addClass('nosave'); - this.$('form').removeClass('has-error').find('.help-block').empty(); - this.$('button.filepicker').removeClass('btn-danger btn-success'); + search: function (needle) { + var self = this; + this.fetch_existing(needle).then(function () { + self.selected_existing(self.$('input.url').val()); + }); + }, + + set_image: function (url, error) { + var self = this; + if (url) this.link = url; + this.$('input.url').val(''); + this.fetch_existing().then(function () { + self.selected_existing(url); + }); + }, + form_submit: function (event) { var self = this; + var $form = this.$('form[action="/website/attach"]'); + if (!$form.find('input[name="upload"]').val().length) { + var url = $form.find('input[name="url"]').val(); + if (this.selected_existing(url).size()) { + event.preventDefault(); + return false; + } + } var callback = _.uniqueId('func_'); this.$('input[name=func]').val(callback); - window[callback] = function (url, error) { delete window[callback]; self.file_selected(url, error); }; + }, + file_selection: function () { + this.$el.addClass('nosave'); + this.$('form').removeClass('has-error').find('.help-block').empty(); + this.$('button.filepicker').removeClass('btn-danger btn-success'); this.$('form').submit(); }, file_selected: function(url, error) { @@ -1345,61 +1566,123 @@ $button.addClass('btn-danger'); } this.set_image(url, error); + // auto save and close popup + this.parent.save(); }, - preview_image: function () { - var loaded = function () { - this.$el.removeClass('nosave'); - }.bind(this); - var image = this.$('input.url').val(); - if (!image) { loaded(); return; } - var $img = this.$('img.image-preview') - .attr('src', image) - .removeClass(this.image_styles.join(' ')) - .addClass(this.$('select.image-style').val()); - - if ($img.prop('complete')) { - loaded(); - } else { - $img.load(loaded) + fetch_existing: function (needle) { + var domain = [['res_model', '=', 'ir.ui.view'], '|', + ['mimetype', '=', false], ['mimetype', '=like', 'image/%']]; + if (needle && needle.length) { + domain.push('|', ['datas_fname', 'ilike', needle], ['name', 'ilike', needle]); } + return openerp.jsonRpc('/web/dataset/call_kw', 'call', { + model: 'ir.attachment', + method: 'search_read', + args: [], + kwargs: { + fields: ['name', 'website_url'], + domain: domain, + order: 'id desc', + context: website.get_context(), + } + }).then(this.proxy('fetched_existing')); }, - browse_existing: function (e) { - e.preventDefault(); - this.$('form').removeClass('has-error').find('.help-block').empty(); - this.$('button.filepicker').removeClass('btn-danger btn-success'); - new website.editor.ExistingImageDialog(this).appendTo(document.body); + fetched_existing: function (records) { + this.records = records; + this.display_attachments(); + }, + display_attachments: function () { + this.$('.help-block').empty(); + var per_screen = IMAGES_PER_ROW * IMAGES_ROWS; + + var from = this.page * per_screen; + var records = this.records; + + // Create rows of 3 records + var rows = _(records).chain() + .slice(from, from + per_screen) + .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); }) + .values() + .value(); + + this.$('.existing-attachments').replaceWith( + openerp.qweb.render( + 'website.editor.dialog.image.existing.content', {rows: rows})); + this.parent.$('.pager') + .find('li.previous').toggleClass('disabled', (from === 0)).end() + .find('li.next').toggleClass('disabled', (from + per_screen >= records.length)); + }, + select_existing: function (e) { + var link = $(e.currentTarget).attr('src'); + this.link = link; + this.selected_existing(link); + }, + selected_existing: function (link) { + this.$('.existing-attachment-cell.media_selected').removeClass("media_selected"); + var $select = this.$('.existing-attachment-cell img').filter(function () { + return $(this).attr("src") == link; + }).first(); + $select.parent().addClass("media_selected"); + return $select; + }, + + try_remove: function (e) { + var $help_block = this.$('.help-block').empty(); + var self = this; + var $a = $(e.target); + var id = parseInt($a.data('id'), 10); + var attachment = _.findWhere(this.records, {id: id}); + var $both = $a.parent().children(); + + $both.css({borderWidth: "5px", borderColor: "#f00"}); + + return openerp.jsonRpc('/web/dataset/call_kw', 'call', { + model: 'ir.attachment', + method: 'try_remove', + args: [], + kwargs: { + ids: [id], + context: website.get_context() + } + }).then(function (prevented) { + if (_.isEmpty(prevented)) { + self.records = _.without(self.records, attachment); + self.display_attachments(); + return; + } + $both.css({borderWidth: "", borderColor: ""}); + $help_block.replaceWith(openerp.qweb.render( + 'website.editor.dialog.image.existing.error', { + views: prevented[id] + } + )); + }); }, }); - website.editor.RTEImageDialog = website.editor.ImageDialog.extend({ - init: function (editor, image) { - this._super(editor); - this.element = image; + website.editor.RTEImageDialog = website.editor.ImageDialog.extend({ + init: function (parent, editor, media) { + this._super(parent, editor, media); this.on('start', this, this.proxy('started')); this.on('save', this, this.proxy('saved')); }, started: function (holder) { - if (!this.element) { + if (!this.media) { var selection = this.editor.getSelection(); - this.element = selection && selection.getSelectedElement(); + this.media = selection && selection.getSelectedElement(); } - var el = this.element; + var el = this.media; if (!el || !el.is('img')) { return; } - _(this.image_styles).each(function (style) { - if (el.hasClass(style)) { - holder.style = style; - } - }); holder.url = el.getAttribute('src'); }, saved: function (data) { var element, editor = this.editor; - if (!(element = this.element)) { + if (!(element = this.media)) { element = editor.document.createElement('img'); element.addClass('img'); element.addClass('img-responsive'); @@ -1416,87 +1699,10 @@ var style = data.style; element.setAttribute('src', data.url); element.removeAttribute('data-cke-saved-src'); - $(element.$).removeClass(this.image_styles.join(' ')); if (style) { element.addClass(style); } }, }); - var IMAGES_PER_ROW = 6; - var IMAGES_ROWS = 4; - website.editor.ExistingImageDialog = website.editor.Dialog.extend({ - template: 'website.editor.dialog.image.existing', - events: _.extend({}, website.editor.Dialog.prototype.events, { - 'click .existing-attachments img': 'select_existing', - 'click .pager > li': function (e) { - e.preventDefault(); - var $target = $(e.currentTarget); - if ($target.hasClass('disabled')) { - return; - } - this.page += $target.hasClass('previous') ? -1 : 1; - this.display_attachments(); - }, - }), - init: function (parent) { - this.image = null; - this.page = 0; - this.parent = parent; - this._super(parent.editor); - }, - - start: function () { - return $.when( - this._super(), - this.fetch_existing().then(this.proxy('fetched_existing'))); - }, - - fetch_existing: function () { - return openerp.jsonRpc('/web/dataset/call_kw', 'call', { - model: 'ir.attachment', - method: 'search_read', - args: [], - kwargs: { - fields: ['name', 'website_url'], - domain: [['res_model', '=', 'ir.ui.view']], - order: 'name', - context: website.get_context(), - } - }); - }, - fetched_existing: function (records) { - this.records = records; - this.display_attachments(); - }, - display_attachments: function () { - var per_screen = IMAGES_PER_ROW * IMAGES_ROWS; - - var from = this.page * per_screen; - var records = this.records; - - // Create rows of 3 records - var rows = _(records).chain() - .slice(from, from + per_screen) - .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); }) - .values() - .value(); - - this.$('.existing-attachments').replaceWith( - openerp.qweb.render( - 'website.editor.dialog.image.existing.content', {rows: rows})); - this.$('.pager') - .find('li.previous').toggleClass('disabled', (from === 0)).end() - .find('li.next').toggleClass('disabled', (from + per_screen >= records.length)); - - }, - select_existing: function (e) { - var link = $(e.currentTarget).attr('src'); - if (link) { - this.parent.set_image(link); - } - this.close() - }, - }); - function get_selected_link(editor) { var sel = editor.getSelection(), el = sel.getSelectedElement(); @@ -1508,7 +1714,7 @@ range.shrink(CKEDITOR.SHRINK_TEXT); var commonAncestor = range.getCommonAncestor(); var viewRoot = editor.elementPath(commonAncestor).contains(function (element) { - return element.data('oe-model') === 'ir.ui.view' + return element.data('oe-model') === 'ir.ui.view'; }); if (!viewRoot) { return null; } // if viewRoot is the first link, don't edit it. @@ -1516,7 +1722,7 @@ .contains('a', true); } - website.editor.FontIconsDialog = website.editor.Dialog.extend({ + website.editor.FontIconsDialog = website.editor.Media.extend({ template: 'website.editor.dialog.font-icons', events : _.extend({}, website.editor.Dialog.prototype.events, { change: 'update_preview', @@ -1534,20 +1740,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. @@ -1557,10 +1749,6 @@ // where we still need to implement ``initSelection``) // TODO: add id/name to the text in order to allow FAYT selection of icons? icons: [{"text": "\uf000", "id": "fa-glass"}, {"text": "\uf001", "id": "fa-music"}, {"text": "\uf002", "id": "fa-search"}, {"text": "\uf003", "id": "fa-envelope-o"}, {"text": "\uf004", "id": "fa-heart"}, {"text": "\uf005", "id": "fa-star"}, {"text": "\uf006", "id": "fa-star-o"}, {"text": "\uf007", "id": "fa-user"}, {"text": "\uf008", "id": "fa-film"}, {"text": "\uf009", "id": "fa-th-large"}, {"text": "\uf00a", "id": "fa-th"}, {"text": "\uf00b", "id": "fa-th-list"}, {"text": "\uf00c", "id": "fa-check"}, {"text": "\uf00d", "id": "fa-times"}, {"text": "\uf00e", "id": "fa-search-plus"}, {"text": "\uf010", "id": "fa-search-minus"}, {"text": "\uf011", "id": "fa-power-off"}, {"text": "\uf012", "id": "fa-signal"}, {"text": "\uf013", "id": "fa-cog"}, {"text": "\uf014", "id": "fa-trash-o"}, {"text": "\uf015", "id": "fa-home"}, {"text": "\uf016", "id": "fa-file-o"}, {"text": "\uf017", "id": "fa-clock-o"}, {"text": "\uf018", "id": "fa-road"}, {"text": "\uf019", "id": "fa-download"}, {"text": "\uf01a", "id": "fa-arrow-circle-o-down"}, {"text": "\uf01b", "id": "fa-arrow-circle-o-up"}, {"text": "\uf01c", "id": "fa-inbox"}, {"text": "\uf01d", "id": "fa-play-circle-o"}, {"text": "\uf01e", "id": "fa-repeat"}, {"text": "\uf021", "id": "fa-refresh"}, {"text": "\uf022", "id": "fa-list-alt"}, {"text": "\uf023", "id": "fa-lock"}, {"text": "\uf024", "id": "fa-flag"}, {"text": "\uf025", "id": "fa-headphones"}, {"text": "\uf026", "id": "fa-volume-off"}, {"text": "\uf027", "id": "fa-volume-down"}, {"text": "\uf028", "id": "fa-volume-up"}, {"text": "\uf029", "id": "fa-qrcode"}, {"text": "\uf02a", "id": "fa-barcode"}, {"text": "\uf02b", "id": "fa-tag"}, {"text": "\uf02c", "id": "fa-tags"}, {"text": "\uf02d", "id": "fa-book"}, {"text": "\uf02e", "id": "fa-bookmark"}, {"text": "\uf02f", "id": "fa-print"}, {"text": "\uf030", "id": "fa-camera"}, {"text": "\uf031", "id": "fa-font"}, {"text": "\uf032", "id": "fa-bold"}, {"text": "\uf033", "id": "fa-italic"}, {"text": "\uf034", "id": "fa-text-height"}, {"text": "\uf035", "id": "fa-text-width"}, {"text": "\uf036", "id": "fa-align-left"}, {"text": "\uf037", "id": "fa-align-center"}, {"text": "\uf038", "id": "fa-align-right"}, {"text": "\uf039", "id": "fa-align-justify"}, {"text": "\uf03a", "id": "fa-list"}, {"text": "\uf03b", "id": "fa-outdent"}, {"text": "\uf03c", "id": "fa-indent"}, {"text": "\uf03d", "id": "fa-video-camera"}, {"text": "\uf03e", "id": "fa-picture-o"}, {"text": "\uf040", "id": "fa-pencil"}, {"text": "\uf041", "id": "fa-map-marker"}, {"text": "\uf042", "id": "fa-adjust"}, {"text": "\uf043", "id": "fa-tint"}, {"text": "\uf044", "id": "fa-pencil-square-o"}, {"text": "\uf045", "id": "fa-share-square-o"}, {"text": "\uf046", "id": "fa-check-square-o"}, {"text": "\uf047", "id": "fa-arrows"}, {"text": "\uf048", "id": "fa-step-backward"}, {"text": "\uf049", "id": "fa-fast-backward"}, {"text": "\uf04a", "id": "fa-backward"}, {"text": "\uf04b", "id": "fa-play"}, {"text": "\uf04c", "id": "fa-pause"}, {"text": "\uf04d", "id": "fa-stop"}, {"text": "\uf04e", "id": "fa-forward"}, {"text": "\uf050", "id": "fa-fast-forward"}, {"text": "\uf051", "id": "fa-step-forward"}, {"text": "\uf052", "id": "fa-eject"}, {"text": "\uf053", "id": "fa-chevron-left"}, {"text": "\uf054", "id": "fa-chevron-right"}, {"text": "\uf055", "id": "fa-plus-circle"}, {"text": "\uf056", "id": "fa-minus-circle"}, {"text": "\uf057", "id": "fa-times-circle"}, {"text": "\uf058", "id": "fa-check-circle"}, {"text": "\uf059", "id": "fa-question-circle"}, {"text": "\uf05a", "id": "fa-info-circle"}, {"text": "\uf05b", "id": "fa-crosshairs"}, {"text": "\uf05c", "id": "fa-times-circle-o"}, {"text": "\uf05d", "id": "fa-check-circle-o"}, {"text": "\uf05e", "id": "fa-ban"}, {"text": "\uf060", "id": "fa-arrow-left"}, {"text": "\uf061", "id": "fa-arrow-right"}, {"text": "\uf062", "id": "fa-arrow-up"}, {"text": "\uf063", "id": "fa-arrow-down"}, {"text": "\uf064", "id": "fa-share"}, {"text": "\uf065", "id": "fa-expand"}, {"text": "\uf066", "id": "fa-compress"}, {"text": "\uf067", "id": "fa-plus"}, {"text": "\uf068", "id": "fa-minus"}, {"text": "\uf069", "id": "fa-asterisk"}, {"text": "\uf06a", "id": "fa-exclamation-circle"}, {"text": "\uf06b", "id": "fa-gift"}, {"text": "\uf06c", "id": "fa-leaf"}, {"text": "\uf06d", "id": "fa-fire"}, {"text": "\uf06e", "id": "fa-eye"}, {"text": "\uf070", "id": "fa-eye-slash"}, {"text": "\uf071", "id": "fa-exclamation-triangle"}, {"text": "\uf072", "id": "fa-plane"}, {"text": "\uf073", "id": "fa-calendar"}, {"text": "\uf074", "id": "fa-random"}, {"text": "\uf075", "id": "fa-comment"}, {"text": "\uf076", "id": "fa-magnet"}, {"text": "\uf077", "id": "fa-chevron-up"}, {"text": "\uf078", "id": "fa-chevron-down"}, {"text": "\uf079", "id": "fa-retweet"}, {"text": "\uf07a", "id": "fa-shopping-cart"}, {"text": "\uf07b", "id": "fa-folder"}, {"text": "\uf07c", "id": "fa-folder-open"}, {"text": "\uf07d", "id": "fa-arrows-v"}, {"text": "\uf07e", "id": "fa-arrows-h"}, {"text": "\uf080", "id": "fa-bar-chart-o"}, {"text": "\uf081", "id": "fa-twitter-square"}, {"text": "\uf082", "id": "fa-facebook-square"}, {"text": "\uf083", "id": "fa-camera-retro"}, {"text": "\uf084", "id": "fa-key"}, {"text": "\uf085", "id": "fa-cogs"}, {"text": "\uf086", "id": "fa-comments"}, {"text": "\uf087", "id": "fa-thumbs-o-up"}, {"text": "\uf088", "id": "fa-thumbs-o-down"}, {"text": "\uf089", "id": "fa-star-half"}, {"text": "\uf08a", "id": "fa-heart-o"}, {"text": "\uf08b", "id": "fa-sign-out"}, {"text": "\uf08c", "id": "fa-linkedin-square"}, {"text": "\uf08d", "id": "fa-thumb-tack"}, {"text": "\uf08e", "id": "fa-external-link"}, {"text": "\uf090", "id": "fa-sign-in"}, {"text": "\uf091", "id": "fa-trophy"}, {"text": "\uf092", "id": "fa-github-square"}, {"text": "\uf093", "id": "fa-upload"}, {"text": "\uf094", "id": "fa-lemon-o"}, {"text": "\uf095", "id": "fa-phone"}, {"text": "\uf096", "id": "fa-square-o"}, {"text": "\uf097", "id": "fa-bookmark-o"}, {"text": "\uf098", "id": "fa-phone-square"}, {"text": "\uf099", "id": "fa-twitter"}, {"text": "\uf09a", "id": "fa-facebook"}, {"text": "\uf09b", "id": "fa-github"}, {"text": "\uf09c", "id": "fa-unlock"}, {"text": "\uf09d", "id": "fa-credit-card"}, {"text": "\uf09e", "id": "fa-rss"}, {"text": "\uf0a0", "id": "fa-hdd-o"}, {"text": "\uf0a1", "id": "fa-bullhorn"}, {"text": "\uf0f3", "id": "fa-bell"}, {"text": "\uf0a3", "id": "fa-certificate"}, {"text": "\uf0a4", "id": "fa-hand-o-right"}, {"text": "\uf0a5", "id": "fa-hand-o-left"}, {"text": "\uf0a6", "id": "fa-hand-o-up"}, {"text": "\uf0a7", "id": "fa-hand-o-down"}, {"text": "\uf0a8", "id": "fa-arrow-circle-left"}, {"text": "\uf0a9", "id": "fa-arrow-circle-right"}, {"text": "\uf0aa", "id": "fa-arrow-circle-up"}, {"text": "\uf0ab", "id": "fa-arrow-circle-down"}, {"text": "\uf0ac", "id": "fa-globe"}, {"text": "\uf0ad", "id": "fa-wrench"}, {"text": "\uf0ae", "id": "fa-tasks"}, {"text": "\uf0b0", "id": "fa-filter"}, {"text": "\uf0b1", "id": "fa-briefcase"}, {"text": "\uf0b2", "id": "fa-arrows-alt"}, {"text": "\uf0c0", "id": "fa-users"}, {"text": "\uf0c1", "id": "fa-link"}, {"text": "\uf0c2", "id": "fa-cloud"}, {"text": "\uf0c3", "id": "fa-flask"}, {"text": "\uf0c4", "id": "fa-scissors"}, {"text": "\uf0c5", "id": "fa-files-o"}, {"text": "\uf0c6", "id": "fa-paperclip"}, {"text": "\uf0c7", "id": "fa-floppy-o"}, {"text": "\uf0c8", "id": "fa-square"}, {"text": "\uf0c9", "id": "fa-bars"}, {"text": "\uf0ca", "id": "fa-list-ul"}, {"text": "\uf0cb", "id": "fa-list-ol"}, {"text": "\uf0cc", "id": "fa-strikethrough"}, {"text": "\uf0cd", "id": "fa-underline"}, {"text": "\uf0ce", "id": "fa-table"}, {"text": "\uf0d0", "id": "fa-magic"}, {"text": "\uf0d1", "id": "fa-truck"}, {"text": "\uf0d2", "id": "fa-pinterest"}, {"text": "\uf0d3", "id": "fa-pinterest-square"}, {"text": "\uf0d4", "id": "fa-google-plus-square"}, {"text": "\uf0d5", "id": "fa-google-plus"}, {"text": "\uf0d6", "id": "fa-money"}, {"text": "\uf0d7", "id": "fa-caret-down"}, {"text": "\uf0d8", "id": "fa-caret-up"}, {"text": "\uf0d9", "id": "fa-caret-left"}, {"text": "\uf0da", "id": "fa-caret-right"}, {"text": "\uf0db", "id": "fa-columns"}, {"text": "\uf0dc", "id": "fa-sort"}, {"text": "\uf0dd", "id": "fa-sort-asc"}, {"text": "\uf0de", "id": "fa-sort-desc"}, {"text": "\uf0e0", "id": "fa-envelope"}, {"text": "\uf0e1", "id": "fa-linkedin"}, {"text": "\uf0e2", "id": "fa-undo"}, {"text": "\uf0e3", "id": "fa-gavel"}, {"text": "\uf0e4", "id": "fa-tachometer"}, {"text": "\uf0e5", "id": "fa-comment-o"}, {"text": "\uf0e6", "id": "fa-comments-o"}, {"text": "\uf0e7", "id": "fa-bolt"}, {"text": "\uf0e8", "id": "fa-sitemap"}, {"text": "\uf0e9", "id": "fa-umbrella"}, {"text": "\uf0ea", "id": "fa-clipboard"}, {"text": "\uf0eb", "id": "fa-lightbulb-o"}, {"text": "\uf0ec", "id": "fa-exchange"}, {"text": "\uf0ed", "id": "fa-cloud-download"}, {"text": "\uf0ee", "id": "fa-cloud-upload"}, {"text": "\uf0f0", "id": "fa-user-md"}, {"text": "\uf0f1", "id": "fa-stethoscope"}, {"text": "\uf0f2", "id": "fa-suitcase"}, {"text": "\uf0a2", "id": "fa-bell-o"}, {"text": "\uf0f4", "id": "fa-coffee"}, {"text": "\uf0f5", "id": "fa-cutlery"}, {"text": "\uf0f6", "id": "fa-file-text-o"}, {"text": "\uf0f7", "id": "fa-building-o"}, {"text": "\uf0f8", "id": "fa-hospital-o"}, {"text": "\uf0f9", "id": "fa-ambulance"}, {"text": "\uf0fa", "id": "fa-medkit"}, {"text": "\uf0fb", "id": "fa-fighter-jet"}, {"text": "\uf0fc", "id": "fa-beer"}, {"text": "\uf0fd", "id": "fa-h-square"}, {"text": "\uf0fe", "id": "fa-plus-square"}, {"text": "\uf100", "id": "fa-angle-double-left"}, {"text": "\uf101", "id": "fa-angle-double-right"}, {"text": "\uf102", "id": "fa-angle-double-up"}, {"text": "\uf103", "id": "fa-angle-double-down"}, {"text": "\uf104", "id": "fa-angle-left"}, {"text": "\uf105", "id": "fa-angle-right"}, {"text": "\uf106", "id": "fa-angle-up"}, {"text": "\uf107", "id": "fa-angle-down"}, {"text": "\uf108", "id": "fa-desktop"}, {"text": "\uf109", "id": "fa-laptop"}, {"text": "\uf10a", "id": "fa-tablet"}, {"text": "\uf10b", "id": "fa-mobile"}, {"text": "\uf10c", "id": "fa-circle-o"}, {"text": "\uf10d", "id": "fa-quote-left"}, {"text": "\uf10e", "id": "fa-quote-right"}, {"text": "\uf110", "id": "fa-spinner"}, {"text": "\uf111", "id": "fa-circle"}, {"text": "\uf112", "id": "fa-reply"}, {"text": "\uf113", "id": "fa-github-alt"}, {"text": "\uf114", "id": "fa-folder-o"}, {"text": "\uf115", "id": "fa-folder-open-o"}, {"text": "\uf118", "id": "fa-smile-o"}, {"text": "\uf119", "id": "fa-frown-o"}, {"text": "\uf11a", "id": "fa-meh-o"}, {"text": "\uf11b", "id": "fa-gamepad"}, {"text": "\uf11c", "id": "fa-keyboard-o"}, {"text": "\uf11d", "id": "fa-flag-o"}, {"text": "\uf11e", "id": "fa-flag-checkered"}, {"text": "\uf120", "id": "fa-terminal"}, {"text": "\uf121", "id": "fa-code"}, {"text": "\uf122", "id": "fa-reply-all"}, {"text": "\uf122", "id": "fa-mail-reply-all"}, {"text": "\uf123", "id": "fa-star-half-o"}, {"text": "\uf124", "id": "fa-location-arrow"}, {"text": "\uf125", "id": "fa-crop"}, {"text": "\uf126", "id": "fa-code-fork"}, {"text": "\uf127", "id": "fa-chain-broken"}, {"text": "\uf128", "id": "fa-question"}, {"text": "\uf129", "id": "fa-info"}, {"text": "\uf12a", "id": "fa-exclamation"}, {"text": "\uf12b", "id": "fa-superscript"}, {"text": "\uf12c", "id": "fa-subscript"}, {"text": "\uf12d", "id": "fa-eraser"}, {"text": "\uf12e", "id": "fa-puzzle-piece"}, {"text": "\uf130", "id": "fa-microphone"}, {"text": "\uf131", "id": "fa-microphone-slash"}, {"text": "\uf132", "id": "fa-shield"}, {"text": "\uf133", "id": "fa-calendar-o"}, {"text": "\uf134", "id": "fa-fire-extinguisher"}, {"text": "\uf135", "id": "fa-rocket"}, {"text": "\uf136", "id": "fa-maxcdn"}, {"text": "\uf137", "id": "fa-chevron-circle-left"}, {"text": "\uf138", "id": "fa-chevron-circle-right"}, {"text": "\uf139", "id": "fa-chevron-circle-up"}, {"text": "\uf13a", "id": "fa-chevron-circle-down"}, {"text": "\uf13b", "id": "fa-html5"}, {"text": "\uf13c", "id": "fa-css3"}, {"text": "\uf13d", "id": "fa-anchor"}, {"text": "\uf13e", "id": "fa-unlock-alt"}, {"text": "\uf140", "id": "fa-bullseye"}, {"text": "\uf141", "id": "fa-ellipsis-h"}, {"text": "\uf142", "id": "fa-ellipsis-v"}, {"text": "\uf143", "id": "fa-rss-square"}, {"text": "\uf144", "id": "fa-play-circle"}, {"text": "\uf145", "id": "fa-ticket"}, {"text": "\uf146", "id": "fa-minus-square"}, {"text": "\uf147", "id": "fa-minus-square-o"}, {"text": "\uf148", "id": "fa-level-up"}, {"text": "\uf149", "id": "fa-level-down"}, {"text": "\uf14a", "id": "fa-check-square"}, {"text": "\uf14b", "id": "fa-pencil-square"}, {"text": "\uf14c", "id": "fa-external-link-square"}, {"text": "\uf14d", "id": "fa-share-square"}, {"text": "\uf14e", "id": "fa-compass"}, {"text": "\uf150", "id": "fa-caret-square-o-down"}, {"text": "\uf151", "id": "fa-caret-square-o-up"}, {"text": "\uf152", "id": "fa-caret-square-o-right"}, {"text": "\uf153", "id": "fa-eur"}, {"text": "\uf154", "id": "fa-gbp"}, {"text": "\uf155", "id": "fa-usd"}, {"text": "\uf156", "id": "fa-inr"}, {"text": "\uf157", "id": "fa-jpy"}, {"text": "\uf158", "id": "fa-rub"}, {"text": "\uf159", "id": "fa-krw"}, {"text": "\uf15a", "id": "fa-btc"}, {"text": "\uf15b", "id": "fa-file"}, {"text": "\uf15c", "id": "fa-file-text"}, {"text": "\uf15d", "id": "fa-sort-alpha-asc"}, {"text": "\uf15e", "id": "fa-sort-alpha-desc"}, {"text": "\uf160", "id": "fa-sort-amount-asc"}, {"text": "\uf161", "id": "fa-sort-amount-desc"}, {"text": "\uf162", "id": "fa-sort-numeric-asc"}, {"text": "\uf163", "id": "fa-sort-numeric-desc"}, {"text": "\uf164", "id": "fa-thumbs-up"}, {"text": "\uf165", "id": "fa-thumbs-down"}, {"text": "\uf166", "id": "fa-youtube-square"}, {"text": "\uf167", "id": "fa-youtube"}, {"text": "\uf168", "id": "fa-xing"}, {"text": "\uf169", "id": "fa-xing-square"}, {"text": "\uf16a", "id": "fa-youtube-play"}, {"text": "\uf16b", "id": "fa-dropbox"}, {"text": "\uf16c", "id": "fa-stack-overflow"}, {"text": "\uf16d", "id": "fa-instagram"}, {"text": "\uf16e", "id": "fa-flickr"}, {"text": "\uf170", "id": "fa-adn"}, {"text": "\uf171", "id": "fa-bitbucket"}, {"text": "\uf172", "id": "fa-bitbucket-square"}, {"text": "\uf173", "id": "fa-tumblr"}, {"text": "\uf174", "id": "fa-tumblr-square"}, {"text": "\uf175", "id": "fa-long-arrow-down"}, {"text": "\uf176", "id": "fa-long-arrow-up"}, {"text": "\uf177", "id": "fa-long-arrow-left"}, {"text": "\uf178", "id": "fa-long-arrow-right"}, {"text": "\uf179", "id": "fa-apple"}, {"text": "\uf17a", "id": "fa-windows"}, {"text": "\uf17b", "id": "fa-android"}, {"text": "\uf17c", "id": "fa-linux"}, {"text": "\uf17d", "id": "fa-dribbble"}, {"text": "\uf17e", "id": "fa-skype"}, {"text": "\uf180", "id": "fa-foursquare"}, {"text": "\uf181", "id": "fa-trello"}, {"text": "\uf182", "id": "fa-female"}, {"text": "\uf183", "id": "fa-male"}, {"text": "\uf184", "id": "fa-gittip"}, {"text": "\uf185", "id": "fa-sun-o"}, {"text": "\uf186", "id": "fa-moon-o"}, {"text": "\uf187", "id": "fa-archive"}, {"text": "\uf188", "id": "fa-bug"}, {"text": "\uf189", "id": "fa-vk"}, {"text": "\uf18a", "id": "fa-weibo"}, {"text": "\uf18b", "id": "fa-renren"}, {"text": "\uf18c", "id": "fa-pagelines"}, {"text": "\uf18d", "id": "fa-stack-exchange"}, {"text": "\uf18e", "id": "fa-arrow-circle-o-right"}, {"text": "\uf190", "id": "fa-arrow-circle-o-left"}, {"text": "\uf191", "id": "fa-caret-square-o-left"}, {"text": "\uf192", "id": "fa-dot-circle-o"}, {"text": "\uf193", "id": "fa-wheelchair"}, {"text": "\uf194", "id": "fa-vimeo-square"}, {"text": "\uf195", "id": "fa-try"}, {"text": "\uf196", "id": "fa-plus-square-o"}], - init: function (editor, element) { - this._super(editor); - this.element = element; - }, /** * Initializes select2: in Chrome and Safari, <select> font apparently * isn't customizable (?) and the fontawesome glyphs fail to appear. @@ -1568,17 +1756,33 @@ 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. */ save: function () { - var classes = this.element.className.split(/\s+/); + var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : ''; + var classes = (this.media.$.className||"").split(/\s+/); var non_fa_classes = _.reject(classes, function (cls) { return cls === 'fa' || /^fa-/.test(cls); }); var final_classes = non_fa_classes.concat(this.get_fa_classes()); - this.element.className = final_classes.join(' '); + this.media.$.className = final_classes.join(' '); + this.media.renameNode("span"); + this.media.$.attributes.style.textContent = style; this._super(); }, /** @@ -1589,7 +1793,7 @@ * which may not match the visual look of the element. */ load_data: function () { - var classes = this.element.className.split(/\s+/); + var classes = (this.media&&this.media.$.className||"").split(/\s+/); for (var i = 0; i < classes.length; i++) { var cls = classes[i]; switch(cls) { @@ -1628,7 +1832,9 @@ ]; }, update_preview: function () { + this.$preview.empty(); var $preview = this.$('#fa-preview').empty(); + var sizes = ['', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x']; var classes = this.get_fa_classes(); var no_sizes = _.difference(classes, sizes).join(' '); @@ -1640,13 +1846,123 @@ .attr('data-size', size) .addClass(size) .addClass(no_sizes); - if ((size && _.contains(classes, size)) || (!size && !selected)) { + if ((size && _.contains(classes, size)) || (classes[2] === "" && !selected)) { + this.$preview.append($p.clone()); + this.$('#fa-size').val(size); $p.addClass('font-icons-selected'); selected = true; } $preview.prepend($p); } - } + }, + clear: function () { + this.media.$.className = this.media.$.className.replace(/(^|\s)(fa(\s|$)|fa-[^\s]*)/g, ' '); + }, + }); + + website.editor.VideoDialog = website.editor.Media.extend({ + template: 'website.editor.dialog.video', + events : _.extend({}, website.editor.Dialog.prototype.events, { + 'click input#urlvideo ~ button': 'get_video', + 'click input#embedvideo ~ button': 'get_embed_video', + 'change input#urlvideo': 'change_input', + 'keyup input#urlvideo': 'change_input', + 'change input#embedvideo': 'change_input', + 'keyup input#embedvideo': 'change_input' + }), + start: function () { + this.$iframe = this.$("iframe"); + var $media = $(this.media && this.media.$); + if ($media.hasClass("media_iframe_video")) { + var src = $media.data('src'); + this.$("input#urlvideo").val(src); + this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1); + this.get_video(); + } + return this._super(); + }, + change_input: function (e) { + var $input = $(e.target); + var $button = $input.parent().find("button"); + if ($input.val() === "") { + $button.addClass("btn-default").removeClass("btn-primary"); + } else { + $button.removeClass("btn-default").addClass("btn-primary"); + } + }, + get_url: function () { + var video_id = this.$("#video_id").val(); + var video_type = this.$("#video_type").val(); + switch (video_type) { + case "youtube": + return "//www.youtube.com/embed/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + case "vimeo": + return "//player.vimeo.com/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + case "dailymotion": + return "//www.dailymotion.com/embed/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + default: + return video_id; + } + }, + get_embed_video: function (event) { + event.preventDefault(); + var embedvideo = this.$("input#embedvideo").val().match(/src=["']?([^"']+)["' ]?/); + if (embedvideo) { + this.$("input#urlvideo").val(embedvideo[1]); + this.get_video(event); + } + return false; + }, + get_video: function (event) { + if (event) event.preventDefault(); + var needle = this.$("input#urlvideo").val(); + var video_id; + var video_type; + + if (needle.indexOf(".youtube.") != -1) { + video_type = "youtube"; + video_id = needle.match(/\.youtube\.[a-z]+\/(embed\/|watch\?v=)?([^\/?&]+)/i)[2]; + } else if (needle.indexOf("//youtu.") != -1) { + video_type = "youtube"; + video_id = needle.match(/youtube\.[a-z]+\/([^\/?&]+)/i)[1]; + } else if (needle.indexOf("player.vimeo.") != -1 || needle.indexOf("//vimeo.") != -1) { + video_type = "vimeo"; + video_id = needle.match(/vimeo\.[a-z]+\/(video\/)?([^?&]+)/i)[2]; + } else if (needle.indexOf(".dailymotion.") != -1) { + video_type = "dailymotion"; + video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3]; + } else { + video_type = ""; + video_id = needle; + } + + this.$("#video_id").val(video_id); + this.$("#video_type").val(video_type); + + this.$iframe.attr("src", this.get_url()); + return false; + }, + save: function () { + var video_id = this.$("#video_id").val(); + if (!video_id) { + this.$("button.btn-primary").click(); + video_id = this.$("#video_id").val(); + } + var video_type = this.$("#video_type").val(); + var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : ''; + var $iframe = $( + '<div class="media_iframe_video" data-src="'+this.get_url()+'" style="'+style+'">'+ + '<div class="css_editable_mode_display"> </div>'+ + '<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+ + '</div>'); + $(this.media.$).replaceWith($iframe); + this.media.$ = $iframe[0]; + this._super(); + }, + clear: function () { + delete this.media.$.dataset.src; + this.media.$.className = this.media.$.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' '); + }, }); website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver; @@ -1684,6 +2000,9 @@ // ignore mutation if the *only* change is .cke_focus return change.length !== 1 || change[0] === 'cke_focus'; case 'childList': + setTimeout(function () { + fixup_browser_crap(m.addedNodes); + }, 0); // Remove ignorable nodes from addedNodes or removedNodes, // if either set remains non-empty it's considered to be an // impactful change. Otherwise it's ignored. @@ -1714,6 +2033,9 @@ if (node.nodeName === 'BR' && node.getAttribute('type') === '_moz') { // <br type="_moz"> appears when focusing RTE in FF, ignore continue; + } else if (node.nodeName === 'DIV' && $(node).hasClass('oe_drop_zone')) { + // ignore dropzone inserted by snippets + continue } } @@ -1721,4 +2043,69 @@ } return output; } + + var programmatic_styles = { + float: 1, + display: 1, + position: 1, + top: 1, + left: 1, + right: 1, + bottom: 1, + }; + function fixup_browser_crap(nodes) { + if (!nodes || !nodes.length) { return; } + /** + * Checks that the node only has a @style, not e.g. @class or whatever + */ + function has_only_style(node) { + for (var i = 0; i < node.attributes.length; i++) { + var attr = node.attributes[i]; + if (attr.attributeName !== 'style') { + return false; + } + } + return true; + } + function has_programmatic_style(node) { + for (var i = 0; i < node.style.length; i++) { + var style = node.style[i]; + if (programmatic_styles[style]) { + return true; + } + } + return false; + } + + for (var i=0; i<nodes.length; ++i) { + var node = nodes[i]; + if (node.nodeType !== document.ELEMENT_NODE) { continue; } + + if (node.nodeName === 'SPAN' + && has_only_style(node) + && !has_programmatic_style(node)) { + // On backspace, webkit browsers create a <span> with a bunch of + // inline styles "remembering" where they come from. Refs: + // http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug + // https://code.google.com/p/chromium/issues/detail?id=226941 + // https://bugs.webkit.org/show_bug.cgi?id=114791 + // http://dev.ckeditor.com/ticket/9998 + var child, parent = node.parentNode; + while (child = node.firstChild) { + parent.insertBefore(child, node); + } + parent.removeChild(node); + // chances are we had e.g. + // <p>foo</p> + // <p>bar</p> + // merged the lines getting this in webkit + // <p>foo<span>bar</span></p> + // after unwrapping the span, we have 2 text nodes + // <p>[foo][bar]</p> + // where we probably want only one. Normalize will merge + // adjacent text nodes. However, does not merge text and cdata + parent.normalize(); + } + } + } })(); |