Refactor bookmark plugins

Mainly moving functions and methods to utils

src/headless/plugins/bookmarks/collection.js

@@ -7,7 +7,6 @@ import { getOpenPromise } from '@converse/openpromise';
 import { initStorage } from '@converse/headless/shared/utils.js';
 
 const { Strophe, $iq, sizzle } = converse.env;
-const u = converse.env.utils;
 
 
 const Bookmarks = {

src/headless/plugins/bookmarks/index.js

@@ -11,30 +11,13 @@ import log from "@converse/headless/log.js";
 import { Collection } from "@converse/skeletor/src/collection";
 import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api, converse } from "@converse/headless/core";
-import { checkBookmarksSupport, getNicknameFromBookmark } from './utils.js';
+import { initBookmarks, getNicknameFromBookmark } from './utils.js';
 
 const { Strophe, sizzle } = converse.env;
 
 Strophe.addNamespace('BOOKMARKS', 'storage:bookmarks');
 
 
-async function initBookmarks () {
-    if (!api.settings.get('allow_bookmarks')) {
-        return;
-    }
-    if (await checkBookmarksSupport()) {
-        _converse.bookmarks = new _converse.Bookmarks();
-        await _converse.bookmarks.fetchBookmarks();
-        /**
-         * Triggered once the _converse.Bookmarks collection
-         * has been created and cached bookmarks have been fetched.
-         * @event _converse#bookmarksInitialized
-         * @example _converse.api.listen.on('bookmarksInitialized', () => { ... });
-         */
-        api.trigger('bookmarksInitialized');
-    }
-}
-
 function handleBookmarksPush (message) {
     if (sizzle(`event[xmlns="${Strophe.NS.PUBSUB}#event"] items[node="${Strophe.NS.BOOKMARKS}"]`, message).length) {
         api.waitUntil('bookmarksInitialized')

src/headless/plugins/bookmarks/utils.js

@@ -10,6 +10,23 @@ export async function checkBookmarksSupport () {
     }
 }
 
+export async function initBookmarks () {
+    if (!api.settings.get('allow_bookmarks')) {
+        return;
+    }
+    if (await checkBookmarksSupport()) {
+        _converse.bookmarks = new _converse.Bookmarks();
+        await _converse.bookmarks.fetchBookmarks();
+        /**
+         * Triggered once the _converse.Bookmarks collection
+         * has been created and cached bookmarks have been fetched.
+         * @event _converse#bookmarksInitialized
+         * @example _converse.api.listen.on('bookmarksInitialized', () => { ... });
+         */
+        api.trigger('bookmarksInitialized');
+    }
+}
+
 /**
   * Check if the user has a bookmark with a saved nickanme
   * for this groupchat and return it.

src/plugins/bookmark-views/bookmarks-list.js

@@ -1,10 +1,10 @@
+import log from '@converse/headless/log';
 import tpl_bookmarks_list from './templates/list.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { _converse, api, converse } from '@converse/headless/core';
 import { initStorage } from '@converse/headless/shared/utils.js';
 import { render } from 'lit';
 
-const { Strophe } = converse.env;
 const u = converse.env.utils;
 
 export default class BookmarksView extends ElementView {
@@ -18,40 +18,26 @@ export default class BookmarksView extends ElementView {
         this.listenTo(_converse.chatboxes, 'add', this.render);
         this.listenTo(_converse.chatboxes, 'remove', this.render);
 
-        const id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
+        const id = `converse.bookmarks-list-model-${_converse.bare_jid}`;
         this.model = new _converse.BookmarksList({ id });
         initStorage(this.model, id);
-        this.model.fetch({ 'success': () => this.render(), 'error': () => this.render() });
+
+        this.model.fetch({
+            'success': () => this.render(),
+            'error': (model, err) => {
+                log.error(err);
+                this.render();
+            }
+        });
     }
 
     render () {
-        const is_hidden = b => !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(b.get('jid')));
         render(tpl_bookmarks_list({
-            '_converse': _converse,
-            'bookmarks': _converse.bookmarks,
-            'hidden': _converse.bookmarks.getUnopenedBookmarks().length && true,
-            'is_hidden': is_hidden,
-            'openRoom': ev => this.openRoom(ev),
-            'removeBookmark': ev => this.removeBookmark(ev),
             'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
             'toggle_state': this.model.get('toggle-state')
         }), this);
     }
 
-    openRoom (ev) { // eslint-disable-line class-methods-use-this
-        ev.preventDefault();
-        const name = ev.target.textContent;
-        const jid = ev.target.getAttribute('data-room-jid');
-        const data = {
-            'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
-        };
-        api.rooms.open(jid, data, true);
-    }
-
-    removeBookmark (ev) { // eslint-disable-line class-methods-use-this
-        _converse.removeBookmarkViaEvent(ev);
-    }
-
     toggleBookmarksList (ev) {
         if (ev && ev.preventDefault) {
             ev.preventDefault();

src/plugins/bookmark-views/index.js

@@ -1,5 +1,4 @@
 /**
- * @module converse-bookmark-views
  * @description Converse.js plugin which adds views for XEP-0048 bookmarks
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
@@ -7,10 +6,9 @@
 import '@converse/headless/plugins/muc/index.js';
 import BookmarkForm from './form.js';
 import BookmarksView from './bookmarks-list.js';
-import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
-import { bookmarkableChatRoomView, eventMethods } from './mixins.js';
-import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/utils';
+import { bookmarkableChatRoomView } from './mixins.js';
+import { getHeadingButtons, removeBookmarkViaEvent, addBookmarkViaEvent } from './utils.js';
 
 import './styles/bookmarks.scss';
 
@@ -23,8 +21,6 @@ converse.plugins.add('converse-bookmark-views', {
      * If the setting "strict_plugin_dependencies" is set to true,
      * an error will be raised if the plugin is not found. By default it's
      * false, which means these plugins are only loaded opportunistically.
-     *
-     * NB: These plugins need to have already been loaded via require.js.
      */
     dependencies: ['converse-chatboxes', 'converse-muc', 'converse-muc-views'],
 
@@ -37,34 +33,15 @@ converse.plugins.add('converse-bookmark-views', {
             hide_open_bookmarks: true
         });
 
-        Object.assign(_converse, eventMethods);
+        _converse.removeBookmarkViaEvent = removeBookmarkViaEvent;
+        _converse.addBookmarkViaEvent = addBookmarkViaEvent;
+
         Object.assign(_converse.ChatRoomView.prototype, bookmarkableChatRoomView);
 
         _converse.MUCBookmarkForm = BookmarkForm;
         _converse.BookmarksView = BookmarksView;
 
-        /************************ BEGIN Event Handlers ************************/
-        api.listen.on('getHeadingButtons', (view, buttons) => {
-            if (_converse.allow_bookmarks && view.model.get('type') === _converse.CHATROOMS_TYPE) {
-                const bookmarked = view.model.get('bookmarked');
-                const data = {
-                    'i18n_title': bookmarked ? __('Unbookmark this groupchat') : __('Bookmark this groupchat'),
-                    'i18n_text': bookmarked ? __('Unbookmark') : __('Bookmark'),
-                    'handler': ev => view.toggleBookmark(ev),
-                    'a_class': 'toggle-bookmark',
-                    'icon_class': 'fa-bookmark',
-                    'name': 'bookmark'
-                };
-                const names = buttons.map(t => t.name);
-                const idx = names.indexOf('details');
-                const data_promise = checkBookmarksSupport().then(s => (s ? data : ''));
-                return idx > -1
-                    ? [...buttons.slice(0, idx), data_promise, ...buttons.slice(idx)]
-                    : [data_promise, ...buttons];
-            }
-            return buttons;
-        });
-
+        api.listen.on('getHeadingButtons', getHeadingButtons);
         api.listen.on('chatRoomViewInitialized', view => view.setBookmarkState());
     }
 });

src/plugins/bookmark-views/mixins.js

@@ -1,7 +1,4 @@
-import invokeMap from 'lodash-es/invokeMap';
-import { Model } from '@converse/skeletor/src/model.js';
-import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless/core';
+import { _converse, converse } from '@converse/headless/core';
 
 const { u } = converse.env;
 
@@ -43,29 +40,3 @@ export const bookmarkableChatRoomView = {
         }
     }
 };
-
-
-export const eventMethods = {
-
-    removeBookmarkViaEvent (ev) {
-        /* Remove a bookmark as determined by the passed in
-         * event.
-         */
-        ev.preventDefault();
-        const name = ev.target.getAttribute('data-bookmark-name');
-        const jid = ev.target.getAttribute('data-room-jid');
-        if (confirm(__('Are you sure you want to remove the bookmark "%1$s"?', name))) {
-            invokeMap(_converse.bookmarks.where({ 'jid': jid }), Model.prototype.destroy);
-        }
-    },
-
-    async addBookmarkViaEvent (ev) {
-        /* Add a bookmark as determined by the passed in
-         * event.
-         */
-        ev.preventDefault();
-        const jid = ev.target.getAttribute('data-room-jid');
-        const room = await api.rooms.open(jid, { 'bring_to_foreground': true });
-        room.session.save('view', converse.MUC.VIEWS.BOOKMARK);
-    }
-}

src/plugins/bookmark-views/templates/item.js

@@ -0,0 +1,24 @@
+import { __ } from 'i18n';
+import { _converse, api } from '@converse/headless/core.js';
+import { html } from "lit";
+import { openRoomViaEvent, removeBookmarkViaEvent } from '../utils.js';
+
+export default (o) => {
+    const jid = o.bm.get('jid');
+    const is_hidden = !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(jid));
+    const info_remove_bookmark = __('Unbookmark this groupchat');
+    const open_title = __('Click to open this groupchat');
+    return html`
+        <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ is_hidden ? 'hidden' : ''}" data-room-jid="${jid}">
+            <a class="list-item-link open-room w-100" data-room-jid="${jid}"
+            title="${open_title}"
+            @click=${openRoomViaEvent}>${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="${jid}"
+            data-bookmark-name="${o.bm.getDisplayName()}"
+            title="${info_remove_bookmark}"
+            @click=${removeBookmarkViaEvent}></a>
+        </div>
+    `;
+}

src/plugins/bookmark-views/templates/list.js

@@ -1,38 +1,22 @@
-import { html } from "lit";
+import bookmark_item from './item.js';
 import { __ } from 'i18n';
-
-
-const bookmark_item = (o) => {
-    const info_remove_bookmark = __('Unbookmark this groupchat');
-    const open_title = __('Click to open this groupchat');
-    return html`
-        <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ (o.is_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}"
-            @click=${o.openRoom}>${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}"
-            @click=${o.removeBookmark}></a>
-        </div>
-    `;
-}
+import { _converse } from '@converse/headless/core.js';
+import { html } from "lit";
 
 export default (o) => {
+    const is_collapsed = _converse.bookmarks.getUnopenedBookmarks().length ? true : false;
     const desc_bookmarks = __('Click to toggle the bookmarks list');
     const label_bookmarks = __('Bookmarks');
     return html`
-        <div class="list-container list-container--bookmarks ${ !o.hidden && 'hidden' || '' }">
+        <div class="list-container list-container--bookmarks ${ !is_collapsed && 'hidden' || '' }">
             <a class="list-toggle bookmarks-toggle controlbox-padded"
-            title="${desc_bookmarks}"
-            @click=${o.toggleBookmarksList}>
+               title="${desc_bookmarks}"
+               @click=${o.toggleBookmarksList}>
 
-                <span class="fa ${(o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
+                <span class="fa ${(o.toggle_state === _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 class="items-list bookmarks rooms-list ${ (o.toggle_state !== _converse.OPENED) ? 'hidden' : '' }">
+            ${ _converse.bookmarks.map(bm => bookmark_item(Object.assign({bm}, o))) }
             </div>
         </div>
     `;

src/plugins/bookmark-views/utils.js

@@ -0,0 +1,53 @@
+import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/utils';
+import invokeMap from 'lodash-es/invokeMap';
+import { Model } from '@converse/skeletor/src/model.js';
+import { _converse, api, converse } from '@converse/headless/core';
+import { __ } from 'i18n';
+
+
+export function getHeadingButtons (view, buttons) {
+    if (_converse.allow_bookmarks && view.model.get('type') === _converse.CHATROOMS_TYPE) {
+        const bookmarked = view.model.get('bookmarked');
+        const data = {
+            'i18n_title': bookmarked ? __('Unbookmark this groupchat') : __('Bookmark this groupchat'),
+            'i18n_text': bookmarked ? __('Unbookmark') : __('Bookmark'),
+            'handler': ev => view.toggleBookmark(ev),
+            'a_class': 'toggle-bookmark',
+            'icon_class': 'fa-bookmark',
+            'name': 'bookmark'
+        };
+        const names = buttons.map(t => t.name);
+        const idx = names.indexOf('details');
+        const data_promise = checkBookmarksSupport().then(s => (s ? data : ''));
+        return idx > -1 ? [...buttons.slice(0, idx), data_promise, ...buttons.slice(idx)] : [data_promise, ...buttons];
+    }
+    return buttons;
+}
+
+export function removeBookmarkViaEvent (ev) {
+    ev.preventDefault();
+    const name = ev.target.getAttribute('data-bookmark-name');
+    const jid = ev.target.getAttribute('data-room-jid');
+    if (confirm(__('Are you sure you want to remove the bookmark "%1$s"?', name))) {
+        invokeMap(_converse.bookmarks.where({ jid }), Model.prototype.destroy);
+    }
+}
+
+export async function addBookmarkViaEvent (ev) {
+    ev.preventDefault();
+    const jid = ev.target.getAttribute('data-room-jid');
+    const room = await api.rooms.open(jid, { 'bring_to_foreground': true });
+    room.session.save('view', converse.MUC.VIEWS.BOOKMARK);
+}
+
+
+export function openRoomViaEvent (ev) {
+    ev.preventDefault();
+    const { Strophe } = converse.env;
+    const name = ev.target.textContent;
+    const jid = ev.target.getAttribute('data-room-jid');
+    const data = {
+        'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
+    };
+    api.rooms.open(jid, data, true);
+}