bookmark-views: Changes templates to lit-html

src/converse-bookmark-views.js

@@ -6,9 +6,11 @@
  */
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
+import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
-import tpl_bookmarks_list from "templates/bookmarks_list.html"
-import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html";
+import tpl_bookmarks_list from "templates/bookmarks_list.js"
+import tpl_muc_bookmark_form from "templates/muc_bookmark_form.js";
 import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";
 
 const { Backbone, Strophe, _ } = converse.env;
@@ -54,8 +56,7 @@ converse.plugins.add('converse-bookmark-views', {
         /* The initialize function gets called as soon as the plugin is
          * loaded by converse.js's plugin machinery.
          */
-        const { _converse } = this,
-              { __ } = _converse;
+        const { _converse } = this;
 
         // Configuration values for this plugin
         // ====================================
@@ -98,9 +99,6 @@ converse.plugins.add('converse-bookmark-views', {
                 if (this.el.querySelector('.chat-head .toggle-bookmark')) {
                     return;
                 }
-                const { _converse } = this.__super__,
-                      { __ } = _converse;
-
                 const bookmark_button = tpl_chatroom_bookmark_toggle(
                     _.assignIn(this.model.toJSON(), {
                         'info_toggle_bookmark': this.model.get('bookmarked') ?
@@ -118,9 +116,11 @@ converse.plugins.add('converse-bookmark-views', {
                 }
             },
 
+            /**
+             * Set whether the groupchat is bookmarked or not.
+             * @private
+             */
             setBookmarkState () {
-                /* Set whether the groupchat is bookmarked or not.
-                 */
                 if (_converse.bookmarks !== undefined) {
                     const models = _converse.bookmarks.where({'jid': this.model.get('jid')});
                     if (!models.length) {
@@ -160,13 +160,8 @@ converse.plugins.add('converse-bookmark-views', {
         Object.assign(_converse.ChatRoomView.prototype, bookmarkableChatRoomView);
 
 
-        _converse.MUCBookmarkForm = Backbone.VDOMView.extend({
-            className: 'muc-bookmark-form',
-
-            events: {
-                'submit form': 'onBookmarkFormSubmitted',
-                'click .button-cancel': 'closeBookmarkForm'
-            },
+        _converse.MUCBookmarkForm = HTMLView.extend({
+            className: 'muc-bookmark-form chatroom-form-container',
 
             initialize (attrs) {
                 this.chatroomview = attrs.chatroomview;
@@ -174,16 +169,12 @@ converse.plugins.add('converse-bookmark-views', {
             },
 
             toHTML () {
-                return tpl_chatroom_bookmark_form({
-                    'default_nick': this.model.get('nick'),
-                    'heading': __('Bookmark this groupchat'),
-                    'label_autojoin': __('Would you like this groupchat to be automatically joined upon startup?'),
-                    'label_cancel': __('Cancel'),
-                    'label_name': __('The name for this bookmark:'),
-                    'label_nick': __('What should your nickname for this groupchat be?'),
-                    'label_submit': __('Save'),
-                    'name': this.model.get('name')
-                });
+                return tpl_muc_bookmark_form(Object.assign(
+                    this.model.toJSON(), {
+                        'onCancel': ev => this.closeBookmarkForm(ev),
+                        'onSubmit': ev => this.onBookmarkFormSubmitted(ev)
+                    }
+                ));
             },
 
             onBookmarkFormSubmitted (ev) {
@@ -204,9 +195,8 @@ converse.plugins.add('converse-bookmark-views', {
         });
 
 
-        _converse.BookmarksView = Backbone.VDOMView.extend({
-            tagName: 'div',
-            className: 'bookmarks-list list-container rooms-list-container',
+        _converse.BookmarksView = HTMLView.extend({
+            tagName: 'span',
             events: {
                 'click .add-bookmark': 'addBookmark',
                 'click .bookmarks-toggle': 'toggleBookmarksList',
@@ -236,13 +226,6 @@ converse.plugins.add('converse-bookmark-views', {
                 return tpl_bookmarks_list({
                     '_converse': _converse,
                     'bookmarks': this.model,
-                    'desc_bookmarks': __('Click to toggle the bookmarks list'),
-                    'info_leave_room': __('Leave this groupchat'),
-                    'info_remove': __('Remove this bookmark'),
-                    'info_remove_bookmark': __('Unbookmark this groupchat'),
-                    'info_title': __('Show more information on this groupchat'),
-                    'label_bookmarks': __('Bookmarks'),
-                    'open_title': __('Click to open this groupchat'),
                     'toggle_state': this.list_model.get('toggle-state'),
                     'is_bookmark_hidden': b => {
                         return !!(_converse.hide_open_bookmarks && _converse.chatboxes.get(b.get('jid')))

src/templates/bookmarks_list.html

-<div class="list-container list-container--bookmarks {{{ !o.hidden && 'hidden' || '' }}}">
-    <a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
-        <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
-        </span> {{{o.label_bookmarks}}}</a>
-
-    <div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}">
-    {[o.bookmarks.forEach(function (bm) { ]}
-        <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.is_bookmark_hidden(bm)) { ]} hidden {[ } ]}" data-room-jid="{{{bm.get('jid')}}}">
-            <a class="list-item-link open-room w-100" data-room-jid="{{{bm.get('jid')}}}" title="{{{o.open_title}}}" href="#">{{{bm.getDisplayName()}}}</a>
-            <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (bm.get('bookmarked')) { ]} button-on {[ } ]}"
-                data-room-jid="{{{bm.get('jid')}}}" data-bookmark-name="{{{bm.getDisplayName()}}}"
-                title="{{{o.info_remove_bookmark}}}" href="#"></a>
-        </div>
-    {[ }) ]}
-    </div>
-</div>

src/templates/bookmarks_list.js

+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+
+
+const desc_bookmarks = __('Click to toggle the bookmarks list');
+const info_remove_bookmark = __('Unbookmark this groupchat');
+const label_bookmarks = __('Bookmarks');
+const open_title = __('Click to open this groupchat');
+
+
+const bookmark_item = (o) => html`
+    <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ (o.is_bookmark_hidden(o.bm)) ? 'hidden' : ''}" data-room-jid="${o.bm.get('jid')}">
+        <a class="list-item-link open-room w-100" data-room-jid="${o.bm.get('jid')}" title="${open_title}" href="#">${o.bm.getDisplayName()}</a>
+        <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ o.bm.get('bookmarked') ? 'button-on' : '' }"
+            data-room-jid="${o.bm.get('jid')}" data-bookmark-name="${o.bm.getDisplayName()}"
+            title="${info_remove_bookmark}" href="#"></a>
+    </div>
+`;
+
+export default (o) => html`
+    <div class="list-container list-container--bookmarks ${ !o.hidden && 'hidden' || '' }">
+        <a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="${desc_bookmarks}">
+            <span class="fa ${(o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
+            </span> ${label_bookmarks}</a>
+        <div class="items-list bookmarks rooms-list ${ (o.toggle_state !== o._converse.OPENED) ? 'hidden' : '' }">
+        ${ o.bookmarks.map(bm => bookmark_item(Object.assign({bm}, o))) }
+        </div>
+    </div>
+`;

src/templates/chatroom_bookmark_form.html → src/templates/muc_bookmark_form.js

-<div class="chatroom-form-container muc-bookmark-form">
-    <form class="converse-form chatroom-form">
-        <legend>{{{o.heading}}}</legend>
+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+
+const i18n_heading = __('Bookmark this groupchat');
+const i18n_autojoin = __('Would you like this groupchat to be automatically joined upon startup?');
+const i18n_cancel = __('Cancel');
+const i18n_name = __('The name for this bookmark:');
+const i18n_nick = __('What should your nickname for this groupchat be?');
+const i18n_submit = __('Save');
+
+
+export default (o) => html`
+    <form class="converse-form chatroom-form" @submit=${o.onSubmit}>
+        <legend>${i18n_heading}</legend>
         <fieldset class="form-group">
-            <label for="converse_muc_bookmark_name">{{{o.label_name}}}</label>
-            <input class="form-control" type="text" value="{{{o.name}}}" name="name" required="required" id="converse_muc_bookmark_name"/>
+            <label for="converse_muc_bookmark_name">${i18n_name}</label>
+            <input class="form-control" type="text" value="${o.name}" name="name" required="required" id="converse_muc_bookmark_name"/>
         </fieldset>
         <fieldset class="form-group">
-            <label for="converse_muc_bookmark_nick">{{{o.label_nick}}}</label>
-            <input class="form-control" type="text" name="nick" value="{{{o.default_nick}}}" id="converse_muc_bookmark_nick"/>
+            <label for="converse_muc_bookmark_nick">${i18n_nick}</label>
+            <input class="form-control" type="text" name="nick" value="${o.nick}" id="converse_muc_bookmark_nick"/>
         </fieldset>
         <fieldset class="form-group form-check">
             <input class="form-check-input" id="converse_muc_bookmark_autojoin" type="checkbox" name="autojoin"/>
-            <label class="form-check-label" for="converse_muc_bookmark_autojoin">{{{o.label_autojoin}}}</label>
+            <label class="form-check-label" for="converse_muc_bookmark_autojoin">${i18n_autojoin}</label>
         </fieldset>
         <fieldset class="form-group">
-            <input class="btn btn-primary" type="submit" value="{{{o.label_submit}}}"/>
-            <input class="btn btn-secondary button-cancel" type="button" value="{{{o.label_cancel}}}"/>
+            <input class="btn btn-primary" type="submit" value="${i18n_submit}">
+            <input class="btn btn-secondary button-cancel" type="button" value="${i18n_cancel}" @click=${o.onCancel}>
         </fieldset>
     </form>
-</div>
+`;