diff options
author | Julien Veyssier <eneiluj@posteo.net> | 2022-05-20 18:14:39 +0300 |
---|---|---|
committer | Julien Veyssier <eneiluj@posteo.net> | 2022-05-23 17:32:04 +0300 |
commit | b8a79325b51ca9ad12ce2367104b799d62c604be (patch) | |
tree | c9718632ca44037d2b46bdc24645d844b6d26ca1 /src | |
parent | d3ae17cd34d7f7de0b0306383a3efe83705b0662 (diff) |
improve ImageView code quality
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src')
-rw-r--r-- | src/nodes/ImageView.vue | 79 |
1 files changed, 41 insertions, 38 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index 0fb533b7d..8bb88eed6 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -163,6 +163,9 @@ export default { isDataUrl() { return this.src.startsWith('data:') }, + isDirectUrl() { + return (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl) + }, basename() { return decodeURI(this.src.split('?')[0]) }, @@ -248,58 +251,59 @@ export default { this.loaded = true return } - this.init() + this.init().catch((e) => { + this.onImageLoadFailure() + }) }, methods: { - init() { + async init() { if (this.src.startsWith('text://')) { const imageFileName = getQueryVariable(this.src, 'imageFileName') - this.loadImage(this.getTextApiUrl(imageFileName)) - return + return this.loadImage(this.getTextApiUrl(imageFileName)) } if (this.src.startsWith(`.attachments.${this.currentSession?.documentId}/`)) { const imageFileName = decodeURIComponent(this.src.replace(`.attachments.${this.currentSession?.documentId}/`, '').split('?')[0]) - this.loadImage(this.getTextApiUrl(imageFileName)) - return + return this.loadImage(this.getTextApiUrl(imageFileName)) } - if (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl) { - this.loadImage(this.src) - return + if (this.isDirectUrl) { + return this.loadImage(this.src) } if (this.hasPreview && this.mime !== 'image/gif') { - this.loadImage(this.previewUrl) - return + return this.loadImage(this.previewUrl) } // if it starts with '.attachments.1234/' if (this.src.match(/^\.attachments\.\d+\//)) { // try the webdav url - this.loadImage(this.davUrl, () => { + return this.loadImage(this.davUrl).catch((e) => { // try the attachment API const imageFileName = decodeURIComponent(this.src.replace(/\.attachments\.\d+\//, '').split('?')[0]) const textApiUrl = this.getTextApiUrl(imageFileName) - this.loadImage(textApiUrl) - // TODO if attachment works, rewrite the url with correct document ID + return this.loadImage(textApiUrl).then(() => { + // TODO if attachment works, rewrite the url with correct document ID + }) }) return } this.loadImage(this.davUrl) }, - loadImage(imageUrl, failureCallback = null) { - const img = new Image() - img.onload = () => { - this.imageUrl = imageUrl - this.imageLoaded = true - } - img.onerror = () => { - if (failureCallback !== null) { - failureCallback() - } else { - this.failed = true - this.imageLoaded = false - this.loaded = true + async loadImage(imageUrl) { + return new Promise((resolve, reject) => { + const img = new Image() + img.onload = () => { + this.imageUrl = imageUrl + this.imageLoaded = true + resolve() } - } - img.src = imageUrl + img.onerror = (e) => { + reject(e) + } + img.src = imageUrl + }) + }, + onImageLoadFailure() { + this.failed = true + this.imageLoaded = false + this.loaded = true }, updateAlt() { this.alt = this.$refs.altInput.value @@ -322,16 +326,15 @@ export default { sessionToken, imageFileName, }) - } else { - return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}', - { - documentId, - sessionId, - sessionToken, - imageFileName, - shareToken: this.token, - }) } + return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}', + { + documentId, + sessionId, + sessionToken, + imageFileName, + shareToken: this.token, + }) }, }, } |