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

Improve lightbox opening and closing triggers.

Browse Source
This commit is contained in:
kor 2018-10-31 03:38:55 +13:00
parent 1971d336b6
commit 0d2006f5eb
3 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/asset/style.css
View File

@ -502,9 +502,6 @@ body {
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 {
@ -518,6 +515,7 @@ body {
.lightbox-img {
max-height: 100vh;
max-width: 100vw;
cursor: pointer;
}

2
docs/logic/lightbox.js
View File

@ -13,7 +13,7 @@ function Lightbox()
this.load = function(file)
{
this.item.innerHTML = `<img class="lightbox-img" src="${file}">`;
this.item.innerHTML = `<img class="lightbox-img" src="${file}" onclick="main.lightbox.close()">`;
this.container.style.display = 'block';
}

16
docs/logic/view.js
View File

@ -105,7 +105,8 @@ function View()
if (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image'))
{
itemClass += " griditem-image";
onclickImage = `onclick="main.lightbox.load('content/media/${value.FILE}')" style="cursor: pointer;"`;
onclickImage = `onclick="main.view.handleImageClick(event, this, '${value.FILE}');"
style="cursor: pointer;"`;
}
let entry = ``;
@ -369,6 +370,19 @@ function View()
this.menu.innerHTML = menuContent;
}
this.handleImageClick = function(e, element, file)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target == element)
{
// If user is clicking given element, or element's background...
// as opposed to an element's child content, then do lightbox.
// This stops lightbox from happening when clicking on tags, file etc
main.lightbox.load(`content/media/${file}`);
}
}
this.doMultilineFormatting = function(data, className, iconName)
{
let result = '';