Initial Commit

marko/components/background/component.js

@@ -0,0 +1,51 @@
+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
+    }
+  }
+}

marko/components/background/index.marko

@@ -0,0 +1 @@
+<img key="image" src=input.src style=state.style class=["background", state.orientation] />

marko/components/background/style.less

@@ -0,0 +1,23 @@
+.background {
+  /* Set rules to fill background */
+  width: 100%;
+  /* Set up proportionate scaling */
+  min-height: 100%;
+  height: auto;
+  /* Set up positioning */
+  position: fixed;
+  top: 0;
+  left: 0;
+  user-select: none;
+  -webkit-user-drag: none;
+
+  z-index: -1;
+}
+
+.background.landscape {
+  /* Set rules to fill background */
+  height: 100%;
+  /* Set up proportionate scaling */
+  min-width: 100%;
+  width: auto;
+}