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') {
|
if (path == 'jason' || path == 'flo' || path == 'lucy') {
|
||||||
// A specific path has been set. Display the profile for that person
|
// A specific path has been set. Display the profile for that person
|
||||||
openPerson = path
|
openPerson = path
|
||||||
|
immediateOpen(openPerson)
|
||||||
// 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
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Listen for pop states
|
// Listen for pop states
|
||||||
window.onpopstate = function(event) {
|
window.onpopstate = function(event) {
|
||||||
path = window.location.pathname.replace(/\//g, '')
|
path = window.location.pathname.replace(/\//g, '')
|
||||||
//alert(path)
|
//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)
|
// Handle clicks on profile links (by doing nothing)
|
||||||
@ -43,132 +30,161 @@ $(() => {
|
|||||||
|
|
||||||
// Handle clicks on the banner
|
// Handle clicks on the banner
|
||||||
$('div.banner').click(function() {
|
$('div.banner').click(function() {
|
||||||
|
// If there's no person to open, do nothing
|
||||||
if (typeof $(this).attr('data-person') == 'undefined') return;
|
if (typeof $(this).attr('data-person') == 'undefined') return;
|
||||||
|
|
||||||
// If no profile is open, open one...
|
|
||||||
if (!openPerson) {
|
if (!openPerson) {
|
||||||
|
// If no profile is open, open one, and push a new page URL
|
||||||
openPerson = $(this).attr('data-person')
|
openPerson = $(this).attr('data-person')
|
||||||
|
animateOpen(openPerson)
|
||||||
if (window.matchMedia('(orientation: portrait)').matches) {
|
window.history.pushState({ id: "100" }, '', '/' + openPerson);
|
||||||
// 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)
|
|
||||||
} else {
|
} else {
|
||||||
// If a profile is open, close it.
|
// If a profile is open, close it, and push a new page URL
|
||||||
$('#links-' + openPerson).animate({
|
animateClose(openPerson)
|
||||||
height: 0
|
openPerson = false
|
||||||
}, {
|
|
||||||
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
|
|
||||||
window.history.pushState({ id: "100" }, '', '/');
|
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