Commits

Raphaël BECK committed 4b71f25

History API ~working

Comments (0)

Files changed (10)

 #   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
 # </IfModule>
 
+# ----------------------------------------------------------------------
+# Dealing with History API
+# ----------------------------------------------------------------------
+
+#<IfModule mod_rewrite.c>
+#  RewriteCond %{HTTPS} !=on
+##  RewriteCond %{HTTP_HOST} ^(.+)[^*\.html]$ [NC]
+#  RewriteCond %{HTTP_HOST} ^adaptive\/(.+)[^(\.html)]$ [NC]
+#  RewriteRule ^ http://%{HTTP_HOST}/adaptive/ [R=301,L]
+#</IfModule>
+
+<ifModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} !index
+    RewriteRule (.*) /adaptive/index.html [L]
+</ifModule>
 
 
 # ----------------------------------------------------------------------
   background-color: #ffffff;
   padding-top: 4em; }
 
-.container,
-.navbar-fixed-top .container {
-  width: 940px; }
-
 .container {
   margin-right: auto;
   margin-left: auto;
+@media (min-width: 1140px) and (max-width:1200px) {
+  .container,
+  .navbar-fixed-top .container {
+    width: 1090px; }
+
+  .container .row article {
+    padding: 10px;
+    width: 320px;
+    float: left;
+    margin: 0.5em; }
+    .container .row article:after {
+      clear: both; }
+    .container .row article.column1 {
+      width: 96.5%; } }
 @media (min-width: 1200px) {
   .container,
   .navbar-fixed-top .container {

css/sass/common.scss

 
 .container,
 .navbar-fixed-top .container {
-  width: 940px;
+  //width: 940px;
 }
 
 .container {

css/sass/desktop.scss

 @import "constants";
 @import "functions";
 
+@media (min-width: 1140px) and (max-width:1200px){
+  .container,
+  .navbar-fixed-top .container {
+    width: 1090px;
+  }
+
+  .container {
+    .row{
+      article {
+        padding: 10px;
+        width: 320px;
+        float: left;
+        margin: 0.5em;
+
+        &:after {
+          clear: both;
+        }
+
+        &.column1{
+          width: 96.5%;
+        }
+      }
+    }
+  }
+}
+
 @media (min-width: 1200px) {
 
   .container,

css/sass/tablet.scss

 @import "constants";
 @import "functions";
 
-@media only screen and (min-width: 768px) {
-  //.nav-collapse.collapse {
-  //  height: auto !important;
-  //  overflow: visible !important;
-  //}
+span.expand{
+  display: inline;
+  visibility: visible;
 }
 
-//@media (max-width: 767px) {
-//  .navbar-fixed-top {
-//    margin-right: -20px;
-//    margin-left: -20px;
-//  }
-//
-//  .container {
-//    width: auto;
-//  }
-//}
+@media (min-width: 979px) and (max-width: 1140px) {
+  .container,
+  .navbar-fixed-top .container {
+    width: 940px;
+  }
+
+  .container {
+    .row{
+      article {
+        padding: 10px;
+        width: 279px;
+        float: left;
+        margin: 0.5em;
+
+        &:after {
+          clear: both;
+        }
+
+        &.column1{
+          width: 96.5%;
+        }
+      }
+    }
+  }
+
+}
 
 @media (min-width: 768px) and (max-width: 979px) {
   .container,
+span.expand {
+  display: inline;
+  visibility: visible; }
+
+@media (min-width: 979px) and (max-width: 1140px) {
+  .container,
+  .navbar-fixed-top .container {
+    width: 940px; }
+
+  .container .row article {
+    padding: 10px;
+    width: 279px;
+    float: left;
+    margin: 0.5em; }
+    .container .row article:after {
+      clear: both; }
+    .container .row article.column1 {
+      width: 96.5%; } }
 @media (min-width: 768px) and (max-width: 979px) {
   .container,
   .navbar-fixed-top .container {
 
   <div role="main" class="container">
     <div class="row">
-        <article class="tweet">
+        <article class="tweet" data-url="tweet_smashingmag">
             <header>
                 <div class="title">
                     <img src="https://si0.twimg.com/profile_images/2293774732/v0pgo4xpdd9rou2xq5h0_normal.png" title="Smashing magazine's logo" alt="Smashing magazine's logo" />
                 </ul>
             </footer>
         </article>
-        <article class="location">
+        <article class="location" data-url="location">
             <header>
                 <div class="title">
                     <div class="user">
                     <span class="expand">Ñ</span>
                 </div>
             </header>
-            <div class="corpse" id="map"></div>
+            <div class="corpse" id="map" data-min-height="300px"></div>
             <footer></footer>
         </article>
-        <article class="tweet">
+        <article class="tweet" data-url="tweet_csswg">
             <header>
                 <div class="title">
                     <img src="https://si0.twimg.com/profile_images/52124215/css_normal.png" alt="CSS Working Group" title="CSS Working Group">
                 </ul>
             </footer>
         </article>
-        <article class="column1 art-icle">
+        <article class="column1 art-icle" data-url="adaptive_images">
             <header>
                 <div class="title">
                     <h1>HTML5 adaptive images: end of round one </h1>
             </div>
             <footer></footer>
         </article>
-        <article class="column1 pictures" id="pictures">
+        <article class="column1 pictures" id="pictures" data-url="pictures">
             <header>
                 <div class="title">
                     <h1>Management of images</h1>
             </div>
             <footer></footer>
         </article>
-        <article class="storage">
+        <article class="storage" data-url="storage">
             <header>
                 <div class="title">
                     <h1>Local storage</h1>
             <div class="corpse">
                 <section class="userform">
                     <form>
-                        <label for="id_username">Your name:</label>
-                        <input type="text" placeholder="Enter your name" name="username" id="id_username"/>
-                        <button type="button" id="btn_save_username">Save</button>
+                        <label>Your name:</label>
+                        <input type="text" placeholder="Enter your name" name="username_input"/>
+                        <button type="button" name="btn_save_username">Save</button>
                     </form>
                 </section>
                 <section class="userdata">
             </div>
             <footer></footer>
         </article>
-        <article class="">
+        <article class="adaptations" data-url="adaptations">
             <header>
                 <div class="title">
                     <h1>Adaptations applied</h1>
     var f = new Features();
     Adaptive.registerModule(f);
 
+    /*Util for the demo*/
+    function tellAdaptation(msg){
+        $("article.adaptations .corpse").append($("<p>"+msg+"</p>"));
+    }
 
     //================= Registration of polyfills
 
 
     d.adaptation("mediaqueries_api", function(){
         debug("Adapt:mediaqueries_api");
+        $("article.adaptations .corpse").append($("<p>"+"Adapt:media queries API"+"</p>"));
+        tellAdaptation("Adapt:media queries API");
         Modernizr.load({
             test: !navigator.userAgent.match('MSIE 8.0'),
             nope: [
     d.adaptation("mq_mobile", function(){
         debug("Adapt:mq_mobile");
         //TODO: Load on demand Harvey
+        tellAdaptation("Adapt:media queries for mobile");
         Harvey.attach('only screen and (min-width: 320px)', {
             on: function(){
                 Modernizr.load("css/mobile.css");
 
     d.adaptation("mq_tablet", function(){
         debug("Adapt:mq_tablet");
+        tellAdaptation("Adapt:media queries for tablet");
         //TODO: Load on demand Harvey
         Harvey.attach('only screen and (min-width: 768px)', {
             on: function(){
 
     d.adaptation("mq_desktop", function(){
         debug("Adapt:mq_desktop");
+        tellAdaptation("Adapt:media queries for desktop");
         //TODO: Load on demand Harvey
         Harvey.attach('only screen and (min-width: 1140px)', {
             on: function(){
 
     f.adaptation("geolocation", function(w){
         console.log("Adapt:geolocation");
+        tellAdaptation("Adapt:geolocation");
         Modernizr.load({
             test: Modernizr.geolocation,
             nope: "http://j.maxmind.com/app/geoip.js",
     });
 
     f.adaptation("picturefill", function(w){
-        console.log("Adapt:picturefill");
+        tellAdaptation("Adapt:picturefill");
         Modernizr.load([
             {
                 test: !!window.matchMedia,
 
     f.detection("localStorage", function(){
         console.log("Detect:localStorage:"+(typeof window.localStorage == 'undefined'));
-        return (typeof window.localStorage == 'undefined');
+        return (typeof window.localStorage === 'undefined');
     });
 
     f.adaptation("localStorage", function(w){
         console.log("Adapt:localStorage");
+        tellAdaptation("Adapt:localStorage");
         Modernizr.load("js/libs/storage.js");
     });
 
+    f.detection("history", function(){
+        console.log("Detect:history:"+(typeof history.pushState === 'undefined'));
+        return (typeof history.pushState === 'undefined');
+    });
+
+    f.adaptation("history", function(w){
+        console.log("Adapt:history");
+        tellAdaptation("Adapt:history");
+        Modernizr.load(
+            {
+                test: (typeof(history.pushState) !== 'undefined'),//Could be false because already detected
+                nope: "js/libs/jquery.history.js",
+                complete: function(){
+                    window.history.pushState = History.pushState;
+                    window.history.replaceState = History.replaceState;
+                    console.log("History loaded");
+                }
+        });
+    });
+
 })(window);
 /*********************Mobile menu********************************/
 //Bind the menu for mobiles devices
-$('.btn-navbar.btn').click(function(){
+$('.btn-navbar.btn').live("click",function(){
     $('.nav-collapse').toggleClass('collapse');
 });
 
     );
 }
 
-function saveStoredUserData(){
-    var $usernameInput = $('#id_username');
+function saveStoredUserData($usernameInput){
     if($usernameInput.size() <= 0) return;
     var username = $usernameInput.val();
     if(username.length === 0){
     loadStoredUserData(username);
 }
 
-$('#btn_save_username').click(function(e){
-    saveStoredUserData();
+$("button[name='btn_save_username']").live("click", function(e){
+    saveStoredUserData($(this).parent().find("input[name='username_input']"));
 });
 
-$("#id_username").keydown(function(e){
-    if (event.which == 13) {
+$("input[name='username_input']").live("keydown", function(e){
+    if (e.which == 13) {
         e.preventDefault();
-        saveStoredUserData();
+        saveStoredUserData($(this));
         $(this).blur();
     }
 });
     loadStoredUserData(localStorage["Adaptive:username"]);
 }
 
+/*********************History API*******************************/
+//Put an article in "full screen"
+$(".icons .expand").live("click", function(e){
+    if($("#expandedArticle").size()>0){
+        $("#expandedArticle").remove();
+    }
+    var $article = $(this).parents('article');
+    var $mainContainer = $('.container[role=main]');
+    var width$mainContainer = $mainContainer.width();
+    var height$mainContainer = $mainContainer.height();
+    var offset$mainContainer = $mainContainer.offset();
+    var top$mainContainer = offset$mainContainer.top;
+    var left$mainContainer = offset$mainContainer.left;
+
+    var $expandedArticle = $article.clone(true);
+
+    $expandedArticle.css({
+        top: top$mainContainer,
+        left: left$mainContainer,
+        position: "absolute",
+        "z-index": 1000,
+        width: width$mainContainer,
+        "background-color": "white",
+        height: height$mainContainer
+    }).attr({id: "expandedArticle"});
+
+    $("article").hide();
+
+    //Should be generalised
+    var $corpse = $expandedArticle.find(".corpse");
+    $corpse.css("height", "auto");
+    var corpseExtraCssData = $corpse.data();
+    for(var cssKey in corpseExtraCssData){
+        $corpse.css(cssKey, corpseExtraCssData[cssKey]);
+    }
+    //END-Should be generalised
+
+    $expandedArticle.find(".icons .expand").die().text("Ö").addClass("close");
+    $expandedArticle.find(".icons .expand.close").click(function(evt){
+        $("#expandedArticle").remove();
+        $("article").show();
+        history.pushState(null, null, "/adaptive/");
+        return false;
+    });
+
+    $expandedArticle.appendTo($mainContainer);
+    history.pushState(null, null, $expandedArticle.data("url"));
+});
+
+//This part is hardcoded here which is not great but that's not the purpose of the demo
+function managesArticleExpansion(){
+    //History.emulated.pushState (==true for oldBrowsers)
+    var location = (typeof(History) !== 'undefined' && typeof(History.emulated) !== 'undefined' && History.emulated.pushState) ? document.location.hash : document.location.pathname;
+    var pathname = location.split('/');
+    var endPath = pathname.pop();
+    if(endPath.length === 0){
+        //Closing previous opened article if url is /
+        $(".icons span.close").click();
+    }
+    else if($(".icons span.close","[data-url='"+endPath+"']").size() == 0){
+        $(".icons span","[data-url='"+endPath+"']").click();
+    }
+}
+
+
+$(document).ready(function(){
+    history.replaceState(null, null, document.location.href);
+    managesArticleExpansion();
+});
+
+//window.addEventListener('popstate', function(event) {
+$(window).bind('popstate', function(event) {
+    console.log("popstate");
+    managesArticleExpansion();
+});
+
+
+/*********************Utils*******************************/
 /* Normalized hide address bar for iOS & Android (c) Scott Jehl, scottjehl.com MIT License */
 (function(a){var b=a.document;if(!location.hash&&a.addEventListener){window.scrollTo(0,1);var c=1,d=function(){return a.pageYOffset||b.compatMode==="CSS1Compat"&&b.documentElement.scrollTop||b.body.scrollTop||0},e=setInterval(function(){if(b.body){clearInterval(e);c=d();a.scrollTo(0,c===1?0:1)}},15);a.addEventListener("load",function(){setTimeout(function(){if(d()<20){a.scrollTo(0,c===1?0:1)}},0)})}})(this);
+