MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-26 07:08:57 +02:00
Code Issues Projects Releases Wiki Activity

Added preview button

Browse source 
Added another test entry
This commit is contained in:
mxdanger 2022-04-28 21:16:33 -07:00
parent 2fbd1afa66
commit 5634f58b8d
5 changed files with 7768 additions and 7757 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
web/_js/draw.js
View file

@ -16,14 +16,12 @@ const finishButton = document.getElementById("finishButton");
const resetButton = document.getElementById("resetButton"); const resetButton = document.getElementById("resetButton");
const undoButton = document.getElementById("undoButton"); const undoButton = document.getElementById("undoButton");
const redoButton = document.getElementById("redoButton"); const redoButton = document.getElementById("redoButton");
const previewButton = document.getElementById("previewButton");
const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel"); const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
let entryId = 0
const objectInfoBox = document.getElementById("objectInfo"); const drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
const objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
var drawControlsBody = document.getElementById("offcanvasDraw-drawControls"); const objectInfoForm = document.getElementById("objectInfo");
var objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
var objectInfoForm = document.getElementById("objectInfo");
const hintText = document.getElementById("hint"); const hintText = document.getElementById("hint");
@ -50,6 +48,7 @@ const discordGroup = document.getElementById("discordGroup");
const wikiGroup = document.getElementById("wikiGroup"); const wikiGroup = document.getElementById("wikiGroup");
const exportArea = document.getElementById("exportString"); const exportArea = document.getElementById("exportString");
let entryId = 0;
let path = []; let path = [];
let center = [1000, 1000]; let center = [1000, 1000];
@ -219,6 +218,10 @@ function initDraw() {
back(); back();
}); });
previewButton.addEventListener("click", function (e) {
preview();
});
// refocus on button when modal is closed // refocus on button when modal is closed
exportModalElement.addEventListener('hidden.bs.modal', function() { exportModalElement.addEventListener('hidden.bs.modal', function() {
document.getElementById("exportButton").focus(); document.getElementById("exportButton").focus();
@ -238,7 +241,7 @@ function initDraw() {
render(path); render(path);
}); });
function exportJson() { function generateExportObject() {
const exportObject = { const exportObject = {
id: entryId, id: entryId,
name: nameField.value, name: nameField.value,
@ -253,28 +256,34 @@ function initDraw() {
for (let i = pathWithPeriodsTemp.length - 1; i > 0; i--) { for (let i = pathWithPeriodsTemp.length - 1; i > 0; i--) {
for (let j = 0; j < i; j++) { for (let j = 0; j < i; j++) {
if (JSON.stringify(pathWithPeriodsTemp[i][1]) === JSON.stringify(pathWithPeriodsTemp[j][1])) { if (JSON.stringify(pathWithPeriodsTemp[i][1]) === JSON.stringify(pathWithPeriodsTemp[j][1])) {
pathWithPeriodsTemp[j][0] = pathWithPeriodsTemp[i][0] + ', ' + pathWithPeriodsTemp[j][0] pathWithPeriodsTemp[j][0] = pathWithPeriodsTemp[i][0] + ', ' + pathWithPeriodsTemp[j][0];
pathWithPeriodsTemp.splice(i, 1) pathWithPeriodsTemp.splice(i, 1);
break break;
} }
} }
} }
pathWithPeriodsTemp.forEach(([key, value]) => { pathWithPeriodsTemp.forEach(([key, value]) => {
// TODO: Compress periods on something like 0-13, 14. // TODO: Compress periods on something like 0-13, 14.
exportObject.path[key] = value exportObject.path[key] = value;
exportObject.center[key] = calculateCenter(value) exportObject.center[key] = calculateCenter(value);
}) })
const inputWebsite = websiteGroupElements.map(element => element.value.trim()).filter(element => element); const inputWebsite = websiteGroupElements.map(element => element.value.trim()).filter(element => element);
const inputSubreddit = subredditGroupElements.map(element => element.value.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{2,20})(?:\/[^" ]*)*/, '$1')).filter(element => element); const inputSubreddit = subredditGroupElements.map(element => element.value.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{0,20})(?:\/[^" ]*)*/, '$1')).filter(element => element);
const inputDiscord = discordGroupElements.map(element => element.value.trim().replace(/(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|discord(?:app?)\.com\/invite)\/([^\s/]+?)(?=\b)/, '$1')).filter(element => element); const inputDiscord = discordGroupElements.map(element => element.value.trim().replace(/(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|discord(?:app?)\.com\/invite)\/([^\s/]+?)(?=\b)/, '$1')).filter(element => element);
const inputWiki = wikiGroupElements.map(element => element.value.trim().replace(/ /g, '_')).filter(element => element); const inputWiki = wikiGroupElements.map(element => element.value.trim().replace(/ /g, '_')).filter(element => element);
if (inputWebsite.length) exportObject.links.website = inputWebsite if (inputWebsite.length) exportObject.links.website = inputWebsite;
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit;
if (inputDiscord.length) exportObject.links.discord = inputDiscord if (inputDiscord.length) exportObject.links.discord = inputDiscord;
if (inputWiki.length) exportObject.links.wiki = inputWiki if (inputWiki.length) exportObject.links.wiki = inputWiki;
return exportObject;
}
function exportJson() {
const exportObject = generateExportObject()
let jsonString = JSON.stringify(exportObject, null, "\t"); let jsonString = JSON.stringify(exportObject, null, "\t");
jsonString = jsonString.split("\n"); jsonString = jsonString.split("\n");
@ -293,6 +302,13 @@ function initDraw() {
exportModal.show(); exportModal.show();
} }
function preview() {
let infoElement = createInfoBlock(generateExportObject(), true);
objectsContainer.replaceChildren();
objectsContainer.appendChild(infoElement);
closeObjectsListButton.classList.remove("d-none");
}
function undo() { function undo() {
if (path.length > 0 && drawing) { if (path.length > 0 && drawing) {
undoHistory.push(path.pop()); undoHistory.push(path.pop());
@ -310,7 +326,7 @@ function initDraw() {
} }
function finish() { function finish() {
if (objectInfoBox.style.display === "block") return if (objectInfoForm.style.display === "block") return
updatePath() updatePath()
drawing = false; drawing = false;
disableDrawingOverride = true; disableDrawingOverride = true;

39
web/_js/infoblock.js
View file

@ -13,7 +13,7 @@
======================================================================== ========================================================================
*/ */
function createInfoBlock(entry) { function createInfoBlock(entry, isPreview) {
function createLabel(name, value, parent) { function createLabel(name, value, parent) {
const nameElement = document.createElement("span"); const nameElement = document.createElement("span");
nameElement.className = "fw-bold"; nameElement.className = "fw-bold";
@ -38,7 +38,8 @@ function createInfoBlock(entry) {
headerElement.className = "card-header"; headerElement.className = "card-header";
const linkElement = document.createElement("a"); const linkElement = document.createElement("a");
linkElement.className = "text-decoration-none d-flex justify-content-between text-body"; linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
linkElement.href = "#" + entry.id; if (isPreview) linkElement.href = "#";
else linkElement.href = "#" + entry.id;
const linkNameElement = document.createElement("span"); const linkNameElement = document.createElement("span");
linkNameElement.className = "flex-grow-1 text-break"; linkNameElement.className = "flex-grow-1 text-break";
linkNameElement.textContent = entry.name; linkNameElement.textContent = entry.name;
@ -80,15 +81,17 @@ function createInfoBlock(entry) {
listElement.appendChild(diffElement); listElement.appendChild(diffElement);
} }
const [x, y] = entry.center; if (!isPreview) {
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`)); const [x, y] = entry.center;
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
if(entry.path){
const area = calcPolygonArea(entry.path); if(entry.path){
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`)); const area = calcPolygonArea(entry.path);
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
}
} }
if (entry.links.subreddit.length) { if (entry.links.subreddit) {
const subredditGroupElement = document.createElement("div"); const subredditGroupElement = document.createElement("div");
subredditGroupElement.className = "btn-group-vertical"; subredditGroupElement.className = "btn-group-vertical";
linkListElement.appendChild(subredditGroupElement); linkListElement.appendChild(subredditGroupElement);
@ -107,7 +110,7 @@ function createInfoBlock(entry) {
}); });
}; };
if (entry.links.website.length) { if (entry.links.website) {
const websiteGroupElement = document.createElement("div"); const websiteGroupElement = document.createElement("div");
websiteGroupElement.className = "btn-group-vertical"; websiteGroupElement.className = "btn-group-vertical";
linkListElement.appendChild(websiteGroupElement); linkListElement.appendChild(websiteGroupElement);
@ -130,7 +133,7 @@ function createInfoBlock(entry) {
}); });
} }
if (entry.links.discord.length) { if (entry.links.discord) {
const discordGroupElement = document.createElement("div"); const discordGroupElement = document.createElement("div");
discordGroupElement.className = "btn-group-vertical"; discordGroupElement.className = "btn-group-vertical";
linkListElement.appendChild(discordGroupElement); linkListElement.appendChild(discordGroupElement);
@ -148,7 +151,7 @@ function createInfoBlock(entry) {
}); });
} }
if (entry.links.wiki.length) { if (entry.links.wiki) {
const wikiGroupElement = document.createElement("div"); const wikiGroupElement = document.createElement("div");
wikiGroupElement.className = "btn-group-vertical"; wikiGroupElement.className = "btn-group-vertical";
linkListElement.appendChild(wikiGroupElement); linkListElement.appendChild(wikiGroupElement);
@ -175,7 +178,7 @@ function createInfoBlock(entry) {
idElementContainer.appendChild(idElement); idElementContainer.appendChild(idElement);
element.appendChild(idElementContainer); element.appendChild(idElementContainer);
if (!entry.diff || entry.diff !== "delete") { if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
const editElement = document.createElement("a"); const editElement = document.createElement("a");
editElement.textContent = "Edit"; editElement.textContent = "Edit";
editElement.className = "btn btn-sm btn-outline-primary"; editElement.className = "btn btn-sm btn-outline-primary";
@ -184,13 +187,9 @@ function createInfoBlock(entry) {
idElementContainer.appendChild(editElement); idElementContainer.appendChild(editElement);
} }
if (!linkListElement.hasChildNodes()) { if (!bodyElement.hasChildNodes()) bodyElement.remove();
linkListElement.remove(); if (!linkListElement.hasChildNodes()) linkListElement.remove();
} if (!listElement.hasChildNodes()) listElement.remove();
if (!bodyElement.hasChildNodes()) {
bodyElement.remove();
}
return element; return element;
} }

2
web/_js/view.js
View file

@ -734,8 +734,6 @@ window.addEventListener("hashchange", highlightEntryFromUrl);
function highlightEntryFromUrl() { function highlightEntryFromUrl() {
const objectsContainer = document.getElementById("objectsList");
const id = window.location.hash.substring(1); //Remove hash prefix const id = window.location.hash.substring(1); //Remove hash prefix
const entries = atlas.filter(function (e) { const entries = atlas.filter(function (e) {

15418
web/atlas.json
View file

File diff suppressed because one or more lines are too long

14
web/index.html
View file

@ -332,18 +332,16 @@ <h6>Need Help?</h6>
</a> </a>
</label> </label>
<div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div> <div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div>
<div id="infoButtons" class="d-flex gap-2"> <div id="infoButtons" class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-secondary w-50" id="cancelButton">Back</button> <button type="button" class="btn btn-secondary flex-fill" id="cancelButton">Back</button>
<button type="submit" class="btn btn-primary w-50" id="exportButton">Ok</button> <button type="button" class="btn btn-secondary flex-fill" id="previewButton">Preview</button>
<button type="submit" class="btn btn-primary flex-fill" id="exportButton">Export</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow" aria-label="Close"> <button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow p-0" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"> <i class="bi bi-x-lg"></i>
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
</svg>
</button> </button>
<div id="objectsList" class="p-2"></div> <div id="objectsList" class="p-2"></div>
<span id="objectsListOverflowNotice" class="p-2 me-2 btn-primary rounded text-center d-none">Click the map to lock your selection</span> <span id="objectsListOverflowNotice" class="p-2 me-2 btn-primary rounded text-center d-none">Click the map to lock your selection</span>