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

package/dist/utils/load-images/preload-original-images.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadOriginalImages = void 0;
+
+var _prepareImagesFromFolder = require("./images-from-folder/prepare-images-from-folder");
+
+var _prepareImagesFromList = require("./images-from-list/prepare-images-from-list");
+
+var _loadOriginalImages = require("./load-original-images");
+
+/* eslint-disable no-console */
+var preloadOriginalImages = function preloadOriginalImages(srcConfig, imagesSrc, onImageLoadCallback) {
+  var _ref = srcConfig || {},
+      imageList = _ref.imageList;
+
+  var imagesSets = {};
+
+  if (imageList) {
+    try {
+      var images = JSON.parse(imageList);
+      imagesSets = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig);
+    } catch (error) {
+      console.error("Wrong format in image-list attribute: ".concat(error.message));
+    }
+  } else {
+    imagesSets = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig);
+  }
+
+  var _ref2 = imagesSets || {},
+      originalSrc = _ref2.originalSrc;
+
+  (0, _loadOriginalImages.loadOriginalImages)(originalSrc, onImageLoadCallback);
+};
+
+exports.preloadOriginalImages = preloadOriginalImages;

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-container-responsive-height.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContainerResponsiveHeight = void 0;
+
+var getContainerResponsiveHeight = function getContainerResponsiveHeight(container, width, containerHeight) {
+  if (containerHeight) {
+    if (width < containerHeight) {
+      return width;
+    }
+
+    return containerHeight;
+  }
+
+  return container.offsetWidth;
+};
+
+exports.getContainerResponsiveHeight = getContainerResponsiveHeight;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContainerResponsiveWidth = void 0;
+
+var getContainerResponsiveWidth = function getContainerResponsiveWidth(parentEl, containerWidth) {
+  if (containerWidth) {
+    if (parentEl.offsetWidth < containerWidth) {
+      return parentEl.offsetWidth;
+    }
+
+    return containerWidth;
+  }
+
+  return parentEl.offsetWidth;
+};
+
+exports.getContainerResponsiveWidth = getContainerResponsiveWidth;

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;
+  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": "2.7.2-beta.6",
+  "version": "2.7.4",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -33,8 +33,8 @@
     "publish-demo": "npm run build-demo && npm run deploy-demo"
   },
   "dependencies": {
-    "core-js": "^3.0.0",
-    "js-cloudimage-360-view-utils": "^1.0.0"
+    "@popperjs/core": "^2.11.2",
+    "core-js": "^3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.7",

package/.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}

package/dist/ci360.constants.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.falsyValues = exports.TO_START_POINTER_ZOOM = exports.ORIENTATIONS = exports.ORGINAL_SIZE_REGEX = exports.MOUSE_LEAVE_ACTIONS = exports.AUTOPLAY_BEHAVIOR = exports.AND_SYMBOL_REGEX = void 0;
-var TO_START_POINTER_ZOOM = {
-  SCROLL_TO_START: 'scroll',
-  CLICK_TO_START: 'click'
-};
-exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
-var MOUSE_LEAVE_ACTIONS = {
-  RESET_ZOOM: 'resetZoom'
-};
-exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
-var ORIENTATIONS = {
-  X: 'x-axis',
-  Y: 'y-axis',
-  CENTER: 'center'
-};
-exports.ORIENTATIONS = ORIENTATIONS;
-var AUTOPLAY_BEHAVIOR = {
-  SPIN_X: 'spin-x',
-  SPIN_Y: 'spin-y',
-  SPIN_XY: 'spin-xy',
-  SPIN_YX: 'spin-yx'
-};
-exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
-var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
-exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
-var AND_SYMBOL_REGEX = /\?&/g;
-exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
-var falsyValues = [false, 0, null, undefined, 'false', "0", 'null', 'undefined'];
-exports.falsyValues = falsyValues;