Skip to content

Commit 26b2903

Browse files
bobjoerulesbobjoerules
committed
Added Settings Toggle, Added Right Click Menu & Some Clean Up
1 parent 3a543e9 commit 26b2903

File tree

3 files changed

+93
-51
lines changed

3 files changed

+93
-51
lines changed

‎index.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@
1313
</style>
1414
</head>
1515
<body>
16+
<div id="downloadmenu" class="downloadmenu">
17+
<ul>
18+
<li onclick="download()">Download Image</li>
19+
<hr>
20+
<li onclick="showsettings()">Show Settings</li>
21+
<hr>
22+
<li onclick="clearemoji()">Clear Emoji</li>
23+
</ul>
24+
</div>
25+
1626
<div id="settings" class="settings">
1727
<div style="z-index: 100;">Mouth:
1828

@@ -116,10 +126,12 @@
116126
<input type="color" id="favcolor" name="favcolor" value="#005A78" style="padding: 0; border:none; cursor:pointer;">
117127

118128
</div>
119-
<div>
120-
<br>
121-
<button id="download" onclick="download()">Download Emoji</button>
122-
<button id="download" onclick="clearemoji()">Clear Emoji</button>
129+
<div style="display: flex; justify-content: space-between; padding-top: 10px;">
130+
<div>
131+
<button class="download" onclick="download()">Download Emoji</button>
132+
<button class="download" onclick="clearemoji()">Clear Emoji</button>
133+
</div>
134+
<button class="download" onclick="hidesettings()">Hide Settings</button>
123135
</div>
124136
</div>
125137
<!--
@@ -140,7 +152,7 @@
140152
<img id="face" class="face" src="images/Face Background.png" draggable = "false">
141153
</div>
142154
<canvas id="canvas" width="500" height="500" style="display: none;"></canvas>
143-
<p style="position: absolute; bottom: 0; right: 10px" draggable="false"><a color="grey" href="https://github.com/bobjoerules/Emojisite">GitHub</a> · Emoji Site V2.0 © <a color="grey" href="https://bobjoerules.com">Bobjoerules</a> 2025</p>
155+
<p id="credits" style="position: absolute; bottom: 0; right: 10px; color: white;" draggable="false"><a href="https://github.com/bobjoerules/Emojisite">GitHub</a> · <a href="https://bobjoerules.com">Bobjoerules</a></p>
144156
<script src="script.js"></script>
145157
</body>
146158
</html>

‎script.js‎

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,34 @@ const accessories = document.getElementById('accessories')
1313
const mouth = document.getElementById('mouth')
1414
let mouthblockerl = 0
1515
let mouthblockerr = 0
16+
const menu = document.getElementById('downloadmenu');
17+
18+
function hidesettings(settings) {
19+
document.getElementById('settings').style.display="none"
20+
document.getElementById('credits').style.display="none"
21+
}
22+
23+
function showsettings(settings) {
24+
document.getElementById('settings').style.display="block"
25+
document.getElementById('credits').style.display="block"
26+
}
27+
28+
function showMenu(x, y) {
29+
menu.style.left = x -80 + 'px';
30+
menu.style.top = y -30 + 'px';
31+
menu.style.display = 'block';
32+
}
33+
34+
function hideMenu() {
35+
menu.style.display = 'none';
36+
}
37+
38+
document.addEventListener('contextmenu', function (e) {
39+
e.preventDefault();
40+
showMenu(e.pageX, e.pageY);
41+
});
42+
43+
menu.addEventListener('mouseleave', hideMenu);
1644

1745
glassesbtn.addEventListener("click", () => {
1846
if (glasses.src.split("/").pop() === 'Sunglasses.png'){
@@ -123,44 +151,33 @@ document.getElementById('winkl').onclick = () => {
123151
}
124152

125153
function disableeyes() {
126-
winkl.disabled = true;
127-
winkl.style.backgroundColor = 'red';
128-
winkl.style.opacity = 0.5;
129-
winkl.style.cursor = 'default';
130-
disr.disabled = true;
131-
disr.style.backgroundColor = 'red';
132-
disr.style.opacity = 0.5;
133-
disr.style.cursor = 'default';
134-
disl.disabled = true;
135-
disl.style.backgroundColor = 'red';
136-
disl.style.opacity = 0.5;
137-
disl.style.cursor = 'default';
154+
disablebtn(winkl)
155+
disablebtn(disr)
156+
disablebtn(disl)
138157
}
139158

140159
function enableeyes() {
141-
winkl.disabled = false;
142-
winkl.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
143-
winkl.style.opacity = 1;
144-
winkl.style.cursor = 'pointer';
145-
disr.disabled = false;
146-
disr.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
147-
disr.style.opacity = 1;
148-
disr.style.cursor = 'pointer';
149-
disl.disabled = false;
150-
disl.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
151-
disl.style.opacity = 1;
152-
disl.style.cursor = 'pointer';
160+
enablebtn(winkl)
161+
enablebtn(disr)
162+
enablebtn(disl)
153163
}
154164

155165
function disablemouth() {
156-
grinbtn.disabled = true;
157-
grinbtn.style.backgroundColor = 'red';
158-
grinbtn.style.opacity = 0.5;
159-
grinbtn.style.cursor = 'default';
160-
griningbtn.disabled = true;
161-
griningbtn.style.backgroundColor = 'red';
162-
griningbtn.style.opacity = 0.5;
163-
griningbtn.style.cursor = 'default';
166+
disablebtn(grinbtn)
167+
disablebtn(griningbtn)
168+
}
169+
170+
function disablebtn(btn) {
171+
btn.disabled = true;
172+
btn.style.backgroundColor = 'red';
173+
btn.style.opacity = 0.5;
174+
btn.style.cursor = 'default';
175+
}
176+
function enablebtn(btn) {
177+
btn.disabled = false;
178+
btn.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
179+
btn.style.opacity = 1;
180+
btn.style.cursor = 'pointer';
164181
}
165182

166183
function enableMouth(side) {
@@ -169,19 +186,9 @@ function enableMouth(side) {
169186
}else{
170187
mouthblockerl = 0;
171188
}
172-
enablemouth();
173-
}
174-
175-
function enablemouth() {
176189
if ((mouthblockerr === 0) && (mouthblockerl === 0)){
177-
grinbtn.disabled = false;
178-
grinbtn.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
179-
grinbtn.style.opacity = 1;
180-
grinbtn.style.cursor = 'pointer';
181-
griningbtn.disabled = false;
182-
griningbtn.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
183-
griningbtn.style.opacity = 1;
184-
griningbtn.style.cursor = 'pointer';
190+
enablebtn(grinbtn)
191+
enablebtn(griningbtn)
185192
}
186193
}
187194

‎style.css‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');
2-
div, p {
2+
div, p, a {
33
font-family: 'Dosis', sans-serif;
44
color: white;
55
text-shadow:
@@ -52,7 +52,7 @@ div, p {
5252
z-index: 0;
5353
}
5454

55-
#download {
55+
.download {
5656
background-color: black;
5757
padding: 10px;
5858
}
@@ -75,4 +75,27 @@ button:hover{
7575

7676
button:active{
7777
background-color: black;
78+
}
79+
80+
.downloadmenu {
81+
font-family:verdana;
82+
color: white;
83+
display: none;
84+
position: absolute;
85+
background-color: black;
86+
border-radius: 8px;
87+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
88+
z-index: 1000;
89+
}
90+
91+
.downloadmenu ul {
92+
list-style: none;
93+
padding: 8px 0;
94+
margin: 0;
95+
}
96+
97+
.downloadmenu li {
98+
padding: 8px 16px;
99+
cursor: pointer;
100+
white-space: nowrap;
78101
}

0 commit comments

Comments
 (0)