2013-08-29 10:29:56 +00:00
|
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var website = openerp.website;
|
2013-09-10 08:56:04 +00:00
|
|
|
// $.fn.data automatically parses value, '0'|'1' -> 0|1
|
|
|
|
website.is_editable = $(document.documentElement).data('editable');
|
2013-08-29 10:29:56 +00:00
|
|
|
|
2013-08-29 15:34:41 +00:00
|
|
|
website.templates.push('/website/static/src/xml/website.editor.xml');
|
|
|
|
website.dom_ready.done(function () {
|
|
|
|
var is_smartphone = $(document.body)[0].clientWidth < 767;
|
|
|
|
|
|
|
|
if (website.is_editable && !is_smartphone) {
|
|
|
|
website.ready().then(website.init_editor);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function link_dialog(editor) {
|
|
|
|
return new website.editor.LinkDialog(editor).appendTo(document.body);
|
|
|
|
}
|
2013-09-02 07:52:16 +00:00
|
|
|
function image_dialog(editor) {
|
|
|
|
return new website.editor.ImageDialog(editor).appendTo(document.body);
|
|
|
|
}
|
2013-08-29 15:34:41 +00:00
|
|
|
|
2013-09-10 08:56:04 +00:00
|
|
|
if (website.is_editable) {
|
|
|
|
// only enable editors manually
|
|
|
|
CKEDITOR.disableAutoInline = true;
|
|
|
|
// EDIT ALL THE THINGS
|
|
|
|
CKEDITOR.dtd.$editable = $.extend(
|
|
|
|
{}, CKEDITOR.dtd.$block, CKEDITOR.dtd.$inline);
|
2013-09-10 09:02:32 +00:00
|
|
|
// Disable removal of empty elements on CKEDITOR activation. Empty
|
|
|
|
// elements are used for e.g. support of FontAwesome icons
|
|
|
|
CKEDITOR.dtd.$removeEmpty = {};
|
2013-09-10 08:56:04 +00:00
|
|
|
}
|
2013-08-29 10:29:56 +00:00
|
|
|
website.init_editor = function () {
|
2013-08-29 15:34:41 +00:00
|
|
|
CKEDITOR.plugins.add('customdialogs', {
|
2013-09-16 09:03:53 +00:00
|
|
|
// requires: 'link,image',
|
2013-08-29 15:34:41 +00:00
|
|
|
init: function (editor) {
|
|
|
|
editor.on('doubleclick', function (evt) {
|
2013-09-16 09:03:53 +00:00
|
|
|
var element = evt.data.element;
|
|
|
|
if (element.is('img') && !element.data( 'cke-realelement' ) && !element.isReadOnly()) {
|
2013-09-02 07:52:16 +00:00
|
|
|
image_dialog(editor);
|
2013-09-16 09:03:53 +00:00
|
|
|
return;
|
2013-08-29 15:34:41 +00:00
|
|
|
}
|
2013-09-16 09:03:53 +00:00
|
|
|
|
|
|
|
element = get_selected_link(editor) || evt.data.element;
|
|
|
|
if (element.isReadOnly() || !element.is('a')) { return; }
|
|
|
|
|
|
|
|
editor.getSelection().selectElement(element);
|
|
|
|
link_dialog(editor);
|
2013-08-29 15:34:41 +00:00
|
|
|
}, null, null, 500);
|
|
|
|
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSValidateTypes
|
2013-08-29 15:34:41 +00:00
|
|
|
editor.addCommand('link', {
|
|
|
|
exec: function (editor, data) {
|
|
|
|
link_dialog(editor);
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
canUndo: false,
|
|
|
|
editorFocus: true,
|
|
|
|
});
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSValidateTypes
|
2013-08-29 15:34:41 +00:00
|
|
|
editor.addCommand('image', {
|
|
|
|
exec: function (editor, data) {
|
2013-09-02 07:52:16 +00:00
|
|
|
image_dialog(editor);
|
2013-08-29 15:34:41 +00:00
|
|
|
return true;
|
|
|
|
},
|
|
|
|
canUndo: false,
|
|
|
|
editorFocus: true,
|
|
|
|
});
|
2013-09-16 09:03:53 +00:00
|
|
|
|
|
|
|
editor.ui.addButton('Link', {
|
|
|
|
label: 'Link',
|
|
|
|
command: 'link',
|
|
|
|
toolbar: 'links,10',
|
|
|
|
icon: '/website/static/lib/ckeditor/plugins/link/icons/link.png',
|
|
|
|
});
|
|
|
|
editor.ui.addButton('Image', {
|
|
|
|
label: 'Image',
|
|
|
|
command: 'image',
|
|
|
|
toolbar: 'insert,10',
|
|
|
|
icon: '/website/static/lib/ckeditor/plugins/image/icons/image.png',
|
|
|
|
});
|
2013-09-16 09:07:50 +00:00
|
|
|
|
|
|
|
editor.setKeystroke(CKEDITOR.CTRL + 76 /*L*/, 'link');
|
2013-09-06 08:50:45 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
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;
|
2013-08-29 15:34:41 +00:00
|
|
|
|
2013-09-06 08:50:45 +00:00
|
|
|
$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);
|
|
|
|
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSPotentiallyInvalidConstructorUsage
|
2013-09-06 08:50:45 +00:00
|
|
|
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 () {
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSPotentiallyInvalidConstructorUsage
|
2013-09-06 08:50:45 +00:00
|
|
|
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);
|
|
|
|
},
|
|
|
|
});
|
2013-08-29 15:34:41 +00:00
|
|
|
}
|
|
|
|
});
|
2013-09-06 08:50:45 +00:00
|
|
|
|
2013-09-09 09:44:37 +00:00
|
|
|
CKEDITOR.plugins.add('oeref', {
|
|
|
|
requires: 'widget',
|
|
|
|
|
|
|
|
init: function (editor) {
|
|
|
|
editor.widgets.add('oeref', {
|
|
|
|
editables: { text: '*' },
|
|
|
|
|
|
|
|
upcast: function (el) {
|
|
|
|
return el.attributes['data-oe-type'];
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
var editor = new website.EditorBar();
|
|
|
|
var $body = $(document.body);
|
2013-09-10 12:26:46 +00:00
|
|
|
editor.prependTo($body).then(function () {
|
|
|
|
if (location.search.indexOf("unable_editor") >= 0) {
|
|
|
|
editor.edit();
|
|
|
|
}
|
|
|
|
});
|
2013-08-29 10:29:56 +00:00
|
|
|
$body.css('padding-top', '50px'); // Not working properly: editor.$el.outerHeight());
|
|
|
|
};
|
|
|
|
/* ----- 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 button[data-action=cancel]': 'cancel',
|
|
|
|
},
|
|
|
|
container: 'body',
|
|
|
|
customize_setup: function() {
|
|
|
|
var self = this;
|
|
|
|
var view_name = $(document.documentElement).data('view-xmlid');
|
|
|
|
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) {
|
2013-08-29 13:24:42 +00:00
|
|
|
menu.append('<li class="dropdown-header">' + item.name + '</li>');
|
2013-08-29 10:29:56 +00:00
|
|
|
} else {
|
2013-08-29 13:24:42 +00:00
|
|
|
menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="icon-check%s"></strong> %s</a></li>',
|
2013-08-29 10:29:56 +00:00
|
|
|
item.id, item.active ? '' : '-empty', item.name));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Adding Static Menus
|
|
|
|
menu.append('<li class="divider"></li><li><a href="/page/website.themes">Change Theme</a></li>');
|
2013-09-10 10:01:27 +00:00
|
|
|
menu.append('<li class="divider"></li><li><a data-action="ace" href="#">Advanced view editor</a></li>');
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
|
|
|
);
|
|
|
|
});
|
2013-09-09 21:46:26 +00:00
|
|
|
menu.on('click', 'a[data-action!=ace]', function (event) {
|
2013-09-02 15:11:40 +00:00
|
|
|
var view_id = $(event.currentTarget).data('view-id');
|
2013-08-29 10:29:56 +00:00
|
|
|
openerp.jsonRpc('/website/customize_template_toggle', 'call', {
|
|
|
|
'view_id': view_id
|
|
|
|
}).then( function(result) {
|
|
|
|
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'));
|
|
|
|
|
|
|
|
return $.when(
|
|
|
|
this._super.apply(this, arguments),
|
|
|
|
this.rte.prependTo(this.$('#website-top-edit .nav.pull-right'))
|
|
|
|
);
|
|
|
|
},
|
|
|
|
edit: function () {
|
2013-09-04 14:12:47 +00:00
|
|
|
var self = this;
|
2013-08-29 10:29:56 +00:00
|
|
|
this.$buttons.edit.prop('disabled', true);
|
|
|
|
this.$('#website-top-view').hide();
|
|
|
|
this.$('#website-top-edit').show();
|
2013-09-04 08:49:58 +00:00
|
|
|
$('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden");
|
2013-08-29 10:29:56 +00:00
|
|
|
|
2013-09-17 08:57:53 +00:00
|
|
|
this.rte.start_edition();
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
rte_changed: function () {
|
|
|
|
this.$buttons.save.prop('disabled', false);
|
|
|
|
},
|
|
|
|
save: function () {
|
|
|
|
var self = this;
|
2013-09-09 09:44:37 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
observer.disconnect();
|
2013-09-17 08:57:53 +00:00
|
|
|
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)
|
|
|
|
.removeClass('oe_editable cke_focus')
|
|
|
|
.removeAttr('contentEditable')
|
|
|
|
.filter('.oe_dirty')
|
|
|
|
.map(function () {
|
|
|
|
var $el = $(this);
|
2013-09-09 09:44:37 +00:00
|
|
|
// 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 () {
|
2013-09-17 08:57:53 +00:00
|
|
|
return self.saveElement($el)
|
2013-09-09 09:44:37 +00:00
|
|
|
.fail(function () {
|
|
|
|
var data = $el.data();
|
|
|
|
console.error(_.str.sprintf('Could not save %s(%d).%s', data.oeModel, data.oeId, data.oeField));
|
|
|
|
});
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
2013-09-17 08:57:53 +00:00
|
|
|
}).get();
|
2013-08-29 10:29:56 +00:00
|
|
|
return $.when.apply(null, defs).then(function () {
|
2013-09-12 11:51:30 +00:00
|
|
|
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
|
|
|
},
|
2013-09-09 09:44:37 +00:00
|
|
|
/**
|
|
|
|
* Saves an RTE content, which always corresponds to a view section (?).
|
|
|
|
*/
|
2013-09-17 08:57:53 +00:00
|
|
|
saveElement: function ($el) {
|
|
|
|
$el.removeClass('oe_dirty');
|
|
|
|
var markup = $el.prop('outerHTML');
|
2013-09-09 09:51:12 +00:00
|
|
|
return openerp.jsonRpc('/web/dataset/call', 'call', {
|
|
|
|
model: 'ir.ui.view',
|
|
|
|
method: 'save',
|
2013-09-17 08:57:53 +00:00
|
|
|
args: [$el.data('oe-id'), markup,
|
|
|
|
$el.data('oe-xpath') || null,
|
|
|
|
website.get_context()],
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
cancel: function () {
|
2013-09-12 11:51:30 +00:00
|
|
|
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
/* ----- 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'}));
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
init: function (EditorBar) {
|
|
|
|
this.EditorBar = EditorBar;
|
|
|
|
this._super.apply(this, arguments);
|
|
|
|
},
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
start_edition: function ($elements) {
|
|
|
|
var self = this;
|
2013-09-17 08:57:53 +00:00
|
|
|
// create a single editor for the whole page
|
2013-09-18 14:50:28 +00:00
|
|
|
var root = document.getElementById('wrapwrap');
|
2013-09-17 08:57:53 +00:00
|
|
|
root.setAttribute('data-cke-editable', 'true');
|
|
|
|
this.editor = CKEDITOR.inline(root, self._config());
|
|
|
|
this.editor.on('instanceReady', function () {
|
|
|
|
// ckeditor set root to editable, disable it (only inner
|
|
|
|
// sections are editable)
|
|
|
|
// FIXME: are there cases where the whole editor is editable?
|
|
|
|
root.contentEditable = false;
|
|
|
|
|
|
|
|
self.setup_editables(root);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
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)
|
|
|
|
.prop('contentEditable', true)
|
|
|
|
.addClass('oe_editable')
|
2013-08-29 10:29:56 +00:00
|
|
|
.each(function () {
|
|
|
|
var node = this;
|
2013-09-17 08:57:53 +00:00
|
|
|
observer.observe(node, OBSERVER_CONFIG);
|
2013-08-29 10:29:56 +00:00
|
|
|
var $node = $(node);
|
|
|
|
$node.one('content_changed', function () {
|
|
|
|
$node.addClass('oe_dirty');
|
|
|
|
self.trigger('change');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-09-17 08:57:53 +00:00
|
|
|
fetch_editables: function (root) {
|
|
|
|
return $(root).find('[data-oe-model]')
|
|
|
|
// FIXME: propagation should make "meta" blocks non-editable in the first place...
|
|
|
|
.not('link, script')
|
|
|
|
.not('.oe_snippet_editor')
|
|
|
|
.filter(function () {
|
|
|
|
var $this = $(this);
|
|
|
|
// keep view sections and fields which are *not* in
|
|
|
|
// view sections for toplevel editables
|
|
|
|
return $this.data('oe-model') === 'ir.ui.view'
|
|
|
|
|| !$this.closest('[data-oe-model = "ir.ui.view"]').length;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
_current_editor: function () {
|
|
|
|
return CKEDITOR.currentInstance;
|
|
|
|
},
|
|
|
|
_config: function () {
|
2013-09-10 06:57:56 +00:00
|
|
|
// base plugins minus
|
|
|
|
// - magicline (captures mousein/mouseout -> breaks draggable)
|
|
|
|
// - contextmenu & tabletools (disable contextual menu)
|
|
|
|
// - bunch of unused plugins
|
|
|
|
var plugins = [
|
|
|
|
'a11yhelp', 'basicstyles', 'bidi', 'blockquote',
|
|
|
|
'clipboard', 'colorbutton', 'colordialog', 'dialogadvtab',
|
|
|
|
'elementspath', 'enterkey', 'entities', 'filebrowser',
|
|
|
|
'find', 'floatingspace','format', 'htmlwriter', 'iframe',
|
2013-09-16 09:03:53 +00:00
|
|
|
'indentblock', 'indentlist', 'justify',
|
2013-09-10 06:57:56 +00:00
|
|
|
'list', 'pastefromword', 'pastetext', 'preview',
|
|
|
|
'removeformat', 'resize', 'save', 'selectall', 'stylescombo',
|
|
|
|
'tab', 'table', 'templates', 'toolbar', 'undo', 'wysiwygarea'
|
2013-08-29 10:29:56 +00:00
|
|
|
];
|
|
|
|
return {
|
2013-09-12 15:49:57 +00:00
|
|
|
// FIXME
|
|
|
|
language: 'en',
|
2013-08-29 10:29:56 +00:00
|
|
|
// Disable auto-generated titles
|
|
|
|
// FIXME: accessibility, need to generate user-sensible title, used for @title and @aria-label
|
|
|
|
title: false,
|
2013-09-10 06:57:56 +00:00
|
|
|
plugins: plugins.join(','),
|
2013-08-29 10:29:56 +00:00
|
|
|
uiColor: '',
|
2013-09-09 10:42:38 +00:00
|
|
|
// FIXME: currently breaks RTE?
|
2013-09-10 06:57:56 +00:00
|
|
|
// Ensure no config file is loaded
|
|
|
|
customConfig: '',
|
2013-08-29 10:29:56 +00:00
|
|
|
// Disable ACF
|
|
|
|
allowedContent: true,
|
|
|
|
// Don't insert paragraphs around content in e.g. <li>
|
|
|
|
autoParagraph: false,
|
|
|
|
filebrowserImageUploadUrl: "/website/attach",
|
|
|
|
// Support for sharedSpaces in 4.x
|
2013-09-09 09:44:37 +00:00
|
|
|
extraPlugins: 'sharedspace,customdialogs,tablebutton,oeref',
|
2013-08-29 10:29:56 +00:00
|
|
|
// Place toolbar in controlled location
|
|
|
|
sharedSpaces: { top: 'oe_rte_toolbar' },
|
2013-09-11 11:59:37 +00:00
|
|
|
toolbar: [{
|
|
|
|
name: 'clipboard', items: [
|
|
|
|
"Undo"
|
|
|
|
]},{
|
|
|
|
name: 'basicstyles', items: [
|
2013-08-29 10:29:56 +00:00
|
|
|
"Bold", "Italic", "Underline", "Strike", "Subscript",
|
|
|
|
"Superscript", "TextColor", "BGColor", "RemoveFormat"
|
|
|
|
]},{
|
|
|
|
name: 'span', items: [
|
2013-09-13 09:55:32 +00:00
|
|
|
"Link", "Blockquote", "BulletedList",
|
2013-08-29 10:29:56 +00:00
|
|
|
"NumberedList", "Indent", "Outdent"
|
|
|
|
]},{
|
|
|
|
name: 'justify', items: [
|
|
|
|
"JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"
|
|
|
|
]},{
|
|
|
|
name: 'special', items: [
|
2013-09-06 08:50:45 +00:00
|
|
|
"Image", "TableButton"
|
2013-08-29 10:29:56 +00:00
|
|
|
]},{
|
|
|
|
name: 'styles', items: [
|
2013-09-04 13:17:45 +00:00
|
|
|
"Styles"
|
2013-08-29 10:29:56 +00:00
|
|
|
]}
|
|
|
|
],
|
|
|
|
// styles dropdown in toolbar
|
|
|
|
stylesSet: [
|
2013-09-04 13:17:45 +00:00
|
|
|
{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'},
|
2013-08-29 10:29:56 +00:00
|
|
|
// emphasis
|
|
|
|
{name: "Muted", element: 'span', attributes: {'class': 'text-muted'}},
|
|
|
|
{name: "Primary", element: 'span', attributes: {'class': 'text-primary'}},
|
|
|
|
{name: "Warning", element: 'span', attributes: {'class': 'text-warning'}},
|
|
|
|
{name: "Danger", element: 'span', attributes: {'class': 'text-danger'}},
|
|
|
|
{name: "Success", element: 'span', attributes: {'class': 'text-success'}},
|
|
|
|
{name: "Info", element: 'span', attributes: {'class': 'text-info'}}
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2013-08-29 15:34:41 +00:00
|
|
|
website.editor = { };
|
|
|
|
website.editor.Dialog = openerp.Widget.extend({
|
|
|
|
events: {
|
2013-08-30 09:32:11 +00:00
|
|
|
'hidden.bs.modal': 'destroy',
|
2013-09-02 07:52:16 +00:00
|
|
|
'click button.save': 'save',
|
2013-08-29 15:34:41 +00:00
|
|
|
},
|
|
|
|
init: function (editor) {
|
|
|
|
this._super();
|
|
|
|
this.editor = editor;
|
|
|
|
},
|
|
|
|
start: function () {
|
|
|
|
var sup = this._super();
|
|
|
|
this.$el.modal();
|
|
|
|
return sup;
|
|
|
|
},
|
2013-09-02 07:52:16 +00:00
|
|
|
save: function () {
|
2013-09-13 09:55:32 +00:00
|
|
|
this.close();
|
|
|
|
},
|
|
|
|
close: function () {
|
2013-09-02 07:52:16 +00:00
|
|
|
this.$el.modal('hide');
|
|
|
|
},
|
2013-08-29 15:34:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
website.editor.LinkDialog = website.editor.Dialog.extend({
|
|
|
|
template: 'website.editor.dialog.link',
|
|
|
|
events: _.extend({}, website.editor.Dialog.prototype.events, {
|
2013-09-13 08:40:13 +00:00
|
|
|
'change .url-source': function (e) { this.changed($(e.target)); },
|
2013-09-13 09:15:32 +00:00
|
|
|
'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;
|
|
|
|
}
|
|
|
|
|
|
|
|
$target
|
|
|
|
.addClass('active')
|
|
|
|
.siblings().removeClass('active')
|
|
|
|
.addBack().removeClass('has-error');
|
2013-09-13 09:55:32 +00:00
|
|
|
},
|
|
|
|
'click button.remove': 'remove_link',
|
2013-08-29 15:34:41 +00:00
|
|
|
}),
|
|
|
|
init: function (editor) {
|
|
|
|
this._super(editor);
|
2013-09-03 14:32:37 +00:00
|
|
|
// url -> name mapping for existing pages
|
2013-08-29 15:34:41 +00:00
|
|
|
this.pages = Object.create(null);
|
|
|
|
},
|
|
|
|
start: function () {
|
|
|
|
var element;
|
|
|
|
if ((element = this.get_selected_link()) && element.hasAttribute('href')) {
|
|
|
|
this.editor.getSelection().selectElement(element);
|
|
|
|
}
|
|
|
|
this.element = element;
|
2013-09-13 09:55:32 +00:00
|
|
|
if (element) {
|
|
|
|
this.add_removal_button();
|
|
|
|
}
|
2013-08-29 15:34:41 +00:00
|
|
|
|
|
|
|
return $.when(
|
|
|
|
this.fetch_pages().done(this.proxy('fill_pages')),
|
|
|
|
this._super()
|
|
|
|
).done(this.proxy('bind_data'));
|
|
|
|
},
|
2013-09-13 09:55:32 +00:00
|
|
|
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 () {
|
2013-09-16 09:03:53 +00:00
|
|
|
editor.removeStyle(new CKEDITOR.style({
|
|
|
|
element: 'a',
|
|
|
|
type: CKEDITOR.STYLE_INLINE,
|
|
|
|
alwaysRemoveElement: true,
|
|
|
|
}));
|
2013-09-13 09:55:32 +00:00
|
|
|
}, 0);
|
|
|
|
this.close();
|
|
|
|
},
|
2013-08-29 15:34:41 +00:00
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
} else {
|
|
|
|
var selection = this.editor.getSelection();
|
|
|
|
var range = selection.getRanges(true)[0];
|
|
|
|
|
|
|
|
if (range.collapsed) {
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSPotentiallyInvalidConstructorUsage
|
2013-08-29 15:34:41 +00:00
|
|
|
var text = new CKEDITOR.dom.text(label || url);
|
|
|
|
range.insertNode(text);
|
|
|
|
range.selectNodeContents(text);
|
|
|
|
}
|
|
|
|
|
2013-09-09 10:42:38 +00:00
|
|
|
//noinspection JSPotentiallyInvalidConstructorUsage
|
2013-08-29 15:34:41 +00:00
|
|
|
new CKEDITOR.style({
|
|
|
|
type: CKEDITOR.STYLE_INLINE,
|
|
|
|
element: 'a',
|
|
|
|
attributes: attributes,
|
|
|
|
}).applyToRange(range);
|
2013-09-02 10:56:37 +00:00
|
|
|
|
|
|
|
// 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);
|
2013-08-29 15:34:41 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
save: function () {
|
2013-09-03 14:32:37 +00:00
|
|
|
var self = this, _super = this._super.bind(this);
|
2013-09-13 09:15:32 +00:00
|
|
|
var $e = this.$('.list-group-item.active .url-source');
|
|
|
|
var val = $e.val();
|
|
|
|
if (!val) {
|
|
|
|
$e.closest('.form-group').addClass('has-error');
|
|
|
|
return;
|
|
|
|
}
|
2013-08-29 15:34:41 +00:00
|
|
|
|
2013-09-13 09:15:32 +00:00
|
|
|
var done = $.when();
|
2013-09-13 08:40:13 +00:00
|
|
|
if ($e.hasClass('email-address')) {
|
2013-08-29 15:34:41 +00:00
|
|
|
this.make_link('mailto:' + val, false, val);
|
2013-09-13 09:15:32 +00:00
|
|
|
} else if ($e.hasClass('existing')) {
|
2013-09-12 09:15:36 +00:00
|
|
|
self.make_link(val, false, this.pages[val]);
|
2013-09-13 08:40:13 +00:00
|
|
|
} else if ($e.hasClass('pages')) {
|
2013-09-12 09:15:36 +00:00
|
|
|
// Create the page, get the URL back
|
|
|
|
done = $.get(_.str.sprintf(
|
2013-09-13 08:40:13 +00:00
|
|
|
'/pagenew/%s?noredirect', encodeURIComponent(val)))
|
2013-09-12 09:15:36 +00:00
|
|
|
.then(function (response) {
|
2013-09-13 09:15:32 +00:00
|
|
|
self.make_link(response, false, val);
|
2013-09-12 09:15:36 +00:00
|
|
|
});
|
2013-08-29 15:34:41 +00:00
|
|
|
} else {
|
|
|
|
this.make_link(val, this.$('input.window-new').prop('checked'));
|
|
|
|
}
|
2013-09-03 14:32:37 +00:00
|
|
|
done.then(_super);
|
2013-08-29 15:34:41 +00:00
|
|
|
},
|
|
|
|
bind_data: function () {
|
|
|
|
var href = this.element && (this.element.data( 'cke-saved-href')
|
|
|
|
|| this.element.getAttribute('href'));
|
|
|
|
if (!href) { return; }
|
|
|
|
|
|
|
|
var match, $control;
|
|
|
|
if (match = /(mailto):(.+)/.exec(href)) {
|
2013-09-13 08:40:13 +00:00
|
|
|
$control = this.$('input.email-address').val(match[2]);
|
2013-08-29 15:34:41 +00:00
|
|
|
} else if(href in this.pages) {
|
2013-09-13 09:15:32 +00:00
|
|
|
$control = this.$('select.existing').val(href);
|
2013-09-13 08:40:13 +00:00
|
|
|
}
|
|
|
|
if (!$control) {
|
|
|
|
$control = this.$('input.url').val(href);
|
2013-08-29 15:34:41 +00:00
|
|
|
}
|
|
|
|
|
2013-09-13 08:40:13 +00:00
|
|
|
this.changed($control);
|
2013-08-29 15:34:41 +00:00
|
|
|
|
|
|
|
this.$('input.window-new').prop(
|
|
|
|
'checked', this.element.getAttribute('target') === '_blank');
|
|
|
|
},
|
2013-09-13 08:40:13 +00:00
|
|
|
changed: function ($e) {
|
|
|
|
this.$('.url-source').not($e).val('');
|
|
|
|
},
|
2013-08-29 15:34:41 +00:00
|
|
|
/**
|
|
|
|
* 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 () {
|
2013-09-16 09:03:53 +00:00
|
|
|
return get_selected_link(this.editor);
|
2013-08-29 15:34:41 +00:00
|
|
|
},
|
|
|
|
fetch_pages: function () {
|
|
|
|
return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
|
|
|
|
model: 'website',
|
|
|
|
method: 'list_pages',
|
|
|
|
args: [],
|
2013-09-11 16:18:54 +00:00
|
|
|
kwargs: {
|
|
|
|
context: website.get_context()
|
|
|
|
},
|
2013-08-29 15:34:41 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
fill_pages: function (results) {
|
|
|
|
var self = this;
|
2013-09-13 09:15:32 +00:00
|
|
|
var pages = this.$('select.existing')[0];
|
2013-08-29 15:34:41 +00:00
|
|
|
_(results).each(function (result) {
|
2013-09-03 14:32:37 +00:00
|
|
|
self.pages[result.url] = result.name;
|
2013-09-12 09:15:36 +00:00
|
|
|
|
|
|
|
pages.options[pages.options.length] =
|
2013-09-13 09:15:32 +00:00
|
|
|
new Option(result.name, result.url);
|
2013-08-29 15:34:41 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
2013-09-02 07:52:16 +00:00
|
|
|
website.editor.ImageDialog = website.editor.Dialog.extend({
|
|
|
|
template: 'website.editor.dialog.image',
|
|
|
|
events: _.extend({}, website.editor.Dialog.prototype.events, {
|
2013-09-13 08:40:13 +00:00
|
|
|
'change .url-source': function (e) { this.changed($(e.target)); },
|
2013-09-02 07:52:16 +00:00
|
|
|
'click button.filepicker': function () {
|
|
|
|
this.$('input[type=file]').click();
|
|
|
|
},
|
|
|
|
'change input[type=file]': 'file_selection',
|
2013-09-02 13:49:20 +00:00
|
|
|
'change input.url': 'preview_image',
|
2013-09-04 11:32:22 +00:00
|
|
|
'click .existing-attachments a': 'select_existing',
|
2013-09-02 07:52:16 +00:00
|
|
|
}),
|
2013-09-02 10:54:11 +00:00
|
|
|
start: function () {
|
|
|
|
var selection = this.editor.getSelection();
|
|
|
|
var el = selection && selection.getSelectedElement();
|
|
|
|
this.element = null;
|
|
|
|
if (el && el.is('img')) {
|
|
|
|
this.element = el;
|
2013-09-04 11:32:22 +00:00
|
|
|
this.set_image(el.getAttribute('src'));
|
2013-09-02 10:54:11 +00:00
|
|
|
}
|
|
|
|
|
2013-09-04 11:32:22 +00:00
|
|
|
return $.when(
|
|
|
|
this._super(),
|
|
|
|
this.fetch_existing().then(this.proxy('fetched_existing')));
|
2013-09-02 10:54:11 +00:00
|
|
|
},
|
|
|
|
save: function () {
|
|
|
|
var url = this.$('input.url').val();
|
|
|
|
var element, editor = this.editor;
|
|
|
|
if (!(element = this.element)) {
|
|
|
|
element = editor.document.createElement('img');
|
|
|
|
// 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);
|
|
|
|
}
|
|
|
|
element.setAttribute('src', url);
|
2013-09-13 08:40:13 +00:00
|
|
|
this._super();
|
2013-09-02 10:54:11 +00:00
|
|
|
},
|
2013-09-02 07:52:16 +00:00
|
|
|
|
2013-09-04 11:32:22 +00:00
|
|
|
/**
|
|
|
|
* 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();
|
|
|
|
},
|
|
|
|
|
2013-09-02 07:52:16 +00:00
|
|
|
file_selection: function (e) {
|
|
|
|
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');
|
2013-09-04 11:32:22 +00:00
|
|
|
this.set_image(url);
|
2013-09-02 13:49:20 +00:00
|
|
|
},
|
|
|
|
preview_image: function () {
|
|
|
|
var image = this.$('input.url').val();
|
|
|
|
if (!image) { return; }
|
|
|
|
|
2013-09-13 08:40:13 +00:00
|
|
|
this.$('img.image-preview').attr('src', image);
|
2013-09-04 11:32:22 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
fetch_existing: function () {
|
|
|
|
// FIXME: lazy load attachments?
|
|
|
|
return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
|
|
|
|
model: 'ir.attachment',
|
|
|
|
method: 'search_read',
|
|
|
|
args: [],
|
|
|
|
kwargs: {
|
|
|
|
fields: ['name'],
|
|
|
|
domain: [['res_model', '=', 'ir.ui.view']],
|
|
|
|
order: 'name',
|
2013-09-11 16:18:54 +00:00
|
|
|
context: website.get_context(),
|
2013-09-04 11:32:22 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
fetched_existing: function (records) {
|
|
|
|
// Create rows of 3 records
|
|
|
|
var rows = _(records).chain()
|
|
|
|
.groupBy(function (_, index) { return Math.floor(index / 3); })
|
|
|
|
.values()
|
|
|
|
.value();
|
|
|
|
this.$('.existing-attachments').replaceWith(
|
|
|
|
openerp.qweb.render('website.editor.dialog.image.existing', {rows: rows}));
|
|
|
|
},
|
|
|
|
select_existing: function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.set_image(e.currentTarget.getAttribute('href'));
|
2013-09-02 07:52:16 +00:00
|
|
|
},
|
|
|
|
});
|
2013-08-29 15:34:41 +00:00
|
|
|
|
2013-09-16 09:03:53 +00:00
|
|
|
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);
|
|
|
|
return editor.elementPath(range.getCommonAncestor())
|
|
|
|
.contains('a');
|
|
|
|
}
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
|
|
|
|
var Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
|
2013-09-04 14:12:47 +00:00
|
|
|
var OBSERVER_CONFIG = {
|
|
|
|
childList: true,
|
|
|
|
attributes: true,
|
|
|
|
characterData: true,
|
|
|
|
subtree: true,
|
|
|
|
attributeOldValue: true,
|
|
|
|
};
|
2013-08-29 10:29:56 +00:00
|
|
|
var observer = new Observer(function (mutations) {
|
2013-09-04 11:32:22 +00:00
|
|
|
// 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, ...)
|
2013-08-29 10:29:56 +00:00
|
|
|
_(mutations).chain()
|
2013-09-09 10:42:38 +00:00
|
|
|
.filter(function (m) {
|
2013-08-29 10:29:56 +00:00
|
|
|
switch(m.type) {
|
2013-09-04 14:07:44 +00:00
|
|
|
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';
|
2013-08-29 10:29:56 +00:00
|
|
|
case 'childList':
|
|
|
|
// <br type="_moz"> appears when focusing RTE in FF, ignore
|
|
|
|
return m.addedNodes.length !== 1 || m.addedNodes[0].nodeName !== 'BR';
|
|
|
|
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'); })
|
|
|
|
});
|
|
|
|
})();
|