From ba4cc2a422ba7f81c9c7cf5ca9a6f3f3037e0c1a Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 6 Oct 2020 22:45:45 -0700
Subject: [PATCH] Added editable image component that can be used to have
 changeable image displays.

---
 editable-image.js | 102 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 editable-image.js

diff --git a/editable-image.js b/editable-image.js
new file mode 100644
index 0000000..a9871de
--- /dev/null
+++ b/editable-image.js
@@ -0,0 +1,102 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, button, div, img, input } from "../ignite-html/ignite-template.js";
+
+class EditableImage extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return `
+            mt-editable-image {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+
+            mt-editable-image > img {
+                width: 100%;
+                max-width: 100%;
+                max-height: 100%;
+                height: auto;
+                flex: 1;
+            }
+
+            mt-editable-image:hover:after {
+                position: absolute;
+                font-family: 'Font Awesome 5 Duotone';
+                font-weight: 900;
+                content: '\\f332';
+                color: rgba(0,0,0,0.5);
+                font-size: 2.5em;
+            }
+
+            mt-editable-image:hover {
+                cursor: pointer;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            source: null,
+            fileInput: null,
+            onChange: null,
+            objectFit: "contain",
+            objectPosition: "center"
+        };
+    }
+
+    render() {
+        return this.template
+            .onClick(() => this.onClick())
+            .child(
+                new img()
+                    .src(this.source)
+                    .style("object-fit", this.objectFit)
+                    .style("object-position", this.objectPosition),
+                new input()
+                    .type("file")
+                    .style("display", "none", true)
+                    .attribute("accept", "image/*")
+                    .onChange((event) => this.onFileChange(event)).ref(this.fileInput)
+            );
+    }
+
+    onFileChange(event) {
+        //Get the uploaded file from the file input.
+        var file = this.fileInput.files[0];
+
+        //Create a reader to read in the file.
+        var reader = new FileReader();
+        reader.onload = (event) => {
+            this.source = event.target.result;
+
+            //If we have a on change event then invoke it.
+            if (this.onChange != null) {
+                this.onChange(this.source);
+            }
+        };
+
+        //Read it.
+        reader.readAsDataURL(file);
+    }
+
+    onClick() {
+        this.fileInput.click();
+    }
+}
+
+class EditableImageTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-editable-image", children);
+    }
+}
+
+customElements.define("mt-editable-image", EditableImage);
+
+export {
+    EditableImageTemplate as EditableImage
+};
\ No newline at end of file