activated overlays, commented page.js

css/dist/main.css

@@ -60,8 +60,9 @@ html, body {
       z-index: 2; }
       #main .page .maps .map {
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
         cursor: pointer; }
+        #main .page .maps .map[debug="true"] {
+          background-color: rgba(0, 0, 250, 0.4); }
 
 #navigation {
   width: 455.04741mm;

css/main.scss

@@ -80,8 +80,10 @@ $navh:30mm;
       z-index: 2;
       .map{
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
         cursor: pointer;
+        &[debug="true"]{
+          background-color: rgba(0, 0, 250, 0.4);
+        }
       }
     }
 

index.html

@@ -45,7 +45,7 @@
 
     <script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
     <script src="bower_components/KeyboardJS/dist/keyboard.min.js" charset="utf-8"></script>
-    <script src="js/pages.json" charset="utf-8"></script>
+    <script src="js/pages.js" charset="utf-8"></script>
     <script src="js/dist/main.min.js" charset="utf-8"></script>
   </body>
 </html>

js/main.js

@@ -31,6 +31,7 @@ $(document).ready(function() {
     initRailway();
     initkeyboard();
     initPagination();
+    initHashNav();
     changePages();
   };
 
@@ -147,50 +148,40 @@ $(document).ready(function() {
     if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
       _current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
 
-      if (typeof _current_dp_ob[0].bg !== "undefined") {
-        var pl = _current_dp_ob[0];
-        // change display of main page left
-        _$page_left
-          .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
-          .removeClass(pageClassToRemove)
-          .addClass('page-'+pl.page);
-        // change pagination
-        _$pagi_l_txt.text(pl.page);
-      }else{
-        _$page_left.css({'background-image': "none"});
-        _$pagi_l_txt.text("");
-      }
-
-      if (typeof _current_dp_ob[1].bg !== "undefined") {
-        var pr = _current_dp_ob[1];
-        _$page_right
-          .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
-          .removeClass(pageClassToRemove)
-          .addClass('page-'+pr.page);
-        _$pagi_r_txt.text(pr.page);
-      }else{
-        _$page_right.css({'background-image': "none"});
-        _$pagi_r_txt.text("");
-      }
-
-      // hide or show nav arrows for first annd last double page
-      var i = _active_pages_keys.indexOf(_current_dp_key);
-      if( i == 0){
-        _$pagi_l_arrow.addClass('hidden');
-      }else{
-        _$pagi_l_arrow.removeClass('hidden')
-      }
-      if(i == _active_pages_keys.length-1){
-        _$pagi_r_arrow.addClass('hidden');
-      }else{
-        _$pagi_r_arrow.removeClass('hidden')
-      }
+      updatePagesDisplay();
+      updatePaginationDisplay();
+      updateRailwayDisplay();
+      updateHash();
+      updatePagesOverlays();
+    }
+  };
 
+  function updatePagesDisplay(){
+    if (typeof _current_dp_ob[0].bg !== "undefined") {
+      var pl = _current_dp_ob[0];
+      // change display of main page left
+      _$page_left
+        .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
+        .removeClass(pageClassToRemove)
+        .addClass('page-'+pl.page);
+      // change pagination
+      _$pagi_l_txt.text(pl.page);
+    }else{
+      _$page_left.css({'background-image': "none"});
+      _$pagi_l_txt.text("");
+    }
 
-      // make railway db thumb current
-      $('li.double-page-'+_current_dp_key).addClass('current');
+    if (typeof _current_dp_ob[1].bg !== "undefined") {
+      var pr = _current_dp_ob[1];
+      _$page_right
+        .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
+        .removeClass(pageClassToRemove)
+        .addClass('page-'+pr.page);
+      _$pagi_r_txt.text(pr.page);
+    }else{
+      _$page_right.css({'background-image': "none"});
+      _$pagi_r_txt.text("");
     }
-    // updatePagesOverlays();
   };
 
   function pageClassToRemove(){
@@ -199,40 +190,100 @@ $(document).ready(function() {
       return c[0];
   };
 
+  function updatePaginationDisplay(){
+    // hide or show nav arrows for first annd last double page
+    var i = _active_pages_keys.indexOf(_current_dp_key);
+    if( i == 0){
+      _$pagi_l_arrow.addClass('hidden');
+    }else{
+      _$pagi_l_arrow.removeClass('hidden')
+    }
+    if(i == _active_pages_keys.length-1){
+      _$pagi_r_arrow.addClass('hidden');
+    }else{
+      _$pagi_r_arrow.removeClass('hidden')
+    }
+  };
+
+  function updateRailwayDisplay(){
+    // make railway db thumb current
+    $('li.double-page-'+_current_dp_key).addClass('current');
+  };
+
+  //    ____                  __
+  //   / __ \_   _____  _____/ /___ ___  _______
+  //  / / / / | / / _ \/ ___/ / __ `/ / / / ___/
+  // / /_/ /| |/ /  __/ /  / / /_/ / /_/ (__  )
+  // \____/ |___/\___/_/  /_/\__,_/\__, /____/
+  //                              /____/
+
   function updatePagesOverlays(){
     console.log("updatePagesOverlays");
 
     // remove all pages overlays
-    $('.overlay, .maps',_$page_left).children().remove();
-    $('.overlay, .maps',_$page_right).children().remove();
-
-    console.log("Overlays", _ACTIVE_PAGES[_current_dp_key].overlays);
-    // build page_left overlays
-    for (var map in _ACTIVE_PAGES[_current_dp_key].overlays) {
-      if (_ACTIVE_PAGES[_current_dp_key].overlays.hasOwnProperty(map)) {
-        map = _ACTIVE_PAGES[_current_dp_key].overlays[map];
-        console.log("Map",map);
-        _$maps_left.append(
+    resetOverlays();
+
+    // loop through left and right pages from the current double page
+    var lr = 0,
+        p_ob,
+        $p,
+        map;
+    for(var i in _current_dp_ob){
+      p_ob = _current_dp_ob[i];
+      console.log("p_ob", p_ob);
+      // first left, then right
+      $p = lr == 0 ? _$maps_left : _$maps_right;
+      // loop through overlays from each page
+      for(var m in p_ob.overlays){
+        map = p_ob.overlays[m];
+        console.log('map', map);
+        $p.append(
           $('<div>')
             .addClass("map")
             .attr('overlay', map.over)
+            .attr('debug', map.debug)
             .css({
-              "left":map.x,
-              "top":map.y,
-              "width":map.w,
-              "height":map.h
+              "left":map.x+"mm",
+              "top":map.y+"mm",
+              "width":map.w+"mm",
+              "height":map.h+"mm"
             })
             .bind("mouseover", function(e){
               $(this)
                 .parents('.page').find('.overlay')
                   .css({
-                    // 'background-color':"red",
-                    'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
+                    'background-image':'url(images/overlays/'+$(this).attr('overlay')+')'
                   });
             })
+            .bind("mouseout", function(e){
+              $(this)
+                .parents('.page').find('.overlay')
+                  .css({'background-image':'none'});
+            })
         );
       }
+      lr++;
     }
+
+  };
+
+  function resetOverlays(){
+    $('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();
+  }
+  //     ___               __
+  //    /   |  ____  _____/ /_  ____  __________
+  //   / /| | / __ \/ ___/ __ \/ __ \/ ___/ ___/
+  //  / ___ |/ / / / /__/ / / / /_/ / /  (__  )
+  // /_/  |_/_/ /_/\___/_/ /_/\____/_/  /____/
+
+  function initHashNav(){
+    h = window.location.hash;
+    console.log('hash',h);
+    _current_dp_key = h.match(/^#(\d+)$/)[1];
+  }
+
+  function updateHash(){
+    window.location.hash = _current_dp_key;
   };
 
   //     __ __           __                         __

js/pages.json → js/pages.js

@@ -1,12 +1,12 @@
 var _ACTIVE_PAGES={
-  "0":[
-    {"active":false},
-    {
-      "page":0,
-      "bg":"00_1couv.jpeg",
-      "overlays":[]
-    }
-  ],
+  "0":[                         // debut de la première double page, numéro de la double page
+    {"active":false},           // page de gauche, inactive
+    {                           // debut de page de droite
+      "page":0,                 // numéro de la page
+      "bg":"00_1couv.jpeg",     // image a afficher pour cette page
+      "overlays":[]             // liset des zone interactive
+    }                           // fin de la page de droite
+  ],                            // fin de la double page
   "1":[
     {
       "page":1,
@@ -35,7 +35,16 @@ var _ACTIVE_PAGES={
     {
       "page":5,
       "bg":"04_chance.jpeg",
-      "overlays":[]
+      "overlays":[
+        {
+          "x":0,
+          "y":0,
+          "w":227,
+          "h":207,
+          "over":"04_chance-RB.svg",
+          "debug":false
+        }
+      ]
     },
     {
       "page":6,
@@ -55,17 +64,31 @@ var _ACTIVE_PAGES={
       "overlays":[]
     }
   ],
-  "5":[
-    {
-      "page":9,
-      "bg":"08_Brecht.jpeg",
-      "overlays":[
-        {"x":0,"y":0,"w":200,"h":200,"over":"04_chance-RB.svg"},
-        {"x":400,"y":400,"w":100,"h":100,"over":"04_chance-RB.svg"}
-      ]
-    },
-    {"active":false}
-  ],
+  "5":[                                  // debut de la double page 5
+    {                                    // debut de la page de gauche
+      "page":9,                          // numéro de la page
+      "bg":"08_Brecht.jpeg",             // image de la page
+      "overlays":[                       // debut de la liste des zone active
+        {                                //  debut de la zone active 1
+          "x":110,                       //    position x du coin supérieur gauche de la zone active (entre 0 et 200)
+          "y":25,                        //    position y du coin supérieur gauche  de la zone active (entre 0 et 200)
+          "w":103,                       //    largeur de la zone active
+          "h":70,                        //    hauteur de la zone active
+          "over":"09_indetermenacy.svg", //    image affiché au survol
+          "debug":false                  //    true: zone visible, false: zone invisible
+        },                               //  fin de la zone active 1
+        {                                //  début de la zone active 2
+          "x":112,                       //    position x
+          "y":133,                       //    position y
+          "w":105,                       //    largeur
+          "h":69,                        //    hauteur
+          "over":"09_composition.svg",   //    image au survol
+          "debug":true                   //    debug
+        }                                //  fin de la zone active 2
+      ]                                  // fin de la liste des zones actives
+    },                                   // fin de la page de gauche
+    {"active":false}                     // page de droite inactive
+  ],                                     // fin de la double page 5
   "7":[
     {
       "page":13,