js-cloudimage-360-view 2.6.0 → 2.7.2-beta.1

package/dist/ci360.utils.js

@@ -3,29 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.debounce = exports.normalizeZoomFactor = exports.getMaxZoomIntensity = exports.isTwoFingers = exports.pad = exports.removeClass = exports.addClass = exports.contain = exports.getSizeAccordingToPixelRatio = exports.getResponsiveWidthOfContainer = exports.magnify = exports.setView360Icon = exports.get360ViewProps = undefined;
+
+var _ci = require('./ci360.constants');
+
+//TODO [deprecated]: remove filename, amount in the upcoming versions
 var get360ViewProps = function get360ViewProps(image) {
   return {
     folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
-    filename: attr(image, 'filename') || attr(image, 'data-filename') || 'image-{index}.jpg',
+    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
+    filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
+    filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
     imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
     indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
-    amount: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || 36, 10),
+    amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),
+    amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10),
+    imageOffset: parseInt(attr(image, 'image-offset') || attr(image, 'data-image-offset')),
     speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
     dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
     keys: isTrue(image, 'keys'),
     boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'),
     autoplay: isTrue(image, 'autoplay'),
+    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _ci.AUTOPLAY_BEHAVIOR.SPIN_X,
+    playOnce: isTrue(image, 'play-once'),
+    disablePointerZoom: isTrue(image, 'disable-pointer-zoom'),
+    disablePinchZoom: isTrue(image, 'disable-pinch-zoom'),
+    onMouseLeave: attr(image, 'on-mouse-leave') || attr(image, 'data-on-mouse-leave'),
+    toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.CLICK_TO_START,
+    pointerZoomFactor: parseInt(attr(image, 'pointer-zoom-factor') || attr(image, 'data-pointer-zoom-factor') || 2, 10),
+    pinchZoomFactor: parseInt(attr(image, 'pinch-zoom-factor') || attr(image, 'data-pinch-zoom-factor') || 2, 10),
+    maxScale: parseFloat(attr(image, 'max-scale') || attr(image, 'data-max-scale') || 100, 10),
     autoplayReverse: isTrue(image, 'autoplay-reverse'),
     bottomCircle: isTrue(image, 'bottom-circle'),
-    fullScreen: isTrue(image, 'full-screen'),
+    disableDrag: isTrue(image, 'disable-drag'),
+    fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
     magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
+    magnifyInFullscreen: isTrue(image, 'magnify-in-fullscreen') || isTrue(image, 'magnifier-in-fullscreen'),
     bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
     ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,
     responsive: isTrue(image, 'responsive'),
     ciToken: attr(image, 'responsive') || attr(image, 'data-responsive') || 'demo',
-    ciSize: attr(image, 'size') || attr(image, 'data-size'),
-    ciOperation: attr(image, 'operation') || attr(image, 'data-operation') || 'width',
-    ciFilters: attr(image, 'filters') || attr(image, 'data-filters') || 'q35',
+    ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
+    ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     lazyload: isTrue(image, 'lazyload'),
     lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload',
     spinReverse: isTrue(image, 'spin-reverse'),
@@ -47,134 +66,32 @@ var attr = function attr(element, attribute) {
   return element.getAttribute(attribute);
 };
 
-var set360ViewIconStyles = function set360ViewIconStyles(view360Icon) {
-  view360Icon.style.position = 'absolute';
-  view360Icon.style.top = '0';
-  view360Icon.style.bottom = '0';
-  view360Icon.style.left = '0';
-  view360Icon.style.right = '0';
-  view360Icon.style.width = '100px';
-  view360Icon.style.height = '100px';
-  view360Icon.style.margin = 'auto';
-  view360Icon.style.backgroundColor = 'rgba(255,255,255,0.8)';
-  view360Icon.style.borderRadius = '50%';
-  view360Icon.style.boxShadow = 'rgb(255, 255, 255, 0.5) 0px 0px 4px';
-  view360Icon.style.transition = '0.5s all';
-  view360Icon.style.color = 'rgb(80,80,80)';
-  view360Icon.style.textAlign = 'center';
-  view360Icon.style.lineHeight = '100px';
-  view360Icon.style.zIndex = '2';
-};
-
 var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
   view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + logoSrc + '\') 50% 50% / contain no-repeat';
 };
 
-var set360ViewCircleIconStyles = function set360ViewCircleIconStyles(view360CircleIcon, bottomCircleOffset) {
-  view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
-  view360CircleIcon.style.position = 'absolute';
-  view360CircleIcon.style.top = 'auto';
-  view360CircleIcon.style.bottom = bottomCircleOffset + '%';
-  view360CircleIcon.style.left = '0';
-  view360CircleIcon.style.right = '0';
-  view360CircleIcon.style.width = '80%';
-  view360CircleIcon.style.height = 'auto';
-  view360CircleIcon.style.margin = 'auto';
-  view360CircleIcon.style.transition = '0.5s all';
-  view360CircleIcon.style.zIndex = '2';
-};
-
-var setLoaderStyles = function setLoaderStyles(loader) {
-  loader.className = 'cloudimage-360-loader';
-  loader.style.position = 'absolute';
-  loader.style.zIndex = '100';
-  loader.style.top = '0';
-  loader.style.left = '0';
-  loader.style.right = '0';
-  loader.style.width = '0%';
-  loader.style.height = '8px';
-  loader.style.background = 'rgb(165,175,184)';
-};
-
-var setBoxShadowStyles = function setBoxShadowStyles(boxShadow, boxShadowValue) {
-  boxShadow.className = 'cloudimage-360-box-shadow';
-  boxShadow.style.position = 'absolute';
-  boxShadow.style.zIndex = '99';
-  boxShadow.style.top = '0';
-  boxShadow.style.left = '0';
-  boxShadow.style.right = '0';
-  boxShadow.style.bottom = '0';
-  boxShadow.style.boxShadow = boxShadowValue;
-};
-
-var setMagnifyIconStyles = function setMagnifyIconStyles(magnifyIcon, fullScreen) {
-  magnifyIcon.style.position = 'absolute';
-  magnifyIcon.style.top = fullScreen ? '35px' : '5px';
-  magnifyIcon.style.right = '5px';
-  magnifyIcon.style.width = '25px';
-  magnifyIcon.style.height = '25px';
-  magnifyIcon.style.zIndex = '101';
-  magnifyIcon.style.cursor = 'pointer';
-  magnifyIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg\') 50% 50% / cover no-repeat';
-};
+var magnify = function magnify(container) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var src = arguments[2];
+  var glass = arguments[3];
+  var zoom = arguments[4];
 
-var setFullScreenModalStyles = function setFullScreenModalStyles(fullScreenModal) {
-  fullScreenModal.style.position = 'fixed';
-  fullScreenModal.style.top = '0';
-  fullScreenModal.style.bottom = '0';
-  fullScreenModal.style.left = '0';
-  fullScreenModal.style.right = '0';
-  fullScreenModal.style.width = '100%';
-  fullScreenModal.style.height = '100%';
-  fullScreenModal.style.zIndex = '999';
-  fullScreenModal.style.background = '#fff';
-};
-
-var setFullScreenIconStyles = function setFullScreenIconStyles(fullScreenIcon) {
-  fullScreenIcon.style.position = 'absolute';
-  fullScreenIcon.style.top = '5px';
-  fullScreenIcon.style.right = '5px';
-  fullScreenIcon.style.width = '25px';
-  fullScreenIcon.style.height = '25px';
-  fullScreenIcon.style.zIndex = '101';
-  fullScreenIcon.style.cursor = 'pointer';
-  fullScreenIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg\') 50% 50% / cover no-repeat';
-};
-
-var setCloseFullScreenViewStyles = function setCloseFullScreenViewStyles(closeFullScreenIcon) {
-  closeFullScreenIcon.style.position = 'absolute';
-  closeFullScreenIcon.style.top = '5px';
-  closeFullScreenIcon.style.right = '5px';
-  closeFullScreenIcon.style.width = '25px';
-  closeFullScreenIcon.style.height = '25px';
-  closeFullScreenIcon.style.zIndex = '101';
-  closeFullScreenIcon.style.cursor = 'pointer';
-  closeFullScreenIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg\') 50% 50% / cover no-repeat';
-};
-
-var magnify = function magnify(container, src, glass, zoom) {
   var w = void 0,
       h = void 0,
       bw = void 0;
-  glass.setAttribute("class", "img-magnifier-glass");
+  var _offset$x = offset.x,
+      offsetX = _offset$x === undefined ? 0 : _offset$x,
+      _offset$y = offset.y,
+      offsetY = _offset$y === undefined ? 0 : _offset$y;
+
+  var backgroundSizeX = (container.offsetWidth - offsetX * 2) * zoom;
+  var backgroundSizeY = (container.offsetHeight - offsetY * 2) * zoom;
+
+  glass.setAttribute("class", "cloudimage-360-img-magnifier-glass");
   container.prepend(glass);
 
-  glass.style.backgroundColor = '#fff';
   glass.style.backgroundImage = "url('" + src + "')";
-  glass.style.backgroundRepeat = "no-repeat";
-  glass.style.backgroundSize = container.offsetWidth * zoom + "px " + container.offsetHeight * zoom + "px";
-  glass.style.position = 'absolute';
-  glass.style.border = '3px solid #000';
-  glass.style.borderRadius = '50%';
-  glass.style.cursor = 'wait';
-  glass.style.lineHeight = '200px';
-  glass.style.textAlign = 'center';
-  glass.style.zIndex = '1000';
-
-  glass.style.width = '250px';
-  glass.style.height = '250px';
-  glass.style.top = '-75px';
-  glass.style.right = '-85px';
+  glass.style.backgroundSize = backgroundSizeX + 'px ' + backgroundSizeY + 'px';
 
   bw = 3;
   w = glass.offsetWidth / 2;
@@ -183,16 +100,14 @@ var magnify = function magnify(container, src, glass, zoom) {
   glass.addEventListener("mousemove", moveMagnifier);
   container.addEventListener("mousemove", moveMagnifier);
 
-  glass.addEventListener("touchmove", moveMagnifier);
-  container.addEventListener("touchmove", moveMagnifier);
+  glass.addEventListener("touchmove", moveMagnifier, { passive: true });
+  container.addEventListener("touchmove", moveMagnifier, { passive: true });
 
   function moveMagnifier(e) {
     var pos = void 0,
         x = void 0,
         y = void 0;
 
-    e.preventDefault();
-
     pos = getCursorPos(e);
     x = pos.x;
     y = pos.y;
@@ -216,7 +131,11 @@ var magnify = function magnify(container, src, glass, zoom) {
     glass.style.left = x - w + "px";
     glass.style.top = y - h + "px";
 
-    glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
+    var backgroundPosX = (x - offsetX) * zoom - w + bw;
+
+    var backgroundPosY = (y - offsetY) * zoom - h + bw;
+
+    glass.style.backgroundPosition = '-' + backgroundPosX + 'px -' + backgroundPosY + 'px';
   }
 
   function getCursorPos(e) {
@@ -282,6 +201,24 @@ var fit = function fit(contains) {
   };
 };
 
+var isTwoFingers = function isTwoFingers(event) {
+  return event.targetTouches.length === 2;
+};
+
+var getMaxZoomIntensity = function getMaxZoomIntensity(width, maxScale) {
+  var maxWidth = maxScale * width;
+  var maxIntensity = maxWidth - width;
+
+  return maxIntensity;
+};
+
+var normalizeZoomFactor = function normalizeZoomFactor(event, pointerZoomFactor) {
+  var scrollEvent = Math.abs(event.deltaY);
+  var zoomFactor = scrollEvent < 125 ? -pointerZoomFactor * 10 : -pointerZoomFactor;
+
+  return zoomFactor;
+};
+
 var contain = fit(true);
 
 var addClass = function addClass(el, className) {
@@ -300,20 +237,31 @@ var pad = function pad(n) {
   return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
 };
 
+var debounce = function debounce(func, timeout) {
+  var timer = void 0;
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    clearTimeout(timer);
+
+    timer = setTimeout(function () {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+
 exports.get360ViewProps = get360ViewProps;
-exports.set360ViewIconStyles = set360ViewIconStyles;
-exports.set360ViewCircleIconStyles = set360ViewCircleIconStyles;
-exports.setLoaderStyles = setLoaderStyles;
-exports.setBoxShadowStyles = setBoxShadowStyles;
 exports.setView360Icon = setView360Icon;
 exports.magnify = magnify;
-exports.setMagnifyIconStyles = setMagnifyIconStyles;
-exports.setFullScreenModalStyles = setFullScreenModalStyles;
-exports.setFullScreenIconStyles = setFullScreenIconStyles;
-exports.setCloseFullScreenViewStyles = setCloseFullScreenViewStyles;
 exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;
 exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;
 exports.contain = contain;
 exports.addClass = addClass;
 exports.removeClass = removeClass;
-exports.pad = pad;
+exports.pad = pad;
+exports.isTwoFingers = isTwoFingers;
+exports.getMaxZoomIntensity = getMaxZoomIntensity;
+exports.normalizeZoomFactor = normalizeZoomFactor;
+exports.debounce = debounce;

package/dist/static/css/style.css

@@ -0,0 +1,121 @@
+.cloudimage-360-icons-container {
+  position: absolute;
+  display: flex;
+  top: 5px;
+  right: 5px;
+  width: 30px;
+  height: 95%;
+  flex-direction: column;
+  align-items: center;
+  z-index: 101;
+}
+
+.cloudimage-360-magnifier-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-reset-zoom-icon {
+  display: none;
+  width: 30px;
+  height: 30px;
+  margin-top: auto;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-close-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 0%;
+  height: 8px;
+  background-color: rgb(165, 175, 184);
+  z-index: 100;
+}
+
+.cloudimage-360-box-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+}
+
+.cloudimage-360-view-360-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100px;
+  height: 100px;
+  margin: auto;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
+  transition: 0.5s all;
+  color: rgb(80, 80, 80);
+  text-align: center;
+  line-height: 100px;
+  z-index: 2;
+}
+
+.cloudimage-360-view-360-circle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 80%;
+  height: auto;
+  margin: auto;
+  transition: 0.5s all;
+  z-index: 2;
+}
+
+.cloudimage-360-fullscreen-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-color: #FFF;
+}
+
+.cloudimage-360-img-magnifier-glass {
+  background-color: #FFF;
+  background-repeat: no-repeat;
+  position: absolute;
+  border: 3px solid #000;
+  border-radius: 50%;
+  cursor: wait;
+  line-height: 200px;
+  text-align: center;
+  z-index: 1000;
+  width: 250px;
+  height: 250px;
+  top: -75px;
+  right: -85px;
+}

package/package.json

@@ -1,57 +1,57 @@
-{
-  "name": "js-cloudimage-360-view",
-  "version": "2.6.0",
-  "main": "dist/index.js",
-  "description": "",
-  "author": "scaleflex",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/scaleflex/js-cloudimage-360-view"
-  },
-  "homepage": "#readme",
-  "keywords": [
-    "image",
-    "images",
-    "cloudimage",
-    "360",
-    "photo",
-    "product",
-    "view",
-    "viewer",
-    "360 product view"
-  ],
-  "scripts": {
-    "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
-    "clean-build": "rm -rf build",
-    "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
-    "clean-dist": "rm -rf dist",
-    "dist": "npm run clean-dist && babel src -d dist --copy-files",
-    "clean-demo": "rm -rf examples/dist",
-    "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
-    "deploy-demo": "gh-pages -d examples/dist",
-    "publish-demo": "npm run build-demo && npm run deploy-demo"
-  },
-  "dependencies": {
-    "core-js": "^3.0.0"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-array-includes": "^2.0.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-minify": "^0.5.0",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^2.1.1",
-    "gh-pages": "^2.0.1",
-    "highlight.js": "^9.15.6",
-    "html-webpack-plugin": "^3.2.0",
-    "mobile-detect": "^1.4.3",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
-  }
-}
+{
+  "name": "js-cloudimage-360-view",
+  "version": "2.7.2-beta.1",
+  "main": "dist/index.js",
+  "description": "",
+  "author": "scaleflex",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleflex/js-cloudimage-360-view"
+  },
+  "homepage": "#readme",
+  "keywords": [
+    "image",
+    "images",
+    "cloudimage",
+    "360",
+    "photo",
+    "product",
+    "view",
+    "viewer",
+    "360 product view"
+  ],
+  "scripts": {
+    "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
+    "clean-build": "rm -rf build",
+    "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
+    "clean-dist": "rm -rf dist",
+    "dist": "npm run clean-dist && babel src -d dist --copy-files",
+    "clean-demo": "rm -rf examples/dist",
+    "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
+    "deploy-demo": "gh-pages -d examples/dist",
+    "publish-demo": "npm run build-demo && npm run deploy-demo"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-array-includes": "^2.0.3",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-minify": "^0.5.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^2.1.1",
+    "gh-pages": "^2.0.1",
+    "highlight.js": "^10.4.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mobile-detect": "^1.4.3",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  }
+}