added reperes, see task #74

css/dist/main.css

@@ -65,9 +65,17 @@ html, body {
       z-index: 2; }
       #main .page .maps .map {
         position: absolute;
+        z-index: 3;
         cursor: pointer; }
         #main .page .maps .map[debug="true"] {
           background-color: rgba(0, 0, 250, 0.4); }
+      #main .page .maps .repere {
+        position: absolute;
+        cursor: pointer;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        z-index: 2; }
 
 #navigation {
   width: 455.04741mm;

css/main.scss

@@ -85,11 +85,20 @@ $navh:30mm;
       z-index: 2;
       .map{
         position: absolute;
+        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;
+      }
     }
 
   }

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>

js/dist/main.min.js

@@ -7,7 +7,7 @@ $('li.active',_$railway).on('click',function(event){dp=$(this).attr('class').mat
 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).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'});}));}
+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).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'});}));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];}

js/dist/settings.min.js

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

js/main.js

@@ -260,7 +260,22 @@ $(document).ready(function() {
                 .parents('.page').find('.overlay')
                   .css({'background-image':'none'});
             })
-        );
+          );
+        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++;
     }

js/pages.js

@@ -71,7 +71,12 @@ var _ACTIVE_PAGES={
           "w":10,
           "h":10,
           "over":"mire_rn.svg",
-          "debug":true
+          "repere":"repere-test.svg",
+          "repere_x":100,
+          "repere_y":100,
+          "repere_w":10,
+          "repere_h":10,
+          "debug":false
         },
         {							// TEST MIRE Rouge 5 X 5
           "x":100,