ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Docs pushstate for tabs

Browse Source
This commit is contained in:
Sam Potts
2016-01-17 10:39:05 +11:00
parent a277224ef4
commit d6b67c3388
2 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/src/js/docs.js
View File

@ -26,16 +26,48 @@ shr.setup({
// General functions
(function() {
var buttons = document.querySelectorAll('[data-source]');
var buttons = document.querySelectorAll('[data-source]'),
types = {
video: 0,
audio: 1,
youtube: 2,
vimeo: 3
},
currentType = window.location.hash.replace('#', ''),
historySupport = (window.history && window.history.pushState);
// Bind to each button
for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].addEventListener('click', newSource);
buttons[i].addEventListener('click', function() {
var type = this.getAttribute('data-source');
newSource(type);
if (historySupport) {
history.pushState({ 'type': type }, '', '#' + type);
}
});
}
/*window.addEventListener('popstate', function(event) {
console.log(event);
});*/
// List for backwards/forwards
window.addEventListener('popstate', function(event) {
if(event.state && 'type' in event.state) {
newSource(event.state.type);
}
});
// On load
if(historySupport) {
if(!currentType.length) {
currentType = 'video';
}
if(currentType in types) {
history.replaceState({ 'type': currentType }, '', '#' + currentType);
}
if(currentType != 'video') {
newSource(currentType);
}
}
function toggleClass(element, className, state) {
if (element) {
@ -50,10 +82,12 @@ shr.setup({
}
// Set a new source
function newSource() {
var trigger = this,
type = trigger.getAttribute('data-source'),
player = document.querySelector('.js-media-player').plyr;
function newSource(type) {
if(!(type in types)) {
return;
}
var player = document.querySelector('.js-media-player').plyr;
switch(type) {
case 'video':
@ -117,15 +151,13 @@ shr.setup({
break;
}
/*if (window.history && window.history.pushState) {
history.pushState({ 'type': type }, '', '#' + type);
}*/
currentType = type;
for (var x = buttons.length - 1; x >= 0; x--) {
toggleClass(buttons[x].parentElement, 'active', false);
}
toggleClass((event.target || event.srcElement).parentElement, 'active', true);
toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
}
})();