123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295 |
- 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() {
- clickhand();
- drag();
- dragcanvas();
- // scrollbar();
- });
|