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

package/dist/ci360.utils.js

@@ -1,11 +1,13 @@
-'use strict';
+"use strict";
 
 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;
+exports.setView360Icon = exports.get360ViewProps = exports.debounce = void 0;
 
-var _ci = require('./ci360.constants');
+var _ci = require("./ci360.constants");
+
+var _this = void 0;
 
 //TODO [deprecated]: remove filename, amount in the upcoming versions
 var get360ViewProps = function get360ViewProps(image) {
@@ -14,7 +16,8 @@ var get360ViewProps = function get360ViewProps(image) {
     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,
+    imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null,
+    imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null,
     indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 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),
@@ -22,27 +25,19 @@ var get360ViewProps = function get360ViewProps(image) {
     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'),
+    keysReverse: isTrue(image, 'keys-reverse'),
     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'),
+    pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10),
     bottomCircle: isTrue(image, 'bottom-circle'),
     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',
+    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
     ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     lazyload: isTrue(image, 'lazyload'),
@@ -51,14 +46,17 @@ var get360ViewProps = function get360ViewProps(image) {
     controlReverse: isTrue(image, 'control-reverse'),
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
-    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg'
+    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
+    containerWidth: parseInt(attr(image, 'width') || attr(image, 'data-width'), 10) || 0,
+    containerHeight: parseInt(attr(image, 'height') || attr(image, 'data-height'), 10) || 0
   };
 };
 
+exports.get360ViewProps = get360ViewProps;
+
 var isTrue = function isTrue(image, type) {
   var imgProp = attr(image, type);
-  var imgDataProp = attr(image, 'data-' + type);
-
+  var imgDataProp = attr(image, "data-".concat(type));
   return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';
 };
 
@@ -67,201 +65,23 @@ var attr = function attr(element, attribute) {
 };
 
 var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
-  view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + logoSrc + '\') 50% 50% / contain no-repeat';
+  view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain 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 w = void 0,
-      h = void 0,
-      bw = void 0;
-  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.backgroundImage = "url('" + src + "')";
-  glass.style.backgroundSize = backgroundSizeX + 'px ' + backgroundSizeY + 'px';
-
-  bw = 3;
-  w = glass.offsetWidth / 2;
-  h = glass.offsetHeight / 2;
-
-  glass.addEventListener("mousemove", moveMagnifier);
-  container.addEventListener("mousemove", 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;
-
-    pos = getCursorPos(e);
-    x = pos.x;
-    y = pos.y;
-
-    if (x > container.offsetWidth - w / zoom) {
-      x = container.offsetWidth - w / zoom;
-    }
-
-    if (x < w / zoom) {
-      x = w / zoom;
-    }
-
-    if (y > container.offsetHeight - h / zoom) {
-      y = container.offsetHeight - h / zoom;
-    }
-
-    if (y < h / zoom) {
-      y = h / zoom;
-    }
-
-    glass.style.left = x - w + "px";
-    glass.style.top = y - h + "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) {
-    var a = void 0,
-        x = 0,
-        y = 0;
-    e = e || window.event;
-    a = container.getBoundingClientRect();
-    x = e.pageX - a.left;
-    y = e.pageY - a.top;
-    x = x - window.pageXOffset;
-    y = y - window.pageYOffset;
-
-    return { x: x, y: y };
-  }
-};
-
-var getSizeLimit = function getSizeLimit(currentSize) {
-  if (currentSize <= 25) return '25';
-  if (currentSize <= 50) return '50';
-
-  return (Math.ceil(currentSize / 100) * 100).toString();
-};
-
-var getSizeAccordingToPixelRatio = function getSizeAccordingToPixelRatio(size) {
-  var splittedSizes = size.toString().split('x');
-  var result = [];
-
-  [].forEach.call(splittedSizes, function (size) {
-    result.push(size * Math.round(window.devicePixelRatio || 1));
-  });
-
-  return result.join('x');
-};
-
-var getResponsiveWidthOfContainer = function getResponsiveWidthOfContainer(width) {
-  return getSizeLimit(width);
-};
-
-var fit = function fit(contains) {
-  return function (parentWidth, parentHeight, childWidth, childHeight) {
-    var scale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-    var offsetX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0.5;
-    var offsetY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.5;
-
-    var childRatio = childWidth / childHeight;
-    var parentRatio = parentWidth / parentHeight;
-    var width = parentWidth * scale;
-    var height = parentHeight * scale;
-
-    if (contains ? childRatio > parentRatio : childRatio < parentRatio) {
-      height = width / childRatio;
-    } else {
-      width = height * childRatio;
-    }
-
-    return {
-      width: width,
-      height: height,
-      offsetX: (parentWidth - width) * offsetX,
-      offsetY: (parentHeight - height) * offsetY
-    };
-  };
-};
-
-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) {
-  if (el.classList) el.classList.add(className);else el.className += ' ' + className;
-};
-
-var removeClass = function removeClass(el, className) {
-  if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-};
-
-var pad = function pad(n) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  n = n + '';
-
-  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
-};
+exports.setView360Icon = setView360Icon;
 
 var debounce = function debounce(func, timeout) {
-  var timer = void 0;
+  var timer;
   return function () {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     clearTimeout(timer);
-
     timer = setTimeout(function () {
-      func.apply(undefined, args);
+      func.apply(_this, args);
     }, timeout);
   };
 };
 
-exports.get360ViewProps = get360ViewProps;
-exports.setView360Icon = setView360Icon;
-exports.magnify = magnify;
-exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;
-exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;
-exports.contain = contain;
-exports.addClass = addClass;
-exports.removeClass = removeClass;
-exports.pad = pad;
-exports.isTwoFingers = isTwoFingers;
-exports.getMaxZoomIntensity = getMaxZoomIntensity;
-exports.normalizeZoomFactor = normalizeZoomFactor;
 exports.debounce = debounce;

package/dist/index.js

@@ -1,25 +1,21 @@
-'use strict';
+"use strict";
 
-require('core-js/features/array/for-each');
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require('core-js/features/array/filter');
+require("core-js/features/array/for-each");
 
-require('core-js/features/array/includes');
+require("core-js/features/array/filter");
 
-var _ci = require('./ci360.service');
+require("core-js/features/array/includes");
 
-var _ci2 = _interopRequireDefault(_ci);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ci = _interopRequireDefault(require("./ci360.service"));
 
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-
   [].slice.call(view360Array).forEach(function (container) {
-    viewers.push(new _ci2.default(container));
+    viewers.push(new _ci.default(container));
   });
-
   window.CI360._viewers = viewers;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.2-beta.1",
+  "version": "2.7.2-beta.6",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -33,24 +33,27 @@
     "publish-demo": "npm run build-demo && npm run deploy-demo"
   },
   "dependencies": {
-    "core-js": "^3.0.0"
+    "core-js": "^3.0.0",
+    "js-cloudimage-360-view-utils": "^1.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
+    "@babel/cli": "^7.16.7",
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "babel-loader": "^8.2.3",
     "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",
+    "babel-preset-stage-0": "^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": "^4.46.0",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"
   }