consolidate redundant enable/disable code

This commit is contained in:
Lamp 2024-10-08 15:32:31 -07:00
parent ebed204c9d
commit 5f1b0db47c
2 changed files with 57 additions and 83 deletions

View File

@ -72,8 +72,8 @@
<div id="bottompanel">
<div id="errorDiv"></div>
<div>Default Animation Style: <select id="default_animation_style_select"><option value="aura">Aura</option><option value="bats">Bats</option><option value="bees">Bees</option><option value="bounce">Bounce</option><option value="cloud">Cloud</option><option value="confetti">Confetti</option><option value="crying">Crying</option><option value="dislike">Dislike</option><option value="fire">Fire</option><option value="idea">Idea</option><option value="lasers">Lasers</option><option value="like">Like</option><option value="magnet">Magnet</option><option value="mistletoe">Mistletoe</option><option value="money">Money</option><option value="noise">Noise</option><option value="orbit">Orbit</option><option value="pizza">Pizza</option><option value="rain">Rain</option><option value="rotate">Rotate</option><option value="shake">Shake</option><option value="snow">Snow</option><option value="snowball">Snowball</option><option value="spin">Spin</option><option value="splash">Splash</option><option value="stop">Stop</option><option value="zzz">ZZZ</option></select></div>
<div><button id="addbtn">Add Emojis</button></div>
<div><button id="deletebtn">Delete Emojis</button></div>
<div><button id="addbtn">Add</button></div>
<div><button id="deletebtn">Delete</button></div>
<div><button id="importbtn">Import</button></div>
<div><button id="exportbtn">Export</button></div>
<div><button id="clearbtn">Clear</button></div>

136
manage.js
View File

@ -134,6 +134,7 @@ async function addFiles(files) {
if (errors.length) {
displayError(`Errors occured adding ${errors.length} files: ${errors.join(', ')}`);
}
loadToggleState();
}
@ -145,7 +146,7 @@ deletebtn.onclick = () => {
if (deleteMode) {
deleteMode = false;
document.body.classList.remove("deletemode");
deletebtn.innerText = "Delete Emojis";
deletebtn.innerText = "Delete";
return;
}
deleteMode = true;
@ -161,25 +162,10 @@ default_animation_style_select.onchange = async function () {
var enabled = [...document.querySelectorAll("[data-state=enabled]")].filter(e => !e.querySelector("select").value);
if (enabled.length) {
default_animation_style_select.disabled = true;
enabled.forEach(e => e.querySelector("select").disabled = true);
for (let div of enabled) {
div.dataset.state = "pending";
try {
await callContentScript("deleteEmoji", div.dataset.currentId);
} catch(error) {
displayError(error);
}
try {
div.dataurl ||= await blobToDataURL(div.blob);
let newEmoji = await callContentScript("createEmoji", div.dataurl, div.querySelector("select").value || default_animation_style_select.value);
await db.updateImage(div.dataset.internalId, {currentId: newEmoji.id});
div.dataset.currentId = newEmoji.id;
div.dataset.state = "enabled";
} catch (error) {
displayError(error);
}
div.querySelector("select").disabled = false;
}
await Promise.all(enabled.map(div => (async ()=>{
await div.disable();
await div.enable();
})()));
default_animation_style_select.disabled = false;
}
};
@ -212,7 +198,6 @@ exportbtn.onclick = async () => {
for (let image of images) {
zip.file(`${image.internalId}.${image.animationStyle}.png`, image.data);
}
//todo export/import settings
var blob = await zip.generateAsync({type: "blob"});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
@ -253,67 +238,73 @@ async function loadEmojis() {
function createEmojiSquare(internalId, blob, animationStyle, currentId) {
var url = URL.createObjectURL(blob);
var div = document.createElement("div");
div.className = "emojisquare";
div.dataset.internalId = internalId;
div.blob = blob;
if (currentId) div.dataset.currentId = currentId;
div.onclick = async function onEmojiClick() {
if (this.dataset.state == "pending") return;
var selectedState = this.dataset.state;
this.dataset.state = "pending";
select.disabled = true;
errorDiv.innerText = "";
if (deleteMode) {
await db.deleteImage(this.dataset.internalId);
if (this.dataset.currentId) callContentScript("deleteEmoji", this.dataset.currentId);
this.remove();
return;
}
if (emojigrid.querySelector(".emojisquare:not([data-state])")) {
Object.assign(div, {
async enable() {
var lastState = this.dataset.state;
this.dataset.state = "pending";
select.disabled = true;
errorDiv.innerText = "";
try {
await loadToggleState();
this.dataurl ||= await blobToDataURL(this.blob);
var newEmoji = await callContentScript("createEmoji", this.dataurl, select.value || default_animation_style_select.value);
} catch (error) {
this.dataset.state = lastState;
select.disabled = false;
displayError(error);
this.dataset.state = selectedState;
return;
}
}
if (selectedState == "enabled") {
// disable
callContentScript("deleteEmoji", this.dataset.currentId).then(() => {
this.dataset.state = "disabled";
select.disabled = false;
}).catch(error => {
this.dataset.state = selectedState;
select.disabled = false;
displayError(error);
});
return;
}
// enable
this.dataurl ||= await blobToDataURL(this.blob);
callContentScript("createEmoji", this.dataurl, select.value || default_animation_style_select.value).then(async newEmoji => {
await db.updateImage(this.dataset.internalId, {currentId: newEmoji.id});
this.dataset.currentId = newEmoji.id;
this.dataset.state = "enabled";
select.disabled = false;
}).catch(error => {
this.dataset.state = selectedState;
select.disabled = false;
displayError(error);
});
},
async disable() {
var lastState = this.dataset.state;
this.dataset.state = "pending";
select.disabled = true;
errorDiv.innerText = "";
try {
await callContentScript("deleteEmoji", this.dataset.currentId);
} catch (error) {
this.dataset.state = lastState;
select.disabled = false;
displayError(error);
return;
}
this.dataset.state = "disabled";
div.querySelector("select").disabled = false;
},
async toggle() {
if (this.dataset.state == "enabled") {
await this.disable();
} else if (this.dataset.state == "disabled") {
await this.enable();
}
},
async delete() {
await db.deleteImage(this.dataset.internalId);
if (this.dataset.currentId) callContentScript("deleteEmoji", this.dataset.currentId).catch(displayError);
this.remove();
}
});
div.onclick = async function onEmojiClick() {
if (deleteMode) this.delete();
else this.toggle();
if (emojigrid.querySelector(".emojisquare:not([data-state])")) loadToggleState();
};
var imgdiv = document.createElement("div");
imgdiv.className = "imgcontainer";
var img = document.createElement("img");
img.src = url;
img.src = URL.createObjectURL(blob);
imgdiv.appendChild(img);
div.appendChild(imgdiv);
@ -323,25 +314,8 @@ function createEmojiSquare(internalId, blob, animationStyle, currentId) {
select.onchange = async event => {
await db.updateImage(div.dataset.internalId, {animationStyle: event.target.value});
if (div.dataset.state == "enabled") {
//recreate
div.dataset.state = "pending";
select.disabled = true;
callContentScript("deleteEmoji", div.dataset.currentId).finally(async () => {
div.dataurl ||= await blobToDataURL(div.blob);
callContentScript("createEmoji", div.dataurl, select.value || default_animation_style_select.value).then(async newEmoji => {
db.updateImage(div.dataset.internalId, {currentId: newEmoji.id}).catch(displayError);
div.dataset.currentId = newEmoji.id;
div.dataset.state = "enabled";
}).catch(error => {
displayError(error);
}).finally(() => {
select.disabled = false;
});
}).catch(error => {
displayError(error);
div.dataset.state == "enabled";
select.disabled = false;
});
await div.disable();
await div.enable();
}
};
div.appendChild(select);