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

Comparing version 3.0.0-beta.0 to 3.0.0-beta.2

dist/ci360.constants.js

@@ -28,5 +28,10 @@ 'use strict';
 
+var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
+var AND_SYMBOL_REGEX = /\?&/g;
+
 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.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
+exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
+exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;

dist/ci360.service.js

@@ -38,2 +38,4 @@ 'use strict';
     this.imagesY = [];
+    this.resizedImagesX = [];
+    this.resizedImagesY = [];
     this.originalImagesX = [];
@@ -658,2 +660,86 @@ this.originalImagesY = [];
   }, {
+    key: 'onLoadResizedImages',
+    value: function onLoadResizedImages(orientation, event) {
+      this.incrementLoadedImages(orientation);
+
+      var totalAmount = this.amountX + this.amountY;
+      var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
+
+      if (totalLoadedImages === totalAmount) {
+        this.replaceImages(orientation);
+        this.update();
+      }
+    }
+  }, {
+    key: 'replaceImages',
+    value: function replaceImages(orientation) {
+      if (orientation === _ci2.ORIENTATIONS.Y) {
+        this.imagesY = this.resizedImagesY;
+      } else {
+        this.imagesX = this.resizedImagesX;
+      }
+    }
+  }, {
+    key: 'requestNewImages',
+    value: function requestNewImages(src, amount, orientation) {
+      var _this = this;
+
+      if (orientation === _ci2.ORIENTATIONS.Y) {
+        this.resizedImagesY = [];
+        this.loadedImagesY = 0;
+      } else {
+        this.resizedImagesX = [];
+        this.loadedImagesX = 0;
+      }
+
+      [].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
+        var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this.indexZeroBase);
+        var resultSrc = src.replace('{index}', nextZeroFilledIndex);
+
+        _this.addUpdatedSizeImage(resultSrc, orientation, _this.lazyload, _this.lazySelector, index);
+      });
+    }
+  }, {
+    key: 'addUpdatedSizeImage',
+    value: function addUpdatedSizeImage(resultSrc, orientation, lazyload, lazySelector, index) {
+      var image = new Image();
+
+      if (lazyload && !this.fullscreenView) {
+        image.setAttribute('data-src', resultSrc);
+        image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
+
+        if (index === 0) {
+          this.lazyloadInitImage = image;
+          image.style.position = 'absolute';
+          image.style.top = '0';
+          image.style.left = '0';
+          this.innerBox.appendChild(image);
+        }
+      } else {
+        image.src = resultSrc;
+      }
+
+      image.onload = this.onLoadResizedImages.bind(this, orientation);
+      image.onerror = this.onLoadResizedImages.bind(this, orientation);
+
+      if (orientation === _ci2.ORIENTATIONS.Y) {
+        this.resizedImagesY.push(image);
+      } else {
+        this.resizedImagesX.push(image);
+      }
+    }
+  }, {
+    key: 'requestResizedImages',
+    value: function requestResizedImages() {
+      var srcX = this.getSrc(this.responsive, this.container, this.folder, 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);
+
+        this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
+      }
+    }
+  }, {
     key: 'update',
@@ -773,3 +859,3 @@ value: function update() {
     value: function onFirstImageLoaded(event) {
-      var _this = this;
+      var _this2 = this;
 
@@ -829,3 +915,3 @@ if (!this.hide360Logo) {
           if (index === 0) {
-            _this.innerBox.removeChild(_this.lazyloadInitImage);
+            _this2.innerBox.removeChild(_this2.lazyloadInitImage);
             return;
@@ -980,11 +1066,9 @@ }
     value: function getOriginalSrc() {
-      var currentImage = this.imagesX[this.activeImageX - 1];
+      var currentImage = this.originalImagesX[this.activeImageX - 1];
 
       if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
-        currentImage = this.imagesY[this.activeImageY - 1];
+        currentImage = this.originalImagesY[this.activeImageY - 1];
       };
 
-      var lastIndex = currentImage.src.lastIndexOf('//');
-
-      return lastIndex > 10 ? currentImage.src.slice(lastIndex) : currentImage.src;
+      return currentImage.src;
     }
@@ -994,3 +1078,3 @@ }, {
     value: function magnify() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -1003,4 +1087,4 @@ var image = new Image();
       image.onload = function () {
-        if (_this2.glass) {
-          _this2.glass.style.cursor = 'none';
+        if (_this3.glass) {
+          _this3.glass.style.cursor = 'none';
         }
@@ -1194,3 +1278,3 @@ };
     value: function play() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -1201,8 +1285,8 @@ if (this.bottomCircle) this.hide360ViewCircleIcon();
       this.loopTimeoutId = window.setInterval(function () {
-        _this3.loop(_this3.reversed);
+        _this4.loop(_this4.reversed);
 
-        var isPlayedOnce = _this3.isCompletedCyle();
+        var isPlayedOnce = _this4.isCompletedCyle();
 
-        if (_this3.playOnce && isPlayedOnce) {
-          window.clearTimeout(_this3.loopTimeoutId);
+        if (_this4.playOnce && isPlayedOnce) {
+          window.clearTimeout(_this4.loopTimeoutId);
         }
@@ -1252,3 +1336,3 @@ }, this.autoplaySpeed);
 
-      var _this4 = this;
+      var _this5 = this;
 
@@ -1264,8 +1348,8 @@ var responsive = arguments[6];
           images.forEach(function (src, index) {
-            var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this4.folder;
-            var resultSrc = _this4.getSrc(responsive, container, folder, src, ciParams);
+            var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
+            var resultSrc = _this5.getSrc(responsive, container, folder, src, ciParams);
             var lastIndex = resultSrc.lastIndexOf('//');
             var originalSrc = resultSrc.slice(lastIndex);
 
-            _this4.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
+            _this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
           });
@@ -1277,8 +1361,7 @@ } catch (error) {
         [].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
-          var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this4.indexZeroBase);
+          var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this5.indexZeroBase);
           var resultSrc = src.replace('{index}', nextZeroFilledIndex);
-          var lastIndex = resultSrc.lastIndexOf('//');
-          var originalSrc = resultSrc.slice(lastIndex);
+          var originalSrc = resultSrc.replace(_ci2.ORGINAL_SIZE_REGEX, '').replace(_ci2.AND_SYMBOL_REGEX, '?');
 
-          _this4.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
+          _this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
         });
@@ -1341,3 +1424,3 @@ }
     value: function initControls() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -1356,11 +1439,11 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
         event.stopPropagation();
-        _this5.onSpin();
-        _this5.left();
-        _this5.loopTimeoutId = window.setInterval(_this5.left.bind(_this5), _this5.autoplaySpeed);
+        _this6.onSpin();
+        _this6.left();
+        _this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
       };
       var onRightStart = function onRightStart(event) {
         event.stopPropagation();
-        _this5.onSpin();
-        _this5.right();
-        _this5.loopTimeoutId = window.setInterval(_this5.right.bind(_this5), _this5.autoplaySpeed);
+        _this6.onSpin();
+        _this6.right();
+        _this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
       };
@@ -1370,5 +1453,5 @@
         event.stopPropagation();
-        _this5.onSpin();
-        _this5.top();
-        _this5.loopTimeoutId = window.setInterval(_this5.top.bind(_this5), _this5.autoplaySpeed);
+        _this6.onSpin();
+        _this6.top();
+        _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
       };
@@ -1378,25 +1461,25 @@
         event.stopPropagation();
-        _this5.onSpin();
-        _this5.bottom();
-        _this5.loopTimeoutId = window.setInterval(_this5.bottom.bind(_this5), _this5.autoplaySpeed);
+        _this6.onSpin();
+        _this6.bottom();
+        _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onLeftEnd = function onLeftEnd() {
-        _this5.onFinishSpin();
-        window.clearTimeout(_this5.loopTimeoutId);
+        _this6.onFinishSpin();
+        window.clearTimeout(_this6.loopTimeoutId);
       };
 
       var onRightEnd = function onRightEnd() {
-        _this5.onFinishSpin();
-        window.clearTimeout(_this5.loopTimeoutId);
+        _this6.onFinishSpin();
+        window.clearTimeout(_this6.loopTimeoutId);
       };
 
       var onTopEnd = function onTopEnd() {
-        _this5.onFinishSpin();
-        window.clearTimeout(_this5.loopTimeoutId);
+        _this6.onFinishSpin();
+        window.clearTimeout(_this6.loopTimeoutId);
       };
 
       var onBottomEnd = function onBottomEnd() {
-        _this5.onFinishSpin();
-        window.clearTimeout(_this5.loopTimeoutId);
+        _this6.onFinishSpin();
+        window.clearTimeout(_this6.loopTimeoutId);
       };
@@ -1482,2 +1565,8 @@
     value: function attachEvents(draggable, swipeable, keys) {
+      var _this7 = this;
+
+      window.addEventListener('resize', (0, _ci.debounce)(function () {
+        _this7.requestResizedImages();
+      }, 300));
+
       if (draggable && !this.disableDrag) {
@@ -1518,3 +1607,3 @@ this.container.addEventListener('mousedown', this.mouseDown.bind(this));
     value: function setMouseLeaveActions(actions) {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -1524,3 +1613,3 @@ var mouseLeaveActions = actions.split(',');
       mouseLeaveActions.forEach(function (action) {
-        return _this6.applyMouseLeaveAction(action);
+        return _this8.applyMouseLeaveAction(action);
       });
@@ -1598,2 +1687,3 @@ }
       this.filenameX = filenameX;
+      this.filenameY = filenameY;
       this.imageList = imageList;
@@ -1626,2 +1716,3 @@ this.indexZeroBase = indexZeroBase;
       this.lazyload = lazyload;
+      this.lazySelector = lazySelector;
       this.ratio = ratio;
@@ -1635,2 +1726,4 @@ this.spinReverse = spinReverse;
       this.logoSrc = logoSrc;
+      this.responsive = responsive;
+      this.ciParams = ciParams;
 
@@ -1637,0 +1730,0 @@ this.applyStylesToContainer();

dist/ci360.utils.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.normalizeZoomFactor = exports.getMaxZoomIntensity = exports.isTwoFingers = exports.pad = exports.removeClass = exports.addClass = exports.contain = exports.getSizeAccordingToPixelRatio = exports.getResponsiveWidthOfContainer = exports.magnify = exports.setView360Icon = exports.get360ViewProps = undefined;
+exports.debounce = exports.normalizeZoomFactor = exports.getMaxZoomIntensity = exports.isTwoFingers = exports.pad = exports.removeClass = exports.addClass = exports.contain = exports.getSizeAccordingToPixelRatio = exports.getResponsiveWidthOfContainer = exports.magnify = exports.setView360Icon = exports.get360ViewProps = undefined;
 
@@ -39,5 +39,5 @@ var _ci = require('./ci360.constants');
     disableDrag: isTrue(image, 'disable-drag'),
-    fullscreen: isTrue(image, 'fullscreen'),
+    fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
     magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
-    magnifyInFullscreen: isTrue(image, 'magnify-in-fullscreen'),
+    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),
@@ -241,2 +241,17 @@ ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,
 
+var debounce = function debounce(func, timeout) {
+  var timer = void 0;
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    clearTimeout(timer);
+
+    timer = setTimeout(function () {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+
 exports.get360ViewProps = get360ViewProps;
@@ -253,2 +268,3 @@ exports.setView360Icon = setView360Icon;
 exports.getMaxZoomIntensity = getMaxZoomIntensity;
-exports.normalizeZoomFactor = normalizeZoomFactor;
+exports.normalizeZoomFactor = normalizeZoomFactor;
+exports.debounce = debounce;

package.json

 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@ "description": "",
     "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
-    "clean-build": "rd /s /q build",
+    "clean-build": "rm -rf build",
     "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
-    "clean-dist": "rimraf dist",
+    "clean-dist": "del dist",
     "dist": "npm run clean-dist && babel src -d dist --copy-files",
-    "clean-demo": "rm -rf examples/dist",
+    "clean-demo": "del examples/dist",
     "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
@@ -52,5 +52,3 @@ "deploy-demo": "gh-pages -d examples/dist",
     "html-webpack-plugin": "^3.2.0",
-    "mkdirp": "^1.0.4",
     "mobile-detect": "^1.4.3",
-    "rimraf": "^3.0.2",
     "style-loader": "^0.23.1",
@@ -57,0 +55,0 @@ "webpack": "^4.29.6",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96700

increased by3.96%

Dev dependency count

17

decreased by-10.53%

Lines of code

1832

increased by5.59%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes