quazi00/vrchat-emoji-manager
1
0
Fork 0
forked from lamp/vrchat-emoji-manager
Code Pull Requests Activity

Browse Source
This commit is contained in:
Lamp 2023-10-26 01:14:49 -07:00
parent 826c7ccb73
commit d1de5350e1
2 changed files with 77 additions and 17 deletions

24
toggle.html

@ -9,22 +9,23 @@
#emojigrid {
display: flex;
flex-wrap: wrap;
width: 286px;
max-height: 350px;
overflow: auto;
}
.emojisquare {
width: 50px;
height: 50px;
border: 1px solid gray;
margin: 1px;
display: flex;
padding: 4px;
}
.emojisquare img {
width: 48px;
height: 48px;
.emojisquare .imgcontainer {
width: 64px;
height: 64px;
margin: auto;
}
.emojisquare .imgcontainer img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.enabled {
background-color:rgba(0, 255, 0, 0.5);
}
@ -39,10 +40,7 @@
}
</style>
</head><body>
<div id="topbar">
<div>VRChat Emoji Manager</div>
<div id="topright"><button id="editbtn">Edit</button> <button id="fullscreenbtn">◱</button></div>
</div>
<h1>VRChat Emoji Manager</h1>
<div id="emojigrid"></div>
<div id="errorDiv"></div>

70
toggle.js

@ -1,5 +1,49 @@
editbtn.onclick = () => open("edit.html");
fullscreenbtn.onclick = () => open("toggle.html");
var animationStyles = `Aura
Bats
Bees
Bounce
Cloud
Confetti
Crying
Dislike
Fire
Idea
Lasers
Like
Magnet
Mistletoe
Money
Noise
Orbit
Pizza
Rain
Rotate
Shake
Snow
Snowball
Spin
Splash
Stop
ZZZ`.split('\n');
function createAnimationStyleSelect() {
let select = document.createElement("select");
animationStyles.forEach(a => {
let option = document.createElement("option");
option.innerText = a;
option.value = a.toLowerCase();
select.appendChild(option);
});
return select;
}
loadEmojis().catch(displayError);
@ -9,15 +53,26 @@ async function loadEmojis() {
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.classList.add("emojisquare");
div.onclick = toggleEmoji;
let imgdiv = document.createElement("div");
imgdiv.className = "imgcontainer";
let img = document.createElement("img");
img.src = store["data-" + emoji.internalId];
div.appendChild(img);
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);
}
@ -105,3 +160,10 @@ async function toggleEmoji(event) {
});
}
}
async function setAnimationStyle(internalId, animationStyle) {
var {emoji} = await chrome.storage.local.get("emoji");
var e = emoji.find(e => e.internalId == internalId);
e.animationStyle = animationStyle;
await chrome.storage.local.set({emoji});
}