synch map

user/themes/r2c/js/script.js

@@ -1,5 +1,5 @@
 // addClass
-function Cmaplink() {
+function synchro() {
 
 }
 // Streetmap
@@ -15,7 +15,6 @@ function map() {
     options: {
       iconSize:     [15, 49],
       iconAnchor:   [7.5, 5],
-      alt: 'cc',
     }
   });
 
@@ -25,21 +24,134 @@ function map() {
   for (var i = 0; i < dyn_data.mappoints.length; i++) {
     var id = dyn_data.mappoints[i].id;
 
-    markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon, targets:["#test", '#test2']})
+    markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon, alt:dyn_data.mappoints[i].target})
       .on("click", function(e){
         // e c'est l'evenement click html normal
         // this c'est le marker
         // console.log('marker click', e, this);
+
+        $(document).on("click","#streetmap img",function(e){
+          console.log(this);
+          e.preventDefault();
+          var hrefs = $(this).attr("alt").split(',');
+          // console.log('hrefs', hrefs);
+          var h, h_parts;
+          for (var i = 0; i < hrefs.length; i++) {
+            h = hrefs[i];
+            h_parts = h.match(/^#(([^_]+)_(.+)$)/);
+            // console.log('h_parts', h_parts);
+
+            function scrollTo() {
+              var href = target.find(h_parts[0]);
+              e.preventDefault();
+              target.mCustomScrollbar("scrollTo",href,{
+                scrollInertia:1000,
+              });
+            }
+
+            switch (h_parts[2]) {
+              case 'rct':
+              var target = $('#recits.mCustomScrollbar');
+              scrollTo();
+              break;
+              case 'int':
+              var target = $('#interviews.mCustomScrollbar');
+                scrollTo();
+                break;
+              case 'img':
+                var target = $('#images.mCustomScrollbar');
+                scrollTo();
+                break;
+              case 'mp':
+                var target = $('#streetmap.mCustomScrollbar');
+                scrollTo();
+                break;
+              case 'lk':
+                var target = $('#links.mCustomScrollbar');
+                scrollTo();
+                var href = target.find(h_parts[0]);
+                var text = $('.nodes text.group1');
+                var text2 = $('.nodes text.group2');
+                var text3 = $('.nodes text.group3');
+                console.log('cc');
+
+                text.css({
+                  'font-size':'inherit',
+                  'fill':'black',
+                });
+                text2.css({
+                  'font-size':'inherit',
+                  'fill':'grey',
+                });
+                text3.css({
+                  'font-size':'inherit',
+                  'fill':'lightgrey',
+                });
+
+                if (href) {
+                  href.css({
+                    'font-size':'1.2rem',
+                    'fill':'blue',
+                  });
+                }
+                break;
+              // case 'rs':
+              //   var target = $('#reseaux-sociaux.mCustomScrollbar');
+              //   scrollTo();
+              //   break;
+              // case '':
+                // etc
+                // break;
+              default:
+            }
+          }
+        });
+
         console.log("marker targets", this.options.targets);
       })
       .bindPopup(dyn_data.mappoints[i].title)
       .addTo(mymap);
 
-    markers[id]._icon.id = id;
 
+    markers[id]._icon.id = id;
 
     var cible = dyn_data.mappoints[i].target;
   }
+
+      function markerFunction(id){
+        // console.log('id', hash);
+
+        // var hrefs = $(this).attr("alt").split(',');
+        // // console.log('hrefs', hrefs);
+        // var h, h_parts;
+        // for (var i = 0; i < hrefs.length; i++) {
+        //   h = hrefs[i];
+        //   h_parts = h.match(/^#(([^_]+)_(.+)$)/);
+        //   // console.log('h_parts', h_parts);
+
+
+         for (var i in markers){
+             var markerID = markers[i]._icon.id;
+             // console.log('markerID',markers[i]);
+             var hrefsMarker = markerID.split(',');
+             var hM, h_partsM;
+
+             for (var i = 0; i < hrefsMarker.length; i++) {
+               hM = hrefsMarker[i];
+              h_partsM = hM.match(/^#(([^_]+)_(.+)$)/);
+             console.log('h_partsM', hM);
+           }
+
+             if (hM == id){
+                 markers[i].openPopup();
+             };
+         }
+      }
+
+     $("a").click(function(){
+         markerFunction($(this)[0].hash);
+         console.log('$(this)[0]',$(this)[0].hash);
+     });
 };
 
 // change mouse_event
@@ -288,6 +400,11 @@ function mCustomScrollbar() {
           scrollInertia: 1000,
     });
 
+
+    function synchronize() {
+
+    }
+
     $(document).on("click","a[href^='#'],#links .nodes text[href^='#'],#streetmap img[href^='#']",function(e){
       e.preventDefault();
       var hrefs = $(this).attr("href").split(',');