mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Add improved add page input element handling and setup.
This commit is contained in:
kor
parent
ea525e5692
commit
3e59584d3e
@ -224,8 +224,8 @@ body {
|
||||
}
|
||||
.page-overlay .content .row .key {
|
||||
width: 100px;
|
||||
color: var(--color-overlay-item-e);
|
||||
color: #000;
|
||||
color: var(--color-overlay-item-a);
|
||||
visibility: hidden;
|
||||
float: left;
|
||||
padding: 9px 7px 10px 0;
|
||||
text-align: right;
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<script src="logic/wrap.js"></script>
|
||||
<script src="logic/view.js"></script>
|
||||
<script src="logic/main.js"></script>
|
||||
<script src="logic/add.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-overlay noselect" id="overlay"></div>
|
||||
|
||||
193
docs/logic/add.js
Normal file
193
docs/logic/add.js
Normal file
@ -0,0 +1,193 @@
|
||||
function Add()
|
||||
{
|
||||
this.overlay = null;
|
||||
this.display = null;
|
||||
this.grid = null;
|
||||
|
||||
this.elementList = [];
|
||||
this.keys = null;
|
||||
var parent = this;
|
||||
|
||||
// STATE
|
||||
this.enabledOverlay = false;
|
||||
this.addedTitle = false
|
||||
this.addedDate = false
|
||||
this.addedPerson = false
|
||||
this.addedSource = false
|
||||
this.addedProject = false
|
||||
this.addedType = false
|
||||
this.addedLink = false
|
||||
this.addedTags = false
|
||||
this.addedNote = false
|
||||
this.addedQuote = false
|
||||
this.addedTerms = false
|
||||
this.addedProgress = false
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
this.grid = document.getElementById("grid");
|
||||
this.overlay = document.getElementById("overlay");
|
||||
|
||||
this.setupElement('Title', 'TITLE');
|
||||
this.setupElement('Date', 'DATE');
|
||||
this.setupElement('Person', 'PERS');
|
||||
this.setupElement('Source', 'SRCE');
|
||||
this.setupElement('Project', 'PROJ');
|
||||
this.setupElement('Type', 'TYPE');
|
||||
this.setupElement('Link', 'LINK');
|
||||
this.setupElement('Tags', 'TAGS');
|
||||
this.setupElement('Note', 'NOTE');
|
||||
this.setupElement('Quote', 'QOTE');
|
||||
this.setupElement('Terms', 'TERM');
|
||||
this.setupElement('Progress', 'PROG');
|
||||
// DONE
|
||||
// REVI
|
||||
this.keys = Object.keys(this.elementList);
|
||||
|
||||
// SETUP
|
||||
this.overlay.innerHTML = '';
|
||||
let content = `<div class="content">`
|
||||
|
||||
// ESCAPE
|
||||
content += `<div class="content-menu">`;
|
||||
content += `<a href="javascript:void(0);" id="escape">`;
|
||||
content += `<div class="content-menu-option">`;
|
||||
content += `<b>Esc</b>`;
|
||||
content += `</div>`;
|
||||
content += `</a>`;
|
||||
content += `</div>`;
|
||||
|
||||
// FORM
|
||||
content += `<form>`;
|
||||
for (var i = 0; i < this.keys.length; i++)
|
||||
{
|
||||
content += `<div class="row">
|
||||
<div class="key" id="key${this.elementList[this.keys[i]].key}">${this.elementList[this.keys[i]].desc}</div>
|
||||
<input placeholder="${this.elementList[this.keys[i]].key}" id="${this.elementList[this.keys[i]].key}">
|
||||
</div>`;
|
||||
}
|
||||
content += `</form>`;
|
||||
|
||||
// DISPLAY
|
||||
content += `<div class="display" id="display">`;
|
||||
content += `</div>`;
|
||||
|
||||
content += `</div>`;
|
||||
this.overlay.innerHTML += content;
|
||||
|
||||
this.display = document.getElementById("display");
|
||||
|
||||
for (var i = 0; i < this.keys.length; i++)
|
||||
{
|
||||
this.elementList[this.keys[i]].elem = document.getElementById(this.elementList[this.keys[i]].key);
|
||||
this.elementList[this.keys[i]].elem.oninput = this.onElemChanged;
|
||||
this.elementList[this.keys[i]].elem.onElemFocus = this.onElemFocus;
|
||||
this.elementList[this.keys[i]].elem.onElemBlur = this.onElemBlur;
|
||||
this.elementList[this.keys[i]].elemKey = document.getElementById("key" + this.elementList[this.keys[i]].key);
|
||||
}
|
||||
}
|
||||
|
||||
this.setupElement = function(key, desc)
|
||||
{
|
||||
this.elementList[key] = { key: key, desc: desc, added: false};
|
||||
}
|
||||
|
||||
this.onElemChanged = function(e)
|
||||
{
|
||||
}
|
||||
|
||||
this.onElemFocus = function(e)
|
||||
{
|
||||
for (var i = 0; i < parent.keys.length; i++)
|
||||
{
|
||||
if (e.target.id == parent.elementList[parent.keys[i]].key)
|
||||
{
|
||||
if (!parent.elementList[parent.keys[i]].added)
|
||||
{
|
||||
parent.elementList[parent.keys[i]].added = true;
|
||||
parent.elementList[parent.keys[i]].elemKey.style.visibility = "visible";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.onElemBlur = function(e)
|
||||
{
|
||||
for (var i = 0; i < parent.keys.length; i++)
|
||||
{
|
||||
if (e.target.id == parent.elementList[parent.keys[i]].key)
|
||||
{
|
||||
if (parent.elementList[parent.keys[i]].elem.value == '' && parent.elementList[parent.keys[i]].added)
|
||||
{
|
||||
parent.elementList[parent.keys[i]].added = false;
|
||||
parent.elementList[parent.keys[i]].elemKey.style.visibility = "hidden";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.show = function()
|
||||
{
|
||||
this.setOverlay(true);
|
||||
}
|
||||
|
||||
this.setOverlay = function(value)
|
||||
{
|
||||
if (value && !this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '1';
|
||||
// overlay.style.visibility = 'hidden';
|
||||
// overlay.style.display = 'none';
|
||||
overlay.style.zIndex = '1000';
|
||||
this.enabledOverlay = true;
|
||||
setTimeout(function()
|
||||
{
|
||||
this.grid.innerHTML = '';
|
||||
this.grid.style.height = 0;
|
||||
}, 200);
|
||||
}
|
||||
else if (!value && this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '0';
|
||||
setTimeout(function()
|
||||
{
|
||||
overlay.style.zIndex = '-100';
|
||||
}, 200);
|
||||
this.enabledOverlay = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.onkeydown = function(evt)
|
||||
{
|
||||
evt = evt || window.event;
|
||||
if (!evt.ctrlKey)
|
||||
{
|
||||
var isEscape = false;
|
||||
var isA = false;
|
||||
|
||||
if ("key" in evt)
|
||||
{
|
||||
isEscape = (evt.key == "Escape" || evt.key == "Esc");
|
||||
}
|
||||
else
|
||||
{
|
||||
isEscape = (evt.keyCode == 27);
|
||||
}
|
||||
isA = (evt.keyCode == 65);
|
||||
|
||||
if (isEscape)
|
||||
{
|
||||
if (main.queryCur == 'add')
|
||||
{
|
||||
main.load(main.queryPrev);
|
||||
}
|
||||
}
|
||||
else if (isA && main.queryCur != 'add')
|
||||
{
|
||||
main.load('add');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -2,6 +2,7 @@ function Main()
|
||||
{
|
||||
this.db = null;
|
||||
this.view = null;
|
||||
this.add = null;
|
||||
this.queryPrev = '';
|
||||
this.queryCur = '';
|
||||
|
||||
@ -11,6 +12,8 @@ function Main()
|
||||
this.db.install();
|
||||
this.view = new View();
|
||||
this.view.install();
|
||||
this.add = new Add();
|
||||
this.add.install();
|
||||
|
||||
var escape = document.getElementById("escape");
|
||||
escape.onclick = function()
|
||||
@ -43,7 +46,7 @@ function Main()
|
||||
|
||||
if (this.queryCur == 'add')
|
||||
{
|
||||
this.view.add();
|
||||
this.add.show();
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -52,33 +55,4 @@ function Main()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", function() { main.load(window.document.location.hash); });
|
||||
|
||||
document.onkeydown = function(evt)
|
||||
{
|
||||
evt = evt || window.event;
|
||||
var isEscape = false;
|
||||
var isA = false;
|
||||
|
||||
if ("key" in evt)
|
||||
{
|
||||
isEscape = (evt.key == "Escape" || evt.key == "Esc");
|
||||
}
|
||||
else
|
||||
{
|
||||
isEscape = (evt.keyCode == 27);
|
||||
}
|
||||
isA = (evt.keyCode == 65);
|
||||
|
||||
if (isEscape)
|
||||
{
|
||||
if (main.queryCur == 'add')
|
||||
{
|
||||
main.load(main.queryPrev);
|
||||
}
|
||||
}
|
||||
else if (isA && main.queryCur != 'add')
|
||||
{
|
||||
main.load('add');
|
||||
}
|
||||
};
|
||||
window.addEventListener("hashchange", function() { main.load(window.document.location.hash); });
|
||||
@ -7,9 +7,6 @@ function View()
|
||||
this.menu = null;
|
||||
var parent = this;
|
||||
|
||||
// STATE
|
||||
this.enabledOverlay = false;
|
||||
|
||||
const SETTINGS = {
|
||||
STATSNUMTAGS: 5,
|
||||
STATSNUMTYPE: 10,
|
||||
@ -36,7 +33,6 @@ function View()
|
||||
this.container = document.getElementById("container");
|
||||
this.grid = document.getElementById("grid");
|
||||
this.menu = document.getElementById("menu");
|
||||
this.setupAdd();
|
||||
|
||||
if (SETTINGS.USEMASONRY)
|
||||
{
|
||||
@ -51,84 +47,9 @@ function View()
|
||||
}
|
||||
}
|
||||
|
||||
this.add = function()
|
||||
{
|
||||
this.setOverlay(true);
|
||||
}
|
||||
|
||||
this.setupAdd = function()
|
||||
{
|
||||
this.overlay.innerHTML = '';
|
||||
let content = `<div class="content">`
|
||||
|
||||
// ESCAPE
|
||||
content += `<div class="content-menu">`;
|
||||
content += `<a href="javascript:void(0);" id="escape">`;
|
||||
content += `<div class="content-menu-option">`;
|
||||
content += `<b>Esc</b>`;
|
||||
content += `</div>`;
|
||||
content += `</a>`;
|
||||
content += `</div>`;
|
||||
|
||||
// FORM
|
||||
content += `<form>`;
|
||||
content += this.createFormInput('TITLE', 'Title');
|
||||
content += this.createFormInput('DATE', 'Date');
|
||||
content += this.createFormInput('PERS', 'Person');
|
||||
content += this.createFormInput('SRCE', 'Source');
|
||||
content += this.createFormInput('PROJ', 'Project');
|
||||
content += this.createFormInput('TYPE', 'Type');
|
||||
content += this.createFormInput('LINK', 'Link');
|
||||
content += this.createFormInput('TAGS', 'Tags');
|
||||
content += this.createFormInput('NOTE', 'Note');
|
||||
content += this.createFormInput('QOTE', 'Quote');
|
||||
content += this.createFormInput('TERM', 'Terms');
|
||||
content += this.createFormInput('PROG', 'Progress');
|
||||
// DONE
|
||||
// REVI
|
||||
content += `</form>`;
|
||||
|
||||
content += `</div>`;
|
||||
this.overlay.innerHTML += content;
|
||||
}
|
||||
|
||||
this.createFormInput = function(key, desc)
|
||||
{
|
||||
return `<div class="row">
|
||||
<div class="key">${key}</div>
|
||||
<input placeholder="${desc}" id="${desc}">
|
||||
</div>`;
|
||||
}
|
||||
|
||||
this.setOverlay = function(value)
|
||||
{
|
||||
if (value && !this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '1';
|
||||
// overlay.style.visibility = 'hidden';
|
||||
// overlay.style.display = 'none';
|
||||
overlay.style.zIndex = '1000';
|
||||
this.enabledOverlay = true;
|
||||
setTimeout(function()
|
||||
{
|
||||
this.grid.innerHTML = '';
|
||||
this.grid.style.height = 0;
|
||||
}, 200);
|
||||
}
|
||||
else if (!value && this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '0';
|
||||
setTimeout(function()
|
||||
{
|
||||
overlay.style.zIndex = '-100';
|
||||
}, 200);
|
||||
this.enabledOverlay = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.display = function(db)
|
||||
{
|
||||
this.setOverlay(false);
|
||||
main.add.setOverlay(false);
|
||||
|
||||
// BUILD
|
||||
this.grid.innerHTML = '';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user