Merge pull request #55 from abdouse79/Drag'n'Drop-with-mouse-events

HachemiH · web-flow · commit f849762da903 · 2019-07-31T08:27:22.000+02:00
Drag'n'drop with mouse events
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
@@ -1,4 +1,4 @@
 
-We have a horizontal Drag'n'Drop here.
+Nous avons un glisser-déposer horizontal ici.
 
-To position the element we use `position:relative` and slider-relative coordinates for the thumb. Here it's more convenient here than `position:absolute`.
+Pour positionner l’élément nous utilisons  `position:relative` et les coordonnées relativement à la barre pour le pouce. Ici c'est plus convenable que la propriété `position:absolute`.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html
@@ -16,18 +16,18 @@
     let thumb = slider.querySelector('.thumb');
 
     thumb.onmousedown = function(event) {
-      event.preventDefault(); // prevent selection start (browser action)
+      event.preventDefault(); // empeche le declenchement de la selection (action du navigateur)
 
       let shiftX = event.clientX - thumb.getBoundingClientRect().left;
-      // shiftY not needed, the thumb moves only horizontally
+      // on n'a pas besoin de shiftY , le pouce se deplace seulement horizontalement
 
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
 
       function onMouseMove(event) {
         let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
 
-        // the pointer is out of slider => lock the thumb within the bounaries
+        // le pointeur est en dehors de la barre de defilement => bloque le pouce a l'interieur des limites
         if (newLeft < 0) {
           newLeft = 0;
         }
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Slider
+# Barre de défilement
 
-Create a slider:
+Créer une barre de défilement:
 
 [iframe src="solution" height=60 border=1]
 
-Drag the blue thumb with the mouse and move it.
+Faire glisser le pouce bleu avec la souris et le déplacer -.
 
-Important details:
+Détails importants:
 
-- When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
-- If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
+- Lorsque la souris est appuyée, durant le glissement la souris peut se mettre au-dessus ou en bas de la barre de défilement. La barre de défilement va toujours fonctionner  (c'est convenable pour l'utilisateur).
+- Si la souris se déplace très rapidement vers la gauche or la droite, le pouce doit s'arrêter exactement sur le rebord.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
@@ -1,5 +1,4 @@
-To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute`.
+Pour déplacer l’élément nous pouvons utiliser `position:fixed`, cela rend les coordonnées plus facile à manipuler. A la fin nous devons le  rechanger à la  position `position:absolute`.
+Ensuite, lorsque les coordonnées sont en haut ou au bas de la fenêtre, nous pouvons utiliser `window.scrollTo` pour le faire défiler.
 
-Then, when coordinates are at window top/bottom, we use `window.scrollTo` to scroll it.
-
-More details in the code, in comments.
+Plus de détails dans votre code, en commentaires.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html
@@ -8,17 +8,17 @@
 
 <body>
 
-  <h2>Place superheroes around the soccer field.</h2>
+<h2>Placez les superhéros un peu partout dans le terrain de football.</h2>
 
-  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+  <p>Les superhéros  et la balle sont des éléments ayant la classe "draggable".  Rendez les effectivement déplaçable.</p>
 
-  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+  <p>Important: limitez le déplacement au niveau de la fenêtre. Si un élément déplaçable atteint le haut ou le bas de la fenêtre, alors la page doit défiler pour nous permettre de le déplacer d'avantage.</p>
 
-  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+  <p> Si votre écran est assez large pour contenir tout le document -- rendez la fenêtre plus petite afin d'obtenir un défilement vertical, pour que vous puissiez le tester.</p>
 
-  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+  <p>dans cette tâche, il est suffisant de gérer le défilement vertical. Souvent, il n’y a pas de défilement horizontal, et il est géré de manière similaire au besoin.</p>
 
-  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+  <p>Et aussi: Les héros ne doivent jamais quitter la page. S'ils atteignent le bord document, il ne doit pas avoir de déplacement en dehors de ce dernier.</p>
 
   <div id="field">
 
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/* heroes and the ball (dragables) */
+/* heros et la  balle (deplacable) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -24,9 +24,9 @@ document.addEventListener('mousedown', function(event) {
     moveAt(event.clientX, event.clientY);
   }
 
-  // on drag start:
-  //   remember the initial shift
-  //   move the element position:fixed and a direct child of body
+  // commencer a l'evenement  deplacer:
+  //  se rappeler du changement initial
+  //   depalcerla position:fixed de  l' element  et un element enfant directe de l'element body
   function startDrag(element, clientX, clientY) {
     if(isDragging) {
       return;
@@ -45,7 +45,7 @@ document.addEventListener('mousedown', function(event) {
     moveAt(clientX, clientY);
   };
 
-  // switch to absolute coordinates at the end, to fix the element in the document
+  // changer a absolue les coordonnees en  bas, pour fixer l'element dans le document
   function finishDrag() {
     if(!isDragging) {
       return;
@@ -61,49 +61,49 @@ document.addEventListener('mousedown', function(event) {
   }
 
   function moveAt(clientX, clientY) {
-    // new window-relative coordinates
+    // nouvelles coordonnees relatives a la fenetre
     let newX = clientX - shiftX;
     let newY = clientY - shiftY;
 
-    // check if the new coordinates are below the bottom window edge
+    // controler si les nouvelles coordonneses sont au dessous sous du bord inferieur de la fenetre
     let newBottom = newY + dragElement.offsetHeight; // new bottom
 
-    // below the window? let's scroll the page
+    // au dessous de la fenetre? on fait defiler la page
     if (newBottom > document.documentElement.clientHeight) {
-      // window-relative coordinate of document end
+      // fin de coordonne relativement a la fenetre du document
       let docBottom = document.documentElement.getBoundingClientRect().bottom;
 
-      // scroll the document down by 10px has a problem
-      // it can scroll beyond the end of the document
-      // Math.min(how much left to the end, 10)
+      // fait defiler le document vers le bas par 10px contient un probleme
+      // cela peut defiler au dela de la fin du document
+      // Math.min(combien reste t il vers la fin du document, 10)
       let scrollY = Math.min(docBottom - newBottom, 10);
 
-      // calculations are imprecise, there may be rounding errors that lead to scrolling up
-      // that should be impossible, fix that here
+      // les calsculs sont imprecises, il peut subsiter des erreurs d'arrondis pouvant mener a un defilement vers le haut
+      // cela ne devrait pas exister, on resouds cela ici
       if (scrollY < 0) scrollY = 0;
 
       window.scrollBy(0, scrollY);
 
-      // a swift mouse move make put the cursor beyond the document end
-      // if that happens -
-      // limit the new Y by the maximally possible (right at the bottom of the document)
+      // un deplacement rapide de la souris  peut mettre le curseur au dela des limites du document
+      // Si cela survient-
+      // limite le nouveau Y (new Y) au maximum possible ( tout just au bas dudocument)
       newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
     }
 
-    // check if the new coordinates are above the top window edge (similar logic)
+    // Controler si les nouvelles coordonnees sont au dessus des limites superieures de la fenetre ( logique similaire)
     if (newY < 0) {
-      // scroll up
+      // defile vers le haut
       let scrollY = Math.min(-newY, 10);
-      if (scrollY < 0) scrollY = 0; // check precision errors
+      if (scrollY < 0) scrollY = 0; // controler les erreurs de precisions
 
       window.scrollBy(0, -scrollY);
-      // a swift mouse move can put the cursor beyond the document start
-      newY = Math.max(newY, 0); // newY may not be below 0
+      //un deplacement rapide de la souris  peut mettre le curseur au dela du debut du document
+      newY = Math.max(newY, 0); // newY ne doit pas etre moins de 0
     }
 
 
-    // limit the new X within the window boundaries
-    // there's no scroll here so it's simple
+    // limite le nouveau X  (new X) dans les limites de la fenetre
+    // il n'y a pas de defilement donc c'est simple
     if (newX < 0) newX = 0;
     if (newX > document.documentElement.clientWidth - dragElement.offsetWidth) {
       newX = document.documentElement.clientWidth - dragElement.offsetWidth;
@@ -113,4 +113,4 @@ document.addEventListener('mousedown', function(event) {
     dragElement.style.top = newY + 'px';
   }
 
-});
+});
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
@@ -8,17 +8,17 @@
 
 <body>
 
-  <h2>Place superheroes around the soccer field.</h2>
+  <h2>Placez les superhéros un peu partout dans le terrain de football.</h2>
 
-  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+   <p>Les superhéros  et la balle sont des éléments ayant la classe "draggable".  Rendez les effectivement déplaçable.</p>
 
-  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+    <p>Important: limitez le déplacement au niveau de la fenêtre. Si un élément déplaçable atteint le haut ou le bas de la fenêtre, alors la page doit défiler pour nous permettre de le déplacer d'avantage.</p>
 
-  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+  <p> Si votre écran est assez large pour contenir tout le document -- rendez la fenêtre plus petite afin d'obtenir un défilement vertical, pour que vous puissiez le tester.</p>
 
-  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+  <p>dans cette tâche, il est suffisant de gérer le défilement vertical. Souvent, il n’y a pas de défilement horizontal, et il est géré de manière similaire au besoin.</p>
 
-  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+  <p>Et aussi: Les héros ne doivent jamais quitter la page. S'ils atteignent le bord document, il ne doit pas avoir de déplacement en dehors de ce dernier.</p>
 
   <div id="field">
 
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/* heroes and the ball (dragables) */
+/* heros et la balle (deplacable) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
@@ -2,19 +2,18 @@ importance: 5
 
 ---
 
-# Drag superheroes around the field
+# Glisser les superhéros à l’intérieur du terrain
 
-This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
+Cette tache peut vous aider à contrôler votre compréhension de plusieurs aspects du Glissez-déplacez et du DOM
 
-Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
+Donnez tous les éléments la classe `draggable` -- déplaçable. Comme une balle dans le chapitre. 
+Etapes requises:
 
-Requirements:
+- Utilisez la délégation d’évènement pour détecter start: un gestionnaire d’évènement unique  sur `document` pour l’évènement  `mousedown`.
+- Si les éléments sont glisses jusqu’a aux limites supérieures ou inferieure de la fenêtre – la page défile en haut/bas pour permettre plus de déplacement.
+- IL n’y a pas de défilement horizontal.
+- Les éléments déplaçables éléments ne doivent jamais quitter la fenêtre, même si après un déplacement  rapide de la souris.
 
-- Use event delegation to track drag start: a single event handler on `document` for `mousedown`.
-- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
-- There is no horizontal scroll.
-- Draggable elements should never leave the window, even after swift mouse moves.
+La démonstration est trop longue pour être contenue ici, voici un lien de cette dernière.
 
-The demo is too big to fit it here, so here's the link.
-
-[demo src="solution"]
+[demo src="solution"]
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ html, body {`
`10`	`10`	`float: left;`
`11`	`11`	`}`
`12`	`12`
`13`		`-/* heroes and the ball (dragables) */`
	`13`	`+/* heros et la balle (deplacable) */`
`14`	`14`
`15`	`15`	`.hero {`
`16`	`16`	`background: url(https://js.cx/drag-heroes/heroes.png);`