converse-roomslist.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. // Converse.js (A browser based XMPP chat client)
  2. // http://conversejs.org
  3. //
  4. // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
  5. // Licensed under the Mozilla Public License (MPLv2)
  6. //
  7. /*global define */
  8. /* This is a non-core Converse.js plugin which shows a list of currently open
  9. * rooms in the "Rooms Panel" of the ControlBox.
  10. */
  11. (function (root, factory) {
  12. define(["utils",
  13. "converse-core",
  14. "converse-muc",
  15. "tpl!rooms_list",
  16. "tpl!rooms_list_item"
  17. ], factory);
  18. }(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
  19. const { Backbone, Promise, Strophe, b64_sha1, sizzle, _ } = converse.env;
  20. const u = converse.env.utils;
  21. converse.plugins.add('converse-roomslist', {
  22. /* Optional dependencies are other plugins which might be
  23. * overridden or relied upon, and therefore need to be loaded before
  24. * this plugin. They are called "optional" because they might not be
  25. * available, in which case any overrides applicable to them will be
  26. * ignored.
  27. *
  28. * It's possible however to make optional dependencies non-optional.
  29. * If the setting "strict_plugin_dependencies" is set to true,
  30. * an error will be raised if the plugin is not found.
  31. *
  32. * NB: These plugins need to have already been loaded via require.js.
  33. */
  34. dependencies: ["converse-controlbox", "converse-muc", "converse-bookmarks"],
  35. initialize () {
  36. /* The initialize function gets called as soon as the plugin is
  37. * loaded by converse.js's plugin machinery.
  38. */
  39. const { _converse } = this,
  40. { __ } = _converse;
  41. _converse.OpenRooms = Backbone.Collection.extend({
  42. comparator (room) {
  43. if (room.get('bookmarked')) {
  44. const bookmark = _.head(_converse.bookmarksview.model.where({'jid': room.get('jid')}));
  45. return bookmark.get('name');
  46. } else {
  47. return room.get('name');
  48. }
  49. },
  50. initialize () {
  51. this.browserStorage = new Backbone.BrowserStorage[_converse.storage](
  52. b64_sha1(`converse.open-rooms-{_converse.bare_jid}`));
  53. _converse.chatboxes.on('add', this.onChatBoxAdded, this);
  54. _converse.chatboxes.on('change:bookmarked', this.onChatBoxChanged, this);
  55. _converse.chatboxes.on('change:name', this.onChatBoxChanged, this);
  56. _converse.chatboxes.on('change:num_unread', this.onChatBoxChanged, this);
  57. _converse.chatboxes.on('change:num_unread_general', this.onChatBoxChanged, this);
  58. _converse.chatboxes.on('remove', this.onChatBoxRemoved, this);
  59. this.reset(_.map(_converse.chatboxes.where({'type': 'chatroom'}), 'attributes'));
  60. },
  61. onChatBoxAdded (item) {
  62. if (item.get('type') === 'chatroom') {
  63. this.create(item.attributes);
  64. }
  65. },
  66. onChatBoxChanged (item) {
  67. if (item.get('type') === 'chatroom') {
  68. const room = this.get(item.get('jid'));
  69. if (!_.isNil(room)) {
  70. room.set(item.attributes);
  71. }
  72. }
  73. },
  74. onChatBoxRemoved (item) {
  75. if (item.get('type') === 'chatroom') {
  76. const room = this.get(item.get('jid'))
  77. this.remove(room);
  78. }
  79. }
  80. });
  81. _converse.RoomsList = Backbone.Model.extend({
  82. defaults: {
  83. "toggle-state": _converse.OPENED
  84. }
  85. });
  86. _converse.RoomsListElementView = Backbone.VDOMView.extend({
  87. initialize () {
  88. this.model.on('destroy', this.remove, this);
  89. this.model.on('remove', this.remove, this);
  90. this.model.on('change:bookmarked', this.render, this);
  91. this.model.on('change:name', this.render, this);
  92. this.model.on('change:num_unread', this.render, this);
  93. this.model.on('change:num_unread_general', this.render, this);
  94. },
  95. getRoomsListElementName () {
  96. if (this.model.get('bookmarked') && _converse.bookmarksview) {
  97. const bookmark = _.head(_converse.bookmarksview.model.where({'jid': this.model.get('jid')}));
  98. return bookmark.get('name');
  99. } else {
  100. return this.model.get('name');
  101. }
  102. },
  103. toHTML () {
  104. return tpl_rooms_list_item(
  105. _.extend(this.model.toJSON(), {
  106. // XXX: By the time this renders, the _converse.bookmarks
  107. // collection should already exist if bookmarks are
  108. // supported by the XMPP server. So we can use it
  109. // as a check for support (other ways of checking are async).
  110. 'allow_bookmarks': _converse.allow_bookmarks && _converse.bookmarks,
  111. 'info_leave_room': __('Leave this room'),
  112. 'info_remove_bookmark': __('Unbookmark this room'),
  113. 'info_add_bookmark': __('Bookmark this room'),
  114. 'info_title': __('Show more information on this room'),
  115. 'name': this.getRoomsListElementName(),
  116. 'open_title': __('Click to open this room')
  117. }));
  118. }
  119. });
  120. _converse.RoomsListView = Backbone.OrderedListView.extend({
  121. tagName: 'div',
  122. className: 'open-rooms-list list-container rooms-list-container',
  123. events: {
  124. 'click .add-bookmark': 'addBookmark',
  125. 'click .close-room': 'closeRoom',
  126. 'click .rooms-toggle': 'toggleRoomsList',
  127. 'click .remove-bookmark': 'removeBookmark',
  128. 'click .open-room': 'openRoom',
  129. },
  130. listSelector: '.rooms-list',
  131. ItemView: _converse.RoomsListElementView,
  132. subviewIndex: 'jid',
  133. initialize () {
  134. Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
  135. this.model.on('add', this.showOrHide, this);
  136. this.model.on('remove', this.showOrHide, this);
  137. const cachekey = `converse.roomslist${_converse.bare_jid}`;
  138. this.list_model = new _converse.RoomsList();
  139. this.list_model.id = cachekey;
  140. this.list_model.browserStorage = new Backbone.BrowserStorage[_converse.storage](
  141. b64_sha1(cachekey)
  142. );
  143. this.list_model.fetch();
  144. this.render();
  145. this.sortAndPositionAllItems();
  146. },
  147. render () {
  148. this.el.innerHTML = tpl_rooms_list({
  149. 'toggle_state': this.list_model.get('toggle-state'),
  150. 'desc_rooms': __('Click to toggle the rooms list'),
  151. 'label_rooms': __('Open Rooms'),
  152. '_converse': _converse
  153. });
  154. if (this.list_model.get('toggle-state') !== _converse.OPENED) {
  155. this.el.querySelector('.open-rooms-list').classList.add('collapsed');
  156. }
  157. this.showOrHide();
  158. this.insertIntoControlBox();
  159. return this;
  160. },
  161. insertIntoControlBox () {
  162. const controlboxview = _converse.chatboxviews.get('controlbox');
  163. if (!_.isUndefined(controlboxview) && !u.rootContains(_converse.root, this.el)) {
  164. const el = controlboxview.el.querySelector('.open-rooms-list');
  165. if (!_.isNull(el)) {
  166. el.parentNode.replaceChild(this.el, el);
  167. }
  168. }
  169. },
  170. hide () {
  171. u.hideElement(this.el);
  172. },
  173. show () {
  174. u.showElement(this.el);
  175. },
  176. openRoom (ev) {
  177. ev.preventDefault();
  178. const name = ev.target.textContent;
  179. const jid = ev.target.getAttribute('data-room-jid');
  180. const data = {
  181. 'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
  182. }
  183. _converse.api.rooms.open(jid, data);
  184. },
  185. closeRoom (ev) {
  186. ev.preventDefault();
  187. const name = ev.target.getAttribute('data-room-name');
  188. const jid = ev.target.getAttribute('data-room-jid');
  189. if (confirm(__("Are you sure you want to leave the room %1$s?", name))) {
  190. // TODO: replace with API call
  191. _converse.chatboxviews.get(jid).close();
  192. }
  193. },
  194. showOrHide (item) {
  195. if (!this.model.models.length) {
  196. u.hideElement(this.el);
  197. } else {
  198. u.showElement(this.el);
  199. }
  200. },
  201. removeBookmark: _converse.removeBookmarkViaEvent,
  202. addBookmark: _converse.addBookmarkViaEvent,
  203. toggleRoomsList (ev) {
  204. if (ev && ev.preventDefault) { ev.preventDefault(); }
  205. const icon_el = ev.target.querySelector('.fa');
  206. if (icon_el.classList.contains("fa-caret-down")) {
  207. utils.slideIn(this.el.querySelector('.open-rooms-list')).then(() => {
  208. this.list_model.save({'toggle-state': _converse.CLOSED});
  209. icon_el.classList.remove("fa-caret-down");
  210. icon_el.classList.add("fa-caret-right");
  211. });
  212. } else {
  213. utils.slideOut(this.el.querySelector('.open-rooms-list')).then(() => {
  214. this.list_model.save({'toggle-state': _converse.OPENED});
  215. icon_el.classList.remove("fa-caret-right");
  216. icon_el.classList.add("fa-caret-down");
  217. });
  218. }
  219. }
  220. });
  221. const initRoomsListView = function () {
  222. _converse.rooms_list_view = new _converse.RoomsListView(
  223. {'model': new _converse.OpenRooms() }
  224. );
  225. };
  226. if (_converse.allow_bookmarks) {
  227. u.onMultipleEvents([
  228. {'object': _converse, 'event': 'chatBoxesFetched'},
  229. {'object': _converse, 'event': 'roomsPanelRendered'},
  230. {'object': _converse, 'event': 'bookmarksInitialized'}
  231. ], initRoomsListView);
  232. } else {
  233. u.onMultipleEvents([
  234. {'object': _converse, 'event': 'chatBoxesFetched'},
  235. {'object': _converse, 'event': 'roomsPanelRendered'}
  236. ], initRoomsListView);
  237. }
  238. _converse.api.listen.on('reconnected', initRoomsListView);
  239. }
  240. });
  241. }));