added internal links on click on maps

added reperes, see task #74
global debug switch
2017-12-04 17:57:58 +01:00 · 2017-12-04 17:42:02 +01:00 · 2017-12-04 17:21:13 +01:00 · 2017-10-18 14:55:32 +02:00 · 2017-01-31 09:32:26 +01:00 · 2017-01-29 19:00:14 +01:00
18 changed files with 5437 additions and 567 deletions
@@ -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;
-  top: 0;
-  left: 0;
-  width: 15mm;
-  height: 100%;
-  background-color: white; }
+  display: inline-block;
+  width: 9mm;
+  height: 207.26mm;
+  margin-right: 5mm;
+  background-color: black;
+  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;
-  top: 0;
-  right: 0;
-  width: 455.04741mm; }
+  display: inline-block;
+  width: 455.04741mm;
+  overflow: hidden; }
  #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 {
-      background-image: url("../../images/vectos/04_chance-RB.svg"); }
-  #main #navigation {
-    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 {
+        #main .page .maps .map[debug="true"] {
+          background-color: rgba(0, 0, 250, 0.4); }
+      #main .page .maps .repere {
+        position: absolute;
        cursor: pointer;
-        line-height: -1; }
-  #main #railway ul {
-    padding: 1mm;
-    margin: 0; }
-    #main #railway ul li {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        z-index: 2; }
+
+#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;
-      opacity: 0.2;
-      transition: opacity 0.3s ease-in-out; }
-      #main #railway ul li.active {
+      background-size: cover; }
+      #railway ul li span.active {
        width: 7mm;
        cursor: pointer; }
-      #main #railway ul li.page-right {
-        margin-right: 1mm; }
-      #main #railway ul li.current, #main #railway ul li.active:hover {
-        opacity: 1; }
-    #main #railway ul:hover li {
-      opacity: 1; }
+  #railway ul:hover li {
+    opacity: 1; }
@@ -3,42 +3,51 @@ html,body{
  background-color: #1A1A1A;
 }

-$debug:false;
-$tranchew:15mm;
-$pw:227.41mm;
-$ph:207.26mm;
-$mt:1cm;
-$mb:1cm;
-$me:1cm;
-$mi:1cm;
+$tranche_w:9mm;
+$tranche_mr:5mm;
+$p_w:227.41mm;
+$p_h:207.26mm;
+$main_w:2.001*$p_w;
+$navh:30mm;
+// $mt: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;
-  top: 0; left:0;
-  width: $tranchew; height: 100%;
-  background-color: white;
+  display: inline-block;
+  width: $tranche_w; height: $p_h;
+  margin-right:$tranche_mr;
+  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;
-  top:0; right:0;
-  width:2.001*$pw;
-
+  display: inline-block;
+  width:$main_w;
+  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 {
-      background-color: green;
-    }
-    width:$pw;
-    height:$ph;
+    width:$p_w;
+    height:$p_h;

    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{
-    color:#fff;
-    font-size: 1em;
-    padding: 0 0 2mm 0;
-    div{
+#navigation{
+  width:$main_w;
+  height:$navh;
+  overflow: hidden;
+  $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%;
-      &.wrapper-l{left:0; text-align: left;}
-      &.wrapper-r{right:0; text-align: right;}
-      span.p{
-
-      }
-      span.l{
-        cursor: pointer;
-        line-height: -1;
-      }
+      vertical-align: middle;
+      min-width: 3em;
+      text-align: center;
    }
+    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{
-    ul{
-      padding:1mm; margin:0;
-      li{
-        display: inline-block; vertical-align: middle;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out;
+  &:hover{opacity: 1;}
+}
+
+#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;}
  }
-
 }
@@ -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>
@@ -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>
@@ -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;}
-else if(typeof _PAGES[p][1].page!=="undefined"){_active_pages[_PAGES[p][1].page/2]=p;}}
-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;}
-var p=dp*2;if(dp!=0)
-$('<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>').addClass('page page-'+p+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($ul);}
-$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();});}
-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("");}
-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)
-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();});
+$(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;}
+pr=dp*2;pl=pr-1;if(dp!=0)
+$('<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)
+$('<span>').addClass('page page-'+pr+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($li);}
+$('li.active',_$railway).on('click',function(event){dp=$(this).attr('class').match(/double-page-(\d+)/)[1];_current_dp_key=dp;changePages();});}
+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("");}
+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)
+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(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+')'}));}}
+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();});
@@ -0,0 +1,2 @@
+
+var _SETTINGS={'debug':true};
@@ -6,17 +6,17 @@ $(document).ready(function() {
        h:$(document).height()
      },
      _$root = $('#root'),
-      _pl = 58,
-      _active_pages = {},
-      _current_pages = 0,
-      _page_left_bg, _page_right_bg,
+      _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 = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
+      _$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);

  //     ____      _ __
  //    /  _/___  (_) /_
@@ -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++) {
-      if(typeof _PAGES[p][0].page !== "undefined"){
-        _active_pages[(_PAGES[p][0].page+1)/2] = p;
-      }
-      else if(typeof _PAGES[p][1].page !== "undefined"){
-        _active_pages[_PAGES[p][1].page/2] = p;
-      }
-    }
-    console.log("_active_pages", _active_pages);
+    _active_pages_keys = Object.keys(_ACTIVE_PAGES);
+    console.log("_active_pages_keys", _active_pages_keys);
+  //   for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
+  //     if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
+  //       _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
+  //     }
+  //     else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
+  //       _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
+  //     }
+  //   }
  };

  //     _   __
@@ -60,53 +62,61 @@ $(document).ready(function() {
  // /_/ |_/\__,_/ |___/

  function initRailway(){
-    var $ul = $('<ul>');
-    var ap, bgl, bgr;
-    for (var dp = 0; dp <= _pl; dp++) {
+    var $ul = $('<ul>').appendTo(_$railway);
+    var $li, adp, bgl, bgr, pl, pr;
+
+    // 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);
-      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;
+
+      $li = $('<li>')
+        .addClass('double-page-'+dp)
+        .appendTo($ul);
+
+      // 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>')
-          .addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
+        $('<span>')
+          .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)
-        $('<li>')
-          .addClass('page page-'+p+' double-page-'+dp+' page-right')
+      // add right page only if not last page (backcover)
+      if(dp<_total_dp_len)
+        $('<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) {
-      var p = $(this).attr('class').match(/page-(\d+)/)[1];
-      console.log('page', p);
-      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];
+    $('li.active', _$railway).on('click', function(event) {
+      dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
+      _current_dp_key = dp; //_active_pages[dp];
      changePages();
    });
  }

-// TODO: next page arrow
-
  //     ____
  //    / __ \____ _____ ____  _____
  //   / /_/ / __ `/ __ `/ _ \/ ___/
@@ -115,51 +125,63 @@ $(document).ready(function() {
  //             /____/

  function nextPages(){
-    if(_current_pages < _PAGES.length-1){
-      _current_pages+=1;
+    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(){
-    if(_current_pages > 0){
-      _current_pages-=1;
+    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_pages);
+    console.log("changePages", _current_dp_key);

    $('li',_$railway).removeClass('current');

-    if (typeof _PAGES[_current_pages][0].bg !== "undefined") {
-      var pl = _PAGES[_current_pages][0];
+    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];
+      // 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);
-      $('li.page-'+pl.page).addClass('current');
+      // change pagination
+      _$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") {
-      var pr = _PAGES[_current_pages][1];
+    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.text(pr.page);
-      $('li.page-'+pr.page).addClass('current');
+      _$pagi_r_txt.text(pr.page);
    }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();
-    $('.overlay, .maps',_$page_right).children().remove();
+    resetOverlays();

-    console.log("Overlays", _PAGES[_current_pages].overlays);
-    // build page_left 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(
+    // 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', _SETTINGS.debug ? map.debug : _SETTINGS.debug)
+            .attr('link', typeof map.link !== "undefined" ? map.link : null)
            .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'});
+            })
+            .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;
  };

  //     __ __           __                         __
@@ -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}
-  ]
-];
@@ -0,0 +1,6 @@
+var _SETTINGS={
+  // global debug switch :
+  //  - false to hide all repers
+  //  - true to allow to diplay some repers
+  'debug':true
+};
@@ -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": {}
 }
Author	SHA1	Message	Date
Bachir Soussi Chiadmi	3ca82e14cb	added internal links on click on maps	2017-12-04 17:57:58 +01:00
Bachir Soussi Chiadmi	dd6e1563c0	added reperes, see task #74	2017-12-04 17:42:02 +01:00
Bachir Soussi Chiadmi	6e207dedcf	global debug switch	2017-12-04 17:21:13 +01:00
Bachir Soussi Chiadmi	e5c55358f4	added scaned picture for dos	2017-10-18 14:55:32 +02:00
Bachir Soussi Chiadmi	c65e4e4bc9	fixed railway over opacity	2017-01-31 09:32:26 +01:00
Bachir Soussi Chiadmi	607a27cfd0	activated overlays, commented page.js	2017-01-29 19:00:14 +01:00
Bachir Soussi Chiadmi	599c25c390	big refactoring	2017-01-29 14:57:01 +01:00