-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
executable file
·132 lines (102 loc) · 3.72 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
//Globals
let currentObj = 0;
let currentTab = 'portfolio';
//initialisation
window.addEventListener("DOMContentLoaded", function(event) {
var title = document.getElementById("title");
var lee = document.querySelector("#title > h1");
Object.assign(title.style, {transform: "translate(0px, 0px)"});
// Object.assign(lee.style, {marginBottom: "10px"}); //this line motherfucking breaks chrome FUCKIN HOW
});
//create grid
var gridEle = document.getElementById('grid');
var brickFrag = document.createDocumentFragment();
photoData.forEach(function(photoObj){
var brick = document.createElement('div');
brick.className = 'brick ' + photoObj.classes;
Object.assign(brick.style, {backgroundImage: 'url("' + photoObj.imgUrl + '")'});
brickFrag.appendChild(brick);
brick.onclick = () => {
showImage(photoObj);
}
});
gridEle.appendChild(brickFrag);
$(function() {
var wall = new freewall("#grid");
wall.reset({
selector: '.brick',
animate: true,
onResize: function() {
wall.fitWidth();
}
})
wall.fitWidth();
$(window).trigger("resize");
});
//Full image view
function showImage(photoObj) {
currentObj = photoData.indexOf(photoObj);
console.log(currentObj)
const overlay = document.getElementById('imageOverlay');
overlay.style.display = 'initial';
const image = document.getElementById('fullImage');
image.src = photoObj.imgUrl;
const title = document.querySelector('#descArea > h1');
title.textContent = photoObj.title;
const date = document.querySelector('#descArea > h3');
date.textContent = photoObj.date;
const desc = document.querySelector('#descArea > p');
desc.textContent = photoObj.description;
}
document.getElementById('imageClose').onclick = () => {
const overlay = document.getElementById('imageOverlay');
overlay.style.display = 'none';
}
document.getElementById('imgLeft').onclick = () => {
let index = currentObj === 0 ? (photoData.length - 1) : (currentObj - 1);
showImage(photoData[index]);
}
document.getElementById('imgRight').onclick = () => {
let index = currentObj === (photoData.length - 1) ? 0 : (currentObj + 1);
showImage(photoData[index]);
}
//Tab toggle
function selectTab(tab) {
const portGrid = document.getElementById('grid');
const portLine = document.querySelector('#portfolioMenu > div');
const about = document.getElementById('about');
const aboutLine = document.querySelector('#aboutMenu > div')
const contact = document.getElementById('contact');
const contactLine = document.querySelector('#contactMenu > div');
if (tab === 'portfolio') {
portGrid.style.display = 'initial';
about.style.display = 'none';
contact.style.display = 'none';
portLine.className = 'menuBar menuSelected';
aboutLine.className = 'menuBar';
contactLine.className = 'menuBar';
} else if (tab === 'about') {
portGrid.style.display = 'none';
about.style.display = 'initial';
contact.style.display = 'none';
portLine.className = 'menuBar';
aboutLine.className = 'menuBar menuSelected';
contactLine.className = 'menuBar';
} else if (tab === 'contact') {
portGrid.style.display = 'none';
about.style.display = 'none';
contact.style.display = 'initial';
portLine.className = 'menuBar';
aboutLine.className = 'menuBar';
contactLine.className = 'menuBar menuSelected';
}
}
document.getElementById('aboutMenu').onclick = () => {
selectTab('about');
}
document.getElementById('portfolioMenu').onclick = () => {
selectTab('portfolio');
}
document.getElementById('contactMenu').onclick = () => {
selectTab('contact');
}