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

package/dist/utils/container-elements/create-loader.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLoader = void 0;
+
+var createLoader = function createLoader(innerBox) {
+  var loader = document.createElement('div');
+  loader.className = 'cloudimage-360-loader';
+  innerBox.appendChild(loader);
+  return loader;
+};
+
+exports.createLoader = createLoader;

package/dist/utils/container-elements/create-magnifier-icon.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMagnifierIcon = void 0;
+
+var createMagnifierIcon = function createMagnifierIcon() {
+  var magnifyIcon = document.createElement('div');
+  magnifyIcon.className = 'cloudimage-360-magnifier-icon';
+  return magnifyIcon;
+};
+
+exports.createMagnifierIcon = createMagnifierIcon;

package/dist/utils/container-elements/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applyStylesToContainer", {
+  enumerable: true,
+  get: function get() {
+    return _applyStylesToContainer.applyStylesToContainer;
+  }
+});
+Object.defineProperty(exports, "create360ViewCircleIcon", {
+  enumerable: true,
+  get: function get() {
+    return _create360ViewCircleIcon.create360ViewCircleIcon;
+  }
+});
+Object.defineProperty(exports, "create360ViewIcon", {
+  enumerable: true,
+  get: function get() {
+    return _create360ViewIcon.create360ViewIcon;
+  }
+});
+Object.defineProperty(exports, "createBoxShadow", {
+  enumerable: true,
+  get: function get() {
+    return _createBoxShadow.createBoxShadow;
+  }
+});
+Object.defineProperty(exports, "createCanvas", {
+  enumerable: true,
+  get: function get() {
+    return _createCanvas.createCanvas;
+  }
+});
+Object.defineProperty(exports, "createCloseFullscreenIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseFullscreenIcon.createCloseFullscreenIcon;
+  }
+});
+Object.defineProperty(exports, "createFullscreenIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createFullscreenIcon.createFullscreenIcon;
+  }
+});
+Object.defineProperty(exports, "createFullscreenModal", {
+  enumerable: true,
+  get: function get() {
+    return _createFullscreenModal.createFullscreenModal;
+  }
+});
+Object.defineProperty(exports, "createIconsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _createIconsContainer.createIconsContainer;
+  }
+});
+Object.defineProperty(exports, "createInnerBox", {
+  enumerable: true,
+  get: function get() {
+    return _createInnerBox.createInnerBox;
+  }
+});
+Object.defineProperty(exports, "createLoader", {
+  enumerable: true,
+  get: function get() {
+    return _createLoader.createLoader;
+  }
+});
+Object.defineProperty(exports, "createMagnifierIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createMagnifierIcon.createMagnifierIcon;
+  }
+});
+Object.defineProperty(exports, "removeChildFromParent", {
+  enumerable: true,
+  get: function get() {
+    return _removeChildFromParent.removeChildFromParent;
+  }
+});
+
+var _create360ViewCircleIcon = require("./create-360-view-circle-icon");
+
+var _create360ViewIcon = require("./create-360-view-icon");
+
+var _createCanvas = require("./create-canvas");
+
+var _createCloseFullscreenIcon = require("./create-close-fullscreen-icon");
+
+var _createFullscreenIcon = require("./create-fullscreen-icon");
+
+var _createIconsContainer = require("./create-icons-container");
+
+var _createInnerBox = require("./create-inner-box");
+
+var _createMagnifierIcon = require("./create-magnifier-icon");
+
+var _createBoxShadow = require("./create-box-shadow");
+
+var _createLoader = require("./create-loader");
+
+var _applyStylesToContainer = require("./apply-styles-to-container");
+
+var _createFullscreenModal = require("./create-fullscreen-modal");
+
+var _removeChildFromParent = require("./remove-child-from-parent");

package/dist/utils/container-elements/remove-child-from-parent.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeChildFromParent = void 0;
+
+var removeChildFromParent = function removeChildFromParent(parent, child) {
+  if (parent && child) {
+    try {
+      parent.removeChild(child);
+    } catch (_unused) {}
+  }
+};
+
+exports.removeChildFromParent = removeChildFromParent;

package/dist/utils/controls/get-item-skipped.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemSkipped = void 0;
+
+var getItemSkipped = function getItemSkipped(currentPosition, movementStart, speedFactor) {
+  var itemsSkipped = Math.floor((currentPosition - movementStart) / speedFactor) || 1;
+  return itemsSkipped;
+};
+
+exports.getItemSkipped = getItemSkipped;

package/dist/utils/controls/init-controls.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initControls = void 0;
+
+var _addClass = require("../class-names/add-class");
+
+var initControls = function initControls(controlsConfig, controlsTriggers) {
+  var container = controlsConfig.container,
+      controlReverse = controlsConfig.controlReverse,
+      spinReverse = controlsConfig.spinReverse,
+      stopAtEdges = controlsConfig.stopAtEdges;
+  var onRightStart = controlsTriggers.onRightStart,
+      onLeftStart = controlsTriggers.onLeftStart,
+      onTopStart = controlsTriggers.onTopStart,
+      onBottomStart = controlsTriggers.onBottomStart,
+      onEventEnd = controlsTriggers.onEventEnd;
+  var controlElements = {};
+  var isReverse = controlReverse ? !spinReverse : spinReverse;
+  var left = container.querySelectorAll('.cloudimage-360-left, .cloudimage-360-prev')[0];
+  var right = container.querySelectorAll('.cloudimage-360-right, .cloudimage-360-next')[0];
+  var top = container.querySelector('.cloudimage-360-top');
+  var bottom = container.querySelector('.cloudimage-360-bottom');
+
+  if (left) {
+    left.style.display = 'block';
+    left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
+    left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, {
+      passive: true
+    });
+    left.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    left.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.left = left;
+  }
+
+  if (right) {
+    right.style.display = 'block';
+    right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
+    right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, {
+      passive: true
+    });
+    right.addEventListener('mouseup', onEventEnd);
+    right.addEventListener('touchend', onEventEnd);
+    controlElements.right = right;
+  }
+
+  if (top) {
+    top.style.display = 'block';
+    top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart);
+    top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart);
+    top.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    top.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.top = top;
+  }
+
+  if (bottom) {
+    bottom.style.display = 'block';
+    bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart);
+    bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart);
+    bottom.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    bottom.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.bottom = bottom;
+  }
+
+  if (isReverse ? right : left) {
+    if (stopAtEdges) {
+      (0, _addClass.addClass)(isReverse ? right : left, 'not-active');
+      (0, _addClass.addClass)(isReverse ? top : bottom, 'not-active');
+    }
+  }
+
+  return controlElements;
+};
+
+exports.initControls = initControls;

package/dist/utils/hotspots/attach-events/hide-popup.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hidePopup = void 0;
+
+var hidePopup = function hidePopup(popup, isVisible) {
+  if (!isVisible) {
+    popup.removeAttribute('data-show');
+    popup.removeAttribute('data-cloudimage-360-show');
+  }
+};
+
+exports.hidePopup = hidePopup;

package/dist/utils/hotspots/attach-events/show-popup.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showPopup = void 0;
+
+var showPopup = function showPopup(popup, popperInstance) {
+  popup.setAttribute('data-show', '');
+  popup.setAttribute('data-cloudimage-360-show', '');
+  popperInstance.update();
+};
+
+exports.showPopup = showPopup;

package/dist/utils/hotspots/configs-error-handler.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configsErrorHandler = void 0;
+
+var configsErrorHandler = function configsErrorHandler(hotspotProps) {
+  var _hotspotProps$variant = hotspotProps.variant,
+      variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant;
+  var url = variant.url,
+      title = variant.title,
+      anchorId = variant.anchorId,
+      images = variant.images,
+      description = variant.description,
+      moreDetailsUrl = variant.moreDetailsUrl;
+
+  if (url && !title) {
+    console.error('Cloudimage-360: Hotspot config with variant link must have title for the link');
+  }
+
+  if (!title && !url && !anchorId && !images && !description && !moreDetailsUrl) {
+    console.error('Cloudimage-360: Hotspot config with custom variant must provide anchorId');
+  }
+};
+
+exports.configsErrorHandler = configsErrorHandler;

package/dist/utils/hotspots/create-popper-instace.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPopperInstance = void 0;
+
+var _core = require("@popperjs/core");
+
+var createPopperInstance = function createPopperInstance(popper, popupProps, container) {
+  var placement = popupProps.placement,
+      offset = popupProps.offset;
+  var virtualReference = document.createElement('div');
+  var popperInstance = (0, _core.createPopper)(virtualReference, popper);
+  popperInstance.setOptions({
+    placement: placement,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: offset
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        boundary: container
+      }
+    }]
+  });
+  return popperInstance;
+};
+
+exports.createPopperInstance = createPopperInstance;

package/dist/utils/hotspots/elements/create-carousel-dot.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCarouselDot = void 0;
+
+var _setCurrentSlide = require("../set-current-slide");
+
+var createCarouselDot = function createCarouselDot(image, imageIndex, popup) {
+  var imageDot = document.createElement('button');
+  imageDot.className = 'cloudimage-360-carousel-dot';
+
+  imageDot.onclick = function () {
+    return (0, _setCurrentSlide.setCurrentSlide)(image, imageDot, popup);
+  };
+
+  if (!imageIndex) {
+    imageDot.className += ' active-dot';
+    imageDot.setAttribute('data-active-dot', '');
+  }
+
+  return imageDot;
+};
+
+exports.createCarouselDot = createCarouselDot;

package/dist/utils/hotspots/elements/create-carousel-image.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCarouselImage = void 0;
+
+var createCarouselImage = function createCarouselImage(image, imageIndex) {
+  var carouselImage = document.createElement('img');
+  carouselImage.className = 'cloudimage-360-carousel-image';
+  carouselImage.setAttribute('src', image.src || '');
+  carouselImage.setAttribute('alt', image.alt || 'more-info');
+
+  if (!imageIndex) {
+    carouselImage.setAttribute('data-active-image', '');
+    carouselImage.className += ' active-image';
+  }
+
+  return carouselImage;
+};
+
+exports.createCarouselImage = createCarouselImage;

package/dist/utils/hotspots/elements/create-hotspot-icon.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHotspotIcon = void 0;
+
+var _hidePopup = require("../attach-events/hide-popup");
+
+var _showPopup = require("../attach-events/show-popup");
+
+var _hideHotspotIcon = require("../hide-hotspot-icon");
+
+var createHotspotIcon = function createHotspotIcon(container, hotspotConfig, popup, popperInstance) {
+  var indicatorSelector = hotspotConfig.indicatorSelector,
+      variant = hotspotConfig.variant;
+  var url = variant.url,
+      anchorId = variant.anchorId;
+  var _hotspotConfig$popupP = hotspotConfig.popupProps.open,
+      open = _hotspotConfig$popupP === void 0 ? false : _hotspotConfig$popupP;
+  var isVisible;
+  var hotspotIcon = document.createElement('div');
+  hotspotIcon.style.position = 'absolute';
+  hotspotIcon.className = "cloudimage-360-hotspot-".concat(url ? 'link' : 'custom', "-icon ").concat(indicatorSelector);
+  hotspotIcon.setAttribute('data-hotspot-icon-id', anchorId);
+  hotspotIcon.setAttribute('data-cloudimage-360-hotspot', '');
+
+  var popupMouseEnter = function popupMouseEnter() {
+    isVisible = true;
+  };
+
+  var popupMouseLeave = function popupMouseLeave() {
+    isVisible = false;
+    !open && (0, _hidePopup.hidePopup)(popup, isVisible);
+  };
+
+  hotspotIcon.onclick = function (e) {
+    return e.stopPropagation();
+  };
+
+  var showEvents = ['mouseenter', 'touchstart', 'focus'];
+  var hideEvents = ['mouseleave', 'blur'];
+  showEvents.forEach(function (event) {
+    hotspotIcon.addEventListener(event, function () {
+      return (0, _showPopup.showPopup)(popup, popperInstance);
+    });
+  });
+
+  if (!open) {
+    hideEvents.forEach(function (event) {
+      hotspotIcon.addEventListener(event, function () {
+        return setTimeout(function () {
+          return (0, _hidePopup.hidePopup)(popup, isVisible);
+        }, 160);
+      });
+    });
+  }
+
+  popup.addEventListener('mouseenter', popupMouseEnter);
+  popup.addEventListener('mouseleave', popupMouseLeave);
+  (0, _hideHotspotIcon.hideHotspotIcon)(hotspotIcon);
+  container.appendChild(hotspotIcon);
+  return hotspotIcon;
+};
+
+exports.createHotspotIcon = createHotspotIcon;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHotspotPopupLink = void 0;
+
+var createHotspotPopupLink = function createHotspotPopupLink(variant) {
+  var url = variant.url,
+      title = variant.title,
+      newTab = variant.newTab;
+  var hyperLink = document.createElement('a');
+  hyperLink.href = url;
+  hyperLink.innerText = title;
+
+  if (newTab) {
+    hyperLink.target = '_blank';
+  }
+
+  return hyperLink;
+};
+
+exports.createHotspotPopupLink = createHotspotPopupLink;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHotspots = void 0;
+
+var _createPopperInstace = require("../create-popper-instace");
+
+var _createHotspotIcon = require("./create-hotspot-icon");
+
+var _createPopup = require("./create-popup");
+
+var createHotspots = function createHotspots(container, hotspotsProps) {
+  hotspotsProps.forEach(function (hotspotProps) {
+    var popupProps = hotspotProps.popupProps;
+    var popup = (0, _createPopup.createPopup)(container, hotspotProps, popupProps);
+    var popperInstance = (0, _createPopperInstace.createPopperInstance)(popup, popupProps, container);
+    var hotspotIcon = (0, _createHotspotIcon.createHotspotIcon)(container, hotspotProps, popup, popperInstance);
+    popperInstance.state.elements.reference = hotspotIcon;
+    popperInstance.update();
+  });
+};
+
+exports.createHotspots = createHotspots;

package/dist/utils/hotspots/elements/create-images-carousel.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createImagesCarousel = void 0;
+
+var _createCarouselDot = require("./create-carousel-dot");
+
+var _createCarouselImage = require("./create-carousel-image");
+
+var createImagesCarousel = function createImagesCarousel(images, popup, container) {
+  var imagesCarousel = document.createElement('div');
+  var carouselDots = document.createElement('div');
+  imagesCarousel.className = 'cloudimage-360-images-carousel';
+  imagesCarousel.style.maxWidth = "".concat(container.offsetWidth, "px");
+  carouselDots.className = 'cloudimage-360-carousel-dots';
+  images.forEach(function (image, imageIndex) {
+    var carouselImage = (0, _createCarouselImage.createCarouselImage)(image, imageIndex);
+    var carouselDot = (0, _createCarouselDot.createCarouselDot)(carouselImage, imageIndex, popup);
+    carouselDots.appendChild(carouselDot);
+    imagesCarousel.appendChild(carouselImage);
+  });
+  return [imagesCarousel, carouselDots];
+};
+
+exports.createImagesCarousel = createImagesCarousel;

package/dist/utils/hotspots/elements/create-modal-description.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModalDescription = void 0;
+
+var createModalDescription = function createModalDescription(description) {
+  var modalDescription = document.createElement('p');
+  modalDescription.innerText = description;
+  modalDescription.className = 'cloudimage-360-modal-description';
+  return modalDescription;
+};
+
+exports.createModalDescription = createModalDescription;

package/dist/utils/hotspots/elements/create-modal-title.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModalTitle = void 0;
+
+var createModalTitle = function createModalTitle(title) {
+  var modalTitle = document.createElement('h4');
+  modalTitle.innerText = title;
+  modalTitle.className = 'cloudimage-360-modal-title';
+  return modalTitle;
+};
+
+exports.createModalTitle = createModalTitle;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModalElements = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _createImagesCarousel3 = require("./create-images-carousel");
+
+var _createModalDescription = require("./create-modal-description");
+
+var _createModalTitle = require("./create-modal-title");
+
+var _createReadMoreBtn = require("./create-read-more-btn");
+
+var createModalElements = function createModalElements(variant, container, popup) {
+  var images = variant.images,
+      title = variant.title,
+      description = variant.description,
+      moreDetailsUrl = variant.moreDetailsUrl,
+      _variant$moreDetailsT = variant.moreDetailsTitle,
+      moreDetailsTitle = _variant$moreDetailsT === void 0 ? 'Read more' : _variant$moreDetailsT;
+  var modalWrapper = document.createElement('div');
+  modalWrapper.className = 'cloudimage-360-modal-wrapper';
+
+  if (images) {
+    var imagesCarouselWrapper = document.createElement('div');
+
+    var _createImagesCarousel = (0, _createImagesCarousel3.createImagesCarousel)(images, popup, container),
+        _createImagesCarousel2 = (0, _slicedToArray2.default)(_createImagesCarousel, 2),
+        imagesCarousel = _createImagesCarousel2[0],
+        carouselDots = _createImagesCarousel2[1];
+
+    imagesCarouselWrapper.appendChild(imagesCarousel);
+
+    if (images.length > 1) {
+      imagesCarouselWrapper.appendChild(carouselDots);
+    }
+
+    modalWrapper.appendChild(imagesCarouselWrapper);
+    imagesCarouselWrapper.className = 'cloudimage-360-images-carousel-wrapper';
+  }
+
+  if (title) {
+    var modalTitle = (0, _createModalTitle.createModalTitle)(title);
+    modalWrapper.appendChild(modalTitle);
+  }
+
+  if (description) {
+    var modalDescription = (0, _createModalDescription.createModalDescription)(description);
+    modalWrapper.appendChild(modalDescription);
+  }
+
+  if (moreDetailsUrl) {
+    var readMoreBtn = (0, _createReadMoreBtn.createReadMoreBtn)(moreDetailsUrl, moreDetailsTitle);
+    modalWrapper.appendChild(readMoreBtn);
+  }
+
+  popup.appendChild(modalWrapper);
+};
+
+exports.createModalElements = createModalElements;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPopupArrow = void 0;
+
+var createPopupArrow = function createPopupArrow() {
+  var popupArrow = document.createElement('div');
+  popupArrow.setAttribute('data-popper-arrow', '');
+  popupArrow.setAttribute('data-cloudimage-360-hotspot', '');
+  popupArrow.className = 'cloudimage-360-popup-arrow';
+  return popupArrow;
+};
+
+exports.createPopupArrow = createPopupArrow;