diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js index 438c9d9a336..dc27e0182f5 100644 --- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js @@ -47,6 +47,8 @@ import { unwrapContents, peek, rightPos, + getAdjacentPreviousSiblings, + getAdjacentNextSiblings, } from './utils/utils.js'; import { editorCommands } from './commands/commands.js'; import { Powerbox } from './powerbox/Powerbox.js'; @@ -1721,6 +1723,30 @@ export class OdooEditor extends EventTarget { this.commandbarTablePicker.show(); }, }, + { + groupName: 'Widgets', + title: '3 Stars', + description: 'Insert a rating over 3 stars.', + fontawesome: 'fa-star-o', + callback: () => { + let html = ''; + html += Array(3).fill().map(() => '').join(''); + html += ''; + this.execCommand('insertHTML', html); + }, + }, + { + groupName: 'Widgets', + title: '5 Stars', + description: 'Insert a rating over 5 stars.', + fontawesome: 'fa-star', + callback: () => { + let html = ''; + html += Array(5).fill().map(() => '').join(''); + html += ''; + this.execCommand('insertHTML', html); + }, + }, ]; this.commandBar = new Powerbox({ editable: this.editable, @@ -2524,6 +2550,29 @@ export class OdooEditor extends EventTarget { this.historyStep(); } } + + // handle stars + if (node.nodeType === Node.ELEMENT_NODE && node.className.includes('fa-star') && + node.parentElement && node.parentElement.className.includes('o_stars')) { + const previousStars = getAdjacentPreviousSiblings(node, sib => ( + sib.nodeType === Node.ELEMENT_NODE && sib.className.includes('fa-star') + )); + const nextStars = getAdjacentNextSiblings(node, sib => ( + sib.nodeType === Node.ELEMENT_NODE && sib.className.includes('fa-star') + )); + if (nextStars.length || previousStars.length) { + const shouldToggleOff = node.classList.contains('fa-star') && + (!nextStars[0] || !nextStars[0].classList.contains('fa-star')); + for (const star of [...previousStars, node]) { + star.classList.toggle('fa-star-o', shouldToggleOff); + star.classList.toggle('fa-star', !shouldToggleOff); + }; + for (const star of nextStars) { + star.classList.toggle('fa-star-o', true); + star.classList.toggle('fa-star', false); + }; + } + } } _onDocumentKeydown(ev) { diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 2af44a87004..6d84b6ed568 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -159,6 +159,11 @@ ol > li.o_indent, ul > li.o_indent { } } +// Stars widget +.o_stars .fa.fa-star { + color: gold; +} + // Medias img.o_we_custom_image { // Images added with the editor are .img-fluid by default but should