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

package/dist/ci360.service.js

@@ -692,20 +692,60 @@ var CI360Viewer = function () {
       this.update();
     }
   }, {
-    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';
       }
     }
   }, {
@@ -717,7 +757,7 @@ var CI360Viewer = function () {
       var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
 
       if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
-        this.updateCanvasSize(event.target);
+        this.updateContainerSize(event.target);
       }
 
       if (totalLoadedImages === totalAmount) {
@@ -786,12 +826,12 @@ var CI360Viewer = function () {
   }, {
     key: 'requestResizedImages',
     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);
 
       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);
 
         this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
       }
@@ -823,6 +863,12 @@ var CI360Viewer = function () {
 
         ctx.drawImage(image, offsetX, offsetY, width, height);
       } 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) {
           this.updateImageScale(ctx);
         } else {
@@ -908,6 +954,8 @@ var CI360Viewer = function () {
     value: function onFirstImageLoaded(event) {
       var _this2 = this;
 
+      this.updateContainerSize(event.target);
+
       if (!this.hide360Logo) {
         this.add360ViewIcon();
       }
@@ -938,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;
@@ -948,7 +996,11 @@ var CI360Viewer = function () {
         }
 
         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';
         }
 
         _ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
@@ -969,10 +1021,6 @@ var CI360Viewer = function () {
         });
       }
 
-      if (this.ratio) {
-        this.container.style.minHeight = 'auto';
-      }
-
       if (this.fullscreenView) {
         this.addCloseFullscreenView();
       }
@@ -1344,15 +1392,15 @@ var CI360Viewer = function () {
     }
   }, {
     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,
           ciFilters = ciParams.ciFilters,
           ciTransformation = ciParams.ciTransformation;
 
       var src = '' + folder + filename;
 
-      if (!!responsive.length) {
+      if (ciToken) {
         var imageOffsetWidth = container.offsetWidth;
 
         var vesrion = _ci2.falsyValues.indexOf(apiVersion) !== -1 ? null : apiVersion;
@@ -1380,13 +1428,12 @@ var CI360Viewer = function () {
       var lazyload = arguments[3];
       var lazySelector = arguments[4];
       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];
 
       if (this.imageList) {
         try {
@@ -1395,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, apiVersion, filename, ciParams);
+            var resultSrc = _this5.getSrc(container, folder, apiVersion, filename, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
             var originalSrc = resultSrc.slice(lastIndex);
 
@@ -1595,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);
     }
   }, {
@@ -1609,7 +1651,7 @@ var CI360Viewer = function () {
 
       window.addEventListener('resize', (0, _ci.debounce)(function () {
         _this7.requestResizedImages();
-      }, 50));
+      }, 80));
 
       if (draggable && !this.disableDrag) {
         this.container.addEventListener('mousedown', this.mouseDown.bind(this));
@@ -1705,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,
@@ -1716,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 };
 
@@ -1764,21 +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, 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);
       }
 
       this.attachEvents(draggable, swipeable, keys);

package/dist/ci360.utils.js

@@ -41,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'),
@@ -51,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.2-beta.1",
+  "version": "2.7.2-beta.3",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -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",