Update lightbox.

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>

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 = container;
-    this.container.innerHTML += `<div class="lightbox-back" onclick="main.lightbox.close()"></div>`;
+    
-    this.container.innerHTML += `<div id="lightbox-item" class="lightbox-item"></div>`;
+    let back = document.createElement('div');
-    this.item = document.getElementById("lightbox-item");
+    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);
+    }
+  }
 }

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')

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}`);
     }
   }