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

Comparing version 2.7.10 to 2.7.11

CHANGELOG.md

@@ -28,4 +28,9 @@ # Changelog
 -------------
-## 2.8.10 - 2022-03-01
+## 2.7.11 - 2022-03-17
 ### Fixed
+- canvas aspect ratio
+- initialization of lazyloading
+
+## 2.7.10 - 2022-03-01
+### Fixed
 - image quality in fullscreen
@@ -32,0 +37,0 @@ - resized image loading

dist/ci360.service.js

@@ -74,2 +74,14 @@ "use strict";
   (0, _createClass2.default)(CI360Viewer, [{
+    key: "isReady",
+    value: function isReady() {
+      var loadedXImages = this.imagesX.filter(function (image) {
+        return image;
+      });
+      var loadedYImages = this.imagesY.filter(function (image) {
+        return image;
+      });
+      var totalAmount = this.amountX + this.amountY;
+      return loadedXImages.length + loadedYImages.length === totalAmount;
+    }
+  }, {
     key: "mouseDown",
@@ -719,8 +731,9 @@ value: function mouseDown(event) {
     value: function requestResizedImages() {
+      if (!this.isReady()) return;
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
       this.update();
+      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
-      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
       (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
@@ -804,2 +817,3 @@
       var ctx = this.canvas.getContext("2d");
+      ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
@@ -1282,4 +1296,2 @@
       this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
-      this.lazyloadX = lazyload;
-      this.lazyloadY = lazyload;
       this.lazySelector = lazySelector;
@@ -1350,3 +1362,2 @@ this.spinReverse = spinReverse;
         ciParams: ciParams,
-        lazyload: lazyload,
         lazySelector: lazySelector,
@@ -1364,23 +1375,3 @@ amount: this.amountX,
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
-      var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
 
-      var initLazyload = function initLazyload(image, orientation) {
-        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
-          lazyload: false
-        });
-
-        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
-          lazyload: false
-        });
-
-        if (orientation === _constants.ORIENTATIONS.Y) {
-          _this7.lazyloadY = false;
-          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
-        } else {
-          _this7.lazyloadX = false;
-          _this7.lazyloadInitImageX = image;
-          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
-        }
-      };
-
       var onImageLoad = function onImageLoad(orientation, image, index) {
@@ -1402,5 +1393,4 @@ if (orientation !== _constants.ORIENTATIONS.Y) {
         var totalAmount = _this7.amountX + _this7.amountY;
-        var totalLoadedImages = _this7.imagesX.length + _this7.imagesY.length;
-        var isFirstImageLoaded = index === 0 && orientation !== _constants.ORIENTATIONS.Y;
-        var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
+        var totalLoadedImages = loadedXImages.length + loadedYImages.length;
+        var isFirstImageLoaded = !index && orientation !== _constants.ORIENTATIONS.Y;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
@@ -1410,4 +1400,2 @@
 
-        if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
-
         if (isFirstImageLoaded) {
@@ -1417,15 +1405,26 @@ _this7.onFirstImageLoaded(image);
 
-        if (isAllImagesLoaded) {
+        if (_this7.isReady()) {
           _this7.onAllImagesLoaded();
+        }
+      };
 
-          if (lazyload) {
-            _this7.innerBox.removeChild(_this7.lazyloadInitImageX);
-          }
+      var loadImages = function loadImages() {
+        (0, _utils.preloadImages)(_this7.srcXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
+
+        if (_this7.allowSpinY) {
+          var srcY = (0, _utils.generateImagesPath)(_this7.srcYConfig);
+          (0, _utils.preloadImages)(_this7.srcYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
         }
       };
 
-      (0, _utils.preloadImages)(this.srcXConfig, srcX, onImageLoad.bind(this, _constants.ORIENTATIONS.X));
+      if (lazyload) {
+        var onFirstImageLoad = function onFirstImageLoad(image) {
+          _this7.innerBox.removeChild(image);
 
-      if (this.allowSpinY) {
-        (0, _utils.preloadImages)(this.srcYConfig, srcY, onImageLoad.bind(this, _constants.ORIENTATIONS.Y));
+          loadImages();
+        };
+
+        (0, _utils.initLazyload)(srcX, this.srcXConfig, onFirstImageLoad);
+      } else {
+        loadImages();
       }
@@ -1432,0 +1431,0 @@

dist/ci360.utils.js

@@ -49,3 +49,3 @@ "use strict";
     logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
-    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
     imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
@@ -52,0 +52,0 @@ };

dist/utils/index.js

@@ -11,2 +11,3 @@ "use strict";
   preloadOriginalImages: true,
+  initLazyload: true,
   contain: true,
@@ -116,2 +117,8 @@ getImageAspectRatio: true,
 });
+Object.defineProperty(exports, "initLazyload", {
+  enumerable: true,
+  get: function get() {
+    return _initLazyload.initLazyload;
+  }
+});
 Object.defineProperty(exports, "isCompletedOneCycle", {
@@ -180,2 +187,4 @@ enumerable: true,
 
+var _initLazyload = require("./load-images/lazyload/init-lazyload");
+
 var _contain = require("./responsive/contain");
@@ -182,0 +191,0 @@

dist/utils/load-images/images-from-folder/prepare-images-from-folder.js

@@ -16,3 +16,3 @@ "use strict";
 
-var prepareImagesFromFolder = function prepareImagesFromFolder(imagesSrc, srcConfig) {
+var prepareImagesFromFolder = function prepareImagesFromFolder(imagesSrc, srcConfig, loadOriginalImages) {
   var _ref = srcConfig || {},
@@ -22,17 +22,15 @@ amount = _ref.amount,
 
-  var resultSrc = [];
-  var originalSrc = [];
-  (0, _toConsumableArray2.default)(new Array(amount)).forEach(function (_item, index) {
+  return (0, _toConsumableArray2.default)(new Array(amount)).map(function (_item, index) {
     var nextZeroFilledIndex = (0, _pad.pad)(index + 1, indexZeroBase);
-    var imageResultSrc = imagesSrc.replace('{index}', nextZeroFilledIndex);
-    var imageOriginalSrc = imageResultSrc.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
-    resultSrc.push(imageResultSrc);
-    originalSrc.push(imageOriginalSrc);
+    var imageSrc = imagesSrc.replace('{index}', nextZeroFilledIndex);
+
+    if (loadOriginalImages) {
+      var imageOriginalSrc = imageSrc.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
+      return imageOriginalSrc;
+    }
+
+    return imageSrc;
   });
-  return {
-    resultSrc: resultSrc,
-    originalSrc: originalSrc
-  };
 };
 
 exports.prepareImagesFromFolder = prepareImagesFromFolder;

dist/utils/load-images/images-from-list/prepare-images-from-list.js

@@ -18,7 +18,5 @@ "use strict";
 
-var prepareImagesFromList = function prepareImagesFromList(images, srcConfig) {
+var prepareImagesFromList = function prepareImagesFromList(images, srcConfig, loadOriginalImages) {
   var folder = srcConfig.folder;
-  var resultSrc = [];
-  var originalSrc = [];
-  images.forEach(function (src) {
+  return images.map(function (src) {
     var nextSrcConfig = _objectSpread({}, srcConfig);
@@ -28,12 +26,12 @@
     nextSrcConfig.filename = src;
-    var lastIndex = resultSrc.lastIndexOf('//');
-    resultSrc.push((0, _generateImagesPath.generateImagesPath)(nextSrcConfig));
-    originalSrc.push(resultSrc.slice(lastIndex));
+
+    if (loadOriginalImages) {
+      var lastIndex = resultSrc.lastIndexOf('//');
+      return resultSrc.slice(lastIndex);
+    }
+
+    return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig);
   });
-  return {
-    resultSrc: resultSrc,
-    originalSrc: originalSrc
-  };
 };
 
 exports.prepareImagesFromList = prepareImagesFromList;

dist/utils/load-images/load-image-as-promise.js

@@ -14,16 +14,5 @@ "use strict";
 
-var _orientations = require("../../constants/orientations");
-
 var loadImageAsPromise = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index, srcConfig) {
-    var onImageLoadCallback,
-        _ref2,
-        lazyload,
-        lazySelector,
-        fullscreenView,
-        innerBox,
-        orientation,
-        image,
-        _args = arguments;
-
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index, cb) {
+    var image;
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -33,37 +22,23 @@ while (1) {
           case 0:
-            onImageLoadCallback = _args.length > 3 && _args[3] !== undefined ? _args[3] : function () {};
-            _ref2 = srcConfig || {}, lazyload = _ref2.lazyload, lazySelector = _ref2.lazySelector, fullscreenView = _ref2.fullscreenView, innerBox = _ref2.innerBox, orientation = _ref2.orientation;
             image = new Image();
-
-            if (lazyload && !fullscreenView) {
-              image.setAttribute('data-src', src);
-              image.className = image.className.length ? "".concat(image.className, " ").concat(lazySelector) : lazySelector;
-
-              if (index === 0 && orientation !== _orientations.ORIENTATIONS.Y) {
-                image.style.position = 'absolute';
-                image.style.top = '0';
-                image.style.left = '0';
-                innerBox.appendChild(image);
-              }
-
-              image.onload = function () {
-                return onImageLoadCallback(image, index);
-              };
-            } else {
-              image.src = src;
-            }
-
+            image.src = src;
             return _context.abrupt("return", new Promise(function (reslove) {
               image.onload = function () {
-                onImageLoadCallback(image, index);
                 reslove(image);
+
+                if (cb) {
+                  cb(image, index);
+                }
               };
 
               image.onerror = function () {
-                onImageLoadCallback(image, index);
                 reslove(image);
+
+                if (cb) {
+                  cb(image, index);
+                }
               };
             }));
 
-          case 5:
+          case 3:
           case "end":
@@ -70,0 +45,0 @@ return _context.stop();

dist/utils/load-images/load-images-relative-to-container-size.js

@@ -17,3 +17,3 @@ "use strict";
 var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, srcConfig, onImageLoadCallback) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, cb) {
     return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -31,3 +31,3 @@ while (1) {
                         _context.next = 2;
-                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, srcConfig, onImageLoadCallback);
+                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, cb);
 
@@ -42,3 +42,3 @@ case 2:
 
-              return function (_x4, _x5) {
+              return function (_x3, _x4) {
                 return _ref2.apply(this, arguments);
@@ -56,3 +56,3 @@ };
 
-  return function loadImagesRelativeToContainerSize(_x, _x2, _x3) {
+  return function loadImagesRelativeToContainerSize(_x, _x2) {
     return _ref.apply(this, arguments);
@@ -59,0 +59,0 @@ };

dist/utils/load-images/load-original-images.js

@@ -17,3 +17,3 @@ "use strict";
 var loadOriginalImages = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, onImageLoadCallback) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, cb) {
     return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -31,3 +31,3 @@ while (1) {
                         _context.next = 2;
-                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, null, onImageLoadCallback);
+                        return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, cb);
 
@@ -34,0 +34,0 @@ case 2:

dist/utils/load-images/preload-images.js

@@ -15,7 +15,7 @@ "use strict";
 /* eslint-disable no-console */
-var preloadImages = function preloadImages(srcConfig, imagesSrc, onImageLoadCallback) {
+var preloadImages = function preloadImages(srcConfig, imagesSrc, cb) {
   var _ref = srcConfig || {},
       imageList = _ref.imageList;
 
-  var imagesSets = {};
+  var imagesSrcs = [];
 
@@ -25,3 +25,3 @@ if (imageList) {
       var images = JSON.parse(imageList);
-      imagesSets = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig);
+      imagesSrcs = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig);
     } catch (error) {
@@ -31,11 +31,8 @@ console.error("Wrong format in image-list attribute: ".concat(error.message));
   } else {
-    imagesSets = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig);
+    imagesSrcs = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig);
   }
 
-  var _ref2 = imagesSets || {},
-      resultSrc = _ref2.resultSrc;
-
-  (0, _loadImagesRelativeToContainerSize.loadImagesRelativeToContainerSize)(resultSrc, srcConfig, onImageLoadCallback);
+  (0, _loadImagesRelativeToContainerSize.loadImagesRelativeToContainerSize)(imagesSrcs, cb);
 };
 
 exports.preloadImages = preloadImages;

dist/utils/load-images/preload-original-images.js

@@ -15,7 +15,7 @@ "use strict";
 /* eslint-disable no-console */
-var preloadOriginalImages = function preloadOriginalImages(srcConfig, imagesSrc, onImageLoadCallback) {
+var preloadOriginalImages = function preloadOriginalImages(srcConfig, imagesSrc, cb) {
   var _ref = srcConfig || {},
       imageList = _ref.imageList;
 
-  var imagesSets = {};
+  var imagesSrcs = [];
 
@@ -25,3 +25,3 @@ if (imageList) {
       var images = JSON.parse(imageList);
-      imagesSets = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig);
+      imagesSrcs = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig, true);
     } catch (error) {
@@ -31,11 +31,8 @@ console.error("Wrong format in image-list attribute: ".concat(error.message));
   } else {
-    imagesSets = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig);
+    imagesSrcs = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig, true);
   }
 
-  var _ref2 = imagesSets || {},
-      originalSrc = _ref2.originalSrc;
-
-  (0, _loadOriginalImages.loadOriginalImages)(originalSrc, onImageLoadCallback);
+  (0, _loadOriginalImages.loadOriginalImages)(imagesSrcs, cb);
 };
 
 exports.preloadOriginalImages = preloadOriginalImages;

dist/utils/responsive/get-image-aspect-ratio.js

@@ -20,3 +20,3 @@ "use strict";
 
-    if ((0, _typeof2.default)(providedRatio) === 'object') {
+    if (providedRatio && (0, _typeof2.default)(providedRatio) === 'object') {
       var mediaQueries = Object.keys(providedRatio).sort(function (a, b) {
@@ -23,0 +23,0 @@ return a - b;

package.json

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

README.md

@@ -1,2 +0,2 @@
-[![Release](https://img.shields.io/badge/release-v2.7.10-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.11-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
@@ -3,0 +3,0 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174509

increased by0.82%

Number of package files

92

increased by2.22%

Lines of code

3807

increased by0.74%

No dependency changes