js-cloudimage-360-view 2.7.5 → 2.7.6

package/CHANGELOG.md

@@ -25,7 +25,12 @@ Types of changes:
 - ...
 
 -------------
-## 2.7.5 - 2022-01-08
+## 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

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.5-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.6-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,16 +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/#gh-light-mode-only">
-		<img
-			alt="The Lounge"
-			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
-	</a>
-		<a href="https://www.cloudimage.io/#gh-dark-mode-only">
-		<img
-			alt="The Lounge"
-			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
-	</a>
+	<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">
@@ -308,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

@@ -639,13 +639,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;
@@ -656,24 +652,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",
@@ -703,7 +685,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function requestResizedImages() {
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
-      this.updateContainerSize(firstImage);
+      this.updateContainerAndCanvasSize(firstImage);
       this.update();
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
@@ -726,10 +708,6 @@ 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';
 
       if (this.fullscreenView) {
         var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
@@ -1214,9 +1192,8 @@ 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;
 
       var ciParams = {
         ciToken: ciToken,
@@ -1252,17 +1229,16 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.lazySelector = lazySelector;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
-      this.dragSpeed = Math.max(magnifier, 50);
+      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.ratio = ratio && JSON.parse(ratio);
 
       if (reload) {
         new CI360Viewer(this.container);
@@ -1347,7 +1323,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

@@ -46,8 +46,7 @@ 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
   };
 };
 

package/dist/utils/index.js

@@ -4,30 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  isSrcPropsChanged: true,
   generateImagesPath: true,
   preloadImages: true,
   preloadOriginalImages: true,
   contain: true,
+  getImageAspectRatio: true,
   getCurrentOriginalImage: true,
   magnify: true,
+  generateZoomInSteps: true,
+  generateZoomOutSteps: true,
+  loop: true,
   getSpeedFactor: true,
   isCompletedOneCycle: true,
-  getContainerResponsiveWidth: true,
-  getContainerResponsiveHeight: true,
-  getMovingDirection: true,
-  initControls: true,
   addClass: true,
   removeClass: true,
+  getMovingDirection: true,
   getItemSkipped: true,
-  loop: true,
-  generateZoomInSteps: true,
-  generateZoomOutSteps: true,
+  initControls: true,
   updateHotspots: true,
   createHotspots: true,
   generateHotspotsConfigs: true,
   isMouseOnHotspot: true,
-  hideHotspotsIcons: true,
-  isSrcPropsChanged: true
+  hideHotspotsIcons: true
 };
 Object.defineProperty(exports, "addClass", {
   enumerable: true,
@@ -71,22 +70,16 @@ Object.defineProperty(exports, "generateZoomOutSteps", {
     return _generateZoomOutSteps.generateZoomOutSteps;
   }
 });
-Object.defineProperty(exports, "getContainerResponsiveHeight", {
-  enumerable: true,
-  get: function get() {
-    return _getContainerResponsiveHeight.getContainerResponsiveHeight;
-  }
-});
-Object.defineProperty(exports, "getContainerResponsiveWidth", {
+Object.defineProperty(exports, "getCurrentOriginalImage", {
   enumerable: true,
   get: function get() {
-    return _getContainerResponsiveWidth.getContainerResponsiveWidth;
+    return _getCurrentOriginalImage.getCurrentOriginalImage;
   }
 });
-Object.defineProperty(exports, "getCurrentOriginalImage", {
+Object.defineProperty(exports, "getImageAspectRatio", {
   enumerable: true,
   get: function get() {
-    return _getCurrentOriginalImage.getCurrentOriginalImage;
+    return _getImageAspectRatio.getImageAspectRatio;
   }
 });
 Object.defineProperty(exports, "getItemSkipped", {
@@ -174,6 +167,8 @@ Object.defineProperty(exports, "updateHotspots", {
   }
 });
 
+var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+
 var _generateImagesPath = require("./image-src/generate-images-path");
 
 var _preloadImages = require("./load-images/preload-images");
@@ -182,28 +177,32 @@ var _preloadOriginalImages = require("./load-images/preload-original-images");
 
 var _contain = require("./responsive/contain");
 
+var _getImageAspectRatio = require("./responsive/get-image-aspect-ratio");
+
 var _getCurrentOriginalImage = require("./magnify/get-current-original-image");
 
 var _magnify = require("./magnify/magnify");
 
-var _getSpeedFactor = require("./auto-play/get-speed-factor");
-
-var _isCompletedOneCycle = require("./auto-play/is-completed-one-cycle");
+var _generateZoomInSteps = require("./zoom/generate-zoom-in-steps");
 
-var _getContainerResponsiveWidth = require("./responsive/get-container-responsive-width");
+var _generateZoomOutSteps = require("./zoom/generate-zoom-out-steps");
 
-var _getContainerResponsiveHeight = require("./responsive/get-container-responsive-height");
+var _loop = require("./auto-play/loop");
 
-var _getMovingDirection = require("./spin-y/get-moving-direction");
+var _getSpeedFactor = require("./auto-play/get-speed-factor");
 
-var _initControls = require("./controls/init-controls");
+var _isCompletedOneCycle = require("./auto-play/is-completed-one-cycle");
 
 var _addClass = require("./common/add-class");
 
 var _removeClass = require("./common/remove-class");
 
+var _getMovingDirection = require("./spin-y/get-moving-direction");
+
 var _getItemSkipped = require("./controls/get-item-skipped");
 
+var _initControls = require("./controls/init-controls");
+
 var _containerElements = require("./container-elements");
 
 Object.keys(_containerElements).forEach(function (key) {
@@ -218,12 +217,6 @@ Object.keys(_containerElements).forEach(function (key) {
   });
 });
 
-var _loop = require("./auto-play/loop");
-
-var _generateZoomInSteps = require("./zoom/generate-zoom-in-steps");
-
-var _generateZoomOutSteps = require("./zoom/generate-zoom-out-steps");
-
 var _updateHotspots = require("./hotspot/update-hotspots");
 
 var _createHotspots = require("./hotspot/elements/create-hotspots");
@@ -232,6 +225,4 @@ var _generateHotspotsConfigs = require("./hotspot/generate-hotspots-configs");
 
 var _isMouseOnHotspot = require("./hotspot/is-mouse-on-hotspot");
 
-var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");
-
-var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");

package/dist/utils/responsive/get-image-aspect-ratio.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getImageAspectRatio = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var getImageAspectRatio = function getImageAspectRatio(image, providedRatio) {
+  try {
+    var imageAspectRatio = image.width / image.height;
+
+    if (typeof providedRatio === 'number') {
+      imageAspectRatio = providedRatio;
+    }
+
+    if ((0, _typeof2.default)(providedRatio) === 'object') {
+      var mediaQueries = Object.keys(providedRatio).sort(function (a, b) {
+        return a - b;
+      });
+      var activeMedia = mediaQueries.find(function (mediaQuery) {
+        return window.innerWidth <= parseInt(mediaQuery, 10);
+      });
+
+      if (activeMedia) {
+        imageAspectRatio = providedRatio[activeMedia];
+      }
+    }
+
+    return imageAspectRatio;
+  } catch (_unused) {
+    return 1;
+  }
+};
+
+exports.getImageAspectRatio = getImageAspectRatio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",

package/dist/utils/responsive/get-container-responsive-height.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getContainerResponsiveHeight = void 0;
-
-var getContainerResponsiveHeight = function getContainerResponsiveHeight(container, width, containerHeight) {
-  if (containerHeight) {
-    if (width < containerHeight) {
-      return width;
-    }
-
-    return containerHeight;
-  }
-
-  return container.offsetWidth;
-};
-
-exports.getContainerResponsiveHeight = getContainerResponsiveHeight;

package/dist/utils/responsive/get-container-responsive-width.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getContainerResponsiveWidth = void 0;
-
-var getContainerResponsiveWidth = function getContainerResponsiveWidth(parentEl, containerWidth) {
-  if (containerWidth) {
-    if (parentEl.offsetWidth < containerWidth) {
-      return parentEl.offsetWidth;
-    }
-
-    return containerWidth;
-  }
-
-  return parentEl.offsetWidth;
-};
-
-exports.getContainerResponsiveWidth = getContainerResponsiveWidth;