Commit 889f4d4e authored by JC Brand's avatar JC Brand

Always render spinner via lit-html

parent 0ca2e5ae
...@@ -12,7 +12,7 @@ import log from "@converse/headless/log"; ...@@ -12,7 +12,7 @@ import log from "@converse/headless/log";
import tpl_chatbox from "templates/chatbox.js"; import tpl_chatbox from "templates/chatbox.js";
import tpl_chatbox_head from "templates/chatbox_head.js"; import tpl_chatbox_head from "templates/chatbox_head.js";
import tpl_chatbox_message_form from "templates/chatbox_message_form.js"; import tpl_chatbox_message_form from "templates/chatbox_message_form.js";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.js";
import tpl_toolbar from "templates/toolbar.js"; import tpl_toolbar from "templates/toolbar.js";
import tpl_user_details_modal from "templates/user_details_modal.js"; import tpl_user_details_modal from "templates/user_details_modal.js";
import { BootstrapModal } from "./converse-modal.js"; import { BootstrapModal } from "./converse-modal.js";
...@@ -421,11 +421,12 @@ export const ChatBoxView = View.extend({ ...@@ -421,11 +421,12 @@ export const ChatBoxView = View.extend({
addSpinner (append=false) { addSpinner (append=false) {
if (this.el.querySelector('.spinner') === null) { if (this.el.querySelector('.spinner') === null) {
const el = u.getElementFromTemplateResult(tpl_spinner());
if (append) { if (append) {
this.content.insertAdjacentHTML('beforeend', tpl_spinner()); this.content.insertAdjacentElement('beforeend', el);
this.scrollDown(); this.scrollDown();
} else { } else {
this.content.insertAdjacentHTML('afterbegin', tpl_spinner()); this.content.insertAdjacentElement('afterbegin', el);
} }
} }
}, },
......
...@@ -22,7 +22,7 @@ import tpl_muc_config_form from "templates/muc_config_form.js"; ...@@ -22,7 +22,7 @@ import tpl_muc_config_form from "templates/muc_config_form.js";
import tpl_muc_password_form from "templates/muc_password_form.js"; import tpl_muc_password_form from "templates/muc_password_form.js";
import tpl_muc_sidebar from "templates/muc_sidebar.js"; import tpl_muc_sidebar from "templates/muc_sidebar.js";
import tpl_room_panel from "templates/room_panel.html"; import tpl_room_panel from "templates/room_panel.html";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.js";
import { ChatBoxView } from "./converse-chatview"; import { ChatBoxView } from "./converse-chatview";
import { Model } from '@converse/skeletor/src/model.js'; import { Model } from '@converse/skeletor/src/model.js';
import { View } from '@converse/skeletor/src/view.js'; import { View } from '@converse/skeletor/src/view.js';
...@@ -1315,7 +1315,10 @@ export const ChatRoomView = ChatBoxView.extend({ ...@@ -1315,7 +1315,10 @@ export const ChatRoomView = ChatBoxView.extend({
sizzle('.spinner', this.el).forEach(u.removeElement); sizzle('.spinner', this.el).forEach(u.removeElement);
this.hideChatRoomContents(); this.hideChatRoomContents();
const container_el = this.el.querySelector('.chatroom-body'); const container_el = this.el.querySelector('.chatroom-body');
container_el.insertAdjacentHTML('afterbegin', tpl_spinner()); container_el.insertAdjacentElement(
'afterbegin',
u.getElementFromTemplateResult(tpl_spinner())
);
}, },
/** /**
......
...@@ -7,18 +7,19 @@ ...@@ -7,18 +7,19 @@
* @license Mozilla Public License (MPLv2) * @license Mozilla Public License (MPLv2)
*/ */
import "converse-controlbox"; import "converse-controlbox";
import { __ } from './i18n';
import { View } from "@converse/skeletor/src/view";
import { pick } from "lodash-es";
import { _converse, api, converse } from "@converse/headless/converse-core";
import log from "@converse/headless/log"; import log from "@converse/headless/log";
import tpl_form_input from "templates/form_input.html"; import tpl_form_input from "templates/form_input.html";
import tpl_form_username from "templates/form_username.html"; import tpl_form_username from "templates/form_username.html";
import tpl_register_panel from "templates/register_panel.html"; import tpl_register_panel from "templates/register_panel.html";
import tpl_registration_form from "templates/registration_form.html"; import tpl_registration_form from "templates/registration_form.html";
import tpl_registration_request from "templates/registration_request.html"; import tpl_registration_request from "templates/registration_request.html";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.js";
import utils from "@converse/headless/utils/form"; import utils from "@converse/headless/utils/form";
import { View } from "@converse/skeletor/src/view";
import { __ } from './i18n';
import { _converse, api, converse } from "@converse/headless/converse-core";
import { pick } from "lodash-es";
import { render } from 'lit-html';
// Strophe methods for building stanzas // Strophe methods for building stanzas
const { Strophe, sizzle, $iq } = converse.env; const { Strophe, sizzle, $iq } = converse.env;
...@@ -352,7 +353,7 @@ converse.plugins.add('converse-register', { ...@@ -352,7 +353,7 @@ converse.plugins.add('converse-register', {
showSpinner () { showSpinner () {
const form = this.el.querySelector('form'); const form = this.el.querySelector('form');
form.innerHTML = tpl_spinner(); render(tpl_spinner(), form);
this.model.set('registration_form_rendered', false); this.model.set('registration_form_rendered', false);
return this; return this;
}, },
......
...@@ -3,7 +3,7 @@ import sizzle from 'sizzle'; ...@@ -3,7 +3,7 @@ import sizzle from 'sizzle';
import st from "@converse/headless/utils/stanza"; import st from "@converse/headless/utils/stanza";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js"; import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
import tpl_room_description from "templates/room_description.html"; import tpl_room_description from "templates/room_description.html";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.js";
import { BootstrapModal } from "../converse-modal.js"; import { BootstrapModal } from "../converse-modal.js";
import { Strophe, $iq } from 'strophe.js/src/strophe'; import { Strophe, $iq } from 'strophe.js/src/strophe';
import { __ } from '../i18n'; import { __ } from '../i18n';
...@@ -70,7 +70,10 @@ function toggleRoomInfo (ev) { ...@@ -70,7 +70,10 @@ function toggleRoomInfo (ev) {
u.slideIn(div_el).then(u.removeElement) u.slideIn(div_el).then(u.removeElement)
parent_el.querySelector('a.room-info').classList.remove('selected'); parent_el.querySelector('a.room-info').classList.remove('selected');
} else { } else {
parent_el.insertAdjacentHTML('beforeend', tpl_spinner()); parent_el.insertAdjacentElement(
'beforeend',
u.getElementFromTemplateResult(tpl_spinner())
);
api.disco.info(ev.target.getAttribute('data-room-jid'), null) api.disco.info(ev.target.getAttribute('data-room-jid'), null)
.then(stanza => insertRoomInfo(parent_el, stanza)) .then(stanza => insertRoomInfo(parent_el, stanza))
.catch(e => log.error(e)); .catch(e => log.error(e));
......
<span class="spinner fa fa-spinner centered"/>
...@@ -20,7 +20,7 @@ import tpl_select_option from "../templates/select_option.html"; ...@@ -20,7 +20,7 @@ import tpl_select_option from "../templates/select_option.html";
import tpl_video from "../templates/video.js"; import tpl_video from "../templates/video.js";
import u from "../headless/utils/core"; import u from "../headless/utils/core";
import { api } from "@converse/headless/converse-core"; import { api } from "@converse/headless/converse-core";
import { html } from "lit-html"; import { html, render } from "lit-html";
import { isFunction } from "lodash-es"; import { isFunction } from "lodash-es";
const APPROVED_URL_PROTOCOLS = ['http', 'https', 'xmpp', 'mailto']; const APPROVED_URL_PROTOCOLS = ['http', 'https', 'xmpp', 'mailto'];
...@@ -252,6 +252,12 @@ u.removeElement = function (el) { ...@@ -252,6 +252,12 @@ u.removeElement = function (el) {
return el; return el;
} }
u.getElementFromTemplateResult = function (tr) {
const div = document.createElement('div');
render(tr, div);
return div.firstElementChild;
}
u.showElement = el => { u.showElement = el => {
u.removeClass('collapsed', el); u.removeClass('collapsed', el);
u.removeClass('hidden', el); u.removeClass('hidden', el);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment