Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

textbox editor

Browse Source
This commit is contained in:
Kyle
2021-01-23 10:42:14 -08:00
parent 709d75118c
commit 4a51209ad8
4 changed files with 41 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
creator/index.php
View File

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

8
css/style-5.css → css/style-6.css
View File

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

2
globalHTML/header.php
View File

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

12
js/creator-4.js → js/creator-5.js
View File

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