Muc-app: some refactoring.

conversejs/custom/shared/components/muc-app/index.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { CustomElement } from 'shared/components/element.js'
+import { api, _converse } from '@converse/headless'
+import './styles/muc-app.scss'
+
+/**
+ * Base class for MUC App custom elements (task app, notes app, ...).
+ * This is an abstract class, should not be called directly.
+ */
+export class MUCApp extends CustomElement {
+  enableSettingName = undefined // must be overloaded
+  sessionStorangeShowKey = undefined // must be overloaded
+
+  static get properties () {
+    return {
+      model: { type: Object, attribute: true }, // mucModel
+      show: { type: Boolean, attribute: false }
+    }
+  }
+
+  async initialize () {
+    this.classList.add('livechat-converse-muc-app')
+    this.show = this.enableSettingName &&
+      api.settings.get(this.enableSettingName) &&
+      this.sessionStorangeShowKey &&
+      (window.sessionStorage?.getItem?.(this.sessionStorangeShowKey) === '1')
+
+    // we listen for livechatSizeChanged event,
+    // and close all apps except the first if small or medium width.
+    // Note: this will also be triggered when we first open the page
+    this.listenTo(_converse, 'livechatSizeChanged', () => {
+      if (!this.show || !api.livechat_size?.width_is(['small', 'medium'])) {
+        return
+      }
+      // are we the first opened app?
+      for (const el of document.querySelectorAll('.livechat-converse-muc-app')) {
+        if (el === this) { break }
+        if (!el.show) { continue }
+        console.debug('The livechat size is small or medium, there is already an opened app, so closing myself', this)
+        // ok, there is already an opened app.
+        this.toggleApp() // we know we are open
+        break
+      }
+    })
+  }
+
+  render () { // must be overloaded.
+    return ''
+  }
+
+  updated () {
+    if (this.innerText.trim() === '') {
+      this.classList.add('hidden') // we must do this, otherwise will have CSS side effects
+    } else {
+      this.classList.remove('hidden')
+    }
+
+    super.updated()
+  }
+
+  toggleApp () {
+    this.show = !this.show
+    if (this.sessionStorangeShowKey) {
+      window.sessionStorage?.setItem?.(this.sessionStorangeShowKey, this.show ? '1' : '')
+    }
+
+    if (
+      this.show &&
+      api.livechat_size?.width_is(['small', 'medium'])
+    ) {
+      // When showing an App, if the screen width is small or medium, we hide the others.
+      this._closeOtherApps()
+    }
+  }
+
+  _closeOtherApps () {
+    document.querySelectorAll('.livechat-converse-muc-app').forEach((el) => {
+      if (el !== this && el.show) {
+        console.debug('Closing another app, because livechat width is small or medium', el)
+        el.toggleApp()
+      }
+    })
+  }
+}

conversejs/custom/shared/components/muc-app/styles/muc-app.scss

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.conversejs {
+  .livechat-converse-muc-app {
+    border: var(--occupants-border-left);
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 0 1 100%;
+    padding: var(--occupants-padding);
+
+    .livechat-converse-muc-app-header {
+      column-gap: 0.25em;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      font-family: var(--heading-font);
+      padding-left: 0;
+      margin-right: 1em;
+      width: 100%;
+
+      h5 {
+        color: var(--groupchats-header-color-dark);
+        display: inline;
+        flex-grow: 2;
+      }
+
+      .livechat-converse-muc-app-close {
+        background: unset;
+        border: 0;
+      }
+    }
+
+    .livechat-converse-muc-app-body {
+      padding-right: 2em; // let some place for the scrollbar.
+      overflow-y: auto;
+    }
+  }
+
+  &[livechat-converse-root-width="small"],
+  &[livechat-converse-root-width="medium"] {
+    converse-muc-chatarea .livechat-converse-muc-app:not(.hidden) ~ * {
+      // on small and medium width, we hide all subsequent siblings of the app
+      // (when app is not hidden)
+      display: none !important;
+    }
+  }
+}

conversejs/custom/shared/components/muc-app/templates/muc-app.js

@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export function tplMUCApp (el, i18nTitle, helpUrl, i18nHelp, content) {
+  return html`
+    <div class="livechat-converse-muc-app-header">
+      <h5>${i18nTitle}</h5>
+      <a href="${helpUrl}" target="_blank"><converse-icon
+          class="fa fa-circle-question"
+          size="1em"
+          title="${i18nHelp}"
+      ></converse-icon></a>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
+          <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <div class="livechat-converse-muc-app-body">
+      ${content}
+    </div>`
+}