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

Comparing version 2.7.2-beta.1 to 2.7.2-beta.3

dist/ci360.service.js

@@ -695,16 +695,56 @@ 'use strict';
   }, {
-    key: 'updateCanvasSize',
-    value: function updateCanvasSize(image) {
+    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 wrapperEl = this.container.parentNode;
+      var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
+      var containerWidth = this.getContainerResponsiveWidth();
+      var containerHeight = this.getContainerResponsiveHeight(containerWidth);
 
-      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-      this.canvas.style.width = this.container.offsetWidth + 'px';
+      if (this.containerWidth && this.containerHeight) {
+        this.container.style.width = containerWidth + 'px';
+        this.container.style.height = containerHeight / imageAspectRatio + 'px';
 
-      if (wrapperEl.offsetHeight < image.height) {
-        this.canvas.height = wrapperEl.offsetHeight / this.devicePixelRatio;
-        this.canvas.style.height = wrapperEl.offsetHeight + '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.canvas.height = this.container.offsetWidth * this.devicePixelRatio / imageAspectRatio;
-        this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
+        this.container.style.maxWidth = containerWidth + 'px';
+        this.container.style.height = containerWidth / imageAspectRatio + 'px';
       }
@@ -721,3 +761,3 @@ }
       if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
-        this.updateCanvasSize(event.target);
+        this.updateContainerSize(event.target);
       }
@@ -791,3 +831,3 @@
     value: function requestResizedImages() {
-      var srcX = this.getSrc(this.responsive, this.container, this.folder, this.apiVersion, this.filenameX, this.ciParams);
+      var srcX = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameX, this.ciParams);
 
@@ -797,3 +837,3 @@ this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
       if (this.allowSpinY) {
-        var srcY = this.getSrc(this.responsive, this.container, this.folder, this.apiVersion, this.filenameY, this.ciParams);
+        var srcY = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameY, this.ciParams);
 
@@ -830,2 +870,8 @@ this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
       } else {
+        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.startPointerZoom || this.startPinchZoom) {
@@ -916,2 +962,4 @@ this.updateImageScale(ctx);
 
+      this.updateContainerSize(event.target);
+
       if (!this.hide360Logo) {
@@ -947,3 +995,3 @@ this.add360ViewIcon();
         if (this.container.offsetWidth === 0) {
-          var modalRef = this.container.parentElement;
+          var modalRef = this.container.parentNode || {};
 
@@ -958,3 +1006,7 @@ this.canvas.width = parseInt(modalRef.style.width) * this.devicePixelRatio;
         if (this.container.offsetWidth > 0) {
-          this.updateCanvasSize(event.target);
+          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';
         }
@@ -980,6 +1032,2 @@
 
-      if (this.ratio) {
-        this.container.style.minHeight = 'auto';
-      }
-
       if (this.fullscreenView) {
@@ -1356,4 +1404,4 @@ this.addCloseFullscreenView();
     key: 'getSrc',
-    value: function getSrc(responsive, container, folder, apiVersion, filename) {
-      var ciParams = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+    value: function getSrc(container, folder, apiVersion, filename) {
+      var ciParams = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
       var ciToken = ciParams.ciToken,
@@ -1365,3 +1413,3 @@ ciFilters = ciParams.ciFilters,
 
-      if (!!responsive.length) {
+      if (ciToken) {
         var imageOffsetWidth = container.offsetWidth;
@@ -1394,9 +1442,8 @@
       var container = arguments[5];
-      var responsive = arguments[6];
-      var ciParams = arguments[7];
+      var ciParams = arguments[6];
 
       var _this5 = this;
 
-      var apiVersion = arguments[8];
-      var filename = arguments[9];
+      var apiVersion = arguments[7];
+      var filename = arguments[8];
 
@@ -1410,3 +1457,3 @@ if (this.imageList) {
             var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
-            var resultSrc = _this5.getSrc(responsive, container, folder, apiVersion, filename, ciParams);
+            var resultSrc = _this5.getSrc(container, folder, apiVersion, filename, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
@@ -1611,7 +1658,2 @@ var originalSrc = resultSrc.slice(lastIndex);
 
-      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);
@@ -1626,3 +1668,3 @@ }
         _this7.requestResizedImages();
-      }, 50));
+      }, 80));
 
@@ -1723,3 +1765,2 @@ if (draggable && !this.disableDrag) {
           ratio = _get360ViewProps.ratio,
-          responsive = _get360ViewProps.responsive,
           ciToken = _get360ViewProps.ciToken,
@@ -1735,3 +1776,5 @@ ciFilters = _get360ViewProps.ciFilters,
           hide360Logo = _get360ViewProps.hide360Logo,
-          logoSrc = _get360ViewProps.logoSrc;
+          logoSrc = _get360ViewProps.logoSrc,
+          containerWidth = _get360ViewProps.containerWidth,
+          containerHeight = _get360ViewProps.containerHeight;
 
@@ -1784,5 +1827,6 @@ var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
       this.logoSrc = logoSrc;
-      this.responsive = responsive;
       this.ciParams = ciParams;
       this.apiVersion = apiVersion;
+      this.containerWidth = containerWidth;
+      this.containerHeight = containerHeight;
 
@@ -1793,9 +1837,9 @@ this.applyStylesToContainer();
 
-      var srcX = this.getSrc(responsive, container, folder, apiVersion, filenameX, ciParams);
-      var srcY = this.getSrc(responsive, container, folder, apiVersion, 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, apiVersion, filenameX);
+      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, apiVersion, filenameY);
+        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, ciParams, apiVersion, filenameY);
       }
@@ -1802,0 +1846,0 @@

dist/ci360.utils.js

@@ -44,4 +44,3 @@ 'use strict';
     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'),
@@ -55,3 +54,5 @@ ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     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
   };
@@ -58,0 +59,0 @@ };

package.json

 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.2-beta.1",
+  "version": "2.7.2-beta.3",
   "main": "dist/index.js",
@@ -39,2 +39,3 @@ "description": "",
   "devDependencies": {
+    "@babel/core": "^7.16.5",
     "babel-cli": "^6.26.0",
@@ -41,0 +42,0 @@ "babel-core": "^6.26.3",

No alert changes

Improved metrics

Total package byte prevSize

101717

increased by1.59%

Lines of code

1924

increased by1.85%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes