The frontend/UI server, written in JS using the MarkoJS library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

51 lines
1.1 KiB

module.exports = class {
onCreate(input) {
this.state = {
src: input.src,
orientation: "portrait",
style: {
filter: `opacity(${input.opacity || 0.20})`
}
}
}
onInput(input) {
if (input.src != this.state.src) {
this.updateOrientation()
}
if (input.opacity != this.state.opacity) {
this.state.style.filter = `opacity(${input.opacity || 0.20})`
}
}
onMount() {
this.updateOrientation()
}
updateOrientation() {
const image = this.getEl("image", 0)
if (image.complete && typeof(image.naturalHeight) !== 'undefined' && image.naturalHeight !== 0) {
const width = image.naturalWidth
const height = image.naturalHeight
this.setLandscape(width > (height * 1.50))
} else {
image.onload = () => {
const width = image.naturalWidth
const height = image.naturalHeight
this.setLandscape(width > (height * 1.50))
}
}
}
setLandscape(value) {
const orientation = value ? "landscape" : "portrait"
if (orientation !== this.state.orientation) {
this.state.orientation = orientation
}
}
}