diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-06-15 14:38:01 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-06-15 14:38:01 +0300 |
commit | e5ffd43de6dc4ec1ad85350eb8d3c9900952cab4 (patch) | |
tree | 656a06822e1ef1cce8ab4671d4df36a932418e41 /src/nodes/ImageView.vue | |
parent | 1824f1065c953b0f2f178cf553a6797508659633 (diff) |
Implement placeholders for non-image files
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/nodes/ImageView.vue')
-rw-r--r-- | src/nodes/ImageView.vue | 63 |
1 files changed, 59 insertions, 4 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index 3b837c5b2..d07f70b1d 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -21,8 +21,8 @@ --> <template> - <div class="image" :class="{'icon-loading': !loaded}"> - <div v-if="imageLoaded"> + <div class="image" :class="{'icon-loading': !loaded}" :data-src="src"> + <div v-if="imageLoaded && isSupportedImage"> <transition name="fade"> <img v-show="loaded" :src="src" class="image__main" @load="onLoaded"> @@ -37,8 +37,8 @@ <div v-else class="image__placeholder"> <transition name="fade"> <div v-show="loaded" class="image__main"> - <div class="icon-image" /> - <p>{{ t('text', 'Insufficient permissions to view image') }}</p> + <div class="icon-image" :style="mimeIcon" /> + <p><a :href="internalLinkOrImage" target="_blank">{{ t('text', 'Show file') }}</a></p> </div> </transition> <transition name="fade"> @@ -52,6 +52,33 @@ </template> <script> + +const imageMimes = [ + 'image/png', + 'image/jpeg', + 'image/gif', + 'image/x-xbitmap', + 'image/bmp', + 'image/svg+xml' +] + +const getQueryVariable = (src, variable) => { + var query = src.split('#')[1] + if (typeof query === 'undefined') { + return + } + var vars = query.split('&') + if (typeof vars === 'undefined') { + return + } + for (var i = 0; i < vars.length; i++) { + var pair = vars[i].split('=') + if (decodeURIComponent(pair[0]) === variable) { + return decodeURIComponent(pair[1]) + } + } +} + export default { name: 'ImageView', props: ['node', 'updateAttrs', 'view'], // eslint-disable-line @@ -63,6 +90,26 @@ export default { } }, computed: { + mimeIcon() { + const mime = getQueryVariable(this.src, 'mimetype') + if (mime) { + return { + backgroundImage: 'url(' + window.OC.MimeType.getIconUrl(mime) + ')' + } + } + return {} + }, + isSupportedImage() { + const mime = getQueryVariable(this.src, 'mimetype') + return typeof mime === 'undefined' || imageMimes.indexOf(mime) !== -1 + }, + internalLinkOrImage() { + const fileId = getQueryVariable(this.src, 'fileId') + if (fileId) { + return OC.generateUrl('/f/' + fileId) + } + return this.src + }, src: { get() { return this.node.attrs.src @@ -88,6 +135,13 @@ export default { } }, beforeMount() { + if (!this.isSupportedImage) { + // TODO check if hasPreview and render a file preview if available + this.failed = true + this.imageLoaded = false + this.loaded = true + return + } var img = new Image() img.src = this.node.attrs.src img.onload = () => { @@ -130,6 +184,7 @@ export default { margin-top: 10px; height: 32px; padding: 20px; + background-size: contain; } .image__loading { height: 100px; |