js-cloudimage-360-view 2.7.0 → 2.7.2-beta.3

package/CHANGELOG.md

@@ -25,20 +25,30 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.1 - 2020-11-06
+### Added
+- click to reset mouse zoom
+- show 360 logo after play once
+### Fixed
+- set click as default value to start zoom
+- Sass error
+### Changed
+- pointer zoom behavior
 
 ## 2.7.0 - 2020-11-04
 ### Added
-- play once then stops auto-play
-- spin in y-direction
+- play once then stop auto-play
+- spin in the y-direction
 - zoom with mouse wheel
 - zoom with fingers on mobile
-- possibilty to change icons styles
+- possibility to change icons styles
 
 ### Fixed
 - hide scrollbar in fullscreen mode
 - auto-play not working on mobile
 - error on init the plugin inside a modal
-- removed chrome waringing about non-passive events
+- removed chrome warning about non-passive events
+- images are not resized when window size changes
 
 ### Changed
 - migrate CDN URL to V7 

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.1-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)
@@ -9,7 +9,7 @@
 	<img
 		height="175"
 		alt="The Lounge"
-		src="https://demo.cloudimg.io/v7/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
+		src="https://assets.scaleflex.com/Marketing/Logos/Cloudimage+Logos/Logotype+with+Scaleflex/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&force_format=jpg">
 </p>
 
 <h1 align="center">
@@ -69,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.0/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.1/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -161,7 +161,20 @@ The selector for js-cloudimage-360-view lib.
 ###### Type: **String(url)** | _required_
 
 Your images folder on server.
+### data-api-version (or api-version)
 
+###### Type: **String** |Default: **'v7'** | _optional_
+
+Allow to use a specific version of API.
+
+- set a specific version of API
+```javascript
+data-api-version="v7"
+```
+- disable API version 
+```javascript
+data-api-version="null"
+```
 ### data-filename (or filename)
 
 ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
@@ -198,6 +211,12 @@ Support for 360 spin by pressing arrow keys on keyboard.
 
 Autoplay 360 spin view on load.
 
+### data-play-once (or autoplay)
+
+###### Type: **Bool** | Default: **false** | _optional_
+
+stops the autoplay after one complete cycle.
+
 ### data-autoplay-behavior (or autoplay-behavior)
 
 ###### Type: **String** | Default: **spin-x** | _optional_
@@ -236,6 +255,12 @@ Prevents page from jumping.
 
 Autoplay 360 spin view on load.
 
+### data-disable-drag (or disable-drag)
+
+###### Type: **bool** | Default: **false** | _optional_
+
+disable mouse drag.
+
 ### data-speed (or speed)
 
 ###### Type: **Number** | Default: **150** | _optional_
@@ -338,7 +363,7 @@ Disable pointer zoom on desktop
 Disable pinch zoom on mobile
 ### data-to-start-pointer-zoom (or to-start-pointer-zoom)
 
-###### Type: **string** | Default: **scroll** | _optional_
+###### Type: **string** | Default: **click** | _optional_
 
 Events to start pointer zoom
 

package/dist/ci360.constants.js

@@ -28,9 +28,12 @@ var AUTOPLAY_BEHAVIOR = {
 var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
 var AND_SYMBOL_REGEX = /\?&/g;
 
+var falsyValues = [false, 0, null, undefined, 'false', "0", 'null', 'undefined'];
+
 exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
 exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
 exports.ORIENTATIONS = ORIENTATIONS;
 exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
 exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
-exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.falsyValues = falsyValues;

package/dist/ci360.service.js

@@ -45,6 +45,7 @@ var CI360Viewer = function () {
     this.init(container);
     this.clickedToZoom = false;
     this.isMagnifyOpen = false;
+    this.isDragged = false;
     this.startPointerZoom = false;
     this.zoomIntensity = 0;
     this.mouseTracked = false;
@@ -75,18 +76,21 @@ var CI360Viewer = function () {
       this.intialPositions = { x: pageX, y: pageY };
       this.movementStart = { x: pageX, y: pageY };
       this.isClicked = true;
-      this.clickedToZoom = true;
-      this.container.style.cursor = 'grabbing';
+      this.isDragged = false;
     }
   }, {
     key: 'mouseUp',
     value: function mouseUp() {
       if (!this.imagesLoaded || !this.isClicked) return;
-
       this.movementStart = { x: 0, y: 0 };
       this.isStartSpin = false;
       this.isClicked = false;
-      this.container.style.cursor = 'grab';
+
+      if (!this.clickedToZoom) {
+        this.container.style.cursor = 'grab';
+      } else {
+        this.container.style.cursor = 'nesw-resize';
+      }
 
       if (this.bottomCircle && !this.zoomIntensity) {
         this.show360ViewCircleIcon();
@@ -108,8 +112,12 @@ var CI360Viewer = function () {
       if (this.isClicked) {
         var nextPositions = { x: pageX, y: pageY };
 
+        this.container.style.cursor = 'grabbing';
+
         this.updateMovingDirection(this.intialPositions, nextPositions);
         this.onMoveHandler(event);
+
+        this.isDragged = true;
       } else if (this.zoomIntensity) {
         this.update();
       }
@@ -127,6 +135,16 @@ var CI360Viewer = function () {
 
       if (differenceInPositionY > sensitivity && this.allowSpinY) this.movingDirection = _ci2.ORIENTATIONS.Y;
     }
+  }, {
+    key: 'mouseClick',
+    value: function mouseClick(event) {
+      if (!this.isDragged && this.clickedToZoom) {
+        this.resetZoom();
+      } else if (!this.isDragged) {
+        this.clickedToZoom = true;
+        this.container.style.cursor = 'nesw-resize';
+      }
+    }
   }, {
     key: 'mouseScroll',
     value: function mouseScroll(event) {
@@ -136,9 +154,18 @@ var CI360Viewer = function () {
       var isScrolledToZoom = this.toStartPointerZoom === _ci2.TO_START_POINTER_ZOOM.SCROLL_TO_START;
 
       if (isClickedToZoom || isScrolledToZoom) {
+        this.container.style.cursor = 'nesw-resize';
+
         this.initMouseScrollZoom(event);
       }
     }
+  }, {
+    key: 'closeZoomHandler',
+    value: function closeZoomHandler() {
+      this.container.style.cursor = 'grab';
+      this.clickedToZoom = false;
+      this.resetZoom();
+    }
   }, {
     key: 'touchStart',
     value: function touchStart(event) {
@@ -190,12 +217,19 @@ var CI360Viewer = function () {
     }
   }, {
     key: 'keyDownGeneral',
-    value: function keyDownGeneral() {
+    value: function keyDownGeneral(event) {
       if (!this.imagesLoaded) return;
 
       if (this.glass) {
         this.closeMagnifier();
       }
+
+      if (event.keyCode === 27) {
+        //ESC
+        if (this.clickedToZoom) {
+          this.closeZoomHandler();
+        }
+      }
     }
   }, {
     key: 'hideInitialIcons',
@@ -346,6 +380,8 @@ var CI360Viewer = function () {
       this.mouseTracked = false;
       this.clickedToZoom = false;
 
+      this.container.style.cursor = 'grab';
+
       if (this.resetZoomIcon) this.hideResetZoomIcon();
 
       if (this.zoomIntensity) {
@@ -655,6 +691,63 @@ var CI360Viewer = function () {
       this.moveActiveYIndexDown(1);
       this.update();
     }
+  }, {
+    key: 'getContainerResponsiveWidth',
+    value: function getContainerResponsiveWidth() {
+      var parentEl = this.container.parentNode || {};
+
+      if (this.containerWidth) {
+        if (parentEl.offsetWidth < this.containerWidth) {
+          return parentEl.offsetWidth;
+        }
+
+        return this.containerWidth;
+      }
+
+      return parentEl.offsetWidth;
+    }
+  }, {
+    key: 'getContainerResponsiveHeight',
+    value: function getContainerResponsiveHeight(width) {
+      if (this.containerHeight) {
+        if (width < this.containerHeight) {
+          return width;
+        }
+
+        return this.containerHeight;
+      }
+
+      return this.container.offsetWidth;
+    }
+  }, {
+    key: 'updateContainerSize',
+    value: function updateContainerSize(image) {
+      var imageAspectRatio = image.width / image.height;
+      var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
+      var containerWidth = this.getContainerResponsiveWidth();
+      var containerHeight = this.getContainerResponsiveHeight(containerWidth);
+
+      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';
+      }
+    }
   }, {
     key: 'onLoadResizedImages',
     value: function onLoadResizedImages(orientation, event) {
@@ -663,6 +756,10 @@ var CI360Viewer = function () {
       var totalAmount = this.amountX + this.amountY;
       var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
 
+      if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
+        this.updateContainerSize(event.target);
+      }
+
       if (totalLoadedImages === totalAmount) {
         this.replaceImages(orientation);
         this.update();
@@ -729,12 +826,12 @@ var CI360Viewer = function () {
   }, {
     key: 'requestResizedImages',
     value: function requestResizedImages() {
-      var srcX = this.getSrc(this.responsive, this.container, this.folder, this.filenameX, this.ciParams);
+      var srcX = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameX, this.ciParams);
 
       this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
 
       if (this.allowSpinY) {
-        var srcY = this.getSrc(this.responsive, this.container, this.folder, this.filenameY, this.ciParams);
+        var srcY = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameY, this.ciParams);
 
         this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
       }
@@ -768,8 +865,9 @@ var CI360Viewer = function () {
       } else {
         this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
         this.canvas.style.width = this.container.offsetWidth + 'px';
-        this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / image.width * image.height;
-        this.canvas.style.height = this.container.offsetWidth / image.width * image.height + 'px';
+
+        this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
+        this.canvas.style.height = this.container.offsetHeight + 'px';
 
         if (this.startPointerZoom || this.startPinchZoom) {
           this.updateImageScale(ctx);
@@ -856,6 +954,8 @@ var CI360Viewer = function () {
     value: function onFirstImageLoaded(event) {
       var _this2 = this;
 
+      this.updateContainerSize(event.target);
+
       if (!this.hide360Logo) {
         this.add360ViewIcon();
       }
@@ -886,7 +986,7 @@ var CI360Viewer = function () {
         }
 
         if (this.container.offsetWidth === 0) {
-          var modalRef = this.container.parentElement;
+          var modalRef = this.container.parentNode || {};
 
           this.canvas.width = parseInt(modalRef.style.width) * this.devicePixelRatio;
           this.canvas.style.width = modalRef.style.width;
@@ -899,8 +999,8 @@ var CI360Viewer = function () {
           this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
           this.canvas.style.width = this.container.offsetWidth + 'px';
 
-          this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / event.target.width * event.target.height;
-          this.canvas.style.height = this.container.offsetWidth / event.target.width * event.target.height + 'px';
+          this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
+          this.canvas.style.height = this.container.offsetHeight + 'px';
         }
 
         _ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
@@ -921,10 +1021,6 @@ var CI360Viewer = function () {
         });
       }
 
-      if (this.ratio) {
-        this.container.style.minHeight = 'auto';
-      }
-
       if (this.fullscreenView) {
         this.addCloseFullscreenView();
       }
@@ -1017,7 +1113,7 @@ var CI360Viewer = function () {
     value: function hideFullscreenIcon() {
       if (!this.fullscreenIcon) return;
 
-      this.fullscreenIcon.style.opacity = '0.4';
+      this.fullscreenIcon.style.display = 'none';
       this.fullscreenIcon.style.pointerEvents = 'none';
     }
   }, {
@@ -1025,7 +1121,7 @@ var CI360Viewer = function () {
     value: function showFullscreenIcon() {
       if (!this.fullscreenIcon) return;
 
-      this.fullscreenIcon.style.opacity = '1';
+      this.fullscreenIcon.style.display = 'block';
       this.fullscreenIcon.style.pointerEvents = 'auto';
     }
   }, {
@@ -1045,7 +1141,7 @@ var CI360Viewer = function () {
     value: function disableMagnifierIcon() {
       if (!this.magnifierIcon) return;
 
-      this.magnifierIcon.style.opacity = '0.4';
+      this.magnifierIcon.style.display = 'none';
       this.magnifierIcon.style.pointerEvents = 'none';
     }
   }, {
@@ -1053,7 +1149,7 @@ var CI360Viewer = function () {
     value: function enableMagnifierIcon() {
       if (!this.magnifierIcon) return;
 
-      this.magnifierIcon.style.opacity = '1';
+      this.magnifierIcon.style.display = 'block';
       this.magnifierIcon.style.pointerEvents = 'auto';
     }
   }, {
@@ -1280,6 +1376,11 @@ var CI360Viewer = function () {
 
         if (_this4.playOnce && isPlayedOnce) {
           window.clearTimeout(_this4.loopTimeoutId);
+
+          _this4.add360ViewIcon();
+
+          _this4.view360Icon.innerText = '';
+          (0, _ci.setView360Icon)(_this4.view360Icon, _this4.logoSrc);
         }
       }, this.autoplaySpeed);
     }
@@ -1291,16 +1392,20 @@ var CI360Viewer = function () {
     }
   }, {
     key: 'getSrc',
-    value: function getSrc(responsive, container, folder, filename, _ref) {
-      var ciToken = _ref.ciToken,
-          ciFilters = _ref.ciFilters,
-          ciTransformation = _ref.ciTransformation;
+    value: function getSrc(container, folder, apiVersion, filename) {
+      var ciParams = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+      var ciToken = ciParams.ciToken,
+          ciFilters = ciParams.ciFilters,
+          ciTransformation = ciParams.ciTransformation;
 
       var src = '' + folder + filename;
 
-      if (responsive) {
+      if (ciToken) {
         var imageOffsetWidth = container.offsetWidth;
 
+        var vesrion = _ci2.falsyValues.indexOf(apiVersion) !== -1 ? null : apiVersion;
+        var finalApiVersion = vesrion ? vesrion + '/' : '';
+
         if (this.fullscreenView) {
           var containerRatio = container.offsetHeight / container.offsetWidth;
 
@@ -1311,7 +1416,7 @@ var CI360Viewer = function () {
 
         var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)((0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
 
-        src = 'https://' + ciToken + '.cloudimg.io/v7/' + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
+        src = 'https://' + ciToken + '.cloudimg.io/' + finalApiVersion + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
       }
 
       return src;
@@ -1323,11 +1428,12 @@ var CI360Viewer = function () {
       var lazyload = arguments[3];
       var lazySelector = arguments[4];
       var container = arguments[5];
+      var ciParams = arguments[6];
 
       var _this5 = this;
 
-      var responsive = arguments[6];
-      var ciParams = arguments[7];
+      var apiVersion = arguments[7];
+      var filename = arguments[8];
 
       if (this.imageList) {
         try {
@@ -1336,7 +1442,7 @@ var CI360Viewer = function () {
           this.amountX = images.length;
           images.forEach(function (src, index) {
             var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
-            var resultSrc = _this5.getSrc(responsive, container, folder, src, ciParams);
+            var resultSrc = _this5.getSrc(container, folder, apiVersion, filename, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
             var originalSrc = resultSrc.slice(lastIndex);
 
@@ -1536,11 +1642,6 @@ var CI360Viewer = function () {
       this.canvas.style.width = '100%';
       this.canvas.style.fontSize = '0';
 
-      if (this.ratio) {
-        this.container.style.minHeight = this.container.offsetWidth * this.ratio + 'px';
-        this.canvas.height = parseInt(this.container.style.minHeight);
-      }
-
       this.innerBox.appendChild(this.canvas);
     }
   }, {
@@ -1550,7 +1651,7 @@ var CI360Viewer = function () {
 
       window.addEventListener('resize', (0, _ci.debounce)(function () {
         _this7.requestResizedImages();
-      }, 300));
+      }, 80));
 
       if (draggable && !this.disableDrag) {
         this.container.addEventListener('mousedown', this.mouseDown.bind(this));
@@ -1565,6 +1666,7 @@ var CI360Viewer = function () {
       }
 
       if (!this.disablePointerZoom && !this.fullscreenView) {
+        this.container.addEventListener('click', this.mouseClick.bind(this));
         this.container.addEventListener('wheel', this.mouseScroll.bind(this));
       }
 
@@ -1609,6 +1711,7 @@ var CI360Viewer = function () {
     value: function init(container) {
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
           folder = _get360ViewProps.folder,
+          apiVersion = _get360ViewProps.apiVersion,
           filenameX = _get360ViewProps.filenameX,
           filenameY = _get360ViewProps.filenameY,
           imageList = _get360ViewProps.imageList,
@@ -1644,7 +1747,6 @@ var CI360Viewer = function () {
           magnifier = _get360ViewProps.magnifier,
           magnifyInFullscreen = _get360ViewProps.magnifyInFullscreen,
           ratio = _get360ViewProps.ratio,
-          responsive = _get360ViewProps.responsive,
           ciToken = _get360ViewProps.ciToken,
           ciFilters = _get360ViewProps.ciFilters,
           ciTransformation = _get360ViewProps.ciTransformation,
@@ -1655,7 +1757,9 @@ var CI360Viewer = function () {
           stopAtEdges = _get360ViewProps.stopAtEdges,
           controlReverse = _get360ViewProps.controlReverse,
           hide360Logo = _get360ViewProps.hide360Logo,
-          logoSrc = _get360ViewProps.logoSrc;
+          logoSrc = _get360ViewProps.logoSrc,
+          containerWidth = _get360ViewProps.containerWidth,
+          containerHeight = _get360ViewProps.containerHeight;
 
       var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
 
@@ -1664,6 +1768,7 @@ var CI360Viewer = function () {
       this.addLoader();
 
       this.folder = folder;
+      this.apiVersion = apiVersion;
       this.filenameX = filenameX;
       this.filenameY = filenameY;
       this.imageList = imageList;
@@ -1702,20 +1807,22 @@ var CI360Viewer = function () {
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
       this.logoSrc = logoSrc;
-      this.responsive = responsive;
       this.ciParams = ciParams;
+      this.apiVersion = apiVersion;
+      this.containerWidth = containerWidth;
+      this.containerHeight = containerHeight;
 
       this.applyStylesToContainer();
 
       this.addCanvas();
 
-      var srcX = this.getSrc(responsive, container, folder, filenameX, ciParams);
-      var srcY = this.getSrc(responsive, container, folder, filenameY, ciParams);
+      var srcX = this.getSrc(container, folder, apiVersion, filenameX, ciParams);
+      var srcY = this.getSrc(container, folder, apiVersion, filenameY, ciParams);
 
-      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams);
+      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, ciParams, apiVersion, filenameX);
 
       if (amountY) {
-        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams);
+        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, ciParams, apiVersion, filenameY);
       }
 
       this.attachEvents(draggable, swipeable, keys);

package/dist/ci360.utils.js

@@ -11,6 +11,7 @@ var _ci = require('./ci360.constants');
 var get360ViewProps = function get360ViewProps(image) {
   return {
     folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
+    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
     filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
     filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
     imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
@@ -28,7 +29,7 @@ var get360ViewProps = function get360ViewProps(image) {
     disablePointerZoom: isTrue(image, 'disable-pointer-zoom'),
     disablePinchZoom: isTrue(image, 'disable-pinch-zoom'),
     onMouseLeave: attr(image, 'on-mouse-leave') || attr(image, 'data-on-mouse-leave'),
-    toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.SCROLL_TO_START,
+    toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.CLICK_TO_START,
     pointerZoomFactor: parseInt(attr(image, 'pointer-zoom-factor') || attr(image, 'data-pointer-zoom-factor') || 2, 10),
     pinchZoomFactor: parseInt(attr(image, 'pinch-zoom-factor') || attr(image, 'data-pinch-zoom-factor') || 2, 10),
     maxScale: parseFloat(attr(image, 'max-scale') || attr(image, 'data-max-scale') || 100, 10),
@@ -40,8 +41,7 @@ var get360ViewProps = function get360ViewProps(image) {
     magnifyInFullscreen: isTrue(image, 'magnify-in-fullscreen') || isTrue(image, 'magnifier-in-fullscreen'),
     bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
     ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,
-    responsive: isTrue(image, 'responsive'),
-    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive') || 'demo',
+    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
     ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     lazyload: isTrue(image, 'lazyload'),
@@ -50,7 +50,9 @@ var get360ViewProps = function get360ViewProps(image) {
     controlReverse: isTrue(image, 'control-reverse'),
     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'
+    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
   };
 };
 

package/dist/static/css/style.css

@@ -49,7 +49,7 @@
   right: 0;
   width: 0%;
   height: 8px;
-  background-color: rgb(165,175,184);
+  background-color: rgb(165, 175, 184);
   z-index: 100;
 }
 
@@ -71,11 +71,11 @@
   width: 100px;
   height: 100px;
   margin: auto;
-  background-color: rgba(255,255,255,0.8);
+  background-color: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
-  box-shadow: rgb(255, 255, 255, 0.5) 0px 0px 4px;
+  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
   transition: 0.5s all;
-  color: rgb(80,80,80);
+  color: rgb(80, 80, 80);
   text-align: center;
   line-height: 100px;
   z-index: 2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.0",
+  "version": "2.7.2-beta.3",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -23,11 +23,11 @@
   ],
   "scripts": {
     "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
-    "clean-build": "del build",
+    "clean-build": "rm -rf build",
     "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
-    "clean-dist": "del dist",
+    "clean-dist": "rm -rf dist",
     "dist": "npm run clean-dist && babel src -d dist --copy-files",
-    "clean-demo": "del examples/dist",
+    "clean-demo": "rm -rf examples/dist",
     "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
     "deploy-demo": "gh-pages -d examples/dist",
     "publish-demo": "npm run build-demo && npm run deploy-demo"
@@ -36,6 +36,7 @@
     "core-js": "^3.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",