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

block responsive

Browse Source
This commit is contained in:
kevin
2018-09-11 02:53:29 +02:00
parent 8913001708
commit dea51a66f2
6 changed files with 87 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/r2c/js/script.js
+82 -45
View File
@@ -17,6 +17,7 @@ function clickhand(){
};
function drag() {
var $hand1 = $( ".hand1" );
var $hand2 = $( ".hand2" );
@@ -24,29 +25,49 @@ function drag() {
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);
// 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);
// General
// origine
var oW = parseFloat($(window).outerWidth(true));
var oH = parseFloat($(window).outerHeight(true));
// pourcent
var p = 100;
// handler
// dimension handler
// position
var pos = $hand1.position();
var pos1 = $hand2.position();
// dimension
var $Whand = $(this).outerWidth(true);
var $Hhand = $(this).outerHeight(true);
// center handler
var ajustH = $Hhand / 2;
// center
var ajustW = $Whand / 2;
var ajustH = $Hhand / 2;
// position handler
var offset = $(this).offset();
var xPos = offset.left + ajustW;
var yPos = offset.top - ajustH;
// position XY
var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
var xPos2 = xPos + $Whand;
var yPos2 = yPos + $Hhand;
var xPos2 = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW ) ) + "%";
var yPos3 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
//handler2
var $handler2 = $(this).parent().find('.hand2');
// Blocs
// find
var $recits = $(this).parent('#page').find('#recits');
var $itw = $(this).parent('#page').find("#interviews");
var $img = $(this).parent('#page').find("#images");
@@ -54,44 +75,58 @@ function drag() {
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $links = $(this).parent('#page').find("#links");
//handler2
var $handler2 = $(this).parent().find('.hand2');
// dimension en px
var $Dr = $recits.outerWidth(true);
var $Di = $itw.outerWidth(true);
var $Dimg = $img.outerWidth(true);
var $Dstr = $stmp.outerWidth(true);
var $Drs = $rs.outerWidth(true);
var $Dlinks = $links.outerWidth(true);
// dimension blocs
// dimension blocs en %
//windows
var Dw0 = $(window).outerWidth(true);
var DoW = ( p * (oW / oW ) ) + "%" ;
var DoH = ( p * (oH / oH ) ) + "%" ;
//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);
// recit
var DrW = ( p * parseFloat( ($Dr) / oW ) ) + "%" ;
// interviews
var DitwW = ( p * parseFloat( ($Di) / oW ) ) + "%" ;
// images
var DimgW = ( p * parseFloat( ($Dimg) / oW ) ) + "%" ;
// street
var DstmpW = ( p * parseFloat( ($Dstr) / oW ) ) + "%" ;
// reaseaux
var DrsW = ( p * parseFloat( ($Drs) / oW ) ) + "%" ;
// links
var DlinksW = ( p * parseFloat( ($Dlinks) / oW ) ) + "%" ;
var xPos3 = Dw0 - xPos;
var Bw2 = (Dw0 - (Dw1 + Dw3));
var Bw3 = (Dw0 - (Dw1 + Dw2));
var Bl3 = Dw1 + Dw2;
var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
// app dimension
$handler2.css({
"top": yPos + 25,
});
// application dimension
$(this).css({
'left': xPos,
'top': yPos
})
$hand2.css({
'top': yPos,
})
$recits.css({
"width":xPos,
"height": yPos - 2,
"width": xPos,
"height": yPos,
});
$itw.css({
"left":xPos,
"width": Bw2,
"height": yPos - 2,
"width": PosHand,
"height": yPos,
});
$img.css({
"height": yPos - 2,
"height": yPos,
});
$stmp.css({
@@ -104,7 +139,7 @@ function drag() {
$rs.css({
"top": yPos2,
"left":xPos,
"width":Bw2,
"width":PosHand,
"bottom":0,
"height": 'auto',
});
@@ -121,12 +156,14 @@ function drag() {
$hand2.draggable({
containment: "#start",
scroll: false,
drag: function(event, ui){
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.next().offset().top + dragDistance);
// handler
// dimension handler
var $Whand = $(this).outerWidth(true);
@@ -173,11 +210,11 @@ function drag() {
var Bl3 = Dw1 + Dw2;
// app dimension
$handler1.css({
"top": yPos + 25,
});
//
// $handler1.css({
// "top": yPos + 25,
//
// });
$recits.css({
"height": yPos - 2,
@@ -213,6 +250,7 @@ function drag() {
"height": 'auto',
});
}
});
};
@@ -222,12 +260,11 @@ function dragcanvas() {
var $reseau = $('#reseaux-sociaux svg')
$links.draggable({
// containment:".bottom",
// containment:"#start",
scroll: false
});
$reseau.draggable({
// containment:".bottom",
scroll: false
});
@@ -250,6 +287,6 @@ $(document).ready(function() {
clickhand();
map();
drag();
// dragcanvas();
dragcanvas();
// scrollbar();
});