102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
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
|
|
}; |