Skip to content
GitLab
Commit e7865db6 authored by Simon Daron's avatar Simon Daron
Browse files

Implementing pushState solutions to keep music playing... done! It rocks :)

parent 373bd618
Hide whitespace changes
Inline Side-by-side
panikweb_templates/static/js/specifics.js
View file @ e7865db6
$(function() {
$(".tabs").each(function() {
var self = $(this);
var about= $($(this).attr("data-tab-about"));
about.find("[data-tabbed]:not(:first)").hide();
$(this).find("[data-tab]:first").addClass("active");
$(this).find("[data-tab]").each(function() {
$(this).click(function (e) {
e.preventDefault();
self.find(".active").removeClass("active");
$(this).addClass("active");
about.find("[data-tabbed]").hide();
$($(this).attr("data-tab")).fadeIn();
});
});
$(function() {
var $main = $("#Changing");
String.prototype.decodeHTML = function() {
return $("<div>", {html: "" + this}).html();
};
afterLoad = function(html) {
document.title = html.match(/<title>(.*?)<\/title>/)[1].trim().decodeHTML();
/*
Quite UGLY but needed for styling the whole body with ID
Feel free to correct and find a better way
According to this link the probles is that $(html).filter('body').Attr('id') will not work!
http://www.devnetwork.net/viewtopic.php?f=13&t=117065
*/
var bodyID = html.match(/<body id="(.*?)">/)[1].trim();
$('body').attr('id',bodyID);
init();
};
$(window).on("popstate", function(e) {
if (e.originalEvent.state !== null) {loadPage(location.href);}
});
$("[data-audio-control]").each(function() {
var playPauseButton = $(this).find('.playpause');
var audio = $('#'+$(this).attr('data-audio'));
var audioElement = audio[0];
//alert($(this).attr('data-audio'));
playPauseButton.on('click',function(e){
if (audioElement.paused == false) {
audioElement.pause();
} else {
audioElement.play();
}
loadPage = function(href) {
history.pushState({}, '', href);
$main.load(href + " #Changing>*", null, afterLoad);
};
init = function() {
$("a, area").unbind('click').on('click',function() {
var href = $(this).attr("href");
if (href.indexOf(document.domain) > -1 || href.indexOf(':') === -1) {
loadPage(href);
return false;
}
});
// Bind back event in case of direct control
audio.on('play',function(){
playPauseButton.addClass('icon-pause').removeClass('icon-play');
}).on('pause',function(){
playPauseButton.addClass('icon-play').removeClass('icon-pause');
$(".tabs").each(function() {
var self = $(this);
var about= $($(this).attr("data-tab-about"));
about.find("[data-tabbed]:not(:first)").hide();
$(this).find("[data-tab]:first").addClass("active");
$(this).find("[data-tab]").each(function() {
$(this).click(function (e) {
e.preventDefault();
self.find(".active").removeClass("active");
$(this).addClass("active");
about.find("[data-tabbed]").hide();
$($(this).attr("data-tab")).fadeIn();
});
});
});
$("[data-audio-control]").each(function() {
var playPauseButton = $(this).find('.playpause');
var audio = $('#'+$(this).attr('data-audio'));
var audioElement = audio[0];
//alert($(this).attr('data-audio'));
playPauseButton.on('click',function(e){
if (audioElement.paused == false) {
audioElement.pause();
} else {
audioElement.play();
}
});
// Bind back event in case of direct control
audio.on('play',function(){
playPauseButton.addClass('icon-pause').removeClass('icon-play');
}).on('pause',function(){
playPauseButton.addClass('icon-play').removeClass('icon-pause');
});
});
});
}
init();
});
panikweb_templates/templates/base.html
View file @ e7865db6
......@@ -25,13 +25,16 @@
<body id="{% block bodyID %}{% endblock %}">
{% block meta %}<div id="metaNav-container">{% include "includes/metaNav.html" %}</div>{% endblock %}
<div id="All">
<div id="Commons">
<div id="Panik">
{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}
</div>
<div id="Listen">
{% block listen %}{% include "includes/player.html" %}{% endblock %}
</div>
</div>
<div id="Changing">
<div id="Nav">
<div class="wrapper">
{% block nav %}{% endblock %}
......@@ -45,7 +48,6 @@
{% block links %}{% endblock %}
</div>
</div>
</div>
{% block pageend %}
......
panikweb_templates/templates/emissions/emission_detail.html
View file @ e7865db6
{% extends "base.html" %}
{% block bodyID %}Emissions{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div class="emission padded">
<div class="wrapper half">
......
panikweb_templates/templates/emissions/newsitem_detail.html
View file @ e7865db6
......@@ -2,7 +2,6 @@
{% extends "news.html" %}
{% load thumbnails %}
{% block bodyID %}News{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div class="news detail padded">
<div class="wrapper half">
......
panikweb_templates/templates/grid.html
View file @ e7865db6
......@@ -2,7 +2,6 @@
{% load paniktags %}
{% block bodyID %}Grid{% endblock %}
{% block listen %}{% endblock %}
{% block title %}La grille{% endblock %}
{% block nav %}
<nav id="gridNav" class="">
......
panikweb_templates/templates/news.html
View file @ e7865db6
{% extends "base.html"%}
{% block listen %}{% endblock %}
{% block bodyID %}News{% endblock %}
{% block title %}News{% endblock %}
{% block nav %}
......
panikweb_templates/templates/program.html
View file @ e7865db6
{% extends "base.html" %}
{% block bodyID %}Program{% endblock %}
{% block title %}Programme{% endblock %}
{% block listen %}{% endblock %}
{% block nav %}
<div class="program tabs" data-tab-about="#ProgramContent">
<nav class="">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment