diff --git a/docs/asset/style.css b/docs/asset/style.css index dc466bc..2710751 100644 --- a/docs/asset/style.css +++ b/docs/asset/style.css @@ -235,7 +235,7 @@ body { height: 100%; width: 100%; left: 0; - z-index: 300; + z-index: 200; top: 0; } .griditem-image .griditem-containerlower { @@ -243,7 +243,7 @@ body { position: absolute; width: 100%; bottom: 0; - z-index: 300; + z-index: 200; left: 0; } .griditem-image { @@ -269,6 +269,7 @@ body { margin-left: calc(-1 * var(--size-grid-gutter)); margin-right: calc(-1 * var(--size-grid-gutter)); padding-top: var(--size-grid-gutter); + cursor: pointer; } .image-overlay { background-color: var(--color-imagedarken); @@ -484,14 +485,40 @@ body { opacity: var(--alpha-enabledicon); } - - - - - - - - +/* LIGHTBOX */ +.lightbox { + position: fixed; + z-index: 300; + width: 100%; + height: 100%; + left: 0; + top: 0; + display: flex; + align-items: center; + display: none; +} +.lightbox-back { + z-index: 300; + background-color: rgba(0,0,0,0.9); + width: 100%; + height: 100%; +} +.lightbox-back:hover { + background-color: rgba(0,0,0,0.85); + cursor: pointer; +} +.lightbox-item { + z-index: 400; + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + vertical-align: middle; +} +.lightbox-img { + max-height: 100vh; + max-width: 100vw; +} @@ -563,13 +590,9 @@ body { padding: 10px; width: 400px; margin-bottom: 10px; - /*background-color: transparent;*/ background-color: var(--color-page-input); color: #fff; border-width: 0px; - /*border-width: 1px; - border-style: solid; - border-color: var(--color-menu);*/ border-radius: var(--size-item-corner); } .page-overlay .content .row input::placeholder { @@ -577,11 +600,9 @@ body { color: var(--color-menu); } .page-overlay .content .row input:hover { - /*background-color: var(--color-itemascent);*/ background-color: var(--color-page-i); } .page-overlay .content .row input:focus { - /*background-color: var(--color-itemascent);*/ background-color: var(--color-page-e); } .page-overlay .content .display { diff --git a/docs/content/data.ndtl b/docs/content/data.ndtl index 3661ab9..7cb3ebb 100644 --- a/docs/content/data.ndtl +++ b/docs/content/data.ndtl @@ -2497,7 +2497,7 @@ MEDITATION CLASS > "Be in this world but not of it" LINK : http://www.duncantrussell.com/episodes/2018/5/10/david-nichtern FILE : 12018-08-11_med.gif - TYPE : quote + TYPE : term NOTE : Centered and deep. Softened not dulled. ITS JUST GONE diff --git a/docs/index.html b/docs/index.html index e82877c..6d71eb6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,8 +17,10 @@ + +
diff --git a/docs/logic/lightbox.js b/docs/logic/lightbox.js new file mode 100644 index 0000000..b87ea50 --- /dev/null +++ b/docs/logic/lightbox.js @@ -0,0 +1,27 @@ +function Lightbox() +{ + this.container = null; + this.item = null; + + this.install = function() + { + this.container = document.getElementById("lightbox"); + this.container.innerHTML += `
`; + this.container.innerHTML += ``; + this.item = document.getElementById("lightbox-item"); + } + + this.load = function(file) + { + this.item.innerHTML = ``; + this.container.style.display = 'block'; + } + + this.close = function() + { + if (this.container.style.display != 'none') + { + this.container.style.display = 'none'; + } + } +} \ No newline at end of file diff --git a/docs/logic/main.js b/docs/logic/main.js index a7180f9..87b198e 100644 --- a/docs/logic/main.js +++ b/docs/logic/main.js @@ -4,16 +4,22 @@ function Main() this.view = null; this.add = null; this.write = null; + this.theme = null; + this.lightbox = null; + this.queryCur = ''; this.queryPrev = ''; this.queryPrevAdd = ''; - this.theme = new Theme(); + var parent = this; const FILELOCATION = 'content/data.ndtl'; this.install = function() { + this.theme = new Theme(); this.theme.install(); + this.lightbox = new Lightbox; + this.lightbox.install(); var oReq = new XMLHttpRequest(); oReq.open('GET', FILELOCATION); @@ -52,6 +58,8 @@ function Main() this.load = function(target) { + this.lightbox.close(); + document.activeElement.blur(); if (this.queryCur !== 'add') { diff --git a/docs/logic/view.js b/docs/logic/view.js index c3cf8a7..b3bfbb5 100644 --- a/docs/logic/view.js +++ b/docs/logic/view.js @@ -101,15 +101,17 @@ function View() } } - if (SETTINGS.SHOWIMAG && this.isDefined(value.TYPE) && value.TYPE[0] === 'image') + let onclickImage = ``; + if (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image')) { itemClass += " griditem-image"; + onclickImage = `onclick="main.lightbox.load('content/media/${value.FILE}')" style="cursor: pointer;"`; } let entry = ``; + entry += `
`; // ITEM DIV - entry += `
`; if (this.isDefined(value.LINK)) { var idUrl = "url"; @@ -129,7 +131,7 @@ function View() // UPPER CONTENT START if (SETTINGS.SHOWUPPER) { - entry += `
`; + entry += `
`; // TITLE if (SETTINGS.SHOWTITLE) @@ -176,7 +178,7 @@ function View() // LOWER CONTENT START if (SETTINGS.SHOWLOWER) { - entry += `
`; + entry += `
`; // AUTHOR if (SETTINGS.SHOWAUTH && this.isDefined(value.AUTH)) @@ -245,7 +247,7 @@ function View() && this.isImage(value.FILE)) { entry += `
`; - entry += ``; + entry += ``; entry += `
`; }