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

Add simple lightbox.

Browse Source
This commit is contained in:
kor 2018-10-31 03:05:23 +13:00
parent a6365270b9
commit 1971d336b6
6 changed files with 83 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/asset/style.css
View File

@ -235,7 +235,7 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
left: 0; left: 0;
z-index: 300; z-index: 200;
top: 0; top: 0;
} }
.griditem-image .griditem-containerlower { .griditem-image .griditem-containerlower {
@ -243,7 +243,7 @@ body {
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
z-index: 300; z-index: 200;
left: 0; left: 0;
} }
.griditem-image { .griditem-image {
@ -269,6 +269,7 @@ body {
margin-left: calc(-1 * var(--size-grid-gutter)); margin-left: calc(-1 * var(--size-grid-gutter));
margin-right: calc(-1 * var(--size-grid-gutter)); margin-right: calc(-1 * var(--size-grid-gutter));
padding-top: var(--size-grid-gutter); padding-top: var(--size-grid-gutter);
cursor: pointer;
} }
.image-overlay { .image-overlay {
background-color: var(--color-imagedarken); background-color: var(--color-imagedarken);
@ -484,14 +485,40 @@ body {
opacity: var(--alpha-enabledicon); 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; padding: 10px;
width: 400px; width: 400px;
margin-bottom: 10px; margin-bottom: 10px;
/*background-color: transparent;*/
background-color: var(--color-page-input); background-color: var(--color-page-input);
color: #fff; color: #fff;
border-width: 0px; border-width: 0px;
/*border-width: 1px;
border-style: solid;
border-color: var(--color-menu);*/
border-radius: var(--size-item-corner); border-radius: var(--size-item-corner);
} }
.page-overlay .content .row input::placeholder { .page-overlay .content .row input::placeholder {
@ -577,11 +600,9 @@ body {
color: var(--color-menu); color: var(--color-menu);
} }
.page-overlay .content .row input:hover { .page-overlay .content .row input:hover {
/*background-color: var(--color-itemascent);*/
background-color: var(--color-page-i); background-color: var(--color-page-i);
} }
.page-overlay .content .row input:focus { .page-overlay .content .row input:focus {
/*background-color: var(--color-itemascent);*/
background-color: var(--color-page-e); background-color: var(--color-page-e);
} }
.page-overlay .content .display { .page-overlay .content .display {

2
docs/content/data.ndtl
View File

@ -2497,7 +2497,7 @@ MEDITATION CLASS
> "Be in this world but not of it" > "Be in this world but not of it"
LINK : http://www.duncantrussell.com/episodes/2018/5/10/david-nichtern LINK : http://www.duncantrussell.com/episodes/2018/5/10/david-nichtern
FILE : 12018-08-11_med.gif FILE : 12018-08-11_med.gif
TYPE : quote TYPE : term
NOTE : Centered and deep. Softened not dulled. NOTE : Centered and deep. Softened not dulled.
ITS JUST GONE ITS JUST GONE

2
docs/index.html
View File

@ -17,8 +17,10 @@
<script src="logic/view.js"></script> <script src="logic/view.js"></script>
<script src="logic/main.js"></script> <script src="logic/main.js"></script>
<script src="logic/add.js"></script> <script src="logic/add.js"></script>
<script src="logic/lightbox.js"></script>
</head> </head>
<body> <body>
<div class="lightbox" id="lightbox"></div>
<div class="page-overlay noselect" id="overlay"></div> <div class="page-overlay noselect" 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">

27
docs/logic/lightbox.js Normal file
View File

@ -0,0 +1,27 @@
function Lightbox()
{
this.container = null;
this.item = null;
this.install = function()
{
this.container = document.getElementById("lightbox");
this.container.innerHTML += `<div class="lightbox-back" onclick="main.lightbox.close()"></div>`;
this.container.innerHTML += `<div id="lightbox-item" class="lightbox-item"></div>`;
this.item = document.getElementById("lightbox-item");
}
this.load = function(file)
{
this.item.innerHTML = `<img class="lightbox-img" src="${file}">`;
this.container.style.display = 'block';
}
this.close = function()
{
if (this.container.style.display != 'none')
{
this.container.style.display = 'none';
}
}
}

10
docs/logic/main.js
View File

@ -4,16 +4,22 @@ function Main()
this.view = null; this.view = null;
this.add = null; this.add = null;
this.write = null; this.write = null;
this.theme = null;
this.lightbox = null;
this.queryCur = ''; this.queryCur = '';
this.queryPrev = ''; this.queryPrev = '';
this.queryPrevAdd = ''; this.queryPrevAdd = '';
this.theme = new Theme();
var parent = this; var parent = this;
const FILELOCATION = 'content/data.ndtl'; const FILELOCATION = 'content/data.ndtl';
this.install = function() this.install = function()
{ {
this.theme = new Theme();
this.theme.install(); this.theme.install();
this.lightbox = new Lightbox;
this.lightbox.install();
var oReq = new XMLHttpRequest(); var oReq = new XMLHttpRequest();
oReq.open('GET', FILELOCATION); oReq.open('GET', FILELOCATION);
@ -52,6 +58,8 @@ function Main()
this.load = function(target) this.load = function(target)
{ {
this.lightbox.close();
document.activeElement.blur(); document.activeElement.blur();
if (this.queryCur !== 'add') if (this.queryCur !== 'add')
{ {

12
docs/logic/view.js
View File

@ -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"; itemClass += " griditem-image";
onclickImage = `onclick="main.lightbox.load('content/media/${value.FILE}')" style="cursor: pointer;"`;
} }
let entry = ``; let entry = ``;
entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
// ITEM DIV // ITEM DIV
entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
if (this.isDefined(value.LINK)) if (this.isDefined(value.LINK))
{ {
var idUrl = "url"; var idUrl = "url";
@ -129,7 +131,7 @@ function View()
// UPPER CONTENT START // UPPER CONTENT START
if (SETTINGS.SHOWUPPER) if (SETTINGS.SHOWUPPER)
{ {
entry += `<div class="griditem-containerupper">`; entry += `<div class="griditem-containerupper" ${onclickImage}>`;
// TITLE // TITLE
if (SETTINGS.SHOWTITLE) if (SETTINGS.SHOWTITLE)
@ -176,7 +178,7 @@ function View()
// LOWER CONTENT START // LOWER CONTENT START
if (SETTINGS.SHOWLOWER) if (SETTINGS.SHOWLOWER)
{ {
entry += `<div class="griditem-containerlower">`; entry += `<div class="griditem-containerlower" ${onclickImage}>`;
// AUTHOR // AUTHOR
if (SETTINGS.SHOWAUTH && this.isDefined(value.AUTH)) if (SETTINGS.SHOWAUTH && this.isDefined(value.AUTH))
@ -245,7 +247,7 @@ function View()
&& this.isImage(value.FILE)) && this.isImage(value.FILE))
{ {
entry += `<div class="image">`; entry += `<div class="image">`;
entry += `<img class="griditem-img" src="content/media/${value.FILE}">`; entry += `<img class="griditem-img" src="content/media/${value.FILE}" onclick="main.lightbox.load('content/media/${value.FILE}')">`;
entry += `</div>`; entry += `</div>`;
} }