js-cloudimage-360-view 2.7.2-beta.8 → 2.7.6

package/dist/utils/hotspot/get-hotspot-popup-node.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHotspotPopupNode = void 0;
+
+var getHotspotPopupNode = function getHotspotPopupNode(anchorId, open) {
+  var hotspotPopupSelector = "[data-hotspot-popup-id=".concat(anchorId, "]");
+  var hotspotPopup = document.querySelector(hotspotPopupSelector);
+
+  if (open) {
+    hotspotPopup.setAttribute('data-show', '');
+  }
+
+  return hotspotPopup;
+};
+
+exports.getHotspotPopupNode = getHotspotPopupNode;

package/dist/utils/hotspot/get-hotspot-variant.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHotspotVariant = void 0;
+
+var getHotspotVariant = function getHotspotVariant(variant) {
+  if (variant.toLowerCase() === 'link') {
+    return 'link';
+  }
+
+  if (variant.toLowerCase() === 'custom') {
+    return 'custom';
+  }
+
+  return 'link';
+};
+
+exports.getHotspotVariant = getHotspotVariant;

package/dist/utils/hotspot/get-popup-node.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPopupNode = void 0;
+
+var getPopupNode = function getPopupNode(popupId) {
+  var popupSelector = 'data-CI-360-anchor';
+  var popupNode = document.querySelector("[".concat(popupSelector, "=").concat(popupId, "]"));
+  return popupNode;
+};
+
+exports.getPopupNode = getPopupNode;

package/dist/utils/hotspot/hide-hotspot-icon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hideHotspotIcon = void 0;
+
+var hideHotspotIcon = function hideHotspotIcon(icon) {
+  icon.style.visibility = 'hidden';
+  icon.style.opacity = 0;
+};
+
+exports.hideHotspotIcon = hideHotspotIcon;

package/dist/utils/hotspot/hide-hotspots-icons.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hideHotspotsIcons = void 0;
+
+var _hideHotspotIcon = require("./hide-hotspot-icon");
+
+var hideHotspotsIcons = function hideHotspotsIcons() {
+  var hotspotIconSelector = '[data-hotspot-icon-id]';
+  var hotspotIcons = document.querySelectorAll(hotspotIconSelector) || [];
+  hotspotIcons.forEach(function (hotspotIcon) {
+    (0, _hideHotspotIcon.hideHotspotIcon)(hotspotIcon);
+  });
+};
+
+exports.hideHotspotsIcons = hideHotspotsIcons;

package/dist/utils/hotspot/is-mouse-on-hotspot.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMouseOnHotspot = void 0;
+
+var isMouseOnHotspot = function isMouseOnHotspot() {
+  var hotspotElementsSelector = '[data-cloudimage-360-show]';
+  var hostpotElements = document.querySelectorAll(hotspotElementsSelector);
+  return !!hostpotElements.length;
+};
+
+exports.isMouseOnHotspot = isMouseOnHotspot;

package/dist/utils/hotspot/prepare-hotspots-positions.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareHotspotsPositions = void 0;
+
+var _fillPreviousCoordWithPrevious = require("./fill-previous-coord-with-previous");
+
+var prepareHotspotsPositions = function prepareHotspotsPositions(hotspots) {
+  return hotspots.reduce(function (accumulate, current, currentIndex) {
+    var isIncludesXcoord = !!(current !== null && current !== void 0 && current.xCoord);
+    var isIncludesYcoord = !!(current !== null && current !== void 0 && current.yCoord);
+
+    if (!isIncludesXcoord) {
+      current.xCoord = (0, _fillPreviousCoordWithPrevious.fillPreviousCoordWithPrevious)(hotspots, currentIndex, 'xCoord');
+    }
+
+    if (!isIncludesYcoord) {
+      current.yCoord = (0, _fillPreviousCoordWithPrevious.fillPreviousCoordWithPrevious)(hotspots, currentIndex, 'yCoord');
+    }
+
+    accumulate.push(current);
+    return accumulate;
+  }, []);
+};
+
+exports.prepareHotspotsPositions = prepareHotspotsPositions;

package/dist/utils/hotspot/set-current-slide.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setCurrentSlide = void 0;
+
+var setCurrentSlide = function setCurrentSlide(image, imageDot, popup) {
+  var activeDotSelector = '[data-active-dot]';
+  var activeImageSelector = '[data-active-image]';
+  var previousActiveDot = popup.querySelector(activeDotSelector);
+  var previousActiveImage = popup.querySelector(activeImageSelector);
+  previousActiveDot.classList.remove('active-dot');
+  previousActiveDot.removeAttribute('data-active-dot');
+  previousActiveImage.classList.remove('active-image');
+  previousActiveImage.removeAttribute('data-active-image');
+  image.className += ' active-image';
+  image.setAttribute('data-active-image', '');
+  imageDot.className += ' active-dot';
+  imageDot.setAttribute('data-active-dot', '');
+};
+
+exports.setCurrentSlide = setCurrentSlide;

package/dist/utils/hotspot/update-hotspot-icon-position.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateHotspotIconPosition = void 0;
+
+var updateHotspotIconPosition = function updateHotspotIconPosition(container, initialDimensions, icon, xCoord, yCoord) {
+  icon.style.visibility = 'visible';
+  icon.style.opacity = 1;
+  icon.style.zIndex = 100;
+  icon.style.left = "".concat(-icon.offsetWidth / 2, "px");
+  icon.style.top = "".concat(-icon.offsetHeight / 2, "px");
+  var positionXRatio = container.offsetWidth / initialDimensions[0];
+  var positionYRatio = container.offsetHeight / initialDimensions[1];
+  var translateX = "".concat(positionXRatio * xCoord, "px");
+  var translateY = "".concat(positionYRatio * yCoord, "px");
+  icon.style.transform = "translate3d(".concat(translateX, ", ").concat(translateY, ", 0)");
+};
+
+exports.updateHotspotIconPosition = updateHotspotIconPosition;

package/dist/utils/hotspot/update-hotspots.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateHotspots = void 0;
+
+var _getHotspotPopupNode = require("./get-hotspot-popup-node");
+
+var _createPopperInstace = require("./create-popper-instace");
+
+var _attachPopupEvents = require("./attach-popup-events");
+
+var _prepareHotspotsPositions = require("./prepare-hotspots-positions");
+
+var _getHotspotIcon = require("./get-hotspot-icon");
+
+var _updateHotspotIconPosition = require("./update-hotspot-icon-position");
+
+var _hideHotspotIcon = require("./hide-hotspot-icon");
+
+var _getHotspotOrientation = require("./get-hotspot-orientation");
+
+var updateHotspots = function updateHotspots(container, hotspotsProps) {
+  var activeImageX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var activeImageY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var movingDirection = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'x-axis';
+  hotspotsProps.forEach(function (hotspotProps) {
+    var popupProps = hotspotProps.popupProps,
+        hotspots = hotspotProps.hotspots,
+        initialDimensions = hotspotProps.initialDimensions,
+        orientation = hotspotProps.orientation;
+    var hotspotOriantaion = (0, _getHotspotOrientation.getHotspotOriantaion)(movingDirection);
+    var currentImage = orientation === 'x' ? activeImageX : activeImageY;
+    var anchorId = popupProps.anchorId,
+        open = popupProps.open;
+    var popup = (0, _getHotspotPopupNode.getHotspotPopupNode)(anchorId, open);
+    var hotspotIcon = (0, _getHotspotIcon.getHotspotIcon)(anchorId);
+    var hotspotsPositions = (0, _prepareHotspotsPositions.prepareHotspotsPositions)(hotspots);
+    var popperInstance = (0, _createPopperInstace.createPopperInstance)(popup, popupProps, container);
+    popperInstance.state.elements.reference = hotspotIcon;
+    popperInstance.update();
+    (0, _attachPopupEvents.attachPopupEvents)(hotspotIcon, popup, popperInstance, open);
+    var currentPosition = hotspotsPositions.find(function (hotspotPosition) {
+      return hotspotPosition.imageIndex === currentImage;
+    });
+
+    if (currentPosition && hotspotOriantaion === orientation) {
+      var _currentPosition$xCoo = currentPosition.xCoord,
+          xCoord = _currentPosition$xCoo === void 0 ? 0 : _currentPosition$xCoo,
+          _currentPosition$yCoo = currentPosition.yCoord,
+          yCoord = _currentPosition$yCoo === void 0 ? 0 : _currentPosition$yCoo;
+      (0, _updateHotspotIconPosition.updateHotspotIconPosition)(container, initialDimensions, hotspotIcon, xCoord, yCoord);
+    } else {
+      (0, _hideHotspotIcon.hideHotspotIcon)(hotspotIcon);
+    }
+  });
+};
+
+exports.updateHotspots = updateHotspots;

package/dist/utils/image-src/generate-images-path.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateImagesPath = void 0;
+
+var _falsyValues = require("../../constants/falsy-values");
+
+var _getResponsiveWidthOfContainer = require("../responsive/get-responsive-width-of-container");
+
+var _getSizeAccordingToPixelRatio = require("../responsive/get-size-according-to-pixel-ratio");
+
+var generateImagesPath = function generateImagesPath(srcConfig) {
+  var container = srcConfig.container,
+      folder = srcConfig.folder,
+      apiVersion = srcConfig.apiVersion,
+      _srcConfig$filename = srcConfig.filename,
+      filename = _srcConfig$filename === void 0 ? '' : _srcConfig$filename,
+      ciParams = srcConfig.ciParams;
+
+  var _ref = ciParams || {},
+      ciToken = _ref.ciToken,
+      ciFilters = _ref.ciFilters,
+      ciTransformation = _ref.ciTransformation;
+
+  var src = "".concat(folder).concat(filename);
+
+  if (ciToken) {
+    var imageOffsetWidth = container.offsetWidth;
+    var vesrion = _falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1 ? null : apiVersion;
+    var finalApiVersion = vesrion ? "".concat(vesrion, "/") : '';
+    var ciSizeNext = (0, _getSizeAccordingToPixelRatio.getSizeAccordingToPixelRatio)((0, _getResponsiveWidthOfContainer.getResponsiveWidthOfContainer)(imageOffsetWidth));
+    src = "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src, "?").concat(ciTransformation || "width=".concat(ciSizeNext)).concat(ciFilters ? "&f=".concat(ciFilters) : '');
+  }
+
+  return src;
+};
+
+exports.generateImagesPath = generateImagesPath;

package/dist/utils/image-src/is-src-props-changed.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSrcPropsChanged = void 0;
+
+var _imageSrcProps = require("../../constants/image-src-props");
+
+var isSrcPropsChanged = function isSrcPropsChanged(currentProps, changedProps) {
+  return Object.keys(changedProps).reduce(function (acc, current) {
+    var isPropChanged = currentProps[current] !== changedProps[current];
+    var isSrcProp = _imageSrcProps.IMAGE_SRC_PROPS.indexOf(current) !== -1;
+
+    if (isSrcProp && isPropChanged) {
+      acc = true;
+    }
+
+    return acc;
+  }, false);
+};
+
+exports.isSrcPropsChanged = isSrcPropsChanged;

package/dist/utils/index.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  isSrcPropsChanged: true,
+  generateImagesPath: true,
+  preloadImages: true,
+  preloadOriginalImages: true,
+  contain: true,
+  getImageAspectRatio: true,
+  getCurrentOriginalImage: true,
+  magnify: true,
+  generateZoomInSteps: true,
+  generateZoomOutSteps: true,
+  loop: true,
+  getSpeedFactor: true,
+  isCompletedOneCycle: true,
+  addClass: true,
+  removeClass: true,
+  getMovingDirection: true,
+  getItemSkipped: true,
+  initControls: true,
+  updateHotspots: true,
+  createHotspots: true,
+  generateHotspotsConfigs: true,
+  isMouseOnHotspot: true,
+  hideHotspotsIcons: true
+};
+Object.defineProperty(exports, "addClass", {
+  enumerable: true,
+  get: function get() {
+    return _addClass.addClass;
+  }
+});
+Object.defineProperty(exports, "contain", {
+  enumerable: true,
+  get: function get() {
+    return _contain.contain;
+  }
+});
+Object.defineProperty(exports, "createHotspots", {
+  enumerable: true,
+  get: function get() {
+    return _createHotspots.createHotspots;
+  }
+});
+Object.defineProperty(exports, "generateHotspotsConfigs", {
+  enumerable: true,
+  get: function get() {
+    return _generateHotspotsConfigs.generateHotspotsConfigs;
+  }
+});
+Object.defineProperty(exports, "generateImagesPath", {
+  enumerable: true,
+  get: function get() {
+    return _generateImagesPath.generateImagesPath;
+  }
+});
+Object.defineProperty(exports, "generateZoomInSteps", {
+  enumerable: true,
+  get: function get() {
+    return _generateZoomInSteps.generateZoomInSteps;
+  }
+});
+Object.defineProperty(exports, "generateZoomOutSteps", {
+  enumerable: true,
+  get: function get() {
+    return _generateZoomOutSteps.generateZoomOutSteps;
+  }
+});
+Object.defineProperty(exports, "getCurrentOriginalImage", {
+  enumerable: true,
+  get: function get() {
+    return _getCurrentOriginalImage.getCurrentOriginalImage;
+  }
+});
+Object.defineProperty(exports, "getImageAspectRatio", {
+  enumerable: true,
+  get: function get() {
+    return _getImageAspectRatio.getImageAspectRatio;
+  }
+});
+Object.defineProperty(exports, "getItemSkipped", {
+  enumerable: true,
+  get: function get() {
+    return _getItemSkipped.getItemSkipped;
+  }
+});
+Object.defineProperty(exports, "getMovingDirection", {
+  enumerable: true,
+  get: function get() {
+    return _getMovingDirection.getMovingDirection;
+  }
+});
+Object.defineProperty(exports, "getSpeedFactor", {
+  enumerable: true,
+  get: function get() {
+    return _getSpeedFactor.getSpeedFactor;
+  }
+});
+Object.defineProperty(exports, "hideHotspotsIcons", {
+  enumerable: true,
+  get: function get() {
+    return _hideHotspotsIcons.hideHotspotsIcons;
+  }
+});
+Object.defineProperty(exports, "initControls", {
+  enumerable: true,
+  get: function get() {
+    return _initControls.initControls;
+  }
+});
+Object.defineProperty(exports, "isCompletedOneCycle", {
+  enumerable: true,
+  get: function get() {
+    return _isCompletedOneCycle.isCompletedOneCycle;
+  }
+});
+Object.defineProperty(exports, "isMouseOnHotspot", {
+  enumerable: true,
+  get: function get() {
+    return _isMouseOnHotspot.isMouseOnHotspot;
+  }
+});
+Object.defineProperty(exports, "isSrcPropsChanged", {
+  enumerable: true,
+  get: function get() {
+    return _isSrcPropsChanged.isSrcPropsChanged;
+  }
+});
+Object.defineProperty(exports, "loop", {
+  enumerable: true,
+  get: function get() {
+    return _loop.loop;
+  }
+});
+Object.defineProperty(exports, "magnify", {
+  enumerable: true,
+  get: function get() {
+    return _magnify.magnify;
+  }
+});
+Object.defineProperty(exports, "preloadImages", {
+  enumerable: true,
+  get: function get() {
+    return _preloadImages.preloadImages;
+  }
+});
+Object.defineProperty(exports, "preloadOriginalImages", {
+  enumerable: true,
+  get: function get() {
+    return _preloadOriginalImages.preloadOriginalImages;
+  }
+});
+Object.defineProperty(exports, "removeClass", {
+  enumerable: true,
+  get: function get() {
+    return _removeClass.removeClass;
+  }
+});
+Object.defineProperty(exports, "updateHotspots", {
+  enumerable: true,
+  get: function get() {
+    return _updateHotspots.updateHotspots;
+  }
+});
+
+var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+
+var _generateImagesPath = require("./image-src/generate-images-path");
+
+var _preloadImages = require("./load-images/preload-images");
+
+var _preloadOriginalImages = require("./load-images/preload-original-images");
+
+var _contain = require("./responsive/contain");
+
+var _getImageAspectRatio = require("./responsive/get-image-aspect-ratio");
+
+var _getCurrentOriginalImage = require("./magnify/get-current-original-image");
+
+var _magnify = require("./magnify/magnify");
+
+var _generateZoomInSteps = require("./zoom/generate-zoom-in-steps");
+
+var _generateZoomOutSteps = require("./zoom/generate-zoom-out-steps");
+
+var _loop = require("./auto-play/loop");
+
+var _getSpeedFactor = require("./auto-play/get-speed-factor");
+
+var _isCompletedOneCycle = require("./auto-play/is-completed-one-cycle");
+
+var _addClass = require("./common/add-class");
+
+var _removeClass = require("./common/remove-class");
+
+var _getMovingDirection = require("./spin-y/get-moving-direction");
+
+var _getItemSkipped = require("./controls/get-item-skipped");
+
+var _initControls = require("./controls/init-controls");
+
+var _containerElements = require("./container-elements");
+
+Object.keys(_containerElements).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _containerElements[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _containerElements[key];
+    }
+  });
+});
+
+var _updateHotspots = require("./hotspot/update-hotspots");
+
+var _createHotspots = require("./hotspot/elements/create-hotspots");
+
+var _generateHotspotsConfigs = require("./hotspot/generate-hotspots-configs");
+
+var _isMouseOnHotspot = require("./hotspot/is-mouse-on-hotspot");
+
+var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");

package/dist/utils/load-images/images-from-folder/prepare-images-from-folder.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareImagesFromFolder = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _regex = require("../../../constants/regex");
+
+var _pad = require("../pad");
+
+var prepareImagesFromFolder = function prepareImagesFromFolder(imagesSrc, srcConfig) {
+  var _ref = srcConfig || {},
+      amount = _ref.amount,
+      indexZeroBase = _ref.indexZeroBase;
+
+  var resultSrc = [];
+  var originalSrc = [];
+  (0, _toConsumableArray2.default)(new Array(amount)).forEach(function (_item, index) {
+    var nextZeroFilledIndex = (0, _pad.pad)(index + 1, indexZeroBase);
+    var imageResultSrc = imagesSrc.replace('{index}', nextZeroFilledIndex);
+    var imageOriginalSrc = imageResultSrc.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
+    resultSrc.push(imageResultSrc);
+    originalSrc.push(imageOriginalSrc);
+  });
+  return {
+    resultSrc: resultSrc,
+    originalSrc: originalSrc
+  };
+};
+
+exports.prepareImagesFromFolder = prepareImagesFromFolder;

package/dist/utils/load-images/images-from-list/prepare-images-from-list.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareImagesFromList = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _generateImagesPath = require("../../image-src/generate-images-path");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var prepareImagesFromList = function prepareImagesFromList(images, srcConfig) {
+  var folder = srcConfig.folder;
+  var resultSrc = [];
+  var originalSrc = [];
+  images.forEach(function (src) {
+    var nextSrcConfig = _objectSpread({}, srcConfig);
+
+    nextSrcConfig.folder = /(http(s?)):\/\//gi.test(src) ? '' : folder;
+    nextSrcConfig.filename = src;
+    var lastIndex = resultSrc.lastIndexOf('//');
+    resultSrc.push((0, _generateImagesPath.generateImagesPath)(nextSrcConfig));
+    originalSrc.push(resultSrc.slice(lastIndex));
+  });
+  return {
+    resultSrc: resultSrc,
+    originalSrc: originalSrc
+  };
+};
+
+exports.prepareImagesFromList = prepareImagesFromList;