From 3a8f51385d83c4256c339798614bf421fde948e3 Mon Sep 17 00:00:00 2001 From: Xavier Morel Date: Mon, 29 Jul 2013 16:38:42 +0200 Subject: [PATCH] [ADD] toolbar subgroups, hooks for styling lists correctly, more widgets bzr revid: xmo@openerp.com-20130729143842-k4r7e42hhvw1y1xu --- addons/website/static/src/css/website.css | 20 +++ addons/website/static/src/css/website.sass | 16 ++- addons/website/static/src/js/website.js | 152 +++++++++++++++++---- addons/website/static/src/xml/website.xml | 8 ++ 4 files changed, 167 insertions(+), 29 deletions(-) diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index fb0c2d081b8..e11bd754a05 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -129,6 +129,26 @@ color: white; } +.oe_website_editorbar .oe_rte_toolbar div.dropdown { + display: inline-block; +} +.oe_website_editorbar .oe_rte_toolbar div.dropdown li { + display: list-item; +} +.oe_website_editorbar .oe_rte_toolbar button { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list { + padding-right: 3px; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after { + content: "\F0D7"; + padding-left: 6px; +} + /* }}} */ .oe_editable:focus { outline: #80b5f2 solid 5px !important; diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 8e17378851b..9863264d692 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -218,8 +218,22 @@ text-shadow: black 0px 0px 3px color: white +.oe_website_editorbar .oe_rte_toolbar + div.dropdown + display: inline-block + li + display: list-item - + button + font-family: FontAwesome + font-weight: normal + font-style: normal + text-decoration: inherit + &.oe_button_list + padding-right: 3px + &:after + content: "\F0D7" + padding-left: 6px /* }}} */ diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index 449d4fc14ab..527a777a4be 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -116,29 +116,127 @@ instance.website.EditorBar = instance.web.Widget.extend({ }, }); +instance.website.Action = instance.web.Widget.extend({ + tagName: 'button', + attributes: { + type: 'button', + }, + events: { click: 'perform' }, + init: function (parent, name) { + this._super(parent); + this.name = name; + }, + start: function () { + this.$el.text(this.name); + return this._super(); + }, + /** + * Executes action + */ + perform: null +}); +var Style = instance.website.Style = instance.website.Action.extend({ + init: function (parent, name, style) { + this._super(parent, name); + this.style = style; + }, + perform: function () { + this.getParent().with_editor(function (editor) { + editor.applyStyle(new CKEDITOR.style(this.style)) + }.bind(this)); + }, +}); +var Command = instance.website.Command = instance.website.Action.extend({ + init: function (parent, name, command) { + this._super(parent, name); + this.command = command; + }, + perform: function () { + this.getParent().with_editor(function (editor) { + switch (typeof this.command) { + case 'string': editor.execCommand(this.command); break; + case 'function': this.command(editor); break; + } + }.bind(this)); + }, +}); +var Group = instance.website.ActionGroup = instance.website.Action.extend({ + template: 'Website.ActionGroup', + events: { 'click > button': 'perform' }, + instances: [], + init: function (parent, name, actions) { + this._super(parent, name); + this.actions = _(actions).map(this.getParent().proxy('init_command')); + }, + start: function () { + this.instances.push(this); + var $ul = this.$('ul'); + return $.when.apply(null, _(this.actions).map(function (action) { + var $li = $('
  • ').appendTo($ul); + return action.appendTo($li); + })); + }, + destroy: function () { + this.instances = _(this.instances).without(this); + return this._super(); + }, + perform: function () { + this.getParent().with_editor(function () { + _(this.instances).chain() + .without(this) + .pluck('$el') + .invoke('removeClass', 'open'); + // JS part of bootstrap dropdown does really weird stuff which + // interacts quite badly with the RTE thing, so bypass it + this.$el.toggleClass('open'); + }.bind(this), false); + return false; + }, +}); + instance.website.RTE = instance.web.Widget.extend({ tagName: 'li', - className: 'oe_right', + className: 'oe_right oe_rte_toolbar', commands: [ - {name: _lt('Bold'), command: 'bold'}, - {name: _lt('Italic'), command: 'italic'}, - {name: _lt('Underline'), command: 'underline'}, - {name: _lt('Strikethrough'), command: 'strike'}, - {name: _lt('H1'), style: { element: 'h1' }}, - {name: _lt('H2'), style: { element: 'h2', }}, - {name: _lt('H3'), style: { element: 'h3', }}, - {name: _lt('H4'), style: { element: 'h4', }}, - {name: _lt("Red"), style: { element: 'span', styles: { color: 'red' } }} + [Command, "\uf032", 'bold'], + [Command, "\uf033", 'italic'], + [Command, "\uf0cd", 'underline'], + [Command, "\uf0cc", 'strike'], + [Command, "\uf12b", 'superscript'], + [Command, "\uf12c", 'subscript'], + [Group, "\uf0ca", [ + [Command, "\uf0ca", 'bulletedlist'], + [Command, "\uf0cb", 'numberedlist'] + ]], + [Group, _lt("Heading"), [ + [Style, _lt('H1'), { element: 'h1' }], + [Style, _lt('H2'), { element: 'h2', }], + [Style, _lt('H3'), { element: 'h3', }], + [Style, _lt('H4'), { element: 'h4', }], + [Style, _lt('H5'), { element: 'h5', }], + [Style, _lt('H6'), { element: 'h6', }] + ]] ], // editor.ui.items -> possible commands &al // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'})); start: function () { - var self = this; this.$el.hide(); - _(this.commands).foldl(function (jq, command) { - return jq.add(self.button_for(command)); - }, $()).appendTo(this.$el); + return $.when.apply( + null, _(this.commands).map(this.proxy('start_command'))); + }, + init_command: function (command) { + var type = command[0], args = command.slice(1); + args.unshift(this); + var F = function (args) { + return type.apply(this, args); + }; + F.prototype = type.prototype; + + return new F(args); + }, + start_command: function (command) { + return this.init_command(command).appendTo(this.$el); }, start_edition: function ($elements) { var self = this; @@ -154,20 +252,18 @@ instance.website.RTE = instance.web.Widget.extend({ }); }, - button_for: function (command) { - var self = this; - return $('
    • + +
    + +
    +