kevin/r2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drag responsive

Browse Source
This commit is contained in:
kevin
2018-09-14 05:54:40 +02:00
parent efa92436f7
commit d2f59c7557
7 changed files with 192 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/r2c/js/script.js
+120 -67
View File
@@ -22,90 +22,82 @@ function drag() {
var $hand1 = $( ".hand1" );
var $hand2 = $( ".hand2" );
// General
// origine
var oW = parseFloat($(window).outerWidth(true));
var oH = parseFloat($(window).outerHeight(true));
// pourcent
var p = 100;
var p = 100;
//marge
var mrg = 1;
// Blocs
// find
var $recits = $hand.parent('#page').find('#recits');
var $itw = $hand.parent('#page').find("#interviews");
var $img = $hand.parent('#page').find("#images");
var $stmp = $hand.parent('#page').find("#streetmap");
var $rs = $hand.parent('#page').find("#reseaux-sociaux");
var $links = $hand.parent('#page').find("#links");
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 = $hand.outerWidth(true);
var $Hhand = $hand.outerHeight(true);
var $Whand = parseFloat($hand.outerWidth(true));
var $Hhand = parseFloat($hand.outerHeight(true));
$hand1.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);
//
// // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
// ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
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
var ajustW = $Whand / 2 - 1;
var ajustH = $Hhand / 2 + 1;
var ajustW2 = $Whand / 2 + 1;
var ajustH2 = $Hhand / 2 + 1;
var ajustW3 = $Whand / 2 - 3;
var ajustH3 = $Hhand / 2 + 1;
// center handler
var ajustW = $Whand / 2;
var ajustH = $Hhand / 2;
// position XY
var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW)+ "%" );
var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ;
var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( (pos.left + ajustW2 ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
var xPos3 = ( p * parseFloat( (pos1.left + ajustW3) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos.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(xPos3) - parseFloat(xPos)) + "%";
var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%";
// application dimension
$(this).css({
'left': xPos,
'top': yPos,
})
$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({
@@ -121,14 +113,39 @@ function drag() {
"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({
@@ -136,21 +153,24 @@ function drag() {
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);
//
// // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
// ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
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;
@@ -159,26 +179,26 @@ function drag() {
var ajustH3 = $Hhand / 2 + 1;
// position XY
var xPos = ( p * parseFloat( ( oW - (pos1.left + ajustW) ) / oW) + "%" );
var yPos = ( p * parseFloat( (pos1.top - ajustH ) / oH ) ) + "%" ;
var xPos = ( p * parseFloat( ( oW - (ui.position.left) ) / oW) + "%" );
var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
var xPos2 = ( p * parseFloat( ( oW - (pos1.left + ajustW2) ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos1.top + ajustH ) / 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 + ajustW3)) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos1.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)) + "%";
// application dimension
$(this).css({
'left': xPos,
'top': yPos
})
var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%";
// application dimension
$hand1.css({
'top': yPos3,
})
@@ -188,7 +208,7 @@ function drag() {
})
$itw.css({
"width": PosHand,
"width": PosHand1,
"height": yPos,
})
@@ -205,7 +225,7 @@ function drag() {
$rs.css({
"top": yPos2,
"width":PosHand,
"width":PosHand1,
"bottom":"1px",
"height": 'auto',
})
@@ -216,8 +236,41 @@ function drag() {
"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() {