bookmarks: refactor to use VDOMView instead of OrderedListView
This commit is contained in:
JC Brand
parent
91397125ba
commit
c8b7e8ab99
|
|
@ -11,9 +11,7 @@
|
|||
*/
|
||||
import "backbone.nativeview";
|
||||
import "@converse/headless/converse-muc";
|
||||
import { OrderedListView } from "backbone.overview";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import tpl_bookmark from "templates/bookmark.html";
|
||||
import tpl_bookmarks_list from "templates/bookmarks_list.html"
|
||||
import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html";
|
||||
import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";
|
||||
|
|
@ -211,25 +209,7 @@ converse.plugins.add('converse-bookmark-views', {
|
|||
});
|
||||
|
||||
|
||||
_converse.BookmarkView = Backbone.VDOMView.extend({
|
||||
toHTML () {
|
||||
return tpl_bookmark({
|
||||
'hidden': _converse.hide_open_bookmarks &&
|
||||
_converse.chatboxes.where({'jid': this.model.get('jid')}).length,
|
||||
'bookmarked': true,
|
||||
'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'),
|
||||
'jid': this.model.get('jid'),
|
||||
'name': Strophe.xmlunescape(this.model.get('name')),
|
||||
'open_title': __('Click to open this groupchat')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
_converse.BookmarksView = OrderedListView.extend({
|
||||
_converse.BookmarksView = Backbone.VDOMView.extend({
|
||||
tagName: 'div',
|
||||
className: 'bookmarks-list list-container rooms-list-container',
|
||||
events: {
|
||||
|
|
@ -238,41 +218,42 @@ converse.plugins.add('converse-bookmark-views', {
|
|||
'click .remove-bookmark': 'removeBookmark',
|
||||
'click .open-room': 'openRoom',
|
||||
},
|
||||
listSelector: '.rooms-list',
|
||||
ItemView: _converse.BookmarkView,
|
||||
subviewIndex: 'jid',
|
||||
|
||||
initialize () {
|
||||
OrderedListView.prototype.initialize.apply(this, arguments);
|
||||
this.listenTo(this.model, 'add', this.render);
|
||||
this.listenTo(this.model, 'remove', this.render);
|
||||
|
||||
this.listenTo(this.model, 'add', this.showOrHide);
|
||||
this.listenTo(this.model, 'remove', this.showOrHide);
|
||||
this.listenTo(_converse.chatboxes, 'add', this.render);
|
||||
this.listenTo(_converse.chatboxes, 'remove', this.render);
|
||||
|
||||
this.listenTo(_converse.chatboxes, 'add', this.renderBookmarkListElement);
|
||||
this.listenTo(_converse.chatboxes, 'remove', this.renderBookmarkListElement);
|
||||
|
||||
const storage = _converse.config.get('storage'),
|
||||
id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
|
||||
this.list_model = new _converse.BookmarksList({'id': id});
|
||||
this.list_model.browserStorage = _converse.createStore(id, storage);
|
||||
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.sortAndPositionAllItems();
|
||||
this.insertIntoControlBox();
|
||||
}
|
||||
this.list_model.fetch({'success': render, 'error': render});
|
||||
},
|
||||
|
||||
render () {
|
||||
this.el.innerHTML = tpl_bookmarks_list({
|
||||
'toggle_state': this.list_model.get('toggle-state'),
|
||||
toHTML () {
|
||||
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'),
|
||||
'_converse': _converse
|
||||
'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')))
|
||||
},
|
||||
'hidden': this.model.getUnopenedBookmarks().length && true
|
||||
});
|
||||
this.showOrHide();
|
||||
this.insertIntoControlBox();
|
||||
return this;
|
||||
},
|
||||
|
||||
insertIntoControlBox () {
|
||||
|
|
@ -298,28 +279,6 @@ converse.plugins.add('converse-bookmark-views', {
|
|||
removeBookmark: _converse.removeBookmarkViaEvent,
|
||||
addBookmark: _converse.addBookmarkViaEvent,
|
||||
|
||||
renderBookmarkListElement (chatbox) {
|
||||
const bookmarkview = this.get(chatbox.get('jid'));
|
||||
if (bookmarkview) {
|
||||
bookmarkview.render();
|
||||
this.showOrHide();
|
||||
}
|
||||
},
|
||||
|
||||
showOrHide () {
|
||||
if (_converse.hide_open_bookmarks) {
|
||||
const bookmarks = this.model.filter((bookmark) =>
|
||||
!_converse.chatboxes.get(bookmark.get('jid')));
|
||||
if (!bookmarks.length) {
|
||||
u.hideElement(this.el);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.model.models.length) {
|
||||
u.showElement(this.el);
|
||||
}
|
||||
},
|
||||
|
||||
toggleBookmarksList (ev) {
|
||||
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
||||
const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa');
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@
|
|||
*/
|
||||
import "@converse/headless/converse-muc";
|
||||
import converse from "@converse/headless/converse-core";
|
||||
import { get } from "lodash";
|
||||
|
||||
const { Backbone, Strophe, $iq, sizzle, _ } = converse.env;
|
||||
const { Backbone, Strophe, $iq, sizzle } = converse.env;
|
||||
const u = converse.env.utils;
|
||||
|
||||
|
||||
|
|
@ -91,7 +92,11 @@ converse.plugins.add('converse-bookmarks', {
|
|||
}
|
||||
}
|
||||
|
||||
_converse.Bookmark = Backbone.Model;
|
||||
_converse.Bookmark = Backbone.Model.extend({
|
||||
getDisplayName () {
|
||||
return Strophe.xmlunescape(this.get('name'));
|
||||
}
|
||||
});
|
||||
|
||||
_converse.Bookmarks = _converse.Collection.extend({
|
||||
model: _converse.Bookmark,
|
||||
|
|
@ -213,13 +218,13 @@ converse.plugins.add('converse-bookmarks', {
|
|||
`items[node="storage:bookmarks"] item storage[xmlns="storage:bookmarks"] conference`,
|
||||
stanza
|
||||
);
|
||||
_.forEach(bookmarks, (bookmark) => {
|
||||
bookmarks.forEach(bookmark => {
|
||||
const jid = bookmark.getAttribute('jid');
|
||||
this.create({
|
||||
'jid': jid,
|
||||
'name': bookmark.getAttribute('name') || jid,
|
||||
'autojoin': bookmark.getAttribute('autojoin') === 'true',
|
||||
'nick': _.get(bookmark.querySelector('nick'), 'textContent')
|
||||
'nick': get(bookmark.querySelector('nick'), 'textContent')
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -243,6 +248,10 @@ converse.plugins.add('converse-bookmarks', {
|
|||
return deferred.reject(new Error("Could not fetch bookmarks"));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getUnopenedBookmarks () {
|
||||
return this.filter(b => !_converse.chatboxes.get(b.get('jid')));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
|
||||
<a class="list-item-link open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
|
||||
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
|
||||
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
|
||||
title="{{{o.info_remove_bookmark}}}" href="#"></a>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,16 @@
|
|||
<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 {[ } ]}"></div>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user