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

Update lightbox.

Browse Source
This commit is contained in:
kor 2018-11-03 01:57:28 +13:00
parent 6611033835
commit b85f13dc72
4 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html
View File

@ -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>

38
docs/logic/lightbox.js
View File

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

5
docs/logic/main.js
View File

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

4
docs/logic/view.js
View File

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