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

Setup basic add page visual and form.

Browse Source
This commit is contained in:
kor 2018-07-24 01:20:03 +12:00
parent f478a00897
commit bf3c44e567
4 changed files with 173 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/asset/style.css
View File

@ -43,6 +43,8 @@
--size-font-title: 1em; --size-font-title: 1em;
--size-font-body: 0.8em; --size-font-body: 0.8em;
--type-icon-size: 24px; /*font size of type icon/count*/ --type-icon-size: 24px; /*font size of type icon/count*/
--animation-time: 200ms;
} }
* { * {
@ -53,6 +55,7 @@ html {
background: var(--color-main-bg-i); background: var(--color-main-bg-i);
padding: 0em; padding: 0em;
margin: 0; margin: 0;
overflow-y: scroll;
} }
body { body {
padding: 0em; padding: 0em;
@ -96,6 +99,7 @@ body {
margin: 0px auto; margin: 0px auto;
width: 100%; width: 100%;
float: left; float: left;
text-align: center;
} }
.menu-item .count { .menu-item .count {
padding-right: calc(var(--menu-item-elem-sep) / 2); padding-right: calc(var(--menu-item-elem-sep) / 2);
@ -150,6 +154,46 @@ body {
float: left; 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 */ /* CONTENT */
.container { .container {
background: var(--color-main-bg-i); background: var(--color-main-bg-i);
@ -161,6 +205,9 @@ body {
} }
.grid { .grid {
margin: var(--size-gutter) auto; margin: var(--size-gutter) auto;
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
} }
.grid:after { .grid:after {
/* clearfix */ /* clearfix */

1
docs/index.html
View File

@ -18,6 +18,7 @@
<script src="logic/main.js"></script> <script src="logic/main.js"></script>
</head> </head>
<body> <body>
<div class="page-overlay" id="overlay"></div>
<div class="menu" id="menu"></div> <div class="menu" id="menu"></div>
<div class="container" id="container"> <div class="container" id="container">
<div class="grid" id="grid"></div> <div class="grid" id="grid"></div>

44
docs/logic/main.js
View File

@ -2,6 +2,8 @@ function Main()
{ {
this.db = null; this.db = null;
this.view = null; this.view = null;
this.queryPrev = '';
this.queryCur = '';
this.install = function() this.install = function()
{ {
@ -19,11 +21,47 @@ function Main()
this.load = function(target) this.load = function(target)
{ {
this.queryPrev = this.queryCur;
target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target; target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target;
target = target.trim(); this.queryCur = target.trim();
var entries = this.db.filter(target);
this.view.display(entries); 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); }); 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);
}
}
};

82
docs/logic/view.js
View File

@ -1,10 +1,15 @@
function View() function View()
{ {
this.msnry = null; this.msnry = null;
this.overlay = null;
this.container = null;
this.grid = null; this.grid = null;
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,
@ -27,8 +32,11 @@ function View()
this.install = function() this.install = function()
{ {
this.overlay = document.getElementById("overlay");
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)
{ {
@ -43,8 +51,75 @@ function View()
} }
} }
this.add = function()
{
this.setOverlay(true);
}
this.setupAdd = function()
{
this.overlay.innerHTML = '';
content += `<div class="content"><form>`;
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 += `</form></div>`;
this.overlay.innerHTML += content;
}
this.createFormInput = function(id)
{
return `<div class="row">
<div class="input-field">
<input placeholder="${id}" id="${id}">
</div>
</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);
// BUILD // BUILD
this.grid.innerHTML = ''; this.grid.innerHTML = '';
this.grid.innerHTML += "<div class='grid-sizer'></div>"; this.grid.innerHTML += "<div class='grid-sizer'></div>";
@ -302,6 +377,13 @@ function View()
{ {
let menuContent = ``; let menuContent = ``;
// ADD
menuContent += `<a href='#add'>`;
menuContent += `<div class="menu-item"><b>a</b>dd</div>`;
menuContent += `</a>`;
menuContent += `<div class="menu-spacer"></div>`;
// TYPE // TYPE
menuContent += `<a href='#'>`; menuContent += `<a href='#'>`;
menuContent += `<div class="menu-item">`; menuContent += `<div class="menu-item">`;