added resize handling

anuraghazra · Jul 6, 2019 · 110e284 · 110e284
1 parent d48d534
commit 110e284
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 49 deletions.
diff --git a/index.html b/index.html
@@ -24,9 +24,29 @@
   </script>
 
   <style>
+    * {
+      box-sizing: border-box;
+    }
     body {
       margin: 0 20px;
-    } 
+    }
+
+    body, html {
+      font-family: 'Francois One', sans-serif;
+      margin: 0;
+      padding: 0;
+      color: #f55693
+    }
+
+    .wrapper {
+      margin: 50px auto;
+      max-width: 980px;
+    }
+
+    section.all-sliders {
+      width: 100%;
+      float: left;
+    }
   </style>
 </head>
 
@@ -38,22 +58,22 @@
     <h1>Verly Range Slider</h1>
 
     <section class="all-sliders">
-      <label class="slidecontainer first">
+      <label class="slider-container first">
         <span>Juicy Purple</span>
         <input class="slider" id="range-slider" type="range" min="1" step="0.01" max="100" value="80">
       </label>
 
-      <label class="slidecontainer second">
+      <label class="slider-container second">
         <span>Lovely Pink</span>
         <input class="slider" id="range-slider2" type="range" min="1" step="0.01" max="100" value="20">
       </label>
 
-      <label class="slidecontainer third">
+      <label class="slider-container third">
         <span>Veg Green</span>
         <input class="slider" id="range-slider3" type="range" min="1" step="0.01" max="100" value="90">
       </label>
 
-      <label class="slidecontainer fourth">
+      <label class="slider-container fourth">
         <span>Awesome Blue</span>
         <input class="slider" id="range-slider4" type="range" min="1" step="0.01" max="100" value="20">
       </label>

diff --git a/src/VerlyRange.js b/src/VerlyRange.js
@@ -1,3 +1,8 @@
+/**
+ * @author Anurag Hazra
+ * @param {string} id 
+ * @param {string} color 
+ */
 function VerlyRange(id, color) {
   let DOMSlider = document.getElementById(id);
   let canvas = document.createElement('canvas');
@@ -9,32 +14,49 @@ function VerlyRange(id, color) {
   canvas.style.pointerEvents = 'none';
   canvas.style.transform = 'translate(0, -15px)';
   DOMSlider.parentElement.appendChild(canvas);
-
-
+
+  const gravity = new Vector(0, 0.3);
+
   // iteration, canvas, ctx
   let verly = new Verly(50, canvas, ctx);
+  let rope = generateRope();
+
+  // generic function to apply reset of rope wehn resizing
+  function generateRope() {
+    let rope = verly.createRope(0, 0, width / 20, 17, 0);
+    let lastIndex = rope.points.length - 1;
+    // rope extra tweaks
+    rope.setGravity(gravity);
+    rope.pin(lastIndex);
 
-  let rope = verly.createRope(0, 0, width / 20, 17, 0);
-  const lastIndex = rope.points.length - 1;
-  // rope extra tweaks
-  rope.setGravity(new Vector(0, 0.3));
-  rope.pin(lastIndex);
-
-  // rendering
-  rope.renderSticks = () => {
-    for (let i = 0; i < rope.sticks.length; i++) {
-      let stick = rope.sticks[i];
-      ctx.beginPath();
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 10;
-      ctx.lineCap = 'round';
-      ctx.moveTo(stick.startPoint.pos.x, stick.startPoint.pos.y);
-      ctx.lineTo(stick.endPoint.pos.x, stick.endPoint.pos.y);
-      ctx.stroke();
-      ctx.closePath();
+    // overwrite render function
+    rope.renderSticks = () => {
+      for (let i = 0; i < rope.sticks.length; i++) {
+        let stick = rope.sticks[i];
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 10;
+        ctx.lineCap = 'round';
+        ctx.moveTo(stick.startPoint.pos.x, stick.startPoint.pos.y);
+        ctx.lineTo(stick.endPoint.pos.x, stick.endPoint.pos.y);
+        ctx.stroke();
+        ctx.closePath();
+      }
     }
+    return rope;
   }
 
+  // handle resize 
+  window.addEventListener('resize', function () {
+    width = DOMSlider.scrollWidth
+    height = width / 2;
+    canvas.width = verly.WIDTH = width;
+    canvas.height = verly.HEIGHT = height;
+
+    rope = generateRope();
+
+    setRopePosition();
+  });
 
   // rope end point position
   function setRopePosition() {
@@ -44,12 +66,11 @@ function VerlyRange(id, color) {
     if (ratio < 0.3) ratio += 0.01;
     if (ratio > 0.6) ratio -= 0.01;
     if (ratio > 0.8) ratio -= 0.02;
-    rope.points[lastIndex].pos.x = (ratio * width);
+    rope.points[rope.points.length - 1].pos.x = (ratio * width);
   }
   setRopePosition();
   DOMSlider.addEventListener('input', setRopePosition);
 
-
   function animate() {
     ctx.clearRect(0, 0, width, height);
 

diff --git a/src/style.css b/src/style.css
@@ -1,27 +1,6 @@
-* {
-  box-sizing: border-box;
-}
-
-body, html {
-  font-family: 'Francois One', sans-serif;
-  margin: 0;
-  padding: 0;
-  color: #f55693
-}
-
 canvas { position: absolute }
 
-.wrapper {
-  margin: 50px auto;
-  max-width: 980px;
-}
-
-section.all-sliders {
-  width: 100%;
-  float: left;
-}
-
-.slidecontainer {
+.slider-container {
   width: 50%;
   float: left;
   margin: 80px 10px;