From b85f13dc7256ac2120e566e188dd81dcfd3a6bc6 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Sat, 3 Nov 2018 01:57:28 +1300
Subject: [PATCH] Update lightbox.

---
 docs/index.html        |  4 ++++
 docs/logic/lightbox.js | 38 +++++++++++++++++++++++++++++++-------
 docs/logic/main.js     |  5 +----
 docs/logic/view.js     |  4 ++--
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index f2ec33b..b486bca 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,9 +37,13 @@
       document.querySelector('.error').style.display = 'inline-block';
     };
 
+    let lightbox = new Lightbox;
+    lightbox.install(document.querySelector('.lightbox'), 'lightbox');
+
     var main = new Main();
     main.install();
     main.start();
+
     document.querySelector('.loading-wave').style.display = 'none';
   </script>
 </body>
diff --git a/docs/logic/lightbox.js b/docs/logic/lightbox.js
index 5cba5af..02e0ac4 100644
--- a/docs/logic/lightbox.js
+++ b/docs/logic/lightbox.js
@@ -1,19 +1,26 @@
 function Lightbox()
 {
   this.container = null;
-  this.item = null;
+  this.img = null;
 
-  this.install = function()
+  this.install = function(container, prefix)
   {
-    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.container = container;
+    
+    let back = document.createElement('div');
+    back.className = prefix + '-back';
+    this.addEvent(back, 'click', function(){ lightbox.close(); });
+    this.container.appendChild(back);
+
+    this.img = document.createElement('img');
+    this.img.className = prefix + '-img';
+    this.addEvent(this.img, 'click', function(){ lightbox.close(); });
+    this.container.appendChild(this.img);
   }
 
   this.load = function(file)
   {
-  	this.item.innerHTML = `<img class="lightbox-img" src="${file}" onclick="main.lightbox.close()">`;
+    this.img.src = file;
   	this.container.style.display = 'block';
   }
 
@@ -24,4 +31,21 @@ function Lightbox()
   		this.container.style.display = 'none';
   	}
   }
+
+  this.handle = function(element, file)
+  {
+    this.addEvent(element, 'click', function(){ lightbox.load(file); });
+  }
+
+  this.addEvent = function(element, evnt, funct)
+  {
+    if (element.attachEvent)
+    {
+      return element.attachEvent('on'+evnt, funct);
+    }
+    else
+    {
+      return element.addEventListener(evnt, funct, false);
+    }
+  }
 }
\ No newline at end of file
diff --git a/docs/logic/main.js b/docs/logic/main.js
index bd5cb0b..3e7a324 100644
--- a/docs/logic/main.js
+++ b/docs/logic/main.js
@@ -4,7 +4,6 @@ function Main()
   this.view = null;
   this.add = null;
   this.write = null;
-  this.lightbox = null;
 
   this.queryCur = '';
   this.queryPrev = '';
@@ -22,8 +21,6 @@ function Main()
       document.querySelector('.container'),
       document.querySelector('main'),
       document.querySelector('.page-overlay'));
-    this.lightbox = new Lightbox;
-    this.lightbox.install(document.querySelector('.lightbox'), 'lightbox');
 
     if (window.showAdd !== undefined && window.showAdd)
     {
@@ -45,7 +42,7 @@ function Main()
 
   this.load = function(target)
   {
-    this.lightbox.close();
+    lightbox.close();
 
     document.activeElement.blur();
     if (this.queryCur !== 'add')
diff --git a/docs/logic/view.js b/docs/logic/view.js
index 4ec0335..524c7b5 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -249,7 +249,7 @@ function View()
         && this.isImage(value.FILE))
       {
         entry += `<div class="image">`;
-        entry += `<img class="griditem-img" src="content/media/${value.FILE}" onclick="main.lightbox.load('content/media/${value.FILE}')">`;
+        entry += `<img class="griditem-img" src="content/media/${value.FILE}" onclick="lightbox.load('content/media/${value.FILE}')">`;
         entry += `</div>`;
       }
 
@@ -382,7 +382,7 @@ function View()
       // 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}`);
+      lightbox.load(`content/media/${file}`);
     }
   }