Leahnaya/entralinked
1
0
Fork 0
mirror of https://github.com/kuroppoi/entralinked.git synced 2026-09-14 19:55:11 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change how popup forms work so they don't rely on anchors

Browse Source
This commit is contained in:
kuroppoi
2023-07-11 23:27:50 +02:00
parent d232de7307
commit eb1605dbe7
3 changed files with 58 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/main/resources/dashboard/profile.html
View File

@@ -50,18 +50,18 @@
<div>
<table id="encounter-table" class="encounter-image-table">
<tr>
<td><a id="encounter0" href="#configureEncounter" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter1" href="#configureEncounter" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter2" href="#configureEncounter" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter3" href="#configureEncounter" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter4" href="#configureEncounter" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td id="encounter0" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter1" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter2" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter3" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter4" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></td>
</tr>
<tr>
<td><a id="encounter5" href="#configureEncounter" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter6" href="#configureEncounter" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter7" href="#configureEncounter" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter8" href="#configureEncounter" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td><a id="encounter9" href="#configureEncounter" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
<td id="encounter5" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter6" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter7" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter8" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></td>
<td id="encounter9" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></td>
</tr>
</table>
</div>
@@ -72,20 +72,20 @@
<div>
<table id="visitor-table" class="visitor-table">
<tr>
<td><a id="visitor0" href="#configureVisitor" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor1" href="#configureVisitor" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor2" href="#configureVisitor" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor3" href="#configureVisitor" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor4" href="#configureVisitor" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor5" href="#configureVisitor" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></a></td>
<td id="visitor0" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor1" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor2" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor3" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor4" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor5" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></td>
</tr>
<tr>
<td><a id="visitor6" href="#configureVisitor" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor7" href="#configureVisitor" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor8" href="#configureVisitor" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor9" href="#configureVisitor" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor10" href="#configureVisitor" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></a></td>
<td><a id="visitor11" href="#configureVisitor" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></a></td>
<td id="visitor6" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor7" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor8" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor9" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor10" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></td>
<td id="visitor11" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></td>
</tr>
</table>
</div>
@@ -96,28 +96,28 @@
<div>
<table id="item-table" class="item-table">
<tr>
<td><a id="item0" href="#configureItem" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item1" href="#configureItem" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item2" href="#configureItem" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item3" href="#configureItem" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item4" href="#configureItem" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item5" href="#configureItem" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item6" href="#configureItem" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item7" href="#configureItem" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item8" href="#configureItem" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item9" href="#configureItem" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></a></td>
<td id="item0" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></td>
<td id="item1" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></td>
<td id="item2" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></td>
<td id="item3" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></td>
<td id="item4" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></td>
<td id="item5" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></td>
<td id="item6" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></td>
<td id="item7" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></td>
<td id="item8" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></td>
<td id="item9" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></td>
</tr>
<tr>
<td><a id="item10" href="#configureItem" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item11" href="#configureItem" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item12" href="#configureItem" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item13" href="#configureItem" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item14" href="#configureItem" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item15" href="#configureItem" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item16" href="#configureItem" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item17" href="#configureItem" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item18" href="#configureItem" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></a></td>
<td><a id="item19" href="#configureItem" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></a></td>
<td id="item10" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></td>
<td id="item11" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></td>
<td id="item12" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></td>
<td id="item13" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></td>
<td id="item14" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></td>
<td id="item15" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></td>
<td id="item16" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></td>
<td id="item17" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></td>
<td id="item18" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></td>
<td id="item19" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></td>
</tr>
</table>
</div>
@@ -159,7 +159,7 @@
</div>
</div>
<!-- Entree Forest Encounter Configuration Form -->
<div id="configureEncounter" class="popup">
<div id="encounter-config" class="popup">
<div class="content">
<button class="close-button" onclick="closeEncounterForm()">X</button>
<form id="encounter-form">
@@ -200,7 +200,7 @@
</div>
</div>
<!-- Item Configuration Form -->
<div id="configureItem" class="popup">
<div id="item-config" class="popup">
<div class="content">
<button class="close-button" onclick="closeItemForm()">X</button>
<form id="item-form">
@@ -216,7 +216,7 @@
</div>
</div>
<!-- Join Avenue Visitor Configuration Form -->
<div id="configureVisitor" class="popup">
<div id="visitor-config" class="popup">
<div class="content">
<button class="close-button" onclick="closeVisitorForm()">X</button>
<form id="visitor-form">

12
src/main/resources/dashboard/scripts/profile.js
View File

@@ -11,15 +11,18 @@ const ELEMENT_DREAMER_TRAINER = document.getElementById("dreamer-trainer");
const ELEMENT_DREAMER_TRAINER_ID = document.getElementById("dreamer-trainer-id");
const ELEMENT_DREAMER_LEVEL = document.getElementById("dreamer-level");
const ELEMENT_ENCOUNTER_CONFIG = document.getElementById("encounter-config");
const ELEMENT_ENCOUNTER_SPECIES = document.getElementById("encounter-form-species");
const ELEMENT_ENCOUNTER_MOVE = document.getElementById("encounter-form-move");
const ELEMENT_ENCOUNTER_FORM = document.getElementById("encounter-form-form");
const ELEMENT_ENCOUNTER_GENDER = document.getElementById("encounter-form-gender");
const ELEMENT_ENCOUNTER_ANIMATION = document.getElementById("encounter-form-animation");
const ELEMENT_ITEM_CONFIG = document.getElementById("item-config");
const ELEMENT_ITEM_ID = document.getElementById("item-form-id");
const ELEMENT_ITEM_QUANTITY = document.getElementById("item-form-quantity");
const ELEMENT_VISITOR_CONFIG = document.getElementById("visitor-config");
const ELEMENT_VISITOR_NAME = document.getElementById("visitor-form-name");
const ELEMENT_VISITOR_TYPE = document.getElementById("visitor-form-type");
const ELEMENT_VISITOR_SHOP_TYPE = document.getElementById("visitor-form-shop-type");
@@ -179,6 +182,7 @@ function configureEncounter(index) {
ELEMENT_ENCOUNTER_FORM.value = encounter ? encounter.form : 0;
ELEMENT_ENCOUNTER_GENDER.value = encounter ? encounter.gender : "GENDERLESS";
ELEMENT_ENCOUNTER_ANIMATION.value = encounter ? encounter.animation : "WALK_AROUND";
ELEMENT_ENCOUNTER_CONFIG.style.display = "block";
}
function saveEncounter() {
@@ -240,7 +244,7 @@ function updateEncounterCell(index) {
function closeEncounterForm() {
encounterTableIndex = -1;
window.location.href = "#";
ELEMENT_ENCOUNTER_CONFIG.style.display = "none";
}
/**
@@ -280,6 +284,7 @@ function configureVisitor(index) {
ELEMENT_VISITOR_SUBREGION.value = visitor ? visitor.stateProvinceCode : 0;
ELEMENT_VISITOR_PERSONALITY.value = visitor ? visitor.personality : 0;
ELEMENT_VISITOR_DREAMER.value = visitor ? visitor.dreamerSpecies : 1;
ELEMENT_VISITOR_CONFIG.style.display = "block";
}
function saveVisitor() {
@@ -357,7 +362,7 @@ function updateVisitorCell(index) {
function closeVisitorForm() {
visitorTableIndex = -1;
window.location.href = "#";
ELEMENT_VISITOR_CONFIG.style.display = "none";
}
/**
@@ -369,6 +374,7 @@ function configureItem(index) {
let item = profile.items[itemTableIndex];
ELEMENT_ITEM_ID.value = item ? item.id : 1;
ELEMENT_ITEM_QUANTITY.value = item ? item.quantity : 1;
ELEMENT_ITEM_CONFIG.style.display = "block";
}
function saveItem() {
@@ -424,7 +430,7 @@ function updateItemCell(index) {
function closeItemForm() {
itemTableIndex = -1;
window.location.href = "#";
ELEMENT_ITEM_CONFIG.style.display = "none";
}
/**

12
src/main/resources/dashboard/styles/profile.css
View File

@@ -100,20 +100,13 @@ a:link, a:visited {
}
.popup {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 200ms;
visibility: hidden;
}
.popup:target {
opacity: 1;
visibility: visible;
}
.popup .close-button {
@@ -147,6 +140,7 @@ a:link, a:visited {
width: 96px;
height: 96px;
text-align: center;
cursor: pointer;
}
.item-table {
@@ -163,6 +157,7 @@ a:link, a:visited {
width: 48px;
height: 48px;
text-align: center;
cursor: pointer;
}
.item-table td a {
@@ -185,6 +180,7 @@ a:link, a:visited {
width: 80px;
height: 80px;
text-align: center;
cursor: pointer;
}
.big-button {