diff options
Diffstat (limited to 'apps/files/js')
| -rw-r--r-- | apps/files/js/fileinfomodel.js | 8 | ||||
| -rw-r--r-- | apps/files/js/filelist.js | 19 | ||||
| -rw-r--r-- | apps/files/js/mainfileinfodetailview.js | 108 |
3 files changed, 87 insertions, 48 deletions
diff --git a/apps/files/js/fileinfomodel.js b/apps/files/js/fileinfomodel.js index 22b1ca9ff0c..de1b143a160 100644 --- a/apps/files/js/fileinfomodel.js +++ b/apps/files/js/fileinfomodel.js @@ -57,7 +57,13 @@ * @return {boolean} true if this is an image, false otherwise */ isImage: function() { - return this.has('mimetype') ? this.get('mimetype').substr(0, 6) === 'image/' : false; + if (!this.has('mimetype')) { + return false; + } + return this.get('mimetype').substr(0, 6) === 'image/' + || this.get('mimetype') === 'application/postscript' + || this.get('mimetype') === 'application/illustrator' + || this.get('mimetype') === 'application/x-photoshop'; }, /** diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 3e4cdaf8be3..2af5be73d96 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -10,7 +10,7 @@ (function() { - var TEMPLATE_ADDBUTTON = '<a href="#" class="button new" title="{{addText}}"><img src="{{iconUrl}}"></img></a>'; + var TEMPLATE_ADDBUTTON = '<a href="#" class="button new"><img src="{{iconUrl}}" alt="{{addText}}"></img></a>'; /** * @class OCA.Files.FileList @@ -347,7 +347,7 @@ // and contain existing models that can be used. // This method would in the future simply retrieve the matching model from the collection. var model = new OCA.Files.FileInfoModel(this.elementToFile($tr)); - if (!model.has('path')) { + if (!model.get('path')) { model.set('path', this.getCurrentDirectory(), {silent: true}); } @@ -369,6 +369,21 @@ }, /** + * Displays the details view for the given file and + * selects the given tab + * + * @param {string} fileName file name for which to show details + * @param {string} [tabId] optional tab id to select + */ + showDetailsView: function(fileName, tabId) { + this._updateDetailsView(fileName); + if (tabId) { + this._detailsView.selectTab(tabId); + } + OC.Apps.showAppSidebar(); + }, + + /** * Update the details view to display the given file * * @param {string} fileName file name from the current list diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js index efdbb5e2ad1..830f074f3f1 100644 --- a/apps/files/js/mainfileinfodetailview.js +++ b/apps/files/js/mainfileinfodetailview.js @@ -124,52 +124,10 @@ // TODO: we really need OC.Previews var $iconDiv = this.$el.find('.thumbnail'); - $iconDiv.addClass('icon-loading icon-32'); - $container = this.$el.find('.thumbnailContainer'); + var $container = this.$el.find('.thumbnailContainer'); if (!this.model.isDirectory()) { - this._fileList.lazyLoadPreview({ - path: this.model.getFullPath(), - mime: this.model.get('mimetype'), - etag: this.model.get('etag'), - y: this.model.isImage() ? 250: 75, - x: this.model.isImage() ? 99999 /* only limit on y */ : 75, - a: this.model.isImage() ? 1 : null, - callback: function(previewUrl, img) { - $iconDiv.previewImg = previewUrl; - if (img) { - $iconDiv.removeClass('icon-loading icon-32'); - if(img.height > img.width) { - $container.addClass('portrait'); - } - } - if (this.model.isImage() && img) { - $iconDiv.parent().addClass('image'); - var targetHeight = img.height / window.devicePixelRatio; - if (targetHeight <= 75) { - $container.removeClass('image'); // small enough to fit in normaly - targetHeight = 75; - } - } else { - targetHeight = 75; - } - - // only set background when we have an actual preview - // when we dont have a preview we show the mime icon in the error handler - if (img) { - $iconDiv.css({ - 'background-image': 'url("' + previewUrl + '")', - 'height': targetHeight - }); - } - }.bind(this), - error: function() { - $iconDiv.removeClass('icon-loading icon-32'); - this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view - $iconDiv.css({ - 'background-image': 'url("' + $iconDiv.previewImg + '")' - }); - }.bind(this) - }); + $iconDiv.addClass('icon-loading icon-32'); + this.loadPreview(this.model.getFullPath(), this.model.get('mimetype'), this.model.get('etag'), $iconDiv, $container, this.model.isImage()); } else { // TODO: special icons / shared / external $iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")'); @@ -179,6 +137,66 @@ this.$el.empty(); } this.delegateEvents(); + }, + + loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) { + var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin + var smallPreviewSize = 75; + + var isLandscape = function(img) { + return img.width > (img.height * 1.2); + }; + + var getTargetHeight = function(img) { + if(isImage) { + var targetHeight = img.height / window.devicePixelRatio; + if (targetHeight <= smallPreviewSize) { + targetHeight = smallPreviewSize; + } + return targetHeight; + }else{ + return smallPreviewSize; + } + }; + + this._fileList.lazyLoadPreview({ + path: path, + mime: mime, + etag: etag, + y: isImage ? maxImageHeight : smallPreviewSize, + x: isImage ? 99999 /* only limit on y */ : smallPreviewSize, + a: isImage ? 1 : null, + callback: function (previewUrl, img) { + $iconDiv.previewImg = previewUrl; + + // as long as we only have the mimetype icon, we only save it in case there is no preview + if (!img) { + return; + } + $iconDiv.removeClass('icon-loading icon-32'); + var targetHeight = getTargetHeight(img); + if (this.model.isImage() && targetHeight > smallPreviewSize) { + if (!isLandscape(img)) { + $container.addClass('portrait'); + } + $container.addClass('image'); + } + + // only set background when we have an actual preview + // when we dont have a preview we show the mime icon in the error handler + $iconDiv.css({ + 'background-image': 'url("' + previewUrl + '")', + 'height': targetHeight + }); + }.bind(this), + error: function () { + $iconDiv.removeClass('icon-loading icon-32'); + this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view + $iconDiv.css({ + 'background-image': 'url("' + $iconDiv.previewImg + '")' + }); + }.bind(this) + }); } }); |