chore: build v2.7.12

scaleflex · Mar 19, 2022 · 6dc5eeb · 6dc5eeb
1 parent c225ef5
commit 6dc5eeb
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.12 - 2022-03-19
+### Changed
+- hotspots init method
+
 ## 2.7.11 - 2022-03-17
 ### Fixed
 - canvas aspect ratio

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.11-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.12-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)

diff --git a/build/js-cloudimage-360-view.min.js b/build/js-cloudimage-360-view.min.js
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -470,7 +470,7 @@ <h2 class="text-center">Ready to get started?</h2>
         <p>Include the following script into your project after all content in body tag</p>
         <figure class="highlight">
         <pre><code class="javascript">
-&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.11/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.12/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
 </code></pre>
         </figure>
       </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.11",
+  "version": "2.7.12",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",

diff --git a/src/ci360.service.js b/src/ci360.service.js
@@ -47,9 +47,10 @@ import {
   removeChildFromParent,
   initLazyload,
   } from './utils';
+import { togglePopupEvents } from './utils/hotspots/toggle-popup-events';
 
   class CI360Viewer {
-  constructor(container, fullscreen, hotspotConfig) {
+  constructor(container, fullscreen, hotspotsConfigs) {
     this.container = container;
     this.movementStart = { x: 0, y: 0 };
     this.isStartSpin = false;
@@ -69,7 +70,7 @@ import {
     this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
     this.id = container.id;
-    this.hotspotConfig = hotspotConfig && generateHotspotsConfigs(hotspotConfig);
+    this.hotspotsConfigs = hotspotsConfigs && generateHotspotsConfigs(hotspotsConfigs);
     this.isMagnifyOpen = false;
     this.isDragged = false;
     this.startPointerZoom = false;
@@ -109,6 +110,10 @@ import {
     this.isClicked = true;
     this.isDragged = false;
 
+    if (this.hotspotsConfigs) {
+      togglePopupEvents(this.hotspotsConfigs, event, true);
+    }
+
     if (isMouseOnHotspotElement) {
       this.isClicked = false;
     }
@@ -125,6 +130,10 @@ import {
       this.show360ViewCircleIcon();
     }
 
+    if (this.hotspotsConfigs) {
+      togglePopupEvents(this.hotspotsConfigs);
+    }
+
     if (this.pointerZoom && !this.fullscreenView) {
       setTimeout(() => {
         this.isZoomReady = true;
@@ -225,7 +234,7 @@ import {
 
       const zoomSteps = generateZoomInSteps(this.pointerZoom);
 
-      if (this.hotspotConfig) {
+      if (this.hotspotsConfigs) {
         hideHotspotsIcons();
       }
 
@@ -794,13 +803,14 @@ import {
       if (this.mouseTracked) {
         this.updateImageScale(ctx);
       } else {
-        if (this.hotspotConfig && !this.autoplay) {
+        if (this.hotspotsConfigs && !this.autoplay) {
           updateHotspots(
             this.container,
-            this.hotspotConfig,
+            this.hotspotsConfigs,
             this.activeImageX,
             this.activeImageY,
-            this.movingDirection
+            this.movingDirection,
+            this.isClicked
           );
         }
 
@@ -883,10 +893,10 @@ import {
       this.addFullscreenIcon();
     }
 
-    if (this.hotspotConfig && !this.autoplay) {
+    if (this.hotspotsConfigs && !this.autoplay) {
       updateHotspots(
         this.container,
-        this.hotspotConfig,
+        this.hotspotsConfigs,
         this.activeImageX,
         this.activeImageY,
         this.movingDirection
@@ -921,6 +931,16 @@ import {
     }
 
     this.initControls();
+
+    if (this.hotspotsConfigs && !this.autoplay) {
+      updateHotspots(
+        this.container,
+        this.hotspotsConfigs,
+        this.activeImageX,
+        this.activeImageY,
+        this.movingDirection
+      );
+    }
   }
 
   magnify(event) {
@@ -972,7 +992,7 @@ import {
 
     const fullscreenContainer = createFullscreenModal(this.container);
 
-    new CI360Viewer(fullscreenContainer, true, this.hotspotConfig);
+    new CI360Viewer(fullscreenContainer, true, this.hotspotsConfigs);
   }
 
   setFullscreenEvents(_, event) {
@@ -1343,8 +1363,8 @@ import {
     this.canvas = createCanvas(this.innerBox);
     this.loader = createLoader(this.innerBox);
 
-    if (this.hotspotConfig && !this.fullscreenView) {
-      createHotspots(container, this.hotspotConfig);
+    if (this.hotspotsConfigs && !this.fullscreenView) {
+      createHotspots(container, this.hotspotsConfigs);
     }
 
     applyStylesToContainer(this.container);

diff --git a/src/ci360.utils.js b/src/ci360.utils.js
@@ -80,5 +80,6 @@ export {
   get360ViewProps,
   setView360Icon,
   attr,
+  isTrue,
   debounce
 }
diff --git a/src/index.js b/src/index.js
@@ -2,9 +2,9 @@ import 'core-js/features/array/for-each';
 import 'core-js/features/array/filter';
 import 'core-js/features/array/includes';
 import CI360Viewer from './ci360.service';
-import { attr } from './ci360.utils';
+import { isTrue } from './ci360.utils';
 
-function setContainerId(container) {
+function getContainerWithId(container) {
   const containerId = container.id;
 
   if (!containerId) {
@@ -20,17 +20,15 @@ function setContainerId(container) {
 function init() {
   const viewers = [];
   const view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  const hotspotsConfigs = window.CI360.hotspots|| {};
 
-  [].slice.call(view360Array).forEach(container => {
-    const containerWithId = setContainerId(container);
+  [].slice.call(view360Array).forEach(_container => {
+    const container = getContainerWithId(_container);
 
-    const hotspotInstanceName = attr(containerWithId, 'hotspot-instance') ||
-      attr(containerWithId, 'data-hotspot-instance');
+    const isHotspotsEnabled = isTrue(container, 'hotspots')
 
-    const hotspotConfig = hotspotsConfigs?.[hotspotInstanceName];
-
-    viewers.push(new CI360Viewer(containerWithId, false, hotspotConfig));
+    if (!isHotspotsEnabled) {
+      viewers.push(new CI360Viewer(container));
+    }
   })
 
   window.CI360._viewers = viewers;
@@ -80,12 +78,23 @@ function isNoViewers() {
   return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 }
 
+function addHotspots(instanceId, config) {
+  const view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  const container = Array.from(view360Array)
+    .find(view => view.id === instanceId);
+
+  if (container) {
+    window.CI360._viewers.push(new CI360Viewer(container, false, config))
+  }
+}
+
 window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
 window.CI360.update = update;
 window.CI360.add = add;
+window.CI360.addHotspots = addHotspots;
 
 if (!window.CI360.notInitOnLoad) {
   init();

diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css
@@ -35,7 +35,7 @@
   border: 1px solid #FFFFFF33;
   border-radius: 50%;
   box-sizing: border-box;
-  transition: opacity 800ms ease-in-out;
+  transition: opacity 300ms ease-in-out;
   cursor: auto;
 }
 
@@ -61,7 +61,7 @@
 .cloudimage-360-hotspot-custom-icon::after {
   content: '+';
   position: absolute;
-  width: 8px;
+  line-height: 20px;
   left: 50%;
   top: 100%;
   color: #FFF;
@@ -131,6 +131,8 @@
 .cloudimage-360-images-carousel .cloudimage-360-carousel-image {
   display: none;
   min-height: 187px;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image {
@@ -194,10 +196,10 @@
   padding: 4px 8px;
   transition: background-color 200ms ease-in-out;
   border-radius: 2px;
+  text-decoration: none;
 }
 
 .cloudimage-360-modal-more-details:hover {
-  text-decoration: none;
   color: #76AD01;
   background-color: #e1f5d8;
 }

diff --git a/src/utils/hotspots/attach-events/hide-popup.js b/src/utils/hotspots/attach-events/hide-popup.js
@@ -0,0 +1,6 @@
+export const hidePopup = (popup, isVisible) => {
+  if (!isVisible) {
+    popup.removeAttribute('data-show');
+    popup.removeAttribute('data-cloudimage-360-show');
+  }
+};
diff --git a/src/utils/hotspots/attach-events/show-popup.js b/src/utils/hotspots/attach-events/show-popup.js
@@ -0,0 +1,6 @@
+export const showPopup = (popup, popperInstance) => {
+  popup.setAttribute('data-show', '');
+  popup.setAttribute('data-cloudimage-360-show', '');
+
+  popperInstance.update();
+}
diff --git a/src/utils/hotspots/attach-popup-events.js b/src/utils/hotspots/attach-popup-events.js
diff --git a/src/utils/hotspots/elements/create-hotspot-icon.js b/src/utils/hotspots/elements/create-hotspot-icon.js
@@ -1,31 +1,53 @@
+import { hidePopup } from '../attach-events/hide-popup';
+import { showPopup } from '../attach-events/show-popup';
 import { hideHotspotIcon } from '../hide-hotspot-icon';
 
-export const createHotspotIcon = (container, hotspotConfig) => {
+export const createHotspotIcon = (container, hotspotConfig, popup, popperInstance) => {
   const { indicatorSelector, variant } = hotspotConfig;
   const { url, anchorId } = variant;
+  const { popupProps: { open = false } } = hotspotConfig;
 
+  let isVisible;
   const hotspotIcon = document.createElement('div');
 
-  const mouseEnterHotspot = () => {
-    hotspotIcon.setAttribute('data-cloudimage-360-show', '');
-  };
-
-  const mouseLeaveHotspot = () => {
-    hotspotIcon.removeAttribute('data-cloudimage-360-show');
-  };
-
   hotspotIcon.style.position = 'absolute';
 
   hotspotIcon.className = `cloudimage-360-hotspot-${url ? 'link' : 'custom'}-icon ${indicatorSelector}`;
 
   hotspotIcon.setAttribute('data-hotspot-icon-id', anchorId);
   hotspotIcon.setAttribute('data-cloudimage-360-hotspot', '');
 
-  hotspotIcon.addEventListener('mouseenter', mouseEnterHotspot);
-  hotspotIcon.addEventListener('mouseleave', mouseLeaveHotspot);
+  const popupMouseEnter = () => {
+    isVisible = true;
+  };
+
+  const popupMouseLeave = () => {
+    isVisible = false;
+
+    !open && hidePopup(popup, isVisible);
+  }
 
   hotspotIcon.onclick = (e) => e.stopPropagation();
 
+  const showEvents = ['mouseenter', 'touchstart', 'focus'];
+  const hideEvents = ['mouseleave', 'blur'];
+
+  showEvents.forEach((event) => {
+    hotspotIcon.addEventListener(event, () => showPopup(popup, popperInstance));
+  });
+
+  if (!open) {
+    hideEvents.forEach((event) => {
+      hotspotIcon.addEventListener(
+        event,
+        () => setTimeout(() => hidePopup(popup, isVisible), 160)
+      );
+    });
+  }
+
+  popup.addEventListener('mouseenter', popupMouseEnter);
+  popup.addEventListener('mouseleave', popupMouseLeave);
+
   hideHotspotIcon(hotspotIcon);
 
   container.appendChild(hotspotIcon);