Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-04-20 18:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added event listeners to manageTemplate's init function

Browse source
This commit is contained in:
AloeSapling 2025-08-23 14:49:24 +02:00
parent dd5e871e72
commit 866caae50a
3 changed files with 136 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
PRE-OVERHAUL/src/manageTemplates.html
View file

@ -3,12 +3,12 @@
<header>
<div id="bm-bar-drag"></div>
<h1>Template manager</h1>
<button id="close"><!-- Add cross icon --></button>
<button id="close">&#x2715;</button>
</header>
<hr />
<button id="create">Create new template</button>
<button id="export-all">Export all</button>
<button id="reload">Reload templates</button>
<!-- <button id="reload">Reload templates</button> -->
<hr />
<table>
<tr>

195
src/manageTemplates.ts
View file

@ -14,70 +14,6 @@ function close(){
uiManager.close("bm-manage-templates")
}
let tableBody = document.querySelector("#bm-manage-templates table");
if(tableBody && tableBody.nodeName.toLocaleUpperCase() === "TABLE"){
tableBody = tableBody.children[0];
if(tableBody && dataManager.getType() === "BM"){
(dataManager.get() as TBlueMarbleJSON).templates.forEach((template, i)=>{
const row1 = createElementWithAttributes("tr", {idx: "main-row"});
const td1 = createElementWithAttributes("td", {textContent: i.toString()});
const td2 = createElementWithAttributes("td", {textContent: template.name || "unnamed-0"});
const td3 = document.createElement("td");
const buttonEnable = createElementWithAttributes("button", {idx: "enable"});
td3.appendChild(buttonEnable);
const td4 = document.createElement("td");
const buttonExportAdd = createElementWithAttributes("button", {idx: "exportAdd"});
td4.appendChild(buttonExportAdd);
const td5 = document.createElement("td");
const shiftsContainer = createElementWithAttributes("div", {className: "shifts-container"});
const buttonUp = createElementWithAttributes("button", {idx: "up"});
const buttonDown = createElementWithAttributes("button", {idx: "down"});
shiftsContainer.append(buttonUp, buttonDown);
td5.appendChild(shiftsContainer);
row1.append(td1, td2, td3, td4, td5)
}
// <tr idx="">
// <td>0</td>
// <td>NameTest</td>
// <td><button>on</button></td>
// <td><button>+</button></td>
// <td>
// <div class="shifts-container">
// <button>&#x1F781;</button>
// <button>&#x1F783;</button>
// </div>
// </td>
// </tr>
// <tr class="details hide">
// <td colspan="5">
// <div>
// <p>&#x2937;</p>
// <p>Author: Tester</p>
// <p>@ 900, 700</p>
// <button>Share</button>
// <button>Delete</button>
// </div>
// </td>
// </tr>
)
}
}
/**Creates the rows in the table and populates them with data from the stored object
* @since 0.1.0-overhaul
*/
function createTableRows(){
let tableBody = document.querySelector("#bm-manage-templates table");
if(tableBody && tableBody.nodeName.toLocaleUpperCase() === "TABLE"){
tableBody = tableBody.children[0];
if(tableBody && dataManager.getType() === "BM"){
tableBody.innerHTML = "";
// Create TRs
}
}
}
/**Toggles the enabled state a template of given index
* @param {number} idx Index of the template
@ -85,7 +21,7 @@ function createTableRows(){
*/
function enabledToggle(idx: number){
let temp = dataManager.get() as Schemas
const temp = dataManager.get() as Schemas
temp.templates[idx].enabled = !(temp.templates[idx].enabled);
dataManager.update(temp)
@ -106,6 +42,16 @@ function exportToggle(idx: number){
exportTemplateIndexes.push(idx)
}
/**Flies to the location of the template. The exact location is dictated by the template's coords field
* @param {number} idx Index of the template
* @since 0.2.0-overhaul
*/
function flyToTemplate(idx: number){
const coordsArr = (dataManager.get() as TBlueMarbleJSON).templates[idx].coords;
const lngLat = charity.game.mercator // Convert to lngLat
charity.game.map.flyTo({center: [0,0], zoom: 9}) // Use lngLat
}
/**Creates a one-click shareable link for the given template and copies it to the clipboard
* @param {number} idx Index of the template
* @since 0.1.0-overhaul
@ -187,6 +133,104 @@ function exportSelected(){
download(dataManager.getExportableData(exportTemplateIndexes, []))
}
/**Creates the rows in the table and populates them with data from the stored object
* @since 0.1.0-overhaul
*/
function createTableRows(){
const table = document.querySelector("#bm-manage-templates table");
if(table && table.nodeName.toLocaleUpperCase() === "TABLE"){
const tableBody = table.children[0];
if(tableBody && dataManager.getType() === "BM"){
// Reset the table body's contents
tableBody.innerHTML = "";
// Create the table rows and use them to populate the table body
(dataManager.get() as TBlueMarbleJSON).templates.forEach((template, i)=>{
// Create the first, main row
const row1 = createElementWithAttributes("tr", {id: "main-row"});
// # field
const td1 = createElementWithAttributes("td", {textContent: i.toString()});
// Name field
const td2 = createElementWithAttributes("td", {textContent: template.name || "unnamed"});
// Enabled field
const td3 = document.createElement("td");
const buttonEnable = createElementWithAttributes("button", {
id: "enable",
// Set the looks and text based on the enabled field
textContent: template.enabled ? "on" : "off",
className: template.enabled ? "enabled" : "disabled",
});
buttonEnable.addEventListener("click", ()=>enabledToggle(i));
td3.appendChild(buttonEnable);
// Export field
const td4 = document.createElement("td");
const exportCheckBox = createElementWithAttributes("input", {
id: "exportToggle",
type: "checkbox",
value: false,
});
exportCheckBox.addEventListener("change", ()=>exportToggle(i))
td4.appendChild(exportCheckBox);
// Shift template up / down buttons
const td5 = document.createElement("td");
const shiftsContainer = createElementWithAttributes("div", {className: "shifts-container"});
const buttonUp = createElementWithAttributes("button", {
id: "up",
textContent: "&#x1F702;", // 🜂
});
buttonUp.addEventListener("click", ()=>shiftUp(i));
const buttonDown = createElementWithAttributes("button", {
id: "down",
textContent: "&#x1F704;" // 🜄
});
buttonDown.addEventListener("click", ()=>shiftDown(i));
shiftsContainer.append(buttonUp, buttonDown);
td5.appendChild(shiftsContainer);
// Append the table cells to the row
row1.append(td1, td2, td3, td4, td5);
// Create the second, "details" row (opens when the main row is clicked)
const row2 = createElementWithAttributes("tr", {
id: "details-row",
className: "hide"
});
const tdContainer = createElementWithAttributes("td");
const arrowText = createElementWithAttributes("p", {
textContent: "&#x21B3;" // ↳
})
const authorText = createElementWithAttributes("p", {textContent: `Authored by ${template.authorID}`})
const buttonFlyTo = createElementWithAttributes("button", {
id: "flyTo",
textContent: `@ ${template.coords.join(', ')} ✈️`
});
const buttonShare = createElementWithAttributes("button", {id: "share"});
buttonShare.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M448 256C501 256 544 213 544 160C544 107 501 64 448 64C395 64 352 107 352 160C352 165.4 352.5 170.8 353.3 176L223.6 248.1C206.7 233.1 184.4 224 160 224C107 224 64 267 64 320C64 373 107 416 160 416C184.4 416 206.6 406.9 223.6 391.9L353.3 464C352.4 469.2 352 474.5 352 480C352 533 395 576 448 576C501 576 544 533 544 480C544 427 501 384 448 384C423.6 384 401.4 393.1 384.4 408.1L254.7 336C255.6 330.8 256 325.5 256 320C256 314.5 255.5 309.2 254.7 304L384.4 231.9C401.3 246.9 423.6 256 448 256z"/></svg>` // Share icon svg
buttonShare.addEventListener("click", ()=>shareTemplate(i));
const buttonDelete = createElementWithAttributes("button", {id: "delete"});
buttonDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#e01b24" d="M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z"/></svg>`; // Trash icon svg
buttonDelete.addEventListener("click", ()=>deleteTemplate(i));
tdContainer.append(arrowText, authorText, buttonFlyTo, buttonShare, buttonDelete);
row2.appendChild(tdContainer);
tableBody?.append(row1, row2);
})
}
}
}
/**Updates the UI of this window
* @since 0.1.0-overhaul
*/
@ -201,6 +245,25 @@ function updateUI(){
* @since 0.1.0-overhaul
*/
export function initManageTemplates(){
// Try to get elements and connect the appropriate function to the onClick listener
const closeBtn = document.querySelector("#bm-manage-templates button#close");
if(closeBtn && closeBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
closeBtn.addEventListener("click", ()=>close());
}
const createBtn = document.querySelector("#bm-manage-templates button#create");
if(createBtn && createBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
createBtn.addEventListener("click", ()=>uiManager.open("bm-create-template"));
}
const exportAllBtn = document.querySelector("#bm-manage-templates button#export-all")
if(exportAllBtn && exportAllBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
exportAllBtn.addEventListener("click", ()=>exportAll());
}
// Add event listener hooks
createTableRows();
// Try to get the export selected button and connect the appropriate function to the onClick listener
const exportSelectedBtn = document.querySelector("#bm-manage-templates button#export-selected");
if(exportSelectedBtn && exportSelectedBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
exportSelectedBtn.addEventListener("click", ()=>exportSelected())
}
}

7
src/utils.ts
View file

@ -2,16 +2,19 @@ import { dataManager } from "./main";
/**Invokes a document.createElement call with the provided tagname, then adds the provided attributes to the created elements
* @param {keyof HTMLElementTagNameMap} tagName Name that dictates what type of element to create
* @param {Record<string, string>} attributes A map of attribute name to attribute to value. The key "className" converts to "class"
* @param {Record<string, any>} attributes A map of attribute name to attribute to value. The key "className" converts to "class" and the key "textContent" sets the text of the element
* @returns The created element with the added attributes
* @since 0.1.0-overhaul
*/
export function createElementWithAttributes<T extends keyof HTMLElementTagNameMap>(tagName: T, attributes?: Record<string, string>): HTMLElement{
export function createElementWithAttributes<T extends keyof HTMLElementTagNameMap>(tagName: T, attributes?: Record<string, any>): HTMLElement{
const elem = document.createElement(tagName);
if(attributes) {
// Set the values for each attribute
Object.entries(attributes).forEach(([attr, value])=>{
// Do conversions where necessary
if(attr === "className") {elem.setAttribute("class", value)}
else if(attr === "textContent") {elem.textContent = value}
else elem.setAttribute(attr, value);
})
}