tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add improved add page input element handling and setup.

Browse Source
This commit is contained in:
kor 2018-07-26 03:45:24 +12:00
parent ea525e5692
commit 3e59584d3e
5 changed files with 202 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/asset/style.css
View File

@ -224,8 +224,8 @@ body {
} }
.page-overlay .content .row .key { .page-overlay .content .row .key {
width: 100px; width: 100px;
color: var(--color-overlay-item-e); color: var(--color-overlay-item-a);
color: #000; visibility: hidden;
float: left; float: left;
padding: 9px 7px 10px 0; padding: 9px 7px 10px 0;
text-align: right; text-align: right;

1
docs/index.html
View File

@ -16,6 +16,7 @@
<script src="logic/wrap.js"></script> <script src="logic/wrap.js"></script>
<script src="logic/view.js"></script> <script src="logic/view.js"></script>
<script src="logic/main.js"></script> <script src="logic/main.js"></script>
<script src="logic/add.js"></script>
</head> </head>
<body> <body>
<div class="page-overlay noselect" id="overlay"></div> <div class="page-overlay noselect" id="overlay"></div>

193
docs/logic/add.js Normal file
View 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');
}
}
};

36
docs/logic/main.js
View File

@ -2,6 +2,7 @@ function Main()
{ {
this.db = null; this.db = null;
this.view = null; this.view = null;
this.add = null;
this.queryPrev = ''; this.queryPrev = '';
this.queryCur = ''; this.queryCur = '';
@ -11,6 +12,8 @@ function Main()
this.db.install(); this.db.install();
this.view = new View(); this.view = new View();
this.view.install(); this.view.install();
this.add = new Add();
this.add.install();
var escape = document.getElementById("escape"); var escape = document.getElementById("escape");
escape.onclick = function() escape.onclick = function()
@ -43,7 +46,7 @@ function Main()
if (this.queryCur == 'add') if (this.queryCur == 'add')
{ {
this.view.add(); this.add.show();
} }
else else
{ {
@ -52,33 +55,4 @@ function Main()
} }
} }
window.addEventListener("hashchange", function() { main.load(window.document.location.hash); }); 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');
}
};

81
docs/logic/view.js
View File

@ -7,9 +7,6 @@ function View()
this.menu = null; this.menu = null;
var parent = this; var parent = this;
// STATE
this.enabledOverlay = false;
const SETTINGS = { const SETTINGS = {
STATSNUMTAGS: 5, STATSNUMTAGS: 5,
STATSNUMTYPE: 10, STATSNUMTYPE: 10,
@ -36,7 +33,6 @@ function View()
this.container = document.getElementById("container"); this.container = document.getElementById("container");
this.grid = document.getElementById("grid"); this.grid = document.getElementById("grid");
this.menu = document.getElementById("menu"); this.menu = document.getElementById("menu");
this.setupAdd();
if (SETTINGS.USEMASONRY) 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.display = function(db)
{ {
this.setOverlay(false); main.add.setOverlay(false);
// BUILD // BUILD
this.grid.innerHTML = ''; this.grid.innerHTML = '';