odoo.define('web_editor.rte.summernote', function (require) { 'use strict'; var core = require('web.core'); var ajax = require('web.ajax'); var base = require('web_editor.base'); var widgets = require('web_editor.widget'); var rte = require('web_editor.rte'); var QWeb = core.qweb; var _t = core._t; ////////////////////////////////////////////////////////////////////////////////////////////////////////// ajax.jsonRpc('/web/dataset/call', 'call', { 'model': 'ir.ui.view', 'method': 'read_template', 'args': ['web_editor.colorpicker', base.get_context()] }).done(function (data) { QWeb.add_template(data); }); ////////////////////////////////////////////////////////////////////////////////////////////////////////// /* 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; var options = $.summernote.options; var tplButton = renderer.getTemplate().button; var tplIconButton = renderer.getTemplate().iconButton; var tplDropdown = renderer.getTemplate().dropdown; ////////////////////////////////////////////////////////////////////////////////////////////////////////// /* update and change the popovers content, and add history button */ var fn_createPalette = renderer.createPalette; renderer.createPalette = function ($container, options) { fn_createPalette.call(this, $container, options); if (!QWeb.has_template('web_editor.colorpicker')) { return; } var $clpicker = $(QWeb.render('web_editor.colorpicker')); $container.find('.colorpicker').each(function (i, picker) { var $picker = $(picker); var $sections = $clpicker.find('.o_colorpicker_section').clone(true); var $toggles = $picker.find('.o_colorpicker_section_menu'); var $tabs = $picker.find('.o_colorpicker_section_tabs'); var $defaultToggle = $toggles.find('li'); var $defaultTab = $tabs.find('.tab-pane'); var newDefaultID = _.uniqueId(); $defaultToggle.children('a').attr('href', $defaultToggle.children('a').attr('href') + newDefaultID); $defaultTab.attr('id', $defaultTab.attr('id') + newDefaultID); if ($sections.length) { $sections.each(function () { var $section = $(this); var id = 'o_palette_' + $section.data('name') + _.uniqueId(); var $li = $('
  • ') .append($('', {href: '#' + id}) .append($('', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''}))); $defaultToggle.before($li); $defaultTab.before($section.addClass('tab-pane').attr('id', id)); }); } else { var id = 'o_palette_other' + _.uniqueId(); var $li = $('
  • ') .append($('', {href: '#' + id, 'aria-controls': id}) .append($('', {'class': 'fa fa-magic'}))); $toggles.prepend($li); $tabs.prepend($('
    ', {'class': 'tab-pane', id: id}).append($clpicker.clone(true))); } $toggles.find('li:first-child').addClass('active'); $tabs.find('div:first-child').addClass('active'); $toggles.on('click mouseover', '> li > a', function (e) { e.preventDefault(); e.stopPropagation(); $(this).tab('show'); }); }); var $bg = $container.find('.o_background_toggle .dropdown-menu button'); var $fore = $container.find('.o_foreground_toggle .dropdown-menu button'); $bg.each(function () { var $el = $(this); var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('bg-' + $el.data('color')); $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className); }); $fore.each(function () { var $el = $(this); var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('text-' + $el.data('color')); $el.attr('data-event', 'foreColor').attr('data-value', className).addClass(className); }); }; 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'); if (window === window.top) { $popover.children().addClass("hidden-xs"); } //////////////// image popover // add center button for images var $centerbutton = $(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')+'
  • ', ]; var $button = $(tplIconButton('fa fa-plus-square-o', { title: _t('Padding'), dropdown: tplDropdown(dropdown_content) })).appendTo($padding); // circle, boxed... options became toggled $imagePopover.find('[data-event="imageShape"]:not([data-value])').remove(); var $button = $(tplIconButton('fa fa-sun-o', { title: _t('Shadow'), event: 'imageShape', value: 'shadow' })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]')); // add spin for fa var $spin = $('