odoo.define('web_editor.rte.summernote', function (require) {
'use strict';
var Class = require('web.Class');
const concurrency = require('web.concurrency');
var core = require('web.core');
// Use the top window's core.bus for dialog events so that they take the whole window
// instead of being confined to an iframe. This means that the event triggered on
// the bus by summernote in an iframe will be caught by the wysiwyg's SummernoteManager
// outside the iframe.
const topBus = window.top.odoo.__DEBUG__.services['web.core'].bus;
const {ColorpickerWidget} = require('web.Colorpicker');
var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
var mixins = require('web.mixins');
var fonts = require('wysiwyg.fonts');
var rte = require('web_editor.rte');
var ServicesMixin = require('web.ServicesMixin');
var weWidgets = require('wysiwyg.widgets');
var _t = core._t;
// Summernote Lib (neek change to make accessible: method and object)
var dom = $.summernote.core.dom;
var range = $.summernote.core.range;
var eventHandler = $.summernote.eventHandler;
var renderer = $.summernote.renderer;
// Summernote uses execCommand and, worth, obsolete queryCommandState function
// to customize the edited content. Here we try to hack the function to solve
// some problems by making the DOM and style easier to understand for the
// base function for the duration of their executions. This won't obviously
// solves all problems but this is an improvement while waiting for the new
// Odoo editor coming in future versions.
function protectCommand(callback) {
return function () {
var rng = range.create();
var $sc = (rng && rng.sc) ? $(rng.sc).parents(':o_editable').last() : $();
var $ec = (rng && rng.ec) ? $(rng.ec).parents(':o_editable').last() : $();
$sc.addClass('o_we_command_protector');
$ec.addClass('o_we_command_protector');
var restore = function () {
$sc.removeClass('o_we_command_protector');
$ec.removeClass('o_we_command_protector');
};
var result;
try {
result = callback.apply(this, arguments);
} catch (err) {
restore();
throw err;
}
restore();
return result;
};
}
document.execCommand = protectCommand(document.execCommand);
document.queryCommandState = protectCommand(document.queryCommandState);
var tplButton = renderer.getTemplate().button;
var tplIconButton = renderer.getTemplate().iconButton;
var tplDropdown = renderer.getTemplate().dropdown;
const processAndApplyColor = function (target, eventName, color, preview) {
if (!color) {
color = 'inherit';
} else if (!ColorpickerWidget.isCSSColor(color)) {
color = (eventName === "foreColor" ? 'text-' : 'bg-') + color;
}
var layoutInfo = dom.makeLayoutInfo(target);
$.summernote.pluginEvents[eventName](undefined, eventHandler.modules.editor, layoutInfo, color, preview);
};
// Update and change the popovers content, and add history button
renderer.createPalette = function ($container, options) {
const $dropdownContent = $container.find(".colorPalette");
// The editor's root widget can be website or web's root widget and cannot be properly retrieved...
const parent = odoo.__DEBUG__.services['root.widget'];
_.each($dropdownContent, elem => {
const eventName = elem.dataset.eventName;
let colorpicker = null;
const mutex = new concurrency.MutexedDropPrevious();
const $dropdown = $(elem).closest('.btn-group, .dropdown');
let manualOpening = false;
// Prevent dropdown closing on colorpicker click
$dropdown.on('hide.bs.dropdown', ev => {
return !(ev.clickEvent && ev.clickEvent.originalEvent && ev.clickEvent.originalEvent.__isColorpickerClick);
});
$dropdown.on('show.bs.dropdown', () => {
if (manualOpening) {
return true;
}
mutex.exec(() => {
const oldColorpicker = colorpicker;
const hookEl = oldColorpicker ? oldColorpicker.el : elem;
const r = range.create();
const targetNode = r.sc;
const targetElement = targetNode.nodeType === Node.ELEMENT_NODE ? targetNode : targetNode.parentNode;
colorpicker = new ColorPaletteWidget(parent, {
excluded: ['transparent_grayscale'],
$editable: rte.Class.prototype.editable(), // Our parent is the root widget, we can't retrieve the editable section from it...
selectedColor: $(targetElement).css(eventName === "foreColor" ? 'color' : 'backgroundColor'),
});
colorpicker.on('custom_color_picked color_picked', null, ev => {
processAndApplyColor(ev.data.target, eventName, ev.data.color);
});
colorpicker.on('color_hover color_leave', null, ev => {
processAndApplyColor(ev.data.target, eventName, ev.data.color, true);
});
colorpicker.on('enter_key_color_colorpicker', null, () => {
$dropdown.children('.dropdown-toggle').dropdown('hide');
});
return colorpicker.replace(hookEl).then(() => {
if (oldColorpicker) {
oldColorpicker.destroy();
}
manualOpening = true;
$dropdown.children('.dropdown-toggle').dropdown('show');
manualOpening = false;
});
});
return false;
});
});
};
var fn_tplPopovers = renderer.tplPopovers;
renderer.tplPopovers = function (lang, options) {
var $popover = $(fn_tplPopovers.call(this, lang, options));
var $imagePopover = $popover.find('.note-image-popover');
var $linkPopover = $popover.find('.note-link-popover');
var $airPopover = $popover.find('.note-air-popover');
//////////////// image popover
// add center button for images
$(tplIconButton('fa fa-align-center', {
title: _t('Center'),
event: 'floatMe',
value: 'center'
})).insertAfter($imagePopover.find('[data-event="floatMe"][data-value="left"]'));
$imagePopover.find('button[data-event="removeMedia"]').parent().remove();
$imagePopover.find('button[data-event="floatMe"][data-value="none"]').remove();
// padding button
var $padding = $('
');
$padding.insertBefore($imagePopover.find('.btn-group:first'));
var dropdown_content = [
''+_t('None')+' '+_t('Small')+' '+_t('Medium')+' '+_t('Large')+' '+_t('Xl')+'
').insertAfter($button.parent());
$(tplIconButton('fa fa-refresh', {
title: _t('Spin'),
event: 'imageShape',
value: 'fa-spin'
})).appendTo($spin);
// resize for fa
var $resizefa = $('
')
.insertAfter($imagePopover.find('.btn-group:has([data-event="resize"])'));
for (var size=1; size<=5; size++) {
$(tplButton(''+size+'x ', {
title: size+"x",
event: 'resizefa',
value: size+''
})).appendTo($resizefa);
}
var $colorfa = $airPopover.find('.note-color').clone();
$colorfa.find(".dropdown-menu").css('min-width', '172px');
$resizefa.after($colorfa);
// show dialog box and delete
var $imageprop = $('
');
$imageprop.appendTo($imagePopover.find('.popover-body'));
$(tplIconButton('fa fa-file-image-o', {
title: _t('Edit'),
event: 'showImageDialog'
})).appendTo($imageprop);
$(tplIconButton('fa fa-trash-o', {
title: _t('Remove'),
event: 'delete'
})).appendTo($imageprop);
$(tplIconButton('fa fa-crop', {
title: _t('Crop Image'),
event: 'cropImage',
})).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-thumbnail"]'));
$imagePopover.find('.popover-body').append($airPopover.find(".note-history").clone());
$imagePopover.find('[data-event="showImageDialog"]').before($airPopover.find('[data-event="showLinkDialog"]').clone());
var $alt = $('
');
$alt.appendTo($imagePopover.find('.popover-body'));
$alt.append('' + _t('Description') + ':