syn img it rct

user/pages/06._reseaux-sociaux/_reseaux-20/reseau.md

@@ -0,0 +1,5 @@
+---
+image_align: left
+id: ''
+---
+

user/themes/r2c/js/script.js

@@ -2,11 +2,12 @@ function gestionarray() {
   // dyn_data.split();
   console.log(dyn_data.mappoints[1].id);
   $("#page").addClass(dyn_data.mappoints[1].id);
+
 }
 
 function map() {
-  var mymap = L.map('mapid').setView([48.9267935,2.3569287], 16);
+  var mymap = L.map('mapid').setView([48.9367935,2.3569287], 17);
-
+setTimeout(mymap.invalidateSize.bind(map));
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
     id: 'mapbox.streets'
@@ -22,12 +23,11 @@ function map() {
   var markers = {};
   var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/handler.svg'})
 
-  for (var i = 0; i < dyn_data.mappoints.length; i++) {;
+  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}).bindPopup(dyn_data.mappoints[i].title).addTo(mymap);
     // console.log("dyn_datad2", dyn_data.mappoints[i].title);
     markers[id]._icon.id = id;
-
   }
 
 };
@@ -321,11 +321,8 @@ function dragcanvas() {
 }
 
 function mCustomScrollbar() {
-
-
     $('.blocs').mCustomScrollbar({
           scrollInertia: 100,
-
     });
 
     $('.blocs').mCustomScrollbar("update");
@@ -353,40 +350,100 @@ function mCustomScrollbar() {
       console.log('hrefs', hrefs);
 
       var h, h_parts;
-      var regex = /^#(([^_]+)_(.+))/g;
       for (var i = 0; i < hrefs.length; i++) {
         h = hrefs[i];
-        // h = h.replace(/^#/, '');
+        h_parts = h.match(/^#(([^_]+)_(.+)$)/);
-        // console.log('h', h);
-        var h_parts = regex.exec(h);
-        // h_parts = h.match();
         console.log('h_parts', h_parts);
 
         // a partir de là tu peux synchro chacun des blocks en focntion de
         //   h_parts[2] est la première partie qui te dit de quel block il s'agit
         //   h_parts[3] est l'ancre
         //   etc
+        function scrollTo() {
+          var href = target.find(h_parts[0]);
 
+          e.preventDefault();
+          target.mCustomScrollbar("scrollTo",href,{
+            scrollInertia:1000,
+            // offset: 0
+          });
+        }
         switch (h_parts[2]) {
-          case case 'mp':
+          case 'rct':
-            // tu synchro interview
+          var target = $('#recits.mCustomScrollbar');
+          scrollTo();
+          break;
+          case 'int':
+          var target = $('#interviews.mCustomScrollbar');
+            scrollTo();
             break;
-          case case 'rct':
+          case 'img':
-            // tu synchro récit
+            var target = $('#images.mCustomScrollbar');
+            scrollTo();
             break;
-          case case 'img':
+          case 'mp':
-            // tu synchro image
+            var target = $('#streetmap.mCustomScrollbar');
+            scrollTo();
             break;
+          case 'lk':
+            var target = $('#links.mCustomScrollbar');
+            scrollTo();
+            break;
+          // case 'rs':
+          //   var target = $('#reseaux-sociaux.mCustomScrollbar');
+          //   scrollTo();
+          //   break;
           // case '':
             // etc
             // break;
           default:
-
         }
       }
-
-
     });
+}
+
+
+function paperjs() {
+  window.onload = function() {
+		// Get a reference to the canvas object
+		var canvas = document.getElementById('canvas');
+		// Create an empty project and a view for the canvas:
+		paper.setup(canvas);
+		// Create a Paper.js Path to draw a line into it:
+    for (var a = 0; a < dyn_data.reseauxsociaux.length; a++) {
+      var path = new paper.Path();
+
+      // Give the stroke a color
+      path.strokeColor = 'black';
+      path.fillColor = 'grey';
+      path.fullySelected = true;
+
+      var x = Math.floor((Math.random() * (100 + 200)));
+      var y= Math.floor((Math.random() * (100 + 500)));
+      var start = new paper.Point(x, y);
+      // Move to start and draw a line from there
+      path.moveTo(start);
+
+      for (var b = 0; b < 2; b++) {
+        // origine
+        var x1 = Math.floor((Math.random() * (200 + 300)));
+        var y1= Math.floor((Math.random() * (200 + 300)) );
+        path.lineTo(start.add([ x1, y1 ]));
+
+        path.smooth();
+        path.closed = true;
+      }
+    // Draw the view now:
+    paper.view.draw();
+
+    }
+
+  // var pulse = 0.7;
+  // var sinus = Math.sin(event.time * pulse + i);
+  // var cos = Math.cos(event.time *  pulse + i);
+  // var destination = paper.Point.random(x, y) * paper.view.size;
+
+	}
 
 }
 
@@ -397,6 +454,7 @@ $(document).ready(function() {
   drag();
   dragcanvas();
   map();
+  paperjs();
   // D3js();
   // scrollbar();
 });

user/themes/r2c/js/script_paperjs.js

@@ -1,6 +1,5 @@
 // The amount of segment points we want to create:
 var amount = [1, 2, 3, 4, 5];
-
 var height = 200;
 var width = 100;
 
@@ -44,7 +43,7 @@ function onFrame(event) {
 		segment.point.x = cos * width + 300;
 	}
 
-	path.rotate(30);
+	path.rotate(25);
   path.smooth();
 }
 

user/themes/r2c/scss/template/_section.scss

@@ -105,15 +105,18 @@ body{
       }
     }
     #streetmap{
-      #mapid{
+      #mCSB_4_container{
-        filter: grayscale(100%) contrast(1);
+        width: 100%;
+        height: 100%;
       }
       & > div:nth-of-type(1){
         height: 100%;
       }
       #mapid {
-        width: 100vw;
+        width: 100%;
-        height: 100vh;
+        height: 100%;
+
+        filter: grayscale(100%) contrast(1);
         .leaflet-marker-pane{
           img{
             transform: translate(-25px, -25px);

user/themes/r2c/scss/template/_typography.scss

@@ -8,7 +8,7 @@ h1{
 }
 
 h2{
-  font-family: $CooperHewitt-italic;
+  font-family: $CooperHewitt;
   font-size: 1.1rem;
   line-height: 50px;
 }
@@ -24,6 +24,11 @@ p{
 }
 
 .blocs{
+  a.linkext{
+    &:after{
+      content: "~";
+    }
+  }
   &:nth-child(2){
     color: white;
     a{
@@ -36,3 +41,9 @@ p{
     }
   }
 }
+
+#images{
+  p{
+    font-size: 0.8rem;
+  }
+}

user/themes/r2c/templates/partials/base.html.twig

@@ -85,7 +85,7 @@
         {# % do assets.addJs('theme://js/leaflet.js', {group:'bottom'}) % #}
         {# do assets.addJs('theme://js/script_paperjs.js', {type:'text/paperscript', canvas:'canvas', group:'bottom'}) #}
 
-        <script type="text/paperscript" src="user/themes/r2c/js/script_paperjs.js" canvas="canvas"></script>
+        <!-- <script type="text/paperscript" src="user/themes/r2c/js/script_paperjs.js" canvas="canvas"></script> -->
         <script src="user/themes/r2c/js/leaflet.js" crossorigin=""></script>
 
         {% do assets.addJs('theme://js/script.js', {group:'bottom'}) %}