finish it off

This commit is contained in:
MeowcaTheoRange 2024-06-10 14:05:24 -05:00
parent 5c7d85c9fc
commit 379ce00875
8 changed files with 142 additions and 22 deletions

Binary file not shown.

View file

@ -28,8 +28,17 @@ export default new Map([
menu_search_button: "Search events",
menu_language_button: "Change language",
menu_about_button: "About EventMapper",
about_dialog_close_button: "Close about",
about_dialog_header_title: "About EventMapper",
about_dialog_credits: `EventMapper made by MeowcaTheoRange @ https://abtmtr.link/
See https://git.gay/MeowcaTheoRange/EventMapper for more info
Thanks to:
- Joe 2DCon @ https://2dcon.gg/
- KikiCraft @ https://kikicraft.com/
- Captain Zach @ https://discord.gg/2dcon`,
search_dialog_close_button: "Close search",
search_dialog_search_button: "Run search",
search_dialog_header_title: "Search Events",
search_dialog_search_tags: "Tags",
search_dialog_search_by: "Search By",

View file

@ -45,12 +45,6 @@ export class EventMapperManager {
// Init
__initFloor() {
const allFloors = Array.from(this.getAllFocusObject("floor").keys());
location.hash = allFloors[0];
}
async load() {
this.uimanager.setLoading(true);
@ -68,14 +62,14 @@ export class EventMapperManager {
this.uimanager.__updateSearchUI();
this.uimanager.__updateAboutUI();
this.uimanager.setLoading(false);
this.uimanager.setLoading(true);
window.addEventListener("hashchange", () => this.hashchange());
this.__initFloor();
await this.hashchange();
this.uimanager.setLoading(false);
@ -85,6 +79,13 @@ export class EventMapperManager {
const prevID = this.#currentFocus;
let hash = location.hash;
if (hash.length <= 1) {
const allFloors = Array.from(this.getAllFocusObject("floor").keys());
if (location.hash.length <= 1) location.hash = allFloors[0];
}
if (hash.includes("#")) hash = hash.replace("#", "");
else return;

View file

@ -24,6 +24,8 @@ export class UIManager {
this.__initSearchUI();
this.__initAboutUI();
this.__initEvents();
this.__initInspector();
@ -85,6 +87,14 @@ export class UIManager {
}
}
setAboutDialogOpen(state) {
if (state) {
this.uiElements.aboutDialogScrim.classList.add("open");
} else {
this.uiElements.aboutDialogScrim.classList.remove("open");
}
}
getEventsEmpty() {
return this.uiElements.events.classList.contains("empty");
}
@ -174,6 +184,21 @@ export class UIManager {
this.uiElements.searchDialogFilters =
this.uiElements.searchDialog.querySelector("#search-dialog-filters");
// About Dialog
this.uiElements.aboutDialogScrim = this.ui.querySelector(
"#about-dialog-scrim"
);
this.uiElements.aboutDialog =
this.uiElements.aboutDialogScrim.querySelector("#about-dialog");
this.uiElements.aboutDialogHeader =
this.uiElements.aboutDialog.querySelector("#about-dialog-header");
this.uiElements.aboutDialogHeaderClose =
this.uiElements.aboutDialogHeader.querySelector("#close");
this.uiElements.aboutDialogHeaderTitle =
this.uiElements.aboutDialogHeader.querySelector("#about-dialog-title");
this.uiElements.aboutDialogBody =
this.uiElements.aboutDialog.querySelector("#about-body");
// Loading
this.uiElements.loading = this.ui.querySelector("#loading");
}
@ -205,6 +230,9 @@ export class UIManager {
this.uiElements.menuBarSearch.addEventListener("click", () => {
this.setSearchDialogOpen(true);
});
this.uiElements.menuBarAbout.addEventListener("click", () => {
this.setAboutDialogOpen(true);
});
this.__updateMenu();
}
@ -219,6 +247,35 @@ export class UIManager {
this.uiElements.menuBarAbout.title = currentLocalization.menu_about_button;
}
__initAboutUI() {
this.uiElements.aboutDialogHeaderClose.addEventListener("click", () => {
this.setAboutDialogOpen(false);
});
this.uiElements.aboutDialogScrim.addEventListener("click", () => {
this.setAboutDialogOpen(false);
});
this.uiElements.aboutDialog.addEventListener("click", (event) => {
event.stopPropagation();
});
}
__updateAboutUI() {
const currentLocalization = this.mainmanager.getCurrentLocalization();
this.uiElements.aboutDialogHeaderClose.title =
currentLocalization.about_dialog_close_button;
this.uiElements.aboutDialogHeaderTitle.textContent =
currentLocalization.about_dialog_header_title;
this.uiElements.aboutDialogBody.replaceChildren();
const aboutDialogThanks = document.createElement("p");
aboutDialogThanks.textContent = currentLocalization.about_dialog_credits;
this.uiElements.aboutDialogBody.appendChild(aboutDialogThanks);
}
__initSearchUI() {
this.uiElements.searchDialogHeaderClose.addEventListener("click", () => {
this.setSearchDialogOpen(false);

View file

@ -67,6 +67,7 @@
display: inline-block;
box-sizing: border-box;
pointer-events: all;
user-select: text;
padding: 8px;
@ -100,6 +101,11 @@
border-radius: 4px;
}
.style-inner p {
overflow: clip;
text-overflow: ellipsis;
}
.style-container {
width: 100%;
height: 100%;
@ -138,6 +144,22 @@
pointer-events: inherit;
}
.flag-material-icons {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* Display components */
.display-flex-row {

View file

@ -13,7 +13,7 @@ h2 {
p {
margin: 0;
white-space: pre-wrap;
word-break: break-all;
/* word-break: break-all; */
}
hr {
@ -30,7 +30,7 @@ button {
border: none;
color: white;
font: inherit;
padding: 6px;
padding: 4px;
border-radius: 4px;
min-width: 36px;
height: 36px;

View file

@ -5,6 +5,13 @@
to { transform: rotate(1turn) }
}
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 400;
src: url("/assets/fonts/MaterialIcons.woff2") format('woff2');
}
body, html {
margin: 0;
height: 100%;
@ -25,6 +32,14 @@ body, html {
user-select: none;
}
#map-ui #controls {
transition: right 0.25s;
}
#map-ui #controls.empty {
right: -100%;
}
#map-ui #loading {
display: inline-block;
position: absolute;
@ -56,7 +71,8 @@ body, html {
animation: load 0.5s linear infinite;
}
#search-dialog {
#search-dialog,
#about-dialog {
width: calc(100% - 16px);
max-width: 624px;
}
@ -113,7 +129,8 @@ body, html {
opacity: 0;
}
#search-dialog div.size-fullwidth h1 {
#search-dialog div.size-fullwidth h1,
#about-dialog div.size-fullwidth h1 {
line-height: 36px;
}

View file

@ -20,26 +20,26 @@
<div id="map-ui" class="loading">
<div id="controls" class="pos-topright pos-flush style-sidebar display-flex-column empty">
<div id="zoom" class="style-box display-flex-column">
<button class="zoom-button" id="zoom-in">+</button>
<button class="zoom-button" id="zoom-out" disabled>-</button>
<button class="flag-material-icons zoom-button" id="zoom-in">add</button>
<button class="flag-material-icons zoom-button" id="zoom-out" disabled>remove</button>
</div>
<div id="floors" class="style-box display-flex-column">
</div>
</div>
<div id="menu-bar" class="pos-topleft style-box display-flex-column">
<button class="menu-button" id="menu-search">Sc</button>
<button class="flag-material-icons menu-button" id="menu-search">search</button>
<!-- <button class="menu-button" id="menu-lang">Ln</button> -->
<button class="menu-button" id="menu-about">(i)</button>
<button class="flag-material-icons menu-button" id="menu-about">info</button>
</div>
<div id="events-container" class="pos-botleft pos-flush style-container empty">
<div id="events" class="pos-botleft style-box display-flex-column">
<div id="events-header" class="display-flex-header">
<button id="back" disabled></button>
<button id="back" class="flag-material-icons" disabled>arrow_upward</button>
<div class="size-fullwidth">
<h1 class="widget-heading" id="room-name"></h1>
<p class="widget-description" id="room-description"></p>
</div>
<button id="minimize">_</button>
<button id="minimize" class="flag-material-icons">minimize</button>
</div>
<div id="event-list" class="style-inner display-flex-column">
@ -47,12 +47,12 @@
</div>
<div id="events-inspector" class="pos-botleft style-box display-flex-column">
<div id="events-header" class="display-flex-header">
<button id="back"></button>
<button id="back" class="flag-material-icons">arrow_back</button>
<div class="size-fullwidth">
<h1 class="widget-heading" id="room-name"></h1>
<p class="widget-description subtitle" id="event-length"></p>
</div>
<button id="minimize">_</button>
<button id="minimize" class="flag-material-icons">minimize</button>
</div>
<p class="widget-description" id="room-time"></p>
<div id="event-body" class="style-inner display-flex-column">
@ -65,7 +65,7 @@
<div class="size-fullwidth">
<h1 class="widget-heading" id="search-dialog-title"></h1>
</div>
<button id="close">X</button>
<button id="close" class="flag-material-icons">close</button>
</div>
<div id="search-dialog-bar" class="size-fullwidth display-flex-header">
<input type="text" id="search-dialog-input" />
@ -81,12 +81,26 @@
</div>
</div>
</div>
<div id="about-dialog-scrim" class="pos-topleft pos-flush style-container style-scrim display-flex-center">
<div id="about-dialog" class="style-box flag-no-pointer display-flex-column">
<div id="about-dialog-header" class="display-flex-header">
<div class="size-fullwidth">
<h1 class="widget-heading" id="about-dialog-title"></h1>
</div>
<button id="close" class="flag-material-icons">close</button>
</div>
<div id="about-body" class="style-inner">
</div>
</div>
</div>
<div id="loading">
<div id="loading-circle">
</div>
</div>
</div>
</div>
<script src="/assets/scripts/script.js" type="module"></script>
<script src="/files/scripts/script.js" type="module"></script>
</body>