Turn BookmarksView into a custom element
This commit is contained in:
parent
b9bf577ccd
commit
ccfb29f1b3
@ -26,6 +26,7 @@ OMEMO messages are gone and cannot be recovered on that device. See [muc_clear_m
|
|||||||
|
|
||||||
Removed events:
|
Removed events:
|
||||||
* `chatBoxInsertedIntoDOM`
|
* `chatBoxInsertedIntoDOM`
|
||||||
|
* `bookmarkViewsInitialized`
|
||||||
|
|
||||||
## 7.0.2 (2020-11-23)
|
## 7.0.2 (2020-11-23)
|
||||||
|
|
||||||
|
@ -1,14 +1,16 @@
|
|||||||
import tpl_bookmarks_list from './templates/list.js';
|
import tpl_bookmarks_list from './templates/list.js';
|
||||||
import { View } from '@converse/skeletor/src/view.js';
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
||||||
import { _converse, api, converse } from '@converse/headless/core';
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
|
|
||||||
const { Strophe } = converse.env;
|
const { Strophe } = converse.env;
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
|
|
||||||
const BookmarksView = View.extend({
|
export default class BookmarksView extends ElementView {
|
||||||
tagName: 'span',
|
|
||||||
|
async initialize () {
|
||||||
|
await api.waitUntil('bookmarksInitialized');
|
||||||
|
this.model = _converse.bookmarks;
|
||||||
|
|
||||||
initialize () {
|
|
||||||
this.listenTo(this.model, 'add', this.render);
|
this.listenTo(this.model, 'add', this.render);
|
||||||
this.listenTo(this.model, 'remove', this.render);
|
this.listenTo(this.model, 'remove', this.render);
|
||||||
|
|
||||||
@ -24,7 +26,7 @@ const BookmarksView = View.extend({
|
|||||||
this.insertIntoControlBox();
|
this.insertIntoControlBox();
|
||||||
};
|
};
|
||||||
this.list_model.fetch({ 'success': render, 'error': render });
|
this.list_model.fetch({ 'success': render, 'error': render });
|
||||||
},
|
}
|
||||||
|
|
||||||
toHTML () {
|
toHTML () {
|
||||||
const is_hidden = b => !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(b.get('jid')));
|
const is_hidden = b => !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(b.get('jid')));
|
||||||
@ -38,7 +40,7 @@ const BookmarksView = View.extend({
|
|||||||
'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
|
'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
|
||||||
'toggle_state': this.list_model.get('toggle-state')
|
'toggle_state': this.list_model.get('toggle-state')
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
|
|
||||||
insertIntoControlBox () {
|
insertIntoControlBox () {
|
||||||
const controlboxview = _converse.chatboxviews.get('controlbox');
|
const controlboxview = _converse.chatboxviews.get('controlbox');
|
||||||
@ -46,9 +48,9 @@ const BookmarksView = View.extend({
|
|||||||
const el = controlboxview.el.querySelector('.list-container--bookmarks');
|
const el = controlboxview.el.querySelector('.list-container--bookmarks');
|
||||||
el && el.parentNode.replaceChild(this.el, el);
|
el && el.parentNode.replaceChild(this.el, el);
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
openRoom (ev) {
|
openRoom (ev) { // eslint-disable-line class-methods-use-this
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
const name = ev.target.textContent;
|
const name = ev.target.textContent;
|
||||||
const jid = ev.target.getAttribute('data-room-jid');
|
const jid = ev.target.getAttribute('data-room-jid');
|
||||||
@ -56,11 +58,11 @@ const BookmarksView = View.extend({
|
|||||||
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
|
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
|
||||||
};
|
};
|
||||||
api.rooms.open(jid, data, true);
|
api.rooms.open(jid, data, true);
|
||||||
},
|
}
|
||||||
|
|
||||||
removeBookmark (ev) {
|
removeBookmark (ev) { // eslint-disable-line class-methods-use-this
|
||||||
_converse.removeBookmarkViaEvent(ev);
|
_converse.removeBookmarkViaEvent(ev);
|
||||||
},
|
}
|
||||||
|
|
||||||
toggleBookmarksList (ev) {
|
toggleBookmarksList (ev) {
|
||||||
if (ev && ev.preventDefault) {
|
if (ev && ev.preventDefault) {
|
||||||
@ -79,6 +81,6 @@ const BookmarksView = View.extend({
|
|||||||
this.list_model.save({ 'toggle-state': _converse.OPENED });
|
this.list_model.save({ 'toggle-state': _converse.OPENED });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
export default BookmarksView;
|
api.elements.define('converse-bookmarks', BookmarksView);
|
||||||
|
@ -12,17 +12,6 @@ import { _converse, api, converse } from '@converse/headless/core';
|
|||||||
import { bookmarkableChatRoomView, eventMethods } from './mixins.js';
|
import { bookmarkableChatRoomView, eventMethods } from './mixins.js';
|
||||||
import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/utils';
|
import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/utils';
|
||||||
|
|
||||||
const initBookmarkViews = async function () {
|
|
||||||
await api.waitUntil('roomsPanelRendered');
|
|
||||||
_converse.bookmarksview = new _converse.BookmarksView({ 'model': _converse.bookmarks });
|
|
||||||
/**
|
|
||||||
* Triggered once the _converse.Bookmarks collection and _converse.BookmarksView view
|
|
||||||
* has been created and cached bookmarks have been fetched.
|
|
||||||
* @event _converse#bookmarkViewsInitialized
|
|
||||||
* @example _converse.api.listen.on('bookmarkViewsInitialized', () => { ... });
|
|
||||||
*/
|
|
||||||
api.trigger('bookmarkViewsInitialized');
|
|
||||||
};
|
|
||||||
|
|
||||||
converse.plugins.add('converse-bookmark-views', {
|
converse.plugins.add('converse-bookmark-views', {
|
||||||
/* Plugin dependencies are other plugins which might be
|
/* Plugin dependencies are other plugins which might be
|
||||||
@ -74,8 +63,6 @@ converse.plugins.add('converse-bookmark-views', {
|
|||||||
return buttons;
|
return buttons;
|
||||||
});
|
});
|
||||||
|
|
||||||
api.listen.on('bookmarksInitialized', initBookmarkViews);
|
|
||||||
api.listen.on('chatRoomViewInitialized', view => view.setBookmarkState());
|
api.listen.on('chatRoomViewInitialized', view => view.setBookmarkState());
|
||||||
/************************ END Event Handlers ************************/
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { html } from 'lit-html';
|
import { html } from 'lit-html';
|
||||||
|
import { api } from '@converse/headless/core';
|
||||||
|
|
||||||
export default (o) => html`
|
export default (o) => html`
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
@ -7,8 +8,10 @@ export default (o) => html`
|
|||||||
${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
|
${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
|
||||||
</div>
|
</div>
|
||||||
<div class="controlbox-panes">
|
<div class="controlbox-panes">
|
||||||
<converse-headlines-panel></converse-headlines-panel>
|
${ api.connection.connected() ? html`
|
||||||
<converse-rooms-list></converse-rooms-list>
|
<converse-headlines-panel></converse-headlines-panel>
|
||||||
|
<converse-rooms-list></converse-rooms-list>
|
||||||
|
<converse-bookmarks></converse-bookmarks>` : '' }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user