Move converse-bookmark-views into folder

src/converse.js

@@ -12,7 +12,7 @@ import "shared/registry.js";
  * --------------------
  * Any of the following components may be removed if they're not needed.
  */
-import "./plugins/bookmark-views.js";       // Views for XEP-0048 Bookmarks
+import "./plugins/bookmark-views/index.js";       // Views for XEP-0048 Bookmarks
 import "./plugins/chatview/index.js";       // Renders standalone chat boxes for single user chat
 import "./plugins/controlbox/index.js";     // The control box
 import "./plugins/dragresize/index.js";     // Allows chat boxes to be resized by dragging them

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

+import tpl_bookmarks_list from './templates/list.js';
+import { View } from '@converse/skeletor/src/view.js';
+import { _converse, api, converse } from '@converse/headless/core';
+
+const { Strophe } = converse.env;
+const u = converse.env.utils;
+
+const BookmarksView = View.extend({
+    tagName: 'span',
+
+    initialize () {
+        this.listenTo(this.model, 'add', this.render);
+        this.listenTo(this.model, 'remove', this.render);
+
+        this.listenTo(_converse.chatboxes, 'add', this.render);
+        this.listenTo(_converse.chatboxes, 'remove', this.render);
+
+        const id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
+        this.list_model = new _converse.BookmarksList({ id });
+        this.list_model.browserStorage = _converse.createStore(id);
+
+        const render = () => {
+            this.render();
+            this.insertIntoControlBox();
+        };
+        this.list_model.fetch({ 'success': render, 'error': render });
+    },
+
+    toHTML () {
+        const is_hidden = b => !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(b.get('jid')));
+        return tpl_bookmarks_list({
+            '_converse': _converse,
+            'bookmarks': this.model,
+            'hidden': this.model.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.list_model.get('toggle-state')
+        });
+    },
+
+    insertIntoControlBox () {
+        const controlboxview = _converse.chatboxviews.get('controlbox');
+        if (controlboxview !== undefined && !u.rootContains(_converse.root, this.el)) {
+            const el = controlboxview.el.querySelector('.list-container--bookmarks');
+            el && el.parentNode.replaceChild(this.el, el);
+        }
+    },
+
+    openRoom (ev) {
+        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) {
+        _converse.removeBookmarkViaEvent(ev);
+    },
+
+    toggleBookmarksList (ev) {
+        if (ev && ev.preventDefault) {
+            ev.preventDefault();
+        }
+        const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa');
+        if (u.hasClass('fa-caret-down', icon_el)) {
+            u.slideIn(this.el.querySelector('.bookmarks'));
+            this.list_model.save({ 'toggle-state': _converse.CLOSED });
+            icon_el.classList.remove('fa-caret-down');
+            icon_el.classList.add('fa-caret-right');
+        } else {
+            icon_el.classList.remove('fa-caret-right');
+            icon_el.classList.add('fa-caret-down');
+            u.slideOut(this.el.querySelector('.bookmarks'));
+            this.list_model.save({ 'toggle-state': _converse.OPENED });
+        }
+    }
+});
+
+export default BookmarksView;

src/plugins/bookmark-views/form.js

+import tpl_muc_bookmark_form from './templates/form.js';
+import { View } from '@converse/skeletor/src/view.js';
+import { _converse } from '@converse/headless/core';
+
+
+const MUCBookmarkForm = View.extend({
+    className: 'muc-bookmark-form chatroom-form-container',
+
+    initialize (attrs) {
+        this.chatroomview = attrs.chatroomview;
+        this.render();
+    },
+
+    toHTML () {
+        return tpl_muc_bookmark_form(
+            Object.assign(this.model.toJSON(), {
+                'onCancel': ev => this.closeBookmarkForm(ev),
+                'onSubmit': ev => this.onBookmarkFormSubmitted(ev)
+            })
+        );
+    },
+
+    onBookmarkFormSubmitted (ev) {
+        ev.preventDefault();
+        _converse.bookmarks.createBookmark({
+            'jid': this.model.get('jid'),
+            'autojoin': ev.target.querySelector('input[name="autojoin"]')?.checked || false,
+            'name': ev.target.querySelector('input[name=name]')?.value,
+            'nick': ev.target.querySelector('input[name=nick]')?.value
+        });
+        this.closeBookmarkForm(ev);
+    },
+
+    closeBookmarkForm (ev) {
+        ev.preventDefault();
+        this.chatroomview.closeForm();
+    }
+});
+
+export default MUCBookmarkForm;

src/plugins/bookmark-views/index.js

+/**
+ * @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)
+ */
+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';
+
+const initBookmarkViews = async function () {
+    await api.waitUntil('roomsPanelRendered');
+    _converse.bookmarksview = new _converse.BookmarksView({ 'model': _converse.bookmarks });
+    /**
+     * Triggered once the _converse.Bookmarks collection and _converse.BookmarksView view
+     * has been created and cached bookmarks have been fetched.
+     * @event _converse#bookmarkViewsInitialized
+     * @example _converse.api.listen.on('bookmarkViewsInitialized', () => { ... });
+     */
+    api.trigger('bookmarkViewsInitialized');
+};
+
+converse.plugins.add('converse-bookmark-views', {
+    /* Plugin dependencies are other plugins which might be
+     * overridden or relied upon, and therefore need to be loaded before
+     * this plugin.
+     *
+     * 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'],
+
+    initialize () {
+        // Configuration values for this plugin
+        // ====================================
+        // Refer to docs/source/configuration.rst for explanations of these
+        // configuration settings.
+        api.settings.extend({
+            hide_open_bookmarks: true
+        });
+
+        Object.assign(_converse, eventMethods);
+        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 = _converse.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('bookmarksInitialized', initBookmarkViews);
+        api.listen.on('chatRoomViewInitialized', view => view.setBookmarkState());
+        /************************ END Event Handlers ************************/
+    }
+});

src/plugins/bookmark-views/mixins.js

+import { Model } from '@converse/skeletor/src/model.js';
+import { __ } from 'i18n';
+import { _converse, api, converse } from '@converse/headless/core';
+import { invokeMap } from 'lodash-es';
+
+const { u } = converse.env;
+
+export const bookmarkableChatRoomView = {
+    /**
+     * Set whether the groupchat is bookmarked or not.
+     * @private
+     */
+    setBookmarkState () {
+        if (_converse.bookmarks !== undefined) {
+            const models = _converse.bookmarks.where({ 'jid': this.model.get('jid') });
+            if (!models.length) {
+                this.model.save('bookmarked', false);
+            } else {
+                this.model.save('bookmarked', true);
+            }
+        }
+    },
+
+    renderBookmarkForm () {
+        this.hideChatRoomContents();
+        if (!this.bookmark_form) {
+            this.bookmark_form = new _converse.MUCBookmarkForm({
+                'model': this.model,
+                'chatroomview': this
+            });
+            const container_el = this.el.querySelector('.chatroom-body');
+            container_el.insertAdjacentElement('beforeend', this.bookmark_form.el);
+        }
+        u.showElement(this.bookmark_form.el);
+    },
+
+    toggleBookmark (ev) {
+        ev?.preventDefault();
+        const models = _converse.bookmarks.where({ 'jid': this.model.get('jid') });
+        if (!models.length) {
+            this.renderBookmarkForm();
+        } else {
+            models.forEach(model => model.destroy());
+        }
+    }
+};
+
+
+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);
+        }
+    },
+
+    addBookmarkViaEvent (ev) {
+        /* Add a bookmark as determined by the passed in
+         * event.
+         */
+        ev.preventDefault();
+        const jid = ev.target.getAttribute('data-room-jid');
+        api.rooms.open(jid, { 'bring_to_foreground': true });
+        _converse.chatboxviews.get(jid).renderBookmarkForm();
+    }
+}

src/templates/muc_bookmark_form.js → src/plugins/bookmark-views/templates/form.js

 import { html } from "lit-html";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 
 
 export default (o) => {

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

 import { html } from "lit-html";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 
 
 const bookmark_item = (o) => {

src/plugins/roomslist/view.js

@@ -90,8 +90,13 @@ const RoomsListView = View.extend({
         }
     },
 
-    removeBookmark: _converse.removeBookmarkViaEvent,
-    addBookmark: _converse.addBookmarkViaEvent,
+    removeBookmark (ev) {
+        _converse.removeBookmarkViaEvent(ev);
+    },
+
+    addBookmark (ev) {
+        _converse.addBookmarkViaEvent(ev);
+    },
 
     toggleRoomsList (ev) {
         if (ev && ev.preventDefault) { ev.preventDefault(); }