r2c/user/themes/r2c/js/script.js

// addClass
function synchro() {

}
// Streetmap
function map(targets) {
  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'
  }).addTo(mymap);

  var LeafIcon = L.Icon.extend({
    options: {
      iconSize:     [15, 49],
      iconAnchor:   [7.5, 5],
    }
  });

  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++) {
    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,
      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);
        console.log("marker targets", this.options.targets);
        synchBloks(this.options.targets);
      })
      .bindPopup(dyn_data.mappoints[i].title)
      .addTo(mymap);
    markers[id]._icon.id = id;
    var cible = dyn_data.mappoints[i].target;
  }

  $("a").click(function(){
    console.log('targets',targets);
  });
};

function markerFunction(targets, markers ){
  // 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);

  // console.log('targets',targets);
  // console.log('markers[id]',markers[0]);
  // $("a").click(function(){
  //   markerFunction($(this)[0].hash);
  //   console.log('$(this)[0]',$(this)[0].hash);
  // });
  // if (targets == markers[0]) {
  //   console.log('cc');
  //   markers.openPopup;
  // }
   // 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();
   //     };
   // }
}

// change mouse_event
function clickhand(){
  $(".handler").on("mousedown", function (e) {
      e.preventDefault();
      $(this).addClass("mouseDown");
  }).on("mouseup", function () {
      $(this).removeClass("mouseDown");
  });
};

function drag() {
  var $hand = $( ".handler" );
  var $hand1 = $( ".hand1" );
  var $hand2 = $( ".hand2" );
  var p = 100;
  //marge
  var mrg = 1;
  // Blocs
    // find
    var $recits = $hand.parents('#page').find('#recits');
    var $itw = $hand.parents('#page').find("#interviews");
    var $img = $hand.parents('#page').find("#images");
    var $stmp = $hand.parents('#page').find("#streetmap");
    var $rs = $hand.parents('#page').find("#reseaux-sociaux");
    var $links = $hand.parents('#page').find("#links");
    // handler
      // dimension
      var $Whand = parseFloat($hand.outerWidth(true));
      var $Hhand = parseFloat($hand.outerHeight(true));

  $hand1.draggable({
    containment: "#start",
    scroll: false,
    drag: function(event, ui){
      var oW = parseFloat($("#start").outerWidth(true));
      var oH = parseFloat($("#start").outerHeight(true));
      var ajustH = (100 * ( 25/ oH )) + "%";
      var stophand = (0.8 * oW) - 130;
          ui.position.left = Math.max( 200, ui.position.left );
          ui.position.left = Math.min( stophand, ui.position.left );
      // handler
        // position
        var pos = $hand1.position();
        var pos1 = $hand2.position();
        var pos11 = parseFloat(pos1.left) + 25;
        // center handler
        var ajustW = $Whand / 2;
        var ajustH = $Hhand / 2;
        // position XY
        var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ;
        var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ;
        var xPos2 = ( p * parseFloat( ((ui.position.left ) ) / oW) ) + "%";
        var yPos2 = ( p * parseFloat( ((ui.position.top ) ) / oH) ) + "%" ;
        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
        var yPos3 = ( p * parseFloat( (ui.position.top ) / oH) ) + "%" ;
        //handler2
        var $handler2 = $(this).parent().find('.hand2');
        var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%";
        // application dimension
        $hand2.css({
          'top': yPos3,
        })
        $recits.css({
          "width": xPos,
          "height": yPos,
          "left": "-2px",
        })
        $itw.css({
          "left":xPos2,
          "width": PosHand,
          "height": yPos,
          "min-width": "200px"
        })
        $img.css({
          "height": yPos,
          "min-width": "200px",
        })
        $stmp.css({
          "width":xPos,
          "top": yPos2,
          "bottom":"1px",
          "height": 'auto',
        })
        $links.css({
          "top": yPos2,
          "left":xPos2,
          "width":PosHand,
          "bottom":"1px",
          "height": 'auto',
        })
        $rs.css({
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        })
        // if itw < 200
        var testPourcent = parseFloat( p * parseFloat(ui.position.left + 238) / oW ) + "%";
        var img200 = parseFloat( p * parseFloat( (oW - (pos11 - 25 )) / oW) ) + "%" ;

        if ( $itw.width() < 200) {
          $img.css({
            "width": img200,
          })
          $rs.css({
            "width": img200,
          })
          $hand2.css({
            'left':testPourcent,
          })
        } else {}
    },

      stop: function( event, ui ) {
        var parent = $(this).parents('#start');
        $(this).css({
          left:parseInt($(this).css('left'))/parent.width()*100+"%",
          top: parseInt($(this).css('top'))/parent.height()*100+"%",
        });

      },
  });

  $hand2.draggable({
    containment: "#start",
    scroll: false,

    drag: function(event, ui){
      var oW = parseFloat($("#start").outerWidth(true));
      var oH = parseFloat($("#start").outerHeight(true));
      var stophand = (oW - 200) - 50;
      console.log(stophand)
          ui.position.left = Math.max( 400, ui.position.left );
          ui.position.left = Math.min( stophand, ui.position.left );
      // handler
        // position
        var pos = $hand1.position();
        var pos1 = $hand2.position();
        var pos11 = parseFloat(pos.left) + 25;
        // center
        var ajustW = $Whand / 2 - 1;
        var ajustH = $Hhand / 2 + 1;
        var ajustW200 = $Whand / 2 + 6;
        var ajustW2 = $Whand / 2 + 1;
        var ajustH2 = $Hhand / 2 + 1;
        var ajustW3 = $Whand / 2 + 3;
        var ajustH3 = $Hhand / 2 + 1;
        // position XY
        var xPos = ( p * parseFloat( ( oW - (ui.position.left) ) / oW) + "%" );
        var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
        var xPos2 = ( p * parseFloat( ( oW - (ui.position.left) ) / oW ) ) + "%";
        var yPos2 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
        // var xPos3 = ( p * parseFloat( (oW - (pos.left)) / oW ) ) + "%";
        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
        var yPos3 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
        //handler2
        var $handler2 = $(this).parent().find('.hand2');
        var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
        var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%";
        // application dimension
        $hand1.css({
          'top': yPos3,
        })
        $recits.css({
          "height": yPos,
        })
        $itw.css({
          "width": PosHand1,
          "height": yPos,
        })
        $img.css({
          "width": xPos,
          "height": yPos,
        })
        $stmp.css({
          "top": yPos2,
          "bottom":"1px",
          "height": 'auto',
        })
        $rs.css({
          "width":xPos,
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        })
        $links.css({
          "top": yPos2,
          "width":PosHand1,
          "bottom":"1px",
          "height": 'auto',
        })
        // if itw < 200
        var test = ui.position.left - 225;
        var testPourcent = ( p * parseFloat(test) / oW ) + "%";
        var img200 = ( p * parseFloat(  ((pos.left) ) / oW) + "%" );
        if ( $itw.width() < 200) {
          $recits.css({
            "width": img200,
          })
          $stmp.css({
            "width": img200,
          })
          $itw.css({
            "left": img200,
          })
          $links.css({
            "left": img200,
          })
          $hand1.css({
            'left':test,
          })
        }else {}
    },

    stop: function( event, ui ) {
      var parent = $(this).parents("#start");
      $(this).css({
        left:parseInt($(this).css('left'))/parent.width()*100+"%",
        top: parseInt($(this).css('top'))/parent.height()*100+"%",
      });
    },
  });
};

// draggable
function dragcanvas() {
  var $reseau = $('#reseaux-sociaux canvas');
  var $links = $('#links svg g')

  $links.draggable({
    scroll: false
  });
  $reseau.draggable({
    scroll: false
  });
}

// hidden scroll + synchro
function mCustomScrollbar() {

    $('.blocs').mCustomScrollbar({
      mouseWheel:{
        deltaFactor: 5
      },
          scrollInertia: 1000,
    });

    $(document).on("click","a[href^='#'],#links .nodes text[href^='#'],#streetmap img[href^='#'], #images img[href^='#']",function(e){
      e.preventDefault();
      var targets = $(this).attr("href").split(',');
      // console.log('hrefs', hrefs);
      synchBloks(targets);
    });
}

function scrollBlockTo($block, href){
  $block.mCustomScrollbar("scrollTo",href,{
    scrollInertia:1000,
  });
}

function fillColorMapLink(targets, h_parts){

  var target = $('#links.mCustomScrollbar');
  var href = target.find(h_parts[0]);
  var $text0 = $(this).find(href);
  var text = $('.nodes text.group1');
  var text2 = $('.nodes text.group2');
  var text3 = $('.nodes text.group3');

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

function synchBloks(targets) {
  console.log('synchBloks : targets', targets);

  var h, h_parts;

  for (var i = 0; i < targets.length; i++) {
    h = targets[i];
    h_parts = h.match(/^#(([^_]+)_(.+)$)/);
    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);
        markerFunction(h, h_parts);
        break;
      case 'lk':
        scrollBlockTo($('#links.mCustomScrollbar'), h);
        fillColorMapLink(h, h_parts);
        break;
      // case 'rs':
      //   var target = $('#reseaux-sociaux.mCustomScrollbar');
      //   scrollBlockTo();
      //   break;
      // case '':
        // etc
        // break;
      default:
    }
  }
}

function paperjs() {
  paper.install(window);
  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:

    // The amount of segment points we want to create:
    var amount = [1, 2, 3, 4, 5];
    var height = 200;
    var width = 500;
    // Create a new path and style it:

      var path = new paper.Path({
        fillColor: 'grey',
      });
      path.blendMode = 'multiply';
      path.closed = true;
      path.fullySelected = false;
      path._reseaux = "facebook";

      console.log('path',path);
      var path2 = new paper.Path({
        fillColor: 'grey',
      });
      path2.blendMode = 'multiply';
      path2.closed = true;
      path2.fullySelected = false;
      path._reseaux = "instagram";

      var path3 = new paper.Path({
        fillColor: 'grey',
      });
      path3.blendMode = 'multiply';
      path3.closed = true;
      path3.fullySelected = false;
      path._reseaux = "Whatsapp";

      var path4 = new paper.Path({
        fillColor: 'grey',
      });
      path4.blendMode = 'multiply';
      path4.closed = true;
      path4.fullySelected = false;
      path._reseaux = "framasoft";

      var path5 = new paper.Path({
        fillColor: 'grey',
      });
      path5.blendMode = 'multiply';
      path5.closed = true;
      path5.fullySelected = false;
      path._reseaux = "skype";

      var path6 = new paper.Path({
        fillColor: 'grey',
      });
      path6.blendMode = 'multiply';
      path6.closed = true;
      path6.fullySelected = false;
      path._reseaux = "email";

      var path7 = new paper.Path({
        fillColor: 'grey',
      });
      path7.blendMode = 'multiply';
      path7.closed = true;
      path7.fullySelected = false;
      path._reseaux = "siteweb";

      var path8 = new paper.Path({
        fillColor: 'grey',
      });
      path8.blendMode = 'multiply';
      path8.closed = true;
      path8.fullySelected = false;
      path._reseaux = "outilsgoogle";

    for (var i = 0; i <= amount.length; i++) {
      var maxPoint = new paper.Point(100, 100);
      var point = maxPoint;
        path.add(point);
        path2.add(point);
        path3.add(point);
        path4.add(point);
        path5.add(point);
        path6.add(point);
        path7.add(point);
        path8.add(point);
        // path3.add(point);
    }
    // dimension blob
    // position blog
    // for (var i = 0; i < amount.length; i++) {
    //   var RSin = Math.random();
    //   console.log('RSin',RSin);
    // }

      view.onFrame = function(event) {

        for (var i = 0; i <= amount.length; i++) {
          // all
          var segment = path.segments[i];
          var segment2 = path2.segments[i];
          var segment3 = path3.segments[i];
          var segment4 = path4.segments[i];
          var segment5 = path5.segments[i];
          var segment6 = path6.segments[i];
          var segment7 = path7.segments[i];
          var segment8 = path8.segments[i];

          // Size blob
            // Facebook
            var width = 350; var height = 200;
            // instagram
            var width2 = 50; var height2 = 60;
            // Whatsapp
            var width3 = 150; var height3 = 90;
            var width4 = 100; var height4 = 160;
            var width6 = 100; var height6 = 80;
            var width5 = 40; var height5 = 100;
            var width7 = 150; var height7 = 200;
            var width8 = 30; var height8 = 10;

            // vistesse de deplacement
            var v = 0.01;

          var movx = Math.sin(event.time * (v + 0.05)) * 400; var movy = Math.cos(event.time * (v + 0.02)) * 200;
          var movx2 = Math.sin(event.time * (v + 0.02)) * 380; var movy2 = Math.cos(event.time * (v + 0.08)) * 210;
          var movx3 = Math.sin(event.time * (v + 0.01)) * 360; var movy3 = Math.cos(event.time * (v + 0.01)) * 220;
          var movx4 = Math.sin(event.time * (v + 0.04)) * 420; var movy4 = Math.cos(event.time * (v + 0.06)) * 180;
          var movx5 = Math.sin(event.time * (v + 0.05)) * 440; var movy5 = Math.cos(event.time * (v + 0.05)) * 190;
          var movx6 = Math.sin(event.time * (v + 0.02)) * 390; var movy6 = Math.cos(event.time * (v + 0.04)) * 230;
          var movx8 = Math.sin(event.time * (v + 0.03)) * 410; var movy7 = Math.cos(event.time * (v + 0.03)) * 170;
          var movx7 = Math.sin(event.time * (v + 0.04)) * 400; var movy8 = Math.cos(event.time * (v + 0.02)) * 200;

          // contour blob
          var sinus = Math.sin(event.time * ( - 0.05) + i); var cos = Math.cos(event.time *  ( - 0.05) + i);
          var sinus2 = Math.sin(event.time * ( 0.1) + i); var cos2 = Math.cos(event.time *  ( 0.1) + i);
          var sinus3 = Math.sin(event.time * (0.15) + i); var cos3 = Math.cos(event.time *  (0.15) + i);
          var sinus4 = Math.sin(event.time * (0.08) + i); var cos4 = Math.cos(event.time *  (0.08) + i);
          var sinus5 = Math.sin(event.time * ( - 0.2) + i); var cos5 = Math.cos(event.time *  ( - 0.2) + i);
          var sinus6 = Math.sin(event.time * (0.12) + i); var cos6 = Math.cos(event.time *  (0.12) + i);
          var sinus7 = Math.sin(event.time * ( - 0.25) + i); var cos7 = Math.cos(event.time *  ( - 0.25) + i);
          var sinus8 = Math.sin(event.time * (0.18) + i); var cos8 = Math.cos(event.time *  (0.18) + i);

          var rotatex = Math.sin(event.time * Math.PI/360) + i;
          var rotatex2 = Math.sin(event.time * Math.PI/21) + i;
          var rotatex3 = Math.sin(event.time * Math.PI/360) + i;
          var rotatex4 = Math.sin(event.time * Math.PI/75) + i;
          var rotatex5 = Math.sin(event.time * Math.PI/123) + i;
          var rotatex6 = Math.sin(event.time * Math.PI/354) + i;
          var rotatex7 = Math.sin(event.time * Math.PI/76) + i;
          var rotatex8 = Math.sin(event.time * Math.PI/10) + i;

          var left = width - movx + 200; var top = height - movy + 200;
          var left2 = width2 - movx2 + 200; var top2 = height2 - movy2 + 50;
          var left3 = width3 - movx3 + 190; var top3 = height3 - movy3 + 30;
          var left4 = width4 - movx4 + 50; var top4 = height4 - movy4 + 90;
          var left5 = width5 - movx5 + 220; var top5 = height5 - movy5 + 25;
          var left6 = width6 - movx6 + 160; var top6 = height6 - movy6 + 150;
          var left7 = width7 - movx7 + 180; var top7 = height7 - movy7 + 160;
          var left8 = width8 - movx8 + 220; var top8 = height8 - movy8 + 200;

          segment.point.x = cos * width + left + 400; segment.point.y = sinus * height + top + 150;
          segment2.point.x = cos2 * width2 + left2 + 400; segment2.point.y = sinus2 * height2 + top2 + 150;
          segment3.point.x = cos3 * width3 + left3 + 400; segment3.point.y = sinus3 * height3 + top3 + 150;
          segment4.point.x = cos4 * width4 + left4 + 400; segment4.point.y = sinus4 * height4 + top4 + 150;
          segment5.point.x = cos5 * width5 + left5 + 400; segment5.point.y = sinus5 * height5 + top5 + 150;
          segment6.point.x = cos6 * width6 + left6 + 400; segment6.point.y = sinus6 * height6 + top6 + 150;
          segment7.point.x = cos7 * width7 + left7 + 400; segment7.point.y = sinus7 * height7 + top7 + 150;
          segment8.point.x = cos8 * width8 + left8 + 400; segment8.point.y = sinus8 * height8 + top8 + 150;

          // Rotate blob
          path.rotate(rotatex);
          path2.rotate(rotatex2);
          path3.rotate(rotatex3);
          path4.rotate(rotatex4);
          path5.rotate(rotatex5);
          path6.rotate(rotatex6);
          path7.rotate(rotatex7);
          path8.rotate(rotatex8);

          // Smooth
          path.smooth();
          path2.smooth();
          path3.smooth();
          path4.smooth();
          path5.smooth();
          path6.smooth();
          path7.smooth();
          path8.smooth();
        }
      }
      $("a[href^='#facebook']").click(function(){
        path.fillColor =  'blue';
        console.log('true');
      });
      $("a[href^='#twitter']").click(function(){
        path2.fillColor =  'red';
        console.log('true');
      });
      $("a[href^='#instagram']").click(function(){
        path.fillColor =  'pink';
        console.log('true');
      });
	}

}

$(document).ready(function() {
  // paperjs();
  // clickcanvena();
  mCustomScrollbar();
  clickhand();
  drag();
  // dragcanvas();
  map();
  // paperjs();
  // D3js();
});