synch map

user/pages/01._recits/01._preambule/text.md

@@ -4,10 +4,12 @@ image_align: left
 id: rct_preambule
 ---
 
-En Janvier 2017, [Bachir Soussi-Chiadmi](http://bachirsoussichiadmi.net/?target=_blank&classes=linkext) m’invitait à le rejoindre sur une période de la [résidence](http://www.synesthesie.com/residences/bachir_soussi_chiadmi/convivialite.html?classes=linkext&target=_blank) qu’il menait à [Synesthésie](#mp_syn), centre de recherche et de création artistique alors basé [place du Caquet](#mp_syn) à Saint-Denis.
+En Janvier 2017, [Bachir Soussi-Chiadmi](#lk_bachir) [](http://bachirsoussichiadmi.net/?target=_blank&classes=linkext) m’invitait à le rejoindre sur une période de la résidence [](http://www.synesthesie.com/residences/bachir_soussi_chiadmi/convivialite.html?classes=linkext&target=_blank) qu’il menait à [Synesthésie](#mp_syn) [](http://www.synesthesie.com/index.html?target=_blank&classes=linkext), centre de recherche et de création artistique alors basé place du Caquet à Saint-Denis.
 Depuis quelques années, Bachir travaille autour de l’alternative que sont les outils libres et open-sources dans le champ de la création. Avec Synesthésie, il a conduit une recherche qui questionne la convivialité des outils numériques que nous utilisons quotidiennement et la manière dont nous habitons les espaces de vie qu’ils composent.
-[facebook](#facebook)
-Pour ce projet, "Réseau de convivialité", il s’agissait de penser une approche qui permettrait de répertorier les activités « invisbles ou informelles » - les espaces discrets de convivialité - des habitants du quartier centre de Saint Denis, autour de Synesthésie. L’un des enjeux de cette enquête était de questionner l’outil numérique comme vecteur de convivialité.  C’est à partir de ces premières pistes que le projet a pu évoluer par la suite.
+
+Pour ce projet, _Réseau de convivialité_, il s’agissait de penser une approche qui permettrait de répertorier les activités « invisbles ou informelles » - les espaces discrets de convivialité - des habitants du quartier centre de Saint Denis, autour de Synesthésie. L’un des enjeux de cette enquête était de questionner l’outil numérique comme vecteur de convivialité.  C’est à partir de ces premières pistes que le projet a pu évoluer par la suite.
 
 Cette interface est la restitution de cette expérience :
-On y trouve, sous forme de journal de bord, le récit restituant les étapes du projets, de rencontres en rencontres, ainsi que des éléments visuels, des interviews et des cartographies. Les modules proposés par l’interface permettent de croiser ces différents éléments pour une lecture globale de l’expérience.
+On y trouve, sous forme de journal de bord, le récit restituant les étapes du projet, de rencontres en rencontres, ainsi que des éléments visuels, des liens, des interviews et des cartographies. Les modules proposés par l’interface permettent de croiser ces différents éléments pour une lecture globale et une immersion dans cette expérience. 
+
+Laissez vous porter de "clics" en "clics", de découvertes en découvertes, par le réseau qui vous est présenté ici.

user/pages/01._recits/04._6-juin-2017/text.md

@@ -4,9 +4,9 @@ image_align: left
 id: rct_060617
 ---
 
-Je fais aujourd'hui la connaissance de [Loyce](#lk_loyce), en stage à Synesthésie et étudiante à [Paris 8](#mp_paris8,#img_paris8). 
-Je teste avec elle le format d’interview que j'ai imaginé et la mise en contact avec une tierce personne. Elle m’envoie vers [Marie.P](#img_mariep#lk_mariep), artiste et enseignante à Paris 8: elle a été l'une de ses étudiantes.
-[Bachir](#lk_bachir), qui a justement travaillé avec elle lors d’un atelier à Synesthésie, nous met en lien directement par mail.
-Dans l'après-midi, je découvre l’emplacement de la [Maison Jaune](#mp_maisonjaune,#img_mj1), alors fermée. Sur la devanture, une affiche présente un projet de [Tricot Partage](#img_tp), et indique qu'il est porté par une personne dénommée Pascale. Je retrouve les infos sur la [page Facebook](https://www.facebook.com/maisonjaunesaintdenis/?target=_blank&classes=linkext) et contacte Pascale pour lui proposer une rencontre. 
+Je fais aujourd'hui la connaissance de [Loyce](#lk_loyce), en stage à Synesthésie et étudiante à [Paris 8](#mp_paris8,#img_paris8,#lk_paris8). 
+Je teste avec elle le format d’interview que j'ai imaginé et la mise en contact avec une tierce personne. Elle m’envoie vers [Marie.P](#lk_mariep,#img_mariep), artiste et enseignante à Paris 8: elle a été l'une de ses étudiantes.
+[Bachir](#lk_bachir), qui a justement travaillé avec elle lors d’un atelier à Synesthésie, nous met en lien directement par [mail](#rs_mails).
+Dans l'après-midi, je découvre l’emplacement de la [Maison Jaune](#mp_maisonjaune,#img_mj1), alors fermée. Sur la devanture, une affiche présente un projet de [Tricot Partage](#img_mj2), et indique qu'il est porté par une personne dénommée Pascale. Je retrouve les infos sur la [page Facebook]() [](https://www.facebook.com/maisonjaunesaintdenis/?target=_blank&classes=linkext) et contacte [Pascale](#lk_pascale,#img_pascale) pour lui proposer une rencontre. 
 Peu familière de l’environnement, l’aspect labyrinthique de la [Dalle](#mp_dalle,#img_ilot8), faite de coins et de recoins, ne m’invite pas à m’y ballader : la formation de l’espace accentue chez moi le sentiment d’être perdue.
 Avant de repartir, je déambulle dans le centre de Saint-Denis, marchant au hasard. J’essaye de me rendre plus familière du centre mais ai tendance à graviter peu loin de la [station de métro ](#mp_metrobasilique)que je connais. 

user/pages/04._streetmap/_adada/mappoint.md

@@ -2,7 +2,7 @@
 title: Adada
 image_align: left
 id: mp_adada
-target: '#lk_adada'
+target: '#lk_adada,#img_adada'
 lat: '48.9343034'
 long: '2.3551049'
 ---

user/pages/04._streetmap/_cafe-le-basilic/mappoint.md

@@ -1,9 +1,8 @@
 ---
 title: 'Café Le Basilic'
 image_align: left
-id: mp_lebasilic
+id: mp_cafebasilic
 target: '#int_martine,#rct_050917'
 lat: '48.93560'
 long: '2.35825'
 ---
-

user/pages/04._streetmap/_college-jean-baptiste-de-la-salle/mappoint.md

@@ -2,6 +2,7 @@
 title: 'College Jean Baptiste de la Salle'
 image_align: left
 id: mp_college
+target: '#int_ocelau'
 lat: '48.932831'
 long: '2.354948'
 ---

user/pages/04._streetmap/_cooperence/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Le 110'
 image_align: left
 id: mp_110
+target: '#img_centresocial,#lk_coop,#int_nadia,#130917'
 lat: '48.939986'
 long: '2.356774'
 ---

user/pages/04._streetmap/_cop-billon/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Cop Billon'
 image_align: left
 id: mp_copbillon
+target: '#lk_copbi,#img_ruecopbi'
 lat: '48.937476'
 long: '2.353795'
 ---

user/pages/04._streetmap/_creperie-la-bigoudene/mappoint.md

@@ -2,6 +2,7 @@
 title: 'La bigoudène Café'
 image_align: left
 id: mp_labigoudene
+target: '#lk_labigoudene,#img_labigoudene,#rct_051017'
 lat: '48.936078'
 long: '2.360367'
 ---

user/pages/04._streetmap/_dalle-ilot-8/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Dalle Ilot 8'
 image_align: left
 id: mp_dalle
+target: '#img_ilot8'
 lat: '48.937469'
 long: '2.359434'
 ---

user/pages/04._streetmap/_dechets-dart/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Dechets d''art'
 image_align: left
 id: mp_dechetsdart
+target: '#img_da,#lk_dechetsdart,#int_ocelau,#rct_190617'
 lat: '48.912433'
 long: '2.360560'
 ---

user/pages/04._streetmap/_franciade/mappoint.md

@@ -2,6 +2,7 @@
 title: Franciade
 image_align: left
 id: mp_franciade
+target: '#img_fr,#lk_franciade,#int_andreea,#rct_120717'
 lat: '48.934350'
 long: '2.356586'
 ---

user/pages/04._streetmap/_guadeloupe/mappoint.md

@@ -2,6 +2,7 @@
 title: Guadeloupe
 image_align: left
 id: mp_guadeloupe
+target: '#int_ocelau,#lk_oceane'
 lat: '16.258902'
 long: '-61.577210'
 ---

user/pages/04._streetmap/_imprimeur/mappoint.md

@@ -2,6 +2,7 @@
 title: Imprimeur
 image_align: left
 id: mp_imprimeur
+target: '#int_pascale'
 lat: '48.937684'
 long: '2.359850'
 ---

user/pages/04._streetmap/_jardin-des-chaumettes/mappoint.md

@@ -1,7 +1,7 @@
 ---
 title: 'Jardin des chaumettes'
 image_align: left
-id: mp_jardinchaumettes
+id: mp_chaumettes
 lat: '48.937584'
 long: '2.353159'
 ---

user/pages/04._streetmap/_jardin-haguette/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Jardin Haguette'
 image_align: left
 id: mp_jardinhaguette
+target: '#int_martine,#lk_jardinhaguette,#img_jh3'
 lat: '48.9357488'
 long: '2.354399'
 ---

user/pages/04._streetmap/_kabane/mappoint.md

@@ -2,6 +2,7 @@
 title: Kabane
 image_align: left
 id: mp_kabane
+target: '#lk_kabane,#img_kb,#int_victoria'
 lat: '48.944786'
 long: '2.362877'
 ---

user/pages/04._streetmap/_la-briche/mappoint.md

@@ -2,6 +2,7 @@
 title: 'La Briche'
 image_align: left
 id: mp_briche
+target: '#img_madein,#lk_briche'
 lat: '48.940861'
 long: '2.343944'
 ---

user/pages/04._streetmap/_la-defense/mappoint.md

@@ -2,6 +2,7 @@
 title: 'La Défense'
 image_align: left
 id: mp_ladefense
+target: '#int_manon,#rct_120917'
 lat: '48.8927721'
 long: '2.2331139'
 ---

user/pages/04._streetmap/_la-fabrique-de-la-ville/mappoint.md

@@ -0,0 +1,9 @@
+---
+title: 'La fabrique de la ville'
+image_align: left
+id: mp_fabriquedelaville
+target: '#img_fabriquedelaville'
+lat: '48.935842'
+long: '2.357149'
+---
+

user/pages/04._streetmap/_la-maison-des-seniors/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Maison des seniors'
 image_align: left
 id: mp_maisondesseniors
+target: '#lk_maisondesseniors,#img_maisondesseniors'
 lat: '48.935044'
 long: '2.356888'
 ---

user/pages/04._streetmap/_landykadi/mappoint.md

@@ -1,7 +1,8 @@
 ---
 title: landykadi
 image_align: left
-id: m_landykadi
+id: mp_landykadi
+target: '#lk_landykadi,#img_landykadi'
 lat: '48.91639'
 long: '2.36703'
 ---

user/pages/04._streetmap/_le-6b/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Le 6B'
 image_align: left
 id: mp_6b
+target: '#lk_6B,#img_6B'
 lat: '48.938260'
 long: '2.341956'
 ---

user/pages/04._streetmap/_le-pavillon/mappoint.md

@@ -1,7 +1,8 @@
 ---
 title: 'Le Pavillon'
 image_align: left
-id: mp_lepavillon
+id: mp_pavillon
+target: '#lk_pavillon,#img_pavillon'
 lat: '48.93383'
 long: '2.35590'
 ---

user/pages/04._streetmap/_maison_jaune/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Maison Jaune'
 image_align: left
 id: mp_maisonjaune
+target: '#lk_maisonjaune,#rct_190617,#img_mj1'
 lat: '48.937468'
 long: '2.359149'
 ---

user/pages/04._streetmap/_paris-8/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Paris 8'
 image_align: left
 id: mp_paris8
+target: '#lk_paris8,#img_paris8'
 lat: '48.945496'
 long: '2.362698'
 ---

user/pages/04._streetmap/_place-de-la-republique/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Le Café Pierre'
 image_align: left
 id: mp_cafépierre
+target: '#int_victoria,#rct_250717'
 lat: '48.868657'
 long: '2.363167'
 ---

user/pages/04._streetmap/_place-du-caquet/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Place du Caquet'
 image_align: left
 id: mp_placecaquet
+target: '#img_placecaquet'
 lat: '48.937182'
 long: '2.359497'
 ---

user/pages/04._streetmap/_point-carre/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Point Carré'
 image_align: left
 id: mp_pointcarre
+target: '#lk_pointcarre,#img_pointcarre'
 lat: '48.931883'
 long: '2.355979'
 ---

user/pages/04._streetmap/_roumanie/mappoint.md

@@ -2,6 +2,7 @@
 title: Roumanie
 image_align: left
 id: mp_roumanie
+target: '#int_andreea'
 lat: '45.943110'
 long: '24.978729'
 ---

user/pages/04._streetmap/_synesthesie-mmaintenant/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Synesthesie Mmaintenant'
 image_align: left
 id: mp_synm
+target: '#lk_syn,#img_syn'
 lat: '48.938537'
 long: '2.357735'
 ---

user/pages/04._streetmap/_synesthesie/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Synesthesie - en 2017'
 image_align: left
 id: mp_syn
+target: '#lk_syn,#img_syn'
 lat: '48.937809'
 long: '2.359955'
 ---

user/pages/04._streetmap/_taxiphone/mappoint.md

@@ -2,6 +2,7 @@
 title: Taxiphone
 image_align: left
 id: mp_taxiphone
+target: '#lk_taxiphone,#img_taxiphone,#int_mariew'
 lat: '48.949486'
 long: '2.357834'
 ---

user/pages/04._streetmap/_theatre-gerard-philipe/mappoint.md

@@ -2,6 +2,7 @@
 title: 'Théâtre Gérard Philipe'
 image_align: left
 id: mp_tgp
+target: '#lk_tgp,#img_tgp'
 lat: '48.938449'
 long: '2.350671'
 ---

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(',');