166 lines
3.9 KiB
JavaScript
166 lines
3.9 KiB
JavaScript
openPerson = false
|
|
|
|
$(() => {
|
|
// Detect page URL
|
|
path = window.location.pathname.replace(/\//g, '')
|
|
if (path == 'jason' || path == 'flo' || path == 'lucy') {
|
|
// A specific path has been set. Display the profile for that person
|
|
openPerson = path
|
|
|
|
// CHANGE THE DISPLAY HERE FOR JASON / FLO
|
|
|
|
// Display content for the relevant person, and hide other content
|
|
$('.main.not' + openPerson).css({
|
|
width: 0,
|
|
height: 0,
|
|
minHeight: 0
|
|
})
|
|
|
|
$('#main-' + openPerson).css('min-height', '100vh')
|
|
|
|
$('#splash-' + openPerson).css({
|
|
width: '50vw',
|
|
height: '100vh'
|
|
})
|
|
|
|
// Animate the display of links
|
|
$('#links-' + openPerson).animate({
|
|
height: $('#links-' + openPerson).get(0).scrollHeight
|
|
}, {
|
|
duration: 300,
|
|
queue: true
|
|
})
|
|
}
|
|
|
|
// Handle clicks on profile links (by doing nothing)
|
|
$('a.openlink').click(function(e) {
|
|
e.preventDefault();
|
|
})
|
|
|
|
// Handle clicks on the banner
|
|
$('div.banner').click(function() {
|
|
if (typeof $(this).attr('data-person') == 'undefined') return;
|
|
|
|
// If no profile is open, open one...
|
|
if (!openPerson) {
|
|
openPerson = $(this).attr('data-person')
|
|
|
|
if (window.matchMedia('(orientation: portrait)').matches) {
|
|
// If we're opening in portrait mode...
|
|
$('.main.not' + openPerson).css({
|
|
height: '50vh',
|
|
minHeight: 0
|
|
})
|
|
|
|
$('.main.not' + openPerson).animate({
|
|
height: 0
|
|
}, {
|
|
duration: 300,
|
|
queue: false
|
|
})
|
|
|
|
$('#main-' + openPerson).animate({
|
|
minHeight: '100vh'
|
|
}, {
|
|
duration: 300,
|
|
queue: true,
|
|
complete: () => {
|
|
$('.main.not' + openPerson).css('width', 0)
|
|
$('#splash-' + openPerson).css({
|
|
width: '50vw',
|
|
height: '100vh'
|
|
})
|
|
}
|
|
})
|
|
|
|
} else {
|
|
// If we're opening in landscape mode...
|
|
$('#splash-' + openPerson).css('height', '100vh')
|
|
|
|
$('.main.not' + openPerson).animate({
|
|
width: 0
|
|
}, {
|
|
duration: 300,
|
|
queue: false
|
|
})
|
|
|
|
$('#splash-' + openPerson).animate({
|
|
width: '50vw'
|
|
}, {
|
|
duration: 300,
|
|
queue: true,
|
|
complete: () => {
|
|
$('.main.not' + openPerson).css({
|
|
height: 0,
|
|
minHeight: 0
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
// Display the links
|
|
setTimeout(() => {
|
|
$('#links-' + openPerson).animate({
|
|
height: $('#links-' + openPerson).get(0).scrollHeight
|
|
}, {
|
|
duration: 300,
|
|
queue: true
|
|
})
|
|
}, 300)
|
|
} else {
|
|
// If a profile is open, close it.
|
|
$('#links-' + openPerson).animate({
|
|
height: 0
|
|
}, {
|
|
duration: 300,
|
|
queue: true
|
|
})
|
|
|
|
if (window.matchMedia('(orientation: portrait)').matches) {
|
|
// If we're closing in portrait mode...
|
|
$('.main.not' + openPerson).css('width', '100vw')
|
|
|
|
$('#main-' + openPerson).animate({
|
|
minHeight: '50vh'
|
|
}, {
|
|
duration: 300,
|
|
queue: false
|
|
})
|
|
|
|
$('.main.not' + openPerson).animate({
|
|
height: '50vh'
|
|
}, {
|
|
duration: 300,
|
|
queue: false,
|
|
complete: () => {
|
|
$('.main, .splash').removeAttr('style')
|
|
openPerson = false
|
|
}
|
|
})
|
|
|
|
} else {
|
|
// If we're closing in landscape mode...
|
|
$('.main.not' + openPerson).css('height', '100vh')
|
|
|
|
$('#splash-' + openPerson).animate({
|
|
width: 0
|
|
}, {
|
|
duration: 300,
|
|
queue: false
|
|
})
|
|
|
|
$('.main.not' + openPerson).animate({
|
|
width: '50vw'
|
|
}, {
|
|
duration: 300,
|
|
queue: false,
|
|
complete: () => {
|
|
$('.main, .splash').removeAttr('style')
|
|
openPerson = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|