@hyper-proto/iv-viewer 2.3.0

package/lib/Slider.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _util = require("./util");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var Slider = /*#__PURE__*/function () {
+  function Slider(container, _ref) {
+    var _this = this;
+    var _onStart = _ref.onStart,
+      _onMove = _ref.onMove,
+      onEnd = _ref.onEnd,
+      isSliderEnabled = _ref.isSliderEnabled;
+    _classCallCheck(this, Slider);
+    _defineProperty(this, "startHandler", function (eStart) {
+      if (!_this.isSliderEnabled()) return;
+      _this.removeListeners();
+      eStart.preventDefault();
+      var moveHandler = _this.moveHandler,
+        endHandler = _this.endHandler,
+        onStart = _this.onStart;
+      var 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);
+    });
+    _defineProperty(this, "moveHandler", function (eMove) {
+      if (!_this.isSliderEnabled()) return;
+      eMove.preventDefault();
+      var sx = _this.sx,
+        sy = _this.sy,
+        onMove = _this.onMove;
+      var isTouchEvent = _this.touchMoveEvent === 'touchmove';
+
+      // get the coordinates
+      var mx = isTouchEvent ? eMove.touches[0].clientX : eMove.clientX;
+      var my = isTouchEvent ? eMove.touches[0].clientY : eMove.clientY;
+      onMove(eMove, {
+        dx: mx - sx,
+        dy: my - sy,
+        mx: mx,
+        my: my
+      });
+    });
+    _defineProperty(this, "endHandler", function () {
+      if (!_this.isSliderEnabled()) return;
+      _this.removeListeners();
+      _this.onEnd();
+    });
+    this.container = container;
+    this.isSliderEnabled = isSliderEnabled;
+    this.onStart = _onStart || _util.noop;
+    this.onMove = _onMove || _util.noop;
+    this.onEnd = onEnd || _util.noop;
+  }
+  return _createClass(Slider, [{
+    key: "removeListeners",
+    value:
+    // remove previous events if it's not removed
+    // - Case when while sliding mouse moved out of document and released there
+    function removeListeners() {
+      if (!this.touchMoveEvent) return;
+      document.removeEventListener(this.touchMoveEvent, this.moveHandler);
+      document.removeEventListener(this.touchEndEvent, this.endHandler);
+      document.removeEventListener('contextmenu', this.endHandler);
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this2 = this;
+      ['touchstart', 'mousedown'].forEach(function (evt) {
+        _this2.container.addEventListener(evt, _this2.startHandler);
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this3 = this;
+      ['touchstart', 'mousedown'].forEach(function (evt) {
+        _this3.container.removeEventListener(evt, _this3.startHandler);
+      });
+      this.removeListeners();
+    }
+  }]);
+}();
+var _default = exports["default"] = Slider;

package/lib/dist.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ImageViewer = _interopRequireDefault(require("./ImageViewer"));
+var _FullScreen = _interopRequireDefault(require("./FullScreen"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+_ImageViewer["default"].FullScreenViewer = _FullScreen["default"];
+var _default = exports["default"] = _ImageViewer["default"];

package/lib/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FullScreenViewer", {
+  enumerable: true,
+  get: function get() {
+    return _FullScreen["default"];
+  }
+});
+Object.defineProperty(exports, "ImageViewer", {
+  enumerable: true,
+  get: function get() {
+    return _ImageViewer["default"];
+  }
+});
+exports["default"] = void 0;
+var _ImageViewer = _interopRequireDefault(require("./ImageViewer"));
+var _FullScreen = _interopRequireDefault(require("./FullScreen"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _ImageViewer["default"];

package/lib/iv-viewer.css

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

package/lib/util.js

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

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hyper-proto/iv-viewer",
+  "author": "HyperProto",
+  "version": "2.3.0",
+  "description": "A zooming and panning plugin inspired by google photos for your web images.",
+  "main": "lib/index.js",
+  "types": "iv-viewer.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "src",
+    "iv-viewer.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyperproto-gh/iv-viewer.git"
+  },
+  "keywords": [
+    "image",
+    "zooming",
+    "panning",
+    "google",
+    "photos"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hyperproto-gh/iv-viewer/issues"
+  },
+  "homepage": "https://github.com/hyperproto-gh/iv-viewer#readme",
+  "scripts": {
+    "start": "npm run copy-assets & parcel example/index.html",
+    "copy-assets": "cp -R example/ temp",
+    "bundle": "cross-env npm run compile && npm run build-css && npm run bundle-dist",
+    "bundle-dist": "cross-env rollup -c rollup.config.mjs",
+    "build-css": "node build-css.cjs",
+    "compile": "cross-env NODE_ENV=production babel src --out-dir lib"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@babel/plugin-transform-object-rest-spread": "^7.28.6",
+    "@babel/preset-env": "^7.29.2",
+    "@eslint/js": "^10.0.1",
+    "@parcel/transformer-sass": "2.16.4",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "autoprefixer": "^10.4.27",
+    "cross-env": "^10.1.0",
+    "cssnano": "^7.1.4",
+    "eslint": "^10.2.0",
+    "globals": "^17.4.0",
+    "parcel": "^2.16.4",
+    "postcss": "^8.5.9",
+    "rollup": "^4.60.1",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-license": "^3.7.1",
+    "sass": "^1.99.0"
+  }
+}

package/src/FullScreen.js

@@ -0,0 +1,76 @@
+import { createElement, assignEvent, css, remove, removeCss } from './util';
+import ImageViewer from './ImageViewer';
+
+const fullScreenHtml = `
+  <div class="iv-fullscreen-container"></div>
+  <div class="iv-fullscreen-close"></div>
+`;
+
+class FullScreenViewer extends ImageViewer {
+  constructor (options = {}) {
+    const fullScreenElem = createElement({
+      tagName: 'div',
+      className: 'iv-fullscreen',
+      html: fullScreenHtml,
+      parent: document.body,
+    });
+
+    const container = fullScreenElem.querySelector('.iv-fullscreen-container');
+
+    // call the ImageViewer constructor
+    super(container, { ...options, refreshOnResize: false });
+
+    // add fullScreenElem on element list
+    this._elements.fullScreen = fullScreenElem;
+
+    this._initFullScreenEvents();
+  }
+  _initFullScreenEvents () {
+    const { fullScreen } = this._elements;
+    const closeBtn = fullScreen.querySelector('.iv-fullscreen-close');
+
+    // add close button event
+    this._events.onCloseBtnClick = assignEvent(closeBtn, 'click', this.hide);
+  }
+  show (imageSrc, hiResImageSrc) {
+    // show the element
+    css(this._elements.fullScreen, { display: 'block' });
+
+    // if image source is provide load image source
+    if (imageSrc) {
+      this.load(imageSrc, hiResImageSrc);
+    }
+
+    // handle window resize
+    this._events.onWindowResize = assignEvent(window, 'resize', this.refresh);
+
+    // disable scroll on html
+    css(document.querySelector('html'), { overflow: 'hidden' });
+  }
+  hide = () => {
+    // hide the fullscreen
+    css(this._elements.fullScreen, { display: 'none' });
+
+    // enable scroll
+    removeCss(document.querySelector('html'), 'overflow');
+
+    // remove window event
+    if (this._events.onWindowResize) {
+      this._events.onWindowResize();
+    }
+  };
+  destroy () {
+    const { fullScreen } = this._elements;
+
+    // restore scroll before removing elements
+    this.hide();
+
+    // destroy image viewer
+    super.destroy();
+
+    // remove the element
+    remove(fullScreen);
+  }
+}
+
+export default FullScreenViewer;