From 0d2006f5eb6b47c9ba7a9e3441d95c55018bf230 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Wed, 31 Oct 2018 03:38:55 +1300
Subject: [PATCH] Improve lightbox opening and closing triggers.

---
 docs/asset/style.css   |  4 +---
 docs/logic/lightbox.js |  2 +-
 docs/logic/view.js     | 16 +++++++++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/docs/asset/style.css b/docs/asset/style.css
index 2710751..82eefd5 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -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;
 }
 
 
diff --git a/docs/logic/lightbox.js b/docs/logic/lightbox.js
index b87ea50..5cba5af 100644
--- a/docs/logic/lightbox.js
+++ b/docs/logic/lightbox.js
@@ -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';
   }
 
diff --git a/docs/logic/view.js b/docs/logic/view.js
index b3bfbb5..17470b4 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -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 = '';