Skip to content

C
converse.js
Commit c8b7e8ab authored by JC Brand's avatar JC Brand
Browse files
Options

bookmarks: refactor to use VDOMView instead of OrderedListView

parent 91397125
Show whitespace changes
Inline Side-by-side
Showing with 52 additions and 78 deletions
src/converse-bookmark-views.js
View file @ c8b7e8ab
......@@ -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.showOrHide);
this.listenTo(this.model, 'remove', this.showOrHide);
this.listenTo(this.model, 'add', this.render);
this.listenTo(this.model, 'remove', this.render);
this.listenTo(_converse.chatboxes, 'add', this.renderBookmarkListElement);
this.listenTo(_converse.chatboxes, 'remove', this.renderBookmarkListElement);
this.listenTo(_converse.chatboxes, 'add', this.render);
this.listenTo(_converse.chatboxes, 'remove', this.render);
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');
......
src/headless/converse-bookmarks.js
View file @ c8b7e8ab
......@@ -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')));
}
});
......
src/templates/bookmark.html deleted 100644 → 0
View file @ 91397125
<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>
src/templates/bookmarks_list.html
View file @ c8b7e8ab
<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> {{{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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7