diff --git a/addons/website/static/src/img/bglink.png b/addons/website/static/src/img/bglink.png new file mode 100644 index 00000000000..e25f81c8414 Binary files /dev/null and b/addons/website/static/src/img/bglink.png differ diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index cce7b09644a..cee4409240d 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -218,6 +218,154 @@ } }); + 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 = ['