From 3e59584d3e1210f4a7aa8f599d0b6342892a3c83 Mon Sep 17 00:00:00 2001 From: kor Date: Thu, 26 Jul 2018 03:45:24 +1200 Subject: [PATCH] Add improved add page input element handling and setup. --- docs/asset/style.css | 4 +- docs/index.html | 1 + docs/logic/add.js | 193 +++++++++++++++++++++++++++++++++++++++++++ docs/logic/main.js | 36 ++------ docs/logic/view.js | 81 +----------------- 5 files changed, 202 insertions(+), 113 deletions(-) create mode 100644 docs/logic/add.js diff --git a/docs/asset/style.css b/docs/asset/style.css index 6961d6d..a61363c 100644 --- a/docs/asset/style.css +++ b/docs/asset/style.css @@ -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; diff --git a/docs/index.html b/docs/index.html index 07f976b..2578ec2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,6 +16,7 @@ +
diff --git a/docs/logic/add.js b/docs/logic/add.js new file mode 100644 index 0000000..c8ee4f0 --- /dev/null +++ b/docs/logic/add.js @@ -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 = `
` + + // ESCAPE + content += `
`; + content += ``; + content += `
`; + content += `Esc`; + content += `
`; + content += ``; + content += `
`; + + // FORM + content += `
`; + for (var i = 0; i < this.keys.length; i++) + { + content += `
+
${this.elementList[this.keys[i]].desc}
+ +
`; + } + content += `
`; + + // DISPLAY + content += `
`; + content += `
`; + + content += `
`; + 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'); + } + } +}; \ No newline at end of file diff --git a/docs/logic/main.js b/docs/logic/main.js index 07a3c7e..9b620f5 100644 --- a/docs/logic/main.js +++ b/docs/logic/main.js @@ -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'); - } -}; \ No newline at end of file +window.addEventListener("hashchange", function() { main.load(window.document.location.hash); }); \ No newline at end of file diff --git a/docs/logic/view.js b/docs/logic/view.js index 5f84ce8..4b23361 100644 --- a/docs/logic/view.js +++ b/docs/logic/view.js @@ -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 = `
` - - // ESCAPE - content += `
`; - content += ``; - content += `
`; - content += `Esc`; - content += `
`; - content += ``; - content += `
`; - - // FORM - content += `
`; - 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 += `
`; - - content += `
`; - this.overlay.innerHTML += content; - } - - this.createFormInput = function(key, desc) - { - return `
-
${key}
- -
`; - } - - 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 = '';