Commit c8b7e8ab authored by JC Brand's avatar JC Brand

bookmarks: refactor to use VDOMView instead of OrderedListView

parent 91397125
...@@ -11,9 +11,7 @@ ...@@ -11,9 +11,7 @@
*/ */
import "backbone.nativeview"; import "backbone.nativeview";
import "@converse/headless/converse-muc"; import "@converse/headless/converse-muc";
import { OrderedListView } from "backbone.overview";
import converse from "@converse/headless/converse-core"; 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_bookmarks_list from "templates/bookmarks_list.html"
import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html"; import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html";
import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html"; import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";
...@@ -211,25 +209,7 @@ converse.plugins.add('converse-bookmark-views', { ...@@ -211,25 +209,7 @@ converse.plugins.add('converse-bookmark-views', {
}); });
_converse.BookmarkView = Backbone.VDOMView.extend({ _converse.BookmarksView = 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({
tagName: 'div', tagName: 'div',
className: 'bookmarks-list list-container rooms-list-container', className: 'bookmarks-list list-container rooms-list-container',
events: { events: {
...@@ -238,41 +218,42 @@ converse.plugins.add('converse-bookmark-views', { ...@@ -238,41 +218,42 @@ converse.plugins.add('converse-bookmark-views', {
'click .remove-bookmark': 'removeBookmark', 'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom', 'click .open-room': 'openRoom',
}, },
listSelector: '.rooms-list',
ItemView: _converse.BookmarkView,
subviewIndex: 'jid',
initialize () { 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.renderBookmarkListElement); this.listenTo(_converse.chatboxes, 'add', this.render);
this.listenTo(_converse.chatboxes, 'remove', this.renderBookmarkListElement); this.listenTo(_converse.chatboxes, 'remove', this.render);
const storage = _converse.config.get('storage'), const id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
id = `converse.room-bookmarks${_converse.bare_jid}-list-model`; this.list_model = new _converse.BookmarksList({id});
this.list_model = new _converse.BookmarksList({'id': id}); this.list_model.browserStorage = _converse.createStore(id);
this.list_model.browserStorage = _converse.createStore(id, storage);
const render = () => { const render = () => {
this.render(); this.render();
this.sortAndPositionAllItems(); this.insertIntoControlBox();
} }
this.list_model.fetch({'success': render, 'error': render}); this.list_model.fetch({'success': render, 'error': render});
}, },
render () { toHTML () {
this.el.innerHTML = tpl_bookmarks_list({ return tpl_bookmarks_list({
'toggle_state': this.list_model.get('toggle-state'), '_converse': _converse,
'bookmarks': this.model,
'desc_bookmarks': __('Click to toggle the bookmarks list'), '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'), '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 () { insertIntoControlBox () {
...@@ -298,28 +279,6 @@ converse.plugins.add('converse-bookmark-views', { ...@@ -298,28 +279,6 @@ converse.plugins.add('converse-bookmark-views', {
removeBookmark: _converse.removeBookmarkViaEvent, removeBookmark: _converse.removeBookmarkViaEvent,
addBookmark: _converse.addBookmarkViaEvent, 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) { toggleBookmarksList (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa'); const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa');
......
...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
*/ */
import "@converse/headless/converse-muc"; import "@converse/headless/converse-muc";
import converse from "@converse/headless/converse-core"; 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; const u = converse.env.utils;
...@@ -91,7 +92,11 @@ converse.plugins.add('converse-bookmarks', { ...@@ -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({ _converse.Bookmarks = _converse.Collection.extend({
model: _converse.Bookmark, model: _converse.Bookmark,
...@@ -213,13 +218,13 @@ converse.plugins.add('converse-bookmarks', { ...@@ -213,13 +218,13 @@ converse.plugins.add('converse-bookmarks', {
`items[node="storage:bookmarks"] item storage[xmlns="storage:bookmarks"] conference`, `items[node="storage:bookmarks"] item storage[xmlns="storage:bookmarks"] conference`,
stanza stanza
); );
_.forEach(bookmarks, (bookmark) => { bookmarks.forEach(bookmark => {
const jid = bookmark.getAttribute('jid'); const jid = bookmark.getAttribute('jid');
this.create({ this.create({
'jid': jid, 'jid': jid,
'name': bookmark.getAttribute('name') || jid, 'name': bookmark.getAttribute('name') || jid,
'autojoin': bookmark.getAttribute('autojoin') === 'true', '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', { ...@@ -243,6 +248,10 @@ converse.plugins.add('converse-bookmarks', {
return deferred.reject(new Error("Could not fetch bookmarks")); return deferred.reject(new Error("Could not fetch bookmarks"));
} }
} }
},
getUnopenedBookmarks () {
return this.filter(b => !_converse.chatboxes.get(b.get('jid')));
} }
}); });
......
<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>
<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}"> <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 class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_bookmarks}}}</a> </span> {{{o.label_bookmarks}}}</a>
<div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>
<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>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment