Use lit-html to render chatbox outlines
This commit is contained in:
parent
bf063d4df7
commit
283a810d6b
89
package-lock.json
generated
89
package-lock.json
generated
@ -9980,6 +9980,11 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"filesize": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-4.2.1.tgz",
|
||||
"integrity": "sha512-bP82Hi8VRZX/TUBKfE24iiUGsB/sfm2WUrwTQyAzQrhO3V9IhcBBNBXMyzLY5orACxRyYJ3d2HeRVX+eFv4lmA=="
|
||||
},
|
||||
"fill-range": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
|
||||
@ -10291,7 +10296,6 @@
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
|
||||
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^4.0.0",
|
||||
@ -10301,8 +10305,7 @@
|
||||
"graceful-fs": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
|
||||
"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -11527,8 +11530,7 @@
|
||||
"graceful-fs": {
|
||||
"version": "4.1.11",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
|
||||
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
|
||||
},
|
||||
"handle-thing": {
|
||||
"version": "2.0.0",
|
||||
@ -11996,6 +11998,11 @@
|
||||
"minimatch": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
|
||||
},
|
||||
"import-cwd": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
|
||||
@ -12559,6 +12566,11 @@
|
||||
"integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=",
|
||||
"dev": true
|
||||
},
|
||||
"jed": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
|
||||
"integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
|
||||
},
|
||||
"jest-worker": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.1.0.tgz",
|
||||
@ -12718,7 +12730,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
@ -12955,6 +12966,14 @@
|
||||
"type-check": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"lie": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
|
||||
"integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
|
||||
"requires": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
|
||||
@ -13017,6 +13036,14 @@
|
||||
"json5": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"localforage": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
|
||||
"integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
|
||||
"requires": {
|
||||
"lie": "3.1.1"
|
||||
}
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
|
||||
@ -18771,6 +18798,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"pluggable.js": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pluggable.js/-/pluggable.js-2.0.1.tgz",
|
||||
"integrity": "sha512-SBt6v6Tbp20Jf8hU0cpcc/+HBHGMY8/Q+yA6Ih0tBQE8tfdZ6U4PRG0iNvUUjLx/hVyOP53n0UfGBymlfaaXCg==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"po-loader": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/po-loader/-/po-loader-0.5.0.tgz",
|
||||
@ -20679,6 +20714,13 @@
|
||||
"integrity": "sha512-Mf37VjirD7RqCVeYgI8jb5K0DymIho/jNJqDgIkMs4cgKbEkvsow8Q6hpvF7Zmys9iEif0oW41hgbeWVZwABJw==",
|
||||
"dev": true
|
||||
},
|
||||
"skeletor.js": {
|
||||
"version": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
|
||||
"from": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
|
||||
"requires": {
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"slash": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
|
||||
@ -21353,6 +21395,11 @@
|
||||
"through": "^2.3.4"
|
||||
}
|
||||
},
|
||||
"strophe.js": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/strophe.js/-/strophe.js-1.3.4.tgz",
|
||||
"integrity": "sha512-jSLDG8jolhAwGOSgiJ7DTMSYK3wVoEJHKtpVRyEacQZ6CWA6z2WRPJpcFMjsIweq5aP9/XIvKUQqHBu/ZhvESA=="
|
||||
},
|
||||
"style-loader": {
|
||||
"version": "0.23.1",
|
||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
|
||||
@ -21806,6 +21853,33 @@
|
||||
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
|
||||
"dev": true
|
||||
},
|
||||
"twemoji": {
|
||||
"version": "12.1.5",
|
||||
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-12.1.5.tgz",
|
||||
"integrity": "sha512-B0PBVy5xomwb1M/WZxf/IqPZfnoIYy1skXnlHjMwLwTNfZ9ljh8VgWQktAPcJXu8080WoEh6YwQGPVhDVqvrVQ==",
|
||||
"requires": {
|
||||
"fs-extra": "^8.0.1",
|
||||
"jsonfile": "^5.0.0",
|
||||
"twemoji-parser": "12.1.3",
|
||||
"universalify": "^0.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"jsonfile": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
|
||||
"integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^0.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"twemoji-parser": {
|
||||
"version": "12.1.3",
|
||||
"resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-12.1.3.tgz",
|
||||
"integrity": "sha512-ND4LZXF4X92/PFrzSgGkq6KPPg8swy/U0yRw1k/+izWRVmq1HYi3khPwV3XIB6FRudgVICAaBhJfW8e8G3HC7Q=="
|
||||
},
|
||||
"type-check": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
|
||||
@ -22026,8 +22100,7 @@
|
||||
"universalify": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
|
@ -12,7 +12,7 @@ import { debounce, get, isString } from "lodash";
|
||||
import { html, render } from "lit-html";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import log from "@converse/headless/log";
|
||||
import tpl_chatbox from "templates/chatbox.html";
|
||||
import tpl_chatbox from "templates/chatbox.js";
|
||||
import tpl_chatbox_head from "templates/chatbox_head.js";
|
||||
import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
|
||||
import tpl_error_message from "templates/error_message.html";
|
||||
@ -238,12 +238,15 @@ converse.plugins.add('converse-chatview', {
|
||||
},
|
||||
|
||||
render () {
|
||||
this.el.innerHTML = tpl_chatbox(
|
||||
const result = tpl_chatbox(
|
||||
Object.assign(
|
||||
this.model.toJSON(),
|
||||
{'unread_msgs': __('You have unread messages')}
|
||||
this.model.toJSON(), {
|
||||
'unread_msgs': __('You have unread messages'),
|
||||
'markScrolled': () => this.markScrolled()
|
||||
}
|
||||
)
|
||||
);
|
||||
render(result, this.el);
|
||||
this.content = this.el.querySelector('.chat-content');
|
||||
this.renderMessageForm();
|
||||
this.renderHeading();
|
||||
|
@ -6,8 +6,9 @@
|
||||
import "converse-chatview";
|
||||
import { View } from 'skeletor.js/src/view.js';
|
||||
import { __ } from '@converse/headless/i18n';
|
||||
import { render } from "lit-html";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import tpl_chatbox from "templates/chatbox.html";
|
||||
import tpl_chatbox from "templates/chatbox.js";
|
||||
import tpl_headline_panel from "templates/headline_panel.js";
|
||||
|
||||
const u = converse.env.utils;
|
||||
@ -154,7 +155,7 @@ converse.plugins.add('converse-headlines-view', {
|
||||
|
||||
render () {
|
||||
this.el.setAttribute('id', this.model.get('box_id'))
|
||||
this.el.innerHTML = tpl_chatbox(
|
||||
const result = tpl_chatbox(
|
||||
Object.assign(this.model.toJSON(), {
|
||||
info_close: '',
|
||||
label_personal_message: '',
|
||||
@ -163,6 +164,7 @@ converse.plugins.add('converse-headlines-view', {
|
||||
unread_msgs: ''
|
||||
}
|
||||
));
|
||||
render(result, this.el);
|
||||
this.content = this.el.querySelector('.chat-content');
|
||||
return this;
|
||||
},
|
||||
|
@ -16,7 +16,7 @@ import converse from "@converse/headless/converse-core";
|
||||
import log from "@converse/headless/log";
|
||||
import tpl_add_chatroom_modal from "templates/add_chatroom_modal.js";
|
||||
import tpl_chatarea from "templates/chatarea.html";
|
||||
import tpl_chatroom from "templates/chatroom.html";
|
||||
import tpl_chatroom from "templates/chatroom.js";
|
||||
import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html";
|
||||
import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
|
||||
import tpl_chatroom_details_modal from "templates/chatroom_details_modal.js";
|
||||
@ -745,7 +745,7 @@ converse.plugins.add('converse-muc-views', {
|
||||
|
||||
render () {
|
||||
this.el.setAttribute('id', this.model.get('box_id'));
|
||||
this.el.innerHTML = tpl_chatroom();
|
||||
render(tpl_chatroom(), this.el);
|
||||
this.renderHeading();
|
||||
this.renderChatArea();
|
||||
this.renderBottomPanel();
|
||||
|
@ -1,10 +0,0 @@
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox row no-gutters"></div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}" aria-live="polite"></div>
|
||||
<div class="bottom-panel">
|
||||
<div class="emoji-picker__container dropup"></div>
|
||||
<div class="message-form-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
16
src/templates/chatbox.js
Normal file
16
src/templates/chatbox.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { html } from "lit-html";
|
||||
|
||||
export default (o) => html`
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox row no-gutters"></div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }"
|
||||
@scroll=${o.markScrolled}
|
||||
aria-live="polite"></div>
|
||||
<div class="bottom-panel">
|
||||
<div class="emoji-picker__container dropup"></div>
|
||||
<div class="message-form-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
@ -1,6 +0,0 @@
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom row no-gutters"></div>
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="disconnect-container hidden"></div>
|
||||
</div>
|
||||
</div>
|
11
src/templates/chatroom.js
Normal file
11
src/templates/chatroom.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { html } from "lit-html";
|
||||
|
||||
|
||||
export default () => html`
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom row no-gutters"></div>
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="disconnect-container hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
Loading…
Reference in New Issue
Block a user