drag responsive

user/pages/01._recits/_11-avril-2017/text.md

@@ -5,7 +5,7 @@ image_align: left
 id: rct_110417
 ---
 
-Première découverte du centre de Saint-Denis - [jour 1](#float-left)
+Première découverte du centre de Saint-Denis - [jour 1](#float-left#cc)[](http://facebook.com)
 
 Aujourd'hui, je me rends pour la première fois dans la ville de Saint Denis.
 J’y découvre d'abord, en sortant de la station de métro, le quartier de la Basilique ou j’apprécie la place avec tous ses cafés. Le contraste entre l'architecture de la Basilique et celle de Gailhoustet sur la place du Caquet est frappant.

user/themes/r2c/js/script.js

@@ -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 oW = parseFloat($("#start").outerWidth(true));
+      var oH = parseFloat($("#start").outerHeight(true));
+
+      var ajustH = (100 * ( 25/ oH )) + "%";
 
-      // 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 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();
-
-        // center
-        var ajustW = $Whand / 2 - 1;
-        var ajustH = $Hhand / 2 + 1;
 
-        var ajustW2 = $Whand / 2 + 1;
-        var ajustH2 = $Hhand / 2 + 1;
+        var pos1 = $hand2.position();
+        var pos11 = parseFloat(pos1.left) + 25;
 
-        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 - (ui.position.left) ) / oW ) ) + "%";
+        var yPos2 = ( p * parseFloat( (ui.position.top ) / 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)) / oW ) ) + "%";
+        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
 
-        var xPos3 = ( p * parseFloat( (oW - (pos.left + ajustW3)) / oW ) ) + "%";
-        var yPos3 = ( p * parseFloat( (pos1.top ) / oH ) ) + "%" ;
+        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() {

user/themes/r2c/scss/configuration/_config.scss

@@ -26,12 +26,12 @@ $mrgbloc: 1px;
 // height
 $H100: 100%;
 $H50: calc(#{$H100} / 2);
-$H50-25: calc((#{$H100} / 2 - #{$heightH}) - #{$mrgbloc});
-$T50-25: calc((#{$H100} / 2 + #{$heightH}) + #{$mrgbloc});
+$H50-25: calc((#{$H100} / 2 );
+$T50-25: calc((#{$H100} / 2 );
 
 // width
 $W100: 100%;
-$W33: calc((#{$W100} / 3) - #{$mrgbloc});
+$W33: calc((#{$W100} / 3));
 
 // top
 $T100: 100%;
@@ -44,5 +44,5 @@ $B100: 100%;
 
 // left
 $L100: 100%;
-$L33: calc((#{$L100} / 3) + #{$mrgbloc});
+$L33: calc((#{$L100} / 3));
 $L66: calc(#{$L33} * 2);

user/themes/r2c/scss/template/_section.scss

@@ -9,28 +9,37 @@ body{
     width: 100%;
     height: 50px;
   }
-  .handler{
-    width: 50px;
-    height: 50px;
-    border-radius: 25px;
-    position: absolute;
-    top: 50%;
-    z-index: 999;
-    cursor: grab;
-  }
-  .hand1{
-    left : calc((100%/3) - 25px);
-  }
-  .hand2{
-    right: calc((100%/3) - 25px);
-  }
-  .mouseDown{
-    cursor: grabbing;
-  }
+
 
   #start{
     width: 100%;
     height: calc(100% - 50px);
+    position: relative;
+    .handler{
+      width: 50px;
+      height: 50px;
+      border-radius: 25px;
+      position: absolute;
+      top: 50%;
+      z-index: 999;
+      cursor: grab;
+    }
+    .hand1{
+      left : calc((100%/3));
+      margin-left: -26px;
+      margin-top: -24px;
+    }
+    .hand2{
+      left: calc((100%/3) * 2);
+      margin-left: -25px;
+      margin-top: -24px;
+      img{
+        margin-left: 1px;
+      }
+    }
+    .mouseDown{
+      cursor: grabbing;
+    }
     img{
       filter: grayscale(100%) contrast(4);
       transition: filter 0.5s;
@@ -44,24 +53,28 @@ body{
       overflow-y: auto;
       margin: 0;
       width: $W33;
-      height: $H50-25;
       min-width: 200px;
-      &:nth-child(1){
+      height: $H50-25;
+      &:nth-child(3n+2){
+        left: -2px;
+      }
+      &:nth-of-type(2){
         background: rgb(150, 150, 150);
       }
-      &:nth-child(-n+2){
+      &:nth-child(-n+3){
         padding: 0px 20px;
       }
-      &:nth-child(3n+2){
+      &:nth-child(3n+3){
         background: white;
         left: $L33;
       }
-      &:nth-child(3n+3){
+      &:nth-child(3n+4){
         background: white;
-        right: -1px;
+        right: -2px;
       }
-      &:nth-child(n+4){
+      &:nth-child(n+5){
         top: $T50-25;
+        margin-top: 2px;
       }
       &:nth-of-type(-n+2){
         & > div:nth-child(n+1){

user/themes/r2c/templates/partials/base.html.twig

@@ -74,15 +74,18 @@
 
     {% block hero %}{% endblock %}
 
-        <div class="handler hand1">
-          <img src="user/themes/r2c/images/handler.svg" alt="">
-        </div>
-
-        <div class="handler hand2">
-          <img src="user/themes/r2c/images/handler.svg" alt="">
-        </div>
 
           <section id="start">
+            <div id="handlers">
+
+            <div class="handler hand1">
+              <img src="user/themes/r2c/images/handler.svg" alt="">
+            </div>
+
+            <div class="handler hand2">
+              <img src="user/themes/r2c/images/handler.svg" alt="">
+            </div>
+          </div>
         {% block body %}
             <section id="body-wrapper" class="section">
                 <section class="container {{ grid_size }}">