Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

examples: improve local file loading performance

This commit is contained in:
Haowei Wen 2021-09-22 23:47:40 +08:00
parent 02c520e421
commit cdfde336d9
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
1 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
examples/index.html
View File

@ -101,6 +101,10 @@
margin-top: 0; margin-top: 0;
padding-left: 20px; padding-left: 20px;
} }
.hidden {
display: none;
}
</style> </style>
</head> </head>
@ -205,7 +209,8 @@
<option value="img/ironman_hd.png"> <option value="img/ironman_hd.png">
<option value="img/sethbling.png"> <option value="img/sethbling.png">
</datalist> </datalist>
<input id="skin_url_upload" type="file" accept="image/*" style="display: none;"> <input id="skin_url_upload" type="file" class="hidden" accept="image/*">
<button id="skin_url_unset" type="button" class="control hidden">Unset</button>
<button type="button" class="control" <button type="button" class="control"
onclick="document.getElementById('skin_url_upload').click();">Browse...</button> onclick="document.getElementById('skin_url_upload').click();">Browse...</button>
</div> </div>
@ -226,7 +231,8 @@
<option value="img/legacy_cape.png"> <option value="img/legacy_cape.png">
<option value="img/hd_cape.png"> <option value="img/hd_cape.png">
</datalist> </datalist>
<input id="cape_url_upload" type="file" accept="image/*" style="display: none;"> <input id="cape_url_upload" type="file" class="hidden" accept="image/*">
<button id="cape_url_unset" type="button" class="control hidden">Unset</button>
<button type="button" class="control" <button type="button" class="control"
onclick="document.getElementById('cape_url_upload').click();">Browse...</button> onclick="document.getElementById('cape_url_upload').click();">Browse...</button>
</div> </div>
@ -237,7 +243,8 @@
<datalist id="default_panorama"> <datalist id="default_panorama">
<option value=""> <option value="">
</datalist> </datalist>
<input id="panorama_url_upload" type="file" accept="image/*" style="display: none;"> <input id="panorama_url_upload" type="file" class="hidden" accept="image/*">
<button id="panorama_url_unset" type="button" class="control hidden">Unset</button>
<button type="button" class="control" <button type="button" class="control"
onclick="document.getElementById('panorama_url_upload').click();">Browse...</button> onclick="document.getElementById('panorama_url_upload').click();">Browse...</button>
</div> </div>
@ -281,9 +288,27 @@
let rotateAnimation; let rotateAnimation;
let primaryAnimation; let primaryAnimation;
function obtainTextureUrl(id) {
const urlInput = document.getElementById(id);
const fileInput = document.getElementById(id + "_upload");
const unsetButton = document.getElementById(id + "_unset");
const file = fileInput.files[0];
if (file === undefined) {
if (!unsetButton.classList.contains("hidden")) {
unsetButton.classList.add("hidden");
}
return urlInput.value;
} else {
unsetButton.classList.remove("hidden");
urlInput.value = `Local file: ${file.name}`;
urlInput.readOnly = true;
return URL.createObjectURL(file);
}
}
function reloadSkin() { function reloadSkin() {
const input = document.getElementById("skin_url"); const input = document.getElementById("skin_url");
const url = input.value; const url = obtainTextureUrl("skin_url");
if (url === "") { if (url === "") {
skinViewer.loadSkin(null); skinViewer.loadSkin(null);
input.setCustomValidity(""); input.setCustomValidity("");
@ -299,7 +324,7 @@
function reloadCape() { function reloadCape() {
const input = document.getElementById("cape_url"); const input = document.getElementById("cape_url");
const url = input.value; const url = obtainTextureUrl("cape_url");
if (url === "") { if (url === "") {
skinViewer.loadCape(null); skinViewer.loadCape(null);
input.setCustomValidity(""); input.setCustomValidity("");
@ -316,7 +341,7 @@
function reloadPanorama() { function reloadPanorama() {
const input = document.getElementById("panorama_url"); const input = document.getElementById("panorama_url");
const url = input.value; const url = obtainTextureUrl("panorama_url");
if (url === "") { if (url === "") {
skinViewer.background = "white"; skinViewer.background = "white";
input.setCustomValidity(""); input.setCustomValidity("");
@ -376,22 +401,27 @@
} }
} }
const initializeUploadButton = (urlInput, browseButton, callback) => { const initializeUploadButton = (id, callback) => {
const reader = new FileReader(); const urlInput = document.getElementById(id);
reader.addEventListener("load", e => { const fileInput = document.getElementById(id + "_upload");
document.getElementById(urlInput).value = reader.result; const unsetButton = document.getElementById(id + "_unset");
const unsetAction = () => {
urlInput.readOnly = false;
urlInput.value = "";
fileInput.value = fileInput.defaultValue;
callback(); callback();
}); };
document.getElementById(browseButton).addEventListener("change", e => { fileInput.addEventListener("change", e => callback());
const file = e.target.files[0]; urlInput.addEventListener("keydown", e => {
if (file !== undefined) { if (e.key === "Backspace" && urlInput.readOnly) {
reader.readAsDataURL(file); unsetAction();
} }
}); });
unsetButton.addEventListener("click", e => unsetAction());
}; };
initializeUploadButton("skin_url", "skin_url_upload", reloadSkin); initializeUploadButton("skin_url", reloadSkin);
initializeUploadButton("cape_url", "cape_url_upload", reloadCape); initializeUploadButton("cape_url", reloadCape);
initializeUploadButton("panorama_url", "panorama_url_upload", reloadPanorama); initializeUploadButton("panorama_url", reloadPanorama);
document.getElementById("skin_url").addEventListener("change", () => reloadSkin()); document.getElementById("skin_url").addEventListener("change", () => reloadSkin());
document.getElementById("skin_model").addEventListener("change", () => reloadSkin()); document.getElementById("skin_model").addEventListener("change", () => reloadSkin());