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

Remove jQuery from converse-bookmarks

Browse Source
This commit is contained in:
JC Brand 2017-12-23 20:56:20 +00:00
parent f84c443bd2
commit a6d4419c04
3 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spec/bookmarks.js
View File

@ -482,12 +482,14 @@
test_utils.waitUntil(function () { test_utils.waitUntil(function () {
return $('#chatrooms dl.bookmarks dd:visible').length; return $('#chatrooms dl.bookmarks dd:visible').length;
}, 300).then(function () { }, 300).then(function () {
expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1); expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED); expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);
$('#chatrooms .bookmarks-toggle').click(); $('#chatrooms .bookmarks-toggle').click();
expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(0); expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeTruthy();
expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.CLOSED); expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.CLOSED);
$('#chatrooms .bookmarks-toggle').click(); $('#chatrooms .bookmarks-toggle').click();
expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1); expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED); expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);
done(); done();

73
src/converse-bookmarks.js
View File

@ -10,8 +10,7 @@
* in XEP-0048. * in XEP-0048.
*/ */
(function (root, factory) { (function (root, factory) {
define(["jquery.noconflict", define(["utils",
"utils",
"converse-core", "converse-core",
"converse-muc", "converse-muc",
"tpl!chatroom_bookmark_form", "tpl!chatroom_bookmark_form",
@ -21,8 +20,7 @@
], ],
factory); factory);
}(this, function ( }(this, function (
$, u,
utils,
converse, converse,
muc, muc,
tpl_chatroom_bookmark_form, tpl_chatroom_bookmark_form,
@ -135,7 +133,7 @@
child.classList.add('hidden'); child.classList.add('hidden');
}); });
// Remove any existing forms // Remove any existing forms
_.each(body.querySelectorAll('.chatroom-form-container'), utils.removeElement); _.each(body.querySelectorAll('.chatroom-form-container'), u.removeElement);
body.insertAdjacentHTML( body.insertAdjacentHTML(
'beforeend', 'beforeend',
@ -163,18 +161,14 @@
onBookmarkFormSubmitted (ev) { onBookmarkFormSubmitted (ev) {
ev.preventDefault(); ev.preventDefault();
const { _converse } = this.__super__; const { _converse } = this.__super__;
const $form = $(ev.target), that = this;
_converse.bookmarks.createBookmark({ _converse.bookmarks.createBookmark({
'jid': this.model.get('jid'), 'jid': this.model.get('jid'),
'autojoin': $form.find('input[name="autojoin"]').prop('checked'), 'autojoin': _.get(ev.target.querySelector('input[name="autojoin"]'), 'checked') || false,
'name': $form.find('input[name=name]').val(), 'name': _.get(ev.target.querySelector('input[name=name]'), 'value'),
'nick': $form.find('input[name=nick]').val() 'nick': _.get(ev.target.querySelector('input[name=nick]'), 'value')
}); });
this.$el.find('div.chatroom-form-container').hide( u.removeElement(this.el.querySelector('div.chatroom-form-container'));
function () { this.renderAfterTransition();
$(this).remove();
that.renderAfterTransition();
});
}, },
toggleBookmark (ev) { toggleBookmark (ev) {
@ -249,6 +243,7 @@
_converse.Bookmarks = Backbone.Collection.extend({ _converse.Bookmarks = Backbone.Collection.extend({
model: _converse.Bookmark, model: _converse.Bookmark,
comparator: 'name',
initialize () { initialize () {
this.on('add', _.flow(this.openBookmarkedRoom, this.markRoomAsBookmarked)); this.on('add', _.flow(this.openBookmarkedRoom, this.markRoomAsBookmarked));
@ -270,7 +265,7 @@
}, },
fetchBookmarks () { fetchBookmarks () {
const deferred = utils.getResolveablePromise(); const deferred = u.getResolveablePromise();
if (this.browserStorage.records.length > 0) { if (this.browserStorage.records.length > 0) {
this.fetch({ this.fetch({
'success': _.bind(this.onCachedBookmarksFetched, this, deferred), 'success': _.bind(this.onCachedBookmarksFetched, this, deferred),
@ -363,12 +358,12 @@
}, },
onBookmarksReceived (deferred, iq) { onBookmarksReceived (deferred, iq) {
const bookmarks = $(iq).find( const bookmarks = sizzle(
'items[node="storage:bookmarks"] item[id="current"] storage conference' 'items[node="storage:bookmarks"] item[id="current"] storage conference',
); iq
const that = this; )
_.forEach(bookmarks, function (bookmark) { _.forEach(bookmarks, (bookmark) => {
that.create({ this.create({
'jid': bookmark.getAttribute('jid'), 'jid': bookmark.getAttribute('jid'),
'name': bookmark.getAttribute('name'), 'name': bookmark.getAttribute('name'),
'autojoin': bookmark.getAttribute('autojoin') === 'true', 'autojoin': bookmark.getAttribute('autojoin') === 'true',
@ -392,7 +387,7 @@
_converse.BookmarksView = Backbone.View.extend({ _converse.BookmarksView = Backbone.View.extend({
tagName: 'div', tagName: 'div',
className: 'bookmarks-list, rooms-list-container', className: 'bookmarks-list rooms-list-container hidden',
events: { events: {
'click .add-bookmark': 'addBookmark', 'click .add-bookmark': 'addBookmark',
'click .bookmarks-toggle': 'toggleBookmarksList', 'click .bookmarks-toggle': 'toggleBookmarksList',
@ -416,20 +411,19 @@
}, },
render () { render () {
this.$el.html(tpl_bookmarks_list({ this.el.innerHTML = tpl_bookmarks_list({
'toggle_state': this.list_model.get('toggle-state'), 'toggle_state': this.list_model.get('toggle-state'),
'desc_bookmarks': __('Click to toggle the bookmarks list'), 'desc_bookmarks': __('Click to toggle the bookmarks list'),
'label_bookmarks': __('Bookmarks') 'label_bookmarks': __('Bookmarks'),
})).hide(); '_converse': _converse
if (this.list_model.get('toggle-state') !== _converse.OPENED) { });
this.$('.bookmarks').hide();
}
this.model.each(this.renderBookmarkListElement.bind(this)); this.model.each(this.renderBookmarkListElement.bind(this));
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview)) { if (!_.isUndefined(controlboxview)) {
this.$el.prependTo(controlboxview.$('#chatrooms')); const chatrooms_el = controlboxview.el.querySelector('#chatrooms');
chatrooms_el.insertAdjacentElement('afterbegin', this.el);
} }
return this.$el; return this;
}, },
removeBookmark: _converse.removeBookmarkViaEvent, removeBookmark: _converse.removeBookmarkViaEvent,
@ -477,13 +471,11 @@
}, },
show () { show () {
if (!this.$el.is(':visible')) { u.showElement(this.el);
this.$el.show();
}
}, },
hide () { hide () {
this.$el.hide(); u.hideElement(this.el);
}, },
removeBookmarkListElement (item) { removeBookmarkListElement (item) {
@ -499,14 +491,15 @@
toggleBookmarksList (ev) { toggleBookmarksList (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const $el = $(ev.target); if (u.hasClass(ev.target, 'icon-opened')) {
if ($el.hasClass("icon-opened")) { u.slideIn(this.el.querySelector('.bookmarks'));
this.$('.bookmarks').slideUp('fast');
this.list_model.save({'toggle-state': _converse.CLOSED}); this.list_model.save({'toggle-state': _converse.CLOSED});
$el.removeClass("icon-opened").addClass("icon-closed"); ev.target.classList.remove("icon-opened");
ev.target.classList.add("icon-closed");
} else { } else {
$el.removeClass("icon-closed").addClass("icon-opened"); ev.target.classList.remove("icon-closed");
this.$('.bookmarks').slideDown('fast'); ev.target.classList.add("icon-opened");
u.slideOut(this.el.querySelector('.bookmarks'));
this.list_model.save({'toggle-state': _converse.OPENED}); this.list_model.save({'toggle-state': _converse.OPENED});
} }
} }

2
src/templates/bookmarks_list.html
View File

@ -1,2 +1,2 @@
<a href="#" class="rooms-toggle bookmarks-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_bookmarks}}}">{{{o.label_bookmarks}}}</a> <a href="#" class="rooms-toggle bookmarks-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_bookmarks}}}">{{{o.label_bookmarks}}}</a>
<dl class="bookmarks rooms-list"></dl> <dl class="bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></dl>