js-cloudimage-360-view - npm Package Compare versions

Comparing version 2.7.5 to 2.7.6

CHANGELOG.md

@@ -28,3 +28,8 @@ # Changelog
 -------------
-## 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
@@ -31,0 +36,0 @@ - update method to re-render or re-init the plugin

dist/ci360.service.js

@@ -642,9 +642,5 @@ "use strict";
   }, {
-    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);
 
@@ -660,20 +656,6 @@ if (this.fullscreenView) {
 
-      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';
     }
@@ -708,3 +690,3 @@ }, {
       var firstImage = this.imagesX[0];
-      this.updateContainerSize(firstImage);
+      this.updateContainerAndCanvasSize(firstImage);
       this.update();
@@ -732,6 +714,2 @@ this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       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';
 
@@ -1221,5 +1199,4 @@ if (this.fullscreenView) {
           logoSrc = _get360ViewProps.logoSrc,
-          containerWidth = _get360ViewProps.containerWidth,
-          containerHeight = _get360ViewProps.containerHeight,
-          pointerZoom = _get360ViewProps.pointerZoom;
+          pointerZoom = _get360ViewProps.pointerZoom,
+          ratio = _get360ViewProps.ratio;
 
@@ -1260,3 +1237,3 @@ var ciParams = {
       this.controlReverse = controlReverse;
-      this.dragSpeed = Math.max(magnifier, 50);
+      this.dragSpeed = Math.max(dragSpeed, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
@@ -1268,6 +1245,5 @@ this.stopAtEdges = stopAtEdges;
       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);
 
@@ -1357,3 +1333,3 @@ if (reload) {
         if (isFirstImageLoaded) {
-          _this6.updateContainerSize(image);
+          _this6.updateContainerAndCanvasSize(image);
 
@@ -1360,0 +1336,0 @@ _this6.onFirstImageLoaded(image);

dist/ci360.utils.js

@@ -49,4 +49,3 @@ "use strict";
     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
   };
@@ -53,0 +52,0 @@ };

dist/utils/index.js

@@ -7,2 +7,3 @@ "use strict";
 var _exportNames = {
+  isSrcPropsChanged: true,
   generateImagesPath: true,
@@ -12,16 +13,15 @@ preloadImages: 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,
@@ -31,4 +31,3 @@ createHotspots: true,
   isMouseOnHotspot: true,
-  hideHotspotsIcons: true,
-  isSrcPropsChanged: true
+  hideHotspotsIcons: true
 };
@@ -77,20 +76,14 @@ Object.defineProperty(exports, "addClass", {
 });
-Object.defineProperty(exports, "getContainerResponsiveHeight", {
+Object.defineProperty(exports, "getCurrentOriginalImage", {
   enumerable: true,
   get: function get() {
-    return _getContainerResponsiveHeight.getContainerResponsiveHeight;
+    return _getCurrentOriginalImage.getCurrentOriginalImage;
   }
 });
-Object.defineProperty(exports, "getContainerResponsiveWidth", {
+Object.defineProperty(exports, "getImageAspectRatio", {
   enumerable: true,
   get: function get() {
-    return _getContainerResponsiveWidth.getContainerResponsiveWidth;
+    return _getImageAspectRatio.getImageAspectRatio;
   }
 });
-Object.defineProperty(exports, "getCurrentOriginalImage", {
-  enumerable: true,
-  get: function get() {
-    return _getCurrentOriginalImage.getCurrentOriginalImage;
-  }
-});
 Object.defineProperty(exports, "getItemSkipped", {
@@ -181,2 +174,4 @@ enumerable: true,
 
+var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+
 var _generateImagesPath = require("./image-src/generate-images-path");
@@ -190,2 +185,4 @@
 
+var _getImageAspectRatio = require("./responsive/get-image-aspect-ratio");
+
 var _getCurrentOriginalImage = require("./magnify/get-current-original-image");
@@ -195,14 +192,12 @@
 
-var _getSpeedFactor = require("./auto-play/get-speed-factor");
+var _generateZoomInSteps = require("./zoom/generate-zoom-in-steps");
 
-var _isCompletedOneCycle = require("./auto-play/is-completed-one-cycle");
+var _generateZoomOutSteps = require("./zoom/generate-zoom-out-steps");
 
-var _getContainerResponsiveWidth = require("./responsive/get-container-responsive-width");
+var _loop = require("./auto-play/loop");
 
-var _getContainerResponsiveHeight = require("./responsive/get-container-responsive-height");
+var _getSpeedFactor = require("./auto-play/get-speed-factor");
 
-var _getMovingDirection = require("./spin-y/get-moving-direction");
+var _isCompletedOneCycle = require("./auto-play/is-completed-one-cycle");
 
-var _initControls = require("./controls/init-controls");
-
 var _addClass = require("./common/add-class");
@@ -212,4 +207,8 @@
 
+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");
@@ -229,8 +228,2 @@
 
-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");
@@ -244,4 +237,2 @@
 
-var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");
-
-var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");

package.json

 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "description": "",

README.md

@@ -1,2 +0,2 @@
-[![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)
@@ -9,12 +9,5 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 <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>
@@ -312,21 +305,45 @@
 
-### ~~data-ratio (or ratio)~~ [deprecated]
+### data-ratio (or ratio)
 
 
-###### ~~Type: **Number** (height / width) | Default: **none** | _optional_~~
+###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
+#### `ratio`: string
 
-~~Prevents page from jumping.~~
-### data-width (or width)
+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 width for the container.
-It will maintain the aspect ratio in respect to width
-### data-height (or 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.
 
-###### Type: **Number** | Default: **none** | _optional_
-
-Set a responsive height for the container.
-It will maintain the aspect ratio in respect to height
-
+```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)
@@ -333,0 +350,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

654

increased by2.67%

Worsened metrics

Total package byte prevSize

158289

decreased by-0.51%

Number of package files

88

decreased by-1.12%

Lines of code

3356

decreased by-0.89%

No dependency changes