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

package/dist/utils/hotspots/elements/create-popup.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPopup = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _createHotspotPopupLink = require("./create-hotspot-popup-link");
+
+var _getPopupNode = require("../get-popup-node");
+
+var _createPopupArrow = require("./create-popup-arrow");
+
+var _createModelElements = require("./create-model-elements");
+
+var createPopup = function createPopup(container, hotspotConfig, popupProps) {
+  var variant = hotspotConfig.variant;
+  var popupSelector = popupProps.popupSelector,
+      arrow = popupProps.arrow;
+  var url = variant.url,
+      images = variant.images,
+      title = variant.title,
+      anchorId = variant.anchorId,
+      description = variant.description,
+      moreDetailsUrl = variant.moreDetailsUrl;
+  var popup = document.createElement('div');
+  popup.className = "cloudimage-360-hotspot-popup ".concat(popupSelector);
+  popup.setAttribute('data-hotspot-popup-id', anchorId);
+  popup.setAttribute('data-cloudimage-360-hotspot', '');
+  popup.style.minHeight = 16;
+  popup.style.minWidth = 16;
+  popup.style.cursor = 'default';
+
+  popup.onclick = function (e) {
+    return e.stopPropagation();
+  };
+
+  if ((0, _typeof2.default)(variant) === 'object' && images || description || moreDetailsUrl || title && !url) {
+    (0, _createModelElements.createModalElements)(variant, container, popup);
+  } else if (url) {
+    var hotspotPopupLink = (0, _createHotspotPopupLink.createHotspotPopupLink)(variant);
+    popup.appendChild(hotspotPopupLink);
+  } else if (typeof variant === 'string') {
+    try {
+      var popupNode = (0, _getPopupNode.getPopupNode)(variant);
+      var userPopup = popupNode.cloneNode(true);
+      popup.appendChild(userPopup);
+      popupNode.parentNode.removeChild(popupNode);
+    } catch (_unused) {
+      console.error("Cloudimage-360: Element with anchorId '".concat(anchorId, "' not exist in the DOM"));
+    }
+  }
+
+  if (arrow) {
+    var popupArrow = (0, _createPopupArrow.createPopupArrow)();
+    popup.appendChild(popupArrow);
+  }
+
+  container.appendChild(popup);
+  return popup;
+};
+
+exports.createPopup = createPopup;

package/dist/utils/hotspots/elements/create-read-more-btn.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createReadMoreBtn = void 0;
+
+var createReadMoreBtn = function createReadMoreBtn(moreDetailsUrl, moreDetailsTitle) {
+  var readMoreBtn = document.createElement('a');
+  readMoreBtn.href = moreDetailsUrl;
+  readMoreBtn.innerText = moreDetailsTitle;
+  readMoreBtn.className = 'cloudimage-360-modal-more-details';
+  readMoreBtn.target = '_blank';
+  return readMoreBtn;
+};
+
+exports.createReadMoreBtn = createReadMoreBtn;

package/dist/utils/hotspots/fill-empty-coord-with-previous.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fillEmptyCoordWithPrevious = void 0;
+
+/* eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }] */
+var fillEmptyCoordWithPrevious = function fillEmptyCoordWithPrevious(positions, hotspotIndex, coord) {
+  var coordIndexes = new Array(hotspotIndex);
+  var intialValue = '0%';
+
+  for (var i = coordIndexes.length - 1; i > -1; i--) {
+    var _positions$i;
+
+    var previousXCoord = (_positions$i = positions[i]) === null || _positions$i === void 0 ? void 0 : _positions$i[coord];
+
+    if (previousXCoord) {
+      return previousXCoord;
+    }
+  }
+
+  return intialValue;
+};
+
+exports.fillEmptyCoordWithPrevious = fillEmptyCoordWithPrevious;

package/dist/utils/hotspots/generate-hotspots-configs.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateHotspotsConfigs = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _configsErrorHandler = require("./configs-error-handler");
+
+var _generatePopupConfig = require("./generate-popup-config");
+
+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 generateHotspotsConfigs = function generateHotspotsConfigs(hotspotsProps) {
+  var hotspotsConfigs = hotspotsProps.map(function (hotspotProps) {
+    var _hotspotProps$variant = hotspotProps.variant,
+        variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant,
+        _hotspotProps$positio = hotspotProps.positions,
+        positions = _hotspotProps$positio === void 0 ? [] : _hotspotProps$positio,
+        _hotspotProps$indicat = hotspotProps.indicatorSelector,
+        indicatorSelector = _hotspotProps$indicat === void 0 ? '' : _hotspotProps$indicat,
+        _hotspotProps$popupPr = hotspotProps.popupProps,
+        popupProps = _hotspotProps$popupPr === void 0 ? {} : _hotspotProps$popupPr,
+        _hotspotProps$orienta = hotspotProps.orientation,
+        orientation = _hotspotProps$orienta === void 0 ? 'x' : _hotspotProps$orienta,
+        _hotspotProps$initial = hotspotProps.initialDimensions,
+        initialDimensions = _hotspotProps$initial === void 0 ? [500, 500] : _hotspotProps$initial;
+    (0, _configsErrorHandler.configsErrorHandler)(hotspotProps);
+    var popupConfig = (0, _generatePopupConfig.generatePopupConfig)(popupProps);
+    var anchorId = variant === null || variant === void 0 ? void 0 : variant.anchorId;
+
+    if (!anchorId) {
+      var uniqueID = Math.floor(Math.random() * 10000);
+      anchorId = "cloudimage-360-".concat(uniqueID);
+    }
+
+    var hotspotConfig = {
+      variant: _objectSpread(_objectSpread({}, variant), {}, {
+        anchorId: anchorId
+      }),
+      popupProps: popupConfig,
+      positions: positions,
+      indicatorSelector: indicatorSelector,
+      initialDimensions: initialDimensions,
+      orientation: orientation.toLowerCase()
+    };
+    return hotspotConfig;
+  });
+  return hotspotsConfigs;
+};
+
+exports.generateHotspotsConfigs = generateHotspotsConfigs;

package/dist/utils/hotspots/generate-popup-config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePopupConfig = void 0;
+
+var generatePopupConfig = function generatePopupConfig(popupProps) {
+  var _popupProps$popupSele = popupProps.popupSelector,
+      popupSelector = _popupProps$popupSele === void 0 ? '' : _popupProps$popupSele,
+      _popupProps$arrow = popupProps.arrow,
+      arrow = _popupProps$arrow === void 0 ? true : _popupProps$arrow,
+      _popupProps$offset = popupProps.offset,
+      offset = _popupProps$offset === void 0 ? [0, 10] : _popupProps$offset,
+      _popupProps$placement = popupProps.placement,
+      placement = _popupProps$placement === void 0 ? 'auto' : _popupProps$placement,
+      _popupProps$open = popupProps.open,
+      open = _popupProps$open === void 0 ? false : _popupProps$open;
+  var popupConfig = {
+    popupSelector: popupSelector,
+    arrow: arrow,
+    offset: offset,
+    placement: placement,
+    open: open
+  };
+  return popupConfig;
+};
+
+exports.generatePopupConfig = generatePopupConfig;

package/dist/utils/hotspots/get-hotspot-icon.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHotspotIcon = void 0;
+
+var getHotspotIcon = function getHotspotIcon(anchorId) {
+  var hotspotIconSelector = "[data-hotspot-icon-id=".concat(anchorId, "]");
+  var hotspotIcon = document.querySelector(hotspotIconSelector);
+  return hotspotIcon;
+};
+
+exports.getHotspotIcon = getHotspotIcon;

package/dist/utils/hotspots/get-hotspot-orientation.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHotspotOriantaion = void 0;
+
+var getHotspotOriantaion = function getHotspotOriantaion(orientation) {
+  switch (orientation.toLowerCase()) {
+    case 'x-axis':
+      return 'x';
+
+    case 'y-axis':
+      return 'y';
+
+    default:
+      return 'x';
+  }
+};
+
+exports.getHotspotOriantaion = getHotspotOriantaion;

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

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

package/dist/utils/hotspots/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-cloudimage-360-hotspots';
+  var popupNode = document.querySelector("[".concat(popupSelector, "=").concat(popupId, "]"));
+  return popupNode;
+};
+
+exports.getPopupNode = getPopupNode;

package/dist/utils/hotspots/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/hotspots/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/hotspots/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/hotspots/prepare-hotspots-positions.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareHotspotsPositions = void 0;
+
+var _fillEmptyCoordWithPrevious = require("./fill-empty-coord-with-previous");
+
+var prepareHotspotsPositions = function prepareHotspotsPositions(positions) {
+  return positions.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, _fillEmptyCoordWithPrevious.fillEmptyCoordWithPrevious)(positions, currentIndex, 'xCoord');
+    }
+
+    if (!isIncludesYcoord) {
+      current.yCoord = (0, _fillEmptyCoordWithPrevious.fillEmptyCoordWithPrevious)(positions, currentIndex, 'yCoord');
+    }
+
+    accumulate.push(current);
+    return accumulate;
+  }, []);
+};
+
+exports.prepareHotspotsPositions = prepareHotspotsPositions;

package/dist/utils/hotspots/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/hotspots/toggle-popup-events.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.togglePopupEvents = void 0;
+
+var _ci = require("../../ci360.utils");
+
+var _getHotspotIcon = require("./get-hotspot-icon");
+
+var togglePopupEvents = function togglePopupEvents(hotspotsProps, event, isMouseDown) {
+  var iClickOnHotspotIcon = event && (0, _ci.isTrue)(event.target, 'data-cloudimage-360-hotspot');
+  if (iClickOnHotspotIcon) return;
+  hotspotsProps.forEach(function (hotspotProps) {
+    var variant = hotspotProps.variant;
+    var anchorId = variant.anchorId;
+    var hotspotIcon = (0, _getHotspotIcon.getHotspotIcon)(anchorId);
+    hotspotIcon.style.pointerEvents = isMouseDown ? 'none' : 'all';
+  });
+};
+
+exports.togglePopupEvents = togglePopupEvents;

package/dist/utils/hotspots/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/hotspots/update-hotspots.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateHotspots = void 0;
+
+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 positions = hotspotProps.positions,
+        initialDimensions = hotspotProps.initialDimensions,
+        orientation = hotspotProps.orientation,
+        variant = hotspotProps.variant;
+    var anchorId = variant.anchorId;
+    var hotspotOriantaion = (0, _getHotspotOrientation.getHotspotOriantaion)(movingDirection);
+    var currentImageIndex = orientation === 'x' ? activeImageX : activeImageY;
+    var hotspotsPositions = (0, _prepareHotspotsPositions.prepareHotspotsPositions)(positions);
+    var currentPosition = hotspotsPositions.find(function (hotspotPosition) {
+      return hotspotPosition.imageIndex === currentImageIndex;
+    });
+    var hotspotIcon = (0, _getHotspotIcon.getHotspotIcon)(anchorId);
+
+    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,42 @@
+"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 version = !(_falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1) ? apiVersion : null;
+    var finalApiVersion = version ? "".concat(version, "/") : '';
+    var ciSizeNext = (0, _getSizeAccordingToPixelRatio.getSizeAccordingToPixelRatio)((0, _getResponsiveWidthOfContainer.getResponsiveWidthOfContainer)(imageOffsetWidth));
+    var isCloudImageUrl = new URL(src).origin.indexOf('cloudimg') !== -1;
+    var cdn = isCloudImageUrl ? src : "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src);
+    src = "".concat(cdn, "?").concat(ciTransformation || "width=".concat(ciSizeNext)).concat(ciFilters ? "&f=".concat(ciFilters) : '');
+  }
+
+  return src;
+};
+
+exports.generateImagesPath = generateImagesPath;

package/dist/utils/image-src/is-props-change-require-reload.js

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