Use lit-html to render chatbox outlines

package-lock.json

@@ -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==",
+					"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
-					"dev": true
 				}
 			}
 		},
@@ -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=",
+			"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
-			"dev": true
 		},
 		"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==",
+			"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-			"dev": true
 		},
 		"unpipe": {
 			"version": "1.0.0",

src/converse-chatview.js

@@ -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(),
+                        this.model.toJSON(), {
-                        {'unread_msgs': __('You have unread messages')}
+                            'unread_msgs': __('You have unread messages'),
+                            'markScrolled': () => this.markScrolled()
+                        }
                     )
                 );
+                render(result, this.el);
                 this.content = this.el.querySelector('.chat-content');
                 this.renderMessageForm();
                 this.renderHeading();

src/converse-headlines-view.js

@@ -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;
             },

src/converse-muc-views.js

@@ -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();

src/templates/chatbox.html

@@ -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>

src/templates/chatbox.js

@@ -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>
+`;

src/templates/chatroom.html

@@ -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>

src/templates/chatroom.js

@@ -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>
+`;