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

package/dist/ci360.constants.js

@@ -28,9 +28,12 @@ var AUTOPLAY_BEHAVIOR = {
 var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
 var AND_SYMBOL_REGEX = /\?&/g;
 
+var falsyValues = [false, 0, null, undefined, 'false', "0", 'null', 'undefined'];
+
 exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
 exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
 exports.ORIENTATIONS = ORIENTATIONS;
 exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
 exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
-exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
+exports.falsyValues = falsyValues;

package/dist/ci360.service.js

@@ -691,6 +691,23 @@ var CI360Viewer = function () {
       this.moveActiveYIndexDown(1);
       this.update();
     }
+  }, {
+    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',
     value: function onLoadResizedImages(orientation, event) {
@@ -699,6 +716,10 @@ var CI360Viewer = function () {
       var totalAmount = this.amountX + this.amountY;
       var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
 
+      if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
+        this.updateCanvasSize(event.target);
+      }
+
       if (totalLoadedImages === totalAmount) {
         this.replaceImages(orientation);
         this.update();
@@ -765,12 +786,12 @@ var CI360Viewer = function () {
   }, {
     key: 'requestResizedImages',
     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);
 
       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);
 
         this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
       }
@@ -802,11 +823,6 @@ 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.offsetWidth * this.devicePixelRatio / image.width * image.height;
-        this.canvas.style.height = this.container.offsetWidth / image.width * image.height + 'px';
-
         if (this.startPointerZoom || this.startPinchZoom) {
           this.updateImageScale(ctx);
         } else {
@@ -932,11 +948,7 @@ var CI360Viewer = function () {
         }
 
         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);
         }
 
         _ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
@@ -1332,16 +1344,20 @@ var CI360Viewer = function () {
     }
   }, {
     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) {
           var containerRatio = container.offsetHeight / container.offsetWidth;
 
@@ -1352,7 +1368,7 @@ var CI360Viewer = function () {
 
         var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)((0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
 
-        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 : '');
       }
 
       return src;
@@ -1364,11 +1380,13 @@ var CI360Viewer = function () {
       var lazyload = arguments[3];
       var lazySelector = arguments[4];
       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];
 
       if (this.imageList) {
         try {
@@ -1377,7 +1395,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, src, ciParams);
+            var resultSrc = _this5.getSrc(responsive, container, folder, apiVersion, filename, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
             var originalSrc = resultSrc.slice(lastIndex);
 
@@ -1591,7 +1609,7 @@ var CI360Viewer = function () {
 
       window.addEventListener('resize', (0, _ci.debounce)(function () {
         _this7.requestResizedImages();
-      }, 300));
+      }, 50));
 
       if (draggable && !this.disableDrag) {
         this.container.addEventListener('mousedown', this.mouseDown.bind(this));
@@ -1651,6 +1669,7 @@ var CI360Viewer = function () {
     value: function init(container) {
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
           folder = _get360ViewProps.folder,
+          apiVersion = _get360ViewProps.apiVersion,
           filenameX = _get360ViewProps.filenameX,
           filenameY = _get360ViewProps.filenameY,
           imageList = _get360ViewProps.imageList,
@@ -1706,6 +1725,7 @@ var CI360Viewer = function () {
       this.addLoader();
 
       this.folder = folder;
+      this.apiVersion = apiVersion;
       this.filenameX = filenameX;
       this.filenameY = filenameY;
       this.imageList = imageList;
@@ -1746,18 +1766,19 @@ var CI360Viewer = function () {
       this.logoSrc = logoSrc;
       this.responsive = responsive;
       this.ciParams = ciParams;
+      this.apiVersion = apiVersion;
 
       this.applyStylesToContainer();
 
       this.addCanvas();
 
-      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);
       }
 
       this.attachEvents(draggable, swipeable, keys);

package/dist/ci360.utils.js

@@ -11,6 +11,7 @@ var _ci = require('./ci360.constants');
 var get360ViewProps = function get360ViewProps(image) {
   return {
     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',
     filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
     imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,

package/package.json

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