Skip to content

Commit 59bb3ae

Browse files
wlftwlft
committed
feat: discord header button
1 parent 6ff1bc5 commit 59bb3ae

2 files changed

Lines changed: 175 additions & 0 deletions

File tree

‎mediawiki/obbywiki.com/Citizen.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,3 +317,96 @@ width: 16px;
317317
.ow-rule-fold-summary::-webkit-details-marker {
318318
display: none;
319319
}
320+
321+
/* Discord header button (spin adapted from https://github.com/wlft/discord-logo-2021) */
322+
.citizen-discord:hover {
323+
z-index: 1;
324+
}
325+
326+
.citizen-discord-button.cdx-button {
327+
overflow: visible;
328+
color: var(--color-base);
329+
text-decoration: none;
330+
transition: background-color var(--transition-duration-base), color var(--transition-duration-base);
331+
}
332+
333+
.citizen-discord-button.cdx-button:hover,
334+
.citizen-discord-button.cdx-button:focus-visible {
335+
color: #fff;
336+
background-color: #5865f2 !important;
337+
text-decoration: none;
338+
}
339+
340+
.citizen-discord-button.cdx-button:active {
341+
color: #fff;
342+
background-color: #4752c4 !important;
343+
}
344+
345+
.citizen-discord-button > span {
346+
position: absolute;
347+
width: 1px;
348+
height: 1px;
349+
overflow: hidden;
350+
white-space: nowrap;
351+
clip-path: inset(50%);
352+
}
353+
354+
.citizen-discord-logo {
355+
overflow: visible;
356+
pointer-events: none;
357+
}
358+
359+
.citizen-discord-logo__original,
360+
.citizen-discord-logo__outer,
361+
.citizen-discord-logo__middle,
362+
.citizen-discord-logo__inner {
363+
transform-origin: 50% 50%;
364+
}
365+
366+
.citizen-discord-button:hover .citizen-discord-logo__outer,
367+
.citizen-discord-button:focus-visible .citizen-discord-logo__outer {
368+
--spin-scale: 1.12;
369+
animation: citizen-discord-spin 700ms cubic-bezier(0.5, 0, 0.3, 1), citizen-discord-spin-scale 700ms ease-in-out;
370+
}
371+
372+
.citizen-discord-button:hover .citizen-discord-logo__middle,
373+
.citizen-discord-button:focus-visible .citizen-discord-logo__middle {
374+
--spin-scale: 1.09;
375+
animation: citizen-discord-spin 700ms cubic-bezier(0.35, 0, 0.25, 1), citizen-discord-spin-scale 700ms ease-in-out;
376+
}
377+
378+
.citizen-discord-button:hover .citizen-discord-logo__inner,
379+
.citizen-discord-button:focus-visible .citizen-discord-logo__inner {
380+
--spin-scale: 1.06;
381+
animation: citizen-discord-spin 700ms cubic-bezier(0.2, 0, 0.2, 1), citizen-discord-spin-scale 700ms ease-in-out;
382+
}
383+
384+
.citizen-discord-button:hover .citizen-discord-logo__original,
385+
.citizen-discord-button:focus-visible .citizen-discord-logo__original {
386+
visibility: hidden;
387+
}
388+
389+
@keyframes citizen-discord-spin {
390+
from { rotate: 0deg; }
391+
to { rotate: 360deg; }
392+
}
393+
394+
@keyframes citizen-discord-spin-scale {
395+
50% { scale: var(--spin-scale); }
396+
}
397+
398+
@media (prefers-reduced-motion: reduce) {
399+
.citizen-discord-button:hover .citizen-discord-logo__original,
400+
.citizen-discord-button:focus-visible .citizen-discord-logo__original {
401+
visibility: visible;
402+
}
403+
404+
.citizen-discord-button:hover .citizen-discord-logo__outer,
405+
.citizen-discord-button:hover .citizen-discord-logo__middle,
406+
.citizen-discord-button:hover .citizen-discord-logo__inner,
407+
.citizen-discord-button:focus-visible .citizen-discord-logo__outer,
408+
.citizen-discord-button:focus-visible .citizen-discord-logo__middle,
409+
.citizen-discord-button:focus-visible .citizen-discord-logo__inner {
410+
animation: none;
411+
}
412+
}

‎mediawiki/obbywiki.com/Citizen.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
// Citizen.js
22
// needs a heavy refactor
33

4+
// configs
5+
const DISCORD_INVITE_URL = 'https://discord.gg/vuJsnzKkKY';
6+
47
/**
58
* @name SidebarIcons
69
* Prepend icons to the MediaWiki sidebar (also needs a refactor!)
@@ -20,6 +23,7 @@ const icons_by_ids = {
2023

2124
for (const [k, v] of Object.entries(icons_by_ids)) {
2225
const element = document.querySelector('.citizen-menu__content ' + '#n-' + k + ' a')
26+
if (!element) { continue }
2327

2428
const icon_element = document.createElement('span')
2529
icon_element.classList.add('citizen-ui-icon', v.class)
@@ -74,3 +78,81 @@ setTimeout(() => {
7478
});
7579
}, 250);
7680
});
81+
82+
/**
83+
* @name DiscordHeaderButton
84+
* Animation adapted from https://github.com/wlft/discord-logo-2021
85+
*/
86+
87+
const discord_button_html = `
88+
<a
89+
class="citizen-discord-button citizen-cdx-button--size-large cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet"
90+
href="${DISCORD_INVITE_URL}"
91+
title="Discord"
92+
aria-label="ObbyWiki on Discord"
93+
target="_blank"
94+
rel="noopener noreferrer"
95+
>
96+
<svg class="citizen-discord-logo" viewBox="0 0 48 48" width="20" height="20" aria-hidden="true" focusable="false">
97+
<defs>
98+
<path
99+
id="citizen-discord-face"
100+
fill="currentColor"
101+
fill-rule="evenodd"
102+
transform="translate(2 2) scale(1.8333)"
103+
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7913 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
104+
/>
105+
<mask id="citizen-discord-mask-outer">
106+
<rect width="100%" height="100%" fill="#fff"/>
107+
<circle r="42%" cx="50%" cy="50%" fill="#000"/>
108+
</mask>
109+
<mask id="citizen-discord-mask-middle">
110+
<rect width="100%" height="100%" fill="#000"/>
111+
<circle r="43%" cx="50%" cy="50%" fill="#fff"/>
112+
<circle r="32%" cx="50%" cy="50%" fill="#000"/>
113+
</mask>
114+
<mask id="citizen-discord-mask-inner">
115+
<rect width="100%" height="100%" fill="#000"/>
116+
<circle r="32%" cx="50%" cy="50%" fill="#fff"/>
117+
</mask>
118+
</defs>
119+
<use href="#citizen-discord-face" class="citizen-discord-logo__original"/>
120+
<use href="#citizen-discord-face" class="citizen-discord-logo__outer" mask="url(#citizen-discord-mask-outer)"/>
121+
<use href="#citizen-discord-face" class="citizen-discord-logo__middle" mask="url(#citizen-discord-mask-middle)"/>
122+
<use href="#citizen-discord-face" class="citizen-discord-logo__inner" mask="url(#citizen-discord-mask-inner)"/>
123+
</svg>
124+
<span>Discord</span>
125+
</a>
126+
`.trim();
127+
128+
function insert_discord_button() {
129+
if (document.getElementById('citizen-discord')) {
130+
return;
131+
}
132+
133+
const header = document.querySelector('.citizen-header');
134+
if (!header) {
135+
return;
136+
}
137+
138+
const item = document.createElement('div');
139+
item.id = 'citizen-discord';
140+
item.className = 'citizen-header__item citizen-discord';
141+
item.innerHTML = discord_button_html;
142+
143+
const prefs = header.querySelector('.citizen-preferences-dropdown');
144+
const header_end = header.querySelector('.citizen-header__end');
145+
if (prefs && prefs.parentNode) {
146+
prefs.parentNode.insertBefore(item, prefs);
147+
} else if (header_end) {
148+
header_end.insertBefore(item, header_end.firstChild);
149+
} else {
150+
header.appendChild(item);
151+
}
152+
}
153+
154+
if (document.readyState === 'loading') {
155+
document.addEventListener('DOMContentLoaded', insert_discord_button);
156+
} else {
157+
insert_discord_button();
158+
}

0 commit comments

Comments
 (0)