From bf3c44e567675245bc5498d70869b7edbcbff6e6 Mon Sep 17 00:00:00 2001 From: kor Date: Tue, 24 Jul 2018 01:20:03 +1200 Subject: [PATCH] Setup basic add page visual and form. --- docs/asset/style.css | 47 +++++++++++++++++++++++++ docs/index.html | 1 + docs/logic/main.js | 46 +++++++++++++++++++++--- docs/logic/view.js | 84 +++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 173 insertions(+), 5 deletions(-) diff --git a/docs/asset/style.css b/docs/asset/style.css index de06500..8bb764f 100644 --- a/docs/asset/style.css +++ b/docs/asset/style.css @@ -43,6 +43,8 @@ --size-font-title: 1em; --size-font-body: 0.8em; --type-icon-size: 24px; /*font size of type icon/count*/ + + --animation-time: 200ms; } * { @@ -53,6 +55,7 @@ html { background: var(--color-main-bg-i); padding: 0em; margin: 0; + overflow-y: scroll; } body { padding: 0em; @@ -96,6 +99,7 @@ body { margin: 0px auto; width: 100%; float: left; + text-align: center; } .menu-item .count { padding-right: calc(var(--menu-item-elem-sep) / 2); @@ -150,6 +154,46 @@ body { float: left; } +/* PAGE */ +.page-overlay { + /* visual */ + background-color: #000; + opacity: 0; + -webkit-transition: opacity var(--animation-time) linear; + transition: opacity var(--animation-time) linear; + width: 100%; + height: 100%; + /* position */ + position: absolute; + z-index: -100; + left: 0; + top: 0; + /* content */ + display: flex; + align-items: center; + justify-content: center; +} +.page-overlay .content .row { + /*float: left; + clear: both;*/ + /*height: 40px;*/ +} +.page-overlay .content .row input { + padding: 10px; + width: 400px; + margin-bottom: 10px; + background-color: transparent; + color: #fff; + border-width: 1px; + border-style: solid; + border-color: var(--color-menu-item-i); + border-radius: var(--size-item-corner); +} +.page-overlay .content .row input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + opacity: 1; + color: var(--color-menu-item-i); +} + /* CONTENT */ .container { background: var(--color-main-bg-i); @@ -161,6 +205,9 @@ body { } .grid { margin: var(--size-gutter) auto; + opacity: 1; + -webkit-transition: opacity 1000ms linear; + transition: opacity 1000ms linear; } .grid:after { /* clearfix */ diff --git a/docs/index.html b/docs/index.html index 9a2f242..120f399 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,6 +18,7 @@ +
diff --git a/docs/logic/main.js b/docs/logic/main.js index 8a39d4d..4dc598e 100644 --- a/docs/logic/main.js +++ b/docs/logic/main.js @@ -2,6 +2,8 @@ function Main() { this.db = null; this.view = null; + this.queryPrev = ''; + this.queryCur = ''; this.install = function() { @@ -19,11 +21,47 @@ function Main() this.load = function(target) { + this.queryPrev = this.queryCur; target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target; - target = target.trim(); - var entries = this.db.filter(target); - this.view.display(entries); + this.queryCur = target.trim(); + + if (window.location.hash != this.queryCur) + { + window.location.hash = this.queryCur; + } + + if (this.queryCur == 'add') + { + this.view.add(); + } + else + { + this.view.display(this.db.filter(this.queryCur)); + } } } -window.addEventListener("hashchange", function() { main.load(window.document.location.hash); }); \ No newline at end of file +window.addEventListener("hashchange", function() { main.load(window.document.location.hash); }); + +document.onkeydown = function(evt) +{ + evt = evt || window.event; + var isEscape = false; + + if ("key" in evt) + { + isEscape = (evt.key == "Escape" || evt.key == "Esc"); + } + else + { + isEscape = (evt.keyCode == 27); + } + + if (isEscape) + { + if (main.queryCur == 'add') + { + main.load(main.queryPrev); + } + } +}; \ No newline at end of file diff --git a/docs/logic/view.js b/docs/logic/view.js index 6f43535..356faed 100644 --- a/docs/logic/view.js +++ b/docs/logic/view.js @@ -1,10 +1,15 @@ function View() { this.msnry = null; + this.overlay = null; + this.container = null; this.grid = null; this.menu = null; var parent = this; - + + // STATE + this.enabledOverlay = false; + const SETTINGS = { STATSNUMTAGS: 5, STATSNUMTYPE: 10, @@ -27,8 +32,11 @@ function View() this.install = function() { + this.overlay = document.getElementById("overlay"); + this.container = document.getElementById("container"); this.grid = document.getElementById("grid"); this.menu = document.getElementById("menu"); + this.setupAdd(); if (SETTINGS.USEMASONRY) { @@ -43,8 +51,75 @@ function View() } } + this.add = function() + { + this.setOverlay(true); + } + + this.setupAdd = function() + { + this.overlay.innerHTML = ''; + content += `
`; + + content += this.createFormInput('Title'); + content += this.createFormInput('Date'); + content += this.createFormInput('Person'); + content += this.createFormInput('Source'); + + content += this.createFormInput('Project'); + content += this.createFormInput('Type'); + content += this.createFormInput('Link'); + content += this.createFormInput('Tags'); + content += this.createFormInput('Note'); + content += this.createFormInput('Quote'); + content += this.createFormInput('Terms'); + content += this.createFormInput('Progress'); + // DONE + // REVI + + content += `
`; + this.overlay.innerHTML += content; + } + + this.createFormInput = function(id) + { + return `
+
+ +
+
`; + } + + 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); + // BUILD this.grid.innerHTML = ''; this.grid.innerHTML += "
"; @@ -302,6 +377,13 @@ function View() { let menuContent = ``; + // ADD + menuContent += ``; + menuContent += `
add
`; + menuContent += ``; + + menuContent += `
`; + // TYPE menuContent += ``; menuContent += `
`;