mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Add simple lightbox.
This commit is contained in:
kor
parent
a6365270b9
commit
1971d336b6
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -17,8 +17,10 @@
|
||||
<script src="logic/view.js"></script>
|
||||
<script src="logic/main.js"></script>
|
||||
<script src="logic/add.js"></script>
|
||||
<script src="logic/lightbox.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="lightbox" id="lightbox"></div>
|
||||
<div class="page-overlay noselect" id="overlay"></div>
|
||||
<div class="menu" id="menu"></div>
|
||||
<div class="container" id="container">
|
||||
|
||||
27
docs/logic/lightbox.js
Normal file
27
docs/logic/lightbox.js
Normal 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';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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')
|
||||
{
|
||||
|
||||
@ -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 += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
|
||||
|
||||
// ITEM DIV
|
||||
entry += `<div class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
|
||||
if (this.isDefined(value.LINK))
|
||||
{
|
||||
var idUrl = "url";
|
||||
@ -129,7 +131,7 @@ function View()
|
||||
// UPPER CONTENT START
|
||||
if (SETTINGS.SHOWUPPER)
|
||||
{
|
||||
entry += `<div class="griditem-containerupper">`;
|
||||
entry += `<div class="griditem-containerupper" ${onclickImage}>`;
|
||||
|
||||
// TITLE
|
||||
if (SETTINGS.SHOWTITLE)
|
||||
@ -176,7 +178,7 @@ function View()
|
||||
// LOWER CONTENT START
|
||||
if (SETTINGS.SHOWLOWER)
|
||||
{
|
||||
entry += `<div class="griditem-containerlower">`;
|
||||
entry += `<div class="griditem-containerlower" ${onclickImage}>`;
|
||||
|
||||
// AUTHOR
|
||||
if (SETTINGS.SHOWAUTH && this.isDefined(value.AUTH))
|
||||
@ -245,7 +247,7 @@ function View()
|
||||
&& this.isImage(value.FILE))
|
||||
{
|
||||
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>`;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user