From 3a579c8d259b9f5d8708e8993c8ece61abb5e5ea Mon Sep 17 00:00:00 2001 From: kor Date: Fri, 27 Jul 2018 04:12:02 +1200 Subject: [PATCH] Update add page - data display, enter. --- docs/asset/style.css | 46 ++++++++++++++++-- docs/logic/add.js | 110 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 138 insertions(+), 18 deletions(-) diff --git a/docs/asset/style.css b/docs/asset/style.css index a61363c..59b53ac 100644 --- a/docs/asset/style.css +++ b/docs/asset/style.css @@ -208,13 +208,10 @@ body { color: var(--color-overlay-item-e); text-decoration: none; } -.page-overlay .content-menu a { -} .page-overlay .content-menu .content-menu-option { height: 100px; width: 100px; - display: flex; align-items: center; justify-content: center; @@ -256,6 +253,49 @@ body { /*background-color: var(--color-content-item-a);*/ background-color: var(--color-overlay-item-e); } +.page-overlay .content .display { + float: left; + height: 100%; + width: 400px; + padding: 10px; + margin-left: 50px; + color: var(--color-overlay-item-e); +} +.page-overlay .content-enter { + margin-top: 50px; + float: left; + width: 100%; + height: 100px; + clear: both; + text-align: center; + padding-top: auto; + padding-bottom: auto; + vertical-align: center; + border-radius: var(--size-item-corner); +} +.page-overlay .content-enter .content-menu-option { + height: 100%; + vertical-align: center; + padding-top: auto; + padding-bottom: auto; + display: flex; + align-items: center; + justify-content: center; +} +.page-overlay .content-enter:hover { + background-color: var(--color-overlay-item-i); +} +.page-overlay .content-enter:hover a { + color: var(--color-overlay-item-a); +} +.page-overlay .content-enter a { + color: var(--color-overlay-item-e); + text-decoration: none; +} + + + + /* CONTENT */ .container { diff --git a/docs/logic/add.js b/docs/logic/add.js index 2310bdf..4f7c96c 100644 --- a/docs/logic/add.js +++ b/docs/logic/add.js @@ -28,19 +28,18 @@ function Add() this.grid = document.getElementById("grid"); this.overlay = document.getElementById("overlay"); - this.setupElement('Title', 'TITLE'); - this.setupElement('Date', 'DATE'); - this.setupElement('Type', 'TYPE'); - - this.setupElement('Link', 'LINK'); - this.setupElement('Person', 'PERS'); - this.setupElement('Source', 'SRCE'); - this.setupElement('Project', 'PROJ'); - this.setupElement('Tags', 'TAGS'); - this.setupElement('Progress', 'PROG'); - this.setupElement('Note', 'NOTE'); // long - this.setupElement('Quote', 'QOTE'); // long - this.setupElement('Terms', 'TERM'); // long + this.setupElement('Title', 'TITLE', 'upper'); + this.setupElement('Date', 'DATE', 'lower'); + this.setupElement('Type', 'TYPE', 'lower'); + this.setupElement('Link', 'LINK', 'url'); + this.setupElement('Person', 'PERS', 'text'); + this.setupElement('Source', 'SRCE', 'title'); + this.setupElement('Project', 'PROJ', 'text'); + this.setupElement('Tags', 'TAGS', 'tags'); + this.setupElement('Progress', 'PROG', 'text'); + this.setupElement('Note', 'NOTE', 'text'); // long + this.setupElement('Quote', 'QOTE', 'quote'); // long + this.setupElement('Terms', 'TERM', 'quote'); // long // DONE // REVI this.keys = Object.keys(this.elementList); @@ -73,7 +72,19 @@ function Add() content += `
`; content += `
`; + // ENTER + content += `
`; + content += ``; + content += `
`; + content += `Enter`; content += `
`; + content += ``; + content += `
`; + + content += ``; + + + this.overlay.innerHTML += content; this.display = document.getElementById("display"); @@ -86,15 +97,21 @@ function Add() this.elementList[this.keys[i]].elem.onblur = this.onElemBlur; this.elementList[this.keys[i]].elemKey = document.getElementById("key" + this.elementList[this.keys[i]].key); } + setTimeout(function() + { + parent.setupData(); + }, 100); } - this.setupElement = function(key, desc) + this.setupElement = function(key, desc, type) { - this.elementList[key] = { key: key, desc: desc, added: false}; + this.elementList[key] = { key: key, desc: desc, type: type, added: false}; } this.onElemChanged = function(e) { + // TODO: Autocomplete tags, type + parent.setupData(); } this.onElemFocus = function(e) @@ -129,6 +146,65 @@ function Add() } } + this.setupData = function() + { + let value = ''; + for (var i = 0; i < parent.keys.length; i++) + { + if (parent.elementList[parent.keys[i]].key == 'Title') + { + if (parent.elementList[parent.keys[i]].elem.value != '') + { + value += parent.elementList[parent.keys[i]].elem.value.toUpperCase() + '
' + } + else + { + value += 'TITLE
'; + } + } + else if (parent.elementList[parent.keys[i]].elem.value != '') + { + value += '  '; + value += parent.elementList[parent.keys[i]].desc.toUpperCase() + ' : '; + + if (parent.elementList[parent.keys[i]].type == 'lower') + { + value += parent.elementList[parent.keys[i]].elem.value.toLowerCase(); + } + else if (parent.elementList[parent.keys[i]].type == 'text') + { + value += parent.elementList[parent.keys[i]].elem.value; + } + else if (parent.elementList[parent.keys[i]].type == 'url') + { + // TODO: validate + value += parent.elementList[parent.keys[i]].elem.value; + } + else if (parent.elementList[parent.keys[i]].type == 'tags') + { + // TODO: Format + value += parent.elementList[parent.keys[i]].elem.value; + } + else if (parent.elementList[parent.keys[i]].type == 'quote') + { + // TODO: Format + value += parent.elementList[parent.keys[i]].elem.value; + } + else if (parent.elementList[parent.keys[i]].type == 'title') + { + value += parent.elementList[parent.keys[i]].elem.value.toProperCase(); + } + else if (parent.elementList[parent.keys[i]].type == 'upper') + { + value += parent.elementList[parent.keys[i]].elem.value.toLowerCase(); + } + + value += '
'; + } + } + parent.display.innerHTML = value; + } + this.show = function() { this.setOverlay(true); @@ -172,6 +248,10 @@ function Add() } } +String.prototype.toProperCase = function () { + return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); +}; + document.onkeydown = function(evt) { evt = evt || window.event;