fixed synchBlock function, now working for regular liks and for map points

user/themes/r2c/js/script.js

@@ -20,94 +20,22 @@ function map() {
 
   var markers = {};
   var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/pointeur2.svg'})
-
+  var id, targets;
   for (var i = 0; i < dyn_data.mappoints.length; i++) {
-    var id = dyn_data.mappoints[i].id;
+    id = dyn_data.mappoints[i].id;
+
+    targets = typeof dyn_data.mappoints[i].target != 'undefined' ? dyn_data.mappoints[i].target.split(',') : [];
 
-    markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon, alt:dyn_data.mappoints[i].target})
+    markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {
+      icon: greenIcon,
+      targets:targets
+    })
       .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);
+        synchBloks(this.options.targets);
       })
       .bindPopup(dyn_data.mappoints[i].title)
       .addTo(mymap);
@@ -118,40 +46,42 @@ function map() {
     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);
-     });
+  // 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();
+  //        };
+  //    }
+  // }
+
+
+  // TODO a quoi ça sert ça ? sur TOUS les liens ? vraiment ?
+  // $("a").click(function(){
+  //   markerFunction($(this)[0].hash);
+  //   console.log('$(this)[0]',$(this)[0].hash);
+  // });
 };
 
 // change mouse_event
@@ -400,88 +330,93 @@ 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(',');
+      var targets = $(this).attr("href").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:
-        }
-      }
+      synchBloks(targets);
     });
 }
 
+
+function scrollBlockTo($block, href){
+  $block.mCustomScrollbar("scrollTo",href,{
+    scrollInertia:1000,
+  });
+}
+
+
+function synchBloks(targets) {
+  // stop function if targets is not an array or an empty one
+  // console.log("typeof targets", typeof targets);
+  // if(typeof targets != "array" || !targets.length)
+  //   return
+
+  console.log('synchBloks : targets', targets);
+
+  var h, h_parts;
+  for (var i = 0; i < targets.length; i++) {
+    h = targets[i];
+    h_parts = h.match(/^#(([^_]+)_(.+)$)/);
+    // console.log('h_parts', h_parts);
+
+    switch (h_parts[2]) {
+      case 'rct':
+      scrollBlockTo($('#recits.mCustomScrollbar'), h);
+      break;
+      case 'int':
+        scrollBlockTo($('#interviews.mCustomScrollbar'), h);
+        break;
+      case 'img':
+        scrollBlockTo($('#images.mCustomScrollbar'),h);
+        break;
+      case 'mp':
+        scrollBlockTo($('#streetmap.mCustomScrollbar'), h);
+        break;
+      case 'lk':
+        scrollBlockTo($('#links.mCustomScrollbar'), h);
+
+        // ICI IL FAUT FAIRE UNE AUTRE FUNCTION COMME CE N4EST PAS UN SCROLL QUI SE PASSE
+        // 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');
+      //   scrollBlockTo();
+      //   break;
+      // case '':
+        // etc
+        // break;
+      default:
+    }
+  }
+
+}
+
+
 function clicklinkmap() {
   $("text#lk_martine").on("click", function(){