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

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

dist/ci360.constants.js

@@ -31,2 +31,4 @@ 'use strict';
 
+var falsyValues = [false, 0, null, undefined, 'false', "0", 'null', 'undefined'];
+
 exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
@@ -37,2 +39,3 @@ exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
 exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
-exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.falsyValues = falsyValues;

dist/ci360.service.js

@@ -695,2 +695,19 @@ 'use strict';
   }, {
+    key: 'updateCanvasSize',
+    value: function updateCanvasSize(image) {
+      var imageAspectRatio = image.width / image.height;
+      var wrapperEl = this.container.parentNode;
+
+      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+      this.canvas.style.width = this.container.offsetWidth + 'px';
+
+      if (wrapperEl.offsetHeight < image.height) {
+        this.canvas.height = wrapperEl.offsetHeight / this.devicePixelRatio;
+        this.canvas.style.height = wrapperEl.offsetHeight + 'px';
+      } else {
+        this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / imageAspectRatio;
+        this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
+      }
+    }
+  }, {
     key: 'onLoadResizedImages',
@@ -703,2 +720,6 @@ value: function onLoadResizedImages(orientation, event) {
 
+      if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
+        this.updateCanvasSize(event.target);
+      }
+
       if (totalLoadedImages === totalAmount) {
@@ -770,3 +791,3 @@ this.replaceImages(orientation);
     value: function requestResizedImages() {
-      var srcX = this.getSrc(this.responsive, this.container, this.folder, this.filenameX, this.ciParams);
+      var srcX = this.getSrc(this.responsive, this.container, this.folder, this.apiVersion, this.filenameX, this.ciParams);
 
@@ -776,3 +797,3 @@ this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
       if (this.allowSpinY) {
-        var srcY = this.getSrc(this.responsive, this.container, this.folder, this.filenameY, this.ciParams);
+        var srcY = this.getSrc(this.responsive, this.container, this.folder, this.apiVersion, this.filenameY, this.ciParams);
 
@@ -809,7 +830,2 @@ 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.offsetWidth * this.devicePixelRatio / image.width * image.height;
-        this.canvas.style.height = this.container.offsetWidth / image.width * image.height + 'px';
-
         if (this.startPointerZoom || this.startPinchZoom) {
@@ -940,7 +956,3 @@ this.updateImageScale(ctx);
         if (this.container.offsetWidth > 0) {
-          this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-          this.canvas.style.width = this.container.offsetWidth + 'px';
-
-          this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / event.target.width * event.target.height;
-          this.canvas.style.height = this.container.offsetWidth / event.target.width * event.target.height + 'px';
+          this.updateCanvasSize(event.target);
         }
@@ -1341,12 +1353,16 @@
     key: 'getSrc',
-    value: function getSrc(responsive, container, folder, filename, _ref) {
-      var ciToken = _ref.ciToken,
-          ciFilters = _ref.ciFilters,
-          ciTransformation = _ref.ciTransformation;
+    value: function getSrc(responsive, container, folder, apiVersion, filename) {
+      var ciParams = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+      var ciToken = ciParams.ciToken,
+          ciFilters = ciParams.ciFilters,
+          ciTransformation = ciParams.ciTransformation;
 
       var src = '' + folder + filename;
 
-      if (responsive) {
+      if (!!responsive.length) {
         var imageOffsetWidth = container.offsetWidth;
 
+        var vesrion = _ci2.falsyValues.indexOf(apiVersion) !== -1 ? null : apiVersion;
+        var finalApiVersion = vesrion ? vesrion + '/' : '';
+
         if (this.fullscreenView) {
@@ -1362,3 +1378,3 @@ var containerRatio = container.offsetHeight / container.offsetWidth;
 
-        src = 'https://' + ciToken + '.cloudimg.io/v7/' + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
+        src = 'https://' + ciToken + '.cloudimg.io/' + finalApiVersion + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
       }
@@ -1375,7 +1391,9 @@
       var container = arguments[5];
+      var responsive = arguments[6];
+      var ciParams = arguments[7];
 
       var _this5 = this;
 
-      var responsive = arguments[6];
-      var ciParams = arguments[7];
+      var apiVersion = arguments[8];
+      var filename = arguments[9];
 
@@ -1389,3 +1407,3 @@ if (this.imageList) {
             var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
-            var resultSrc = _this5.getSrc(responsive, container, folder, src, ciParams);
+            var resultSrc = _this5.getSrc(responsive, container, folder, apiVersion, filename, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
@@ -1604,3 +1622,3 @@ var originalSrc = resultSrc.slice(lastIndex);
         _this7.requestResizedImages();
-      }, 300));
+      }, 50));
 
@@ -1665,2 +1683,3 @@ if (draggable && !this.disableDrag) {
           folder = _get360ViewProps.folder,
+          apiVersion = _get360ViewProps.apiVersion,
           filenameX = _get360ViewProps.filenameX,
@@ -1721,2 +1740,3 @@ filenameY = _get360ViewProps.filenameY,
       this.folder = folder;
+      this.apiVersion = apiVersion;
       this.filenameX = filenameX;
@@ -1762,2 +1782,3 @@ this.filenameY = filenameY;
       this.ciParams = ciParams;
+      this.apiVersion = apiVersion;
 
@@ -1768,9 +1789,9 @@ this.applyStylesToContainer();
 
-      var srcX = this.getSrc(responsive, container, folder, filenameX, ciParams);
-      var srcY = this.getSrc(responsive, container, folder, filenameY, ciParams);
+      var srcX = this.getSrc(responsive, container, folder, apiVersion, filenameX, ciParams);
+      var srcY = this.getSrc(responsive, container, folder, apiVersion, filenameY, ciParams);
 
-      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams);
+      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams, apiVersion, filenameX);
 
       if (amountY) {
-        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams);
+        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams, apiVersion, filenameY);
       }
@@ -1777,0 +1798,0 @@

dist/ci360.utils.js

@@ -14,2 +14,3 @@ 'use strict';
     folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
+    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
     filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
@@ -16,0 +17,0 @@ filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

100123

increased by1.05%

Lines of code

1889

increased by1.18%

No dependency changes