]> git.0d.be Git - panikweb.git/commitdiff
Implementing pushState solutions to keep music playing... done! It rocks :)
authorlaron <simon@surlaterre.org>
Fri, 23 Aug 2013 14:14:19 +0000 (16:14 +0200)
committerlaron <simon@surlaterre.org>
Fri, 23 Aug 2013 14:14:19 +0000 (16:14 +0200)
panikweb_templates/static/js/specifics.js
panikweb_templates/templates/base.html
panikweb_templates/templates/emissions/emission_detail.html
panikweb_templates/templates/emissions/newsitem_detail.html
panikweb_templates/templates/grid.html
panikweb_templates/templates/news.html
panikweb_templates/templates/program.html

index 3097543720dbc65efd31f715314bcc9891f599de..1cba26b0f3d7e273c7d2b1c4e802d49bb7924564 100644 (file)
@@ -1,38 +1,73 @@
-$(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();
 });
index 53514b6f73125ed362a2c67c1a68805ee662a417..379510b15e6cb8780ac716868ea3f31a7619b9a2 100644 (file)
 <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 %}
index bff383e493925def33313a7079ef4dd032fc035b..8da8642b61e08101effc2e8cd4de2d8e9f929f11 100644 (file)
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% block bodyID %}Emissions{% endblock %}
-{% block listen %}{% endblock %}
 {% block main %}
 <div class="emission padded">
        <div class="wrapper half">
index b9fa4ff7dac6de8af1469bedc3ec9fa4044726df..39df7d6c989432ecda43677c35a1f6b2bc811ac7 100644 (file)
@@ -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">
index 91636ff6aede987b6a2c80f5a02064ebaad9a29b..aea4c9c59927eb8bda0037ff93737f6f3c84b002 100644 (file)
@@ -2,7 +2,6 @@
 {% load paniktags %}
 
 {% block bodyID %}Grid{% endblock %}
-{% block listen %}{% endblock %}
 {% block title %}La grille{% endblock %}
 {% block nav %}
        <nav id="gridNav" class="">
index 8ac79ff0c77407b7858253fb1e214b39df723eb1..97541cb93f846e88cdae029c40a5d163b5b1914b 100644 (file)
@@ -1,5 +1,4 @@
 {% extends "base.html"%}
-{% block listen %}{% endblock %}
 {% block bodyID %}News{% endblock %}
 {% block title %}News{% endblock %}
 {% block nav %}
index 6aa1eabdfeafd90c409e051246d68593743d9dc1..0b908fa8610e87def313e01d89259f8392c41bcf 100644 (file)
@@ -1,7 +1,6 @@
 {% 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="">