js-cloudimage-360-view 2.7.12 → 3.0.0

package/CHANGELOG.md

@@ -25,6 +25,14 @@ Types of changes:
 - ...
 
 -------------
+## 3.0.0 - 2022-03-25
+### Added
+- possiblity to add makers or hotspots to each image
+- possiblity add views after init the plugin
+- possiblity to update views
+### Fixed
+- hide 360 logo after play once
+
 ## 2.7.12 - 2022-03-19
 ### Changed
 - hotspots init method

package/README.md

@@ -1,12 +1,13 @@
-[![Release](https://img.shields.io/badge/release-v2.7.12-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+
+[![Release](https://img.shields.io/badge/release-v3.0.0-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)
+[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
 
 [![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
+		<img
 			alt="The Lounge"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 </p>
@@ -30,15 +31,14 @@
 </p>
 
 A simple, interactive resource that can be used to provide a virtual tour of your product.
-
-<p align="center">
+<p align="left">
 	<img
 		alt="The Lounge"
-		src="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/demo-chair-500.gif?sanitize=true">
+		src="https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/demo-min.gif?vh=ecac07">
 </p>
 
 powered by [Cloudimage](https://www.cloudimage.io/)
-([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
+([Watch the video here](https://www.youtube.com/watch?v=tk4j_MpqvM8))
 
 ## <a name="table_of_contents"></a>Table of contents
 
@@ -49,6 +49,7 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 * [Customize elements](#customize-elements)
 * [Configuration](#configuration)
 * [Controls](#controls)
+* [Hotspots](#hotspots)
 * [Cloudimage responsive integration](#cloudimage-responsive-integration)
 * [Lazy loading integration](#lazy-loading)
 * [Best practices](#best-practices)
@@ -68,7 +69,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.5/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -79,9 +80,10 @@ After adding the js-cloudimage-360-view lib, simply initialize it with **class n
 ```html
 <div
    class="cloudimage-360"
-   data-folder="https://scaleflex.airstore.io/demo/360-car/"
-   data-filename-x="iris-{index}.jpeg"
-   data-amount-x="36"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
 ></div>
 ```
 
@@ -102,7 +104,7 @@ window.CI360.init();
 > NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with **notInitOnLoad** param
 > ```javascript
 > <script>window.CI360 = { notInitOnLoad: true }</script>
-> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
+> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
 
@@ -110,39 +112,42 @@ window.CI360.init();
 
 ###### Type: **Function**
 
-add new view by id to cloudimage 360 views.
-
 ```javascript
-window.CI360.add(idOfView: string);
+window.CI360.add(idOftheView: string);
 ```
+lazy init cloudimage-360 view by id.
+### Properties
+#### `idOftheView`: string
+The id of the new view
 
 ### update
 
 ###### Type: **Function**
 ```javascript
-window.CI360.update(idOfInstance, forceUpdate);
+window.CI360.update(idOftheView, 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
+#### `idOftheView`: string
+The id of the new view
+#### `forceUpdate`: bool
+Force the view to reinitialize.
 
 ```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"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
 ></div>
 ```
 ```javascript
-window.CI360.update('cloudimage-360-car');
+window.CI360.update('gurkha-suv');
 ```
-#### `forceUpdate`: bool
-Force the plugin to re-init.
+
 ```javascript
 window.CI360.update(null, true);
 ```
@@ -242,7 +247,6 @@ data-api-version="v7"
 data-api-version="null"
 ```
 ### data-filename-x (or filename-x)
-### ~~data-filename (or filename)~~ [deprecated]
 
 ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
 
@@ -251,15 +255,12 @@ The filename pattern for your 360 image. Must include {index}, which the library
 ### data-filename-y (or filename-y)
 
 ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
-
-The filename pattern for y-oriantation images. Must include {index}, which the library will replace with a number between 1 and [data-amount-y](#data-amount-y).
-
+The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
 
 ### <a name="data-amount-x"></a> data-amount-x (or amount-x)
-###  ~~data-amount (or amount-x)~~ [deprecated]
 ###### Type: **Number** | Default: **36** | _optional_
 
-Amount of images to load for 360 view.
+Amount of images to load in X-axis for 360 view .
 
 ### <a name="data-amount-y"></a> data-amount-y (or amount-y)
 
@@ -300,7 +301,6 @@ Changing autoplay behavior
 Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
 
 ### data-fullscreen (or fullscreen)
-### ~~data-full-screen (or full-screen)~~ [deprecated]
 ###### Type: **Bool** | Default: **false** | _optional_
 
 Open 360 spin view in full screen modal.
@@ -312,22 +312,19 @@ Open 360 spin view in full screen modal.
 Magnifier to zoom image.
 
 ### data-ratio (or ratio)
-
-
 ###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
 #### `ratio`: string
 
 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
 
 ```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"
+   class="cloudimage-360"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
+   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>
@@ -339,21 +336,22 @@ 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"
-	}'
+   class="cloudimage-360"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
+   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_
@@ -402,13 +400,6 @@ Display 360 view line at the bottom of container.
 
 Hide 360 view icon.
 
-### ~~data-logo-src (or logo-src)~~ [deprecated]
-
-###### ~~Type: **String** | Default: **https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg** | _optional_~~
-
-~~URL of asset to use as the 360 view icon.~~
-
-kindly read [Customize elements](#customize-elements)
 ### data-control-reverse (or control-reverse)
 
 ###### Type: **Bool** | Default: **false** | _optional_
@@ -434,8 +425,6 @@ Bottom offset for 360 view line.
 Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
 
 ### data-image-list-x (or data-image-list-x)
-### ~~data-image-list (or image-list)~~ [deprecated]
-
 ###### Type: **Array** | _optional_
 
 Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`.
@@ -451,6 +440,7 @@ data-image-list-x='[
    "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
    ]’
 ```
+
 ### data-image-list-y (or data-image-list-y)
 
 ###### Type: **Array** | _optional_
@@ -472,14 +462,13 @@ data-image-list-y='[
 
 ###### Type: **Number** | Default: **none** | _optional_
 
-Pointer zoom scale
+Option to scale images on click on it to provided value.
 
 example:
 
 ```javascript
 data-pointer-zoom="3"
 ```
-when mouse clicked the image scale will be multiplied by 3.
 
 ### data-lazyload (or lazyload)
 
@@ -495,7 +484,7 @@ Helper class to apply lazy-loading depending on library you choose, see [Lazy lo
 
 ## <a name="controls"></a> Controls
 
-You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom , ~~**cloudimage-360-prev**, **cloudimage-360-next**~~ [deprecated]
+You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom 
 
 ### Example CSS
 ```css
@@ -555,6 +544,157 @@ You can add controls by adding elements with the following classes: **cloudimage
 ```
 
 <a href="https://codesandbox.io/s/js-cloudimage-360-view-361eb?fontsize=14"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+## <a name="hotspots"/> Hotspots or Markers
+Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
+### Requirements
+First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config.
+Also we need to set an `id` attribute, we will need it to link the view with the hotspots config.
+
+### Create hotspots configuration
+The hotspots config should be an array of objects, each object in the array indicates a single hotspot config.
+For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it. <br>hint: To know the current image index we will need to set `data-info="white || black"` attribute.
+
+example:
+
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions: [
+   { imageIndex: 0, xCoord: 527, yCoord: 319 },
+   { imageIndex: 1, xCoord: 524 },
+   { imageIndex: 2, xCoord: 520 },
+   { imageIndex: 3, xCoord: 498 },
+   { imageIndex: 4, xCoord: 470 },
+   { imageIndex: 5, xCoord: 441 },
+  ]
+ }
+]
+```
+In the previous example, we have only set the Ycoord a single time at the image index 0.
+So if the coord didn't change there's no need to reset it, it will already take the previous value.
+
+Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below.
+## Variant
+### Link
+we need to provide the URL of the link and the link title.
+
+example:
+
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: {
+  title: 'New Gurkha Technical Specifications',
+  url: 'https://www.forcegurkha.co.in/specifications/',
+  newTab: true
+  }
+ }
+]
+```
+---
+### Popup
+Only the property inserted will displayed.
+| Property  |Type | Default | Description |
+| ------------- | ------------- | ------------- |------------- |
+| images  | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image  |
+| title  |String| null | Display title underneath the images  |
+| description| String | null | Display description underneath the title  |
+| moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL |
+| moreDetailsTitle  | String | null| Set the title of the more details button  |
+
+   example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: {
+   images: [
+    { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
+   ], // optional
+   title: 'Air Intake Snorkel', // optional
+   description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional
+   moreDetailsUrl: 'https://forcegurkha.co.in', // optional
+   moreDetailsTitle: 'Read more' // optional
+  }
+ }
+]
+```
+---
+### Custom
+Display any element in the DOM in a popup and link it with the hotspot.</br>
+We will need to set the variant property value to the id of the element.
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: 'gurkha-suv'
+ }
+]
+```
+## PopupProps
+Options to customize the hotspot popup.
+### Properties
+| Property  | Type | Defaullt |Description |
+| ------------- | ------------- | ------------- | ------------- |
+| popupSelector |String| null |Set className to the popup wrapper  |
+| open |Boolean | false |Open the popup  |
+| arrow |Boolean| true |Dipslay an arrow that points toward the hotspot element|
+| offset|Array | [0, 0] |Set a distance between the hotspot element and the popup  |
+| placement|String| Auto|- we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right)|
+
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant,
+  popupProps: {
+   popupSelector: 'air-intake-popup', // optional
+   offset: [20, 5], // optional
+   arrow: false, // optional
+   placement: 'bottom' // optional
+  },
+  indicatorSelector: 'first-hotspot-icon' // optional
+ }
+]
+```
+## Responsive hotspots
+Now we need to make our hotspots responsive to have an accurate positioning in different screens.
+we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.<br/>
+hint: `data-info` can be used to get view size.
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+   positions,
+   variant,
+   popupProps,
+   indicatorSelector,
+   initialDimensions: [ 1170, 662 ]
+ }
+]
+```
+## Add Hotspots
+we need this function to link the created config with the 360-view.
+```js
+window.CI360.addHotspots(idOftheView, hotspotsConfig);
+```
+example:
+```js
+window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);
+```
+<a href="https://codesandbox.io/s/competent-bogdan-49b0u6?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+### data-responsive (or responsive)
+
+###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
+
+Enables cloudimage responsive plugin for 360 view.
 
 ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
 
@@ -613,27 +753,6 @@ Lazy loading is not included into js-cloudimage-360-view by default. There are w
 
 [Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
 
-to save API calls you man want to use one of our cdn bundles:
-
-CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
-```
-
-CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
-```
-
-CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
-```
-
-
 ## <a name="best-practices"/> Best practices
 
 * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
@@ -659,5 +778,4 @@ Tested in all modern browsers and IE 11, 10, 9.
 All contributions are super welcome!
 
 ## <a name="license"></a>License
-JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
-
+JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)

package/dist/ci360.service.js

@@ -760,6 +760,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         image = this.imagesY[this.activeImageY - 1];
       }
 
+      if (!image) return;
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
@@ -965,11 +966,18 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         if (_this4.playOnce && isPlayedOnce) {
           window.clearTimeout(_this4.loopTimeoutId);
+          _this4.autoplay = false;
 
-          _this4.add360ViewIcon();
+          if (!_this4.hide360Logo) {
+            _this4.add360ViewIcon();
 
-          _this4.view360Icon.innerText = '';
-          (0, _ci.setView360Icon)(_this4.view360Icon, _this4.logoSrc);
+            _this4.view360Icon.innerText = '';
+            (0, _ci.setView360Icon)(_this4.view360Icon, _this4.logoSrc);
+          }
+
+          if (_this4.hotspotsConfigs) {
+            (0, _utils.updateHotspots)(_this4.container, _this4.hotspotsConfigs, _this4.activeImageX, _this4.activeImageY, _this4.movingDirection, _this4.isClicked);
+          }
         }
       }, this.autoplaySpeed);
     }
@@ -1123,8 +1131,11 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "remove360ViewIcon",
     value: function remove360ViewIcon() {
       if (!this.view360Icon) return;
-      this.innerBox.removeChild(this.view360Icon);
-      this.view360Icon = null;
+
+      try {
+        this.innerBox.removeChild(this.view360Icon);
+        this.view360Icon = null;
+      } catch (_unused) {}
     }
   }, {
     key: "initControls",

package/dist/static/css/hotspots.css

@@ -61,12 +61,11 @@
 .cloudimage-360-hotspot-custom-icon::after {
   content: '+';
   position: absolute;
-  line-height: 20px;
   left: 50%;
-  top: 100%;
+  top: 50%;
   color: #FFF;
   font-weight: 400;
-  transform: translate(-50%, -150%);
+  transform: translate(-50%, -50%);
   cursor: auto;
 }
 
@@ -128,8 +127,14 @@
   margin: 0 auto;
 }
 
+.cloudimage-360-images-carousel {
+  background-color: #f5f4f4;
+  border-radius: 2px;
+}
+
 .cloudimage-360-images-carousel .cloudimage-360-carousel-image {
   display: none;
+  object-fit: contain;
   min-height: 187px;
   max-width: 100%;
   max-height: 100%;

package/dist/static/css/style.css

@@ -88,6 +88,8 @@
   width: 80%;
   height: auto;
   margin: auto;
+  pointer-events: none;
+  user-select: none;
   transition: 0.5s all;
   z-index: 2;
 }

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createCarouselImage = void 0;
 
-var createCarouselImage = function createCarouselImage(imageSrc, imageIndex) {
+var createCarouselImage = function createCarouselImage(image, imageIndex) {
   var carouselImage = document.createElement('img');
   carouselImage.className = 'cloudimage-360-carousel-image';
-  carouselImage.setAttribute('src', imageSrc);
+  carouselImage.setAttribute('src', image.src || '');
+  carouselImage.setAttribute('alt', image.alt || 'more-info');
 
   if (!imageIndex) {
     carouselImage.setAttribute('data-active-image', '');

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

@@ -9,14 +9,14 @@ var _createCarouselDot = require("./create-carousel-dot");
 
 var _createCarouselImage = require("./create-carousel-image");
 
-var createImagesCarousel = function createImagesCarousel(imagesSrcs, popup, container) {
+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';
-  imagesSrcs.forEach(function (imageSrc, imageIndex) {
-    var carouselImage = (0, _createCarouselImage.createCarouselImage)(imageSrc, imageIndex);
+  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);

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

@@ -1,10 +1,14 @@
 "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");
@@ -35,14 +39,14 @@ var createPopup = function createPopup(container, hotspotConfig, popupProps) {
     return e.stopPropagation();
   };
 
-  if (images || description || moreDetailsUrl || title && !url) {
+  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 {
+  } else if (typeof variant === 'string') {
     try {
-      var popupNode = (0, _getPopupNode.getPopupNode)(anchorId);
+      var popupNode = (0, _getPopupNode.getPopupNode)(variant);
       var userPopup = popupNode.cloneNode(true);
       popup.appendChild(userPopup);
       popupNode.parentNode.removeChild(popupNode);

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.fillEmptyCoordWithPrevious = void 0;
 
 /* eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }] */
-var fillEmptyCoordWithPrevious = function fillEmptyCoordWithPrevious(hotspots, hotspotIndex, coord) {
+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 _hotspots$i;
+    var _positions$i;
 
-    var previousXCoord = (_hotspots$i = hotspots[i]) === null || _hotspots$i === void 0 ? void 0 : _hotspots$i[coord];
+    var previousXCoord = (_positions$i = positions[i]) === null || _positions$i === void 0 ? void 0 : _positions$i[coord];
 
     if (previousXCoord) {
       return previousXCoord;

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

@@ -21,8 +21,8 @@ var generateHotspotsConfigs = function generateHotspotsConfigs(hotspotsProps) {
   var hotspotsConfigs = hotspotsProps.map(function (hotspotProps) {
     var _hotspotProps$variant = hotspotProps.variant,
         variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant,
-        _hotspotProps$hotspot = hotspotProps.hotspots,
-        hotspots = _hotspotProps$hotspot === void 0 ? [] : _hotspotProps$hotspot,
+        _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,
@@ -45,7 +45,7 @@ var generateHotspotsConfigs = function generateHotspotsConfigs(hotspotsProps) {
         anchorId: anchorId
       }),
       popupProps: popupConfig,
-      hotspots: hotspots,
+      positions: positions,
       indicatorSelector: indicatorSelector,
       initialDimensions: initialDimensions,
       orientation: orientation.toLowerCase()

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

@@ -9,7 +9,7 @@ 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 ? false : _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,

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

@@ -7,17 +7,17 @@ exports.prepareHotspotsPositions = void 0;
 
 var _fillEmptyCoordWithPrevious = require("./fill-empty-coord-with-previous");
 
-var prepareHotspotsPositions = function prepareHotspotsPositions(hotspots) {
-  return hotspots.reduce(function (accumulate, current, currentIndex) {
+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)(hotspots, currentIndex, 'xCoord');
+      current.xCoord = (0, _fillEmptyCoordWithPrevious.fillEmptyCoordWithPrevious)(positions, currentIndex, 'xCoord');
     }
 
     if (!isIncludesYcoord) {
-      current.yCoord = (0, _fillEmptyCoordWithPrevious.fillEmptyCoordWithPrevious)(hotspots, currentIndex, 'yCoord');
+      current.yCoord = (0, _fillEmptyCoordWithPrevious.fillEmptyCoordWithPrevious)(positions, currentIndex, 'yCoord');
     }
 
     accumulate.push(current);

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

@@ -20,14 +20,14 @@ var updateHotspots = function updateHotspots(container, hotspotsProps) {
   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 hotspots = hotspotProps.hotspots,
+    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)(hotspots);
+    var hotspotsPositions = (0, _prepareHotspotsPositions.prepareHotspotsPositions)(positions);
     var currentPosition = hotspotsPositions.find(function (hotspotPosition) {
       return hotspotPosition.imageIndex === currentImageIndex;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.12",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -52,6 +52,7 @@
     "gh-pages": "^2.0.1",
     "highlight.js": "^10.4.1",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "mobile-detect": "^1.4.3",
     "style-loader": "^0.23.1",
     "webpack": "^4.46.0",