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

function scrollbar(){
  $(window).on("load",function(){
            $("#start > div > div").mCustomScrollbar({
                  axis:"y",
                  setTop: 0,
            });
        });
}

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

function drag() {
  var $hand1 = $( ".hand1" );
  var $hand2 = $( ".hand2" );

  $hand1.draggable({
    containment: "#start",
    scroll: false,
    drag: function(event, ui){
      var dragDistanceW = 300;

      ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistanceW);
      ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistanceW);

      // handler
        // dimension handler
        var $Whand = $(this).outerWidth(true);
        var $Hhand = $(this).outerHeight(true);

        // center handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 2;

        // position handler
        var offset = $(this).offset();
        var xPos = offset.left + ajustW;
        var yPos = offset.top - ajustH;

        var xPos2 = xPos + $Whand;
        var yPos2 = yPos + $Hhand;

      // Blocs
        var $recits = $(this).parent('#page').find('#recits');
        var $itw = $(this).parent('#page').find("#interviews");
        var $img = $(this).parent('#page').find("#images");
        var $stmp = $(this).parent('#page').find("#streetmap");
        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
        var $links = $(this).parent('#page').find("#links");

      //handler2
        var $handler2 = $(this).parent().find('.hand2');

        // dimension blocs
          //windows
          var Dw0 = $(window).outerWidth(true);

          //blocs
          var Dw1 = $recits.outerWidth(true);
          var Dw2 = $itw.outerWidth(true);
          var Dw3 = $img.outerWidth(true);
          var Dw4 = $links.outerWidth(true);
          var Dw5 = $rs.outerWidth(true);
          var Dw6 = $stmp.outerWidth(true);

        var xPos3 = Dw0 - xPos;
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;

        // app dimension
        $handler2.css({
          "top": yPos + 25,
        });

        $recits.css({
          "width":xPos,
          "height": yPos - 2,
        });

        $itw.css({
          "left":xPos,
          "width": Bw2,
          "height": yPos - 2,
        });

        $img.css({
          "height": yPos - 2,
        });

        $stmp.css({
          "width":xPos,
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        });

        $rs.css({
          "top": yPos2,
          "left":xPos,
          "width":Bw2,
          "bottom":0,
          "height": 'auto',
        });

        $links.css({
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        });

    }
  });

  $hand2.draggable({
    containment: "#start",
    scroll: false,
    drag: function(event, ui){

      var dragDistance = 300;

      ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
      ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
      // handler
        // dimension handler
        var $Whand = $(this).outerWidth(true);
        var $Hhand = $(this).outerHeight(true);

        // center handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 2;

        // position handler
        var offset = $(this).offset();
        var xPos = offset.left + ajustW;
        var yPos = offset.top - ajustH;

        var xPos2 = xPos + $Whand;
        var yPos2 = yPos + $Hhand;

      // Blocs
        var $recits = $(this).parent('#page').find('#recits');
        var $itw = $(this).parent('#page').find("#interviews");
        var $img = $(this).parent('#page').find("#images");
        var $stmp = $(this).parent('#page').find("#streetmap");
        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
        var $links = $(this).parent('#page').find("#links");

      //handler1
      var $handler1 = $(this).parent().find('.hand1');

        // dimension blocs
          //windows
          var Dw0 = $(window).outerWidth(true);

          //blocs
          var Dw1 = $recits.outerWidth(true);
          var Dw2 = $itw.outerWidth(true);
          var Dw3 = $img.outerWidth(true);
          var Dw4 = $links.outerWidth(true);
          var Dw5 = $rs.outerWidth(true);
          var Dw6 = $stmp.outerWidth(true);

        var xPos3 = Dw0 - xPos;
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;

        // app dimension

        $handler1.css({
          "top": yPos + 25,

        });

        $recits.css({
          "height": yPos - 2,
        });

        $itw.css({
          "width": Bw2,
          "height": yPos - 2,
        });

        $img.css({
          "width": xPos3,
          "height": yPos - 2,
        });

        $stmp.css({
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        });

        $rs.css({
          "width": Bw2,
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        });

        $links.css({
          "width": xPos3,
          "top": yPos2,
          "bottom":0,
          "height": 'auto',
        });

    }
  });
};

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

  $links.draggable({
      // containment:".bottom",
    scroll: false
  });

  $reseau.draggable({
      // containment:".bottom",
    scroll: false
  });

}

function map() {
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

}

$(document).ready(function() {
  clickhand();
  map();
  drag();
  // dragcanvas();
  // scrollbar();
});