1
0

detailsview.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. /**
  2. * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
  3. * SPDX-FileCopyrightText: 2015 ownCloud, Inc.
  4. * SPDX-License-Identifier: AGPL-3.0-or-later
  5. */
  6. (function() {
  7. /**
  8. * @class OCA.Files.DetailsView
  9. * @classdesc
  10. *
  11. * The details view show details about a selected file.
  12. *
  13. */
  14. var DetailsView = OC.Backbone.View.extend({
  15. id: 'app-sidebar',
  16. tabName: 'div',
  17. className: 'detailsView scroll-container',
  18. /**
  19. * List of detail tab views
  20. *
  21. * @type Array<OCA.Files.DetailTabView>
  22. */
  23. _tabViews: [],
  24. /**
  25. * List of detail file info views
  26. *
  27. * @type Array<OCA.Files.DetailFileInfoView>
  28. */
  29. _detailFileInfoViews: [],
  30. /**
  31. * Id of the currently selected tab
  32. *
  33. * @type string
  34. */
  35. _currentTabId: null,
  36. /**
  37. * Dirty flag, whether the view needs to be rerendered
  38. */
  39. _dirty: false,
  40. events: {
  41. 'click a.close': '_onClose',
  42. 'click .tabHeaders .tabHeader': '_onClickTab',
  43. 'keyup .tabHeaders .tabHeader': '_onKeyboardActivateTab'
  44. },
  45. /**
  46. * Initialize the details view
  47. */
  48. initialize: function() {
  49. this._tabViews = [];
  50. this._detailFileInfoViews = [];
  51. this._dirty = true;
  52. },
  53. _onClose: function(event) {
  54. OC.Apps.hideAppSidebar(this.$el);
  55. event.preventDefault();
  56. },
  57. _onClickTab: function(e) {
  58. var $target = $(e.target);
  59. e.preventDefault();
  60. if (!$target.hasClass('tabHeader')) {
  61. $target = $target.closest('.tabHeader');
  62. }
  63. var tabId = $target.attr('data-tabid');
  64. if (_.isUndefined(tabId)) {
  65. return;
  66. }
  67. this.selectTab(tabId);
  68. },
  69. _onKeyboardActivateTab: function (event) {
  70. if (event.key === " " || event.key === "Enter") {
  71. this._onClickTab(event);
  72. }
  73. },
  74. template: function(vars) {
  75. return OCA.Files.Templates['detailsview'](vars);
  76. },
  77. /**
  78. * Renders this details view
  79. */
  80. render: function() {
  81. var templateVars = {
  82. closeLabel: t('files', 'Close')
  83. };
  84. this._tabViews = this._tabViews.sort(function(tabA, tabB) {
  85. var orderA = tabA.order || 0;
  86. var orderB = tabB.order || 0;
  87. if (orderA === orderB) {
  88. return OC.Util.naturalSortCompare(tabA.getLabel(), tabB.getLabel());
  89. }
  90. return orderA - orderB;
  91. });
  92. templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
  93. return {
  94. tabId: tabView.id,
  95. label: tabView.getLabel(),
  96. tabIcon: tabView.getIcon()
  97. };
  98. });
  99. this.$el.html(this.template(templateVars));
  100. var $detailsContainer = this.$el.find('.detailFileInfoContainer');
  101. // render details
  102. _.each(this._detailFileInfoViews, function(detailView) {
  103. $detailsContainer.append(detailView.get$());
  104. });
  105. if (!this._currentTabId && this._tabViews.length > 0) {
  106. this._currentTabId = this._tabViews[0].id;
  107. }
  108. this.selectTab(this._currentTabId);
  109. this._updateTabVisibilities();
  110. this._dirty = false;
  111. },
  112. /**
  113. * Selects the given tab by id
  114. *
  115. * @param {string} tabId tab id
  116. */
  117. selectTab: function(tabId) {
  118. if (!tabId) {
  119. return;
  120. }
  121. var tabView = _.find(this._tabViews, function(tab) {
  122. return tab.id === tabId;
  123. });
  124. if (!tabView) {
  125. console.warn('Details view tab with id "' + tabId + '" not found');
  126. return;
  127. }
  128. this._currentTabId = tabId;
  129. var $tabsContainer = this.$el.find('.tabsContainer');
  130. var $tabEl = $tabsContainer.find('#' + tabId);
  131. // hide other tabs
  132. $tabsContainer.find('.tab').addClass('hidden');
  133. $tabsContainer.attr('class', 'tabsContainer');
  134. $tabsContainer.addClass(tabView.getTabsContainerExtraClasses());
  135. // tab already rendered ?
  136. if (!$tabEl.length) {
  137. // render tab
  138. $tabsContainer.append(tabView.$el);
  139. $tabEl = tabView.$el;
  140. }
  141. // this should trigger tab rendering
  142. tabView.setFileInfo(this.model);
  143. $tabEl.removeClass('hidden');
  144. // update tab headers
  145. var $tabHeaders = this.$el.find('.tabHeaders li');
  146. $tabHeaders.removeClass('selected');
  147. $tabHeaders.filterAttr('data-tabid', tabView.id).addClass('selected');
  148. },
  149. /**
  150. * Sets the file info to be displayed in the view
  151. *
  152. * @param {OCA.Files.FileInfoModel} fileInfo file info to set
  153. */
  154. setFileInfo: function(fileInfo) {
  155. this.model = fileInfo;
  156. if (this._dirty) {
  157. this.render();
  158. } else {
  159. this._updateTabVisibilities();
  160. }
  161. if (this._currentTabId) {
  162. // only update current tab, others will be updated on-demand
  163. var tabId = this._currentTabId;
  164. var tabView = _.find(this._tabViews, function(tab) {
  165. return tab.id === tabId;
  166. });
  167. tabView.setFileInfo(fileInfo);
  168. }
  169. _.each(this._detailFileInfoViews, function(detailView) {
  170. detailView.setFileInfo(fileInfo);
  171. });
  172. },
  173. /**
  174. * Update tab headers based on the current model
  175. */
  176. _updateTabVisibilities: function() {
  177. // update tab header visibilities
  178. var self = this;
  179. var deselect = false;
  180. var countVisible = 0;
  181. var $tabHeaders = this.$el.find('.tabHeaders li');
  182. _.each(this._tabViews, function(tabView) {
  183. var isVisible = tabView.canDisplay(self.model);
  184. if (isVisible) {
  185. countVisible += 1;
  186. }
  187. if (!isVisible && self._currentTabId === tabView.id) {
  188. deselect = true;
  189. }
  190. $tabHeaders.filterAttr('data-tabid', tabView.id).toggleClass('hidden', !isVisible);
  191. });
  192. // hide the whole container if there is only one tab
  193. this.$el.find('.tabHeaders').toggleClass('hidden', countVisible <= 1);
  194. if (deselect) {
  195. // select the first visible tab instead
  196. var visibleTabId = this.$el.find('.tabHeader:not(.hidden):first').attr('data-tabid');
  197. this.selectTab(visibleTabId);
  198. }
  199. },
  200. /**
  201. * Returns the file info.
  202. *
  203. * @return {OCA.Files.FileInfoModel} file info
  204. */
  205. getFileInfo: function() {
  206. return this.model;
  207. },
  208. /**
  209. * Adds a tab in the tab view
  210. *
  211. * @param {OCA.Files.DetailTabView} tab view
  212. */
  213. addTabView: function(tabView) {
  214. this._tabViews.push(tabView);
  215. this._dirty = true;
  216. },
  217. /**
  218. * Adds a detail view for file info.
  219. *
  220. * @param {OCA.Files.DetailFileInfoView} detail view
  221. */
  222. addDetailView: function(detailView) {
  223. this._detailFileInfoViews.push(detailView);
  224. this._dirty = true;
  225. },
  226. /**
  227. * Returns an array with the added DetailFileInfoViews.
  228. *
  229. * @return Array<OCA.Files.DetailFileInfoView> an array with the added
  230. * DetailFileInfoViews.
  231. */
  232. getDetailViews: function() {
  233. return [].concat(this._detailFileInfoViews);
  234. }
  235. });
  236. OCA.Files.DetailsView = DetailsView;
  237. })();