diff options
Diffstat (limited to 'addons/website/static/src/js/website.editor.js')
| -rw-r--r-- | addons/website/static/src/js/website.editor.js | 1692 |
1 files changed, 1692 insertions, 0 deletions
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js new file mode 100644 index 00000000000..ab97ee2bcf9 --- /dev/null +++ b/addons/website/static/src/js/website.editor.js @@ -0,0 +1,1692 @@ +(function () { + 'use strict'; + + var website = openerp.website; + var _t = openerp._t; + + website.add_template_file('/website/static/src/xml/website.editor.xml'); + website.dom_ready.done(function () { + var is_smartphone = $(document.body)[0].clientWidth < 767; + + if (!is_smartphone) { + website.ready().then(website.init_editor); + } + + $(document).on('click', 'a.js_link2post', function (ev) { + ev.preventDefault(); + website.form(this.pathname, 'POST'); + }); + + $(document).on('submit', '.cke_editable form', function (ev) { + // Disable form submition in editable mode + ev.preventDefault(); + }); + + $(document).on('hide.bs.dropdown', '.dropdown', function (ev) { + // Prevent dropdown closing when a contenteditable children is focused + if (ev.originalEvent + && $(ev.target).has(ev.originalEvent.target).length + && $(ev.originalEvent.target).is('[contenteditable]')) { + ev.preventDefault(); + } + }); + }); + + /** + * An editing host is an HTML element with @contenteditable=true, or the + * child of a document in designMode=on (but that one's not supported) + * + * https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#editing-host + */ + function is_editing_host(element) { + return element.getAttribute('contentEditable') === 'true'; + } + /** + * Checks that both the element's content *and the element itself* are + * editable: an editing host is considered non-editable because its content + * is editable but its attributes should not be considered editable + */ + function is_editable_node(element) { + return !(element.data('oe-model') === 'ir.ui.view' + || element.data('cke-realelement') + || (is_editing_host(element) && element.getAttribute('attributeEditable') !== 'true') + || element.isReadOnly()); + } + + function link_dialog(editor) { + return new website.editor.RTELinkDialog(editor).appendTo(document.body); + } + function image_dialog(editor, image) { + return new website.editor.RTEImageDialog(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); + // 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', + init: function (editor) { + editor.on('doubleclick', function (evt) { + var element = evt.data.element; + if (element.is('img') && is_editable_node(element)) { + image_dialog(editor, element); + return; + } + + element = get_selected_link(editor) || evt.data.element; + if (!(element.is('a') && is_editable_node(element))) { + return; + } + + editor.getSelection().selectElement(element); + link_dialog(editor); + }, null, null, 500); + + //noinspection JSValidateTypes + editor.addCommand('link', { + exec: function (editor) { + link_dialog(editor); + return true; + }, + canUndo: false, + editorFocus: true, + }); + //noinspection JSValidateTypes + editor.addCommand('image', { + exec: function (editor) { + image_dialog(editor); + return true; + }, + canUndo: false, + editorFocus: true, + }); + + editor.ui.addButton('Link', { + label: 'Link', + command: 'link', + toolbar: 'links,10', + }); + editor.ui.addButton('Image', { + label: 'Image', + command: 'image', + toolbar: 'insert,10', + }); + + editor.setKeystroke(CKEDITOR.CTRL + 76 /*L*/, 'link'); + } + }); + CKEDITOR.plugins.add( 'tablebutton', { + requires: 'panelbutton,floatpanel', + init: function( editor ) { + var label = "Table"; + + editor.ui.add('TableButton', CKEDITOR.UI_PANELBUTTON, { + label: label, + title: label, + // use existing 'table' icon + icon: 'table', + modes: { wysiwyg: true }, + editorFocus: true, + // panel opens in iframe, @css is CSS file <link>-ed within + // frame document, @attributes are set on iframe itself. + panel: { + css: '/website/static/src/css/editor.css', + attributes: { 'role': 'listbox', 'aria-label': label, }, + }, + + onBlock: function (panel, block) { + block.autoSize = true; + block.element.setHtml(openerp.qweb.render('website.editor.table.panel', { + rows: 5, + cols: 5, + })); + + var $table = $(block.element.$).on('mouseenter', 'td', function (e) { + var $e = $(e.target); + var y = $e.index() + 1; + var x = $e.closest('tr').index() + 1; + + $table + .find('td').removeClass('selected').end() + .find('tr:lt(' + String(x) + ')') + .children().filter(function () { return $(this).index() < y; }) + .addClass('selected'); + }).on('click', 'td', function (e) { + var $e = $(e.target); + + //noinspection JSPotentiallyInvalidConstructorUsage + var table = new CKEDITOR.dom.element( + $(openerp.qweb.render('website.editor.table', { + rows: $e.closest('tr').index() + 1, + cols: $e.index() + 1, + }))[0]); + + editor.insertElement(table); + setTimeout(function () { + //noinspection JSPotentiallyInvalidConstructorUsage + var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]); + var range = editor.createRange(); + range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START); + range.select(); + }, 0); + }); + + block.element.getDocument().getBody().setStyle('overflow', 'hidden'); + CKEDITOR.ui.fire('ready', this); + }, + }); + } + }); + + CKEDITOR.plugins.add('linkstyle', { + requires: 'panelbutton,floatpanel', + init: function (editor) { + var label = "Link Style"; + + editor.ui.add('LinkStyle', CKEDITOR.UI_PANELBUTTON, { + label: label, + title: label, + icon: '/website/static/src/img/bglink.png', + modes: { wysiwyg: true }, + editorFocus: true, + panel: { + css: '/website/static/lib/bootstrap/css/bootstrap.css', + attributes: { 'role': 'listbox', 'aria-label': label }, + }, + + types: { + 'btn-default': _t("Basic"), + 'btn-primary': _t("Primary"), + 'btn-success': _t("Success"), + 'btn-info': _t("Info"), + 'btn-warning': _t("Warning"), + 'btn-danger': _t("Danger"), + }, + sizes: { + 'btn-xs': _t("Extra Small"), + 'btn-sm': _t("Small"), + '': _t("Default"), + 'btn-lg': _t("Large") + }, + + onRender: function () { + var self = this; + editor.on('selectionChange', function (e) { + var path = e.data.path, el; + + if (!(e = path.contains('a')) || e.isReadOnly()) { + self.disable(); + return; + } + + self.enable(); + }); + // no hook where button is available, so wait + // "some time" after render. + setTimeout(function () { + self.disable(); + }, 0) + }, + enable: function () { + this.setState(CKEDITOR.TRISTATE_OFF); + }, + disable: function () { + this.setState(CKEDITOR.TRISTATE_DISABLED); + }, + + onOpen: function () { + var link = get_selected_link(editor); + var id = this._.id; + var block = this._.panel._.panel._.blocks[id]; + var $root = $(block.element.$); + $root.find('button').removeClass('active').removeProp('disabled'); + + // enable buttons matching link state + for (var type in this.types) { + if (!this.types.hasOwnProperty(type)) { continue; } + if (!link.hasClass(type)) { continue; } + + $root.find('button[data-type=types].' + type) + .addClass('active'); + } + var found; + for (var size in this.sizes) { + if (!this.sizes.hasOwnProperty(size)) { continue; } + if (!size || !link.hasClass(size)) { continue; } + found = true; + $root.find('button[data-type=sizes].' + size) + .addClass('active'); + } + if (!found && link.hasClass('btn')) { + $root.find('button[data-type="sizes"][data-set-class=""]') + .addClass('active'); + } + }, + + onBlock: function (panel, block) { + var self = this; + block.autoSize = true; + + var html = ['<div style="padding: 5px">']; + html.push('<div style="white-space: nowrap">'); + _(this.types).each(function (label, key) { + html.push(_.str.sprintf( + '<button type="button" class="btn %s" ' + + 'data-type="types" data-set-class="%s">%s</button>', + key, key, label)); + }); + html.push('</div>'); + html.push('<div style="white-space: nowrap; margin: 5px 0; text-align: center">'); + _(this.sizes).each(function (label, key) { + html.push(_.str.sprintf( + '<button type="button" class="btn btn-default %s" ' + + 'data-type="sizes" data-set-class="%s">%s</button>', + key, key, label)); + }); + html.push('</div>'); + html.push('<button type="button" class="btn btn-link btn-block" ' + + 'data-type="reset">Reset</button>'); + html.push('</div>'); + + block.element.setHtml(html.join(' ')); + var $panel = $(block.element.$); + $panel.on('click', 'button', function () { + self.clicked(this); + }); + }, + clicked: function (button) { + editor.focus(); + editor.fire('saveSnapshot'); + + var $button = $(button), + $link = $(get_selected_link(editor).$); + if (!$link.hasClass('btn')) { + $link.addClass('btn btn-default'); + } + switch($button.data('type')) { + case 'reset': + $link.removeClass('btn') + .removeClass(_.keys(this.types).join(' ')) + .removeClass(_.keys(this.sizes).join(' ')); + break; + case 'types': + $link.removeClass(_.keys(this.types).join(' ')) + .addClass($button.data('set-class')); + break; + case 'sizes': + $link.removeClass(_.keys(this.sizes).join(' ')) + .addClass($button.data('set-class')); + } + this._.panel.hide(); + + editor.fire('saveSnapshot'); + }, + + }); + } + }); + + CKEDITOR.plugins.add('oeref', { + requires: 'widget', + + init: function (editor) { + editor.widgets.add('oeref', { + editables: { text: '*' }, + draggable: false, + + upcast: function (el) { + var matches = el.attributes['data-oe-type'] && el.attributes['data-oe-type'] !== 'monetary'; + if (!matches) { return false; } + + if (el.attributes['data-oe-original']) { + while (el.children.length) { + el.children[0].remove(); + } + el.add(new CKEDITOR.htmlParser.text( + el.attributes['data-oe-original'] + )); + } + 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.$) + .appendTo(document.body); + }); + }, + upcast: function (el) { + return el.attributes['class'] + && (/\bfa\b/.test(el.attributes['class'])); + } + }); + } + }); + + var editor = new website.EditorBar(); + var $body = $(document.body); + editor.prependTo($body).then(function () { + if (location.search.indexOf("enable_editor") >= 0) { + editor.edit(); + } + }); + }; + + /* ----- TOP EDITOR BAR FOR ADMIN ---- */ + website.EditorBar = openerp.Widget.extend({ + template: 'website.editorbar', + events: { + 'click button[data-action=edit]': 'edit', + 'click button[data-action=save]': 'save', + 'click a[data-action=cancel]': 'cancel', + }, + container: 'body', + customize_setup: function() { + var self = this; + var view_name = $(document.documentElement).data('view-xmlid'); + if (!view_name) { + this.$('#customize-menu-button').addClass("hidden"); + } + var menu = $('#customize-menu'); + this.$('#customize-menu-button').click(function(event) { + menu.empty(); + openerp.jsonRpc('/website/customize_template_get', 'call', { 'xml_id': view_name }).then( + function(result) { + _.each(result, function (item) { + if (item.header) { + menu.append('<li class="dropdown-header">' + item.name + '</li>'); + } else { + menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="fa fa%s-square-o"></strong> %s</a></li>', + item.id, item.active ? '-check' : '', item.name)); + } + }); + // Adding Static Menus + menu.append('<li class="divider"></li>'); + menu.append('<li><a data-action="ace" href="#">HTML Editor</a></li>'); + menu.append('<li class="js_change_theme"><a href="/page/website.themes">Change Theme</a></li>'); + menu.append('<li><a href="/web#return_label=Website&action=website.action_module_website">Install Apps</a></li>'); + self.trigger('rte:customize_menu_ready'); + } + ); + }); + menu.on('click', 'a[data-action!=ace]', function (event) { + var view_id = $(event.currentTarget).data('view-id'); + openerp.jsonRpc('/website/customize_template_toggle', 'call', { + 'view_id': view_id + }).then( function() { + window.location.reload(); + }); + }); + }, + start: function() { + var self = this; + this.saving_mutex = new openerp.Mutex(); + + this.$('#website-top-edit').hide(); + this.$('#website-top-view').show(); + + $('.dropdown-toggle').dropdown(); + this.customize_setup(); + + this.$buttons = { + edit: this.$('button[data-action=edit]'), + save: this.$('button[data-action=save]'), + cancel: this.$('button[data-action=cancel]'), + }; + + this.rte = new website.RTE(this); + this.rte.on('change', this, this.proxy('rte_changed')); + this.rte.on('rte:ready', this, function () { + self.setup_hover_buttons(); + self.trigger('rte:ready'); + self.check_height(); + }); + + $(window).on('resize', _.debounce(this.check_height.bind(this), 50)); + this.check_height(); + + if (website.is_editable_button) { + this.$("button[data-action=edit]").removeClass("hidden"); + } + + return $.when( + this._super.apply(this, arguments), + this.rte.appendTo(this.$('#website-top-edit .nav.pull-right')) + ).then(function () { + self.check_height(); + }); + }, + check_height: function () { + var editor_height = this.$el.outerHeight(); + if (this.get('height') != editor_height) { + $(document.body).css('padding-top', editor_height); + this.set('height', editor_height); + } + }, + edit: function () { + this.$buttons.edit.prop('disabled', true); + this.$('#website-top-view').hide(); + this.$('#website-top-edit').show(); + $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden"); + + this.rte.start_edition().then(this.check_height.bind(this)); + this.trigger('rte:called'); + }, + rte_changed: function () { + this.$buttons.save.prop('disabled', false); + }, + save: function () { + var self = this; + + observer.disconnect(); + var editor = this.rte.editor; + var root = editor.element.$; + editor.destroy(); + // FIXME: select editables then filter by dirty? + var defs = this.rte.fetch_editables(root) + .filter('.oe_dirty') + .removeAttr('contentEditable') + .removeClass('oe_dirty oe_editable cke_focus oe_carlos_danger') + .map(function () { + var $el = $(this); + // TODO: Add a queue with concurrency limit in webclient + // https://github.com/medikoo/deferred/blob/master/lib/ext/function/gate.js + return self.saving_mutex.exec(function () { + return self.saveElement($el) + .then(undefined, function (thing, response) { + // because ckeditor regenerates all the dom, + // we can't just setup the popover here as + // everything will be destroyed by the DOM + // regeneration. Add markings instead, and + // returns a new rejection with all relevant + // info + var id = _.uniqueId('carlos_danger_'); + $el.addClass('oe_dirty oe_carlos_danger'); + $el.addClass(id); + return $.Deferred().reject({ + id: id, + error: response.data, + }); + }); + }); + }).get(); + return $.when.apply(null, defs).then(function () { + website.reload(); + }, function (failed) { + // If there were errors, re-enable edition + self.rte.start_edition(true).then(function () { + // jquery's deferred being a pain in the ass + if (!_.isArray(failed)) { failed = [failed]; } + + _(failed).each(function (failure) { + var html = failure.error.exception_type === "except_osv"; + if (html) { + var msg = $("<div/>").text(failure.error.message).html(); + var data = msg.substring(3,msg.length-2).split(/', u'/); + failure.error.message = '<b>' + data[0] + '</b><br/>' + data[1]; + } + $(root).find('.' + failure.id) + .removeClass(failure.id) + .popover({ + html: html, + trigger: 'hover', + content: failure.error.message, + placement: 'auto top', + }) + // Force-show popovers so users will notice them. + .popover('show'); + }); + }); + }); + }, + /** + * Saves an RTE content, which always corresponds to a view section (?). + */ + saveElement: function ($el) { + var markup = $el.prop('outerHTML'); + return openerp.jsonRpc('/web/dataset/call', 'call', { + model: 'ir.ui.view', + method: 'save', + args: [$el.data('oe-id'), markup, + $el.data('oe-xpath') || null, + website.get_context()], + }); + }, + cancel: function () { + new $.Deferred(function (d) { + var $dialog = $(openerp.qweb.render('website.editor.discard')).appendTo(document.body); + $dialog.on('click', '.btn-danger', function () { + d.resolve(); + }).on('hidden.bs.modal', function () { + d.reject(); + }); + d.always(function () { + $dialog.remove(); + }); + $dialog.modal('show'); + }).then(function () { + website.reload(); + }) + }, + + /** + * Creates a "hover" button for image and 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) { + return $(openerp.qweb.render('website.editor.hoverbutton', { + label: label, + classes: classes, + })).hide().appendTo(document.body).click(function (e) { + e.preventDefault(); + e.stopPropagation(); + editfn.call(this, e); + }); + }, + /** + * For UI clarity, during RTE edition when the user hovers links and + * images a small button should appear to make the capability clear, + * as not all users think of double-clicking the image or link. + */ + setup_hover_buttons: function () { + var editor = this.rte.editor; + var $link_button = this.make_hover_button(_t("Change"), 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) + .appendTo(document.body); + } + $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; + }); + + // 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 () { + // Back from edit button -> ignore + if (previous && previous === this) { return; } + + var selected = new CKEDITOR.dom.element(this); + if (!is_editable_node(selected) && !selected.hasClass('fa')) { + 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 + }) + } + }).on('mouseleave', 'a, img, .fa', function (e) { + var current = document.elementFromPoint(e.clientX, e.clientY); + if (current === $link_button[0] || current === $image_button[0]) { + return; + } + $image_button.add($link_button).hide(); + previous = null; + }); + } + }); + + var blocks_selector = _.keys(CKEDITOR.dtd.$block).join(','); + /* ----- RICH TEXT EDITOR ---- */ + website.RTE = openerp.Widget.extend({ + tagName: 'li', + id: 'oe_rte_toolbar', + className: 'oe_right oe_rte_toolbar', + // editor.ui.items -> possible commands &al + // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'})); + + init: function (EditorBar) { + this.EditorBar = EditorBar; + this._super.apply(this, arguments); + }, + + /** + * In Webkit-based browsers, triple-click will select a paragraph up to + * the start of the next "paragraph" including any empty space + * inbetween. When said paragraph is removed or altered, it nukes + * the empty space and brings part of the content of the next + * "paragraph" (which may well be e.g. an image) into the current one, + * completely fucking up layouts and breaking snippets. + * + * Try to fuck around with selections on triple-click to attempt to + * fix this garbage behavior. + * + * Note: for consistent behavior we may actually want to take over + * triple-clicks, in all browsers in order to ensure consistent cross- + * platform behavior instead of being at the mercy of rendering engines + * & platform selection quirks? + */ + webkitSelectionFixer: function (root) { + root.addEventListener('click', function (e) { + // only webkit seems to have a fucked up behavior, ignore others + // FIXME: $.browser goes away in jquery 1.9... + if (!$.browser.webkit) { return; } + // http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents + // The detail attribute indicates the number of times a mouse button has been pressed + // we just want the triple click + if (e.detail !== 3) { return; } + e.preventDefault(); + + // Get closest block-level element to the triple-clicked + // element (using ckeditor's block list because why not) + var $closest_block = $(e.target).closest(blocks_selector); + + // manually set selection range to the content of the + // triple-clicked block-level element, to avoid crossing over + // between block-level elements + document.getSelection().selectAllChildren($closest_block[0]); + }); + }, + tableNavigation: function (root) { + var self = this; + $(root).on('keydown', function (e) { + // ignore non-TAB + if (e.which !== 9) { return; } + + if (self.handleTab(e)) { + e.preventDefault(); + } + }); + }, + /** + * Performs whatever operation is necessary on a [TAB] hit, returns + * ``true`` if the event's default should be cancelled (if the TAB was + * handled by the function) + */ + handleTab: function (event) { + var forward = !event.shiftKey; + + var root = window.getSelection().getRangeAt(0).commonAncestorContainer; + var $cell = $(root).closest('td,th'); + + if (!$cell.length) { return false; } + + var cell = $cell[0]; + + // find cell in same row + var row = cell.parentNode; + var sibling = row.cells[cell.cellIndex + (forward ? 1 : -1)]; + if (sibling) { + document.getSelection().selectAllChildren(sibling); + return true; + } + + // find cell in previous/next row + var table = row.parentNode; + var sibling_row = table.rows[row.rowIndex + (forward ? 1 : -1)]; + if (sibling_row) { + var new_cell = sibling_row.cells[forward ? 0 : sibling_row.cells.length - 1]; + document.getSelection().selectAllChildren(new_cell); + return true; + } + + // at edge cells, copy word/openoffice behavior: if going backwards + // from first cell do nothing, if going forwards from last cell add + // a row + if (forward) { + var row_size = row.cells.length; + var new_row = document.createElement('tr'); + while(row_size--) { + var newcell = document.createElement('td'); + // zero-width space + newcell.textContent = '\u200B'; + new_row.appendChild(newcell); + } + table.appendChild(new_row); + document.getSelection().selectAllChildren(new_row.cells[0]); + } + + return true; + }, + /** + * Makes the page editable + * + * @param {Boolean} [restart=false] in case the edition was already set + * up once and is being re-enabled. + * @returns {$.Deferred} deferred indicating when the RTE is ready + */ + start_edition: function (restart) { + var self = this; + // create a single editor for the whole page + var root = document.getElementById('wrapwrap'); + if (!restart) { + $(root).on('dragstart', 'img', function (e) { + e.preventDefault(); + }); + this.webkitSelectionFixer(root); + this.tableNavigation(root); + } + var def = $.Deferred(); + var editor = this.editor = CKEDITOR.inline(root, self._config()); + editor.on('instanceReady', function () { + editor.setReadOnly(false); + // ckeditor set root to editable, disable it (only inner + // sections are editable) + // FIXME: are there cases where the whole editor is editable? + editor.editable().setReadOnly(true); + + self.setup_editables(root); + + try { + // disable firefox's broken table resizing thing + document.execCommand("enableObjectResizing", false, "false"); + 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: + // https://dev.ckeditor.com/ticket/11472 + $(document.body) + .off('snippet-dropped') + .on('snippet-dropped', function (e, el) { + // CKEDITOR data processor extended by widgets plugin + // to add wrappers around upcasting elements + el.innerHTML = editor.dataProcessor.toHtml(el.innerHTML, { + fixForBody: false, + dontFilter: true, + }); + // then repository.initOnAll() handles the conversion + // from wrapper to actual widget instance (or something + // like that). + setTimeout(function () { + editor.widgets.initOnAll(); + }, 0); + }); + + self.trigger('rte:ready'); + def.resolve(); + }); + return def; + }, + + setup_editables: function (root) { + // selection of editable sub-items was previously in + // EditorBar#edit, but for some unknown reason the elements were + // apparently removed and recreated (?) at editor initalization, + // and observer setup was lost. + var self = this; + // setup dirty-marking for each editable element + this.fetch_editables(root) + .addClass('oe_editable') + .each(function () { + var node = this; + var $node = $(node); + // only explicitly set contenteditable on view sections, + // cke widgets system will do the widgets themselves + if ($node.data('oe-model') === 'ir.ui.view') { + node.contentEditable = true; + } + + observer.observe(node, OBSERVER_CONFIG); + $node.one('content_changed', function () { + $node.addClass('oe_dirty'); + self.trigger('change'); + }); + }); + }, + + fetch_editables: function (root) { + return $(root).find('[data-oe-model]') + .not('link, script') + .not('.oe_snippet_editor') + .filter(function () { + var $this = $(this); + // keep view sections and fields which are *not* in + // view sections for top-level editables + return $this.data('oe-model') === 'ir.ui.view' + || !$this.closest('[data-oe-model = "ir.ui.view"]').length; + }); + }, + + _current_editor: function () { + return CKEDITOR.currentInstance; + }, + _config: function () { + // base plugins minus + // - magicline (captures mousein/mouseout -> breaks draggable) + // - contextmenu & tabletools (disable contextual menu) + // - bunch of unused plugins + var plugins = [ + 'a11yhelp', 'basicstyles', 'blockquote', + 'clipboard', 'colorbutton', 'colordialog', 'dialogadvtab', + 'elementspath', /*'enterkey',*/ 'entities', 'filebrowser', + 'find', 'floatingspace','format', 'htmlwriter', 'iframe', + 'indentblock', 'indentlist', 'justify', + 'list', 'pastefromword', 'pastetext', 'preview', + 'removeformat', 'resize', 'save', 'selectall', 'stylescombo', + 'table', 'templates', 'toolbar', 'undo', 'wysiwygarea' + ]; + return { + // FIXME + language: 'en', + // Disable auto-generated titles + // FIXME: accessibility, need to generate user-sensible title, used for @title and @aria-label + title: false, + plugins: plugins.join(','), + uiColor: '', + // FIXME: currently breaks RTE? + // Ensure no config file is loaded + customConfig: '', + // Disable ACF + allowedContent: true, + // Don't insert paragraphs around content in e.g. <li> + autoParagraph: false, + // Don't automatically add or <br> in empty block-level + // elements when edition starts + fillEmptyBlocks: false, + filebrowserImageUploadUrl: "/website/attach", + // Support for sharedSpaces in 4.x + extraPlugins: 'sharedspace,customdialogs,tablebutton,oeref,linkstyle', + // Place toolbar in controlled location + sharedSpaces: { top: 'oe_rte_toolbar' }, + toolbar: [{ + name: 'basicstyles', items: [ + "Bold", "Italic", "Underline", "Strike", "Subscript", + "Superscript", "TextColor", "BGColor", "RemoveFormat" + ]},{ + name: 'span', items: [ + "Link", "LinkStyle", "Blockquote", "BulletedList", + "NumberedList", "Indent", "Outdent" + ]},{ + name: 'justify', items: [ + "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" + ]},{ + name: 'special', items: [ + "Image", "TableButton" + ]},{ + name: 'styles', items: [ + "Styles" + ]} + ], + // styles dropdown in toolbar + stylesSet: [ + {name: "Normal", element: 'p'}, + {name: "Heading 1", element: 'h1'}, + {name: "Heading 2", element: 'h2'}, + {name: "Heading 3", element: 'h3'}, + {name: "Heading 4", element: 'h4'}, + {name: "Heading 5", element: 'h5'}, + {name: "Heading 6", element: 'h6'}, + {name: "Formatted", element: 'pre'}, + {name: "Address", element: 'address'} + ], + }; + }, + }); + + website.editor = { }; + website.editor.Dialog = openerp.Widget.extend({ + events: { + 'hidden.bs.modal': 'destroy', + 'click button.save': 'save', + 'click button[data-dismiss="modal"]': 'cancel', + }, + init: function (editor) { + this._super(); + this.editor = editor; + }, + start: function () { + var sup = this._super(); + this.$el.modal({backdrop: 'static'}); + return sup; + }, + save: function () { + this.close(); + }, + cancel: function () { + }, + close: function () { + this.$el.modal('hide'); + }, + }); + + website.editor.LinkDialog = website.editor.Dialog.extend({ + template: 'website.editor.dialog.link', + events: _.extend({}, website.editor.Dialog.prototype.events, { + 'change :input.url-source': function (e) { this.changed($(e.target)); }, + 'mousedown': function (e) { + var $target = $(e.target).closest('.list-group-item'); + if (!$target.length || $target.hasClass('active')) { + // clicked outside groups, or clicked in active groups + return; + } + + this.changed($target.find('.url-source').filter(':input')); + }, + 'click button.remove': 'remove_link', + 'change input#link-text': function (e) { + this.text = $(e.target).val() + }, + }), + init: function (editor) { + this._super(editor); + this.text = null; + // Store last-performed request to be able to cancel/abort it. + this.page_exists_req = null; + this.search_pages_req = null; + }, + start: function () { + var self = this; + this.$('#link-page').select2({ + minimumInputLength: 1, + placeholder: _t("New or existing page"), + query: function (q) { + $.when( + self.page_exists(q.term), + self.fetch_pages(q.term) + ).then(function (exists, results) { + var rs = _.map(results, function (r) { + return { id: r.url, text: r.name, }; + }); + if (!exists) { + rs.push({ + create: true, + id: q.term, + text: _.str.sprintf(_t("Create page '%s'"), q.term), + }); + } + q.callback({ + more: false, + results: rs + }); + }, function () { + q.callback({more: false, results: []}); + }); + }, + }); + return this._super().then(this.proxy('bind_data')); + }, + save: function () { + var self = this, _super = this._super.bind(this); + var $e = this.$('.list-group-item.active .url-source').filter(':input'); + var val = $e.val(); + if (!val || !$e[0].checkValidity()) { + // FIXME: error message + $e.closest('.form-group').addClass('has-error'); + $e.focus(); + return; + } + + var done = $.when(); + if ($e.hasClass('email-address')) { + this.make_link('mailto:' + val, false, val); + } else if ($e.hasClass('page')) { + var data = $e.select2('data'); + if (!data.create) { + self.make_link(data.id, false, data.text); + } else { + // Create the page, get the URL back + done = $.get(_.str.sprintf( + '/pagenew/%s?noredirect=1', encodeURI(data.id))) + .then(function (response) { + self.make_link(response, false, data.id); + }); + } + } else { + this.make_link(val, this.$('input.window-new').prop('checked')); + } + done.then(_super); + }, + make_link: function (url, new_window, label) { + }, + bind_data: function (text, href, new_window) { + href = href || this.element && (this.element.data( 'cke-saved-href') + || this.element.getAttribute('href')); + + if (new_window === undefined) { + new_window = this.element + ? this.element.getAttribute('target') === '_blank' + : false; + } + if (text === undefined) { + text = this.element ? this.element.getText() : ''; + } + + this.$('input#link-text').val(text); + this.$('input.window-new').prop('checked', new_window); + + if (!href) { return; } + var match, $control; + if ((match = /mailto:(.+)/.exec(href))) { + $control = this.$('input.email-address').val(match[1]); + } + if (!$control) { + $control = this.$('input.url').val(href); + } + + this.changed($control); + }, + changed: function ($e) { + this.$('.url-source').filter(':input').not($e).val('') + .filter(function () { return !!$(this).data('select2'); }) + .select2('data', null); + $e.closest('.list-group-item') + .addClass('active') + .siblings().removeClass('active') + .addBack().removeClass('has-error'); + }, + call: function (method, args, kwargs) { + var self = this; + var req = method + '_req'; + + if (this[req]) { this[req].abort(); } + + return this[req] = openerp.jsonRpc('/web/dataset/call_kw', 'call', { + model: 'website', + method: method, + args: args, + kwargs: kwargs, + }).always(function () { + self[req] = null; + }); + }, + page_exists: function (term) { + return this.call('page_exists', [null, term], { + context: website.get_context(), + }); + }, + fetch_pages: function (term) { + return this.call('search_pages', [null, term], { + limit: 9, + context: website.get_context(), + }); + }, + }); + website.editor.RTELinkDialog = website.editor.LinkDialog.extend({ + start: function () { + var element; + if ((element = this.get_selected_link()) && element.hasAttribute('href')) { + this.editor.getSelection().selectElement(element); + } + this.element = element; + if (element) { + this.add_removal_button(); + } + + return this._super(); + }, + add_removal_button: function () { + this.$('.modal-footer').prepend( + openerp.qweb.render( + 'website.editor.dialog.link.footer-button')); + }, + remove_link: function () { + var editor = this.editor; + // same issue as in make_link + setTimeout(function () { + editor.removeStyle(new CKEDITOR.style({ + element: 'a', + type: CKEDITOR.STYLE_INLINE, + alwaysRemoveElement: true, + })); + }, 0); + this.close(); + }, + /** + * Greatly simplified version of CKEDITOR's + * plugins.link.dialogs.link.onOk. + * + * @param {String} url + * @param {Boolean} [new_window=false] + * @param {String} [label=null] + */ + make_link: function (url, new_window, label) { + var attributes = {href: url, 'data-cke-saved-href': url}; + var to_remove = []; + if (new_window) { + attributes['target'] = '_blank'; + } else { + to_remove.push('target'); + } + + if (this.element) { + this.element.setAttributes(attributes); + this.element.removeAttributes(to_remove); + if (this.text) { this.element.setText(this.text); } + } else { + var selection = this.editor.getSelection(); + var range = selection.getRanges(true)[0]; + + if (range.collapsed) { + //noinspection JSPotentiallyInvalidConstructorUsage + var text = new CKEDITOR.dom.text( + this.text || label || url); + range.insertNode(text); + range.selectNodeContents(text); + } + + //noinspection JSPotentiallyInvalidConstructorUsage + new CKEDITOR.style({ + type: CKEDITOR.STYLE_INLINE, + element: 'a', + attributes: attributes, + }).applyToRange(range); + + // focus dance between RTE & dialog blow up the stack in Safari + // and Chrome, so defer select() until dialog has been closed + setTimeout(function () { + range.select(); + }, 0); + } + }, + /** + * CKEDITOR.plugins.link.getSelectedLink ignores the editor's root, + * if the editor is set directly on a link it will thus not work. + */ + get_selected_link: function () { + return get_selected_link(this.editor); + }, + }); + + /** + * ImageDialog widget. Lets users change an image, including uploading a + * new image in OpenERP or selecting the image style (if supported by + * the caller). + * + * Initialized as usual, but the caller can hook into two events: + * + * @event start({url, style}) called during dialog initialization and + * opening, the handler can *set* the ``url`` + * and ``style`` properties on its parameter + * to provide these as default values to the + * dialog + * @event save({url, style}) called during dialog finalization, the handler + * is provided with the image url and style + * selected by the users (or possibly the ones + * originally passed in) + */ + website.editor.ImageDialog = website.editor.Dialog.extend({ + template: 'website.editor.dialog.image', + events: _.extend({}, website.editor.Dialog.prototype.events, { + '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', + }), + + start: function () { + this.$('.modal-footer [disabled]').text("Uploading…"); + var $options = this.$('.image-style').children(); + this.image_styles = $options.map(function () { return this.value; }).get(); + + var o = { url: null, style: 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.set_image(o.url); + } + + return this._super(); + }, + save: function () { + this.trigger('save', { + url: this.$('input.url').val(), + style: this.$('.image-style').val(), + }); + return this._super(); + }, + 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) { + this.$('input.url').val(url); + this.preview_image(); + }, + + file_selection: function () { + this.$el.addClass('nosave'); + this.$('button.filepicker').removeClass('btn-danger btn-success'); + + var self = this; + var callback = _.uniqueId('func_'); + this.$('input[name=func]').val(callback); + + window[callback] = function (url, error) { + delete window[callback]; + self.file_selected(url, error); + }; + this.$('form').submit(); + }, + file_selected: function(url, error) { + var $button = this.$('button.filepicker'); + if (error) { + $button.addClass('btn-danger'); + return; + } + $button.addClass('btn-success'); + this.set_image(url); + }, + preview_image: function () { + this.$el.removeClass('nosave'); + var image = this.$('input.url').val(); + if (!image) { return; } + + this.$('img.image-preview') + .attr('src', image) + .removeClass(this.image_styles.join(' ')) + .addClass(this.$('select.image-style').val()); + }, + browse_existing: function (e) { + e.preventDefault(); + new website.editor.ExistingImageDialog(this).appendTo(document.body); + }, + }); + website.editor.RTEImageDialog = website.editor.ImageDialog.extend({ + init: function (editor, image) { + this._super(editor); + + this.element = image; + + this.on('start', this, this.proxy('started')); + this.on('save', this, this.proxy('saved')); + }, + started: function (holder) { + if (!this.element) { + var selection = this.editor.getSelection(); + this.element = selection && selection.getSelectedElement(); + } + + var el = this.element; + 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)) { + element = editor.document.createElement('img'); + element.addClass('img'); + element.addClass('img-responsive'); + // focus event handler interactions between bootstrap (modal) + // and ckeditor (RTE) lead to blowing the stack in Safari and + // Chrome (but not FF) when this is done synchronously => + // defer insertion so modal has been hidden & destroyed before + // it happens + setTimeout(function () { + editor.insertElement(element); + }, 0); + } + + 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(); + if (el && el.is('a')) { return el; } + + var range = sel.getRanges(true)[0]; + if (!range) { return null; } + + 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' + }); + if (!viewRoot) { return null; } + // if viewRoot is the first link, don't edit it. + return new CKEDITOR.dom.elementPath(commonAncestor, viewRoot) + .contains('a', true); + } + + website.editor.FontIconsDialog = website.editor.Dialog.extend({ + template: 'website.editor.dialog.font-icons', + events : _.extend({}, website.editor.Dialog.prototype.events, { + change: 'update_preview', + 'click .font-icons-icon': function (e) { + e.preventDefault(); + e.stopPropagation(); + + this.$('#fa-icon').val(e.target.getAttribute('data-id')); + this.update_preview(); + }, + 'click #fa-preview span': function (e) { + e.preventDefault(); + e.stopPropagation(); + + 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. + // Each icon provides the unicode codepoint as ``text`` and the class + // name as ``id`` so the whole thing can be fed directly to select2 + // without post-processing and do the right thing (except for the part + // 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. + */ + start: function () { + return this._super().then(this.proxy('load_data')); + }, + /** + * 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 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._super(); + }, + /** + * Looks up the various FontAwesome classes on the bound element and + * sets the corresponding template/form elements to the right state. + * If multiple classes of the same category are present on an element + * (e.g. fa-lg and fa-3x) the last one occurring will be selected, + * which may not match the visual look of the element. + */ + load_data: function () { + var classes = this.element.className.split(/\s+/); + for (var i = 0; i < classes.length; i++) { + var cls = classes[i]; + switch(cls) { + case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x': + // size classes + this.$('#fa-size').val(cls); + continue; + case 'fa-spin': + case 'fa-rotate-90':case 'fa-rotate-180':case 'fa-rotate-270': + case 'fa-flip-horizontal':case 'fa-rotate-vertical': + this.$('#fa-rotation').val(cls); + continue; + case 'fa-fw': + continue; + case 'fa-border': + this.$('#fa-border').prop('checked', true); + continue; + default: + if (!/^fa-/.test(cls)) { continue; } + this.$('#fa-icon').val(cls); + } + } + this.update_preview(); + }, + /** + * Serializes the dialog to an array of FontAwesome classes. Includes + * the base ``fa``. + */ + get_fa_classes: function () { + return [ + 'fa', + this.$('#fa-icon').val(), + this.$('#fa-size').val(), + this.$('#fa-rotation').val(), + this.$('#fa-border').prop('checked') ? 'fa-border' : '' + ]; + }, + update_preview: function () { + 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(' '); + var selected = false; + for (var i = sizes.length - 1; i >= 0; i--) { + var size = sizes[i]; + + var $p = $('<span>') + .attr('data-size', size) + .addClass(size) + .addClass(no_sizes); + if ((size && _.contains(classes, size)) || (!size && !selected)) { + $p.addClass('font-icons-selected'); + selected = true; + } + $preview.prepend($p); + } + } + }); + + website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver; + var OBSERVER_CONFIG = { + childList: true, + attributes: true, + characterData: true, + subtree: true, + attributeOldValue: true, + }; + var observer = new website.Observer(function (mutations) { + // NOTE: Webkit does not fire DOMAttrModified => webkit browsers + // relying on JsMutationObserver shim (Chrome < 18, Safari < 6) + // will not mark dirty on attribute changes (@class, img/@src, + // a/@href, ...) + _(mutations).chain() + .filter(function (m) { + // ignore any change related to mundane image-edit-button + if (m.target && m.target.className + && m.target.className.indexOf('image-edit-button') !== -1) { + return false; + } + switch(m.type) { + case 'attributes': // ignore .cke_focus being added or removed + // if attribute is not a class, can't be .cke_focus change + if (m.attributeName !== 'class') { return true; } + + // find out what classes were added or removed + var oldClasses = (m.oldValue || '').split(/\s+/); + var newClasses = m.target.className.split(/\s+/); + var change = _.union(_.difference(oldClasses, newClasses), + _.difference(newClasses, oldClasses)); + // ignore mutation if the *only* change is .cke_focus + return change.length !== 1 || change[0] === 'cke_focus'; + case 'childList': + // 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. + return !!remove_mundane_nodes(m.addedNodes).length || + !!remove_mundane_nodes(m.removedNodes).length; + default: + return true; + } + }) + .map(function (m) { + var node = m.target; + while (node && !$(node).hasClass('oe_editable')) { + node = node.parentNode; + } + return node; + }) + .compact() + .uniq() + .each(function (node) { $(node).trigger('content_changed'); }) + }); + function remove_mundane_nodes(nodes) { + if (!nodes || !nodes.length) { return []; } + + var output = []; + for(var i=0; i<nodes.length; ++i) { + var node = nodes[i]; + if (node.nodeType === document.ELEMENT_NODE) { + if (node.nodeName === 'BR' && node.getAttribute('type') === '_moz') { + // <br type="_moz"> appears when focusing RTE in FF, ignore + continue; + } + } + + output.push(node); + } + return output; + } +})(); |