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

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.866667, 2.333333], 14);

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

  var LeafIcon = L.Icon.extend({
    options: {
      iconSize:     [50, 50],
      iconAnchor:   [25, 25],
    }
  });

  var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/handler.svg'})

  for (var i = 0; i < dyn_data.mappoints.length; i++) {
    L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon}).bindPopup(dyn_data.mappoints[i].title).addTo(mymap);
  }

};


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

        $rs.css({
          "top": yPos2,
          "left":xPos2,
          "width":PosHand,
          "bottom":"1px",
          "height": 'auto',
        })

        $links.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,
          })
          $links.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({
          "top": yPos2,
          "width":PosHand1,
          "bottom":"1px",
          "height": 'auto',
          })

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

        // if itw < 200
        var test = ui.position.left - 200;
        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,
          })
          $rs.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+"%",
      });

    },
  });
};

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

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

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

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