js-cloudimage-360-view 2.7.6 → 2.7.9

package/CHANGELOG.md

@@ -25,6 +25,21 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.9 - 2022-02-27
+### Fixed
+- typo in documentation
+
+## 2.7.8 - 2022-02-27
+### Added
+- possibility to add new view to CI360 views
+### Fixed
+- re-render method
+
+## 2.7.7 - 2022-02-24
+### Fixed
+- container width on mobile
+- re-render method
+
 ## 2.7.6 - 2022-02-20
 ### Fixed
 - drag speed

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.6-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.9-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -6,9 +6,9 @@
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)
 
 <p align="center">
-	<img
-		alt="The Lounge"
-		src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
+<img
+			alt="The Lounge"
+			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 </p>
 
 <h1 align="center">
@@ -105,6 +105,17 @@ window.CI360.init();
 > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
+
+### addView
+
+###### Type: **Function**
+
+add new view by id to cloudimage 360 views.
+
+```javascript
+window.CI360.addView(idOfView: string);
+```
+
 ### update
 
 ###### Type: **Function**

package/dist/ci360.service.js

@@ -19,6 +19,8 @@ var _constants = require("./constants/");
 
 require("./static/css/style.css");
 
+require("./static/css/hotspots.css");
+
 var _utils = require("./utils");
 
 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; }
@@ -26,7 +28,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 CI360Viewer = /*#__PURE__*/function () {
-  function CI360Viewer(container, fullscreen) {
+  function CI360Viewer(container, fullscreen, hotspotConfig) {
     (0, _classCallCheck2.default)(this, CI360Viewer);
     this.container = container;
     this.movementStart = {
@@ -50,7 +52,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
     this.id = container.id;
-    this.init(container);
+    this.hotspotConfig = hotspotConfig && (0, _utils.generateHotspotsConfigs)(hotspotConfig);
     this.isMagnifyOpen = false;
     this.isDragged = false;
     this.startPointerZoom = false;
@@ -65,13 +67,14 @@ var CI360Viewer = /*#__PURE__*/function () {
       y: 0
     };
     this.isStartedLoadOriginalImages = false;
+    this.init(container);
   }
 
   (0, _createClass2.default)(CI360Viewer, [{
     key: "mouseDown",
     value: function mouseDown(event) {
       if (!this.imagesLoaded) return;
-      event.preventDefault();
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       var pageX = event.pageX,
           pageY = event.pageY;
       this.hideInitialIcons();
@@ -92,6 +95,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       };
       this.isClicked = true;
       this.isDragged = false;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
     key: "mouseUp",
@@ -215,6 +222,10 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
 
+        if (this.hotspotConfig) {
+          (0, _utils.hideHotspotsIcons)();
+        }
+
         _zoomSteps.forEach(function (step) {
           setTimeout(function () {
             _this2.zoomIntensity = step;
@@ -273,6 +284,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "touchStart",
     value: function touchStart(event) {
       if (!this.imagesLoaded) return;
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       this.hideInitialIcons();
 
       if (this.autoplay || this.loopTimeoutId) {
@@ -289,6 +301,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         y: event.touches[0].clientY
       };
       this.isClicked = true;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
     key: "touchEnd",
@@ -680,12 +696,23 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.update();
       }
     }
+  }, {
+    key: "showImageInfo",
+    value: function showImageInfo(ctx) {
+      ctx.font = "".concat(this.fullscreenView ? 28 : 14, "px serif");
+      ctx.fillStyle = this.info === 'white' ? '#FFF' : '#000';
+      var imageDimension = "image-dimension: ".concat(this.container.offsetWidth, "x").concat(this.container.offsetHeight, "px");
+      var currentXImage = 'active-index-x: ' + this.activeImageX;
+      var currentYImage = 'active-index-y: ' + this.activeImageY;
+      var imageIndex = [currentXImage, currentYImage].join(' | ');
+      ctx.fillText(imageDimension, 20, this.container.offsetHeight - 35);
+      ctx.fillText(imageIndex, 20, this.container.offsetHeight - 10);
+    }
   }, {
     key: "requestResizedImages",
     value: function requestResizedImages() {
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
-      this.updateContainerAndCanvasSize(firstImage);
       this.update();
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
@@ -708,6 +735,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
         var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
@@ -721,9 +749,17 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (this.mouseTracked) {
           this.updateImageScale(ctx);
         } else {
+          if (this.hotspotConfig && !this.autoplay) {
+            (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+          }
+
           ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
         }
       }
+
+      if (this.info) {
+        this.showImageInfo(ctx);
+      }
     }
   }, {
     key: "updateImageScale",
@@ -759,13 +795,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function onFirstImageLoaded(image) {
       if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
       var ctx = this.canvas.getContext("2d");
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
-        this.canvas.width = window.innerWidth * this.devicePixelRatio;
-        this.canvas.style.width = window.innerWidth + 'px';
-        this.canvas.height = window.innerHeight * this.devicePixelRatio;
-        this.canvas.style.height = window.innerHeight + 'px';
-
         var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
             offsetX = _contain2.offsetX,
             offsetY = _contain2.offsetY,
@@ -776,17 +808,14 @@ var CI360Viewer = /*#__PURE__*/function () {
           x: offsetX,
           y: offsetY
         };
+        this.addCloseFullscreenView();
         ctx.drawImage(image, offsetX, offsetY, width, height);
       } else {
-        this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-        this.canvas.style.width = this.container.offsetWidth + 'px';
-        this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
-        this.canvas.style.height = this.container.offsetHeight + 'px';
         ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
       }
 
-      if (this.fullscreenView) {
-        this.addCloseFullscreenView();
+      if (this.info) {
+        this.showImageInfo(ctx);
       }
 
       if (this.magnifier) {
@@ -794,7 +823,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.boxShadow && !this.fullscreenView) {
-        (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
 
       if (this.bottomCircle && !this.fullscreenView) {
@@ -804,6 +833,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.fullscreen && !this.fullscreenView) {
         this.addFullscreenIcon();
       }
+
+      if (this.hotspotConfig && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
     key: "onAllImagesLoaded",
@@ -870,7 +903,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
       var fullscreenContainer = (0, _utils.createFullscreenModal)(this.container);
-      new CI360Viewer(fullscreenContainer, true);
+      new CI360Viewer(fullscreenContainer, true, this.hotspotConfig);
     }
   }, {
     key: "setFullscreenEvents",
@@ -915,19 +948,33 @@ var CI360Viewer = /*#__PURE__*/function () {
       window.clearTimeout(this.loopTimeoutId);
     }
   }, {
-    key: "updatePlugin",
-    value: function updatePlugin(forceUpdate) {
+    key: "updateView",
+    value: function updateView(forceUpdate, viewers) {
+      var _this5 = this;
+
       var container = this.container;
       var imageProps = (0, _ci.get360ViewProps)(container);
-      var srcPropsChanged = (0, _utils.isSrcPropsChanged)(this, imageProps);
-      var reloadPlugin = srcPropsChanged || forceUpdate;
+      var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
+      var reInitView = srcPropsChanged || forceUpdate;
+
+      if (reInitView) {
+        var oldElement = this.container;
+        var viewIndex = viewers.findIndex(function (view) {
+          return view.id === _this5.container.id;
+        });
+        container = container.cloneNode(true);
+        container.className = container.className.replace(' initialized', '');
+        container.innerHTML = '';
+        oldElement.parentNode.replaceChild(container, oldElement);
+        return viewers.splice(viewIndex, 1, new CI360Viewer(container));
+      }
+
       container.style.position = 'relative';
       container.style.width = '100%';
       container.style.cursor = 'default';
       container.setAttribute('draggable', 'false');
-      if (reloadPlugin) container.innerHTML = '';
       this.stop();
-      this.init(container, !reloadPlugin, reloadPlugin);
+      this.init(container, true);
     }
   }, {
     key: "destroy",
@@ -1050,52 +1097,52 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "initControls",
     value: function initControls() {
-      var _this5 = this;
+      var _this6 = this;
 
       var onLeftStart = function onLeftStart(event) {
         event.stopPropagation();
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.left();
+        _this6.left();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.left.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onRightStart = function onRightStart(event) {
         event.stopPropagation();
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.right();
+        _this6.right();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.right.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onTopStart = function onTopStart(event) {
         event.stopPropagation();
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.top();
+        _this6.top();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.top.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onBottomStart = function onBottomStart(event) {
         event.stopPropagation();
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.bottom();
+        _this6.bottom();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.bottom.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onEventEnd = function onEventEnd() {
-        _this5.onFinishSpin();
+        _this6.onFinishSpin();
 
-        window.clearTimeout(_this5.loopTimeoutId);
+        window.clearTimeout(_this6.loopTimeoutId);
       };
 
       var controlsConfig = {
@@ -1148,10 +1195,9 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "init",
     value: function init(container) {
-      var _this6 = this;
+      var _this7 = this;
 
       var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var reload = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
           folder = _get360ViewProps.folder,
@@ -1193,7 +1239,9 @@ var CI360Viewer = /*#__PURE__*/function () {
           hide360Logo = _get360ViewProps.hide360Logo,
           logoSrc = _get360ViewProps.logoSrc,
           pointerZoom = _get360ViewProps.pointerZoom,
-          ratio = _get360ViewProps.ratio;
+          ratio = _get360ViewProps.ratio,
+          _get360ViewProps$imag = _get360ViewProps.imageInfo,
+          imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag;
 
       var ciParams = {
         ciToken: ciToken,
@@ -1238,22 +1286,54 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.apiVersion = apiVersion;
       this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
       this.keysReverse = keysReverse;
+      this.info = imageInfo;
+      this.keys = keys;
       this.ratio = ratio && JSON.parse(ratio);
 
-      if (reload) {
-        new CI360Viewer(this.container);
-        return;
-      }
-
       if (update) {
-        this.onAllImagesLoaded();
-        return;
+        (0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.boxShadowEl);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.view360Icon);
+        this.remove360ViewCircleIcon();
+        this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
+
+        if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
+          this.add360ViewIcon();
+          (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+        }
+
+        if (this.magnifier) {
+          this.addMagnifier();
+        }
+
+        if (this.info) {
+          this.showImageInfo(ctx);
+        }
+
+        if (this.bottomCircle && !this.fullscreenView) {
+          this.add360ViewCircleIcon();
+        }
+
+        if (this.fullscreen && !this.fullscreenView) {
+          this.addFullscreenIcon();
+        }
+
+        if (this.boxShadow && !this.fullscreenView) {
+          this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        }
+
+        return this.onAllImagesLoaded();
       }
 
       this.innerBox = (0, _utils.createInnerBox)(this.container);
       this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
       this.canvas = (0, _utils.createCanvas)(this.innerBox);
       this.loader = (0, _utils.createLoader)(this.innerBox);
+
+      if (this.hotspotConfig && !this.fullscreenView) {
+        (0, _utils.createHotspots)(container, this.hotspotConfig);
+      }
+
       (0, _utils.applyStylesToContainer)(this.container);
       this.srcXConfig = {
         folder: folder,
@@ -1279,60 +1359,58 @@ var CI360Viewer = /*#__PURE__*/function () {
       var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
 
       var initLazyload = function initLazyload(image, orientation) {
-        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this6.srcXConfig), {}, {
+        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
           lazyload: false
         });
 
-        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this6.srcYConfig), {}, {
+        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
           lazyload: false
         });
 
         if (orientation === _constants.ORIENTATIONS.Y) {
-          _this6.lazyloadY = false;
-          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _constants.ORIENTATIONS.X));
+          _this7.lazyloadY = false;
+          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
         } else {
-          _this6.lazyloadX = false;
-          _this6.lazyloadInitImageX = image;
-          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _constants.ORIENTATIONS.Y));
+          _this7.lazyloadX = false;
+          _this7.lazyloadInitImageX = image;
+          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
         }
       };
 
       var onImageLoad = function onImageLoad(orientation, image, index) {
         if (orientation !== _constants.ORIENTATIONS.Y) {
-          _this6.imagesX[index] = image;
+          _this7.imagesX[index] = image;
         } else {
-          _this6.imagesY[index] = image;
+          _this7.imagesY[index] = image;
         }
 
-        var loadedXImages = _this6.imagesX.filter(function (image) {
+        var loadedXImages = _this7.imagesX.filter(function (image) {
           return !!image;
         });
 
-        var loadedYImages = _this6.imagesY.filter(function (image) {
+        var loadedYImages = _this7.imagesY.filter(function (image) {
           return !!image;
         });
 
-        var totalAmount = _this6.amountX + _this6.amountY;
-        var totalLoadedImages = _this6.imagesX.length + _this6.imagesY.length;
+        var totalAmount = _this7.amountX + _this7.amountY;
+        var totalLoadedImages = _this7.imagesX.length + _this7.imagesY.length;
         var isFirstImageLoaded = index === 0 && orientation !== _constants.ORIENTATIONS.Y;
-        var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this6.amountX + _this6.amountY;
+        var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
 
-        _this6.updatePercentageInLoader(percentage);
+        _this7.updatePercentageInLoader(percentage);
 
-        if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
+        if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
 
         if (isFirstImageLoaded) {
-          _this6.updateContainerAndCanvasSize(image);
-
-          _this6.onFirstImageLoaded(image);
+          _this7.onFirstImageLoaded(image);
         }
 
         if (isAllImagesLoaded) {
-          _this6.onAllImagesLoaded();
+          _this7.onAllImagesLoaded();
 
           if (lazyload) {
-            _this6.innerBox.removeChild(_this6.lazyloadInitImageX);
+            _this7.innerBox.removeChild(_this7.lazyloadInitImageX);
           }
         }
       };

package/dist/ci360.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setView360Icon = exports.get360ViewProps = exports.debounce = void 0;
+exports.setView360Icon = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
 
 var _constants = require("./constants");
 
@@ -46,7 +46,8 @@ var get360ViewProps = function get360ViewProps(image) {
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
     logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
-    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
+    imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };
 };
 
@@ -62,6 +63,8 @@ var attr = function attr(element, attribute) {
   return element.getAttribute(attribute);
 };
 
+exports.attr = attr;
+
 var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
   view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
 };

package/dist/constants/props-require-reload.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PROPS_REQUIRE_RELOAD = void 0;
+var PROPS_REQUIRE_RELOAD = ['folder', //images source
+'filenameX', //images source
+'filenameY', //images source
+'apiVersion', //images source
+'imageListX', //images source
+'imageListY', //images source
+'indexZeroBase', //images source
+'lazySelector', //images source
+'keys', // events
+'stopAtEdges', // events
+'disableDrag', // events
+'controlReverse', // events
+'disableDrag' // events
+];
+exports.PROPS_REQUIRE_RELOAD = PROPS_REQUIRE_RELOAD;

package/dist/index.js

@@ -10,11 +10,29 @@ require("core-js/features/array/includes");
 
 var _ci = _interopRequireDefault(require("./ci360.service"));
 
+var _ci2 = require("./ci360.utils");
+
+function setContainerId(container) {
+  var containerId = container.id;
+
+  if (!containerId) {
+    var uniqueId = Math.floor(Math.random() * 10000);
+    var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
+    container.id = generatedContainerId;
+  }
+
+  return container;
+}
+
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  var hotspotsConfigs = window.CI360.hotspots || {};
   [].slice.call(view360Array).forEach(function (container) {
-    viewers.push(new _ci.default(container));
+    var containerWithId = setContainerId(container);
+    var hotspotInstanceName = (0, _ci2.attr)(containerWithId, 'hotspot-instance') || (0, _ci2.attr)(containerWithId, 'data-hotspot-instance');
+    var hotspotConfig = hotspotsConfigs === null || hotspotsConfigs === void 0 ? void 0 : hotspotsConfigs[hotspotInstanceName];
+    viewers.push(new _ci.default(containerWithId, false, hotspotConfig));
   });
   window.CI360._viewers = viewers;
 }
@@ -43,6 +61,17 @@ function getActiveIndexByID(id, oriantation) {
   return currentViewer && currentViewer.activeImageX - 1;
 }
 
+function addView(id) {
+  var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
+
+  if (view360Array.length && id) {
+    var newViewContainer = view360Array.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+    newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
+  }
+}
+
 function update() {
   var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -53,15 +82,15 @@ function update() {
         return viewer.id === id;
       })[0];
 
-      return view.updatePlugin(forceUpdate);
+      view.updateView(forceUpdate, window.CI360._viewers);
     } catch (_unused) {
-      console.error("Cloudimage-360: there is no view with such id '".concat(id, "'"));
+      console.warn("Cloudimage-360: there is no view with such id '".concat(id, "', you may need to run window.addView('").concat(id, "') before run update'"));
     }
+  } else {
+    window.CI360._viewers.forEach(function (viewer) {
+      viewer.updateView(forceUpdate, window.CI360._viewers);
+    });
   }
-
-  return window.CI360._viewers.forEach(function (viewer) {
-    viewer.updatePlugin(forceUpdate);
-  });
 }
 
 function isNoViewers() {
@@ -73,6 +102,7 @@ window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
 window.CI360.update = update;
+window.CI360.addView = addView;
 
 if (!window.CI360.notInitOnLoad) {
   init();