textbox editor

Lohoris · Jan 23, 2021 · 4a51209 · 4a51209
1 parent 709d751
commit 4a51209
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/creator/index.php b/creator/index.php
@@ -38,6 +38,26 @@
 				<input id='frame-editor-erase'  class='input' type='checkbox' placeholder='Erase'>
 			</div>
 		</div>
+		<div id='textbox-editor' class='textbox-editor'>
+			<h2 class='textbox-editor-title'>Textbox Editor</h2>
+			<h2 class='textbox-editor-close' onclick='this.parentElement.classList.remove("opened");'>X</h2>
+			<div>
+				<h5 class='input-description'>X</h5>
+				<input id='textbox-editor-x' class='input' type='number' placeholder='X' step='1'>
+			</div>
+			<div>
+				<h5 class='input-description'>Y</h5>
+				<input id='textbox-editor-y' class='input' type='number' placeholder='X' step='1'>
+			</div>
+			<div>
+				<h5 class='input-description'>Width</h5>
+				<input id='textbox-editor-width' class='input' type='number' placeholder='X' step='1'>
+			</div>
+			<div>
+				<h5 class='input-description'>Height</h5>
+				<input id='textbox-editor-height' class='input' type='number' placeholder='X' step='1'>
+			</div>
+		</div>
 		<!-- Regular stuff -->
 		<div class='creator-grid margin-bottom-large'>
 			<canvas class='creator-canvas box-shadow' id='previewCanvas' width='750' height='1050'></canvas>
@@ -113,7 +133,9 @@
 						</div>
 						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Enter card text</h5>
-							<textarea id='text-editor' class='input' oninput='textEdited();'></textarea>
+							<textarea id='text-editor' class='input margin-bottom' oninput='textEdited();'></textarea>
+							<h5 class='margin-bottom padding input-description'>Edit the placement and size of the selected textbox</h5>
+							<button class='input' onclick='textboxEditor();'>Edit Bounds</button>
 						</div>
 						<div class='readable-background padding'>
 							<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>
@@ -383,5 +405,5 @@
 			</h4>
 		</div>
 	</div>
-	<script defer src='/js/creator-4.js'></script>
+	<script defer src='/js/creator-5.js'></script>
 <?php include('../globalHTML/footer.php'); ?>
diff --git a/css/style-5.css → css/style-6.css b/css/style-5.css → css/style-6.css
@@ -644,7 +644,7 @@ textarea.input {
 	text-align: center;
 	padding: 0.5rem 0;
 }
-.frame-element-editor {
+.frame-element-editor, .textbox-editor {
 	display: none;
 	position: fixed;
 	max-width: calc(100vw - 6rem);
@@ -668,13 +668,13 @@ textarea.input {
 	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
 	grid-gap: 1rem;
 }
-.frame-element-editor.opened {
+.frame-element-editor.opened, .textbox-editor.opened {
 	display: grid;
 }
-.frame-element-editor > .frame-element-editor-title {
+.frame-element-editor > .frame-element-editor-title, .textbox-editor > .textbox-editor-title {
 	grid-column: 1 / -2;
 }
-.frame-element-editor > .frame-element-editor-close {
+.frame-element-editor > .frame-element-editor-close, .textbox-editor > .textbox-editor-close {
 	cursor: pointer;
 	width: auto;
 	height: auto;

diff --git a/globalHTML/header.php b/globalHTML/header.php
@@ -9,7 +9,7 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<link rel="stylesheet" href="/css/reset.css">
-	<link rel="stylesheet" href="/css/style-5.css">
+	<link rel="stylesheet" href="/css/style-6.css">
 	<link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

diff --git a/js/creator-4.js → js/creator-5.js b/js/creator-4.js → js/creator-5.js
@@ -472,6 +472,18 @@ function textOptionClicked(event) {
 	document.querySelector('#text-editor').value = Object.entries(card.text)[selectedTextIndex][1].text;
 	selectSelectable(event);
 }
+function textboxEditor() {
+	var selectedTextbox = card.text[Object.keys(card.text)[selectedTextIndex]];
+	document.querySelector('#textbox-editor').classList.add('opened');
+	document.querySelector('#textbox-editor-x').value = scaleWidth(selectedTextbox.x || 0);
+	document.querySelector('#textbox-editor-x').onchange = (event) => {selectedTextbox.x = (event.target.value / card.width); textEdited();}
+	document.querySelector('#textbox-editor-y').value = scaleHeight(selectedTextbox.y || 0);
+	document.querySelector('#textbox-editor-y').onchange = (event) => {selectedTextbox.y = (event.target.value / card.height); textEdited();}
+	document.querySelector('#textbox-editor-width').value = scaleWidth(selectedTextbox.width || 1);
+	document.querySelector('#textbox-editor-width').onchange = (event) => {selectedTextbox.width = (event.target.value / card.width); textEdited();}
+	document.querySelector('#textbox-editor-height').value = scaleHeight(selectedTextbox.height || 1);
+	document.querySelector('#textbox-editor-height').onchange = (event) => {selectedTextbox.height = (event.target.value / card.height); textEdited();}
+}
 function textEdited() {
 	card.text[Object.keys(card.text)[selectedTextIndex]].text = document.querySelector('#text-editor').value;
 	drawTextBuffer();