zumbiepig/MineXLauncher
zumbiepig/MineXLauncher
1
0
Fork 0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-08 09:24:48 +00:00
Code

make it so ppl who spam buttons dont make articles glitch out

Browse Source
This commit is contained in:
zumbiepig 2024-09-05 15:40:20 -07:00
parent fe76eb5b4e
commit b488fdbe6a
No known key found for this signature in database
GPG Key ID: 17C891BE28B953DE
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/articles/index.html
View File

@ -66,7 +66,7 @@
<div class="article-item" onclick="article.open('cloudflare-tunnel')">
<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
<div class="article-details">
<strong class="article-name">How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
<strong class="article-name">Setting Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
<p class="article-description">This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
</div>
</div>
@ -169,7 +169,7 @@
<div id="article-cloudflare-tunnel" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close('cloudflare-tunnel')">&times;</span>
<h1>How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
<h1>Setting Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
<h5>Written by zumbiepig and SpeedSlicer</h5>
<p>In this guide, we'll walk you through the steps to set up a Cloudflare Tunnel for your Eaglercraft server, which is running on <code>ws://localhost:8081</code>.</p>
<h3>Prerequisites</h3>

16
public/resources/styles/themes/default.css
View File

@ -746,17 +746,15 @@ nav {
.article {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 500vw;
height: 500vh;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
@keyframes openArticle {
@keyframes article-open {
0% {
opacity: 0;
scale: 0;
@ -770,7 +768,7 @@ nav {
}
}
@keyframes closeArticle {
@keyframes article-close {
0% {
opacity: 1;
scale: 1;
@ -788,9 +786,9 @@ nav {
background-color: #333;
padding: 20px;
border: 1px solid #888;
width: 65%;
max-width: 85%;
max-height: 85%;
width: 65vw;
height: 85vh;
max-width: 85vw;
border-radius: 15px;
color: #fff;
overflow-y: auto;

28
src/resources/scripts/main.ts
View File

@ -2,6 +2,7 @@ import { gt, coerce } from 'semver';
import { inflate, deflate } from 'pako';
let selectedVersion: string;
let articleClosing = false;
const theme = {
load: function (themeToLoad?: string) {
@ -156,15 +157,32 @@ const article = {
open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) {
modal.style.animation = 'openArticle 0.5s ease-in-out';
modal.style.animation = 'article-open 0.5s ease-in-out';
modal.style.display = 'flex';
const closeArticleHandler = (event: Event) => {
if (event.target === modal) {
modal.removeEventListener('click', closeArticleHandler);
article.close(articleId);
}
};
modal.addEventListener('click', closeArticleHandler);
}
},
close: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) {
modal.style.animation = 'closeArticle 0.5s ease-in-out';
modal.addEventListener('animationend', () => (modal.style.display = 'none'), { once: true });
if (!articleClosing) {
articleClosing = true;
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) {
modal.style.animation = 'article-close 0.5s ease-in-out';
modal.addEventListener(
'animationend',
() => {
modal.style.display = 'none';
articleClosing = false;
},
{ once: true }
);
}
}
},
};