-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.js
111 lines (107 loc) · 5.01 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
$.fn.extend({
animateCss: function(animationName, callback) {
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if (typeof callback === 'function') callback();
});
return this;
},
}); // Copied from: https://github.com/daneden/animate.css=
function shuffle(array) {
let counter = array.length
while (counter > 0) {
let index = Math.floor(Math.random() * counter)
counter--
let temp = array[counter]
array[counter] = array[index]
array[index] = temp
}
return array;
}
$(function() {
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
if(index === 1 && direction === 'down') {
$('#menu').css('bottom', '50vh')
}
if(nextIndex === 1 && direction === 'up') {
$('#menu').css('bottom', '-50vh')
}
$('.slide-indicator-'+index+'>i').removeClass('fas').addClass('far')
$('.slide-indicator-'+nextIndex+'>i').removeClass('far').addClass('fas')
if(index === 4) {
var animationDirection = direction === 'down' ? 'Up' : 'Down'
$('#project-modal').animateCss('fadeOut'+animationDirection, function(e) {
$('#project-modal').css('display', 'none')
})
}
}
});
var projectsHtml = projects.slice(0, 5).map(function(i) {
return ('<div class="project"><div class="details"><div class="icons">'
+ i.technology.map(function (s) { return '<i class="fab fa-4x fa-'+s+'"></i>' }).join('') +
'</div><div class="texts"><span class="title">' + i.name +
'</span> <span banner="' + i.banner + '">' + i.description.slice(0, 100) + '</span></div></div>' +
(i.github ? '<a class="link" href="' + i.github + '"><i class="fab fa-4x fa-github"></i></a></div>' : '</div>'))
}).join('')
$('.section.projects > .fp-tableCell').prepend(projectsHtml)
$('.project > .details').on('click', function(e) {
$('#project-modal > .name').text($(this).find('.texts > .title').text())
$('#project-modal > .icons > a').attr('href', $(this).parent().find('a.link').attr('href'))
$('#project-modal > .details').text($(this).find('.texts > span:not(.title)').text())
if($(this).find('.texts > span:not(.title)').attr('banner'))
$('#project-modal').css('background-image', $(this).find('.texts > span:not(.title)').attr('banner'))
$('#project-modal').animateCss('fadeIn')
$('#project-modal').css('display', 'flex')
})
$('#project-modal > .icons > .fa-times').on('click', function(e) {
$('#project-modal').animateCss('fadeOut', function(e) {
$('#project-modal').css('display', 'none')
})
})
var chunkedMembers = []
var shuffledMembers = shuffle(members)
while (shuffledMembers.length > 0)
chunkedMembers.push(shuffledMembers.splice(0, 3))
var resultHtml = chunkedMembers.map(function(m) {
var a = '<div class="carousel-item">' + m.map(function(i) {
var socials = Object.keys(i.social).map(function(item) {
// <a href="$social.value"><i class="fab $social.key"></i></a>
var faType = 'fab'
if(item.slice(0, 1) === '_') {
faType = 'fas'
item = item.slice(1)
}
return '<a href="' + i.social[item] + '"><i class="'+ faType + ' fa-'+item+'"></i></a>'
}).join('')
console.log(socials)
var html = ('<div class="member-card" style="border: 3px solid ' + i.color + ';"> <img src="' + i.images.banner
+ '" class="member-banner"> <img src="' + i.images.profile + '" class="member-avatar"> <h3 class="member-name">' + i.nickname
+ '</h3> <p class="member-position">' + i.position + '</p><p class="member-about">' + i.about + '</p><div class="member-link">'
+ socials + '</div><div class="member-card-shadow" style="background-color: ' + i.color + ';"></div></div>')
return html;
}) + '</div>'
console.log(a)
return a
}).join('')
console.log(resultHtml)
$('.section:nth-child(3) .fp-tableCell > .carousel-inner').append(resultHtml)
$('.carousel-item:first-child').addClass('active')
$('#members-carousel').carousel({
interval: 0
})
});