consolidate redundant enable/disable code
This commit is contained in:
parent
ebed204c9d
commit
5f1b0db47c
@ -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
136
manage.js
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user