Handler minwidth

user/themes/r2c/js/script.js

@@ -1,8 +1,3 @@
-function wrap(){
-  $('#start > div:nth-child(-n+3)').wrapAll('<div class="top"></div> ')
-  $('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
-};
-
 function scrollbar(){
   $(window).on("load",function(){
             $("#start > div > div").mCustomScrollbar({
@@ -28,13 +23,18 @@ function drag() {
   $hand1.draggable({
     containment: "#start",
     scroll: false,
-     // grid: [ 5, 5 ],
-    drag: function(){
+    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);
+
       // handler
         // dimension handler
-        var $Hhand = $(this).outerHeight();
-        var $Whand = $(this).outerWidth();
-        // ajust handler
+        var $Whand = $(this).outerWidth(true);
+        var $Hhand = $(this).outerHeight(true);
+
+        // center handler
         var ajustH = $Hhand / 2;
         var ajustW = $Whand / 2;
 
@@ -43,84 +43,96 @@ function drag() {
         var xPos = offset.left + ajustW;
         var yPos = offset.top - ajustH;
 
-        var xPos2 = xPos + (ajustW * 2);
-        var yPos2 = yPos + (ajustH * 2);
+        var xPos2 = xPos + $Whand;
+        var yPos2 = yPos + $Hhand;
 
       // Blocs
-        // top
         var $recits = $(this).parent('#page').find('#recits');
         var $itw = $(this).parent('#page').find("#interviews");
         var $img = $(this).parent('#page').find("#images");
-
-        // bottom
-        var $bottom = $(this).parent('#page').find(".bottom");
-
-        var $links = $(this).parent('#page').find("#links");
-        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $stmp = $(this).parent('#page').find("#streetmap");
+        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
+        var $links = $(this).parent('#page').find("#links");
+
+      //handler2
+        var $handler2 = $(this).parent().find('.hand2');
 
         // dimension blocs
-        var Dw0 = $(window).outerWidth(true);
-        var Dw1 = $recits.outerWidth(true);
-        var Dw2 = $itw.outerWidth(true);
-        var Dw3 = $img.outerWidth(true);
+          //windows
+          var Dw0 = $(window).outerWidth(true);
 
-        // var Bw1 = (Dw0 - (Dw2 + Dw3));
+          //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
-        var $handler2 = $(this).parent().find('.hand2');
-
         $handler2.css({
           "top": yPos + 25,
-          "left": xPos + Bw2 - 25,
         });
 
         $recits.css({
-          "width": xPos,
+          "width":xPos,
           "height": yPos - 2,
         });
 
         $itw.css({
+          "left":xPos,
           "width": Bw2,
           "height": yPos - 2,
         });
 
         $img.css({
-          "width": Dw3,
           "height": yPos - 2,
         });
 
-        $bottom.css({
-          "top": yPos2 + 2,
-        });
-
         $stmp.css({
-          "width": xPos,
-          "top": yPos2 + 2,
+          "width":xPos,
+          "top": yPos2,
+          "bottom":0,
+          "height": 'auto',
         });
 
         $rs.css({
-          "width": Bw2,
+          "top": yPos2,
+          "left":xPos,
+          "width":Bw2,
+          "bottom":0,
+          "height": 'auto',
         });
 
         $links.css({
-          "width": Dw3,
+          "top": yPos2,
+          "bottom":0,
+          "height": 'auto',
         });
+
     }
   });
 
   $hand2.draggable({
     containment: "#start",
     scroll: false,
-    drag: function(){
+    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);
       // handler
         // dimension handler
-        var $Hhand = $(this).outerHeight(true);
         var $Whand = $(this).outerWidth(true);
-        // ajust handler
+        var $Hhand = $(this).outerHeight(true);
+
+        // center handler
         var ajustH = $Hhand / 2;
         var ajustW = $Whand / 2;
 
@@ -129,43 +141,45 @@ function drag() {
         var xPos = offset.left + ajustW;
         var yPos = offset.top - ajustH;
 
-        var xPos2 = xPos + (ajustW * 2);
-        var yPos2 = yPos + (ajustH * 2);
+        var xPos2 = xPos + $Whand;
+        var yPos2 = yPos + $Hhand;
 
       // Blocs
-        // top
         var $recits = $(this).parent('#page').find('#recits');
         var $itw = $(this).parent('#page').find("#interviews");
         var $img = $(this).parent('#page').find("#images");
-
-        // bottom
-        var $bottom = $(this).parent('#page').find(".bottom");
-
-        var $links = $(this).parent('#page').find("#links");
-        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $stmp = $(this).parent('#page').find("#streetmap");
+        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
+        var $links = $(this).parent('#page').find("#links");
+
+      //handler1
+      var $handler1 = $(this).parent().find('.hand1');
 
         // dimension blocs
-        var Dw0 = $(window).outerWidth(true);
-        var Dw1 = $recits.outerWidth(true);
-        var Dw2 = $itw.outerWidth(true);
-        var Dw3 = $img.outerWidth(true);
+          //windows
+          var Dw0 = $(window).outerWidth(true);
+
+          //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 Bw1 = (Dw0 - (Dw2 + Dw3));
         var Bw2 = (Dw0 - (Dw1 + Dw3));
         var Bw3 = (Dw0 - (Dw1 + Dw2));
         var Bl3 = Dw1 + Dw2;
+
         // app dimension
-        var $handler1 = $(this).parent().find('.hand1');
 
         $handler1.css({
           "top": yPos + 25,
-          "left": xPos  - Bw2 - 25,
+
         });
 
         $recits.css({
-          // "width": xPos,
           "height": yPos - 2,
         });
 
@@ -179,17 +193,26 @@ function drag() {
           "height": yPos - 2,
         });
 
-        $bottom.css({
-          "top": yPos2 + 2,
+        $stmp.css({
+          "top": yPos2,
+          "bottom":0,
+          "height": 'auto',
         });
 
         $rs.css({
           "width": Bw2,
+          "top": yPos2,
+          "bottom":0,
+          "height": 'auto',
         });
 
         $links.css({
           "width": xPos3,
+          "top": yPos2,
+          "bottom":0,
+          "height": 'auto',
         });
+
     }
   });
 };
@@ -224,10 +247,9 @@ function map() {
 }
 
 $(document).ready(function() {
-  // wrap();
+  clickhand();
   map();
+  drag();
   // dragcanvas();
-  // clickhand();
-  // drag();
   // scrollbar();
 });

user/themes/r2c/scss/template/_typography.scss

@@ -23,7 +23,6 @@ p{
   }
 }
 
-
 .blocs{
   &:nth-child(1){
     color: white;