diff --git a/creator/index.php b/creator/index.php index cfbff9648..624390063 100644 --- a/creator/index.php +++ b/creator/index.php @@ -38,6 +38,26 @@ +
+

Textbox Editor

+

X

+
+
X
+ +
+
+
Y
+ +
+
+
Width
+ +
+
+
Height
+ +
+
@@ -113,7 +133,9 @@
Enter card text
- + +
Edit the placement and size of the selected textbox
+
- + \ No newline at end of file diff --git a/css/style-5.css b/css/style-6.css similarity index 97% rename from css/style-5.css rename to css/style-6.css index 022ed100d..e900093ca 100644 --- a/css/style-5.css +++ b/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 index 0d19b3768..884337d58 100644 --- a/globalHTML/header.php +++ b/globalHTML/header.php @@ -9,7 +9,7 @@ - + diff --git a/js/creator-4.js b/js/creator-5.js similarity index 98% rename from js/creator-4.js rename to js/creator-5.js index 51c974e50..ed28cd9df 100644 --- a/js/creator-4.js +++ b/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();