This commit is contained in:
parent
715219e679
commit
c3e8dd4c1d
@ -9,6 +9,10 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.deletemode {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
#emojigrid {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
@ -65,8 +69,9 @@
|
||||
<div id="emojigrid"></div>
|
||||
<div id="bottompanel">
|
||||
<div id="errorDiv"></div>
|
||||
<div id="emojiadd">Add more!!! <input type="file" id="fileinput" accept="image/png,image/jpeg" multiple /> <select id="default_animation_style_select" value="aura"><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> <input type="submit" id="submit" value="Add" /></div>
|
||||
<div><button id="deletemodebtn">Delete Emojis</button></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>
|
||||
|
||||
|
||||
|
||||
216
manage.js
216
manage.js
@ -1,4 +1,5 @@
|
||||
const ANIMATION_STYLES = `Aura
|
||||
const ANIMATION_STYLES = `default
|
||||
Aura
|
||||
Bats
|
||||
Bees
|
||||
Bounce
|
||||
@ -43,38 +44,65 @@ function createAnimationStyleSelect() {
|
||||
|
||||
|
||||
|
||||
submit.onclick = async () => {
|
||||
submit.disabled = true;
|
||||
addbtn.onclick = async () => {
|
||||
var fsfhs = await showOpenFilePicker({
|
||||
multiple: true,
|
||||
types: [
|
||||
{accept: {
|
||||
"image/png": [".png"],
|
||||
"image/jpeg": [".jpg", ".jpeg"]
|
||||
}}
|
||||
]
|
||||
});
|
||||
|
||||
if (!fsfhs.length) return;
|
||||
|
||||
var newEmoji = [];
|
||||
for (let file of fileinput.files) {
|
||||
let e = {
|
||||
internalId: randomId(),
|
||||
animationStyle: default_animation_style_select.value,
|
||||
};
|
||||
let data = await fileToDataURL(file);
|
||||
//todo convert/resize
|
||||
await chrome.storage.local.set({["data-"+e.internalId]: data});
|
||||
newEmoji.push(e);
|
||||
instantiateRow(data, e.internalId, e.animationStyle);
|
||||
var errors = [];
|
||||
for (let fsfh of fsfhs) {
|
||||
try {
|
||||
let file = await fsfh.getFile();
|
||||
let e = {
|
||||
internalId: randomId(),
|
||||
addedAt: new Date()
|
||||
};
|
||||
let data = await fileToDataURL(file);
|
||||
//todo convert/resize
|
||||
await chrome.storage.local.set({["data-"+e.internalId]: data});
|
||||
newEmoji.push(e);
|
||||
createEmojiSquare(e, data);
|
||||
} catch(error) {
|
||||
console.error(error);
|
||||
errors.push(error.message);
|
||||
}
|
||||
}
|
||||
if (errors.length) {
|
||||
displayError(`Errors occured adding ${errors.length} files: ${errors.join(', ')}`);
|
||||
}
|
||||
var {emoji} = await chrome.storage.local.get("emoji");
|
||||
emoji = emoji.concat(newEmoji);
|
||||
await chrome.storage.local.set({emoji});
|
||||
fileinput.value = "";
|
||||
submit.disabled = false;
|
||||
};
|
||||
|
||||
|
||||
var deleteMode = false;
|
||||
deletemodebtn.onclick = () => {
|
||||
deletebtn.onclick = () => {
|
||||
if (deleteMode) {
|
||||
deleteMode = false;
|
||||
deletemodebtn.innerText = "Delete Emojis";
|
||||
document.body.classList.remove("deletemode");
|
||||
deletebtn.innerText = "Delete Emojis";
|
||||
return;
|
||||
}
|
||||
alert("Delete mode activated, click emojis to delete.");
|
||||
deleteMode = true;
|
||||
deletemodebtn.innerText = "CANCEL DELETE MODE";
|
||||
document.body.classList.add("deletemode");
|
||||
deletebtn.innerText = "Stop Delete";
|
||||
};
|
||||
|
||||
chrome.storage.local.get("defaultAnimationStyle").then(({defaultAnimationStyle}) => {
|
||||
default_animation_style_select.value = defaultAnimationStyle || "aura";
|
||||
});
|
||||
default_animation_style_select.onchange = function () {
|
||||
chrome.storage.local.set({defaultAnimationStyle: this.value});
|
||||
};
|
||||
|
||||
|
||||
@ -94,33 +122,88 @@ async function loadEmojis() {
|
||||
var store = await chrome.storage.local.get();
|
||||
if (!store.emoji) throw new Error("No emoji.");
|
||||
for (let emoji of store.emoji) {
|
||||
let div = document.createElement("div");
|
||||
div.className = "emojisquare";
|
||||
div.dataset.animationStyle = emoji.animationStyle;
|
||||
div.dataset.internalId = emoji.internalId;
|
||||
div.dataset.currentId = emoji.currentId;
|
||||
div.onclick = toggleEmoji;
|
||||
|
||||
let imgdiv = document.createElement("div");
|
||||
imgdiv.className = "imgcontainer";
|
||||
let img = document.createElement("img");
|
||||
img.src = store["data-" + emoji.internalId];
|
||||
imgdiv.appendChild(img);
|
||||
div.appendChild(imgdiv);
|
||||
|
||||
let select = createAnimationStyleSelect();
|
||||
select.value = emoji.animationStyle;
|
||||
select.onclick = event => event.stopPropagation();
|
||||
select.onchange = event => {
|
||||
setAnimationStyle(emoji.internalId, event.target.value);
|
||||
};
|
||||
div.appendChild(select);
|
||||
|
||||
emojigrid.appendChild(div);
|
||||
createEmojiSquare(emoji, store["data-" + emoji.internalId]);
|
||||
}
|
||||
await loadToggleState();
|
||||
}
|
||||
|
||||
|
||||
function createEmojiSquare(emoji, url) {
|
||||
let div = document.createElement("div");
|
||||
div.className = "emojisquare";
|
||||
div.dataset.internalId = emoji.internalId;
|
||||
if (emoji.currentId) div.dataset.currentId = emoji.currentId;
|
||||
if (emoji.animationStyle) div.dataset.animationStyle = emoji.animationStyle;
|
||||
div.onclick = async function onEmojiClick(event) {
|
||||
if (this.dataset.state == "pending") return;
|
||||
var selectedState = this.dataset.state;
|
||||
this.dataset.state = "pending";
|
||||
errorDiv.innerText = "";
|
||||
|
||||
if (deleteMode) {
|
||||
let {emoji} = await chrome.storage.local.get("emoji");
|
||||
emoji = emoji.filter(e => e.internalId != this.dataset.internalId);
|
||||
await chrome.storage.local.set({emoji});
|
||||
this.remove();
|
||||
if (this.dataset.currentId) callContentScript("deleteEmoji", this.dataset.currentId);
|
||||
return;
|
||||
}
|
||||
|
||||
if (emojigrid.querySelector(".emojisquare:not([data-state])")) {
|
||||
try {
|
||||
await loadToggleState();
|
||||
} catch (error) {
|
||||
displayError(error);
|
||||
this.dataset.state = selectedState;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedState == "enabled") {
|
||||
// disable
|
||||
callContentScript("deleteEmoji", this.dataset.currentId).then(() => {
|
||||
this.dataset.state = "disabled";
|
||||
}).catch(error => {
|
||||
displayError(error);
|
||||
this.dataset.state = selectedState;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// enable
|
||||
callContentScript("createEmoji", this.querySelector("img").src, this.dataset.animationStyle || default_animation_style_select.value).then(newEmoji => {
|
||||
chrome.storage.local.get("emoji").then(({emoji}) => {
|
||||
emoji.find(e => e.internalId == this.dataset.internalId).currentId = newEmoji.id;
|
||||
chrome.storage.local.set({emoji});
|
||||
this.dataset.currentId = newEmoji.id;
|
||||
this.dataset.state = "enabled";
|
||||
});
|
||||
}).catch(error => {
|
||||
this.dataset.state = selectedState;
|
||||
displayError(error);
|
||||
});
|
||||
};
|
||||
|
||||
let imgdiv = document.createElement("div");
|
||||
imgdiv.className = "imgcontainer";
|
||||
let img = document.createElement("img");
|
||||
img.src = url;
|
||||
imgdiv.appendChild(img);
|
||||
div.appendChild(imgdiv);
|
||||
|
||||
let select = createAnimationStyleSelect();
|
||||
select.value = emoji.animationStyle || "default";
|
||||
select.onclick = event => event.stopPropagation();
|
||||
select.onchange = event => {
|
||||
setAnimationStyle(emoji.internalId, event.target.value);
|
||||
};
|
||||
div.appendChild(select);
|
||||
|
||||
emojigrid.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
|
||||
|
||||
async function loadToggleState() {
|
||||
console.debug("loadToggleState");
|
||||
var elements = document.querySelectorAll(".emojisquare");
|
||||
@ -159,55 +242,6 @@ async function callContentScript(method, ...args) {
|
||||
else return response;
|
||||
};
|
||||
|
||||
async function toggleEmoji(event) {
|
||||
if (this.dataset.state == "pending") return;
|
||||
var selectedState = this.dataset.state;
|
||||
this.dataset.state = "pending";
|
||||
errorDiv.innerText = "";
|
||||
|
||||
if (emojigrid.querySelector(".emojisquare:not([data-state])")) {
|
||||
try {
|
||||
await loadToggleState();
|
||||
} catch (error) {
|
||||
displayError(error);
|
||||
this.dataset.state = selectedState;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedState == "enabled") {
|
||||
// disable
|
||||
callContentScript("deleteEmoji", this.dataset.currentId).then(() => {
|
||||
this.dataset.state = "disabled";
|
||||
}).catch(error => {
|
||||
this.dataset.state = selectedState;
|
||||
displayError(error);
|
||||
});
|
||||
if (!deleteMode) return;
|
||||
}
|
||||
|
||||
if (deleteMode) {
|
||||
let {emoji} = await chrome.storage.local.get("emoji");
|
||||
emoji = emoji.filter(e => e.internalId != this.dataset.internalId);
|
||||
await chrome.storage.local.set({emoji});
|
||||
this.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// enable
|
||||
callContentScript("createEmoji", this.querySelector("img").src, this.dataset.animationStyle).then(newEmoji => {
|
||||
chrome.storage.local.get("emoji").then(({emoji}) => {
|
||||
emoji.find(e => e.internalId == this.dataset.internalId).currentId = newEmoji.id;
|
||||
chrome.storage.local.set({emoji});
|
||||
this.dataset.currentId = newEmoji.id;
|
||||
this.dataset.state = "enabled";
|
||||
});
|
||||
}).catch(error => {
|
||||
this.dataset.state = selectedState;
|
||||
displayError(error);
|
||||
});
|
||||
}
|
||||
|
||||
async function setAnimationStyle(internalId, animationStyle) {
|
||||
var {emoji} = await chrome.storage.local.get("emoji");
|
||||
var e = emoji.find(e => e.internalId == internalId);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user