1
0

detailsview.js 6.3 KB

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