Adding mechanism to handle URL state changes
This commit is contained in:
Jason Williams
parent
671e2d0d1a
commit
838ebbd06d
300
www/js/main.js
300
www/js/main.js
@ -6,34 +6,21 @@ $(() => {
|
||||
if (path == 'jason' || path == 'flo' || path == 'lucy') {
|
||||
// A specific path has been set. Display the profile for that person
|
||||
openPerson = path
|
||||
|
||||
// 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
|
||||
})
|
||||
immediateOpen(openPerson)
|
||||
}
|
||||
|
||||
// Listen for pop states
|
||||
window.onpopstate = function(event) {
|
||||
path = window.location.pathname.replace(/\//g, '')
|
||||
//alert(path)
|
||||
|
||||
if (path == '' && openPerson) {
|
||||
animateClose(openPerson)
|
||||
openPerson = false
|
||||
} else if (!openPerson && (path == 'jason' || path == 'flo')) {
|
||||
openPerson = path
|
||||
animateOpen(openPerson)
|
||||
}
|
||||
};
|
||||
|
||||
// Handle clicks on profile links (by doing nothing)
|
||||
@ -43,132 +30,161 @@ $(() => {
|
||||
|
||||
// Handle clicks on the banner
|
||||
$('div.banner').click(function() {
|
||||
// If there's no person to open, do nothing
|
||||
if (typeof $(this).attr('data-person') == 'undefined') return;
|
||||
|
||||
// If no profile is open, open one...
|
||||
if (!openPerson) {
|
||||
// If no profile is open, open one, and push a new page URL
|
||||
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 and change the page URL
|
||||
setTimeout(() => {
|
||||
$('#links-' + openPerson).animate({
|
||||
height: $('#links-' + openPerson).get(0).scrollHeight
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true
|
||||
})
|
||||
|
||||
window.history.pushState({ id: "100" }, '', '/' + openPerson);
|
||||
}, 300)
|
||||
animateOpen(openPerson)
|
||||
window.history.pushState({ id: "100" }, '', '/' + openPerson);
|
||||
} 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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Push a new page URL
|
||||
// If a profile is open, close it, and push a new page URL
|
||||
animateClose(openPerson)
|
||||
openPerson = false
|
||||
window.history.pushState({ id: "100" }, '', '/');
|
||||
}
|
||||
})
|
||||
|
||||
// Immediately open the content for a defined person, with only the display of links being animated
|
||||
function immediateOpen(p) {
|
||||
$('.main.not' + p).css({
|
||||
width: 0,
|
||||
height: 0,
|
||||
minHeight: 0
|
||||
})
|
||||
|
||||
$('#main-' + p).css('min-height', '100vh')
|
||||
|
||||
$('#splash-' + p).css({
|
||||
width: '50vw',
|
||||
height: '100vh'
|
||||
})
|
||||
|
||||
animateLinks(p)
|
||||
}
|
||||
|
||||
// Animate the opening of content for a defined person
|
||||
function animateOpen(p) {
|
||||
if (window.matchMedia('(orientation: portrait)').matches) {
|
||||
// If we're opening in portrait mode...
|
||||
$('.main.not' + p).css({
|
||||
height: '50vh',
|
||||
minHeight: 0
|
||||
})
|
||||
|
||||
$('.main.not' + p).animate({
|
||||
height: 0
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('#main-' + p).animate({
|
||||
minHeight: '100vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true,
|
||||
complete: () => {
|
||||
$('.main.not' + p).css('width', 0)
|
||||
$('#splash-' + p).css({
|
||||
width: '50vw',
|
||||
height: '100vh'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
// If we're opening in landscape mode...
|
||||
$('#splash-' + p).css('height', '100vh')
|
||||
|
||||
$('.main.not' + p).animate({
|
||||
width: 0
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('#splash-' + p).animate({
|
||||
width: '50vw'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true,
|
||||
complete: () => {
|
||||
$('.main.not' + p).css({
|
||||
height: 0,
|
||||
minHeight: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Display the links
|
||||
setTimeout(() => {
|
||||
animateLinks(p)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// Animate the closure of a defined person's profile
|
||||
function animateClose(p) {
|
||||
$('#links-' + p).animate({
|
||||
height: 0
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true
|
||||
})
|
||||
|
||||
if (window.matchMedia('(orientation: portrait)').matches) {
|
||||
// If we're closing in portrait mode...
|
||||
$('.main.not' + p).css('width', '100vw')
|
||||
|
||||
$('#main-' + p).animate({
|
||||
minHeight: '50vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('.main.not' + p).animate({
|
||||
height: '50vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false,
|
||||
complete: () => {
|
||||
$('.main, .splash').removeAttr('style')
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
// If we're closing in landscape mode...
|
||||
$('.main.not' + p).css('height', '100vh')
|
||||
|
||||
$('#splash-' + p).animate({
|
||||
width: 0
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('.main.not' + p).animate({
|
||||
width: '50vw'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false,
|
||||
complete: () => {
|
||||
$('.main, .splash').removeAttr('style')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Animate the display of links for a defined person
|
||||
function animateLinks(p) {
|
||||
$('#links-' + p).animate({
|
||||
height: $('#links-' + p).get(0).scrollHeight
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user