From 283a810d6b0eae6ba491defdfbb2e2b1974a8bd9 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 18 Mar 2020 16:55:32 +0100 Subject: [PATCH] Use lit-html to render chatbox outlines --- package-lock.json | 89 +++++++++++++++++++++++++++++++--- src/converse-chatview.js | 11 +++-- src/converse-headlines-view.js | 6 ++- src/converse-muc-views.js | 4 +- src/templates/chatbox.html | 10 ---- src/templates/chatbox.js | 16 ++++++ src/templates/chatroom.html | 6 --- src/templates/chatroom.js | 11 +++++ 8 files changed, 121 insertions(+), 32 deletions(-) delete mode 100644 src/templates/chatbox.html create mode 100644 src/templates/chatbox.js delete mode 100644 src/templates/chatroom.html create mode 100644 src/templates/chatroom.js diff --git a/package-lock.json b/package-lock.json index 218d5b3b7..d369f1bdc 100644 --- a/package-lock.json +++ b/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==", - "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", diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 612dba24d..09f9adf72 100644 --- a/src/converse-chatview.js +++ b/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(), - {'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(); diff --git a/src/converse-headlines-view.js b/src/converse-headlines-view.js index ec2a79f7e..061bcd2be 100644 --- a/src/converse-headlines-view.js +++ b/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; }, diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js index e01677984..80006d9fc 100644 --- a/src/converse-muc-views.js +++ b/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(); diff --git a/src/templates/chatbox.html b/src/templates/chatbox.html deleted file mode 100644 index 52aea4dcc..000000000 --- a/src/templates/chatbox.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
-
-
-
-
-
-
-
diff --git a/src/templates/chatbox.js b/src/templates/chatbox.js new file mode 100644 index 000000000..63c72aea7 --- /dev/null +++ b/src/templates/chatbox.js @@ -0,0 +1,16 @@ +import { html } from "lit-html"; + +export default (o) => html` +
+
+
+
+
+
+
+
+
+
+`; diff --git a/src/templates/chatroom.html b/src/templates/chatroom.html deleted file mode 100644 index 0ef996085..000000000 --- a/src/templates/chatroom.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- -
-
diff --git a/src/templates/chatroom.js b/src/templates/chatroom.js new file mode 100644 index 000000000..0cba4e9cd --- /dev/null +++ b/src/templates/chatroom.js @@ -0,0 +1,11 @@ +import { html } from "lit-html"; + + +export default () => html` +
+
+
+ +
+
+`;