textdungeon
/
web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

tabs

master
RENOX 1 year ago
parent
a62481ba9d
commit
4211dcfaa0
3 changed files with 193 additions and 138 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +33
    -18
      src/main/resources/static/css/style.css
  2. +18
    -20
      src/main/resources/static/index.html
  3. +142
    -100
      src/main/resources/static/js/post.js

+ 33
- 18
src/main/resources/static/css/style.css View File

@@ -1,18 +1,15 @@
body
{
body {
background-image: url("/imgs/background.jpg");
background-position: center;
background-size: cover;
}

#img-logo
{
#img-logo {
min-width: 310px;
max-width: 60%
}

#name, #password
{
#name, #password {
font-family: Candara;
text-align: center;
background: transparent;
@@ -23,25 +20,19 @@ body
padding: 10px;
}

#name
{
#name {
border-top-style: groove;
}



#password
{
#password {
border-bottom-style: groove;
}

#btn-login
{
#btn-login {
visibility: hidden;
}

#div-login
{
#div-login {
width: 36%;
border: 1px groove rgb(0, 8, 13, .25);
border-radius: 25px;
@@ -52,14 +43,38 @@ body
margin-top: 33%;
}

.wrapped{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 83vw;
}

/* filmgrain.js dep */
#canvas
{
#canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}

#textarea::-webkit-input-placeholder { /* Chrome */
color: black;
}

#textarea:-ms-input-placeholder { /* IE 10+ */
color: black;
}

#textarea::-moz-placeholder { /* Firefox 19+ */
color: black;
}

#textarea:-moz-placeholder { /* Firefox 4 - 18 */
color: black;
}

#textarea::placeholder {
color: black;
}


+ 18
- 20
src/main/resources/static/index.html View File

@@ -8,7 +8,7 @@
<title>Text Dungeon</title>
<link rel="stylesheet" type="text/css" href="/webjars/Semantic-UI/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>src="/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>
<script>src = "/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>
</head>

<body>
@@ -28,7 +28,7 @@
<div class="ui basic segment">
<!-- seg -->
<div class="ui large inverted vertical pointing menu" style="background: transparent;">
<a class="active item" onclick="loginEvent();">
<a class="active item" onclick="initValidateLogin();">
<span style="color: #007373; font-weight: bold;">Enter</span>
</a>
<a class="item" onclick="initEmptyForm();">
@@ -54,7 +54,7 @@

</div>
<br>
<input id="btn-login" type="button">
<input id="btn-login" type="button" onclick="initValidateLogin();">
</div>
</div>

@@ -64,28 +64,29 @@
<div id="page-form-menu" class="ui inverted attached stackable menu" style="display: none; background-color: #152e38">
<div class="ui container">

<a id="btn-save" class="item" onclick="saveEvent();">
<a id="btn-save" class="item" onclick="initValidateSave();">
<i class="save icon"></i> Save
</a>
<div id="btn-settings" class="ui simple dropdown item" style="display: none;">
Settings
<i class="dropdown icon"></i>
<div class="menu">
<a id="btn-resetpass" class="item" onclick="passwordResetEvent();"><i class="key icon"></i> Reset
<a id="btn-resetpass" class="item" onclick="initPasswordReset();"><i class="key icon"></i> Reset
Password</a>
<a id="btn-delete" class="item" onclick="deleteEvent();"><i class="trash icon"></i> Delete</a>
<a id="btn-delete" class="item" onclick="initDelete();"><i class="trash icon"></i> Delete</a>
</div>
</div>

<div class="right item">
<div class="right borderless item" style="padding-left: 0px;">

<div class="ui input"><input id="name-form" type="text" placeholder="Name"
style="background-color: whitesmoke"></div>
style="background-color: whitesmoke;"></div>

<a id="btn-logout" class="ui borderless item" onclick="logoutEvent();" style="display: none;">Logout</a>
<a id="btn-logout" class="ui borderless item" onclick="initLogout();"
style="display: none; padding-bottom: 3px; padding-top: 3px;">Logout</a>

<div class="ui input"><input id="password-form" type="password" placeholder="Password"
style="background-color: whitesmoke;" ></div>
style="background-color: whitesmoke;"></div>

</div>
</div>
@@ -94,17 +95,13 @@

<div id="page-form" class="ui container" style="display: none;">
<!-- tab container -->
<div class="ui inverted top attached tabular menu" style="margin-top: 1%;">
<a class="active item" style="border: none;">
Title
<div class="ui inverted top attached tabular menu wrapped" style="margin-top: 1%;">
<a id="tab1" class="active item" style="border: none; background-color: #3d3e3f;">
Tab
</a>
<!-- tabs
<a class="item" style="color: aliceblue; background-color: #224d5d;">
Project #2
</a>
-->
<div class="right menu">
<a class="item">

<div id="div-helper-tabs" class="right menu">
<a class="item" onclick="initAddTab()">
<i class="add icon"></i> New Tab
</a>
</div>
@@ -121,6 +118,7 @@

</div>

<input type="hidden" id="tabs" value="1">

<script src="js/post.js"></script>
<script src="js/filmgrain.js"></script>


+ 142
- 100
src/main/resources/static/js/post.js View File

@@ -1,62 +1,33 @@
"use strict";


// NAME FIELD
/* BEGIN KEYBOARD EVENTS */
document.getElementById("name").addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
validateLogin(document.getElementById("name").value, document.getElementById("password").value);
initValidateLogin();
}
});


// PASSWORD FIELD
document.getElementById("password").addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
validateLogin(document.getElementById("name").value, document.getElementById("password").value);
initValidateLogin();
}
});
/* END KEYBOARD EVENTS */


// LOGIN BUTTON
var btn_login = document.getElementById("btn-login");
btn_login.addEventListener("click", validateLogin); // not prod


// LOGIN EVENT
function loginEvent(name, password) {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("type=login&name=" + name + "&password=" + password);
xmlrequest.onload = function () {
console.log(xmlrequest.response); // not prod
loginResponseEvent(xmlrequest.response);
}
}


function initSave(name, password, text) {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("name=" + name + "&password=" + password + "&text=" + text); // not prod
xmlrequest.onload = function () // not prod
{
console.log(xmlrequest.response);// not prod
}
}


// VALIDATE LOGIN
function validateLogin(name, password) {
/* BEGIN INIT METHODS ACCESSIBLE BY DOCUMENT */
function initValidateLogin() {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;
let label_name = document.getElementById("label-name");
let label_password = document.getElementById("label-password");
label_name.style.display = "none";
label_password.style.display = "none";
if (name === "") {
if (name === "" || name === null) {
label_name.textContent = "Empty.";
label_name.style.display = "initial";
} else if (password === "") {
} else if (password === "" || password === null) {
label_password.textContent = "Empty.";
label_password.style.display = "initial";
} else if (name.length > 60) {
@@ -69,12 +40,123 @@ function validateLogin(name, password) {
label_name.textContent = "Illegal Character.";
label_name.style.display = "initial";
} else {
loginEvent(name, password);
loginLocalEvent(name, password);
}
}

function initValidateSave() {
let name = document.getElementById("name-form").value;
let text = document.getElementById("textarea").value;
let password;
if (document.getElementById("password-form").value === "") // existing user
password = sessionStorage.getItem(name);
else
password = document.getElementById("password-form").value;
if (name === "" || name === null) {
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a");
} else if (password === "" || password === null) {
blinkUtil(document.getElementById("password-form"), .1, 6, "whitesmoke", "#ff1a1a");
} else if (text === "" || text === null) {
document.getElementById("textarea").placeholder = "Cannot save an empty form.";
} else if (name.length > 60) {
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a");
document.getElementById("name-form").value = "";
document.getElementById("name-form").placeholder = "Too long.";
} else if (password.length > 128) {
blinkUtil(document.getElementById("password-form"), .1, 6, "whitesmoke", "#ff1a1a");
document.getElementById("password-form").value = "";
document.getElementById("password-form").placeholder = "Too long.";
} else if (name.match("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}.~`]")) {
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a");
document.getElementById("name-form").value = "";
document.getElementById("name-form").placeholder = "Avoid special characters.";
} else {
sessionStorage.setItem(name, password);
organizeSaveLocalEvent(name, password, text);
}
}

function initEmptyForm() {
document.getElementById("name").value = "";
document.getElementById("password").value = "";
document.getElementById("textarea").value = "";
document.getElementById("name-form").value = "";
document.getElementById("password-form").value = "";
document.getElementById("name-form").disabled = false;
document.getElementById("btn-settings").style.display = "none";
document.getElementById("btn-logout").style.display = "none";
document.getElementById("password-form").style.display = "inherit";
document.getElementById("div-logo").style.display = "none";
document.getElementById("div-login-parent").style.display = "none";
document.getElementById("textarea").rows = window.innerHeight / 24;
document.getElementById("page-form-menu").style.display = "inherit";
document.getElementById("page-form").style.display = "inherit";
}

function initLogout() {
sessionStorage.clear();
document.getElementById("label-name").style.display = "none";
document.getElementById("label-password").style.display = "none";
document.getElementById("page-form-menu").style.display = "none";
document.getElementById("page-form").style.display = "none";
document.getElementById("div-logo").style.display = "inherit";
document.getElementById("div-login-parent").style.display = "inherit";
}

function initAboutPage() {
// TODO
}

function initPasswordReset() {
// TODO
}

function initDelete() {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("name=" + document.getElementById("name-form").value + "&password=" + sessionStorage.getItem(document.getElementById("name-form").value) + "&delete=" + "true");
initLogout();
}

function initAddTab() {
// TODO 10 charlength - 2 free
document.getElementById("tabs").value = parseInt(document.getElementById("tabs").value) + 1;
let tab = "<a id=\"tab" + document.getElementById("tabs").value + "\" class=\"item\" style=\"border: none;background-color: #252628;display: inherit;\">Tab</a>";
document.getElementById('div-helper-tabs').insertAdjacentHTML('beforebegin', tab);
var newTab = document.getElementById("tab" + document.getElementById("tabs").value);
newTab.addEventListener("click", function (e) {
selectTabLocalEvent(e);
});
}

/* END INIT METHODS ACCESSIBLE BY DOCUMENT */


/* BEGIN LOCAL EVENTS */
function loginLocalEvent(name, password) {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("type=login&name=" + name + "&password=" + password);
xmlrequest.onload = function () {
console.log(xmlrequest.response); // not prod
loginResponseLocalEvent(xmlrequest.response);
}
}

function saveLocalEvent(name, password, text) {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("name=" + name + "&password=" + password + "&text=" + text); // not prod
xmlrequest.onload = function () // not prod
{
console.log(xmlrequest.response);// not prod
}
}

function loginResponseEvent(response) {
function loginResponseLocalEvent(response) {
let label_name = document.getElementById("label-name");
let label_password = document.getElementById("label-password");
label_name.style.display = "none";
@@ -104,88 +186,48 @@ function loginResponseEvent(response) {
} else if (responseJson.DOCUMENT_TYPE === "DECRYPT_SUCCESS") {
sessionStorage.setItem(responseJson.DUNGEON.name, document.getElementById("password").value);
initEmptyForm();
initPopulateForm(responseJson);
populateFormLocalEvent(responseJson);
}
}


function initEmptyForm() {
document.getElementById("name").value = "";
document.getElementById("password").value = "";
document.getElementById("textarea").value = "";
document.getElementById("name-form").value = "";
document.getElementById("password-form").value = "";
document.getElementById("name-form").disabled = false;
document.getElementById("btn-settings").style.display = "none";
document.getElementById("btn-logout").style.display = "none";
document.getElementById("password-form").style.display = "inherit";
document.getElementById("div-logo").style.display = "none";
document.getElementById("div-login-parent").style.display = "none";
document.getElementById("textarea").rows = window.innerHeight / 24;
document.getElementById("page-form-menu").style.display = "inherit";
document.getElementById("page-form").style.display = "inherit";
}

function initPopulateForm(responseJson) {
function populateFormLocalEvent(responseJson) {

document.getElementById("name-form").value = responseJson.DUNGEON.name;
document.getElementById("name-form").disabled = "true";
document.getElementById("password-form").style.display = "none";
document.getElementById("btn-logout").style.display = "initial";
document.getElementById("btn-logout").style.display = "inherit";
document.getElementById("btn-settings").style.display = "inherit";
document.getElementById("textarea").value = responseJson.DUNGEON.cleartext;
// TODO Tab Information
}

function saveEvent() {
// TODO Validate Save.
function organizeSaveLocalEvent(name, password, text) {
// TODO Organize Tabs

let name = document.getElementById("name-form").value;
let text = document.getElementById("textarea").value;
let password;

if (document.getElementById("password-form").value === "") // existing user
password = sessionStorage.getItem(name);
else {
password = document.getElementById("password-form").value;
sessionStorage.setItem(name, password);
}


initSave(name, password, text);

saveLocalEvent(name, password, text);
document.getElementById("name-form").disabled = true;
document.getElementById("password-form").style.display = "none";
document.getElementById("btn-logout").style.display = "initial"; // TODO Logout adds padding?
document.getElementById("btn-logout").style.display = "inherit";
document.getElementById("btn-settings").style.display = "inherit";

// TODO Notify
}


function initAboutPage() {
function selectTabLocalEvent(e) { //TODO also pass curr selected tab

}

function logoutEvent() {
sessionStorage.clear();
document.getElementById("page-form-menu").style.display = "none";
document.getElementById("page-form").style.display = "none";
document.getElementById("div-logo").style.display = "inherit";
document.getElementById("div-login-parent").style.display = "inherit";
}

/* END LOCAL EVENTS */

function passwordResetEvent() {

}

function deleteEvent() {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlrequest.send("name=" + document.getElementById("name-form").value + "&password=" + sessionStorage.getItem(document.getElementById("name-form").value) + "&delete=" + "true");
logoutEvent();
/* BEGIN UTILITIES */
function blinkUtil(el, freq, rounds, color1, color2) {
let state = false;
let currRound = 0;
let interval = setInterval(function () {
if (currRound === rounds) clearInterval(interval);
state = !state;
el.style.backgroundColor = (state ? color1 : color2);
currRound++;
}, 1000 * freq);
}

/* END UTILITIES */

Write Preview
Loading…
Cancel
Save