zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add prettier frontent linter

Browse Source
This commit is contained in:
Oleg Lobanov
2021-03-21 12:51:58 +01:00
parent a721dc1f31
commit c44b37c50c
73 changed files with 18898 additions and 4499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
frontend/src/components/files/ExtendedImage.vue
View File

@@ -10,40 +10,45 @@
@mouseup="mouseUp"
@wheel="wheelMove"
>
<img src="" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
<img
src=""
class="image-ex-img image-ex-img-center"
ref="imgex"
@load="onLoad"
/>
</div>
</template>
<script>
import throttle from 'lodash.throttle'
import UTIF from 'utif'
import throttle from "lodash.throttle";
import UTIF from "utif";
export default {
props: {
src: String,
moveDisabledTime: {
type: Number,
default: () => 200
default: () => 200,
},
maxScale: {
type: Number,
default: () => 4
default: () => 4,
},
minScale: {
type: Number,
default: () => 0.25
default: () => 0.25,
},
classList: {
type: Array,
default: () => []
default: () => [],
},
zoomStep: {
type: Number,
default: () => 0.25
default: () => 0.25,
},
autofill: {
type: Boolean,
default: () => false
}
default: () => false,
},
},
data() {
return {
@@ -57,204 +62,208 @@ export default {
imageLoaded: false,
position: {
center: { x: 0, y: 0 },
relative: { x: 0, y: 0 }
}
}
relative: { x: 0, y: 0 },
},
};
},
mounted() {
if (!this.decodeUTIF()) {
this.$refs.imgex.src = this.src
this.$refs.imgex.src = this.src;
}
let container = this.$refs.container
this.classList.forEach(className => container.classList.add(className))
let container = this.$refs.container;
this.classList.forEach((className) => container.classList.add(className));
// set width and height if they are zero
if (getComputedStyle(container).width === "0px") {
container.style.width = "100%"
container.style.width = "100%";
}
if (getComputedStyle(container).height === "0px") {
container.style.height = "100%"
container.style.height = "100%";
}
window.addEventListener('resize', this.onResize)
window.addEventListener("resize", this.onResize);
},
beforeDestroy () {
window.removeEventListener('resize', this.onResize)
document.removeEventListener('mouseup', this.onMouseUp)
beforeDestroy() {
window.removeEventListener("resize", this.onResize);
document.removeEventListener("mouseup", this.onMouseUp);
},
watch: {
src: function () {
this.scale = 1
this.setZoom()
this.setCenter()
}
this.scale = 1;
this.setZoom();
this.setCenter();
},
},
methods: {
// Modified from UTIF.replaceIMG
decodeUTIF() {
const sufs = ["tif", "tiff", "dng", "cr2", "nef"]
let suff = document.location.pathname.split(".").pop().toLowerCase()
if (sufs.indexOf(suff) == -1) return false
let xhr = new XMLHttpRequest()
UTIF._xhrs.push(xhr)
UTIF._imgs.push(this.$refs.imgex)
xhr.open("GET", this.src)
xhr.responseType = "arraybuffer"
xhr.onload = UTIF._imgLoaded
xhr.send()
return true
const sufs = ["tif", "tiff", "dng", "cr2", "nef"];
let suff = document.location.pathname.split(".").pop().toLowerCase();
if (sufs.indexOf(suff) == -1) return false;
let xhr = new XMLHttpRequest();
UTIF._xhrs.push(xhr);
UTIF._imgs.push(this.$refs.imgex);
xhr.open("GET", this.src);
xhr.responseType = "arraybuffer";
xhr.onload = UTIF._imgLoaded;
xhr.send();
return true;
},
onLoad() {
let img = this.$refs.imgex
let img = this.$refs.imgex;
this.imageLoaded = true
this.imageLoaded = true;
if (img === undefined) {
return
return;
}
img.classList.remove('image-ex-img-center')
this.setCenter()
img.classList.add('image-ex-img-ready')
img.classList.remove("image-ex-img-center");
this.setCenter();
img.classList.add("image-ex-img-ready");
document.addEventListener('mouseup', this.onMouseUp)
document.addEventListener("mouseup", this.onMouseUp);
},
onMouseUp() {
this.inDrag = false
this.inDrag = false;
},
onResize: throttle(function() {
onResize: throttle(function () {
if (this.imageLoaded) {
this.setCenter()
this.doMove(this.position.relative.x, this.position.relative.y)
this.setCenter();
this.doMove(this.position.relative.x, this.position.relative.y);
}
}, 100),
setCenter() {
let container = this.$refs.container
let img = this.$refs.imgex
let container = this.$refs.container;
let img = this.$refs.imgex;
this.position.center.x = Math.floor((container.clientWidth - img.clientWidth) / 2)
this.position.center.y = Math.floor((container.clientHeight - img.clientHeight) / 2)
this.position.center.x = Math.floor(
(container.clientWidth - img.clientWidth) / 2
);
this.position.center.y = Math.floor(
(container.clientHeight - img.clientHeight) / 2
);
img.style.left = this.position.center.x + 'px'
img.style.top = this.position.center.y + 'px'
img.style.left = this.position.center.x + "px";
img.style.top = this.position.center.y + "px";
},
mousedownStart(event) {
this.lastX = null
this.lastY = null
this.inDrag = true
event.preventDefault()
this.lastX = null;
this.lastY = null;
this.inDrag = true;
event.preventDefault();
},
mouseMove(event) {
if (!this.inDrag) return
this.doMove(event.movementX, event.movementY)
event.preventDefault()
if (!this.inDrag) return;
this.doMove(event.movementX, event.movementY);
event.preventDefault();
},
mouseUp(event) {
this.inDrag = false
event.preventDefault()
this.inDrag = false;
event.preventDefault();
},
touchStart(event) {
this.lastX = null
this.lastY = null
this.lastTouchDistance = null
this.lastX = null;
this.lastY = null;
this.lastTouchDistance = null;
if (event.targetTouches.length < 2) {
setTimeout(() => {
this.touches = 0
}, 300)
this.touches++
this.touches = 0;
}, 300);
this.touches++;
if (this.touches > 1) {
this.zoomAuto(event)
this.zoomAuto(event);
}
}
event.preventDefault()
}
event.preventDefault();
},
zoomAuto(event) {
switch (this.scale) {
case 1:
this.scale = 2
break
this.scale = 2;
break;
case 2:
this.scale = 4
break
this.scale = 4;
break;
default:
case 4:
this.scale = 1
this.setCenter()
break
this.scale = 1;
this.setCenter();
break;
}
this.setZoom()
event.preventDefault()
this.setZoom();
event.preventDefault();
},
touchMove(event) {
event.preventDefault()
event.preventDefault();
if (this.lastX === null) {
this.lastX = event.targetTouches[0].pageX
this.lastY = event.targetTouches[0].pageY
return
this.lastX = event.targetTouches[0].pageX;
this.lastY = event.targetTouches[0].pageY;
return;
}
let step = this.$refs.imgex.width / 5
let step = this.$refs.imgex.width / 5;
if (event.targetTouches.length === 2) {
this.moveDisabled = true
clearTimeout(this.disabledTimer)
this.moveDisabled = true;
clearTimeout(this.disabledTimer);
this.disabledTimer = setTimeout(
() => (this.moveDisabled = false),
this.moveDisabledTime
)
);
let p1 = event.targetTouches[0]
let p2 = event.targetTouches[1]
let p1 = event.targetTouches[0];
let p2 = event.targetTouches[1];
let touchDistance = Math.sqrt(
Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)
)
);
if (!this.lastTouchDistance) {
this.lastTouchDistance = touchDistance
return
this.lastTouchDistance = touchDistance;
return;
}
this.scale += (touchDistance - this.lastTouchDistance) / step
this.lastTouchDistance = touchDistance
this.setZoom()
this.scale += (touchDistance - this.lastTouchDistance) / step;
this.lastTouchDistance = touchDistance;
this.setZoom();
} else if (event.targetTouches.length === 1) {
if (this.moveDisabled) return
let x = event.targetTouches[0].pageX - this.lastX
let y = event.targetTouches[0].pageY - this.lastY
if (Math.abs(x) >= step && Math.abs(y) >= step) return
this.lastX = event.targetTouches[0].pageX
this.lastY = event.targetTouches[0].pageY
this.doMove(x, y)
if (this.moveDisabled) return;
let x = event.targetTouches[0].pageX - this.lastX;
let y = event.targetTouches[0].pageY - this.lastY;
if (Math.abs(x) >= step && Math.abs(y) >= step) return;
this.lastX = event.targetTouches[0].pageX;
this.lastY = event.targetTouches[0].pageY;
this.doMove(x, y);
}
},
doMove(x, y) {
let style = this.$refs.imgex.style
let posX = this.pxStringToNumber(style.left) + x
let posY = this.pxStringToNumber(style.top) + y
let style = this.$refs.imgex.style;
let posX = this.pxStringToNumber(style.left) + x;
let posY = this.pxStringToNumber(style.top) + y;
style.left = posX + 'px'
style.top = posY + 'px'
style.left = posX + "px";
style.top = posY + "px";
this.position.relative.x = Math.abs(this.position.center.x - posX)
this.position.relative.y = Math.abs(this.position.center.y - posY)
this.position.relative.x = Math.abs(this.position.center.x - posX);
this.position.relative.y = Math.abs(this.position.center.y - posY);
if (posX < this.position.center.x) {
this.position.relative.x = this.position.relative.x * -1
this.position.relative.x = this.position.relative.x * -1;
}
if (posY < this.position.center.y) {
this.position.relative.y = this.position.relative.y * -1
this.position.relative.y = this.position.relative.y * -1;
}
},
wheelMove(event) {
this.scale += (event.wheelDeltaY / 100) * this.zoomStep
this.setZoom()
this.scale += (event.wheelDeltaY / 100) * this.zoomStep;
this.setZoom();
},
setZoom() {
this.scale = this.scale < this.minScale ? this.minScale : this.scale
this.scale = this.scale > this.maxScale ? this.maxScale : this.scale
this.$refs.imgex.style.transform = `scale(${this.scale})`
this.scale = this.scale < this.minScale ? this.minScale : this.scale;
this.scale = this.scale > this.maxScale ? this.maxScale : this.scale;
this.$refs.imgex.style.transform = `scale(${this.scale})`;
},
pxStringToNumber(style) {
return +style.replace("px", "")
}
}
}
return +style.replace("px", "");
},
},
};
</script>
<style>
.image-ex-container {