Fixed various issues

This commit is contained in:
mxdanger 2022-04-24 00:51:41 -07:00
parent 4332ba8224
commit f9b990ec56
6 changed files with 122 additions and 81 deletions

View file

@ -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;

View file

@ -328,18 +328,42 @@ function initDraw() {
}
function reset() {
updatePath([])
undoHistory = [];
drawing = true;
disableDrawingOverride = false;
objectInfoBody.style.display = "none";
drawControlsBody.removeAttribute("style");
// Requires button to be pressed twice to confirm reset
if (resetButton.textContent == "Confirm Reset") {
resetButton.textContent = "Reset";
resetButton.className = "btn btn-secondary";
nameField.value = "";
descriptionField.value = "";
websiteField.value = "";
subredditField.value = "";
}
updatePath([])
undoHistory = [];
drawing = true;
disableDrawingOverride = false;
objectInfoBody.style.display = "none";
drawControlsBody.removeAttribute("style");
// Blanks input values
nameField.value = "";
descriptionField.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() {
drawing = true;
@ -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() {

View file

@ -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 => {
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;
subredditGroupElement.appendChild(subredditLinkElement);
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.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 => {
const websiteLinkElement = document.createElement("a");
websiteLinkElement.className = "btn btn-primary"
websiteLinkElement.target = "_blank";
websiteLinkElement.rel = "noopener noreferrer";
websiteLinkElement.href = link;
websiteLinkElement.innerText = "Website";
websiteGroupElement.appendChild(websiteLinkElement);
if (link) {
const websiteLinkElement = document.createElement("a");
websiteLinkElement.className = "btn btn-primary"
websiteLinkElement.target = "_blank";
websiteLinkElement.rel = "noopener noreferrer";
websiteLinkElement.href = link;
websiteLinkElement.textContent = "Website";
websiteGroupElement.appendChild(websiteLinkElement);
}
});
}
@ -128,11 +131,13 @@ function createInfoBlock(entry) {
linkListElement.appendChild(discordGroupElement);
entry.links.discord.forEach(link => {
const discordLinkElement = document.createElement("a");
discordLinkElement.target = "_blank";
discordLinkElement.href = "https://discord.gg/" + link;
discordLinkElement.innerText = "Discord";
discordGroupElement.appendChild(discordLinkElement);
if (link) {
const discordLinkElement = document.createElement("a");
discordLinkElement.target = "_blank";
discordLinkElement.href = "https://discord.gg/" + link;
discordLinkElement.textContent = "Discord";
discordGroupElement.appendChild(discordLinkElement);
}
});
}
@ -142,12 +147,14 @@ function createInfoBlock(entry) {
linkListElement.appendChild(wikiGroupElement);
entry.links.wiki.forEach(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";
wikiGroupElement.appendChild(wikiLinkElement);
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.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

View file

@ -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>');
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);
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";
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]);

View file

@ -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,9 +224,12 @@ <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">
<select class="form-select shadow" name="variants" id="variants" title="Background image variants"></select>
<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">
<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>
</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>