js-cloudimage-360-view 2.7.2-beta.7 → 2.7.5

package/dist/utils/load-images/load-image-as-promise.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadImageAsPromise = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _orientations = require("../../constants/orientations");
+
+var loadImageAsPromise = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index, srcConfig) {
+    var onImageLoadCallback,
+        _ref2,
+        lazyload,
+        lazySelector,
+        fullscreenView,
+        innerBox,
+        orientation,
+        image,
+        _args = arguments;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            onImageLoadCallback = _args.length > 3 && _args[3] !== undefined ? _args[3] : function () {};
+            _ref2 = srcConfig || {}, lazyload = _ref2.lazyload, lazySelector = _ref2.lazySelector, fullscreenView = _ref2.fullscreenView, innerBox = _ref2.innerBox, orientation = _ref2.orientation;
+            image = new Image();
+
+            if (lazyload && !fullscreenView) {
+              image.setAttribute('data-src', src);
+              image.className = image.className.length ? "".concat(image.className, " ").concat(lazySelector) : lazySelector;
+
+              if (index === 0 && orientation !== _orientations.ORIENTATIONS.Y) {
+                image.style.position = 'absolute';
+                image.style.top = '0';
+                image.style.left = '0';
+                innerBox.appendChild(image);
+              }
+
+              image.onload = function () {
+                return onImageLoadCallback(image, index);
+              };
+            } else {
+              image.src = src;
+            }
+
+            return _context.abrupt("return", new Promise(function (reslove) {
+              image.onload = function () {
+                onImageLoadCallback(image, index);
+                reslove(image);
+              };
+
+              image.onerror = function () {
+                onImageLoadCallback(image, index);
+                reslove(image);
+              };
+            }));
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function loadImageAsPromise(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.loadImageAsPromise = loadImageAsPromise;

package/dist/utils/load-images/load-image.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadImage = void 0;
+
+var loadImage = function loadImage(src, index, srcConfig) {
+  var _ref = srcConfig || {},
+      lazyload = _ref.lazyload,
+      lazySelector = _ref.lazySelector,
+      fullscreenView = _ref.fullscreenView;
+
+  var image = new Image();
+
+  if (lazyload && !fullscreenView) {
+    image.setAttribute('data-src', src);
+    image.className = image.className.length ? "".concat(image.className, " ").concat(lazySelector) : lazySelector;
+  } else {
+    image.src = src;
+  }
+
+  return image;
+};
+
+exports.loadImage = loadImage;

package/dist/utils/load-images/load-images-relative-to-container-size.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadImagesRelativeToContainerSize = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _loadImageAsPromise = require("./load-image-as-promise");
+
+var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, srcConfig, onImageLoadCallback) {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return Promise.all(imagesSrcs.map( /*#__PURE__*/function () {
+              var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index) {
+                return _regenerator.default.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, srcConfig, onImageLoadCallback);
+
+                      case 2:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+
+              return function (_x4, _x5) {
+                return _ref2.apply(this, arguments);
+              };
+            }()));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function loadImagesRelativeToContainerSize(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.loadImagesRelativeToContainerSize = loadImagesRelativeToContainerSize;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadOriginalImages = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _loadImageAsPromise = require("./load-image-as-promise");
+
+var loadOriginalImages = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, onImageLoadCallback) {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return Promise.all(imagesSrcs.map( /*#__PURE__*/function () {
+              var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index) {
+                return _regenerator.default.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, null, onImageLoadCallback);
+
+                      case 2:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+
+              return function (_x3, _x4) {
+                return _ref2.apply(this, arguments);
+              };
+            }()));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function loadOriginalImages(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.loadOriginalImages = loadOriginalImages;

package/dist/utils/load-images/pad.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pad = void 0;
+
+var pad = function pad(n) {
+  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  n += '';
+  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
+};
+
+exports.pad = pad;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadImages = void 0;
+
+var _loadImagesRelativeToContainerSize = require("./load-images-relative-to-container-size");
+
+var _prepareImagesFromFolder = require("./images-from-folder/prepare-images-from-folder");
+
+var _prepareImagesFromList = require("./images-from-list/prepare-images-from-list");
+
+/* eslint-disable no-console */
+var preloadImages = function preloadImages(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 || {},
+      resultSrc = _ref2.resultSrc;
+
+  (0, _loadImagesRelativeToContainerSize.loadImagesRelativeToContainerSize)(resultSrc, srcConfig, onImageLoadCallback);
+};
+
+exports.preloadImages = preloadImages;

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 = _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;