From 70b1a931086910e0c2900b28832e5f179b40ed63 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Tue, 19 Mar 2024 14:10:03 +0100 Subject: [PATCH] CompactComposer support older browsers and a different idea to modify the dialog for #1498 --- plugins/compact-composer/index.php | 6 +- .../compact-composer/js/CompactComposer.js | 67 +++++++++---------- .../templates/PopupsCompactCompose.html | 27 ++++---- 3 files changed, 49 insertions(+), 51 deletions(-) diff --git a/plugins/compact-composer/index.php b/plugins/compact-composer/index.php index c218a9e6a..d87e49cca 100644 --- a/plugins/compact-composer/index.php +++ b/plugins/compact-composer/index.php @@ -6,15 +6,15 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin NAME = 'Compact Composer', AUTHOR = 'Sergey Mosin', URL = 'https://github.com/the-djmaze/snappymail/pull/1466', - VERSION = '1.0.2', - RELEASE = '2024-02-23', + VERSION = '1.0.3-beta', + RELEASE = '2024-03-19', REQUIRED = '2.34.0', LICENSE = 'AGPL v3', DESCRIPTION = 'WYSIWYG editor with a compact toolbar'; public function Init(): void { - $this->addTemplate('templates/PopupsCompactCompose.html'); +// $this->addTemplate('templates/PopupsCompactCompose.html'); $this->addCss('css/composer.css'); $this->addJs('js/squire-raw.js'); $this->addJs('js/parsel.js'); diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js index 75d9789e5..67e75abc2 100644 --- a/plugins/compact-composer/js/CompactComposer.js +++ b/plugins/compact-composer/js/CompactComposer.js @@ -14,34 +14,26 @@ const doc = win.document; - // If a user (or admin) selected the CompactComposer we need to - // replace PopupsCompose template with PopupsCompactCompose template. - // -- - // This might break some plugins if they query/change PopupsCompose template - // before this code is called. They should instead listen for - // 'rl-view-model.create' to work properly. - if (rl.settings.get('editorWysiwyg') === 'CompactComposer') { - const compactTemplate = doc.getElementById('PopupsCompactCompose'); - if (!compactTemplate) { - console.error('CompactComposer: PopupsCompactCompose template not found'); - return; + addEventListener('rl-view-model', e => { + const vm = e.detail; + if ('PopupsCompose' === vm.viewModelTemplateID && rl.settings.get('editorWysiwyg') === 'CompactComposer') { + vm.querySelector('.tabs label[for="tab-body"]').dataset.bind = "visible: canMailvelope"; + // Now move the attachments tab to the bottom of the screen + const + input = vm.querySelector('.tabs input[value="attachments"]'), + label = vm.querySelector('.tabs label[for="tab-attachments"]'), + area = vm.querySelector('.tabs .attachmentAreaParent'); + input.remove(); + label.remove(); + area.remove(); + area.classList.add('compact'); + area.querySelector('.b-attachment-place').dataset.bind = "visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}"; + vm.viewModelDom.append(area); + // There is a better way to do this probably, + // but we need this for drag and drop to work + e.detail.attachmentsArea = e.detail.bodyArea; } - const originalTemplate = doc.getElementById('PopupsCompose'); - if (originalTemplate) { - originalTemplate.id = 'PopupsCompose_replaced'; - } else { - console.warn('CompactComposer: PopupsCompose template not found'); - } - compactTemplate.id = 'PopupsCompose'; - - addEventListener('rl-view-model.create', e => { - if (e.detail.viewModelTemplateID === 'PopupsCompose') { - // There is a better way to do this probably, - // but we need this for drag and drop to work - e.detail.attachmentsArea = e.detail.bodyArea; - } - }); - } + }); const removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE', @@ -155,7 +147,7 @@ this.toolbar = toolbar; toolbar.className = 'squire-toolbar btn-toolbar'; - const actions = this.#makeActions(squire, toolbar); + const actions = this.makeActions(squire, toolbar); this.squire.addEventListener('willPaste', pasteSanitizer); this.squire.addEventListener('pasteImage', (e) => { @@ -300,10 +292,11 @@ * @param {Squire} squire * @param {HTMLDivElement} toolbar * @returns {Array} + * @private */ - #makeActions(squire, toolbar) { + makeActions(squire, toolbar) { - const clr = this.#makeClr(); + const clr = this.makeClr(); const doClr = name => input => { // https://github.com/the-djmaze/snappymail/issues/826 clr.style.left = (input.offsetLeft + input.parentNode.offsetLeft) + 'px'; @@ -640,11 +633,14 @@ actions: actions } })); - this.indicators = this.#addActionsToParent(actions, toolbar); + this.indicators = this.addActionsToParent(actions, toolbar); return actions; } - #makeClr() { + /** + * @private + */ + makeClr() { /**@type {HTMLInputElement} clr*/ const clr = createElement('input'); clr.type = 'color'; @@ -675,8 +671,9 @@ /** * @param {Array} items * @param {HTMLElement} parent + * @private */ - #addActionsToParent(items, parent) { + addActionsToParent(items, parent) { const indicators = []; items.forEach(item => { let element, event; @@ -688,7 +685,7 @@ group.className += ' squire-html-mode-item'; } if (item.items) { - indicators.push(...this.#addActionsToParent(item.items, group)); + indicators.push(...this.addActionsToParent(item.items, group)); } parent.append(group); return indicators; @@ -720,7 +717,7 @@ menu.setAttribute('role', 'menu'); if (item.items) { - indicators.push(...this.#addActionsToParent(item.items, menu)); + indicators.push(...this.addActionsToParent(item.items, menu)); } menuWrap.appendChild(menu); parent.append(menuWrap); diff --git a/plugins/compact-composer/templates/PopupsCompactCompose.html b/plugins/compact-composer/templates/PopupsCompactCompose.html index 7c05c875f..01aafa6af 100644 --- a/plugins/compact-composer/templates/PopupsCompactCompose.html +++ b/plugins/compact-composer/templates/PopupsCompactCompose.html @@ -103,7 +103,7 @@ + data-i18n="GLOBAL/TO"> @@ -146,7 +146,7 @@
@@ -156,24 +156,25 @@
+ @@ -183,7 +184,7 @@
+ data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC">