compare-images-slider 1.0.0 → 1.0.2

package/README.md

@@ -2,6 +2,24 @@
 
 A simple slider for comparing two images visually.
 
+<img style="max-width: 100%" src="https://i.imgur.com/e9m4QaU.jpeg" alt="Compare Images Slider Screenshot">
+
+## Features
+
+- Lightweight
+- Minimal DOM depth
+- No dependencies
+- Mobile friendly
+- Vertical slider
+- Inertia physics
+- Bounce back
+- Customizable via CSS
+
+## Demo
+
+[Check out the demo](https://stamat.github.io/compare-images-slider/)
+
+
 ## Installation
 
 ```bash
@@ -51,15 +69,41 @@ document.addEventListener('CompareImagesSliderLoaded', function() {
 
 ## Options
 
-Coming soon...
+```javascript
+// Default options
+const options = {
+  inertia: false, // inertia physics, you can flick the handle
+  friction: 0.9, // the friction of the inertia
+  bounce: false, // will bounce back when intertia is enabled and the boundary is reached
+  bounceFactor: 0.1, // the force of the bounce
+  vertical: false, // vertical slider
+  onlyHandle: true // only the handle is draggable
+}
+
+new CompareImagesSlider(slider, options);
+```
+
+Available attribute options:
+
+- `vertical` - vertical slider or `data-vertical`
+
+```html
+<div class="js-compare-images-slider compare-images-slider" vertical>
+  <img src="img.jpg" alt="">
+  <div class="frame">
+    <img src="img-alt.jpg" alt="">
+  </div>
+  <span class="handle"></span>
+</div>
+```
 
 ## TODO:
 
-- [ ] Add options
-- [ ] Scroll block on drag
-- [ ] Vertical option
-- [ ] Add factory class, migrate the general factory class to the book of spells prior to that
-- [ ] Refactor onDrag and move it to the book of spells
+- [x] Add options
+- [x] Scroll block on drag
+- [x] Vertical option
+- [ ] Add factory class, migrate the general factory class to the book of spells prior to that? Better turn this into custom element!
+- [x] Refactor onDrag and move it to the book of spells
 - [ ] Add initialized state, don't initialize twice
 
 ---

package/dist/compare-images-slider.css

@@ -1,4 +1,4 @@
-/* compare-images-slider v1.0.0 | https://stamat.github.io/compare-images-slider/ | MIT License */
+/* compare-images-slider v1.0.2 | https://stamat.github.io/compare-images-slider/ | MIT License */
 @charset "UTF-8";
 :root {
   --compare-images-slider-initial-position: 50%;
@@ -17,6 +17,7 @@
 .compare-images-slider > img {
   max-width: 100%;
   height: auto;
+  display: block;
 }
 .compare-images-slider .frame {
   position: absolute;
@@ -29,6 +30,7 @@
 }
 .compare-images-slider .frame > img {
   height: auto;
+  display: block;
 }
 .compare-images-slider .handle {
   position: absolute;
@@ -44,6 +46,7 @@
 .compare-images-slider .handle:after {
   position: absolute;
   top: 50%;
+  left: 50%;
   width: 42px;
   height: 42px;
   transform: translate3d(-50%, -50%, 0);
@@ -54,4 +57,20 @@
   text-align: center;
   border-radius: 21px;
 }
+.compare-images-slider[data-vertical] .frame, .compare-images-slider[vertical] .frame {
+  width: 100%;
+  height: var(--compare-images-slider-initial-position);
+}
+.compare-images-slider[data-vertical] .handle, .compare-images-slider[vertical] .handle {
+  left: 0;
+  top: var(--compare-images-slider-initial-position);
+  width: 100%;
+  height: 2px;
+  margin-top: -1px;
+  margin-left: 0;
+  cursor: ns-resize;
+}
+.compare-images-slider[data-vertical] .handle:after, .compare-images-slider[vertical] .handle:after {
+  content: "↕";
+}
 /*# sourceMappingURL=compare-images-slider.css.map */

package/dist/compare-images-slider.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["file:///Users/stamat/Sites/localhost/compare-images-slider/src/styles/index.scss"],"names":[],"mappings":";;AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA","sourcesContent":[":root {\n  --compare-images-slider-initial-position: 50%;\n}\n\n.compare-images-slider {\n  display: block;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n\n  img {\n    pointer-events: none;\n  }\n\n  & > img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  .frame {\n    position: absolute;\n    top:0;\n    left: 0;\n    height: 100%;\n    width: var(--compare-images-slider-initial-position);\n    overflow: hidden;\n    z-index: 2;\n\n    & > img {\n      height: auto;\n    }\n  }\n\n  .handle {\n    position:absolute;\n    left: var(--compare-images-slider-initial-position);\n    top:0;\n    bottom:0;\n    width: 2px;\n    margin-left: -1px;\n    height: 100%;\n    cursor: ew-resize;\n    z-index: 3;\n  }\n\n  .handle:after {\n    position: absolute;\n    top: 50%;\n    width: 42px;\n    height: 42px;\n    transform: translate3d(-50%, -50%, 0);\n\n    content:'↔';\n    line-height: 38px;\n    font-size: 28px;\n    background: #fff;\n    text-align: center;\n    border-radius: 21px;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["file:///Users/stamat/Sites/localhost/compare-images-slider/src/styles/index.scss"],"names":[],"mappings":";;AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","sourcesContent":[":root {\n  --compare-images-slider-initial-position: 50%;\n}\n\n.compare-images-slider {\n  display: block;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n\n  img {\n    pointer-events: none;\n  }\n\n  & > img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  .frame {\n    position: absolute;\n    top:0;\n    left: 0;\n    height: 100%;\n    width: var(--compare-images-slider-initial-position);\n    overflow: hidden;\n    z-index: 2;\n\n    & > img {\n      height: auto;\n      display: block;\n    }\n  }\n\n  .handle {\n    position:absolute;\n    left: var(--compare-images-slider-initial-position);\n    top:0;\n    bottom:0;\n    width: 2px;\n    margin-left: -1px;\n    height: 100%;\n    cursor: ew-resize;\n    z-index: 3;\n  }\n\n  .handle:after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 42px;\n    height: 42px;\n    transform: translate3d(-50%, -50%, 0);\n\n    content:'↔';\n    line-height: 38px;\n    font-size: 28px;\n    background: #fff;\n    text-align: center;\n    border-radius: 21px;\n  }\n\n  &[data-vertical],\n  &[vertical] {\n    .frame {\n      width: 100%;\n      height: var(--compare-images-slider-initial-position);\n    }\n\n    .handle {\n      left: 0;\n      top: var(--compare-images-slider-initial-position);\n      width: 100%;\n      height: 2px;\n      margin-top: -1px;\n      margin-left: 0;\n      cursor: ns-resize;\n    }\n\n    .handle:after {\n      content:'↕';\n    }\n  }\n}\n"]}

package/dist/compare-images-slider.js

@@ -1,81 +1,177 @@
-/* compare-images-slider v1.0.0 | https://stamat.github.io/compare-images-slider/ | MIT License */
+/* compare-images-slider v1.0.2 | https://stamat.github.io/compare-images-slider/ | MIT License */
 (() => {
   // node_modules/book-of-spells/src/helpers.mjs
+  function shallowMerge(target, source) {
+    for (const key in source) {
+      target[key] = source[key];
+    }
+    return target;
+  }
+  function isObject(o) {
+    return typeof o === "object" && !Array.isArray(o) && o !== null;
+  }
+  function isFunction(o) {
+    return typeof o === "function";
+  }
   function percentage(num, total) {
     if (!num || !total || Number.isNaN(num) || Number.isNaN(total))
       return 0;
     return num / total * 100;
   }
 
-  // src/scripts/compare-images-slider.js
-  function onDrag(element, callback) {
-    let startX = 0;
-    let startY = 0;
-    let endX = 0;
-    let endY = 0;
+  // node_modules/book-of-spells/src/dom.mjs
+  function drag(element, opts) {
+    if (!element || !(element instanceof Element))
+      return;
+    if (element.getAttribute("drag-enabled") === "true")
+      return;
+    let x = 0;
+    let y = 0;
+    let prevX = 0;
+    let prevY = 0;
+    let velocityX = 0;
+    let velocityY = 0;
     let dragging = false;
-    let rect = element.getBoundingClientRect();
+    let rect = null;
+    let inertiaId = null;
+    const options = {
+      inertia: false,
+      bounce: false,
+      friction: 0.9,
+      bounceFactor: 0.2,
+      callback: null,
+      preventDefaultTouch: true
+    };
+    if (isFunction(opts)) {
+      options.callback = opts;
+    } else if (isObject(opts)) {
+      shallowMerge(options, opts);
+    }
+    options.friction = Math.abs(options.friction);
+    options.bounceFactor = Math.abs(options.bounceFactor);
+    element.setAttribute("drag-enabled", "true");
+    element.setAttribute("dragging", "false");
+    const calcPageRelativeRect = function() {
+      const origRect = element.getBoundingClientRect();
+      const rect2 = {
+        top: origRect.top + window.scrollY,
+        left: origRect.left + window.scrollX,
+        width: origRect.width,
+        height: origRect.height
+      };
+      return rect2;
+    };
+    rect = calcPageRelativeRect();
     const handleStart = function(e) {
-      const carrier = e.type === "touchstart" ? e.touches[0] : e;
-      startX = carrier.clientX;
-      startY = carrier.clientY;
+      setXY(e);
       dragging = true;
-      rect = element.getBoundingClientRect();
-      const xPercentage = percentage(startX - rect.left, rect.width);
-      const yPercentage = percentage(startY - rect.top, rect.height);
-      const event = new CustomEvent("dragstart", { detail: { target: element, startX, startY, rect, xPercentage, yPercentage } });
+      rect = calcPageRelativeRect();
+      element.setAttribute("dragging", "true");
+      if (inertiaId) {
+        cancelAnimationFrame(inertiaId);
+        inertiaId = null;
+      }
+      const event = new CustomEvent("dragstart", { detail: getDetail() });
       element.dispatchEvent(event);
     };
     const handleMove = function(e) {
       if (!dragging)
         return;
-      const carrier = e.type === "touchmove" ? e.touches[0] : e;
-      endX = carrier.clientX;
-      endY = carrier.clientY;
-      handleDragGesture();
+      setXY(e);
+      velocityX = x - prevX;
+      velocityY = y - prevY;
+      const detail = getDetail();
+      if (options.callback)
+        options.callback(detail);
+      const event = new CustomEvent("drag", { detail });
+      element.dispatchEvent(event);
     };
     const handleEnd = function() {
       dragging = false;
-      const event = new CustomEvent("dragend", { detail: { target: element, startX, startY, rect, endX, endY } });
+      element.setAttribute("dragging", "false");
+      if (options.inertia)
+        inertiaId = requestAnimationFrame(inertia);
+      const event = new CustomEvent("dragend", { detail: getDetail() });
       element.dispatchEvent(event);
     };
-    const handleDragGesture = function() {
-      const deltaX = endX - startX;
-      const deltaY = endY - startY;
-      const left = deltaX < 0;
-      const up = deltaY < 0;
-      const xPercentage = percentage(endX - rect.left, rect.width);
-      const yPercentage = percentage(endY - rect.top, rect.height);
+    const setXY = function(e) {
+      const carrier = e.touches ? e.touches[0] : e;
+      if (e.touches && options.preventDefaultTouch)
+        e.preventDefault();
+      prevX = x;
+      prevY = y;
+      x = carrier.pageX;
+      y = carrier.pageY;
+    };
+    const getDetail = function() {
+      const relativeX = x - rect.left;
+      const relativeY = y - rect.top;
+      const xPercentage = percentage(relativeX, rect.width);
+      const yPercentage = percentage(relativeY, rect.height);
       const detail = {
         target: element,
-        deltaX,
-        deltaY,
-        startX,
-        startY,
-        endX,
-        endY,
-        horizontalDirection: left ? "left" : "right",
-        verticalDirection: up ? "up" : "down",
+        x,
+        y,
+        relativeX,
+        relativeY,
         xPercentage,
-        yPercentage
+        yPercentage,
+        velocityX,
+        velocityY,
+        prevX,
+        prevY
       };
-      if (xPercentage < 0) {
+      if (xPercentage < 0)
         detail.xPercentage = 0;
-      }
-      if (xPercentage > 100) {
+      if (xPercentage > 100)
         detail.xPercentage = 100;
-      }
-      if (yPercentage < 0) {
+      if (yPercentage < 0)
         detail.yPercentage = 0;
-      }
-      if (yPercentage > 100) {
+      if (yPercentage > 100)
         detail.yPercentage = 100;
+      return detail;
+    };
+    const inertia = function() {
+      x += velocityX;
+      y += velocityY;
+      velocityX *= options.friction;
+      velocityY *= options.friction;
+      if (options.bounce) {
+        if (x < rect.left) {
+          x = rect.left;
+          velocityX *= -options.bounceFactor;
+        }
+        if (x > rect.width + rect.left) {
+          x = rect.width + rect.left;
+          velocityX *= -options.bounceFactor;
+        }
+        if (y < rect.top) {
+          y = rect.top;
+          velocityY *= -options.bounceFactor;
+        }
+        if (y > rect.height + rect.top) {
+          y = rect.height + rect.top;
+          velocityY *= -options.bounceFactor;
+        }
       }
-      if (callback) {
-        callback(detail);
+      if (Math.abs(velocityX) < 0.1)
+        velocityX = 0;
+      if (Math.abs(velocityY) < 0.1)
+        velocityY = 0;
+      const detail = getDetail();
+      if (velocityX !== 0 || velocityY !== 0) {
+        if (options.callback)
+          options.callback(detail);
+        const event = new CustomEvent("draginertia", { detail });
+        element.dispatchEvent(event);
+        inertiaId = requestAnimationFrame(inertia);
+      } else {
+        inertiaId = null;
+        if (options.callback)
+          options.callback(detail);
+        const event = new CustomEvent("draginertiaend", { detail });
+        element.dispatchEvent(event);
       }
-      const event = new CustomEvent("drag", { detail });
-      element.dispatchEvent(event);
     };
     element.addEventListener("mousedown", handleStart);
     element.addEventListener("mousemove", handleMove);
@@ -91,35 +187,100 @@
         element.removeEventListener("touchstart", handleStart);
         element.removeEventListener("touchmove", handleMove);
         element.removeEventListener("touchend", handleEnd);
+        if (inertiaId) {
+          cancelAnimationFrame(inertiaId);
+          inertiaId = null;
+        }
       }
     };
   }
+
+  // src/scripts/compare-images-slider.js
   var CompareImagesSlider = class {
     constructor(element, options) {
       this.element = element;
       this.frame = this.element.querySelector(".frame");
       this.second = this.frame.querySelector(":scope > img");
       this.handle = this.element.querySelector(".handle");
+      this.options = {
+        inertia: false,
+        bounce: false,
+        friction: 0.9,
+        bounceFactor: 0.1,
+        onlyHandle: true,
+        vertical: false
+      };
+      if (options)
+        shallowMerge(this.options, options);
+      this.checkAndApplyAttribute("vertical");
+      if (this.options.vertical && !(this.element.dataset.vertical || this.element.hasAttribute("vertical")))
+        this.element.setAttribute("vertical", "");
+      if (this.options.onlyHandle)
+        this.options.preventDefaultTouch = false;
       window.addEventListener("resize", () => {
         requestAnimationFrame(this.setupSecondImage.bind(this));
       });
       this.setupSecondImage();
-      this.drag = onDrag(this.element);
-      this.element.addEventListener("dragstart", this.updateVisibleHandler.bind(this));
-      this.element.addEventListener("drag", this.updateVisibleHandler.bind(this));
+      this.drag = drag(this.element, this.options);
+      this.handleDragBound = false;
+      this.boundUpdateVisibleHandler = this.updateVisibleHandler.bind(this);
+      const preventDefault = (e) => {
+        if (this.handleDragBound)
+          e.preventDefault();
+      };
+      const addEventListeners = () => {
+        if (this.handleDragBound)
+          return;
+        this.handleDragBound = true;
+        this.element.addEventListener("dragstart", this.boundUpdateVisibleHandler);
+        this.element.addEventListener("drag", this.boundUpdateVisibleHandler);
+        this.element.addEventListener("draginertia", this.boundUpdateVisibleHandler);
+        this.element.addEventListener("draginertiaend", () => {
+          this.element.removeEventListener("draginertia", this.boundUpdateVisibleHandler);
+        });
+        this.element.addEventListener("touchstart", preventDefault);
+      };
+      const removeEventListeners = () => {
+        if (!this.handleDragBound)
+          return;
+        this.handleDragBound = false;
+        this.element.removeEventListener("dragstart", this.boundUpdateVisibleHandler);
+        this.element.removeEventListener("drag", this.boundUpdateVisibleHandler);
+        this.element.removeEventListener("touchstart", preventDefault);
+      };
+      if (this.options.onlyHandle) {
+        this.handle.addEventListener("mousedown", addEventListeners);
+        this.handle.addEventListener("touchstart", addEventListeners);
+        document.addEventListener("mouseup", removeEventListeners);
+        document.addEventListener("touchend", removeEventListeners);
+      } else {
+        this.element.addEventListener("dragstart", this.boundUpdateVisibleHandler);
+        this.element.addEventListener("drag", this.boundUpdateVisibleHandler);
+        this.element.addEventListener("draginertia", this.boundUpdateVisibleHandler);
+      }
+    }
+    checkAndApplyAttribute(attribute) {
+      if (this.element.dataset[attribute] || this.element.hasAttribute(attribute))
+        this.options[attribute] = true;
     }
     setupSecondImage() {
       const width = this.element.offsetWidth + "px";
       this.second.style.width = width;
     }
     updateVisibleHandler(e) {
+      if (this.options.vertical) {
+        this.frame.style.height = e.detail.yPercentage + "%";
+        this.handle.style.top = e.detail.yPercentage + "%";
+        return;
+      }
       this.frame.style.width = e.detail.xPercentage + "%";
       this.handle.style.left = e.detail.xPercentage + "%";
     }
     destroy() {
       this.drag.destroy();
-      this.element.removeEventListener("dragstart", this.updateVisibleHandler.bind(this));
-      this.element.removeEventListener("drag", this.updateVisibleHandler.bind(this));
+      this.element.removeEventListener("dragstart", this.boundUpdateVisibleHandler);
+      this.element.removeEventListener("drag", this.boundUpdateVisibleHandler);
+      this.element.removeEventListener("draginertia", this.boundUpdateVisibleHandler);
     }
   };