js-cloudimage-360-view 3.0.0-beta.0 → 3.0.1

package/dist/utils/magnify/get-current-original-image.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrentOriginalImage = void 0;
+
+var _orientations = require("../../constants/orientations");
+
+var _regex = require("../../constants/regex");
+
+var getCurrentOriginalImage = function getCurrentOriginalImage(movingDirection, imagesX, imagesY, activeImageX, activeImageY) {
+  var currentImage = new Image();
+  var originalImagesXSrcs = imagesX.map(function (image) {
+    return image.src.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
+  });
+  var originalImagesYSrcs = imagesY.map(function (image) {
+    return image.src.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
+  });
+  currentImage.src = originalImagesXSrcs[activeImageX - 1];
+
+  if (movingDirection === _orientations.ORIENTATIONS.Y) {
+    currentImage.src = originalImagesYSrcs[activeImageY - 1];
+  }
+
+  return currentImage;
+};
+
+exports.getCurrentOriginalImage = getCurrentOriginalImage;

package/dist/utils/magnify/get-cursor-position.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCursorPosition = void 0;
+
+var getCursorPosition = function getCursorPosition() {
+  var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.event;
+  var container = arguments.length > 1 ? arguments[1] : undefined;
+  var x = 0;
+  var y = 0;
+  var a = container.getBoundingClientRect();
+  x = event.pageX - a.left;
+  y = event.pageY - a.top;
+  x -= window.pageXOffset;
+  y -= window.pageYOffset;
+  return {
+    x: x,
+    y: y
+  };
+};
+
+exports.getCursorPosition = getCursorPosition;

package/dist/utils/magnify/magnify.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.magnify = void 0;
+
+var _moveMagnifier = require("./move-magnifier");
+
+var magnify = function magnify(container, offset, currentImage, glass, zoom) {
+  var _ref = offset || {},
+      _ref$x = _ref.x,
+      offsetX = _ref$x === void 0 ? 0 : _ref$x,
+      _ref$y = _ref.y,
+      offsetY = _ref$y === void 0 ? 0 : _ref$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('".concat(currentImage.src, "')");
+  glass.style.backgroundSize = "".concat(backgroundSizeX, "px ").concat(backgroundSizeY, "px");
+  var bw = 3;
+  var w = glass.offsetWidth / 2;
+  var h = glass.offsetHeight / 2;
+  var containerConfig = {
+    container: container,
+    w: w,
+    h: h,
+    zoom: zoom,
+    bw: bw,
+    offsetX: offsetX,
+    offsetY: offsetY
+  };
+
+  var MouseMoveHandler = function MouseMoveHandler(event) {
+    (0, _moveMagnifier.moveMagnifier)(event, containerConfig, glass);
+  };
+
+  var touchHandler = function touchHandler(event) {
+    (0, _moveMagnifier.moveMagnifier)(event, containerConfig, glass);
+  };
+
+  glass.addEventListener('mousemove', MouseMoveHandler);
+  container.addEventListener('mousemove', MouseMoveHandler);
+  glass.addEventListener('touchmove', touchHandler, {
+    passive: true
+  });
+  container.addEventListener('touchmove', touchHandler, {
+    passive: true
+  });
+};
+
+exports.magnify = magnify;

package/dist/utils/magnify/move-magnifier.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveMagnifier = void 0;
+
+var _getCursorPosition = require("./get-cursor-position");
+
+var moveMagnifier = function moveMagnifier(e, containerConfig, glass) {
+  var container = containerConfig.container,
+      w = containerConfig.w,
+      h = containerConfig.h,
+      zoom = containerConfig.zoom,
+      bw = containerConfig.bw,
+      offsetX = containerConfig.offsetX,
+      offsetY = containerConfig.offsetY;
+  var x;
+  var y;
+  var pos = (0, _getCursorPosition.getCursorPosition)(e, container);
+  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 = "".concat(x - w, "px");
+  glass.style.top = "".concat(y - h, "px");
+  var backgroundPosX = (x - offsetX) * zoom - w + bw;
+  var backgroundPosY = (y - offsetY) * zoom - h + bw;
+  glass.style.backgroundPosition = "-".concat(backgroundPosX, "px -").concat(backgroundPosY, "px");
+};
+
+exports.moveMagnifier = moveMagnifier;

package/dist/utils/responsive/contain.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contain = void 0;
+
+var _fit = require("./fit");
+
+var contain = (0, _fit.fit)(true);
+exports.contain = contain;

package/dist/utils/responsive/fit.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fit = void 0;
+
+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
+    };
+  };
+};
+
+exports.fit = fit;

package/dist/utils/responsive/get-image-aspect-ratio.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getImageAspectRatio = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var getImageAspectRatio = function getImageAspectRatio(image, providedRatio) {
+  try {
+    var imageAspectRatio = image.width / image.height;
+
+    if (typeof providedRatio === 'number') {
+      imageAspectRatio = providedRatio;
+    }
+
+    if (providedRatio && (0, _typeof2.default)(providedRatio) === 'object') {
+      var mediaQueries = Object.keys(providedRatio).sort(function (a, b) {
+        return a - b;
+      });
+      var activeMedia = mediaQueries.find(function (mediaQuery) {
+        return window.innerWidth <= parseInt(mediaQuery, 10);
+      });
+
+      if (activeMedia) {
+        imageAspectRatio = providedRatio[activeMedia];
+      }
+    }
+
+    return imageAspectRatio;
+  } catch (_unused) {
+    return 1;
+  }
+};
+
+exports.getImageAspectRatio = getImageAspectRatio;

package/dist/utils/responsive/get-responsive-width-of-container.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getResponsiveWidthOfContainer = void 0;
+
+var _getSizeLimit = require("./get-size-limit");
+
+var getResponsiveWidthOfContainer = function getResponsiveWidthOfContainer(width) {
+  return (0, _getSizeLimit.getSizeLimit)(width);
+};
+
+exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;

package/dist/utils/responsive/get-size-according-to-pixel-ratio.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSizeAccordingToPixelRatio = void 0;
+
+var getSizeAccordingToPixelRatio = function getSizeAccordingToPixelRatio(size) {
+  var splittedSizes = size.toString().split('x');
+  var result = [];
+  [].forEach.call(splittedSizes, function (splittedSize) {
+    result.push(splittedSize * Math.round(window.devicePixelRatio || 1));
+  });
+  return result.join('x');
+};
+
+exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;

package/dist/utils/responsive/get-size-limit.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSizeLimit = void 0;
+
+var getSizeLimit = function getSizeLimit(currentSize) {
+  if (currentSize <= 25) return '25';
+  if (currentSize <= 50) return '50';
+  return (Math.ceil(currentSize / 100) * 100).toString();
+};
+
+exports.getSizeLimit = getSizeLimit;

package/dist/utils/spin-y/get-moving-direction.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMovingDirection = void 0;
+
+var _orientations = require("../../constants/orientations");
+
+var getMovingDirection = function getMovingDirection(isStartSpin, allowSpinY, prevPosition, nextPositions, currentMovingDirection) {
+  var movingDirection = _orientations.ORIENTATIONS.CENTER;
+  if (isStartSpin) return currentMovingDirection;
+  var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
+  var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);
+  var sensitivity = 10;
+  if (differenceInPositionX > sensitivity) movingDirection = _orientations.ORIENTATIONS.X;
+  if (differenceInPositionY > sensitivity && allowSpinY) movingDirection = _orientations.ORIENTATIONS.Y;
+  return movingDirection;
+};
+
+exports.getMovingDirection = getMovingDirection;

package/dist/utils/zoom/generate-zoom-in-steps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateZoomInSteps = void 0;
+
+var generateZoomInSteps = function generateZoomInSteps(zoomIntenisty) {
+  var transitionStepsFactor = 20;
+  return Array.from(Array(transitionStepsFactor)).reduce(function (acc, _, index) {
+    var previousIndex = index - 1;
+    var previousValue = previousIndex < 0 ? 1 : acc[index - 1];
+    var step = previousValue + (zoomIntenisty - 1) / transitionStepsFactor;
+    var stepFixedValue = +step.toFixed(2);
+    (acc || []).push(stepFixedValue);
+    return acc;
+  }, []);
+};
+
+exports.generateZoomInSteps = generateZoomInSteps;

package/dist/utils/zoom/generate-zoom-out-steps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateZoomOutSteps = void 0;
+
+var generateZoomOutSteps = function generateZoomOutSteps(zoomIntenisty) {
+  var transitionStepsFactor = 20;
+  return Array.from(Array(transitionStepsFactor)).reduce(function (acc, _, index) {
+    var previousIndex = index - 1;
+    var previousValue = previousIndex < 0 ? zoomIntenisty : acc[index - 1];
+    var step = previousValue - (zoomIntenisty - 1) / transitionStepsFactor;
+    var stepFixedValue = +step.toFixed(2);
+    (acc || []).push(stepFixedValue);
+    return acc;
+  }, []);
+};
+
+exports.generateZoomOutSteps = generateZoomOutSteps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -23,9 +23,9 @@
   ],
   "scripts": {
     "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
-    "clean-build": "rd /s /q build",
+    "clean-build": "rm -rf build",
     "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
-    "clean-dist": "rimraf dist",
+    "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",
@@ -33,26 +33,29 @@
     "publish-demo": "npm run build-demo && npm run deploy-demo"
   },
   "dependencies": {
+    "@babel/runtime": "^7.17.0",
+    "@popperjs/core": "^2.11.2",
     "core-js": "^3.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",
-    "mkdirp": "^1.0.4",
+    "mini-css-extract-plugin": "^0.9.0",
     "mobile-detect": "^1.4.3",
-    "rimraf": "^3.0.2",
     "style-loader": "^0.23.1",
-    "webpack": "^4.29.6",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"
   }

package/dist/ci360.constants.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var TO_START_POINTER_ZOOM = {
-  SCROLL_TO_START: 'scroll',
-  CLICK_TO_START: 'click'
-};
-
-var MOUSE_LEAVE_ACTIONS = {
-  RESET_ZOOM: 'resetZoom'
-};
-
-var ORIENTATIONS = {
-  X: 'x-axis',
-  Y: 'y-axis',
-  CENTER: 'center'
-};
-
-var AUTOPLAY_BEHAVIOR = {
-  SPIN_X: 'spin-x',
-  SPIN_Y: 'spin-y',
-  SPIN_XY: 'spin-xy',
-  SPIN_YX: 'spin-yx'
-};
-
-exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
-exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
-exports.ORIENTATIONS = ORIENTATIONS;
-exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;