mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-25 20:24:27 +01:00
Fixed various issues
This commit is contained in:
mxdanger
parent
4332ba8224
commit
f9b990ec56
6 changed files with 122 additions and 81 deletions
|
|
@ -317,6 +317,15 @@ .slider::-moz-range-thumb {
|
|||
box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
|
||||
}
|
||||
|
||||
#entriesList .card {
|
||||
box-shadow: none !important;
|
||||
transition: box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
#entriesList .card:hover {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75) !important;
|
||||
}
|
||||
|
||||
#entriesListNav {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -328,6 +328,11 @@ function initDraw() {
|
|||
}
|
||||
|
||||
function reset() {
|
||||
// Requires button to be pressed twice to confirm reset
|
||||
if (resetButton.textContent == "Confirm Reset") {
|
||||
resetButton.textContent = "Reset";
|
||||
resetButton.className = "btn btn-secondary";
|
||||
|
||||
updatePath([])
|
||||
undoHistory = [];
|
||||
drawing = true;
|
||||
|
|
@ -335,10 +340,29 @@ function initDraw() {
|
|||
objectInfoBody.style.display = "none";
|
||||
drawControlsBody.removeAttribute("style");
|
||||
|
||||
// Blanks input values
|
||||
nameField.value = "";
|
||||
descriptionField.value = "";
|
||||
websiteField.value = "";
|
||||
subredditField.value = "";
|
||||
|
||||
// Clears input array
|
||||
websiteGroupElements = [];
|
||||
subredditGroupElements = [];
|
||||
discordGroupElements = [];
|
||||
wikiGroupElements = [];
|
||||
|
||||
// Rebuilds multi-input list
|
||||
websiteGroup.replaceChildren();
|
||||
subredditGroup.replaceChildren();
|
||||
discordGroup.replaceChildren();
|
||||
wikiGroup.replaceChildren();
|
||||
addWebsiteFields("", 0, [0]);
|
||||
addSubredditFields("", 0, [0]);
|
||||
addDiscordFields("", 0, [0]);
|
||||
addWikiFields("", 0, [0]);
|
||||
} else {
|
||||
resetButton.textContent = "Confirm Reset";
|
||||
resetButton.className = "btn btn-danger";
|
||||
}
|
||||
}
|
||||
|
||||
function back() {
|
||||
|
|
@ -347,6 +371,8 @@ function initDraw() {
|
|||
updatePath()
|
||||
objectInfoBody.style.display = "none";
|
||||
drawControlsBody.removeAttribute("style");
|
||||
resetButton.textContent = "Reset";
|
||||
resetButton.className = "btn btn-secondary";
|
||||
}
|
||||
|
||||
function renderBackground() {
|
||||
|
|
@ -670,6 +696,10 @@ function initDraw() {
|
|||
|
||||
} else {
|
||||
pathWithPeriods.push([defaultPeriod, []])
|
||||
addWebsiteFields("", 0, [0]);
|
||||
addSubredditFields("", 0, [0]);
|
||||
addDiscordFields("", 0, [0]);
|
||||
addWikiFields("", 0, [0]);
|
||||
}
|
||||
|
||||
initPeriodGroups()
|
||||
|
|
@ -767,14 +797,8 @@ function initPeriodGroups() {
|
|||
startPeriodEl.max = newVariationConfig.versions.length - 1
|
||||
endPeriodEl.value = newVariationConfig.default
|
||||
endPeriodEl.max = newVariationConfig.versions.length - 1
|
||||
periodVariationEl.previousElementSibling.innerHTML = newVariationConfig.icon;
|
||||
updateTime(newVariationConfig.default, newVariation)
|
||||
if (periodVariationEl.value == "tfc") {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192"><defs><style>.a{fill-rule:evenodd;}</style></defs><path class="a" d="M69.79,83.55c-.47,.65-.59,1.35-.59,1.35-.26,1.47,.76,2.72,.92,3.12,2.84,7.1,4.49,13.93,3.97,16.39-.47,2.18-5.6,5.65-12.36,8.33-3.63,1.44-6.11,2.99-8.04,5.01-7.17,7.51-10.24,17.86-7.14,24.05,3.93,7.84,18.38,5.86,28.05-3.85,2.09-2.1,3.15-3.83,6.63-10.77,2.97-5.93,4.26-8.05,5.47-8.95,2.04-1.52,9.82,.1,17.41,3.64,1.71,.8,2.31,1.04,2.78,.98,0,0,.22-.05,.43-.14,1.31-.59,17.43-17,25.58-25.34-1.79,.09-3.57,.18-5.36,.28-2.84,2.63-5.68,5.27-8.52,7.9-10.85-10.85-21.7-21.71-32.55-32.56,1.73-1.8,3.46-3.6,5.18-5.4-.29-1.56-.57-3.12-.86-4.69-1.34,1.27-19.42,18.45-21.01,20.66Zm-10.45,44.57c2.5,0,4.53,2.03,4.53,4.53s-2.03,4.53-4.53,4.53-4.53-2.03-4.53-4.53,2.03-4.53,4.53-4.53Z"/><path class="f" d="M132.9,97.36c-.88,.22-7.88,1.92-9.91-1.04-1.11-1.62-1.05-4.71-.52-6.57,.74-2.59,.9-4.06,.25-4.73-.73-.76-2.03-.31-3.73-.18-3.4,.27-8.08-.86-9.6-3.16-2.77-4.21,4.48-13.03,2.31-14.69-.17-.13-.34-.16-.67-.22-4.24-.73-6.79,4.71-11.66,5.1-2.93,.24-6.21-1.39-7.72-4.02-1.11-1.94-1-3.96-.86-4.95h0s7.38-7.39,17.6-17.52c12.75,12.73,25.51,25.47,38.26,38.2l-13.75,13.79Z"/><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/></svg>';
|
||||
} else {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>';
|
||||
}
|
||||
// console.log(parseInt(event.target.value))
|
||||
})
|
||||
|
||||
|
|
@ -814,14 +838,7 @@ function initPeriodGroups() {
|
|||
}
|
||||
|
||||
periodVariationEl.value = variation
|
||||
|
||||
if (periodVariationEl.value == "tfc") {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192"><defs><style>.a{fill-rule:evenodd;}</style></defs><path class="a" d="M69.79,83.55c-.47,.65-.59,1.35-.59,1.35-.26,1.47,.76,2.72,.92,3.12,2.84,7.1,4.49,13.93,3.97,16.39-.47,2.18-5.6,5.65-12.36,8.33-3.63,1.44-6.11,2.99-8.04,5.01-7.17,7.51-10.24,17.86-7.14,24.05,3.93,7.84,18.38,5.86,28.05-3.85,2.09-2.1,3.15-3.83,6.63-10.77,2.97-5.93,4.26-8.05,5.47-8.95,2.04-1.52,9.82,.1,17.41,3.64,1.71,.8,2.31,1.04,2.78,.98,0,0,.22-.05,.43-.14,1.31-.59,17.43-17,25.58-25.34-1.79,.09-3.57,.18-5.36,.28-2.84,2.63-5.68,5.27-8.52,7.9-10.85-10.85-21.7-21.71-32.55-32.56,1.73-1.8,3.46-3.6,5.18-5.4-.29-1.56-.57-3.12-.86-4.69-1.34,1.27-19.42,18.45-21.01,20.66Zm-10.45,44.57c2.5,0,4.53,2.03,4.53,4.53s-2.03,4.53-4.53,4.53-4.53-2.03-4.53-4.53,2.03-4.53,4.53-4.53Z"/><path class="f" d="M132.9,97.36c-.88,.22-7.88,1.92-9.91-1.04-1.11-1.62-1.05-4.71-.52-6.57,.74-2.59,.9-4.06,.25-4.73-.73-.76-2.03-.31-3.73-.18-3.4,.27-8.08-.86-9.6-3.16-2.77-4.21,4.48-13.03,2.31-14.69-.17-.13-.34-.16-.67-.22-4.24-.73-6.79,4.71-11.66,5.1-2.93,.24-6.21-1.39-7.72-4.02-1.11-1.94-1-3.96-.86-4.95h0s7.38-7.39,17.6-17.52c12.75,12.73,25.51,25.47,38.26,38.2l-13.75,13.79Z"/><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/></svg>';
|
||||
} else {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>';
|
||||
}
|
||||
periodVariationEl.previousElementSibling.innerHTML = variationsConfig[variation].icon;
|
||||
|
||||
periodGroupElements.push({
|
||||
periodGroupEl,
|
||||
|
|
@ -835,7 +852,6 @@ function initPeriodGroups() {
|
|||
// console.log(periodGroupTemplate)
|
||||
|
||||
updatePeriodGroups()
|
||||
|
||||
}
|
||||
|
||||
function updatePeriodGroups() {
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ function createInfoBlock(entry) {
|
|||
function createLabel(name, value, parent) {
|
||||
const nameElement = document.createElement("span");
|
||||
nameElement.className = "fw-bold";
|
||||
nameElement.innerText = name;
|
||||
nameElement.textContent = name;
|
||||
const valueElement = document.createElement("span");
|
||||
valueElement.innerText = value;
|
||||
valueElement.textContent = value;
|
||||
parent.appendChild(nameElement);
|
||||
parent.appendChild(valueElement);
|
||||
return parent;
|
||||
|
|
@ -41,7 +41,7 @@ function createInfoBlock(entry) {
|
|||
linkElement.href = "#" + entry.id;
|
||||
const linkNameElement = document.createElement("span");
|
||||
linkNameElement.className = "flex-grow-1 text-break";
|
||||
linkNameElement.innerText = entry.name;
|
||||
linkNameElement.textContent = entry.name;
|
||||
headerElement.appendChild(linkElement);
|
||||
linkElement.appendChild(linkNameElement);
|
||||
linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
|
||||
|
|
@ -94,31 +94,34 @@ function createInfoBlock(entry) {
|
|||
linkListElement.appendChild(subredditGroupElement);
|
||||
|
||||
entry.links.subreddit.forEach(subreddit => {
|
||||
if (subreddit) {
|
||||
subreddit = "r/" + subreddit;
|
||||
const subredditLinkElement = document.createElement("a");
|
||||
subredditLinkElement.className = "btn btn-primary text-truncate";
|
||||
subredditLinkElement.target = "_blank";
|
||||
subredditLinkElement.rel = "noopener noreferrer";
|
||||
subredditLinkElement.href = "https://reddit.com" + subreddit;
|
||||
subredditLinkElement.innerText = subreddit;
|
||||
subredditLinkElement.href = "https://reddit.com/" + subreddit;
|
||||
subredditLinkElement.textContent = subreddit;
|
||||
subredditGroupElement.appendChild(subredditLinkElement);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
if (entry.links.website.length) {
|
||||
const websiteGroupElement = document.createElement("div");
|
||||
websiteGroupElement.className = "btn-group-vertical";
|
||||
linkListElement.appendChild(websiteGroupElement);
|
||||
|
||||
entry.links.website.forEach(link => {
|
||||
if (link) {
|
||||
const websiteLinkElement = document.createElement("a");
|
||||
websiteLinkElement.className = "btn btn-primary"
|
||||
websiteLinkElement.target = "_blank";
|
||||
websiteLinkElement.rel = "noopener noreferrer";
|
||||
websiteLinkElement.href = link;
|
||||
websiteLinkElement.innerText = "Website";
|
||||
websiteLinkElement.textContent = "Website";
|
||||
websiteGroupElement.appendChild(websiteLinkElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -128,11 +131,13 @@ function createInfoBlock(entry) {
|
|||
linkListElement.appendChild(discordGroupElement);
|
||||
|
||||
entry.links.discord.forEach(link => {
|
||||
if (link) {
|
||||
const discordLinkElement = document.createElement("a");
|
||||
discordLinkElement.target = "_blank";
|
||||
discordLinkElement.href = "https://discord.gg/" + link;
|
||||
discordLinkElement.innerText = "Discord";
|
||||
discordLinkElement.textContent = "Discord";
|
||||
discordGroupElement.appendChild(discordLinkElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -142,12 +147,14 @@ function createInfoBlock(entry) {
|
|||
linkListElement.appendChild(wikiGroupElement);
|
||||
|
||||
entry.links.wiki.forEach(link => {
|
||||
if (link) {
|
||||
const wikiLinkElement = document.createElement("a");
|
||||
wikiLinkElement.target = "_blank";
|
||||
websiteLinkElement.rel = "noopener noreferrer";
|
||||
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_');
|
||||
wikiLinkElement.innerText = "Wiki Article";
|
||||
wikiLinkElement.textContent = "Wiki Article";
|
||||
wikiGroupElement.appendChild(wikiLinkElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +169,7 @@ function createInfoBlock(entry) {
|
|||
|
||||
if (!entry.diff || entry.diff !== "delete") {
|
||||
const editElement = document.createElement("a");
|
||||
editElement.innerText = "Edit";
|
||||
editElement.textContent = "Edit";
|
||||
editElement.className = "btn btn-sm btn-outline-primary";
|
||||
editElement.href = "./?mode=draw&id=" + entry.id;
|
||||
editElement.title = "Edit " + entry.name;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -119,7 +119,7 @@ hideList.addEventListener('hidden.bs.offcanvas', function(e) {
|
|||
|
||||
closeObjectsListButton.addEventListener("click", function(){
|
||||
hovered = [];
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.replaceChildren();
|
||||
updateLines();
|
||||
closeObjectsListButton.className = "d-none";
|
||||
fixed = false;
|
||||
|
|
@ -409,7 +409,7 @@ function buildObjectsList(filter = null, sort = null) {
|
|||
|
||||
element.addEventListener("mouseenter", function (e) {
|
||||
if (!fixed && !dragging) {
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.replaceChildren();
|
||||
|
||||
previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
|
||||
previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]];
|
||||
|
|
@ -446,7 +446,7 @@ function buildObjectsList(filter = null, sort = null) {
|
|||
applyView();
|
||||
}
|
||||
if (document.documentElement.clientWidth < 500) {
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.replaceChildren();
|
||||
|
||||
entriesListShown = false;
|
||||
wrapper.className += " listHidden";
|
||||
|
|
@ -672,7 +672,7 @@ function updateHovering(e, tapped) {
|
|||
return calcPolygonArea(a.path) - calcPolygonArea(b.path);
|
||||
});
|
||||
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.replaceChildren()
|
||||
|
||||
for (const i in hovered) {
|
||||
const element = createInfoBlock(hovered[i]);
|
||||
|
|
@ -711,23 +711,25 @@ function highlightEntryFromUrl() {
|
|||
|
||||
document.title = entry.name + " on the 2022 /r/place Atlas";
|
||||
|
||||
// document.getElementById("showListButton").insertAdjacentHTML("afterend", '<a class="btn btn-outline-primary" type="button" id="objectEditNav" href="" title="">Edit</a>');
|
||||
|
||||
if ((!entry.diff || entry.diff !== "delete")) {
|
||||
if (document.getElementById("objectEditNav")) {
|
||||
document.getElementById("objectEditNav").href = "./?mode=draw&id=" + id;
|
||||
document.getElementById("objectEditNav").title = "Edit " + entry.name;
|
||||
} else {
|
||||
const objectEditNav = document.createElement("a");
|
||||
objectEditNav.className = "btn btn-outline-primary";
|
||||
objectEditNav.id = "objectEditNav";
|
||||
objectEditNav.innerText = "Edit";
|
||||
|
||||
if (!entry.diff || entry.diff !== "delete") {
|
||||
objectEditNav.href = "./?mode=draw&id=" + id;
|
||||
objectEditNav.title = "Edit " + entry.name;
|
||||
document.getElementById("showListButton").parentElement.appendChild(objectEditNav);
|
||||
}
|
||||
} else if (entry.diff == "delete" && document.getElementById("objectEditNav")) {
|
||||
document.getElementById("objectEditNav").remove();
|
||||
}
|
||||
|
||||
const infoElement = createInfoBlock(entry);
|
||||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.replaceChildren();
|
||||
objectsContainer.appendChild(infoElement);
|
||||
|
||||
//console.log(entry.center[0]);
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesList" class="card-deck pe-3 mx-3 mt-3 overflow-auto"></div>
|
||||
<div id="entriesList" class="card-deck ps-2 ms-2 pe-3 me-3 mt-2 pt-2 overflow-auto"></div>
|
||||
</div>
|
||||
<div id="bottomBar" class="d-flex flex-wrap gap-2 p-2">
|
||||
|
||||
|
|
@ -224,8 +224,11 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
|
|||
<input type="range" class="slider bg-secondary px-1 rounded shadow" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
|
||||
</div>
|
||||
<div class="flex-grow-1" id="variantControls">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"></span>
|
||||
<select class="form-select shadow" name="variants" id="variants" title="Background image variants"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="author" class="bg-body flex-grow-1 flex-shrink-1 d-flex align-items-center justify-content-center p-2 rounded shadow">
|
||||
<span style="font-size: 0.75rem;">Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>. Images provided by <a href="https://place.thatguyalex.com/" target="_blank" rel="noopener noreferrer">Alex Tsernoh</a>.</span>
|
||||
</div>
|
||||
|
|
@ -335,7 +338,7 @@ <h5 class="modal-title" id="exportModalLabel">Export Entry</h5>
|
|||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
|
||||
<a id="exportDirectPost" type="button" class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">Post Direct to Reddit</a>
|
||||
<a id="exportDirectPost" class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">Post Direct to Reddit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -405,7 +408,6 @@ <h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
|
|||
<span class="input-group-text"></span>
|
||||
<select class="period-variation form-select" title="Select which layer this path is used for"></select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue