add js tactile

user/themes/r2c/js/script.js

@@ -18,9 +18,31 @@ function clickhand(){
 
 function drag() {
 
+  var $hand = $( ".handler" );
   var $hand1 = $( ".hand1" );
   var $hand2 = $( ".hand2" );
 
+  // General
+    // origine
+    var oW = parseFloat($(window).outerWidth(true));
+    var oH = parseFloat($(window).outerHeight(true));
+    // pourcent
+    var p = 100;
+
+  // 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");
+
+    // handler
+      // dimension
+      var $Whand = $hand.outerWidth(true);
+      var $Hhand = $hand.outerHeight(true);
+
   $hand1.draggable({
     containment: "#start",
     scroll: false,
@@ -32,21 +54,10 @@ function drag() {
       //
       // // 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
         // position
         var pos = $hand1.position();
         var pos1 = $hand2.position();
-        // dimension
-        var $Whand = $(this).outerWidth(true);
-        var $Hhand = $(this).outerHeight(true);
 
         // center
         var ajustW = $Whand / 2 - 1;
@@ -70,22 +81,12 @@ function drag() {
 
         //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");
-        var $stmp = $(this).parent('#page').find("#streetmap");
-        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
-        var $links = $(this).parent('#page').find("#links");
-
         var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
 
         // application dimension
         $(this).css({
           'left': xPos,
-          'top': yPos
+          'top': yPos,
         })
 
         $hand2.css({
@@ -142,20 +143,10 @@ function drag() {
       // // 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
         // position
         var pos = $hand1.position();
         var pos1 = $hand2.position();
-        // dimension
-        var $Whand = $(this).outerWidth(true);
-        var $Hhand = $(this).outerHeight(true);
 
         // center
         var ajustW = $Whand / 2 - 1;
@@ -180,15 +171,6 @@ function drag() {
         //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");
-        var $stmp = $(this).parent('#page').find("#streetmap");
-        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
-        var $links = $(this).parent('#page').find("#links");
-
         var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
 
         // application dimension

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

@@ -34,6 +34,7 @@
         {% do assets.addJs('theme://js/script_d3js.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/paper_full.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/paper_full.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/jquery.ui.touch-punch.min.js', {group:'bottom'}) %}
 
         {# % do assets.addJs('theme://js/leaflet.js', {group:'bottom'}) % #}
         {# do assets.addJs('theme://js/script_paperjs.js', {type:'text/paperscript', canvas:'canvas', group:'bottom'}) #}
@@ -72,7 +73,7 @@
     {% endblock %}
 
     {% block hero %}{% endblock %}
-        
+
         <div class="handler hand1">
           <img src="user/themes/r2c/images/handler.svg" alt="">
         </div>