From fb054c40beefc2781428b865a6bf119098f59e51 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 28 Feb 2023 08:35:29 +0100 Subject: [PATCH] Experimenting with avoiding importing the `converse` global --- src/headless/log.js | 4 +-- src/headless/shared/api/public.js | 3 +- src/headless/utils/core.js | 22 ++++++------- src/plugins/modal/base.js | 20 ++++++------ src/plugins/rosterview/modals/add-contact.js | 18 +++++------ src/shared/registry.js | 2 +- src/utils/html.js | 34 ++++++++++++++------ 7 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/headless/log.js b/src/headless/log.js index 20bdfdba7..79bcaf97f 100644 --- a/src/headless/log.js +++ b/src/headless/log.js @@ -22,7 +22,7 @@ const logger = Object.assign({ * The log namespace * @namespace log */ -const log = { +export default { /** * The the log-level, which determines how verbose the logging is. @@ -95,5 +95,3 @@ const log = { this.log(message, 'fatal', style); } } - -export default log; diff --git a/src/headless/shared/api/public.js b/src/headless/shared/api/public.js index 743c28756..eb8cceb3c 100644 --- a/src/headless/shared/api/public.js +++ b/src/headless/shared/api/public.js @@ -13,6 +13,7 @@ import { Strophe, $build, $iq, $msg, $pres } from 'strophe.js/src/strophe'; import { html } from 'lit'; import { initAppSettings } from '../settings/utils.js'; import { sprintf } from 'sprintf-js'; +import { stx } from '../../utils/stanza.js'; import { cleanup, @@ -199,7 +200,7 @@ export const converse = Object.assign(window.converse || {}, { log, sizzle, sprintf, - stx: u.stx, + stx, u, } }); diff --git a/src/headless/utils/core.js b/src/headless/utils/core.js index ae4b8a591..9664b74c5 100644 --- a/src/headless/utils/core.js +++ b/src/headless/utils/core.js @@ -8,14 +8,20 @@ import _converse from '@converse/headless/shared/_converse.js'; import compact from "lodash-es/compact"; import isObject from "lodash-es/isObject"; import last from "lodash-es/last"; -import log from '@converse/headless/log.js'; +import log from '../log.js'; import sizzle from "sizzle"; import { Model } from '@converse/skeletor/src/model.js'; import { Strophe } from 'strophe.js/src/strophe.js'; import { getOpenPromise } from '@converse/openpromise'; -import { settings_api } from '@converse/headless/shared/settings/api.js'; +import { settings_api } from '../shared/settings/api.js'; import { stx , toStanza } from './stanza.js'; +/** + * The utils object + * @namespace u + */ +const u = {}; + export function isElement (el) { return el instanceof Element || el instanceof HTMLDocument; } @@ -57,14 +63,15 @@ export function shouldClearCache () { export async function tearDown () { - await _converse.api.trigger('beforeTearDown', {'synchronous': true}); + const { api } = _converse; + await api.trigger('beforeTearDown', {'synchronous': true}); window.removeEventListener('click', _converse.onUserActivity); window.removeEventListener('focus', _converse.onUserActivity); window.removeEventListener('keypress', _converse.onUserActivity); window.removeEventListener('mousemove', _converse.onUserActivity); window.removeEventListener(_converse.unloadevent, _converse.onUserActivity); window.clearInterval(_converse.everySecondTrigger); - _converse.api.trigger('afterTearDown'); + api.trigger('afterTearDown'); return _converse; } @@ -97,13 +104,6 @@ export function prefixMentions (message) { return text; } - -/** - * The utils object - * @namespace u - */ -const u = {}; - u.isTagEqual = function (stanza, name) { if (stanza.tree?.()) { return u.isTagEqual(stanza.tree(), name); diff --git a/src/plugins/modal/base.js b/src/plugins/modal/base.js index 2741e7ae0..0b9648aa2 100644 --- a/src/plugins/modal/base.js +++ b/src/plugins/modal/base.js @@ -1,14 +1,14 @@ +import api from "@converse/headless/shared/api/index.js"; import bootstrap from "bootstrap.native"; import log from "@converse/headless/log"; +import sizzle from 'sizzle'; import tplAlertComponent from "./templates/modal-alert.js"; import { View } from '@converse/skeletor/src/view.js'; -import { api, converse } from "@converse/headless/core"; +import { addClass, removeElement } from '../../utils/html.js'; import { render } from 'lit'; import './styles/_modal.scss'; -const { sizzle } = converse.env; -const u = converse.env.utils; const BaseModal = View.extend({ @@ -56,11 +56,11 @@ const BaseModal = View.extend({ ev.stopPropagation(); ev.preventDefault(); sizzle('.nav-link.active', this.el).forEach(el => { - u.removeClass('active', this.el.querySelector(el.getAttribute('href'))); - u.removeClass('active', el); + removeClass('active', this.el.querySelector(el.getAttribute('href'))); + removeClass('active', el); }); - u.addClass('active', ev.target); - u.addClass('active', this.el.querySelector(ev.target.getAttribute('href'))) + addClass('active', ev.target); + addClass('active', this.el.querySelector(ev.target.getAttribute('href'))) }, alert (message, type='primary') { @@ -74,8 +74,8 @@ const BaseModal = View.extend({ render(tplAlertComponent({'type': `alert-${type}`, 'message': message}), body); const el = body.firstElementChild; setTimeout(() => { - u.addClass('fade-out', el); - setTimeout(() => u.removeElement(el), 600); + addClass('fade-out', el); + setTimeout(() => removeElement(el), 600); }, 5000); }, @@ -83,7 +83,7 @@ const BaseModal = View.extend({ if (ev) { ev.preventDefault(); this.trigger_el = ev.target; - !u.hasClass('chat-image', this.trigger_el) && u.addClass('selected', this.trigger_el); + !hasClass('chat-image', this.trigger_el) && addClass('selected', this.trigger_el); } this.modal.show(); } diff --git a/src/plugins/rosterview/modals/add-contact.js b/src/plugins/rosterview/modals/add-contact.js index 268f6902c..dcfff9919 100644 --- a/src/plugins/rosterview/modals/add-contact.js +++ b/src/plugins/rosterview/modals/add-contact.js @@ -1,13 +1,13 @@ import 'shared/autocomplete/index.js'; import BaseModal from "plugins/modal/modal.js"; +import api from '@converse/headless/shared/api'; import compact from 'lodash-es/compact'; import debounce from 'lodash-es/debounce'; import tplAddContactModal from "./templates/add-contact.js"; +import { Strophe } from 'strophe.js/src/core.js'; import { __ } from 'i18n'; -import { _converse, api, converse } from "@converse/headless/core"; - -const { Strophe } = converse.env; -const u = converse.env.utils; +import { _converse } from "@converse/headless/core"; +import { addClass, removeClass } from 'utils/html.js'; export default class AddContactModal extends BaseModal { @@ -98,7 +98,7 @@ export default class AddContactModal extends BaseModal { if (list.length !== 1) { const el = this.querySelector('.invalid-feedback'); el.textContent = __('Sorry, could not find a contact with that name') - u.addClass('d-block', el); + addClass('d-block', el); return; } const jid = list[0].value; @@ -114,15 +114,15 @@ export default class AddContactModal extends BaseModal { validateSubmission (jid) { const el = this.querySelector('.invalid-feedback'); if (!jid || compact(jid.split('@')).length < 2) { - u.addClass('is-invalid', this.querySelector('input[name="jid"]')); - u.addClass('d-block', el); + addClass('is-invalid', this.querySelector('input[name="jid"]')); + addClass('d-block', el); return false; } else if (_converse.roster.get(Strophe.getBareJidFromJid(jid))) { el.textContent = __('This contact has already been added') - u.addClass('d-block', el); + addClass('d-block', el); return false; } - u.removeClass('d-block', el); + removeClass('d-block', el); return true; } diff --git a/src/shared/registry.js b/src/shared/registry.js index 3feb7b7b5..c1888daa0 100644 --- a/src/shared/registry.js +++ b/src/shared/registry.js @@ -1,4 +1,4 @@ -import { api } from "@converse/headless/core"; +import api from "@converse/headless/shared/api/index.js"; const registry = {}; diff --git a/src/utils/html.js b/src/utils/html.js index 0d2fb192a..fedfa41ad 100644 --- a/src/utils/html.js +++ b/src/utils/html.js @@ -241,7 +241,7 @@ u.hasClass = function (className, el) { }; u.toggleClass = function (className, el) { - u.hasClass(className, el) ? u.removeClass(className, el) : u.addClass(className, el); + u.hasClass(className, el) ? removeClass(className, el) : addClass(className, el); }; /** @@ -250,10 +250,10 @@ u.toggleClass = function (className, el) { * @param { string } className * @param { Element } el */ -u.addClass = function (className, el) { +export function addClass (className, el) { el instanceof Element && el.classList.add(className); return el; -}; +} /** * Remove a class from an element. @@ -261,15 +261,20 @@ u.addClass = function (className, el) { * @param { string } className * @param { Element } el */ -u.removeClass = function (className, el) { +export function removeClass (className, el) { el instanceof Element && el.classList.remove(className); return el; -}; +} -u.removeElement = function (el) { +/** + * Remove an element from its parent + * @method u#removeElement + * @param { Element } el + */ +export function removeElement (el) { el instanceof Element && el.parentNode && el.parentNode.removeChild(el); return el; -}; +} u.getElementFromTemplateResult = function (tr) { const div = document.createElement('div'); @@ -278,8 +283,8 @@ u.getElementFromTemplateResult = function (tr) { }; u.showElement = el => { - u.removeClass('collapsed', el); - u.removeClass('hidden', el); + removeClass('collapsed', el); + removeClass('hidden', el); }; u.hideElement = function (el) { @@ -609,6 +614,15 @@ u.xForm2TemplateResult = function (field, stanza, options={}) { } }; -Object.assign(u, { getOOBURLMarkup, ancestor, slideIn, slideOut, isEqualNode }); +Object.assign(u, { + addClass, + ancestor, + getOOBURLMarkup, + isEqualNode, + removeClass, + removeElement, + slideIn, + slideOut, +}); export default u;