relative positioning
commit
7366fb8972
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<script src="session.js" defer></script>
|
||||||
|
<script src="labels.js" defer></script>
|
||||||
|
<script src="picture.js" defer></script>
|
||||||
|
<script src="panels.js" defer></script>
|
||||||
|
<script src="text-export.js" defer></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Collecting Labels</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main id="container">
|
||||||
|
<figure class="background-container" id="background-container">
|
||||||
|
<img id="background-image" draggable="false" src="assets/map_description_H.jpg" />
|
||||||
|
<div id="target"></div>
|
||||||
|
</figure>
|
||||||
|
</main>
|
||||||
|
<div id="editor"></div>
|
||||||
|
<nav>
|
||||||
|
<button id="show-transcription">Export</button>
|
||||||
|
<button id="show-info">?</button>
|
||||||
|
<button id="show-image">IMG</button>
|
||||||
|
<button id="load-labels">Load</button>
|
||||||
|
</nav>
|
||||||
|
<aside class="info" id="info-panel">
|
||||||
|
<button class="close">X</button>
|
||||||
|
<h1 class="title">Concrete 🎏 Label</h1>
|
||||||
|
<p>
|
||||||
|
What do we need to know: - text labels-contents - order - position - size - who
|
||||||
|
wrote it ? (random id? name? nothing at all?) - timestamp ? -
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
<aside class="transcription" id="transcription-panel">
|
||||||
|
<button class="close">X</button>
|
||||||
|
<h1 class="title">Label Transcription</h1>
|
||||||
|
<ol class="labels-contents"></ol>
|
||||||
|
<button id="export-text">Export</button>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,369 @@
|
|||||||
|
// Get the container to use as a canvas
|
||||||
|
const container = document.getElementById("container");
|
||||||
|
const editor = document.getElementById("editor");
|
||||||
|
const backgroundImage = document.getElementById("background-image");
|
||||||
|
const imageTarget = document.getElementById("target");
|
||||||
|
const backgroundContainer = document.getElementById("background-container");
|
||||||
|
|
||||||
|
let backgroundWidth;
|
||||||
|
let backgroundHeight;
|
||||||
|
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
targetSize();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", (e) => {
|
||||||
|
targetSize();
|
||||||
|
});
|
||||||
|
|
||||||
|
function targetSize() {
|
||||||
|
backgroundWidth = backgroundImage.width;
|
||||||
|
backgroundHeight = backgroundImage.height;
|
||||||
|
|
||||||
|
// cringe
|
||||||
|
imageTarget.style.width = backgroundWidth + "px";
|
||||||
|
imageTarget.style.height = backgroundHeight + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
// List of labels
|
||||||
|
let labels = [];
|
||||||
|
let labelsObj = [];
|
||||||
|
|
||||||
|
let closing = false;
|
||||||
|
|
||||||
|
// Start is where the mouse is pressed, End is where the mouse is released
|
||||||
|
let startX;
|
||||||
|
let startY;
|
||||||
|
let endX;
|
||||||
|
let endY;
|
||||||
|
|
||||||
|
// Minimum size for the label to be created
|
||||||
|
let minimumSizeX = 5;
|
||||||
|
let minimumSizeY = 5;
|
||||||
|
|
||||||
|
// Boolean for showing the editor during drawing
|
||||||
|
let showEditor = false;
|
||||||
|
let editorX = 0;
|
||||||
|
let editorY = 0;
|
||||||
|
|
||||||
|
function percentagePosition(e, target) {
|
||||||
|
let targetRect = target.getBoundingClientRect();
|
||||||
|
let x = e.clientX - targetRect.left;
|
||||||
|
let y = e.clientY - targetRect.top;
|
||||||
|
|
||||||
|
return { x: (x / backgroundWidth) * 100, y: (y / backgroundHeight) * 100 };
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("mousedown", (e) => {
|
||||||
|
let percentage = percentagePosition(e, imageTarget);
|
||||||
|
|
||||||
|
if (e.target.tagName !== "BUTTON" && e.target.tagName !== "TEXTAREA") {
|
||||||
|
startX = percentage.x;
|
||||||
|
startY = percentage.y;
|
||||||
|
|
||||||
|
editorX = e.x;
|
||||||
|
editorY = e.y;
|
||||||
|
|
||||||
|
// activate the editor
|
||||||
|
showEditor = true;
|
||||||
|
editor.classList.add("show-editor");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Store the coordinates and trigger the function
|
||||||
|
window.addEventListener("mouseup", (e) => {
|
||||||
|
if (e.target.tagName !== "BUTTON" && e.target.tagName !== "TEXTAREA") {
|
||||||
|
let percentage = percentagePosition(e, imageTarget);
|
||||||
|
|
||||||
|
endX = percentage.x;
|
||||||
|
endY = percentage.y;
|
||||||
|
|
||||||
|
// disable the editor
|
||||||
|
showEditor = false;
|
||||||
|
editor.classList.remove("show-editor");
|
||||||
|
editor.style.width = 0;
|
||||||
|
editor.style.height = 0;
|
||||||
|
|
||||||
|
// draw label
|
||||||
|
drawLabel();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edit the editor box using transform instead of left / top in order to be more efficient
|
||||||
|
// (but still with width and height ehm idk if this affects the performance a lot)
|
||||||
|
// (and it is something we must care of because this event is called like every frame that the mouse is dragged)
|
||||||
|
|
||||||
|
window.addEventListener("mousemove", (e) => {
|
||||||
|
if (showEditor) {
|
||||||
|
let minX = Math.min(editorX, e.x);
|
||||||
|
let minY = Math.min(editorY, e.y);
|
||||||
|
|
||||||
|
let maxX = Math.max(editorX, e.x);
|
||||||
|
let maxY = Math.max(editorY, e.y);
|
||||||
|
|
||||||
|
let width = maxX - minX;
|
||||||
|
let height = maxY - minY;
|
||||||
|
|
||||||
|
// Apply a different class when the sizes pass the minimum size
|
||||||
|
// (i don't know if is good made like this)
|
||||||
|
if (width > minimumSizeX && height > minimumSizeY) {
|
||||||
|
editor.classList.add("can-draw");
|
||||||
|
} else {
|
||||||
|
editor.classList.remove("can-draw");
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.style.transform = `translate(${minX}px, ${minY}px)`;
|
||||||
|
editor.style.width = `${maxX - minX}px`;
|
||||||
|
editor.style.height = `${maxY - minY}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Store the coordinates and trigger the function
|
||||||
|
// container.addEventListener("mousedown", (e) => {
|
||||||
|
// // Avoid inserting a new label if the user is clicking on a close button)
|
||||||
|
// if (e.target.tagName !== "BUTTON" && e.target.tagName !== "TEXTAREA") {
|
||||||
|
// startX = e.x;
|
||||||
|
// startY = e.y;
|
||||||
|
|
||||||
|
// // activate the editor
|
||||||
|
// showEditor = true;
|
||||||
|
// editor.classList.add("show-editor");
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// container.addEventListener("mouseup", (e) => {
|
||||||
|
// if (e.target.tagName !== "BUTTON" && e.target.tagName !== "TEXTAREA") {
|
||||||
|
// endX = e.x;
|
||||||
|
// endY = e.y;
|
||||||
|
|
||||||
|
// // disable the editor
|
||||||
|
// showEditor = false;
|
||||||
|
// editor.classList.remove("show-editor");
|
||||||
|
// editor.style.width = 0;
|
||||||
|
// editor.style.height = 0;
|
||||||
|
|
||||||
|
// // draw label
|
||||||
|
// drawLabel();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Edit the editor box using transform instead of left / top in order to be more efficient
|
||||||
|
// (but still with width and height ehm idk if this affects the performance a lot)
|
||||||
|
// (and it is something we must care of because this event is called like every frame that the mouse is dragged)
|
||||||
|
// container.addEventListener("mousemove", (e) => {
|
||||||
|
// if (showEditor) {
|
||||||
|
// let minX = Math.min(startX, e.x);
|
||||||
|
// let minY = Math.min(startY, e.y);
|
||||||
|
|
||||||
|
// let maxX = Math.max(startX, e.x);
|
||||||
|
// let maxY = Math.max(startY, e.y);
|
||||||
|
|
||||||
|
// let width = maxX - minX;
|
||||||
|
// let height = maxY - minY;
|
||||||
|
|
||||||
|
// // Apply a different class when the sizes pass the minimum size
|
||||||
|
// // (i don't know if is good made like this)
|
||||||
|
// if (width > minimumSizeX && height > minimumSizeY) {
|
||||||
|
// editor.classList.add("can-draw");
|
||||||
|
// } else {
|
||||||
|
// editor.classList.remove("can-draw");
|
||||||
|
// }
|
||||||
|
|
||||||
|
// editor.style.transform = `translate(${minX}px, ${minY}px)`;
|
||||||
|
// editor.style.width = `${maxX - minX}px`;
|
||||||
|
// editor.style.height = `${maxY - minY}px`;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Check the mouse direction and create the Label
|
||||||
|
// The origin points of the label (because is positioned with top left) are always the lowest x and y values
|
||||||
|
// The width and height are the greater x and y values (because width and height cannot be negative)
|
||||||
|
|
||||||
|
function drawLabel() {
|
||||||
|
let minX = Math.min(startX, endX);
|
||||||
|
let minY = Math.min(startY, endY);
|
||||||
|
|
||||||
|
let maxX = Math.max(startX, endX);
|
||||||
|
let maxY = Math.max(startY, endY);
|
||||||
|
|
||||||
|
let width = maxX - minX;
|
||||||
|
let height = maxY - minY;
|
||||||
|
|
||||||
|
if (width > minimumSizeX && height > minimumSizeY) {
|
||||||
|
// Create a label and push it into the array of labels
|
||||||
|
let temporaryLabel = createLabel(minX, minY, width, height, labels.length);
|
||||||
|
temporaryLabel.classList.add("temporary");
|
||||||
|
|
||||||
|
let form = document.createElement("form");
|
||||||
|
let input = document.createElement("textarea");
|
||||||
|
input.placeholder = "Describe this area";
|
||||||
|
|
||||||
|
let insert = document.createElement("button");
|
||||||
|
insert.innerHTML = "Insert";
|
||||||
|
|
||||||
|
let cancel = document.createElement("button");
|
||||||
|
cancel.innerHTML = "x";
|
||||||
|
|
||||||
|
form.appendChild(input);
|
||||||
|
form.appendChild(insert);
|
||||||
|
form.appendChild(cancel);
|
||||||
|
|
||||||
|
temporaryLabel.appendChild(form);
|
||||||
|
|
||||||
|
imageTarget.appendChild(temporaryLabel);
|
||||||
|
|
||||||
|
new Promise(function (resolve, reject) {
|
||||||
|
// then if the user click insert and there is a value in the input-- > resolve the promise and return the text input to create the label,
|
||||||
|
// if the user click cancel-- > reject the promise and don't create the label
|
||||||
|
|
||||||
|
input.focus();
|
||||||
|
|
||||||
|
// Insert button
|
||||||
|
insert.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (input.value) {
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button
|
||||||
|
cancel.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
reject();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// Create the label
|
||||||
|
let label = createLabel(minX, minY, width, height, labels.length);
|
||||||
|
|
||||||
|
// Add the text input to the label
|
||||||
|
let text = document.createElement("p");
|
||||||
|
text.classList.add("label--text");
|
||||||
|
text.innerHTML = input.value;
|
||||||
|
label.appendChild(text);
|
||||||
|
|
||||||
|
let labelObj = {
|
||||||
|
position: {
|
||||||
|
x: minX,
|
||||||
|
y: minY,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
},
|
||||||
|
index: labels.length,
|
||||||
|
text: input.value,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
userID: userID,
|
||||||
|
};
|
||||||
|
|
||||||
|
uploadLabel(labelObj);
|
||||||
|
labelsObj.push(labelObj);
|
||||||
|
labels.push(label);
|
||||||
|
|
||||||
|
imageTarget.appendChild(label);
|
||||||
|
createLabelTranscription(label);
|
||||||
|
})
|
||||||
|
.catch((e) => {})
|
||||||
|
.then(() => {
|
||||||
|
imageTarget.removeChild(temporaryLabel);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the label element
|
||||||
|
function createLabel(x, y, width, height, index) {
|
||||||
|
let label = document.createElement("div");
|
||||||
|
label.classList.add("label");
|
||||||
|
label.style.left = `${x}%`;
|
||||||
|
label.style.top = `${y}%`;
|
||||||
|
label.style.width = `${width}%`;
|
||||||
|
label.style.height = `${height}%`;
|
||||||
|
|
||||||
|
// data attribute index maybe we will need it later maybe not
|
||||||
|
// with the index number of the label
|
||||||
|
label.setAttribute("data-index", index);
|
||||||
|
|
||||||
|
// Insert the number in the label
|
||||||
|
let labelNumber = document.createElement("p");
|
||||||
|
labelNumber.classList.add("label--number");
|
||||||
|
labelNumber.innerHTML = index + 1;
|
||||||
|
label.appendChild(labelNumber);
|
||||||
|
|
||||||
|
// Add a button for deleting the label
|
||||||
|
// TODO: reactive numbering oh no
|
||||||
|
let close = document.createElement("button");
|
||||||
|
close.classList.add("label--close");
|
||||||
|
close.innerHTML = "x";
|
||||||
|
close.addEventListener("click", (e) => {
|
||||||
|
label.remove();
|
||||||
|
});
|
||||||
|
label.appendChild(close);
|
||||||
|
|
||||||
|
return label;
|
||||||
|
}
|
||||||
|
|
||||||
|
const transcriptionPanel = document.getElementById("transcription-panel");
|
||||||
|
const transcriptionList = transcriptionPanel.querySelector("ol");
|
||||||
|
|
||||||
|
function createLabelTranscription(label) {
|
||||||
|
let transcription = document.createElement("li");
|
||||||
|
transcription.innerHTML = label.querySelector(".label--text").innerHTML;
|
||||||
|
|
||||||
|
transcriptionList.appendChild(transcription);
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadLabel(obj) {
|
||||||
|
fetch("https://hub.xpub.nl/soupboat/collecting-labels/", {
|
||||||
|
method: "POST", // or 'PUT'
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(obj),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log("Success:", data);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const load = document.getElementById("load-labels");
|
||||||
|
load.addEventListener("click", loadLabels);
|
||||||
|
|
||||||
|
function loadLabels() {
|
||||||
|
load.removeEventListener("click", loadLabels);
|
||||||
|
fetch("./labels.json")
|
||||||
|
.then((response) => {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
labelsObj = [labelsObj, ...labels];
|
||||||
|
data.labels.forEach((label, index) => {
|
||||||
|
let labelElement = createLabel(
|
||||||
|
label.position.x,
|
||||||
|
label.position.y,
|
||||||
|
label.size.width,
|
||||||
|
label.size.height,
|
||||||
|
index
|
||||||
|
);
|
||||||
|
|
||||||
|
// THIS IS TEMPORARY
|
||||||
|
labelElement.style.backgroundColor = `hsla(${Math.floor(
|
||||||
|
(label.userID / 10000000000) * 255
|
||||||
|
)}, 100%, 75%, 0.2)`;
|
||||||
|
|
||||||
|
// Add the text input to the label
|
||||||
|
let text = document.createElement("p");
|
||||||
|
text.classList.add("label--text");
|
||||||
|
text.innerHTML = label.text;
|
||||||
|
labelElement.appendChild(text);
|
||||||
|
|
||||||
|
labelElement.classList.add("loaded");
|
||||||
|
|
||||||
|
imageTarget.appendChild(labelElement);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@
|
|||||||
|
const showInfo = document.getElementById("show-info");
|
||||||
|
const infoPanel = document.getElementById("info-panel");
|
||||||
|
|
||||||
|
showInfo.addEventListener("click", (e) => {
|
||||||
|
infoPanel.classList.add("active");
|
||||||
|
infoPanel.querySelector(".close").addEventListener("click", (e) => {
|
||||||
|
infoPanel.classList.remove("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const showTranscription = document.getElementById("show-transcription");
|
||||||
|
// declared previously in labels.js
|
||||||
|
// const transcriptionPanel = document.getElementById("transcription-panel");
|
||||||
|
|
||||||
|
showTranscription.addEventListener("click", (e) => {
|
||||||
|
transcriptionPanel.classList.add("active");
|
||||||
|
transcriptionPanel.querySelector(".close").addEventListener("click", (e) => {
|
||||||
|
transcriptionPanel.classList.remove("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
// let fileName = "";
|
||||||
|
|
||||||
|
// window.addEventListener("load", function () {
|
||||||
|
// let input = document.querySelector('input[type="file"]');
|
||||||
|
// input.addEventListener("change", function () {
|
||||||
|
// if (this.files && this.files[0]) {
|
||||||
|
// fileName = this.files[0].name;
|
||||||
|
// let img = document.querySelector("img");
|
||||||
|
// img.onload = () => {
|
||||||
|
// img.classList.add("visible");
|
||||||
|
// input.classList.add("hidden");
|
||||||
|
// URL.revokeObjectURL(img.src); // no longer needed, free memory
|
||||||
|
// };
|
||||||
|
|
||||||
|
// img.src = URL.createObjectURL(this.files[0]); // set src to blob url
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
const imageButton = document.getElementById("show-image");
|
||||||
|
|
||||||
|
imageButton.addEventListener("click", (e) => {
|
||||||
|
let img = document.querySelector("img");
|
||||||
|
img.classList.toggle("hidden");
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
const userID = Math.round(Math.random() * 10000000000);
|
||||||
@ -0,0 +1,322 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-form {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 90vw;
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
border: 1px solid tomato;
|
||||||
|
opacity: 0.5;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 150;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor.can-draw {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor.show-editor {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(250, 99, 72, 0.2);
|
||||||
|
/* border: 1px solid currentColor; */
|
||||||
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary {
|
||||||
|
background: none;
|
||||||
|
/* border: 1px dashed tomato; */
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary form {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1ch;
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary textarea:focus {
|
||||||
|
outline: 1px dashed tomato;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary button {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary button + button {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.temporary .label--number,
|
||||||
|
.label.temporary .label--close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--number {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 4px;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
padding: 0 4px;
|
||||||
|
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.label--text {
|
||||||
|
margin: 1ch 0;
|
||||||
|
padding: 0 1ch;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-y: auto;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 200;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background-color: rgba(255, 99, 71, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input.visible {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal input {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal input:focus {
|
||||||
|
outline: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input button {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cancel {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#target {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-container img {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-container img.visible {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info,
|
||||||
|
.transcription {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
width: 25%;
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
background-color: #111;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: transform 0.4s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transcription.active,
|
||||||
|
.info.active {
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: transform 0.6s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transcription .title,
|
||||||
|
.info .title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transcription ol {
|
||||||
|
padding: 0;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#show-info,
|
||||||
|
#show-transcription,
|
||||||
|
.close,
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
|
||||||
|
color: tomato;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#show-transcription:hover,
|
||||||
|
#show-info:hover {
|
||||||
|
border: 1px solid tomato;
|
||||||
|
background-color: tomato;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 24px;
|
||||||
|
top: 32px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#export-text:hover,
|
||||||
|
.close:hover {
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: white;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
#export-text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 50;
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
const exportText = document.getElementById("export-text");
|
||||||
|
|
||||||
|
exportText.addEventListener("click", (e) => {
|
||||||
|
let text = document.querySelector("ol").innerText;
|
||||||
|
let title = fileName.slice(0, fileName.indexOf(".")) || "export";
|
||||||
|
title += ".txt";
|
||||||
|
download(text, title, "text/plain;charset=utf-8");
|
||||||
|
});
|
||||||
|
|
||||||
|
// https://stackoverflow.com/questions/13405129/javascript-create-and-save-file
|
||||||
|
// Thank you Kanchu!
|
||||||
|
// Function to download data to a file
|
||||||
|
function download(data, filename, type) {
|
||||||
|
var file = new Blob([data], { type: type });
|
||||||
|
if (window.navigator.msSaveOrOpenBlob)
|
||||||
|
// IE10+
|
||||||
|
window.navigator.msSaveOrOpenBlob(file, filename);
|
||||||
|
else {
|
||||||
|
// Others
|
||||||
|
var a = document.createElement("a"),
|
||||||
|
url = URL.createObjectURL(file);
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
setTimeout(function () {
|
||||||
|
document.body.removeChild(a);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue