1
0

mainfileinfodetailview.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  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.MainFileInfoDetailView
  13. * @classdesc
  14. *
  15. * Displays main details about a file
  16. *
  17. */
  18. var MainFileInfoDetailView = OCA.Files.DetailFileInfoView.extend(
  19. /** @lends OCA.Files.MainFileInfoDetailView.prototype */ {
  20. className: 'mainFileInfoView',
  21. /**
  22. * Associated file list instance, for file actions
  23. *
  24. * @type {OCA.Files.FileList}
  25. */
  26. _fileList: null,
  27. /**
  28. * File actions
  29. *
  30. * @type {OCA.Files.FileActions}
  31. */
  32. _fileActions: null,
  33. /**
  34. * @type {OCA.Files.SidebarPreviewManager}
  35. */
  36. _previewManager: null,
  37. events: {
  38. 'click a.action-favorite': '_onClickFavorite',
  39. 'click a.action-default': '_onClickDefaultAction',
  40. 'click a.permalink': '_onClickPermalink',
  41. 'focus .permalink-field>input': '_onFocusPermalink'
  42. },
  43. template: function(data) {
  44. return OCA.Files.Templates['mainfileinfodetailsview'](data);
  45. },
  46. initialize: function(options) {
  47. options = options || {};
  48. this._fileList = options.fileList;
  49. this._fileActions = options.fileActions;
  50. if (!this._fileList) {
  51. throw 'Missing required parameter "fileList"';
  52. }
  53. if (!this._fileActions) {
  54. throw 'Missing required parameter "fileActions"';
  55. }
  56. this._previewManager = new OCA.Files.SidebarPreviewManager(this._fileList);
  57. this._setupClipboard();
  58. },
  59. _setupClipboard: function() {
  60. var clipboard = new Clipboard('.permalink');
  61. clipboard.on('success', function(e) {
  62. var $el = $(e.trigger);
  63. $el.tooltip('hide')
  64. .attr('data-original-title', t('core', 'Copied!'))
  65. .tooltip('fixTitle')
  66. .tooltip({placement: 'bottom', trigger: 'manual'})
  67. .tooltip('show');
  68. _.delay(function() {
  69. $el.tooltip('hide');
  70. $el.attr('data-original-title', t('files', 'Copy direct link (only works for users who have access to this file/folder)'))
  71. .tooltip('fixTitle');
  72. }, 3000);
  73. });
  74. clipboard.on('error', function(e) {
  75. var $row = this.$('.permalink-field');
  76. $row.toggleClass('hidden');
  77. if (!$row.hasClass('hidden')) {
  78. $row.find('>input').focus();
  79. }
  80. });
  81. },
  82. _onClickPermalink: function(e) {
  83. e.preventDefault();
  84. return;
  85. },
  86. _onFocusPermalink: function() {
  87. this.$('.permalink-field>input').select();
  88. },
  89. _onClickFavorite: function(event) {
  90. event.preventDefault();
  91. this._fileActions.triggerAction('Favorite', this.model, this._fileList);
  92. },
  93. _onClickDefaultAction: function(event) {
  94. event.preventDefault();
  95. this._fileActions.triggerAction(null, this.model, this._fileList);
  96. },
  97. _onModelChanged: function() {
  98. // simply re-render
  99. this.render();
  100. },
  101. _makePermalink: function(fileId) {
  102. var baseUrl = OC.getProtocol() + '://' + OC.getHost();
  103. return baseUrl + OC.generateUrl('/f/{fileId}', {fileId: fileId});
  104. },
  105. setFileInfo: function(fileInfo) {
  106. if (this.model) {
  107. this.model.off('change', this._onModelChanged, this);
  108. }
  109. this.model = fileInfo;
  110. if (this.model) {
  111. this.model.on('change', this._onModelChanged, this);
  112. }
  113. if (this.model) {
  114. var properties = [];
  115. if( !this.model.has('size') ) {
  116. properties.push(OC.Files.Client.PROPERTY_SIZE);
  117. properties.push(OC.Files.Client.PROPERTY_GETCONTENTLENGTH);
  118. }
  119. if( properties.length > 0){
  120. this.model.reloadProperties(properties);
  121. }
  122. }
  123. this.render();
  124. },
  125. /**
  126. * Renders this details view
  127. */
  128. render: function() {
  129. this.trigger('pre-render');
  130. if (this.model) {
  131. var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
  132. var availableActions = this._fileActions.get(
  133. this.model.get('mimetype'),
  134. this.model.get('type'),
  135. this.model.get('permissions')
  136. );
  137. var hasFavoriteAction = 'Favorite' in availableActions;
  138. this.$el.html(this.template({
  139. type: this.model.isImage()? 'image': '',
  140. nameLabel: t('files', 'Name'),
  141. name: this.model.get('displayName') || this.model.get('name'),
  142. pathLabel: t('files', 'Path'),
  143. path: this.model.get('path'),
  144. hasSize: this.model.has('size'),
  145. sizeLabel: t('files', 'Size'),
  146. size: OC.Util.humanFileSize(this.model.get('size'), true),
  147. altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
  148. dateLabel: t('files', 'Modified'),
  149. altDate: OC.Util.formatDate(this.model.get('mtime')),
  150. timestamp: this.model.get('mtime'),
  151. date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
  152. hasFavoriteAction: hasFavoriteAction,
  153. starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
  154. starClass: isFavorite ? 'icon-starred' : 'icon-star',
  155. permalink: this._makePermalink(this.model.get('id')),
  156. permalinkTitle: t('files', 'Copy direct link (only works for users who have access to this file/folder)')
  157. }));
  158. // TODO: we really need OC.Previews
  159. var $iconDiv = this.$el.find('.thumbnail');
  160. var $container = this.$el.find('.thumbnailContainer');
  161. if (!this.model.isDirectory()) {
  162. $iconDiv.addClass('icon-loading icon-32');
  163. this._previewManager.loadPreview(this.model, $iconDiv, $container);
  164. } else {
  165. var iconUrl = this.model.get('icon') || OC.MimeType.getIconUrl('dir');
  166. if (typeof this.model.get('mountType') !== 'undefined') {
  167. iconUrl = OC.MimeType.getIconUrl('dir-' + this.model.get('mountType'))
  168. }
  169. $iconDiv.css('background-image', 'url("' + iconUrl + '")');
  170. }
  171. this.$el.find('[title]').tooltip({placement: 'bottom'});
  172. } else {
  173. this.$el.empty();
  174. }
  175. this.delegateEvents();
  176. this.trigger('post-render');
  177. }
  178. });
  179. OCA.Files.MainFileInfoDetailView = MainFileInfoDetailView;
  180. })();