chore: build v2.7.6

Author: Amr Wagdy

CHANGELOG.md

@@ -25,6 +25,11 @@ Types of changes:
 - ...
 
 -------------
+## 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

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)
@@ -308,25 +308,49 @@ Open 360 spin view in full screen modal.
 
 Magnifier to zoom image.
 
-### ~~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_
-
-Set a responsive width for the container.
-It will maintain the aspect ratio in respect to width
-### data-height (or height)
-
-###### 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_

build/js-cloudimage-360-view.min.js

@@ -158,7 +158,7 @@ <h2>Engage your customers with a stunning <strong>360 view of your products</str
        data-autoplay
        data-magnifier="3"
        data-box-shadow="inset 0 0 100px #222"
-       data-ratio="0.365"
+       data-ratio="1.7"
        data-responsive="scaleflex"
        data-spin-reverse
        data-pointer-zoom="3"
@@ -489,7 +489,7 @@ <h2 class="text-center">Ready to get started?</h2>
         <p>Include the following script into your project after all content in body tag</p>
         <figure class="highlight">
         <pre><code class="javascript">
-&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.5/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.6/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
 </code></pre>
         </figure>
       </div>

examples/src/index.html

@@ -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.json

@@ -27,8 +27,6 @@ import {
   createBoxShadow,
   getSpeedFactor,
   isCompletedOneCycle,
-  getContainerResponsiveWidth,
-  getContainerResponsiveHeight,
   getMovingDirection,
   applyStylesToContainer,
   initControls,
@@ -39,6 +37,7 @@ import {
   generateZoomInSteps,
   generateZoomOutSteps,
   isSrcPropsChanged,
+  getImageAspectRatio,
   } from './utils';
 
   class CI360Viewer {
@@ -648,12 +647,8 @@ import {
     loop(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
   }
 
-  updateContainerSize(image) {
-    const parentEl = this.container.parentNode || {};
-    const imageAspectRatio = image.width / image.height;
-    const isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
-    const containerWidth = getContainerResponsiveWidth(parentEl, this.containerWidth);
-    const containerHeight = getContainerResponsiveHeight(this.container, containerWidth, this.containerHeight);
+  updateContainerAndCanvasSize(image) {
+    const imageAspectRatio = getImageAspectRatio(image, this.ratio);
 
     if (this.fullscreenView) {
       this.container.width = window.innerWidth * this.devicePixelRatio;
@@ -665,26 +660,11 @@ import {
       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;
-    }
+    this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+    this.canvas.style.width = this.container.offsetWidth + 'px';
 
-    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.height = (this.container.offsetWidth / imageAspectRatio) * this.devicePixelRatio;
+    this.canvas.style.height = (this.container.offsetWidth / imageAspectRatio) + 'px';
   }
 
   onResizedImageLoad(orientation, image, index) {
@@ -715,7 +695,7 @@ import {
     const responsive = this.ciParams.ciToken;
     const firstImage = this.imagesX[0];
 
-    this.updateContainerSize(firstImage);
+    this.updateContainerAndCanvasSize(firstImage);
     this.update();
 
     this.speedFactor = getSpeedFactor(this.dragSpeed, this.amountX, this.container.offsetWidth);
@@ -752,12 +732,6 @@ import {
     const 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) {
       const { width, height, offsetX, offsetY } =
         contain(this.canvas.width, this.canvas.height, image.width, image.height);
@@ -1206,7 +1180,7 @@ import {
   init(container, update = false, reload = false) {
     let {
       folder, apiVersion,filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow,
-      autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, containerWidth, containerHeight, pointerZoom
+      autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, pointerZoom, ratio
     } = get360ViewProps(container);
 
     const ciParams = { ciToken, ciFilters, ciTransformation };
@@ -1240,17 +1214,16 @@ import {
     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);
@@ -1342,7 +1315,7 @@ import {
       if (this.lazyloadX || this.lazyloadY) return initLazyload(image, orientation);
 
       if (isFirstImageLoaded) {
-        this.updateContainerSize(image);
+        this.updateContainerAndCanvasSize(image);
         this.onFirstImageLoaded(image);
       }
 

src/ci360.service.js

@@ -48,8 +48,7 @@ const 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,
 });
 
 const isTrue = (image, type) => {

src/ci360.utils.js

@@ -1,25 +1,34 @@
+export { isSrcPropsChanged } from './image-src/is-src-props-changed';
+
 export { generateImagesPath } from './image-src/generate-images-path';
 export { preloadImages } from './load-images/preload-images';
 export { preloadOriginalImages } from './load-images/preload-original-images';
+
 export { contain } from './responsive/contain';
+export { getImageAspectRatio } from './responsive/get-image-aspect-ratio';
+
 export { getCurrentOriginalImage } from './magnify/get-current-original-image';
 export { magnify } from './magnify/magnify';
+
+export { generateZoomInSteps } from './zoom/generate-zoom-in-steps';
+export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps';
+
+export { loop } from './auto-play/loop';
 export { getSpeedFactor } from './auto-play/get-speed-factor';
 export { isCompletedOneCycle } from './auto-play/is-completed-one-cycle';
-export { getContainerResponsiveWidth } from './responsive/get-container-responsive-width';
-export { getContainerResponsiveHeight } from './responsive/get-container-responsive-height';
-export { getMovingDirection } from './spin-y/get-moving-direction';
-export { initControls } from './controls/init-controls';
+
 export { addClass } from './common/add-class';
 export { removeClass } from './common/remove-class';
+
+export { getMovingDirection } from './spin-y/get-moving-direction';
+
 export { getItemSkipped } from './controls/get-item-skipped';
+export { initControls } from './controls/init-controls';
+
 export * from './container-elements';
-export { loop } from './auto-play/loop';
-export { generateZoomInSteps } from './zoom/generate-zoom-in-steps';
-export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps';
+
 export { updateHotspots } from './hotspot/update-hotspots';
 export { createHotspots } from './hotspot/elements/create-hotspots';
 export { generateHotspotsConfigs } from './hotspot/generate-hotspots-configs';
 export { isMouseOnHotspot } from './hotspot/is-mouse-on-hotspot';
 export { hideHotspotsIcons } from './hotspot/hide-hotspots-icons';
-export { isSrcPropsChanged } from './image-src/is-src-props-changed';

src/utils/index.js

@@ -0,0 +1,26 @@
+export const getImageAspectRatio = (image, providedRatio) => {
+  try {
+    let imageAspectRatio = image.width / image.height;
+
+    if (typeof providedRatio === 'number') {
+      imageAspectRatio = providedRatio;
+    }
+
+    if (typeof providedRatio === 'object') {
+      const mediaQueries = Object.keys(providedRatio)
+        .sort((a, b) => a - b);
+
+      const activeMedia = mediaQueries.find((mediaQuery) => (
+        window.innerWidth <= parseInt(mediaQuery, 10)
+      ));
+
+      if (activeMedia) {
+        imageAspectRatio = providedRatio[activeMedia];
+      }
+    }
+
+    return imageAspectRatio;
+  } catch {
+    return 1;
+  }
+}