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

Fixed bugs within editable image and working on making it more material like.

Browse Source
This commit is contained in:
Matt Mo 2021-08-17 18:59:56 -07:00
parent 48c8b6573a
commit 01c1dfa0c6
1 changed files with 13 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
editable-image.js
View File

@ -24,21 +24,8 @@ class EditableImage extends IgniteElement {
flex: 1; flex: 1;
} }
mt-editable-image.source:hover:after {
position: absolute;
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
content: '\\f332';
color: #fff;
font-size: 2.2em;
display: flex;
align-items: center;
justify-content: center;
}
mt-editable-image.source:hover { mt-editable-image.source:hover {
cursor: pointer; cursor: pointer;
filter: brightness(0.9);
} }
`; `;
} }
@ -89,20 +76,22 @@ class EditableImage extends IgniteElement {
event.stopPropagation(); event.stopPropagation();
//Get the uploaded file from the file input. //Get the uploaded file from the file input.
var file = this.fileInput.files[0]; if (this.fileInput.files.length > 0) {
var file = this.fileInput.files[0];
//Create a reader to read in the file. //Create a reader to read in the file.
var reader = new FileReader(); var reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
this.source = event.target.result; this.source = event.target.result;
//Invoke a native change event now that we have //Invoke a native change event now that we have
//the image file ready. //the image file ready.
this.dispatchEvent(new Event("change")); this.dispatchEvent(new Event("change"));
}; };
//Read it. //Read it.
reader.readAsDataURL(file); reader.readAsDataURL(file);
}
} }
onClick() { onClick() {