From 3d53033792f6ac2100f36802e0653bd941f12599 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 14 Oct 2020 14:31:54 -0700
Subject: [PATCH] Added placeholder functionality to editable image and more
 control over the width/height of the image.

---
 editable-image.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/editable-image.js b/editable-image.js
index f263146..c5a94a2 100644
--- a/editable-image.js
+++ b/editable-image.js
@@ -24,7 +24,7 @@ class EditableImage extends IgniteElement {
                 flex: 1;
             }
 
-            mt-editable-image:hover:after {
+            mt-editable-image.source:hover:after {
                 position: absolute;
                 font-family: 'Font Awesome 5 Pro';
                 font-weight: 900;
@@ -36,7 +36,7 @@ class EditableImage extends IgniteElement {
                 justify-content: center;
             }
 
-            mt-editable-image:hover {
+            mt-editable-image.source:hover {
                 cursor: pointer;
                 filter: brightness(0.9);
             }
@@ -49,18 +49,31 @@ class EditableImage extends IgniteElement {
             fileInput: null,
             onChange: null,
             objectFit: "contain",
-            objectPosition: "center"
+            objectPosition: "center",
+            width: null,
+            maxWidth: null,
+            height: null,
+            maxHeight: null,
+            placeholder: null
         };
     }
 
     render() {
         return this.template
             .onClick(() => this.onClick())
+            .class(this.source, value => { return value != null ? "source" : null; })
             .child(
+                new div()
+                    .hide(this.source, value => { return value != null; })
+                    .child(this.placeholder),
                 new img()
                     .src(this.source)
                     .style("object-fit", this.objectFit)
                     .style("object-position", this.objectPosition)
+                    .style("width", this.width)
+                    .style("max-width", this.maxWidth)
+                    .style("height", this.height)
+                    .style("max-height", this.maxHeight)
                     .hide(this.source, value => { return value == null; }),
                 new input()
                     .type("file")