Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Make toggling of rooms list reactive and remove imperative code

Browse Source
This commit is contained in:
JC Brand 2022-10-02 15:34:00 +02:00
parent 1a8ae3dcbe
commit ef16a52ced
5 changed files with 16 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/headless/plugins/bookmarks/index.js
View File

@ -8,7 +8,6 @@ import "@converse/headless/plugins/muc/index.js";
import Bookmark from './model.js';
import Bookmarks from './collection.js';
import { Collection } from "@converse/skeletor/src/collection.js";
import { Model } from '@converse/skeletor/src/model.js';
import { _converse, api, converse } from "@converse/headless/core.js";
import { initBookmarks, getNicknameFromBookmark, handleBookmarksPush } from './utils.js';
@ -57,12 +56,6 @@ converse.plugins.add('converse-bookmarks', {
_converse.Bookmark = Bookmark;
_converse.Bookmarks = Collection.extend(Bookmarks);
_converse.BookmarksList = Model.extend({
defaults: {
"toggle-state": _converse.OPENED
}
});
api.listen.on('addClientFeatures', () => {
if (api.settings.get('allow_bookmarks')) {
api.disco.own.features.add(Strophe.NS.BOOKMARKS + '+notify')

3
src/plugins/bookmark-views/components/bookmarks-list.js
View File

@ -2,6 +2,7 @@ import debounce from "lodash-es/debounce";
import tpl_bookmarks_list from './templates/list.js';
import tpl_spinner from "templates/spinner.js";
import { CustomElement } from 'shared/components/element.js';
import { Model } from '@converse/skeletor/src/model.js';
import { _converse, api } from '@converse/headless/core.js';
import { initStorage } from '@converse/headless/utils/storage.js';
@ -23,7 +24,7 @@ export default class BookmarksView extends CustomElement {
this.listenTo(chatboxes, 'remove', () => this.requestUpdate());
const id = `converse.bookmarks-list-model-${_converse.bare_jid}`;
this.model = new _converse.BookmarksList({ id });
this.model = new Model({ id });
initStorage(this.model, id);
this.listenTo(this.model, 'change', () => this.requestUpdate());

3
src/plugins/roomslist/model.js
View File

@ -9,7 +9,7 @@ const RoomsListModel = Model.extend({
return {
'muc_domain': api.settings.get('muc_domain'),
'nick': _converse.getDefaultMUCNickname(),
'toggle-state': _converse.OPENED,
'toggle_state': _converse.OPENED,
};
},
@ -25,4 +25,3 @@ const RoomsListModel = Model.extend({
});
export default RoomsListModel;

5
src/plugins/roomslist/templates/roomslist.js
View File

@ -77,12 +77,13 @@ export default (o) => {
const i18n_title_list_rooms = __('Query for groupchats');
const i18n_title_new_room = __('Add a new groupchat');
const i18n_show_bookmarks = __('Show bookmarked groupchats');
const is_closed = o.model.get('toggle_state') === _converse.CLOSED;
return html`
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--groupchats">
<a class="list-toggle open-rooms-toggle" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
<converse-icon
class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
class="fa ${ is_closed ? 'fa-caret-right' : 'fa-caret-down' }"
size="1em"
color="var(--muc-color)"></converse-icon>
${i18n_heading_chatrooms}
@ -109,7 +110,7 @@ export default (o) => {
</div>
<div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
<div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
<div class="items-list rooms-list open-rooms-list ${ is_closed ? 'collapsed' : '' }">
${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
</div>
</div>`;

30
src/plugins/roomslist/view.js
View File

@ -17,10 +17,11 @@ export class RoomsList extends CustomElement {
initStorage(this.model, id);
this.model.fetch();
this.listenTo(_converse.chatboxes, 'add', this.renderIfChatRoom)
this.listenTo(_converse.chatboxes, 'remove', this.renderIfChatRoom)
this.listenTo(_converse.chatboxes, 'destroy', this.renderIfChatRoom)
this.listenTo(_converse.chatboxes, 'change', this.renderIfRelevantChange)
this.listenTo(_converse.chatboxes, 'add', this.renderIfChatRoom);
this.listenTo(_converse.chatboxes, 'remove', this.renderIfChatRoom);
this.listenTo(_converse.chatboxes, 'destroy', this.renderIfChatRoom);
this.listenTo(_converse.chatboxes, 'change', this.renderIfRelevantChange);
this.listenTo(this.model, 'change', () => this.requestUpdate());
this.requestUpdate();
}
@ -42,15 +43,13 @@ export class RoomsList extends CustomElement {
'addBookmark': ev => this.addBookmark(ev),
'allow_bookmarks': api.settings.get('allow_bookmarks') && _converse.bookmarks,
'closeRoom': ev => this.closeRoom(ev),
'collapsed': this.model.get('toggle-state') !== _converse.OPENED,
'currently_open': room => isUniView() && !room.get('hidden'),
'model': this.model,
'openRoom': ev => this.openRoom(ev),
'removeBookmark': ev => this.removeBookmark(ev),
'rooms': _converse.chatboxes.filter(m => m.get('type') === _converse.CHATROOMS_TYPE),
'showRoomDetailsModal': ev => this.showRoomDetailsModal(ev),
'toggleRoomsList': ev => this.toggleRoomsList(ev),
'toggle_state': this.model.get('toggle-state')
'toggleRoomsList': ev => this.toggleRoomsList(ev)
});
}
@ -92,20 +91,11 @@ export class RoomsList extends CustomElement {
toggleRoomsList (ev) {
ev?.preventDefault?.();
const target = ev.currentTarget;
const icon_el = target.matches('.fa') ? target : target.querySelector('.fa');
if (icon_el.classList.contains("fa-caret-down")) {
u.slideIn(this.querySelector('.open-rooms-list')).then(() => {
this.model.save({'toggle-state': _converse.CLOSED});
icon_el.classList.remove("fa-caret-down");
icon_el.classList.add("fa-caret-right");
});
const list_el = this.querySelector('.open-rooms-list');
if (this.model.get('toggle_state') === _converse.CLOSED) {
u.slideOut(list_el).then(() => this.model.save({'toggle_state': _converse.OPENED}));
} else {
u.slideOut(this.querySelector('.open-rooms-list')).then(() => {
this.model.save({'toggle-state': _converse.OPENED});
icon_el.classList.remove("fa-caret-right");
icon_el.classList.add("fa-caret-down");
});
u.slideIn(list_el).then(() => this.model.save({'toggle_state': _converse.CLOSED}));
}
}
}