diff options
author | Azul <azul@riseup.net> | 2020-06-02 12:43:34 +0300 |
---|---|---|
committer | Azul <azul@riseup.net> | 2020-06-09 19:00:35 +0300 |
commit | 27f664be416941da318304805f16db371d8a09ab (patch) | |
tree | 43bc853037526e2169808b6f9ec4cb35174af2ae /src | |
parent | aeaffb07cc6a0bd8887d86781891d733ab00eb23 (diff) |
allow relative image sources with fileid
includes a unit test for turning the src in markdown
into a src for html that can be resolved by nextcloud
Signed-off-by: Azul <azul@riseup.net>
Diffstat (limited to 'src')
-rw-r--r-- | src/nodes/ImageView.vue | 35 | ||||
-rw-r--r-- | src/tests/nodes/ImageView.spec.js | 53 |
2 files changed, 70 insertions, 18 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index efa9cdd36..448613410 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -25,7 +25,7 @@ <div v-if="imageLoaded && isSupportedImage" class="image__view"> <transition name="fade"> <img v-show="loaded" - :src="src" + :src="imageUrl" class="image__main" @load="onLoaded"> </transition> @@ -38,13 +38,6 @@ </div> </transition> </div> - <div v-else-if="isRelativeImage"> - <img :src="relativeSrc"> - <input ref="srcInput" - type="text" - :value="src" - @keyup.enter="updateSrc()"> - </div> <div v-else class="image__placeholder"> <transition name="fade"> <div v-show="loaded" class="image__main"> @@ -79,11 +72,11 @@ const imageMimes = [ ] const getQueryVariable = (src, variable) => { - const query = src.split('#')[1] + const query = src.split('?')[1] if (typeof query === 'undefined') { return } - const vars = query.split('&') + const vars = query.split(/[&#]/) if (typeof vars === 'undefined') { return } @@ -106,14 +99,23 @@ export default { } }, computed: { - isRelativeImage() { - return !this.src.match(/\/core\/preview/) - }, - relativeSrc() { + imageUrl() { + if (this.hasPreviewUrl) { + return this.src + } + if (this.fileId) { + return generateUrl('/core/preview') + `?fileId=${this.fileId}&x=1024&y=1024&a=true` + } const f = FileList.getCurrentDirectory() + '/' + this.src const pathParam = encodeURIComponent(path.normalize(f)) return generateUrl('/core/preview.png') + `?file=${pathParam}&x=1024&y=1024&a=true` }, + fileId() { + return getQueryVariable(this.src, 'fileId') + }, + hasPreviewUrl() { + return this.src.match(/^(\/index.php)?\/core\/preview/) + }, mimeIcon() { const mime = getQueryVariable(this.src, 'mimetype') if (mime) { @@ -167,7 +169,7 @@ export default { return } const img = new Image() - img.src = this.node.attrs.src + img.src = this.imageUrl img.onload = () => { this.imageLoaded = true } @@ -181,9 +183,6 @@ export default { updateAlt() { this.alt = this.$refs.altInput.value }, - updateSrc() { - this.src = this.$refs.srcInput.value - }, onLoaded() { this.loaded = true }, diff --git a/src/tests/nodes/ImageView.spec.js b/src/tests/nodes/ImageView.spec.js new file mode 100644 index 000000000..43f6b3fdd --- /dev/null +++ b/src/tests/nodes/ImageView.spec.js @@ -0,0 +1,53 @@ +import { shallowMount } from '@vue/test-utils' +import ImageView from '../../nodes/ImageView.vue' + +global.FileList = { + getCurrentDirectory: function() {return '/current'}, +} +global.OC = { + requestToken: '123', + config: {modRewriteWorking: true}, + MimeType: {getIconUrl: mime => mime}, + webroot: '' +} + +describe('Image View html source based on md source', () => { + + const factory = attrs => { + const propsData = { + node: {attrs} + } + const data = () => ({ + imageLoaded: true, + loaded: true, + failed: false, + }) + return shallowMount(ImageView, {propsData, data}) + } + + test('old style is used as is', () => { + const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg' + const wrapper = factory({src}) + expect(wrapper.find('.image__main').attributes('src')).toBe(src) + }) + + test('old style with index.php is used as is', () => { + const src = '/index.php/core/preview?fileId=9&x=1024&y=1024&a=true#mimetype=image%2Fjpeg&hasPreview=true&fileId=9' + const wrapper = factory({src}) + expect(wrapper.find('.image__main').attributes('src')).toBe(src) + }) + + test('fileId is used for preview url', () => { + const wrapper = factory({src: '/Media/photo-1498855592392-af2bf1e0a4c7.jpeg?fileId=7#mimetype=image%2Fjpeg&hasPreview=true'}) + expect(wrapper.vm.fileId).toBe('7') + expect(wrapper.find('.image__main').attributes('src')) + .toBe('/core/preview?fileId=7&x=1024&y=1024&a=true') + }) + + test('without fileId relative path is used in file based preview url', () => { + const wrapper = factory({src: 'sub/asdf.jpg'}) + expect(wrapper.vm.isSupportedImage).toBe(true) + expect(wrapper.find('.image__main').attributes('src')) + .toBe('/core/preview.png?file=%2Fcurrent%2Fsub%2Fasdf.jpg&x=1024&y=1024&a=true') + }) +}) |