Project 27 complete

wwags33 · wwags33 · commit 0bce3ea2f1a7 · 2020-03-04T15:26:32.000-05:00
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Click and Drag</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
   <div class="items">
     <div class="item item1">01</div>
@@ -34,8 +36,8 @@
     <div class="item item25">25</div>
   </div>
 
-<script>
-</script>
+  <script src="typescripts.js"></script>
+
+</body>
 
-  </body>
-</html>
+</html>
diff --git a/27 - Click and Drag/typescripts.js b/27 - Click and Drag/typescripts.js
@@ -0,0 +1,25 @@
+var slider = document.querySelector('.items');
+var isDown = false;
+var startX, scrollLeft;
+slider.addEventListener('mousedown', function (e) {
+    isDown = true;
+    slider.classList.add('active');
+    startX = e.pageX - slider.offsetLeft;
+    scrollLeft = slider.scrollLeft;
+});
+slider.addEventListener('mouseleave', function () {
+    isDown = false;
+    slider.classList.remove('active');
+});
+slider.addEventListener('mouseup', function () {
+    isDown = false;
+    slider.classList.remove('active');
+});
+slider.addEventListener('mousemove', function (e) {
+    if (!isDown)
+        return;
+    e.preventDefault();
+    var x = e.pageX - slider.offsetLeft;
+    var walk = (x - startX) * 3;
+    slider.scrollLeft = scrollLeft - walk;
+});
diff --git a/27 - Click and Drag/typescripts.ts b/27 - Click and Drag/typescripts.ts
@@ -1,10 +1,37 @@
 /**
  * JavaScript30 by Wes Bos, https://javascript30.com/
  * TypeScript implementation by Will Wager
- * Project:
- * Concepts:
- * Key takeaways:
- * Sidenotes:
+ * Project: Click and Drag to Scroll
+ * Concepts: Mouse events to set a div's horizontal scroll.
+ * Key takeaways: Drag and drop event pattern; isDown (isDrawing) pattern;
+ *   Recalculate scroll from mousedown event.
+ * Sidenotes: Drag and dropping an element can be done similarly.
  * Compilation command:
  *   tsc --removeComments --strictNullChecks --noImplicitAny --target es5 typescripts.ts
  */
+
+const slider = document.querySelector('.items')! as HTMLDivElement;
+let isDown = false;
+let startX: number, scrollLeft: number;
+
+slider.addEventListener('mousedown', (e: MouseEvent) => {
+  isDown = true;
+  slider.classList.add('active');
+  startX = e.pageX - slider.offsetLeft;
+  scrollLeft = slider.scrollLeft;
+});
+slider.addEventListener('mouseleave', () => {
+  isDown = false;
+  slider.classList.remove('active');
+});
+slider.addEventListener('mouseup', () => {
+  isDown = false;
+  slider.classList.remove('active');
+});
+slider.addEventListener('mousemove', (e) => {
+  if (!isDown) return;
+  e.preventDefault();
+  const x = e.pageX - slider.offsetLeft;
+  const walk = (x - startX) * 3;
+  slider.scrollLeft = scrollLeft - walk;
+});
