From 2ef1a8e854c7b5dc3e1a7988d4002c858224f3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Tessier?= Date: Tue, 11 Sep 2018 18:03:48 +0200 Subject: [PATCH] blocks responsive + marge ok --- user/themes/r2c/js/script.js | 189 ++++++++++++++++------------------- 1 file changed, 86 insertions(+), 103 deletions(-) diff --git a/user/themes/r2c/js/script.js b/user/themes/r2c/js/script.js index 932fe6a..f748a9b 100644 --- a/user/themes/r2c/js/script.js +++ b/user/themes/r2c/js/script.js @@ -42,7 +42,6 @@ function drag() { // handler // position - var pos = $hand1.position(); var pos1 = $hand2.position(); // dimension @@ -50,18 +49,24 @@ function drag() { var $Hhand = $(this).outerHeight(true); // center - var ajustW = $Whand / 2; - var ajustH = $Hhand / 2; + 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; // position XY - var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%"; + var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW)+ "%" ); var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ; - var xPos2 = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%"; + var xPos2 = ( p * parseFloat( (pos.left + ajustW2 ) / 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 ) ) + "%" ; + var xPos3 = ( p * parseFloat( (pos1.left + ajustW3) / oW ) ) + "%"; + var yPos3 = ( p * parseFloat( (pos.top ) / oH ) ) + "%" ; //handler2 var $handler2 = $(this).parent().find('.hand2'); @@ -75,34 +80,7 @@ function drag() { var $rs = $(this).parent('#page').find("#reseaux-sociaux"); var $links = $(this).parent('#page').find("#links"); - // 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 en % - //windows - var DoW = ( p * (oW / oW ) ) + "%" ; - var DoH = ( p * (oH / oH ) ) + "%" ; - - //blocs - // 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 PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%"; + var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%"; // application dimension $(this).css({ @@ -111,45 +89,44 @@ function drag() { }) $hand2.css({ - 'top': yPos, + 'top': yPos3, }) $recits.css({ "width": xPos, "height": yPos, - }); + }) $itw.css({ - "left":xPos, + "left":xPos2, "width": PosHand, "height": yPos, - }); + }) $img.css({ "height": yPos, - }); + }) $stmp.css({ "width":xPos, "top": yPos2, - "bottom":0, + "bottom":"1px", "height": 'auto', - }); + }) $rs.css({ "top": yPos2, - "left":xPos, + "left":xPos2, "width":PosHand, - "bottom":0, + "bottom":"1px", "height": 'auto', - }); + }) $links.css({ "top": yPos2, "bottom":0, "height": 'auto', - }); - + }) } }); @@ -158,30 +135,53 @@ function drag() { scroll: false, drag: function(event, ui){ - var dragDistance = 300; + // 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); - 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); + // General + // origine + var oW = parseFloat($(window).outerWidth(true)); + var oH = parseFloat($(window).outerHeight(true)); + // pourcent + var p = 100; - ui.position.top = Math.max(ui.position.top, ui.helper.next().offset().top + dragDistance); // 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; - var ajustW = $Whand / 2; + // center + var ajustW = $Whand / 2 - 1; + var ajustH = $Hhand / 2 + 1; - // position handler - var offset = $(this).offset(); - var xPos = offset.left + ajustW; - var yPos = offset.top - ajustH; + var ajustW2 = $Whand / 2 + 1; + var ajustH2 = $Hhand / 2 + 1; - var xPos2 = xPos + $Whand; - var yPos2 = yPos + $Hhand; + var ajustW3 = $Whand / 2 + 3; + 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 xPos2 = ( p * parseFloat( ( oW - (pos1.left + ajustW2) ) / oW ) ) + "%"; + var yPos2 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ; + + var xPos3 = ( p * parseFloat( (oW - (pos.left + ajustW3)) / oW ) ) + "%"; + var yPos3 = ( p * parseFloat( (pos1.top ) / 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"); @@ -189,70 +189,53 @@ function drag() { var $rs = $(this).parent('#page').find("#reseaux-sociaux"); var $links = $(this).parent('#page').find("#links"); - //handler1 - var $handler1 = $(this).parent().find('.hand1'); + var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%"; - // dimension blocs - //windows - var Dw0 = $(window).outerWidth(true); + // application dimension + $(this).css({ + 'left': xPos, + 'top': yPos + }) - //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, - // - // }); + $hand1.css({ + 'top': yPos3, + }) $recits.css({ - "height": yPos - 2, - }); + "height": yPos, + }) $itw.css({ - "width": Bw2, - "height": yPos - 2, - }); + "width": PosHand, + "height": yPos, + }) $img.css({ - "width": xPos3, - "height": yPos - 2, - }); + "width": xPos, + "height": yPos, + }) $stmp.css({ "top": yPos2, - "bottom":0, + "bottom":"1px", "height": 'auto', - }); + }) $rs.css({ - "width": Bw2, "top": yPos2, - "bottom":0, + "width":PosHand, + "bottom":"1px", "height": 'auto', - }); + }) $links.css({ - "width": xPos3, + "width":xPos, "top": yPos2, "bottom":0, "height": 'auto', - }); - - + }) } - }); + }); }; function dragcanvas() {