js-cloudimage-360-view 2.7.5 → 2.7.8

package/CHANGELOG.md

@@ -25,7 +25,23 @@ Types of changes:
 - ...
 
 -------------
-## 2.7.5 - 2022-01-08
+## 2.7.8 - 2022-02-27
+### Added
+- possibility to add new view to CI360 views
+### Fixed
+- re-render method
+
+## 2.7.7 - 2022-02-24
+### Fixed
+- container width on mobile
+- re-render method
+
+## 2.7.6 - 2022-02-20
+### Fixed
+- drag speed
+- responsive canvas width and height
+
+## 2.7.5 - 2022-02-08
 ### Added
 - update method to re-render or re-init the plugin
 ### Fixed

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.5-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.8-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)
@@ -6,16 +6,9 @@
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)
 
 <p align="center">
-	<a href="https://www.cloudimage.io/#gh-light-mode-only">
-		<img
+<img
 			alt="The Lounge"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
-	</a>
-		<a href="https://www.cloudimage.io/#gh-dark-mode-only">
-		<img
-			alt="The Lounge"
-			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
-	</a>
 </p>
 
 <h1 align="center">
@@ -112,6 +105,17 @@ window.CI360.init();
 > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
+
+### addView
+
+###### Type: **Function**
+
+add new view by id to cloudimage 360 views.
+
+```javascript
+window.CI360.addView(idOfView: string);
+```
+
 ### update
 
 ###### Type: **Function**
@@ -308,25 +312,49 @@ Open 360 spin view in full screen modal.
 
 Magnifier to zoom image.
 
-### ~~data-ratio (or ratio)~~ [deprecated]
+### data-ratio (or ratio)
 
 
-###### ~~Type: **Number** (height / width) | Default: **none** | _optional_~~
-
-~~Prevents page from jumping.~~
-### data-width (or width)
-
-###### Type: **Number** | Default: **none** | _optional_
+###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
+#### `ratio`: string
 
-Set a responsive width for the container.
-It will maintain the aspect ratio in respect to width
-### data-height (or height)
+Setting the height relative to the container width according to the provided ratio</br>
+In the following example, the height should be 0.3 the container width
 
-###### Type: **Number** | Default: **none** | _optional_
+```html
+<div
+	id="cloudimage-360-car"
+	class="cloudimage-360"
+	data-folder="https://scaleflex.airstore.io/demo/360-car/"
+	data-filename-x="iris-{index}.jpeg"
+	data-amount-x="36"
+	data-ratio="2"
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-g4wyt1?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+#### `ratio`: JSON
+Setting the height relative to the container width at any window size.
 
-Set a responsive height for the container.
-It will maintain the aspect ratio in respect to height
+In the following example, the height should be 1.3 the container width at window size less than or equal to 567px
+and 2.22 at window size less than or equal to 768px.
 
+```html
+<div
+	id="cloudimage-360-car"
+	class="cloudimage-360"
+	data-folder="https://scaleflex.airstore.io/demo/360-car/"
+	data-filename-x="iris-{index}.jpeg"
+	data-amount-x="36"
+	data-ratio='{
+		"576": "1.3",
+		"768": "2.22",
+		"992": "2.23",
+		"1200": "3",
+		"2400": "3.2"
+	}'
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-5tssb7?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 ### data-autoplay-reverse (or autoplay-reverse)
 
 ###### Type: **Bool** | Default: **false** | _optional_

package/dist/ci360.service.js

@@ -19,6 +19,8 @@ var _constants = require("./constants/");
 
 require("./static/css/style.css");
 
+require("./static/css/hotspots.css");
+
 var _utils = require("./utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -26,7 +28,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var CI360Viewer = /*#__PURE__*/function () {
-  function CI360Viewer(container, fullscreen) {
+  function CI360Viewer(container, fullscreen, hotspotConfig) {
     (0, _classCallCheck2.default)(this, CI360Viewer);
     this.container = container;
     this.movementStart = {
@@ -50,7 +52,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
     this.id = container.id;
-    this.init(container);
+    this.hotspotConfig = hotspotConfig && (0, _utils.generateHotspotsConfigs)(hotspotConfig);
     this.isMagnifyOpen = false;
     this.isDragged = false;
     this.startPointerZoom = false;
@@ -65,13 +67,14 @@ var CI360Viewer = /*#__PURE__*/function () {
       y: 0
     };
     this.isStartedLoadOriginalImages = false;
+    this.init(container);
   }
 
   (0, _createClass2.default)(CI360Viewer, [{
     key: "mouseDown",
     value: function mouseDown(event) {
       if (!this.imagesLoaded) return;
-      event.preventDefault();
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       var pageX = event.pageX,
           pageY = event.pageY;
       this.hideInitialIcons();
@@ -92,6 +95,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       };
       this.isClicked = true;
       this.isDragged = false;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
     key: "mouseUp",
@@ -215,6 +222,10 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
 
+        if (this.hotspotConfig) {
+          (0, _utils.hideHotspotsIcons)();
+        }
+
         _zoomSteps.forEach(function (step) {
           setTimeout(function () {
             _this2.zoomIntensity = step;
@@ -273,6 +284,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "touchStart",
     value: function touchStart(event) {
       if (!this.imagesLoaded) return;
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       this.hideInitialIcons();
 
       if (this.autoplay || this.loopTimeoutId) {
@@ -289,6 +301,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         y: event.touches[0].clientY
       };
       this.isClicked = true;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
     key: "touchEnd",
@@ -639,13 +655,9 @@ var CI360Viewer = /*#__PURE__*/function () {
       (0, _utils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
     }
   }, {
-    key: "updateContainerSize",
-    value: function updateContainerSize(image) {
-      var parentEl = this.container.parentNode || {};
-      var imageAspectRatio = image.width / image.height;
-      var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
-      var containerWidth = (0, _utils.getContainerResponsiveWidth)(parentEl, this.containerWidth);
-      var containerHeight = (0, _utils.getContainerResponsiveHeight)(this.container, containerWidth, this.containerHeight);
+    key: "updateContainerAndCanvasSize",
+    value: function updateContainerAndCanvasSize(image) {
+      var imageAspectRatio = (0, _utils.getImageAspectRatio)(image, this.ratio);
 
       if (this.fullscreenView) {
         this.container.width = window.innerWidth * this.devicePixelRatio;
@@ -656,24 +668,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         return;
       }
 
-      if (this.containerWidth && this.containerHeight) {
-        this.container.style.width = containerWidth + 'px';
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if (!this.containerWidth && !this.containerHeight) {
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if ((isProvidedHeightLessThanWidth || !this.containerWidth) && this.containerHeight) {
-        this.container.style.maxWidth = containerHeight * imageAspectRatio + 'px';
-        this.container.style.height = containerHeight + 'px';
-      } else {
-        this.container.style.maxWidth = containerWidth + 'px';
-        this.container.style.height = containerWidth / imageAspectRatio + 'px';
-      }
+      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+      this.canvas.style.width = this.container.offsetWidth + 'px';
+      this.canvas.height = this.container.offsetWidth / imageAspectRatio * this.devicePixelRatio;
+      this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
     }
   }, {
     key: "onResizedImageLoad",
@@ -698,12 +696,23 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.update();
       }
     }
+  }, {
+    key: "showImageInfo",
+    value: function showImageInfo(ctx) {
+      ctx.font = "".concat(this.fullscreenView ? 28 : 14, "px serif");
+      ctx.fillStyle = this.info === 'white' ? '#FFF' : '#000';
+      var imageDimension = "image-dimension: ".concat(this.container.offsetWidth, "x").concat(this.container.offsetHeight, "px");
+      var currentXImage = 'active-index-x: ' + this.activeImageX;
+      var currentYImage = 'active-index-y: ' + this.activeImageY;
+      var imageIndex = [currentXImage, currentYImage].join(' | ');
+      ctx.fillText(imageDimension, 20, this.container.offsetHeight - 35);
+      ctx.fillText(imageIndex, 20, this.container.offsetHeight - 10);
+    }
   }, {
     key: "requestResizedImages",
     value: function requestResizedImages() {
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
-      this.updateContainerSize(firstImage);
       this.update();
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
@@ -726,10 +735,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
-      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';
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
         var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
@@ -743,9 +749,17 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (this.mouseTracked) {
           this.updateImageScale(ctx);
         } else {
+          if (this.hotspotConfig && !this.autoplay) {
+            (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+          }
+
           ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
         }
       }
+
+      if (this.info) {
+        this.showImageInfo(ctx);
+      }
     }
   }, {
     key: "updateImageScale",
@@ -798,6 +812,7 @@ var CI360Viewer = /*#__PURE__*/function () {
           x: offsetX,
           y: offsetY
         };
+        this.addCloseFullscreenView();
         ctx.drawImage(image, offsetX, offsetY, width, height);
       } else {
         this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
@@ -807,8 +822,8 @@ var CI360Viewer = /*#__PURE__*/function () {
         ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
       }
 
-      if (this.fullscreenView) {
-        this.addCloseFullscreenView();
+      if (this.info) {
+        this.showImageInfo(ctx);
       }
 
       if (this.magnifier) {
@@ -816,7 +831,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.boxShadow && !this.fullscreenView) {
-        (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
 
       if (this.bottomCircle && !this.fullscreenView) {
@@ -826,6 +841,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.fullscreen && !this.fullscreenView) {
         this.addFullscreenIcon();
       }
+
+      if (this.hotspotConfig && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
     key: "onAllImagesLoaded",
@@ -892,7 +911,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
       var fullscreenContainer = (0, _utils.createFullscreenModal)(this.container);
-      new CI360Viewer(fullscreenContainer, true);
+      new CI360Viewer(fullscreenContainer, true, this.hotspotConfig);
     }
   }, {
     key: "setFullscreenEvents",
@@ -1214,9 +1233,10 @@ var CI360Viewer = /*#__PURE__*/function () {
           controlReverse = _get360ViewProps.controlReverse,
           hide360Logo = _get360ViewProps.hide360Logo,
           logoSrc = _get360ViewProps.logoSrc,
-          containerWidth = _get360ViewProps.containerWidth,
-          containerHeight = _get360ViewProps.containerHeight,
-          pointerZoom = _get360ViewProps.pointerZoom;
+          pointerZoom = _get360ViewProps.pointerZoom,
+          ratio = _get360ViewProps.ratio,
+          _get360ViewProps$imag = _get360ViewProps.imageInfo,
+          imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag;
 
       var ciParams = {
         ciToken: ciToken,
@@ -1252,17 +1272,17 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.lazySelector = lazySelector;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
-      this.dragSpeed = Math.max(magnifier, 50);
+      this.dragSpeed = Math.max(dragSpeed, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
       this.logoSrc = logoSrc;
       this.ciParams = ciParams;
       this.apiVersion = apiVersion;
-      this.containerWidth = containerWidth;
-      this.containerHeight = containerHeight;
       this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
       this.keysReverse = keysReverse;
+      this.info = imageInfo;
+      this.ratio = ratio && JSON.parse(ratio);
 
       if (reload) {
         new CI360Viewer(this.container);
@@ -1270,6 +1290,37 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (update) {
+        (0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.boxShadowEl);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.view360Icon);
+        this.remove360ViewCircleIcon();
+        this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
+
+        if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
+          this.add360ViewIcon();
+          (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+        }
+
+        if (this.magnifier) {
+          this.addMagnifier();
+        }
+
+        if (this.info) {
+          this.showImageInfo(ctx);
+        }
+
+        if (this.bottomCircle && !this.fullscreenView) {
+          this.add360ViewCircleIcon();
+        }
+
+        if (this.fullscreen && !this.fullscreenView) {
+          this.addFullscreenIcon();
+        }
+
+        if (this.boxShadow && !this.fullscreenView) {
+          this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        }
+
         this.onAllImagesLoaded();
         return;
       }
@@ -1278,6 +1329,11 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
       this.canvas = (0, _utils.createCanvas)(this.innerBox);
       this.loader = (0, _utils.createLoader)(this.innerBox);
+
+      if (this.hotspotConfig && !this.fullscreenView) {
+        (0, _utils.createHotspots)(container, this.hotspotConfig);
+      }
+
       (0, _utils.applyStylesToContainer)(this.container);
       this.srcXConfig = {
         folder: folder,
@@ -1347,7 +1403,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
 
         if (isFirstImageLoaded) {
-          _this6.updateContainerSize(image);
+          _this6.updateContainerAndCanvasSize(image);
 
           _this6.onFirstImageLoaded(image);
         }

package/dist/ci360.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setView360Icon = exports.get360ViewProps = exports.debounce = void 0;
+exports.setView360Icon = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
 
 var _constants = require("./constants");
 
@@ -46,8 +46,8 @@ var get360ViewProps = function get360ViewProps(image) {
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
     logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
-    containerWidth: parseInt(attr(image, 'width') || attr(image, 'data-width'), 10) || 0,
-    containerHeight: parseInt(attr(image, 'height') || attr(image, 'data-height'), 10) || 0
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
+    imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };
 };
 
@@ -63,6 +63,8 @@ var attr = function attr(element, attribute) {
   return element.getAttribute(attribute);
 };
 
+exports.attr = attr;
+
 var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
   view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
 };

package/dist/index.js

@@ -10,11 +10,16 @@ require("core-js/features/array/includes");
 
 var _ci = _interopRequireDefault(require("./ci360.service"));
 
+var _ci2 = require("./ci360.utils");
+
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  var hotspotsConfigs = window.CI360.hotspots || {};
   [].slice.call(view360Array).forEach(function (container) {
-    viewers.push(new _ci.default(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));
   });
   window.CI360._viewers = viewers;
 }