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

Comparing version 2.7.8 to 2.7.9

CHANGELOG.md

@@ -28,2 +28,6 @@ # Changelog
 -------------
+## 2.7.9 - 2022-02-27
+### Fixed
+- typo in documentation
+
 ## 2.7.8 - 2022-02-27
@@ -30,0 +34,0 @@ ### Added

dist/ci360.service.js

@@ -798,9 +798,5 @@ "use strict";
       var ctx = this.canvas.getContext("2d");
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
-        this.canvas.width = window.innerWidth * this.devicePixelRatio;
-        this.canvas.style.width = window.innerWidth + 'px';
-        this.canvas.height = window.innerHeight * this.devicePixelRatio;
-        this.canvas.style.height = window.innerHeight + 'px';
-
         var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
@@ -819,6 +815,2 @@ offsetX = _contain2.offsetX,
       } 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';
         ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
@@ -961,8 +953,23 @@ }
   }, {
-    key: "updatePlugin",
-    value: function updatePlugin(forceUpdate) {
+    key: "updateView",
+    value: function updateView(forceUpdate, viewers) {
+      var _this5 = this;
+
       var container = this.container;
       var imageProps = (0, _ci.get360ViewProps)(container);
-      var srcPropsChanged = (0, _utils.isSrcPropsChanged)(this, imageProps);
-      var reloadPlugin = srcPropsChanged || forceUpdate;
+      var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
+      var reInitView = srcPropsChanged || forceUpdate;
+
+      if (reInitView) {
+        var oldElement = this.container;
+        var viewIndex = viewers.findIndex(function (view) {
+          return view.id === _this5.container.id;
+        });
+        container = container.cloneNode(true);
+        container.className = container.className.replace(' initialized', '');
+        container.innerHTML = '';
+        oldElement.parentNode.replaceChild(container, oldElement);
+        return viewers.splice(viewIndex, 1, new CI360Viewer(container));
+      }
+
       container.style.position = 'relative';
@@ -972,5 +979,4 @@ container.style.width = '100%';
       container.setAttribute('draggable', 'false');
-      if (reloadPlugin) container.innerHTML = '';
       this.stop();
-      this.init(container, !reloadPlugin, reloadPlugin);
+      this.init(container, true);
     }
@@ -1098,3 +1104,3 @@ }, {
     value: function initControls() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -1104,7 +1110,7 @@ var onLeftStart = function onLeftStart(event) {
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.left();
+        _this6.left();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.left.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
       };
@@ -1115,7 +1121,7 @@
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.right();
+        _this6.right();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.right.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
       };
@@ -1126,7 +1132,7 @@
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.top();
+        _this6.top();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.top.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
       };
@@ -1137,13 +1143,13 @@
 
-        _this5.onSpin();
+        _this6.onSpin();
 
-        _this5.bottom();
+        _this6.bottom();
 
-        _this5.loopTimeoutId = window.setInterval(_this5.bottom.bind(_this5), _this5.autoplaySpeed);
+        _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onEventEnd = function onEventEnd() {
-        _this5.onFinishSpin();
+        _this6.onFinishSpin();
 
-        window.clearTimeout(_this5.loopTimeoutId);
+        window.clearTimeout(_this6.loopTimeoutId);
       };
@@ -1201,6 +1207,5 @@
     value: function init(container) {
-      var _this6 = this;
+      var _this7 = this;
 
       var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var reload = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
@@ -1295,9 +1300,5 @@ var _get360ViewProps = (0, _ci.get360ViewProps)(container),
       this.info = imageInfo;
+      this.keys = keys;
       this.ratio = ratio && JSON.parse(ratio);
 
-      if (reload) {
-        new CI360Viewer(this.container);
-        return;
-      }
-
       if (update) {
@@ -1335,4 +1336,3 @@ (0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
 
-        this.onAllImagesLoaded();
-        return;
+        return this.onAllImagesLoaded();
       }
@@ -1374,7 +1374,7 @@
       var initLazyload = function initLazyload(image, orientation) {
-        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this6.srcXConfig), {}, {
+        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
           lazyload: false
         });
 
-        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this6.srcYConfig), {}, {
+        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
           lazyload: false
@@ -1384,8 +1384,8 @@ });
         if (orientation === _constants.ORIENTATIONS.Y) {
-          _this6.lazyloadY = false;
-          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _constants.ORIENTATIONS.X));
+          _this7.lazyloadY = false;
+          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
         } else {
-          _this6.lazyloadX = false;
-          _this6.lazyloadInitImageX = image;
-          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _constants.ORIENTATIONS.Y));
+          _this7.lazyloadX = false;
+          _this7.lazyloadInitImageX = image;
+          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
         }
@@ -1396,36 +1396,34 @@ };
         if (orientation !== _constants.ORIENTATIONS.Y) {
-          _this6.imagesX[index] = image;
+          _this7.imagesX[index] = image;
         } else {
-          _this6.imagesY[index] = image;
+          _this7.imagesY[index] = image;
         }
 
-        var loadedXImages = _this6.imagesX.filter(function (image) {
+        var loadedXImages = _this7.imagesX.filter(function (image) {
           return !!image;
         });
 
-        var loadedYImages = _this6.imagesY.filter(function (image) {
+        var loadedYImages = _this7.imagesY.filter(function (image) {
           return !!image;
         });
 
-        var totalAmount = _this6.amountX + _this6.amountY;
-        var totalLoadedImages = _this6.imagesX.length + _this6.imagesY.length;
+        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 === _this6.amountX + _this6.amountY;
+        var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
 
-        _this6.updatePercentageInLoader(percentage);
+        _this7.updatePercentageInLoader(percentage);
 
-        if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
+        if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
 
         if (isFirstImageLoaded) {
-          _this6.updateContainerAndCanvasSize(image);
-
-          _this6.onFirstImageLoaded(image);
+          _this7.onFirstImageLoaded(image);
         }
 
         if (isAllImagesLoaded) {
-          _this6.onAllImagesLoaded();
+          _this7.onAllImagesLoaded();
 
           if (lazyload) {
-            _this6.innerBox.removeChild(_this6.lazyloadInitImageX);
+            _this7.innerBox.removeChild(_this7.lazyloadInitImageX);
           }
@@ -1432,0 +1430,0 @@ }

dist/index.js

@@ -15,2 +15,14 @@ "use strict";
 
+function setContainerId(container) {
+  var containerId = container.id;
+
+  if (!containerId) {
+    var uniqueId = Math.floor(Math.random() * 10000);
+    var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
+    container.id = generatedContainerId;
+  }
+
+  return container;
+}
+
 function init() {
@@ -21,5 +33,6 @@ var viewers = [];
   [].slice.call(view360Array).forEach(function (container) {
-    var hotspotInstanceName = (0, _ci2.attr)(container, 'hotspot-instance') || (0, _ci2.attr)(container, 'data-hotspot-instance');
-    var hotspotConfig = hotspotsConfigs[hotspotInstanceName] ? hotspotsConfigs[hotspotInstanceName] : null;
-    viewers.push(new _ci.default(container, false, hotspotConfig));
+    var containerWithId = setContainerId(container);
+    var hotspotInstanceName = (0, _ci2.attr)(containerWithId, 'hotspot-instance') || (0, _ci2.attr)(containerWithId, 'data-hotspot-instance');
+    var hotspotConfig = hotspotsConfigs === null || hotspotsConfigs === void 0 ? void 0 : hotspotsConfigs[hotspotInstanceName];
+    viewers.push(new _ci.default(containerWithId, false, hotspotConfig));
   });
@@ -53,2 +66,13 @@ window.CI360._viewers = viewers;
 
+function addView(id) {
+  var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
+
+  if (view360Array.length && id) {
+    var newViewContainer = view360Array.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+    newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
+  }
+}
+
 function update() {
@@ -64,11 +88,11 @@ var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
-      return view.updatePlugin(forceUpdate);
+      view.updateView(forceUpdate, window.CI360._viewers);
     } catch (_unused) {
-      console.error("Cloudimage-360: there is no view with such id '".concat(id, "'"));
+      console.warn("Cloudimage-360: there is no view with such id '".concat(id, "', you may need to run window.addView('").concat(id, "') before run update'"));
     }
+  } else {
+    window.CI360._viewers.forEach(function (viewer) {
+      viewer.updateView(forceUpdate, window.CI360._viewers);
+    });
   }
-
-  return window.CI360._viewers.forEach(function (viewer) {
-    viewer.updatePlugin(forceUpdate);
-  });
 }
@@ -85,2 +109,3 @@
 window.CI360.update = update;
+window.CI360.addView = addView;
 
@@ -87,0 +112,0 @@ if (!window.CI360.notInitOnLoad) {

dist/utils/index.js

@@ -7,3 +7,3 @@ "use strict";
 var _exportNames = {
-  isSrcPropsChanged: true,
+  isPropsChangeRequireReload: true,
   generateImagesPath: true,
@@ -128,6 +128,6 @@ preloadImages: true,
 });
-Object.defineProperty(exports, "isSrcPropsChanged", {
+Object.defineProperty(exports, "isPropsChangeRequireReload", {
   enumerable: true,
   get: function get() {
-    return _isSrcPropsChanged.isSrcPropsChanged;
+    return _isPropsChangeRequireReload.isPropsChangeRequireReload;
   }
@@ -172,3 +172,3 @@ });
 
-var _isSrcPropsChanged = require("./image-src/is-src-props-changed");
+var _isPropsChangeRequireReload = require("./image-src/is-props-change-require-reload");
 
@@ -175,0 +175,0 @@ var _generateImagesPath = require("./image-src/generate-images-path");

package.json

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

README.md

@@ -1,2 +0,2 @@
-[![Release](https://img.shields.io/badge/release-v2.7.8-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.9-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

170481

increased by0.61%

Lines of code

3691

increased by0.87%

No dependency changes