@hyper-proto/iv-viewer 2.3.0

package/src/Slider.js

@@ -0,0 +1,97 @@
+import { noop } from './util';
+
+class Slider {
+  constructor (container, {
+    onStart, onMove, onEnd, isSliderEnabled,
+  }) {
+    this.container = container;
+    this.isSliderEnabled = isSliderEnabled;
+    this.onStart = onStart || noop;
+    this.onMove = onMove || noop;
+    this.onEnd = onEnd || noop;
+  }
+
+  startHandler = (eStart) => {
+    if (!this.isSliderEnabled()) return;
+
+    this.removeListeners();
+
+    eStart.preventDefault();
+
+    const { moveHandler, endHandler, onStart } = this;
+
+    const isTouchEvent = eStart.type === 'touchstart' || eStart.type === 'touchend';
+
+    this.touchMoveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
+    this.touchEndEvent = isTouchEvent ? 'touchend' : 'mouseup';
+
+    this.sx = isTouchEvent ? eStart.touches[0].clientX : eStart.clientX;
+
+    this.sy = isTouchEvent ? eStart.touches[0].clientY : eStart.clientY;
+
+    onStart(eStart, {
+      x: this.sx,
+      y: this.sy,
+    });
+
+    // add listeners
+    document.addEventListener(this.touchMoveEvent, moveHandler);
+    document.addEventListener(this.touchEndEvent, endHandler);
+    /*
+      add end handler in context menu as well.
+      As mouseup event is not trigger on context menu open
+      https://bugs.chromium.org/p/chromium/issues/detail?id=506801
+    */
+    document.addEventListener('contextmenu', endHandler);
+  };
+
+  moveHandler = (eMove) => {
+    if (!this.isSliderEnabled()) return;
+
+    eMove.preventDefault();
+    const { sx, sy, onMove } = this;
+
+    const isTouchEvent = this.touchMoveEvent === 'touchmove';
+
+    // get the coordinates
+    const mx = isTouchEvent ? eMove.touches[0].clientX : eMove.clientX;
+    const my = isTouchEvent ? eMove.touches[0].clientY : eMove.clientY;
+
+    onMove(eMove, {
+      dx: mx - sx,
+      dy: my - sy,
+      mx,
+      my,
+    });
+  };
+
+  endHandler = () => {
+    if (!this.isSliderEnabled()) return;
+    this.removeListeners();
+    this.onEnd();
+  };
+
+  // remove previous events if it's not removed
+  // - Case when while sliding mouse moved out of document and released there
+  removeListeners () {
+    if (!this.touchMoveEvent) return;
+    document.removeEventListener(this.touchMoveEvent, this.moveHandler);
+    document.removeEventListener(this.touchEndEvent, this.endHandler);
+    document.removeEventListener('contextmenu', this.endHandler);
+  }
+
+  init () {
+    ['touchstart', 'mousedown'].forEach((evt) => {
+      this.container.addEventListener(evt, this.startHandler);
+    });
+  }
+
+  destroy () {
+    ['touchstart', 'mousedown'].forEach((evt) => {
+      this.container.removeEventListener(evt, this.startHandler);
+    });
+    this.removeListeners();
+  }
+}
+
+export default Slider;

package/src/dist.js

@@ -0,0 +1,6 @@
+import ImageViewer from './ImageViewer';
+import FullScreenViewer from './FullScreen';
+
+ImageViewer.FullScreenViewer = FullScreenViewer;
+
+export default ImageViewer;

package/src/index.js

@@ -0,0 +1,5 @@
+import ImageViewer from './ImageViewer';
+
+export default ImageViewer;
+export { ImageViewer };
+export { default as FullScreenViewer } from './FullScreen';

package/src/scss/_iv-viewer.scss

@@ -0,0 +1,268 @@
+@use './variables' as *;
+
+.iv {
+  &-container {
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+  }
+
+  &-fullscreen {
+    position: fixed;
+    background: $iv-dark-gray;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: none;
+    z-index: 1000;
+  }
+
+  &-fullscreen-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  &-fullscreen-close {
+    position: absolute;
+    width: $iv-close-icon-size;
+    height: $iv-close-icon-size;
+    right: calc($iv-boundary-space / 2);
+    top: calc($iv-boundary-space / 2);
+    padding: calc($iv-boundary-space / 2);
+    cursor: pointer;
+    text-align: center;
+    overflow: hidden;
+    text-shadow: $iv-fullscreen-close-text-shadow;
+    transition: all ease 200ms;
+
+    &:after,
+    &:before {
+      content: "";
+      height: $iv-fullscreen-close-height;
+      width: $iv-close-icon-size;
+      background: $iv-white;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+
+    &:before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    &:after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+    &:hover {
+      transform: rotate(90deg);
+      transform-origin: 50% 50%;
+    }
+  }
+
+  /***** snap view css *****/
+  &-snap-view {
+    width: calc($iv-snap-view-width + 2px);
+    height: calc($iv-snap-view-height + 2px);
+    position: absolute;
+    top: $iv-boundary-space;
+    border: 1px solid $iv-snap-view-border-color;
+    background: $iv-black;
+    z-index: 100;
+    box-sizing: border-box;
+    transition: opacity ease 400ms;
+    opacity: 0;
+
+    @if ($iv-snap-view-on-left) {
+      left: $iv-boundary-space;
+    } @else {
+      right: $iv-boundary-space;
+    }
+  }
+
+  &-snap-image-wrap {
+    display: inline-block;
+    position: absolute;
+    max-width: $iv-snap-view-width;
+    max-height: $iv-snap-view-height;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+  }
+
+  &-snap-image {
+    position: relative;
+    touch-action: none;
+  }
+
+  &-snap-handle {
+    box-sizing: border-box;
+    position: absolute;
+    border: $iv-zoom-handle-border;
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0 0 200px rgba($iv-black, 0.5);
+    cursor: pointer;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /*** zoom actions ***/
+
+  &-zoom-actions {
+    width: 100%;
+    box-sizing: content-box;
+    position: absolute;
+    top: 150px;
+    left: -1px;
+    height: $iv-zoom-slider-height;
+    border: $iv-zoom-handle-border;
+    border-top: 0;
+    background: rgba($iv-black, 0.3);
+
+    &--has-buttons {
+      .iv-zoom-slider {
+        left: $iv-zoom-button-width;
+        right: $iv-zoom-button-width;
+      }
+    }
+  }
+
+  &-zoom-handle {
+    width: $iv-zoom-handle-width;
+    height: $iv-zoom-handle-height;
+    background: $iv-handle-color;
+    position: absolute;
+    cursor: pointer;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &-zoom-slider {
+    box-sizing: inherit;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &-button-zoom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: $iv-zoom-button-width;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:before,
+    &:after {
+      content: "";
+      height: $iv-zoom-button-icon-height;
+      width: $iv-zoom-button-icon-width;
+      background: $iv-zoom-button-color;
+      position: absolute;
+    }
+    &--in,
+    &--out {
+      @extend .iv-button-zoom;
+    }
+
+    &--in {
+      right: 0;
+      &:after {
+        transform: rotate(90deg);
+      }
+    }
+    &--out {
+      left: 0;
+    }
+  }
+
+  /**** snap view css end *****/
+  &-image-mode {
+    display: $iv-image-mode-display;
+  }
+
+  &-image-view {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &-image-wrap {
+    display: inline-block;
+    &:active {
+      cursor: move;
+    }
+  }
+
+  &-image {
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    touch-action: none;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &-loader {
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    width: $iv-loader-width;
+    height: $iv-loader-width;
+    z-index: 100;
+    margin-top: -16px;
+    margin-left: -16px;
+    font-size: 5px;
+    position: absolute;
+    text-indent: -9999em;
+    border: $iv-loader-border-color;
+    border-left: $iv-loader-active-border-color;
+    transform: translateZ(0);
+    animation: loading-icon 1.1s infinite linear;
+  }
+
+  &-loader:after {
+    width: 10em;
+    height: 10em;
+    border-radius: 50%;
+  }
+
+  @-webkit-keyframes loading-icon {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes loading-icon {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    &-snap-view {
+      z-index: -1;
+      visibility: hidden;
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -0,0 +1,43 @@
+//=========colors=========//
+$iv-white: #fff !default;
+$iv-light-gray: #aaa !default;
+$iv-gray: #6d6d6d !default;
+$iv-dark-gray: #0d0d0d !default;
+$iv-black: black;
+
+//========variables========//
+$iv-close-icon-size: 24px !default;
+$iv-boundary-space: 20px !default;
+$iv-handle-color: $iv-white !default;
+
+
+//========snapview========//
+$iv-snap-view-border-color: $iv-light-gray !default;
+$iv-snap-view-width: 150px !default;
+$iv-snap-view-height: 150px !default;
+$iv-snap-view-on-left: true !default;
+
+//========zoom========//
+$iv-zoom-slider-height: 20px !default;
+$iv-zoom-handle-height: $iv-zoom-slider-height !default;
+$iv-zoom-handle-width: 20px !default;
+$iv-zoom-handle-border: 1px solid $iv-light-gray !default;
+$iv-zoom-button-width: 24px !default;
+$iv-zoom-button-icon-height: 2px !default;
+$iv-zoom-button-icon-width: 10px !default;
+$iv-zoom-button-color: $iv-white !default;
+$iv-zoom-button-spacing: 4px !default;
+
+//========fullscreen========//
+$iv-fullscreen-bg-color: $iv-dark-gray !default;
+$iv-fullscreen-close-text-shadow: 0 0 3px $iv-gray !default;
+$iv-fullscreen-close-height: 4px !default;
+
+//========imagemode========//
+$iv-image-mode-display: inline-block !default;
+
+//========loader========//
+$iv-loader-width: 32px !default;
+$iv-loader-height: 32px !default;
+$iv-loader-border-color: 1.1em solid rgba($iv-black, 0.2) !default;
+$iv-loader-active-border-color: 1.1em solid $iv-white !default;

package/src/scss/build.scss

@@ -0,0 +1 @@
+@use './iv-viewer';

package/src/util.js

@@ -0,0 +1,158 @@
+// constants
+export const ZOOM_CONSTANT = 15; // increase or decrease value for zoom on mouse wheel
+export const MOUSE_WHEEL_COUNT = 5; // A mouse delta after which it should stop preventing default behaviour of mouse wheel
+
+export function noop () {}
+export function preventDefault (e) {
+  e.preventDefault();
+}
+
+// ease out method
+/*
+    t : current time,
+    b : initial value,
+    c : changed value,
+    d : duration
+*/
+export function easeOutQuart (t, b, c, d) {
+  t /= d;
+  t -= 1;
+  return -c * (t * t * t * t - 1) + b;
+}
+
+export function createElement (options) {
+  const elem = document.createElement(options.tagName);
+  if (options.id) elem.id = options.id;
+  if (options.html) elem.innerHTML = options.html;
+  if (options.className) elem.className = options.className;
+  if (options.src) elem.src = options.src;
+  if (options.style) elem.style.cssText = options.style;
+  if (options.child) elem.appendChild(options.child);
+
+  // Insert before
+  if (options.insertBefore) {
+    options.parent.insertBefore(elem, options.insertBefore);
+
+  // Standard append
+  } else {
+    options.parent.appendChild(elem);
+  }
+
+  return elem;
+}
+
+// method to add class
+export function addClass (el, className) {
+  const classNameAry = className.split(' ');
+
+  if (classNameAry.length > 1) {
+    classNameAry.forEach((classItem) => addClass(el, classItem));
+  } else if (el.classList) {
+    el.classList.add(className);
+  } else {
+    el.className += ` ${className}`;  
+  }
+}
+
+// method to remove class
+export function removeClass (el, className) {
+  const classNameAry = className.split(' ');
+  if (classNameAry.length > 1) {
+    classNameAry.forEach((classItem) => removeClass(el, classItem));
+  } else if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), ' ');  
+  }
+}
+
+// function to check if image is loaded
+export function imageLoaded (img) {
+  return img.complete && (typeof img.naturalWidth === 'undefined' || img.naturalWidth !== 0);
+}
+
+export function toArray (list) {
+  if (!(list instanceof NodeList || list instanceof HTMLCollection)) return [list];
+  return Array.prototype.slice.call(list);
+}
+
+export function assign (target, ...rest) {
+  rest.forEach((obj) => {
+    Object.keys(obj).forEach((key) => {
+      target[key] = obj[key];
+    });
+  });
+  return target;
+}
+
+export function css (elements, properties) {
+  const elmArray = toArray(elements);
+
+  if (typeof properties === 'string') {
+    return window.getComputedStyle(elmArray[0])[properties];
+  }
+
+  elmArray.forEach((element) => {
+    Object.keys(properties).forEach((key) => {
+      const value = properties[key];
+      element.style[key] = value;  
+    });
+  });
+
+  return undefined;
+}
+
+export function removeCss (element, property) {
+  element.style.removeProperty(property);
+}
+
+export function wrap (element, { tag = 'div', className, id, style }) {
+  const wrapper = document.createElement(tag);
+  if (className) wrapper.className = className;
+  if (id) wrapper.id = id;
+  if (style) wrapper.style = style;
+  element.parentNode.insertBefore(wrapper, element);
+  element.parentNode.removeChild(element);
+  wrapper.appendChild(element);
+  return wrapper;
+}
+
+export function unwrap (element) {
+  const parent = element.parentNode;
+
+  if (parent !== document.body) {
+    parent.parentNode.insertBefore(element, parent);
+    parent.parentNode.removeChild(parent);
+  }
+}
+
+export function remove (elements) {
+  const elmArray = toArray(elements);
+  elmArray.forEach((element) => {
+    element.parentNode.removeChild(element);
+  });
+}
+
+export function clamp (num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
+export function assignEvent (element, events, handler) {
+  if (typeof events === 'string') events = [events];
+
+  events.forEach((event) => {
+    element.addEventListener(event, handler);
+  });
+
+  return () => {
+    events.forEach((event) => {
+      element.removeEventListener(event, handler);
+    });
+  };
+}
+
+export function getTouchPointsDistance (touches) {
+  const touch0 = touches[0];
+  const touch1 = touches[1];
+  return Math.sqrt((touch1.pageX - touch0.pageX) ** 2 + (touch1.pageY - touch0.pageY) ** 2);
+}