mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 12:39:18 +02:00
Support editing, return to previous step instead of resetting
This commit is contained in:
parent
d6ea3c82cb
commit
dd5e809e4f
4 changed files with 111 additions and 40 deletions
|
@ -508,6 +508,16 @@ .object p {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.object p:last-of-type {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.object .objectEdit {
|
||||
float: right;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
p.edit {
|
||||
color: #FFFF00;
|
||||
}
|
||||
|
@ -548,19 +558,19 @@ #drawBackButton {
|
|||
width: 170px;
|
||||
}
|
||||
|
||||
#drawControls > * {
|
||||
#drawControls > div > * {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#drawControls > * > * {
|
||||
#drawControls > div > * > * {
|
||||
flex-grow: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#drawControls > * > *:last-child {
|
||||
#drawControls > div > * > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
@ -666,7 +676,14 @@ #exportString {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#exportCloseButton {
|
||||
.exportButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1em
|
||||
}
|
||||
|
||||
#exportButtons > * {
|
||||
margin-bottom: 0;
|
||||
width: 100px;
|
||||
align-self: flex-end;
|
||||
|
|
|
@ -26,6 +26,7 @@ function initDraw(){
|
|||
var undoButton = document.getElementById("undoButton");
|
||||
var redoButton = document.getElementById("redoButton");
|
||||
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||
var entryId = 0
|
||||
|
||||
var objectInfoBox = document.getElementById("objectInfo");
|
||||
var hintText = document.getElementById("hint");
|
||||
|
@ -35,6 +36,7 @@ function initDraw(){
|
|||
|
||||
var exportOverlay = document.getElementById("exportOverlay");
|
||||
var exportCloseButton = document.getElementById("exportCloseButton");
|
||||
var exportBackButton = document.getElementById("exportBackButton")
|
||||
|
||||
var rShiftPressed = false;
|
||||
var lShiftPressed = false;
|
||||
|
@ -56,8 +58,8 @@ function initDraw(){
|
|||
|
||||
container.addEventListener("mousedown", function(e){
|
||||
lastPos = [
|
||||
e.clientX
|
||||
,e.clientY
|
||||
e.clientX,
|
||||
e.clientY
|
||||
];
|
||||
});
|
||||
|
||||
|
@ -66,8 +68,8 @@ function initDraw(){
|
|||
y = y - container.offsetTop;
|
||||
|
||||
var pos = [
|
||||
~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
|
||||
,~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||
~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5,
|
||||
~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||
];
|
||||
|
||||
if(shiftPressed && path.length > 0){
|
||||
|
@ -162,7 +164,7 @@ function initDraw(){
|
|||
});
|
||||
|
||||
cancelButton.addEventListener("click", function(e){
|
||||
reset();
|
||||
back();
|
||||
});
|
||||
|
||||
document.getElementById("nameField").addEventListener("keyup", function(e){
|
||||
|
@ -192,9 +194,10 @@ function initDraw(){
|
|||
exportOverlay.style.display = "none";
|
||||
});
|
||||
|
||||
exportCloseButton.addEventListener("click", function(e){
|
||||
exportDirectPost();
|
||||
})
|
||||
exportBackButton.addEventListener("click", function(e){
|
||||
finish();
|
||||
exportOverlay.style.display = "none";
|
||||
});
|
||||
|
||||
document.getElementById("highlightUncharted").addEventListener("click", function(e){
|
||||
highlightUncharted = this.checked;
|
||||
|
@ -203,13 +206,13 @@ function initDraw(){
|
|||
|
||||
function exportJson(){
|
||||
var exportObject = {
|
||||
id: 0
|
||||
,name: document.getElementById("nameField").value
|
||||
,description: document.getElementById("descriptionField").value
|
||||
,website: document.getElementById("websiteField").value
|
||||
,subreddit: document.getElementById("subredditField").value
|
||||
,center: calculateCenter(path)
|
||||
,path: path
|
||||
id: entryId,
|
||||
name: document.getElementById("nameField").value,
|
||||
description: document.getElementById("descriptionField").value,
|
||||
website: document.getElementById("websiteField").value,
|
||||
subreddit: document.getElementById("subredditField").value,
|
||||
center: calculateCenter(path),
|
||||
path: path
|
||||
};
|
||||
var jsonString = JSON.stringify(exportObject, null, "\t");
|
||||
var textarea = document.getElementById("exportString");
|
||||
|
@ -219,6 +222,9 @@ function initDraw(){
|
|||
textarea.value = jsonString;
|
||||
console.log("a");
|
||||
var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
|
||||
if (jsonString.length > 7493) {
|
||||
directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(" " + JSON.stringify(exportObject));
|
||||
}
|
||||
document.getElementById("exportDirectPost").href=directPostUrl;
|
||||
|
||||
exportOverlay.style.display = "flex";
|
||||
|
@ -278,12 +284,8 @@ function initDraw(){
|
|||
drawing = false;
|
||||
render(path);
|
||||
objectInfoBox.style.display = "block";
|
||||
objectDraw.style.display = "none";
|
||||
hintText.style.display = "none";
|
||||
finishButton.style.display = "none";
|
||||
undoButton.style.display = "none";
|
||||
redoButton.style.display = "none";
|
||||
resetButton.style.display = "none";
|
||||
highlightUnchartedLabel.style.display = "none";
|
||||
document.getElementById("nameField").focus();
|
||||
}
|
||||
|
||||
|
@ -296,12 +298,8 @@ function initDraw(){
|
|||
drawing = true;
|
||||
render(path);
|
||||
objectInfoBox.style.display = "none";
|
||||
objectDraw.style.display = "block";
|
||||
hintText.style.display = "block";
|
||||
finishButton.style.display = "block";
|
||||
undoButton.style.display = "block";
|
||||
redoButton.style.display = "block";
|
||||
resetButton.style.display = "block";
|
||||
highlightUnchartedLabel.style.display = "block";
|
||||
|
||||
document.getElementById("nameField").value = "";
|
||||
document.getElementById("descriptionField").value = "";
|
||||
|
@ -309,6 +307,14 @@ function initDraw(){
|
|||
document.getElementById("subredditField").value = "";
|
||||
}
|
||||
|
||||
function back(){
|
||||
drawing = true;
|
||||
render(path);
|
||||
objectInfoBox.style.display = "none";
|
||||
objectDraw.style.display = "block";
|
||||
hintText.style.display = "block";
|
||||
}
|
||||
|
||||
function renderBackground(){
|
||||
|
||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
@ -384,6 +390,45 @@ function initDraw(){
|
|||
}
|
||||
}
|
||||
|
||||
const getEntry = id => {
|
||||
const entries = atlas.filter(entry => entry.id === id)
|
||||
if (entries.length === 1) return entries[0]
|
||||
return {}
|
||||
}
|
||||
|
||||
let params = new URLSearchParams(document.location.search)
|
||||
|
||||
if (params.has('id')) {
|
||||
entry = getEntry(params.get('id'))
|
||||
document.getElementById("nameField").value = entry.name
|
||||
document.getElementById("descriptionField").value = entry.description
|
||||
document.getElementById("websiteField").value = entry.website
|
||||
document.getElementById("subredditField").value = entry.subreddit
|
||||
path = entry.path
|
||||
redoButton.disabled = true;
|
||||
undoButton.disabled = false;
|
||||
entryId = params.get('id')
|
||||
|
||||
if(path.length >= 3){
|
||||
finishButton.disabled = false;
|
||||
}
|
||||
render(path)
|
||||
|
||||
zoom = 4;
|
||||
|
||||
zoomOrigin = [
|
||||
innerContainer.clientWidth/2 - entry.center[0]* zoom,// + container.offsetLeft
|
||||
innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
|
||||
];
|
||||
|
||||
scaleZoomOrigin = [
|
||||
2000/2 - entry.center[0],// + container.offsetLeft
|
||||
2000/2 - entry.center[1]// + container.offsetTop
|
||||
];
|
||||
|
||||
applyView();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -85,5 +85,11 @@ function createInfoBlock(entry) {
|
|||
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
||||
element.appendChild(idElement);
|
||||
|
||||
let editElement = document.createElement("a");
|
||||
editElement.innerText = "Edit"
|
||||
editElement.className = "objectEdit"
|
||||
editElement.href = "./?mode=draw&id=" + entry.id
|
||||
element.appendChild(editElement);
|
||||
|
||||
return element;
|
||||
}
|
|
@ -183,15 +183,17 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<div id="drawControlsContainer">
|
||||
<a id="drawBackButton" class="button" href="./">< Back to the Atlas</a>
|
||||
<div id="drawControls">
|
||||
<div>
|
||||
<button id="undoButton" disabled>Undo</button>
|
||||
<button disabled id="redoButton">Redo</button>
|
||||
<div id="objectDraw">
|
||||
<div>
|
||||
<button id="undoButton" disabled>Undo</button>
|
||||
<button disabled id="redoButton">Redo</button>
|
||||
</div>
|
||||
<button disabled id="finishButton">Finish (Enter)</button>
|
||||
<button id="resetButton">Reset</button>
|
||||
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
|
||||
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
|
||||
</label>
|
||||
</div>
|
||||
<button disabled id="finishButton">Finish (Enter)</button>
|
||||
<button id="resetButton">Reset</button>
|
||||
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
|
||||
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
|
||||
</label>
|
||||
<div id="objectInfo">
|
||||
<label for="nameField">Name</label>
|
||||
<input id="nameField" type="text" value="" placeholder="A short title">
|
||||
|
@ -202,7 +204,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<label for="subredditField">Subreddit</label>
|
||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||
<div id="infoButtons">
|
||||
<button id="cancelButton">Cancel</button>
|
||||
<button id="cancelButton">Back</button>
|
||||
<button id="exportButton">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -227,7 +229,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<div id="exportOverlay" class="overlay">
|
||||
<div id="exportWindow">
|
||||
<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
|
||||
<div style="display:flex; flex-direction:column;align-items:center">
|
||||
<div class="exportButtons">
|
||||
<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
|
||||
</div>
|
||||
<hr style="border-bottom: solid black 1px"/>
|
||||
|
@ -237,7 +239,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<p>Don't forget to flair it with the "New Entry" tag.</p>
|
||||
<p>We will then check it and add it to the atlas.</p>
|
||||
<textarea cols="20" rows="5" id="exportString"></textarea>
|
||||
<div style="display:flex; flex-direction:column;align-items:center">
|
||||
<div class="exportButtons" id="exportButtons">
|
||||
<button id="exportBackButton">Back</button>
|
||||
<button id="exportCloseButton">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue