js-cloudimage-360-view 2.7.4 → 2.7.7

package/CHANGELOG.md

@@ -25,6 +25,24 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.7 - 2022-02-24
+### Fixed
+- container width on mobile
+- re-render method
+
+## 2.7.6 - 2022-02-20
+### Fixed
+- drag speed
+- responsive canvas width and height
+
+## 2.7.5 - 2022-02-08
+### Added
+- update method to re-render or re-init the plugin
+### Fixed
+- drag speed on mobile
+- error when drag speed is too high
+- error in dependencies
+
 ## 2.7.4 - 2022-01-26
 ### Fixed
 - typo in documentation file

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.4-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.7-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,11 +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">
-	<a href="https://www.cloudimage.io/">
-		<img
+<img
 			alt="The Lounge"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
-	</a>
 </p>
 
 <h1 align="center">
@@ -70,7 +68,7 @@ To see the Cloudimage 360 view plugin in action, please check out the
 Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.4/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.5/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -107,6 +105,36 @@ 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>
 > ```
+### update
+
+###### Type: **Function**
+```javascript
+window.CI360.update(idOfInstance, forceUpdate);
+```
+Update cloudimage 360 viewer instance.<br/>
+For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`),
+the plugin will re-init.
+### Properties
+#### `idOfInstance`: string
+The id of the instance
+
+```html
+<div
+   id="cloudimage-360-car"
+   class="cloudimage-360"
+   data-folder="https://scaleflex.airstore.io/demo/360-car/"
+   data-filename-x="iris-{index}.jpeg"
+   data-amount-x="36"
+></div>
+```
+```javascript
+window.CI360.update('cloudimage-360-car');
+```
+#### `forceUpdate`: bool
+Force the plugin to re-init.
+```javascript
+window.CI360.update(null, true);
+```
 
 ### destroy
 
@@ -127,8 +155,15 @@ window.CI360.destroy();
 Get the {index} of the image that is being viewed.
 
 ```javascript
-window.CI360.getActiveIndexByID('id_of_product', oriantation = 'x');
+window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);
 ```
+### Properties
+#### `idOfInstance`: string
+The id of the instance
+
+#### `oriantation`: string
+The oriantation of the active index
+
 ## <a name="customize-elements"></a> Customize elements
 
 You can customize elements by adding the following classes:
@@ -266,25 +301,49 @@ Open 360 spin view in full screen modal.
 
 Magnifier to zoom image.
 
-### ~~data-ratio (or ratio)~~ [deprecated]
-
-
-###### ~~Type: **Number** (height / width) | Default: **none** | _optional_~~
+### data-ratio (or ratio)
 
-~~Prevents page from jumping.~~
-### data-width (or width)
 
-###### Type: **Number** | Default: **none** | _optional_
+###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
+#### `ratio`: string
 
-Set a responsive width for the container.
-It will maintain the aspect ratio in respect to width
-### data-height (or height)
+Setting the height relative to the container width according to the provided ratio</br>
+In the following example, the height should be 0.3 the container width
 
-###### Type: **Number** | Default: **none** | _optional_
+```html
+<div
+	id="cloudimage-360-car"
+	class="cloudimage-360"
+	data-folder="https://scaleflex.airstore.io/demo/360-car/"
+	data-filename-x="iris-{index}.jpeg"
+	data-amount-x="36"
+	data-ratio="2"
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-g4wyt1?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+#### `ratio`: JSON
+Setting the height relative to the container width at any window size.
 
-Set a responsive height for the container.
-It will maintain the aspect ratio in respect to height
+In the following example, the height should be 1.3 the container width at window size less than or equal to 567px
+and 2.22 at window size less than or equal to 768px.
 
+```html
+<div
+	id="cloudimage-360-car"
+	class="cloudimage-360"
+	data-folder="https://scaleflex.airstore.io/demo/360-car/"
+	data-filename-x="iris-{index}.jpeg"
+	data-amount-x="36"
+	data-ratio='{
+		"576": "1.3",
+		"768": "2.22",
+		"992": "2.23",
+		"1200": "3",
+		"2400": "3.2"
+	}'
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-5tssb7?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 ### data-autoplay-reverse (or autoplay-reverse)
 
 ###### Type: **Bool** | Default: **false** | _optional_

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",
@@ -175,6 +182,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.pointerZoom && this.mouseTracked) {
         this.togglePointerZoom();
       }
+
+      if (this.isMagnifyOpen) {
+        this.closeMagnifier();
+      }
     }
   }, {
     key: "togglePointerZoom",
@@ -211,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;
@@ -269,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) {
@@ -285,6 +301,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         y: event.touches[0].clientY
       };
       this.isClicked = true;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
     key: "touchEnd",
@@ -302,11 +322,16 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "touchMove",
     value: function touchMove(event) {
       if (!this.isClicked || !this.imagesLoaded) return;
+
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
       var nextPositions = {
         x: event.touches[0].clientX,
         y: event.touches[0].clientY
       };
-      this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions);
+      this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
       this.onMoveHandler(event);
     }
   }, {
@@ -630,13 +655,9 @@ var CI360Viewer = /*#__PURE__*/function () {
       (0, _utils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
     }
   }, {
-    key: "updateContainerSize",
-    value: function updateContainerSize(image) {
-      var parentEl = this.container.parentNode || {};
-      var imageAspectRatio = image.width / image.height;
-      var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
-      var containerWidth = (0, _utils.getContainerResponsiveWidth)(parentEl, this.containerWidth);
-      var containerHeight = (0, _utils.getContainerResponsiveHeight)(this.container, containerWidth, this.containerHeight);
+    key: "updateContainerAndCanvasSize",
+    value: function updateContainerAndCanvasSize(image) {
+      var imageAspectRatio = (0, _utils.getImageAspectRatio)(image, this.ratio);
 
       if (this.fullscreenView) {
         this.container.width = window.innerWidth * this.devicePixelRatio;
@@ -647,24 +668,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         return;
       }
 
-      if (this.containerWidth && this.containerHeight) {
-        this.container.style.width = containerWidth + 'px';
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if (!this.containerWidth && !this.containerHeight) {
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if ((isProvidedHeightLessThanWidth || !this.containerWidth) && this.containerHeight) {
-        this.container.style.maxWidth = containerHeight * imageAspectRatio + 'px';
-        this.container.style.height = containerHeight + 'px';
-      } else {
-        this.container.style.maxWidth = containerWidth + 'px';
-        this.container.style.height = containerWidth / imageAspectRatio + 'px';
-      }
+      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+      this.canvas.style.width = this.container.offsetWidth + 'px';
+      this.canvas.height = this.container.offsetWidth / imageAspectRatio * this.devicePixelRatio;
+      this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
     }
   }, {
     key: "onResizedImageLoad",
@@ -689,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.updateContainerSize(firstImage);
       this.update();
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
@@ -717,10 +735,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
-      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';
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
         var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
@@ -734,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",
@@ -789,6 +812,7 @@ 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;
@@ -798,8 +822,8 @@ var CI360Viewer = /*#__PURE__*/function () {
         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) {
@@ -807,7 +831,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) {
@@ -817,6 +841,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",
@@ -883,7 +911,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",
@@ -927,6 +955,21 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.bottomCircle) this.show360ViewCircleIcon();
       window.clearTimeout(this.loopTimeoutId);
     }
+  }, {
+    key: "updatePlugin",
+    value: function updatePlugin(forceUpdate) {
+      var container = this.container;
+      var imageProps = (0, _ci.get360ViewProps)(container);
+      var srcPropsChanged = (0, _utils.isSrcPropsChanged)(this, imageProps);
+      var reloadPlugin = srcPropsChanged || forceUpdate;
+      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);
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -1133,9 +1176,7 @@ var CI360Viewer = /*#__PURE__*/function () {
           passive: true
         });
         this.container.addEventListener('touchend', this.touchEnd.bind(this));
-        this.container.addEventListener('touchmove', this.touchMove.bind(this), {
-          passive: true
-        });
+        this.container.addEventListener('touchmove', this.touchMove.bind(this));
       }
 
       if (keys) {
@@ -1150,6 +1191,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function init(container) {
       var _this6 = 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,
           apiVersion = _get360ViewProps.apiVersion,
@@ -1160,7 +1204,6 @@ var CI360Viewer = /*#__PURE__*/function () {
           indexZeroBase = _get360ViewProps.indexZeroBase,
           amountX = _get360ViewProps.amountX,
           amountY = _get360ViewProps.amountY,
-          imageOffset = _get360ViewProps.imageOffset,
           _get360ViewProps$drag = _get360ViewProps.draggable,
           draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
           _get360ViewProps$swip = _get360ViewProps.swipeable,
@@ -1190,9 +1233,10 @@ var CI360Viewer = /*#__PURE__*/function () {
           controlReverse = _get360ViewProps.controlReverse,
           hide360Logo = _get360ViewProps.hide360Logo,
           logoSrc = _get360ViewProps.logoSrc,
-          containerWidth = _get360ViewProps.containerWidth,
-          containerHeight = _get360ViewProps.containerHeight,
-          pointerZoom = _get360ViewProps.pointerZoom;
+          pointerZoom = _get360ViewProps.pointerZoom,
+          ratio = _get360ViewProps.ratio,
+          _get360ViewProps$imag = _get360ViewProps.imageInfo,
+          imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag;
 
       var ciParams = {
         ciToken: ciToken,
@@ -1212,7 +1256,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.activeImageX = autoplayReverse ? this.amountX : 1;
       this.activeImageY = autoplayReverse ? this.amountY : 1;
       this.spinY = autoplayBehavior === _constants.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
-      this.imageOffset = imageOffset;
       this.bottomCircle = bottomCircle;
       this.bottomCircleOffset = bottomCircleOffset;
       this.boxShadow = boxShadow;
@@ -1223,27 +1266,74 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.reversed = autoplayReverse;
       this.disableDrag = disableDrag;
       this.fullscreen = fullscreen;
-      this.magnifier = !this.isMobile && magnifier ? magnifier : false;
+      this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
       this.lazyloadX = lazyload;
       this.lazyloadY = lazyload;
       this.lazySelector = lazySelector;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
-      this.dragSpeed = dragSpeed;
+      this.dragSpeed = Math.max(dragSpeed, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
       this.logoSrc = logoSrc;
       this.ciParams = ciParams;
       this.apiVersion = apiVersion;
-      this.containerWidth = containerWidth;
-      this.containerHeight = containerHeight;
       this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
       this.keysReverse = keysReverse;
+      this.info = imageInfo;
+      this.ratio = ratio && JSON.parse(ratio);
+
+      if (reload) {
+        new CI360Viewer(this.container);
+        return;
+      }
+
+      if (update) {
+        (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);
+        }
+
+        this.onAllImagesLoaded();
+        return;
+      }
+
       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,
@@ -1313,7 +1403,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
 
         if (isFirstImageLoaded) {
-          _this6.updateContainerSize(image);
+          _this6.updateContainerAndCanvasSize(image);
 
           _this6.onFirstImageLoaded(image);
         }

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");
 
@@ -21,7 +21,6 @@ var get360ViewProps = function get360ViewProps(image) {
     indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
     amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),
     amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10),
-    imageOffset: parseInt(attr(image, 'image-offset') || attr(image, 'data-image-offset')),
     speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
     dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
     keys: isTrue(image, 'keys'),
@@ -35,7 +34,7 @@ var get360ViewProps = function get360ViewProps(image) {
     bottomCircle: isTrue(image, 'bottom-circle'),
     disableDrag: isTrue(image, 'disable-drag'),
     fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
-    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
+    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
     bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
     ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
@@ -47,8 +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',
-    containerWidth: parseInt(attr(image, 'width') || attr(image, 'data-width'), 10) || 0,
-    containerHeight: parseInt(attr(image, 'height') || attr(image, 'data-height'), 10) || 0
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
+    imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };
 };
 
@@ -64,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/image-src-props.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_SRC_PROPS = void 0;
+var IMAGE_SRC_PROPS = ['folder', 'filenameX', 'filenameY', 'apiVersion', 'imageListX', 'imageListY', 'indexZeroBase', 'amountX', 'amountY', 'lazySelector'];
+exports.IMAGE_SRC_PROPS = IMAGE_SRC_PROPS;