added internal links on click on maps

css/dist/main.css

@@ -4,32 +4,38 @@ html, body {
   background-color: #1A1A1A; }
 
 #root {
-  height: 207.26mm;
-  margin: 0 auto;
   position: relative;
-  width: 475.04741mm; }
+  width: 469.51646mm;
+  height: 237.26mm;
+  margin: 0 auto;
+  letter-spacing: -.25em; }
+  #root > * {
+    letter-spacing: normal; }
 
 #header {
-  display: absolute;
+  display: inline-block;
-  top: 0;
+  width: 9mm;
-  left: 0;
+  height: 207.26mm;
-  width: 15mm;
+  margin-right: 5mm;
-  height: 100%;
+  background-color: black;
-  background-color: white; }
+  background-image: url("../../images/dos.jpg");
+  background-size: contain;
+  background-repeat: no-repeat; }
   #header h1 {
-    margin: 0;
+    font-size: 1em;
+    margin: 0 0 15mm 0;
     padding: 0.3em;
     position: absolute;
     bottom: 0;
     left: 0;
     transform-origin: 0% 0%;
-    transform: rotate(270deg); }
+    transform: rotate(270deg);
+    visibility: hidden; }
 
 #main {
-  position: absolute;
+  display: inline-block;
-  top: 0;
+  width: 455.04741mm;
-  right: 0;
+  overflow: hidden; }
-  width: 455.04741mm; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -59,59 +65,85 @@ html, body {
       z-index: 2; }
       #main .page .maps .map {
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
+        z-index: 3;
         cursor: pointer; }
-    #main .page.page-6 .overlay {
+        #main .page .maps .map[debug="true"] {
-      background-image: url("../../images/vectos/04_chance-RB.svg"); }
+          background-color: rgba(0, 0, 250, 0.4); }
-  #main #navigation {
+      #main .page .maps .repere {
-    position: absolute;
+        position: absolute;
-    z-index: 3;
-    bottom: 0;
-    width: 100%;
-    padding: 2mm 0;
-    background-color: rgba(26, 26, 26, 0.7);
-    overflow: hidden;
-    text-align: center;
-    opacity: 0;
-    transition: opacity .3s ease-in-out; }
-    #main #navigation:hover {
-      opacity: 1; }
-  #main #pagination {
-    color: #fff;
-    font-size: 1em;
-    padding: 0 0 2mm 0; }
-    #main #pagination div {
-      display: inline-block;
-      width: 49%; }
-      #main #pagination div.wrapper-l {
-        left: 0;
-        text-align: left; }
-      #main #pagination div.wrapper-r {
-        right: 0;
-        text-align: right; }
-      #main #pagination div span.l {
         cursor: pointer;
-        line-height: -1; }
+        background-size: contain;
-  #main #railway ul {
+        background-repeat: no-repeat;
-    padding: 1mm;
+        background-position: center;
-    margin: 0; }
+        z-index: 2; }
-    #main #railway ul li {
+
+#navigation {
+  width: 455.04741mm;
+  height: 30mm;
+  overflow: hidden;
+  margin: 0 0 0 14mm;
+  padding: 0;
+  background-color: rgba(26, 26, 26, 0.7);
+  text-align: center;
+  transition: opacity .3s ease-in-out; }
+
+#pagination {
+  color: #fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out; }
+  #pagination > * {
+    letter-spacing: normal; }
+  #pagination div {
+    display: inline-block;
+    width: 49.9%; }
+    #pagination div span.p {
       display: inline-block;
       vertical-align: middle;
+      min-width: 3em;
+      text-align: center; }
+    #pagination div span.l {
+      cursor: pointer;
+      line-height: -1em; }
+      #pagination div span.l.hidden {
+        visibility: hidden; }
+    #pagination div.wrapper-l {
+      left: 0;
+      text-align: right; }
+    #pagination div.wrapper-r {
+      right: 0;
+      text-align: left;
+      border-left: 1px solid white; }
+  #pagination:hover {
+    opacity: 1; }
+
+#railway ul {
+  padding: 1mm 0;
+  margin: 0;
+  text-align: justify;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+  #railway ul li {
+    list-style: none;
+    opacity: 0.2;
+    transition: opacity 0.3s ease-in-out; }
+    #railway ul li.current, #railway ul li.active:hover {
+      opacity: 1; }
+    #railway ul li span {
+      display: inline-block;
       background-color: white;
       width: 1mm;
       height: 7mm;
-      margin-left: 0.5mm;
       background-position: center;
-      background-size: cover;
+      background-size: cover; }
-      opacity: 0.2;
+      #railway ul li span.active {
-      transition: opacity 0.3s ease-in-out; }
-      #main #railway ul li.active {
         width: 7mm;
         cursor: pointer; }
-      #main #railway ul li.page-right {
+  #railway ul:hover li {
-        margin-right: 1mm; }
+    opacity: 1; }
-      #main #railway ul li.current, #main #railway ul li.active:hover {
-        opacity: 1; }
-    #main #railway ul:hover li {
-      opacity: 1; }

css/main.scss

@@ -3,42 +3,51 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:false;
+$tranche_w:9mm;
-$tranchew:15mm;
+$tranche_mr:5mm;
-$pw:227.41mm;
+$p_w:227.41mm;
-$ph:207.26mm;
+$p_h:207.26mm;
-$mt:1cm;
+$main_w:2.001*$p_w;
-$mb:1cm;
+$navh:30mm;
-$me:1cm;
+// $mt:1cm;
-$mi:1cm;
+// $mb:1cm;
+// $me:1cm;
+// $mi:1cm;
 
 #root{
-  height:$ph;
-  margin:0 auto;
   position: relative;
-  width:$tranchew+5+2.001*$pw;
+  width:($tranche_w+$tranche_mr+$main_w)*1.001;
+  height:$p_h+$navh;
+  margin:0 auto;
+  letter-spacing:-.25em;
+  &>*{letter-spacing: normal;}
 }
 
 #header{
-  display: absolute;
+  display: inline-block;
-  top: 0; left:0;
+  width: $tranche_w; height: $p_h;
-  width: $tranchew; height: 100%;
+  margin-right:$tranche_mr;
-  background-color: white;
+  background-color: black;
+  background-image: url('../../images/dos.jpg');
+  background-size: contain;
+  background-repeat: no-repeat;
 
   h1{
-    margin: 0; padding:0.3em;
+    font-size: 1em;
+    margin: 0 0 15mm 0; padding:0.3em;
     position: absolute;
     bottom:0; left:0;
     transform-origin: 0% 0%;
     transform: rotate(270deg);
+    visibility: hidden;
   }
 }
 
 #main{
-  position: absolute;
+  display: inline-block;
-  top:0; right:0;
+  width:$main_w;
-  width:2.001*$pw;
+  overflow: hidden;
-
+  // background-color: magenta;
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -53,11 +62,8 @@ $mi:1cm;
   }
   .page{
     position: relative;
-    @if $debug {
+    width:$p_w;
-      background-color: green;
+    height:$p_h;
-    }
-    width:$pw;
-    height:$ph;
 
     background-repeat: no-repeat;
     background-size: contain;
@@ -69,11 +75,6 @@ $mi:1cm;
       background-repeat: no-repeat;
       background-size: contain;
       z-index: 1;
-
-      @if $debug {
-        border: 1px solid blue;
-      }
-
       // img{max-width: 100%;}
     }
 
@@ -84,69 +85,112 @@ $mi:1cm;
       z-index: 2;
       .map{
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
+        z-index: 3;
         cursor: pointer;
+        &[debug="true"]{
+          background-color: rgba(0, 0, 250, 0.4);
+        }
+      }
+      .repere{
+        position: absolute;
+        cursor: pointer;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        z-index: 2;
       }
     }
 
-    &.page-6 .overlay{
-      background-image: url("../../images/vectos/04_chance-RB.svg")
-    }
   }
 
-  #navigation{
+}
-    position:absolute; z-index: 3;
-    bottom:0; width:100%; // height:2cm;
-    padding:2mm 0;
-    background-color: rgba(26, 26, 26, 0.7);
-    overflow: hidden;
-    text-align: center;
-    opacity: 0;
-    transition: opacity .3s ease-in-out;
-    &:hover{opacity: 1;}
-  }
 
-  #pagination{
+#navigation{
-    color:#fff;
+  width:$main_w;
-    font-size: 1em;
+  height:$navh;
-    padding: 0 0 2mm 0;
+  overflow: hidden;
-    div{
+  $ml:$tranche_w + $tranche_mr;
+  margin:0 0 0 $ml;
+  padding:0;
+  background-color: rgba(26, 26, 26, 0.7);
+  // background-color: green;
+  text-align: center;
+  // opacity: 0;
+  transition: opacity .3s ease-in-out;
+  // &:hover{opacity: 1;}
+}
+
+#pagination{
+  color:#fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  &>*{letter-spacing: normal;}
+
+  div{
+    display: inline-block;
+    width:49.9%;
+    span.p{
       display: inline-block;
-      width:49%;
+      vertical-align: middle;
-      &.wrapper-l{left:0; text-align: left;}
+      min-width: 3em;
-      &.wrapper-r{right:0; text-align: right;}
+      text-align: center;
-      span.p{
-
-      }
-      span.l{
-        cursor: pointer;
-        line-height: -1;
-      }
     }
+    span.l{
+      cursor: pointer;
+      line-height: -1em;
+      &.hidden{visibility: hidden;}
+    }
+
+    &.wrapper-l{
+      left:0; text-align: right;
+      // span.p{text-align: left;}
+    }
+    &.wrapper-r{
+      right:0; text-align: left; border-left: 1px solid white;
+      // span.p{text-align: right;}
+    }
+
   }
 
-  #railway{
+  opacity: 0.3;
-    ul{
+  transition: opacity .3s ease-in-out;
-      padding:1mm; margin:0;
+  &:hover{opacity: 1;}
-      li{
+}
-        display: inline-block; vertical-align: middle;
+
+#railway{
+  // background-color: blue;
+  ul{
+    padding:1mm 0; margin:0;
+    text-align: justify;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    li{
+      // display: inline-block; vertical-align: middle;
+      // display:
+      list-style: none;
+
+      opacity:0.2;
+      transition: opacity 0.3s ease-in-out;
+      &.current, &.active:hover{opacity: 1;}
+
+      span{
+        display: inline-block;
         background-color: white;
         width:1mm; height:7mm;
-        margin-left: 0.5mm;
+        // margin-left: 0.5mm;
         background-position: center;
         background-size: cover;
         &.active{
           width:7mm; cursor: pointer;
         }
         &.page-right{
-          margin-right: 1mm;
+          // margin-right: 1mm;
         }
-        opacity:0.2;
-        transition: opacity 0.3s ease-in-out;
-        &.current, &.active:hover{opacity: 1;}
       }
-      &:hover li{opacity: 1;}
     }
+    &:hover li{opacity: 1;}
   }
-
 }

images/reperes/repere-test.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18mm"
+   height="18mm"
+   viewBox="0 0 18 18"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+   sodipodi:docname="repere-test.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="43.225594"
+     inkscape:cy="76.823299"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1145"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-279)">
+    <circle
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fd0000;stroke-width:1.20000005;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path4504"
+       cx="9.0871649"
+       cy="288.18011"
+       r="7.6387181" />
+  </g>
+</svg>

index.html

@@ -22,30 +22,31 @@
           <div class="overlay"></div>
           <div class="maps"></div>
         </section>
-        <nav id="navigation">
-          <div id="pagination">
-            <div class="wrapper-l">
-              <span class="l">&#10094;</span>
-              <span class="p"></span>
-            </div>
-            <div class="wrapper-r">
-              <span class="p"></span>
-              <span class="l">&#10095;</span>
-            </div>
-          </div>
-          <div id="railway">
-            
-          </div>
-        </nav>
-
       </section>
 
+      <nav id="navigation">
+        <div id="pagination">
+          <div class="wrapper-l">
+            <span class="l">&#9664;</span>
+            <span class="p"></span>
+          </div>
+          <div class="wrapper-r">
+            <span class="p"></span>
+            <span class="l">&#9654;</span>
+          </div>
+        </div>
+        <div id="railway">
+
+        </div>
+      </nav>
+
     </div>
 
 
     <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/settings.js" 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/dist/main.min.js

@@ -1,11 +1,14 @@
 
-$(document).ready(function(){console.log("ready");var _win={w:$(document).width(),h:$(document).height()},_$root=$('#root'),_pl=58,_active_pages={},_current_pages=0,_page_left_bg,_page_right_bg,_$page_left=$('#page-left'),_$page_right=$('#page-right'),_$overlay_left=$('#page-left .overlay'),_$overlay_right=$('#page-right .overlay'),_$maps_left=$('#page-left .maps'),_$maps_right=$('#page-right .maps'),_bgs_prefix="images/pages/",_$railway=$('#railway'),_$pagination=$('#pagination');_$pagi_l=$('#pagination .wrapper-l .p'),_$pagi_r=$('#pagination .wrapper-r .p');function init(){initLayout();initData();initRailway();initkeyboard();initPagination();changePages();};function initLayout(){_$root.css({'margin-top':(_win.h-_$root.height())/2});};function initData(){for(var p=0;p<_PAGES.length;p++){if(typeof _PAGES[p][0].page!=="undefined"){_active_pages[(_PAGES[p][0].page+1)/2]=p;}
+$(document).ready(function(){console.log("ready");var _win={w:$(document).width(),h:$(document).height()},_$root=$('#root'),_total_dp_len=58,_active_pages_keys=[],_current_dp_key="0",_current_dp_ob,_first_dp=true,_last_dp=false,_$page_left=$('#page-left'),_$page_right=$('#page-right'),_$overlay_left=$('#page-left .overlay'),_$overlay_right=$('#page-right .overlay'),_$maps_left=$('#page-left .maps'),_$maps_right=$('#page-right .maps'),_bgs_prefix="images/pages/",_$railway=$('#railway'),_$pagination=$('#pagination'),_$pagi_l_arrow=$('.wrapper-l .l',_$pagination),_$pagi_r_arrow=$('.wrapper-r .l',_$pagination),_$pagi_l_txt=$('.wrapper-l .p',_$pagination),_$pagi_r_txt=$('.wrapper-r .p',_$pagination);function init(){initLayout();initData();initRailway();initkeyboard();initPagination();initHashNav();changePages();};function initLayout(){_$root.css({'margin-top':(_win.h-_$root.height())/2});};function initData(){_active_pages_keys=Object.keys(_ACTIVE_PAGES);console.log("_active_pages_keys",_active_pages_keys);};function initRailway(){var $ul=$('<ul>').appendTo(_$railway);var $li,adp,bgl,bgr,pl,pr;for(var dp=0;dp<=_total_dp_len;dp++){$li=$('<li>').addClass('double-page-'+dp).appendTo($ul);adp=typeof _ACTIVE_PAGES[dp]!=="undefined"?dp:false;if(adp!==false){$li.addClass('active');bgl=typeof _ACTIVE_PAGES[adp][0].bg!=="undefined"?_bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][0].bg:false;bgr=typeof _ACTIVE_PAGES[adp][1].bg!=="undefined"?_bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][1].bg:false;}else{bgl=bgr=false;}
-else if(typeof _PAGES[p][1].page!=="undefined"){_active_pages[_PAGES[p][1].page/2]=p;}}
+pr=dp*2;pl=pr-1;if(dp!=0)
-console.log("_active_pages",_active_pages);};function initRailway(){var $ul=$('<ul>');var ap,bgl,bgr;for(var dp=0;dp<=_pl;dp++){ap=typeof _active_pages[dp]!=="undefined"?_active_pages[dp]:false;if(ap!==false){bgl=typeof _PAGES[ap][0].bg!=="undefined"?_bgs_prefix+"thumbs/"+_PAGES[ap][0].bg:false;bgr=typeof _PAGES[ap][1].bg!=="undefined"?_bgs_prefix+"thumbs/"+_PAGES[ap][1].bg:false;}else{bgl=bgr=false;}
+$('<span>').addClass('page page-'+(pl)+' double-page-'+dp+' page-left').addClass(bgl?'active':0).css({'background-image':bgl?"url("+bgl+")":"none"}).appendTo($li);if(dp<_total_dp_len)
-var p=dp*2;if(dp!=0)
+$('<span>').addClass('page page-'+pr+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($li);}
-$('<li>').addClass('page page-'+(p-1)+' double-page-'+dp+' page-left').addClass(bgl?'active':0).css({'background-image':bgl?"url("+bgl+")":"none"}).appendTo($ul);if(dp<_pl)
+$('li.active',_$railway).on('click',function(event){dp=$(this).attr('class').match(/double-page-(\d+)/)[1];_current_dp_key=dp;changePages();});}
-$('<li>').addClass('page page-'+p+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($ul);}
+function nextPages(){var i=_active_pages_keys.indexOf(_current_dp_key)+1;if(i<=_active_pages_keys.length-1){_current_dp_key=_active_pages_keys[i];changePages();}};function prevPages(){var i=_active_pages_keys.indexOf(_current_dp_key)-1;if(i>=0){_current_dp_key=_active_pages_keys[i];changePages();}};function changePages(){console.log("changePages",_current_dp_key);$('li',_$railway).removeClass('current');if(typeof _ACTIVE_PAGES[_current_dp_key]!=="undefined"){_current_dp_ob=_ACTIVE_PAGES[_current_dp_key];updatePagesDisplay();updatePaginationDisplay();updateRailwayDisplay();updateHash();updatePagesOverlays();}};function updatePagesDisplay(){if(typeof _current_dp_ob[0].bg!=="undefined"){var pl=_current_dp_ob[0];_$page_left.css({'background-image':"url("+_bgs_prefix+pl.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pl.page);_$pagi_l_txt.text(pl.page);}else{_$page_left.css({'background-image':"none"});_$pagi_l_txt.text("");}
-$ul.appendTo(_$railway);$('li',_$railway).on('click',function(event){var p=$(this).attr('class').match(/page-(\d+)/)[1];console.log('page',p);console.log(p%2);var dp=p%2?(p*1+1)/2:p/2;_current_pages=_active_pages[dp];changePages();});}
+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("");}};function pageClassToRemove(){var c=$(this).attr('class').match(/page-+\d+/);if(c&&c.length)
-function nextPages(){if(_current_pages<_PAGES.length-1){_current_pages+=1;changePages();}};function prevPages(){if(_current_pages>0){_current_pages-=1;changePages();}};function changePages(){console.log("changePages",_current_pages);$('li',_$railway).removeClass('current');if(typeof _PAGES[_current_pages][0].bg!=="undefined"){var pl=_PAGES[_current_pages][0];_$page_left.css({'background-image':"url("+_bgs_prefix+pl.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pl.page);_$pagi_l.text(pl.page);$('li.page-'+pl.page).addClass('current');}else{_$page_left.css({'background-image':"none"});_$pagi_l.text("");}
+return c[0];};function updatePaginationDisplay(){var i=_active_pages_keys.indexOf(_current_dp_key);if(i==0){_$pagi_l_arrow.addClass('hidden');}else{_$pagi_l_arrow.removeClass('hidden')}
-if(typeof _PAGES[_current_pages][1].bg!=="undefined"){var pr=_PAGES[_current_pages][1];_$page_right.css({'background-image':"url("+_bgs_prefix+pr.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pr.page);_$pagi_r.text(pr.page);$('li.page-'+pr.page).addClass('current');}else{_$page_right.css({'background-image':"none"});_$pagi_r.text("");}};function pageClassToRemove(){var c=$(this).attr('class').match(/page-+\d+/);if(c&&c.length)
+if(i==_active_pages_keys.length-1){_$pagi_r_arrow.addClass('hidden');}else{_$pagi_r_arrow.removeClass('hidden')}};function updateRailwayDisplay(){$('li.double-page-'+_current_dp_key).addClass('current');};function updatePagesOverlays(){console.log("updatePagesOverlays");resetOverlays();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);$p=lr==0?_$maps_left:_$maps_right;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',_SETTINGS.debug?map.debug:_SETTINGS.debug).attr('link',typeof map.link!=="undefined"?map.link:null).css({"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-image':'url(images/overlays/'+$(this).attr('overlay')+')'});}).bind("mouseout",function(e){$(this).parents('.page').find('.overlay').css({'background-image':'none'});}).bind("click",function(e){var link=$(this).attr('link');if(link){_current_dp_key=parseInt(link);changePages();}}));if(typeof map.repere!=="undefined"){$p.append($('<div>').addClass('repere').css({"left":map.repere_x+"mm","top":map.repere_y+"mm","width":map.repere_w+"mm","height":map.repere_h+"mm",'background-image':'url(images/reperes/'+map.repere+')'}));}}
-return c[0];};function updatePagesOverlays(){console.log("updatePagesOverlays");$('.overlay, .maps',_$page_left).children().remove();$('.overlay, .maps',_$page_right).children().remove();console.log("Overlays",_PAGES[_current_pages].overlays);for(var map in _PAGES[_current_pages].overlays){if(_PAGES[_current_pages].overlays.hasOwnProperty(map)){map=_PAGES[_current_pages].overlays[map];console.log("Map",map);_$maps_left.append($('<div>').addClass("map").attr('overlay',map.over).css({"left":map.x,"top":map.y,"width":map.w,"height":map.h}).bind("mouseover",function(e){$(this).parents('.page').find('.overlay').css({'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'});}));}}};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};function initPagination(){$('.wrapper-l .l',_$pagination).on('click',function(event){prevPages();});$('.wrapper-r .l',_$pagination).on('click',function(event){nextPages();});};init();});
+lr++;}};function resetOverlays(){$('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();}
+function initHashNav(){console.log('initHashNav');h=window.location.hash;console.log('hash',h);if(h)
+_current_dp_key=h.match(/^#(\d+)$/)[1];}
+function updateHash(){window.location.hash=_current_dp_key;};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};function initPagination(){$('.wrapper-l .l',_$pagination).on('click',function(event){prevPages();});$('.wrapper-r .l',_$pagination).on('click',function(event){nextPages();});};init();});

js/dist/settings.min.js

@@ -0,0 +1,2 @@
+
+var _SETTINGS={'debug':true};

js/main.js

@@ -6,17 +6,17 @@ $(document).ready(function() {
         h:$(document).height()
       },
       _$root = $('#root'),
-      _pl = 58,
+      _total_dp_len = 58,
-      _active_pages = {},
+      _active_pages_keys = [],
-      _current_pages = 0,
+      _current_dp_key = "0", _current_dp_ob, _first_dp = true, _last_dp = false,
-      _page_left_bg, _page_right_bg,
       _$page_left = $('#page-left'), _$page_right = $('#page-right'),
       _$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
       _$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
       _bgs_prefix = "images/pages/",
       _$railway = $('#railway'),
-      _$pagination = $('#pagination');
+      _$pagination = $('#pagination'),
-      _$pagi_l = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
+      _$pagi_l_arrow = $('.wrapper-l .l', _$pagination), _$pagi_r_arrow = $('.wrapper-r .l', _$pagination),
+      _$pagi_l_txt = $('.wrapper-l .p', _$pagination), _$pagi_r_txt = $('.wrapper-r .p', _$pagination);
 
   //     ____      _ __
   //    /  _/___  (_) /_
@@ -25,12 +25,13 @@ $(document).ready(function() {
   // /___/_/ /_/_/\__/
 
   function init(){
-    // console.log("init", _PAGES[0].bg);
+    // console.log("init", _ACTIVE_PAGES[0].bg);
     initLayout();
     initData();
     initRailway();
     initkeyboard();
     initPagination();
+    initHashNav();
     changePages();
   };
 
@@ -42,15 +43,16 @@ $(document).ready(function() {
   };
 
   function initData(){
-    for (var p = 0; p < _PAGES.length; p++) {
+    _active_pages_keys = Object.keys(_ACTIVE_PAGES);
-      if(typeof _PAGES[p][0].page !== "undefined"){
+    console.log("_active_pages_keys", _active_pages_keys);
-        _active_pages[(_PAGES[p][0].page+1)/2] = p;
+  //   for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
-      }
+  //     if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
-      else if(typeof _PAGES[p][1].page !== "undefined"){
+  //       _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
-        _active_pages[_PAGES[p][1].page/2] = p;
+  //     }
-      }
+  //     else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
-    }
+  //       _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
-    console.log("_active_pages", _active_pages);
+  //     }
+  //   }
   };
 
   //     _   __
@@ -60,53 +62,61 @@ $(document).ready(function() {
   // /_/ |_/\__,_/ |___/
 
   function initRailway(){
-    var $ul = $('<ul>');
+    var $ul = $('<ul>').appendTo(_$railway);
-    var ap, bgl, bgr;
+    var $li, adp, bgl, bgr, pl, pr;
-    for (var dp = 0; dp <= _pl; dp++) {
+
+    // loop through double pages
+    for (var dp = 0; dp <= _total_dp_len; dp++) {
       // console.log("-- DOUBLE PAGE --", dp);
-      ap = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
+
-      // console.log("ap",ap);
+      $li = $('<li>')
-      if(ap !== false){
+        .addClass('double-page-'+dp)
-        bgl = typeof _PAGES[ap][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][0].bg : false;
+        .appendTo($ul);
-        bgr = typeof _PAGES[ap][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][1].bg : false;
+
+      // check if current double page is active or not by checking if we have info for it in pages.json
+      // adp = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
+      adp = typeof _ACTIVE_PAGES[dp] !== "undefined" ? dp : false;
+      // console.log("adp",adp);
+
+      if(adp !== false){
+        // if active double page
+        $li.addClass('active');
+        // find for left and right pages if we have background info
+        bgl = typeof _ACTIVE_PAGES[adp][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][0].bg : false;
+        bgr = typeof _ACTIVE_PAGES[adp][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][1].bg : false;
       }else{
+        // if not active double page, no background
         bgl = bgr = false;
       }
-      // console.log("_PAGES[ap][1].bg", _PAGES[ap][1].bg);
-      // console.log("bgl", bgl);
-      // console.log("bgr", bgr);
 
-      var p = dp*2;
+      // get the real page left and right numbers from double page number
+      pr = dp*2;
+      pl = pr -1;
 
+      // add left page only if not first page (cover)
       if(dp!=0)
-        $('<li>')
+        $('<span>')
-          .addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
+          .addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
           .addClass(bgl ? 'active' : 0)
           .css({'background-image': bgl ? "url("+bgl+")" : "none"})
-          .appendTo($ul);
+          .appendTo($li);
 
-      if(dp<_pl)
+      // add right page only if not last page (backcover)
-        $('<li>')
+      if(dp<_total_dp_len)
-          .addClass('page page-'+p+' double-page-'+dp+' page-right')
+        $('<span>')
+          .addClass('page page-'+pr+' double-page-'+dp+' page-right')
           .addClass(bgr ? 'active' : 0)
           .css({'background-image': bgr ? "url("+bgr+")" : "none"})
-          .appendTo($ul);
+          .appendTo($li);
     }
-    $ul.appendTo(_$railway);
 
-    $('li', _$railway).on('click', function(event) {
+    $('li.active', _$railway).on('click', function(event) {
-      var p = $(this).attr('class').match(/page-(\d+)/)[1];
+      dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
-      console.log('page', p);
+      _current_dp_key = dp; //_active_pages[dp];
-      console.log(p%2);
-      // check if page is pair ou impair and calculate de double_page number
-      var dp = p%2 ? (p*1+1)/2 : p/2;
-      _current_pages = _active_pages[dp];
       changePages();
     });
   }
 
-// TODO: next page arrow
-
   //     ____
   //    / __ \____ _____ ____  _____
   //   / /_/ / __ `/ __ `/ _ \/ ___/
@@ -115,51 +125,63 @@ $(document).ready(function() {
   //             /____/
 
   function nextPages(){
-    if(_current_pages < _PAGES.length-1){
+    var i = _active_pages_keys.indexOf(_current_dp_key) +1;
-      _current_pages+=1;
+    if(i <= _active_pages_keys.length-1){
+      _current_dp_key = _active_pages_keys[i];
       changePages();
     }
   };
 
   function prevPages(){
-    if(_current_pages > 0){
+    var i = _active_pages_keys.indexOf(_current_dp_key)-1;
-      _current_pages-=1;
+    if(i >= 0){
+      _current_dp_key = _active_pages_keys[i];
       changePages();
     }
   };
 
   function changePages(){
-    console.log("changePages", _current_pages);
+    console.log("changePages", _current_dp_key);
 
     $('li',_$railway).removeClass('current');
 
-    if (typeof _PAGES[_current_pages][0].bg !== "undefined") {
+    if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
-      var pl = _PAGES[_current_pages][0];
+      _current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
+
+      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);
-      _$pagi_l.text(pl.page);
+      // change pagination
-      $('li.page-'+pl.page).addClass('current');
+      _$pagi_l_txt.text(pl.page);
     }else{
       _$page_left.css({'background-image': "none"});
-      _$pagi_l.text("");
+      _$pagi_l_txt.text("");
     }
 
-    if (typeof _PAGES[_current_pages][1].bg !== "undefined") {
+    if (typeof _current_dp_ob[1].bg !== "undefined") {
-      var pr = _PAGES[_current_pages][1];
+      var pr = _current_dp_ob[1];
       _$page_right
         .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
         .removeClass(pageClassToRemove)
         .addClass('page-'+pr.page);
-      _$pagi_r.text(pr.page);
+      _$pagi_r_txt.text(pr.page);
-      $('li.page-'+pr.page).addClass('current');
     }else{
       _$page_right.css({'background-image': "none"});
-      _$pagi_r.text("");
+      _$pagi_r_txt.text("");
     }
-
-    // updatePagesOverlays();
   };
 
   function pageClassToRemove(){
@@ -168,40 +190,125 @@ $(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();
+    resetOverlays();
-    $('.overlay, .maps',_$page_right).children().remove();
 
-    console.log("Overlays", _PAGES[_current_pages].overlays);
+    // loop through left and right pages from the current double page
-    // build page_left overlays
+    var lr = 0,
-    for (var map in _PAGES[_current_pages].overlays) {
+        p_ob,
-      if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
+        $p,
-        map = _PAGES[_current_pages].overlays[map];
+        map;
-        console.log("Map",map);
+    for(var i in _current_dp_ob){
-        _$maps_left.append(
+      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', _SETTINGS.debug ? map.debug : _SETTINGS.debug)
+            .attr('link', typeof map.link !== "undefined" ? map.link : null)
             .css({
-              "left":map.x,
+              "left":map.x+"mm",
-              "top":map.y,
+              "top":map.y+"mm",
-              "width":map.w,
+              "width":map.w+"mm",
-              "height":map.h
+              "height":map.h+"mm"
             })
             .bind("mouseover", function(e){
               $(this)
                 .parents('.page').find('.overlay')
                   .css({
-                    // 'background-color':"red",
+                    'background-image':'url(images/overlays/'+$(this).attr('overlay')+')'
-                    'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
                   });
             })
-        );
+            .bind("mouseout", function(e){
+              $(this)
+                .parents('.page').find('.overlay')
+                  .css({'background-image':'none'});
+            })
+            .bind("click", function(e){
+              var link = $(this).attr('link');
+              if (link) {
+                _current_dp_key = parseInt(link);
+                changePages();
+              }
+            })
+          );
+        if(typeof map.repere !== "undefined"){
+          $p.append(
+            $('<div>')
+              .addClass('repere')
+              .css({
+                "left":map.repere_x+"mm",
+                "top":map.repere_y+"mm",
+                "width":map.repere_w+"mm",
+                "height":map.repere_h+"mm",
+                'background-image':'url(images/reperes/'+map.repere+')'
+              })
+          );
+        }
+
+
       }
+      lr++;
     }
+
+  };
+
+  function resetOverlays(){
+    $('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();
+  }
+  //     ___               __
+  //    /   |  ____  _____/ /_  ____  __________
+  //   / /| | / __ \/ ___/ __ \/ __ \/ ___/ ___/
+  //  / ___ |/ / / / /__/ / / / /_/ / /  (__  )
+  // /_/  |_/_/ /_/\___/_/ /_/\____/_/  /____/
+
+  function initHashNav(){
+    console.log('initHashNav');
+    h = window.location.hash;
+    console.log('hash',h);
+    if(h)
+      _current_dp_key = h.match(/^#(\d+)$/)[1];
+  }
+
+  function updateHash(){
+    window.location.hash = _current_dp_key;
   };
 
   //     __ __           __                         __

js/pages.json

@@ -1,273 +0,0 @@
-var _PAGES=[
-  [
-    {"active":false},
-    {
-      "page":0,
-      "bg":"00_1couv.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":1,
-      "bg":"00_1couvV.jpeg",
-      "overlays":[]
-    },
-    {
-      "page":2,
-      "bg":"01_anan.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":3,
-      "bg":"02_TH.jpeg",
-      "overlays":[]
-    },
-    {
-      "page":4,
-      "bg":"03_ologyOf.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":5,
-      "bg":"04_chance.jpeg",
-      "overlays":[]
-    },
-    {
-      "page":6,
-      "bg":"05_Stories.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":7,
-      "bg":"06_byGeorge.jpeg",
-      "overlays":[]
-    },
-    {
-      "page":8,
-      "bg":"07_Copyright.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "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}
-  ],
-  [
-    {
-      "page":13,
-      "bg":"12_Bremer.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":15,
-      "bg":"14_Brown.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {"active":false},
-    {
-      "page":24,
-      "bg":"23_Byrd.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":27,
-      "bg":"26_Cage.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":29,
-      "bg":"28_deMaria.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":33,
-      "bg":"32_Flynt.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {"active":false},
-    {
-      "page":38,
-      "bg":"37_Ono.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {"active":false},
-    {
-      "page":40,
-      "bg":"39_HIggins.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {"active":false},
-    {
-      "page":42,
-      "bg":"41_Ichiyanagi.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {"active":false},
-    {
-      "page":46,
-      "bg":"45_Jennings.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":49,
-      "bg":"48_Dennis.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":55,
-      "bg":"54_DingDong.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":57,
-      "bg":"56_Johnson.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":59,
-      "bg":"58_MacLow.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {"active":false},
-    {
-      "page":80,
-      "bg":"79_Maxfield.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":91,
-      "bg":"90_Simone.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":93,
-      "bg":"92_Paik.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":95,
-      "bg":"94_Riley.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {"active":false},
-    {
-      "page":100,
-      "bg":"99_Rot.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":101,
-      "bg":"100_Williams.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":105,
-      "bg":"104_Wolff.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":109,
-      "bg":"108_Young.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":111,
-      "bg":"110_StraightLine.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ],
-  [
-    {
-      "page":113,
-      "bg":"112_Portrait?.jpeg",
-      "overlays":[]
-    },
-    {
-      "page":114,
-      "bg":"113_4couv.jpeg",
-      "overlays":[]
-    }
-  ],
-  [
-    {
-      "page":115,
-      "bg":"114_4couv.jpeg",
-      "overlays":[]
-    },
-    {"active":false}
-  ]
-];

js/settings.js

@@ -0,0 +1,6 @@
+var _SETTINGS={
+  // global debug switch :
+  //  - false to hide all repers
+  //  - true to allow to diplay some repers
+  'debug':true
+};

package.json

@@ -11,10 +11,11 @@
   "license": "GPLV3",
   "homepage": "",
   "devDependencies": {
-    "gulp":"",
+    "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-jsmin": "^0.1.5",
-    "gulp-sass": "^2.0.1",
+    "gulp-sass": "^3.1.0",
     "gulp-watch": "^4.2.4"
-  }
+  },
+  "dependencies": {}
 }