js-cloudimage-360-view 2.7.9 → 2.7.10

package/CHANGELOG.md

@@ -25,6 +25,11 @@ Types of changes:
 - ...
 
 -------------
+## 2.8.10 - 2022-03-01
+### Fixed
+- image quality in fullscreen
+- resized image loading
+
 ## 2.7.9 - 2022-02-27
 ### Fixed
 - typo in documentation

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.9-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.10-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -106,14 +106,14 @@ window.CI360.init();
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
 
-### addView
+### add
 
 ###### Type: **Function**
 
 add new view by id to cloudimage 360 views.
 
 ```javascript
-window.CI360.addView(idOfView: string);
+window.CI360.add(idOfView: string);
 ```
 
 ### update
@@ -241,7 +241,6 @@ data-api-version="v7"
 ```javascript
 data-api-version="null"
 ```
-### data-filename (or filename)
 ### data-filename-x (or filename-x)
 ### ~~data-filename (or filename)~~ [deprecated]
 

package/dist/ci360.service.js

@@ -248,10 +248,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
-        return !!image;
+        return image;
       });
       var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
-        return !!image;
+        return image;
       });
       var totalAmount = this.amountX + this.amountY;
       var totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length;
@@ -277,7 +277,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
-        (0, _utils.preloadOriginalImages)(this.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
+        (0, _utils.preloadOriginalImages)(this.srcYConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
       }
     }
   }, {
@@ -665,6 +665,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.container.height = window.innerHeight * this.devicePixelRatio;
         this.container.style.height = window.innerHeight + 'px';
         this.container.style.maxWidth = 'unset';
+        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';
         return;
       }
 
@@ -683,10 +687,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
-        return !!image;
+        return image;
       });
       var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
-        return !!image;
+        return image;
       });
       var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
 
@@ -717,11 +721,11 @@ var CI360Viewer = /*#__PURE__*/function () {
       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), true);
+      (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
 
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
-        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y), true);
+        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y));
       }
     }
   }, {
@@ -962,9 +966,9 @@ var CI360Viewer = /*#__PURE__*/function () {
         var viewIndex = viewers.findIndex(function (view) {
           return view.id === _this5.container.id;
         });
+        container.removeChild(this.innerBox);
         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));
       }
@@ -1159,10 +1163,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         onEventEnd: onEventEnd
       };
       var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
-      this.topElem = controlsElements.top || {};
-      this.bottomElem = controlsElements.bottom || {};
-      this.leftElem = controlsElements.left || {};
-      this.rightElem = controlsElements.right || {};
+      this.topElem = controlsElements.top;
+      this.bottomElem = controlsElements.bottom;
+      this.leftElem = controlsElements.left;
+      this.rightElem = controlsElements.right;
     }
   }, {
     key: "attachEvents",
@@ -1306,10 +1310,6 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.addMagnifier();
         }
 
-        if (this.info) {
-          this.showImageInfo(ctx);
-        }
-
         if (this.bottomCircle && !this.fullscreenView) {
           this.add360ViewCircleIcon();
         }
@@ -1385,11 +1385,11 @@ var CI360Viewer = /*#__PURE__*/function () {
         }
 
         var loadedXImages = _this7.imagesX.filter(function (image) {
-          return !!image;
+          return image;
         });
 
         var loadedYImages = _this7.imagesY.filter(function (image) {
-          return !!image;
+          return image;
         });
 
         var totalAmount = _this7.amountX + _this7.amountY;

package/dist/index.js

@@ -61,7 +61,7 @@ function getActiveIndexByID(id, oriantation) {
   return currentViewer && currentViewer.activeImageX - 1;
 }
 
-function addView(id) {
+function add(id) {
   var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
 
   if (view360Array.length && id) {
@@ -77,15 +77,11 @@ function update() {
   var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
   if (id) {
-    try {
-      var view = window.CI360._viewers.filter(function (viewer) {
-        return viewer.id === id;
-      })[0];
-
-      view.updateView(forceUpdate, window.CI360._viewers);
-    } catch (_unused) {
-      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'"));
-    }
+    var view = window.CI360._viewers.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+
+    view.updateView(forceUpdate, window.CI360._viewers);
   } else {
     window.CI360._viewers.forEach(function (viewer) {
       viewer.updateView(forceUpdate, window.CI360._viewers);
@@ -102,7 +98,7 @@ window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
 window.CI360.update = update;
-window.CI360.addView = addView;
+window.CI360.add = add;
 
 if (!window.CI360.notInitOnLoad) {
   init();

package/dist/static/css/style.css

@@ -118,4 +118,111 @@
   height: 250px;
   top: -75px;
   right: -85px;
+}
+
+.cloudimage-360 .cloudimage-360-left,
+.cloudimage-360 .cloudimage-360-right {
+  padding: 8px;
+  background: rgb(244, 244, 244);
+  border: none;
+  border-radius: 4px;
+}
+
+.cloudimage-360 .cloudimage-360-left:focus,
+.cloudimage-360 .cloudimage-360-right:focus {
+  outline: none;
+}
+
+.cloudimage-360 .cloudimage-360-left {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  top: calc(50% - 15px);
+  left: 20px;
+}
+
+.cloudimage-360 .cloudimage-360-right {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  top: calc(50% - 15px);
+  right: 20px;
+}
+
+.cloudimage-360 .cloudimage-360-left:before,
+.cloudimage-360 .cloudimage-360-right:before {
+  content: '';
+  display: block;
+  width: 30px;
+  height: 30px;
+  background: 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360 .cloudimage-360-left:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+}
+
+.cloudimage-360 .cloudimage-360-right:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+}
+
+.cloudimage-360 .cloudimage-360-left.not-active,
+.cloudimage-360 .cloudimage-360-right.not-active {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+.cloudimage-360 .cloudimage-360-top,
+.cloudimage-360 .cloudimage-360-bottom {
+  padding: 8px;
+  background: rgb(244, 244, 244);
+  border: none;
+  border-radius: 4px;
+}
+
+.cloudimage-360 .cloudimage-360-top:focus,
+.cloudimage-360 .cloudimage-360-bottom:focus {
+  outline: none;
+}
+
+.cloudimage-360 .cloudimage-360-top {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 15px);
+  top: 20px;
+  transform: rotate(90deg);
+}
+
+.cloudimage-360 .cloudimage-360-bottom {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 15px);
+  bottom: 20px;
+  transform: rotate(90deg);
+}
+
+.cloudimage-360 .cloudimage-360-top:before,
+.cloudimage-360 .cloudimage-360-bottom:before {
+  content: '';
+  display: block;
+  width: 30px;
+  height: 30px;
+  background: 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360 .cloudimage-360-top:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+}
+
+.cloudimage-360 .cloudimage-360-bottom:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+}
+
+.cloudimage-360 .cloudimage-360-top.not-active,
+.cloudimage-360 .cloudimage-360-bottom.not-active {
+  opacity: 0.4;
+  cursor: default;
 }

package/package.json

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