MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added placeholder functionality to editable image and more control over the width/height of the image.

Browse Source
This commit is contained in:
Matt Mo 2020-10-14 14:31:54 -07:00
parent 3326133f7b
commit 3d53033792
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
editable-image.js
View File

@ -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")