From 4a589c0f9edffd099cb72fbc5090e22db607f301 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Wed, 16 Oct 2024 17:39:04 +0300 Subject: [PATCH 01/31] Refactored existing code to enhance readability, maintainability, and performance. --- .babelrc | 16 +- .prettierrc | 9 + CHANGELOG.md | 72 +- README.md | 448 ++--- config/webpack-build.config.js | 27 +- config/webpack-demo.config.js | 32 +- eslint.config.mjs | 8 + examples/src/constants.js | 48 +- examples/src/controllers.css | 2 +- examples/src/hotspots-config.constant.js | 69 +- examples/src/index.js | 211 +-- examples/src/mouse-direction.js | 42 + examples/src/styles/main.css | 30 +- package.json | 8 +- src/ci360.service.js | 1481 +++++------------ src/ci360.utils.js | 100 +- src/constants/auto-play-behavior.js | 6 - src/constants/falsy-values.js | 10 - src/constants/index.js | 7 - src/constants/orientations.js | 5 - src/constants/regex.js | 8 - src/index.js | 58 +- src/static/css/hotspots.css | 52 +- src/static/css/style.css | 114 +- src/utils/auto-play/get-speed-factor.js | 5 +- src/utils/auto-play/get-throttle-time.js | 18 + src/utils/auto-play/is-completed-one-cycle.js | 36 +- src/utils/auto-play/loop.js | 61 +- src/utils/class-names/remove-class.js | 9 +- .../constants.js} | 22 +- .../create-360-view-circle-icon.js | 3 +- .../create-360-view-icon.js | 8 - src/utils/container-elements/create-canvas.js | 10 +- .../create-close-fullscreen-icon.js | 8 +- .../container-elements/create-close-icon.js | 7 + .../create-fullscreen-icon.js | 7 - .../create-fullscreen-modal.js | 3 +- .../container-elements/create-initial-icon.js | 8 + src/utils/container-elements/create-loader.js | 8 +- src/utils/container-elements/index.js | 8 +- .../remove-child-from-parent.js | 7 - .../remove-element-from-container.js | 7 + src/utils/controls/get-item-skipped.js | 9 +- src/utils/controls/init-controls.js | 41 +- src/utils/delay.js | 9 + .../hotspots/attach-events/hide-popup.js | 2 +- .../hotspots/attach-events/show-popup.js | 2 +- src/utils/hotspots/configs-error-handler.js | 26 +- src/utils/hotspots/create-popper-instace.js | 1 - .../hotspots/elements/create-hotspot-icon.js | 18 +- .../elements/create-hotspot-popup-link.js | 4 +- .../hotspots/elements/create-hotspots.js | 7 +- .../elements/create-images-carousel.js | 1 - .../elements/create-model-elements.js | 8 +- src/utils/hotspots/elements/create-popup.js | 13 +- .../hotspots/elements/create-read-more-btn.js | 2 +- .../hotspots/generate-hotspots-configs.js | 4 +- src/utils/hotspots/generate-popup-config.js | 1 - .../hotspots/prepare-hotspots-positions.js | 33 +- src/utils/hotspots/toggle-popup-events.js | 9 +- .../hotspots/update-hotspot-icon-position.js | 12 +- src/utils/hotspots/update-hotspots.js | 24 +- src/utils/image-src/generate-cdn-path.js | 37 + .../generate-high-preview-cdn-url.js | 3 + src/utils/image-src/generate-images-path.js | 30 - .../image-src/generate-low-preview-cdn-url.js | 10 + .../is-props-change-require-reload.js | 22 +- src/utils/image-src/removeParamByRegex.js | 14 + src/utils/index.js | 11 +- .../load-images/generate-images-cdn-links.js | 4 + .../prepare-images-from-folder.js | 21 - .../prepare-images-from-list.js | 6 +- .../load-images/lazyload/init-lazyload.js | 69 +- .../get-first-cdn-image.js | 9 + .../get-first-cdn-mage-from-list.js | 14 + .../prepare-first-image-from-folder.js | 8 - .../prepare-first-image-from-list.js | 13 - .../load-images/load-image-as-promise.js | 4 +- src/utils/load-images/load-image.js | 19 + .../load-images-relative-to-container-size.js | 18 - src/utils/load-images/load-images.js | 59 + src/utils/load-images/load-original-images.js | 8 +- src/utils/load-images/preload-images.js | 98 +- .../load-images/preload-original-images.js | 24 +- .../magnify/get-current-original-image.js | 20 +- src/utils/magnify/get-cursor-position.js | 19 +- src/utils/magnify/magnify.js | 21 +- src/utils/magnify/move-magnifier.js | 40 +- src/utils/responsive/fit.js | 42 +- .../responsive/get-image-aspect-ratio.js | 11 +- .../get-size-according-to-pixel-ratio.js | 14 +- src/utils/spin-y/get-moving-direction.js | 28 +- src/utils/spin/ease-out.js | 3 + src/utils/spin/get-default-spin-direction.js | 15 + src/utils/spin/is-spin-keys-pressed.js | 11 + .../spin/should-switch-spin-direction.js | 23 + src/utils/spin/switch-spin-direction.js | 3 + src/utils/zoom/generate-zoom-in-steps.js | 17 +- src/utils/zoom/generate-zoom-out-steps.js | 17 +- 99 files changed, 1993 insertions(+), 2116 deletions(-) create mode 100644 .prettierrc create mode 100644 eslint.config.mjs create mode 100644 examples/src/mouse-direction.js delete mode 100644 src/constants/auto-play-behavior.js delete mode 100644 src/constants/falsy-values.js delete mode 100644 src/constants/index.js delete mode 100644 src/constants/orientations.js delete mode 100644 src/constants/regex.js create mode 100644 src/utils/auto-play/get-throttle-time.js rename src/{constants/props-require-reload.js => utils/constants.js} (50%) delete mode 100644 src/utils/container-elements/create-360-view-icon.js create mode 100644 src/utils/container-elements/create-close-icon.js delete mode 100644 src/utils/container-elements/create-fullscreen-icon.js create mode 100644 src/utils/container-elements/create-initial-icon.js delete mode 100644 src/utils/container-elements/remove-child-from-parent.js create mode 100644 src/utils/container-elements/remove-element-from-container.js create mode 100644 src/utils/delay.js create mode 100644 src/utils/image-src/generate-cdn-path.js create mode 100644 src/utils/image-src/generate-high-preview-cdn-url.js delete mode 100644 src/utils/image-src/generate-images-path.js create mode 100644 src/utils/image-src/generate-low-preview-cdn-url.js create mode 100644 src/utils/image-src/removeParamByRegex.js create mode 100644 src/utils/load-images/generate-images-cdn-links.js delete mode 100644 src/utils/load-images/images-from-folder/prepare-images-from-folder.js create mode 100644 src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-image.js create mode 100644 src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-mage-from-list.js delete mode 100644 src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js delete mode 100644 src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js create mode 100644 src/utils/load-images/load-image.js delete mode 100644 src/utils/load-images/load-images-relative-to-container-size.js create mode 100644 src/utils/load-images/load-images.js create mode 100644 src/utils/spin/ease-out.js create mode 100644 src/utils/spin/get-default-spin-direction.js create mode 100644 src/utils/spin/is-spin-keys-pressed.js create mode 100644 src/utils/spin/should-switch-spin-direction.js create mode 100644 src/utils/spin/switch-spin-direction.js diff --git a/.babelrc b/.babelrc index 56ce9c8..212a831 100644 --- a/.babelrc +++ b/.babelrc @@ -4,23 +4,15 @@ "@babel/preset-env", { "targets": { - "browsers": [ - "last 2 versions", - "ie 11" - ] + "browsers": ["last 2 versions", "ie 11"] } } ] ], - "plugins": [ - "array-includes", - "@babel/plugin-transform-runtime" - ], + "plugins": ["array-includes", "@babel/plugin-transform-runtime"], "env": { "production": { - "presets": [ - "minify" - ] + "presets": ["minify"] } } -} \ No newline at end of file +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..eb0950b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": true, + "singleQuote": true, + "trailingComma": "es5", + "tabWidth": 2, + "useTabs": false, + "printWidth": 110, + "arrowParens": "always" +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 293a4a2..03ad4b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ # Changelog + All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). Types of changes: + - `Added` for new features. - `Changed` for changes in existing functionality. - `Deprecated` for soon-to-be removed features. @@ -17,126 +19,185 @@ Types of changes: > If we have some "Breaking changes" we can mark it in message by `**BREAKING**` preffix, like: > `- **BREAKING**: Some message` -------------- +--- ## TODOs + > Todo list for future - ... -------------- +--- + ## 3.2.0 - 2023-09-25 + ### Added + - Possibility to add hotspots dynamically ## 3.1.1 - 2023-04-19 + ### Fixed + - Remove CVE vulnerabilities ## 3.1.0 - 2023-04-10 + ### Added + - possibility to enable/disable the request of new image on resize using `data-request-responsive-images` ### Fixed + - Page scroll, even spin-y is not active ## 3.0.4 - 2022-10-19 + ### Fixed + - Hotspot icons width ## 3.0.3 - 2022-05-04 + ### Fixed + - Error on loading original images from image list ## 3.0.2 - 2022-05-04 + ### Changed + - documentation ## 3.0.1 - 2022-03-28 + ### Changed + - hotspots icons ### Fixed + - loader is hidden if hide-360-logo is active ## 3.0.0 - 2022-03-25 + ### Added + - possibility to add makers or hotspots to each image - possibility add views after init the plugin - possibility to update views + ### Fixed + - hide 360 logo after play once ## 2.7.12 - 2022-03-19 + ### Changed + - hotspots init method ## 2.7.11 - 2022-03-17 + ### Fixed + - canvas aspect ratio - initialization of lazyloading ## 2.7.10 - 2022-03-01 + ### Fixed + - image quality in fullscreen - resized image loading ## 2.7.9 - 2022-02-27 + ### Fixed + - typo in documentation ## 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 + - drag speed on mobile - error when drag speed is too high - error in dependencies ## 2.7.4 - 2022-01-26 + ### Fixed + - typo in documentation file + ## 2.7.3 - 2022-01-26 + ### Fixed + - typo in documentation file ## 2.7.2 - 2022-01-26 + ### Added + - possibility to fit container relative to its width or height and maintain the aspect ratio - possibility to reverse the directions of the keys on the keyboard + ### Fixed + - pointer zoom behavior - error while loading images from lists - get the active image index ## 2.7.1 - 2021-11-06 + ### Added + - click to reset mouse zoom - show 360 logo after play once + ### Fixed + - set click as default value to start zoom - Sass error + ### Changed + - pointer zoom behavior ## 2.7.0 - 2021-11-04 + ### Added + - play once then stop auto-play - spin in the y-direction - zoom with mouse wheel @@ -144,6 +205,7 @@ Types of changes: - possibility to change icons styles ### Fixed + - hide scrollbar in fullscreen mode - auto-play not working on mobile - error on init the plugin inside a modal @@ -151,25 +213,29 @@ Types of changes: - images are not resized when window size changes ### Changed + - migrate CDN URL to V7 ## 2.6.0 - 2020-09-03 ### Feat + - add ability to specify custom 360 view logo ## 2.5.0 - 2020-07-05 ### Feat + - possibility to hide 360 view icon ## 2.4.1 - 2020-04-11 ### Fixed -- initialize first image using data-image-list #33 +- initialize first image using data-image-list #33 ## 2.4.0 - 2020-04-09 ### Fixed + - problem with first preview image is random #28, #29 diff --git a/README.md b/README.md index 3dd10be..b66df5a 100644 --- a/README.md +++ b/README.md @@ -45,23 +45,22 @@ ## Table of contents -* [Demo](#demo) -* [Step 1: Installation](#installation) -* [Step 2: Initialize](#initialize) -* [Methods](#methods) -* [Customize elements](#customize-elements) -* [Configuration](#configuration) -* [Controls](#controls) -* [Spin in X and Y axis](#spin_x_y) -* [Hotspots or Markers](#hotspots) -* [Cloudimage responsive integration](#cloudimage-responsive-integration) -* [Lazy loading integration](#lazy-loading) -* [Best practices](#best-practices) -* [Browser support](#browser_support) -* [Filerobot UI Family](#ui_family) -* [Contributing](#contributing) -* [License](#license) - +- [Demo](#demo) +- [Step 1: Installation](#installation) +- [Step 2: Initialize](#initialize) +- [Methods](#methods) +- [Customize elements](#customize-elements) +- [Configuration](#configuration) +- [Controls](#controls) +- [Spin in X and Y axis](#spin_x_y) +- [Hotspots or Markers](#hotspots) +- [Cloudimage responsive integration](#cloudimage-responsive-integration) +- [Lazy loading integration](#lazy-loading) +- [Best practices](#best-practices) +- [Browser support](#browser_support) +- [Filerobot UI Family](#ui_family) +- [Contributing](#contributing) +- [License](#license) ## Demo @@ -83,11 +82,11 @@ After adding the js-cloudimage-360-view lib, simply initialize it with **class n ```html
``` @@ -106,6 +105,7 @@ window.CI360.init(); ``` > NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with **notInitOnLoad** param +> > ```javascript > > @@ -119,8 +119,11 @@ window.CI360.init(); ```javascript window.CI360.add(idOftheView: string); ``` + lazy init cloudimage-360 view by id. + ###### arguments + `idOftheView`: string The id of the new view @@ -129,13 +132,17 @@ The id of the new view ### update ###### Type: **Function** + ```javascript window.CI360.update(idOftheView, forceUpdate); ``` + Update cloudimage 360 viewer instance.
For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`), the plugin will re-init. + ###### arguments + `idOftheView`: string The id of the new view @@ -144,13 +151,14 @@ Force the view to reinitialize. ```html
``` + ```javascript window.CI360.update('gurkha-suv'); ``` @@ -170,6 +178,7 @@ Destroying a cloudimage 360 viewer instance will reset the HTML to its original ```javascript window.CI360.destroy(); ``` + edit in codesandbox @@ -182,7 +191,9 @@ Get the {index} of the image that is being viewed. ```javascript window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string); ``` + ###### arguments + `idOfInstance`: string The id of the instance @@ -194,37 +205,41 @@ The oriantation of the active index You can customize elements by adding the following classes: ### Example CSS + ```css .cloudimage-360-icons-container { - top: 5px; - right: 5px; + top: 5px; + right: 5px; } .cloudimage-360-fullscreen-modal { - top: 0; - bottom: 0; + top: 0; + bottom: 0; } .cloudimage-360-magnifier-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat; + background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) + 50% 50% / cover no-repeat; } -.cloudimage-360-close-fullscreen-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat; +.cloudimage-360-close-icon { + background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) + 50% 50% / cover no-repeat; } .cloudimage-360-view-360-circle { - margin: auto; + margin: auto; } .cloudimage-360-loader { - margin: auto; + margin: auto; } -.cloudimage-360-view-360-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat; +.cloudimage-initial-icon { + background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) + 50% 50% / cover no-repeat; } .cloudimage-360-box-shadow { - top: 0; - left: 0; + top: 0; + left: 0; } .cloudimage-360-img-magnifier-glass { - border: 3px solid #000; - border-radius: 50%; + border: 3px solid #000; + border-radius: 50%; } ``` @@ -241,6 +256,7 @@ The selector for js-cloudimage-360-view lib. ###### Type: **String(url)** | _required_ Your images folder on server. + ### data-api-version (or api-version) ###### Type: **String** |Default: **'v7'** | _optional_ @@ -248,13 +264,17 @@ Your images folder on server. Allow to use a specific version of API. - set a specific version of API + ```javascript data-api-version="v7" ``` + - disable API version + ```javascript data-api-version="null" ``` + ### data-filename-x (or filename-x) ###### Type: **String** | Default: **image-{index}.jpg** | _optional_ @@ -264,9 +284,11 @@ The filename pattern for your 360 image. Must include {index}, which the library ### data-filename-y (or filename-y) ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_ + The same for [data-amount-x](#data-amount-x) but for images set in Y-axis. ### data-amount-x (or amount-x) + ###### Type: **Number** | Default: **36** | _optional_ Amount of images to load in X-axis for 360 view . @@ -310,6 +332,7 @@ Changing autoplay behavior Available behaviors (spin-x, spin-y, spin-xy, spin-yx) ### data-fullscreen (or fullscreen) + ###### Type: **Bool** | Default: **false** | _optional_ Open 360 spin view in full screen modal. @@ -321,23 +344,28 @@ Open 360 spin view in full screen modal. Magnifier to zoom image. ### data-ratio (or ratio) + ###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_ + #### `ratio`: string Setting the height relative to the container width according to the provided ratio
```html
``` + edit in codesandbox + #### `ratio`: JSON + Setting the height relative to the container width at any window size. In the following example, the height should be 1.3 the container width at window size less than or equal to 567px @@ -345,12 +373,12 @@ and 2.22 at window size less than or equal to 768px. ```html
``` + edit in codesandbox ### data-autoplay-reverse (or autoplay-reverse) @@ -403,11 +432,6 @@ Apply box shadow for container. Display 360 view line at the bottom of container. -### data-hide-360-logo (or hide-360-logo) - -###### Type: **Bool** | Default: **false** | _optional_ - -Hide 360 view icon. ### data-control-reverse (or control-reverse) @@ -434,6 +458,7 @@ Bottom offset for 360 view line. Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004" ### data-image-list-x (or data-image-list-x) + ###### Type: **Array** | _optional_ Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`. @@ -467,6 +492,7 @@ data-image-list-y='[ "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg" ]’ ``` + ### data-pointer-zoom (or pointer-zoom) ###### Type: **Number** | Default: **none** | _optional_ @@ -484,79 +510,89 @@ data-pointer-zoom="3" ###### Type: **Bool** | Default: **false** | _optional_ Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see [Lazy loading](#lazy-loading) + ### data-lazyload-selector (or lazyload-selector) ###### Type: **String** | Default: **lazyload** | _optional_ Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading) - ## Controls -You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom +You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, \*\*cloudimage-360-bottom ### Example CSS + ```css -.cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right { - padding: 8px; - background: rgba(255, 255, 255, 0.5); - border: none; - border-radius: 4px; +.cloudimage-360 .cloudimage-360-left, +.cloudimage-360 .cloudimage-360-right { + padding: 8px; + background: rgba(255, 255, 255, 0.5); + border: none; + border-radius: 4px; } -.cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus { - outline: none; +.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; + 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; + 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, +.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'); + 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'); + 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; +.cloudimage-360 .cloudimage-360-left.not-active, +.cloudimage-360 .cloudimage-360-right.not-active { + opacity: 0.4; + cursor: default; } ``` + ### Example HTML + ```html
- - - - + + + +
``` edit in codesandbox ## Spin in X and Y axes + Allow the view to spin in both X, Y axes + ### Requirements + We need to provide the `file-name` of the y-axis images using data-filename-y Also as we did for the x-axis if we are intializing the view using data-folder and data-filename-y @@ -565,25 +601,31 @@ example: ```javascript
-
+ class="cloudimage-360" + data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/" + data-filename-x="nike-{index}.jpg" + data-filename-y="nike-y-{index}.jpg" + data-amount-x="35" + data-amount-y="36" +> ``` + edit in codesandbox
+ > Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.
-Just we need to provide the data-amount-y +> Just we need to provide the data-amount-y + ## Hotspots or Markers + Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image. + ### Requirements + First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config. Also we need to set an `id` attribute, we will need it to link the view with the hotspots config. ### Create hotspots configuration + The hotspots config should be an array of objects, each object in the array indicates a single hotspot config. For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it.
hint: To know the current image index we will need to set `data-info="white || black"` attribute. @@ -591,136 +633,165 @@ example: ```js const HOTSPOTS_CONFIG = [ - { - positions: [ - { imageIndex: 0, xCoord: 527, yCoord: 319 }, - { imageIndex: 1, xCoord: 524 }, - { imageIndex: 2, xCoord: 520 }, - { imageIndex: 3, xCoord: 498 }, - { imageIndex: 4, xCoord: 470 }, - { imageIndex: 5, xCoord: 441 }, - ] - } -] + { + positions: [ + { imageIndex: 0, xCoord: 527, yCoord: 319 }, + { imageIndex: 1, xCoord: 524 }, + { imageIndex: 2, xCoord: 520 }, + { imageIndex: 3, xCoord: 498 }, + { imageIndex: 4, xCoord: 470 }, + { imageIndex: 5, xCoord: 441 }, + ], + }, +]; ``` + In the previous example, we have only set the Ycoord a single time at the image index 0. So if the coord didn't change there's no need to reset it, it will already take the previous value. Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below. + ## Variant + ### Link + we need to provide the URL of the link and the link title. example: ```js const HOTSPOTS_CONFIG = [ - { - positions, - variant: { - title: 'New Gurkha Technical Specifications', - url: 'https://www.forcegurkha.co.in/specifications/', - newTab: true - } - } -] + { + positions, + variant: { + title: 'New Gurkha Technical Specifications', + url: 'https://www.forcegurkha.co.in/specifications/', + newTab: true, + }, + }, +]; ``` + --- + ### Popup + Only the property inserted will displayed. -| Property |Type | Default | Description | +| Property |Type | Default | Description | | ------------- | ------------- | ------------- |------------- | -| images | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image | -| title |String| null | Display title underneath the images | -| description| String | null | Display description underneath the title | +| images | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image | +| title |String| null | Display title underneath the images | +| description| String | null | Display description underneath the title | | moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL | -| moreDetailsTitle | String | null| Set the title of the more details button | +| moreDetailsTitle | String | null| Set the title of the more details button | + +example: - example: ```js const HOTSPOTS_CONFIG = [ - { - positions, - variant: { - images: [ - { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' } - ], // optional - title: 'Air Intake Snorkel', // optional - description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional - moreDetailsUrl: 'https://forcegurkha.co.in', // optional - moreDetailsTitle: 'Read more' // optional - } - } -] + { + positions, + variant: { + images: [ + { + src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', + alt: 'air snorkel', + }, + ], // optional + title: 'Air Intake Snorkel', // optional + description: + 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional + moreDetailsUrl: 'https://forcegurkha.co.in', // optional + moreDetailsTitle: 'Read more', // optional + }, + }, +]; ``` + --- + ### Custom + Display any element in the DOM in a popup and link it with the hotspot.
We will need to set the variant property value to the id of the element. example: + ```js const HOTSPOTS_CONFIG = [ - { - positions, - variant: 'gurkha-suv' - } -] + { + positions, + variant: 'gurkha-suv', + }, +]; ``` + ## PopupProps + Options to customize the hotspot popup. + ### Properties -| Property | Type | Defaullt |Description | -| ------------- | ------------- | ------------- | ------------- | -| popupSelector |String| null |Set className to the popup wrapper | -| open |Boolean | false |Open the popup | -| arrow |Boolean| true |Dipslay an arrow that points toward the hotspot element| -| offset|Array | [0, 0] |Set a distance between the hotspot element and the popup | -| placement|String| Auto|- we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right)| +| Property | Type | Defaullt | Description | +| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------- | +| popupSelector | String | null | Set className to the popup wrapper | +| open | Boolean | false | Open the popup | +| arrow | Boolean | true | Dipslay an arrow that points toward the hotspot element | +| offset | Array | [0, 0] | Set a distance between the hotspot element and the popup | +| placement | String | Auto | - we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right) | example: + ```js const HOTSPOTS_CONFIG = [ - { - positions, - variant, - popupProps: { - popupSelector: 'air-intake-popup', // optional - offset: [20, 5], // optional - arrow: false, // optional - placement: 'bottom' // optional + { + positions, + variant, + popupProps: { + popupSelector: 'air-intake-popup', // optional + offset: [20, 5], // optional + arrow: false, // optional + placement: 'bottom', // optional + }, + indicatorSelector: 'first-hotspot-icon', // optional }, - indicatorSelector: 'first-hotspot-icon' // optional - } -] +]; ``` + ## Responsive hotspots + Now we need to make our hotspots responsive to have an accurate positioning in different screens. we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.
hint: `data-info` can be used to get view size. example: + ```js const HOTSPOTS_CONFIG = [ - { - positions, - variant, - popupProps, - indicatorSelector, - initialDimensions: [ 1170, 662 ] - } -] + { + positions, + variant, + popupProps, + indicatorSelector, + initialDimensions: [1170, 662], + }, +]; ``` + ## Add Hotspots + we need this function to link the created config with the 360-view. + ```js window.CI360.addHotspots(idOftheView, hotspotsConfig); ``` + example: + ```js -window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG); +window.CI360.addHotspots('gurkha-suv', HOTSPOTS_CONFIG); ``` + edit in codesandbox ### data-responsive (or responsive) @@ -759,7 +830,7 @@ Request new images on resize, based on the container width. ###### Type: **String** | Default: **none** | _optional_ Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement... -Multiple transformation operations can be applied to your image, separated by "```&```" (Ampersand). +Multiple transformation operations can be applied to your image, separated by "`&`" (Ampersand). example: ```html @@ -773,7 +844,7 @@ data-transformation="w=400&h=200&func=fit" ###### Type: **String** | Default: **none** | _optional_ Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen... -Multiple filters can be applied, separated by "```,```" (comma). +Multiple filters can be applied, separated by "`,`" (comma). example: ```html @@ -794,11 +865,11 @@ Lazy loading is not included into js-cloudimage-360-view by default. There are w ## Best practices -* In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server -or storage bucket (S3, Google Cloud, Azure Blob...) reachable over -HTTP or HTTPS by Cloudimage. If you want to upload your master images to -Cloudimage, contact us at -[hello@cloudimage.io](mailto:hello@cloudimage.io). +- In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server + or storage bucket (S3, Google Cloud, Azure Blob...) reachable over + HTTP or HTTPS by Cloudimage. If you want to upload your master images to + Cloudimage, contact us at + [hello@cloudimage.io](mailto:hello@cloudimage.io). ## Browser support @@ -806,15 +877,16 @@ Tested in all modern browsers and IE 11, 10, 9. ## Filerobot UI Familiy -* [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive) -* [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive) -* [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive) -* [Image Editor](https://github.com/scaleflex/filerobot-image-editor) -* [Uploader](https://github.com/scaleflex/filerobot-uploader) +- [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive) +- [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive) +- [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive) +- [Image Editor](https://github.com/scaleflex/filerobot-image-editor) +- [Uploader](https://github.com/scaleflex/filerobot-uploader) ## Contributing! All contributions are super welcome! ## License + JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT) diff --git a/config/webpack-build.config.js b/config/webpack-build.config.js index f4a1ae2..dda9125 100644 --- a/config/webpack-build.config.js +++ b/config/webpack-build.config.js @@ -13,30 +13,27 @@ const banner = ` Date: ${now.toISOString()} `; - module.exports = { - entry: path.join(__dirname, "../src/index.js"), + entry: path.join(__dirname, '../src/index.js'), output: { - path: path.join(__dirname, "../build"), - filename: `${pkg.name}.min.js` + path: path.join(__dirname, '../build'), + filename: `${pkg.name}.min.js`, }, module: { rules: [ { test: /\.(js|jsx)$/, - use: "babel-loader", - exclude: /node_modules/ + use: 'babel-loader', + exclude: /node_modules/, }, { test: /\.css$/, - use: ["style-loader", "css-loader"] - } - ] + use: ['style-loader', 'css-loader'], + }, + ], }, - plugins: [ - new webpack.BannerPlugin(banner), - ], + plugins: [new webpack.BannerPlugin(banner)], resolve: { - extensions: [".js", ".jsx"] - } -}; \ No newline at end of file + extensions: ['.js', '.jsx'], + }, +}; diff --git a/config/webpack-demo.config.js b/config/webpack-demo.config.js index e9f2e35..2fbd23b 100644 --- a/config/webpack-demo.config.js +++ b/config/webpack-demo.config.js @@ -1,35 +1,35 @@ const path = require('path'); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const htmlWebpackPlugin = new HtmlWebpackPlugin({ - template: path.join(__dirname, "../examples/src/index.html"), - filename: "./index.html" + template: path.join(__dirname, '../examples/src/index.html'), + filename: './index.html', }); module.exports = { - entry: path.join(__dirname, "../examples/src/index.js"), + entry: path.join(__dirname, '../examples/src/index.js'), output: { - path: path.join(__dirname, "../examples/dist"), - filename: "bundle[hash].js" + path: path.join(__dirname, '../examples/dist'), + filename: 'bundle[hash].js', }, module: { rules: [ { test: /\.(js|jsx)$/, - use: "babel-loader", - exclude: /node_modules/ + use: 'babel-loader', + exclude: /node_modules/, }, { test: /\.css$/, - use: [MiniCssExtractPlugin.loader, "css-loader"] - } - ] + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], }, plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin()], resolve: { - extensions: [".js", ".jsx"] + extensions: ['.js', '.jsx'], }, devServer: { - port: 3001 + port: 3001, }, - devtool: 'source-map' -}; \ No newline at end of file + devtool: 'source-map', +}; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..2edbef8 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,8 @@ +import globals from "globals"; +import pluginJs from "@eslint/js"; + + +export default [ + {languageOptions: { globals: globals.browser }}, + pluginJs.configs.recommended, +]; \ No newline at end of file diff --git a/examples/src/constants.js b/examples/src/constants.js index e231662..d3d9023 100644 --- a/examples/src/constants.js +++ b/examples/src/constants.js @@ -1,46 +1,46 @@ import { GURKHA_SUV_HOTSPOTS_CONFIG } from './hotspots-config.constant'; const NIKE_PLUGIN = { - "data-folder": "https://scaleflex.cloudimg.io/v7/demo/360-nike/", - "data-filename-x": "nike-{index}.jpg", - "data-filename-y": "nike-y-{index}.jpg", - "data-amount-x": "35", - "data-amount-y": "36", - "data-autoplay-behavior": "spin-xy", + 'data-folder': 'https://scaleflex.cloudimg.io/v7/demo/360-nike/', + 'data-filename-x': 'nike-{index}.jpg', + 'data-filename-y': 'nike-y-{index}.jpg', + 'data-amount-x': '35', + 'data-amount-y': '36', + 'data-autoplay-behavior': 'spin-xy', }; const EARBUDS_PLUGIN = { - "data-folder": "https://scaleflex.cloudimg.io/v7/demo/earbuds/", - "data-filename-x": "{index}.jpg", - "data-amount-x": "233", + 'data-folder': 'https://scaleflex.cloudimg.io/v7/demo/earbuds/', + 'data-filename-x': '{index}.jpg', + 'data-amount-x': '233', }; const SPIN_DIRECTION_PROPS = [ 'data-filename-y', 'data-amount-y', - 'data-autoplay-behavior' + 'data-autoplay-behavior', ]; const PLUGIN_PROPS = { - class: { value: "cloudimage-360", isRequired: true }, - "data-folder": { - value: "https://scaleflex.cloudimg.io/v7/demo/earbuds/", + class: { value: 'cloudimage-360', isRequired: true }, + 'data-folder': { + value: 'https://scaleflex.cloudimg.io/v7/demo/earbuds/', isRequired: true, - isUrl: true + isUrl: true, }, - "data-filename-x": { value: "{index}.jpg", isRequired: true }, - "data-amount-x": { value: 233, isRequired: true }, - "data-speed": { value: 100, isRequired: true }, - "data-drag-speed": { value: 120, isRequired: true }, - "data-autoplay": { isRequired: true } + 'data-filename-x': { value: '{index}.jpg', isRequired: true }, + 'data-amount-x': { value: 233, isRequired: true }, + 'data-speed': { value: 100, isRequired: true }, + 'data-drag-speed': { value: 120, isRequired: true }, + 'data-autoplay': { isRequired: true }, }; const PROPERTIES_COLORS = { - NAME: "#7B9200", - URL: "#2D88CB" + NAME: '#7B9200', + URL: '#2D88CB', }; -const URL_PROPERTIES = ["data-folder", "class"]; +const URL_PROPERTIES = ['data-folder', 'class']; export { NIKE_PLUGIN, @@ -49,5 +49,5 @@ export { PLUGIN_PROPS, PROPERTIES_COLORS, URL_PROPERTIES, - GURKHA_SUV_HOTSPOTS_CONFIG -} \ No newline at end of file + GURKHA_SUV_HOTSPOTS_CONFIG, +}; diff --git a/examples/src/controllers.css b/examples/src/controllers.css index 9f77a2f..f3010f6 100644 --- a/examples/src/controllers.css +++ b/examples/src/controllers.css @@ -103,4 +103,4 @@ .cloudimage-360 .cloudimage-360-bottom.not-active { opacity: 0.4; cursor: default; -} \ No newline at end of file +} diff --git a/examples/src/hotspots-config.constant.js b/examples/src/hotspots-config.constant.js index 4311de1..db5c2a1 100644 --- a/examples/src/hotspots-config.constant.js +++ b/examples/src/hotspots-config.constant.js @@ -4,11 +4,12 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ images: [ { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', - alt: 'air snorkel' - } + alt: 'air snorkel', + }, ], title: 'Air Intake Snorkel', - description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', + description: + 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', moreDetailsUrl: 'https://forcegurkha.co.in', }, popupProps: { popupSelector: 'air-intake-popup' }, @@ -37,10 +38,10 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ variant: { title: 'New Gurkha Technical Specifications', url: 'https://www.forcegurkha.co.in/specifications/', - newTab: true + newTab: true, }, - initialDimensions: [ 1170, 662 ], - popupProps: { popupSelector: 'popup-link'}, + initialDimensions: [1170, 662], + popupProps: { popupSelector: 'popup-link' }, positions: [ { imageIndex: 73, xCoord: 355, yCoord: 474 }, { imageIndex: 74, xCoord: 355 }, @@ -62,23 +63,25 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ images: [ { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%281%29.jpg', - alt: 'car accessory' + alt: 'car accessory', }, { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%282%29.jpg', - alt: 'spoiler' + alt: 'spoiler', }, { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent.jpg', - alt: 'car accessory' - } + alt: 'car accessory', + }, ], - description: 'The All New Force Gurkha ensures best-in-class safety for passengers and security for the vehicle with its full metal body structure.', + description: + 'The All New Force Gurkha ensures best-in-class safety for passengers and security for the vehicle with its full metal body structure.', moreDetailsTitle: 'Download accessories brochure', - moreDetailsUrl: 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf' + moreDetailsUrl: + 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf', }, popupProps: { popupSelector: 'accessories-popup' }, - initialDimensions: [ 1170, 662 ], + initialDimensions: [1170, 662], positions: [ { imageIndex: 11, xCoord: 683, yCoord: 151 }, { imageIndex: 12, xCoord: 683 }, @@ -93,15 +96,15 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ { imageIndex: 21, xCoord: 656, yCoord: 168 }, { imageIndex: 22, xCoord: 650, yCoord: 171 }, { imageIndex: 23, xCoord: 643, yCoord: 176 }, - { imageIndex: 24, xCoord:635, yCoord: 178 }, - { imageIndex: 25, xCoord:628, yCoord: 181 }, - { imageIndex: 26, xCoord:621 }, - { imageIndex: 27, xCoord:610 }, - { imageIndex: 28, xCoord:598 }, - { imageIndex: 29, xCoord:588 }, - { imageIndex: 30, xCoord:578 }, - { imageIndex: 31, xCoord:570, yCoord: 176 }, - { imageIndex: 32, xCoord:560, yCoord: 173 }, + { imageIndex: 24, xCoord: 635, yCoord: 178 }, + { imageIndex: 25, xCoord: 628, yCoord: 181 }, + { imageIndex: 26, xCoord: 621 }, + { imageIndex: 27, xCoord: 610 }, + { imageIndex: 28, xCoord: 598 }, + { imageIndex: 29, xCoord: 588 }, + { imageIndex: 30, xCoord: 578 }, + { imageIndex: 31, xCoord: 570, yCoord: 176 }, + { imageIndex: 32, xCoord: 560, yCoord: 173 }, ], }, { @@ -109,21 +112,23 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ images: [ { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-5.png', - alt: 'car top' + alt: 'car top', }, { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/ALL_AROUND_VISIBILITY_UPDATED.png', - alt: 'car inside' + alt: 'car inside', }, { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-2.png', - alt: 'transmission' - } + alt: 'transmission', + }, ], - description:'All four captain seats with ample head room, leg room and shoulder room.Easy ingress and egress from the rear door into the widest gangway in the category that makes space for all your luggage', - moreDetailsUrl: 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf', + description: + 'All four captain seats with ample head room, leg room and shoulder room.Easy ingress and egress from the rear door into the widest gangway in the category that makes space for all your luggage', + moreDetailsUrl: + 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf', }, - initialDimensions: [ 1170, 662 ], + initialDimensions: [1170, 662], popupProps: { popupSelector: 'car-cabin' }, positions: [ { imageIndex: 6, xCoord: 607, yCoord: 246 }, @@ -133,8 +138,6 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ { imageIndex: 10, xCoord: 642 }, ], }, -] +]; -export { - GURKHA_SUV_HOTSPOTS_CONFIG -} \ No newline at end of file +export { GURKHA_SUV_HOTSPOTS_CONFIG }; diff --git a/examples/src/index.js b/examples/src/index.js index aa4be33..9e14dc9 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -9,53 +9,55 @@ import { PROPERTIES_COLORS, URL_PROPERTIES, GURKHA_SUV_HOTSPOTS_CONFIG, -} from "./constants"; - -const spinDirections = document.getElementById("spin-directions"); -const imagesY = document.getElementById("images-y"); -const responsive = document.getElementById("responsive-checkbox"); -const boxShadow = document.getElementById("box-shadow"); -const imageXSelector = document.getElementById("x-images-selector"); -const nikeXSelector = document.getElementById("nike-x-images"); -const copyText = document.getElementById("copy-text"); -const codeBlock = document.getElementById("code-block"); -const codeWrapper = document.getElementById("code-wrapper"); -const controlOption = document.getElementById("control-option"); -const autoPlayBehavior = document.getElementById("auto-play-behavior"); -let container = document.getElementById("demo-generator"); - -const copyButton = document.querySelector(".copy-button"); -const outputCode = document.querySelector(".output-code"); -const pointerZoomCheckbox = document.querySelector("[data-checkbox]"); - -const accordions = document.querySelectorAll("[data-accordion]"); -const pluginCheckboxOptions = document.querySelectorAll(".plugin-option"); -const pluginInputs = document.querySelectorAll("[plugin-input]"); -let controlButtons = Array.from(document.querySelectorAll("control-buttons")); +} from './constants'; + +const spinDirections = document.getElementById('spin-directions'); +const imagesY = document.getElementById('images-y'); +const responsive = document.getElementById('responsive-checkbox'); +const boxShadow = document.getElementById('box-shadow'); +const imageXSelector = document.getElementById('x-images-selector'); +const nikeXSelector = document.getElementById('nike-x-images'); +const copyText = document.getElementById('copy-text'); +const codeBlock = document.getElementById('code-block'); +const codeWrapper = document.getElementById('code-wrapper'); +const controlOption = document.getElementById('control-option'); +const autoPlayBehavior = document.getElementById('auto-play-behavior'); +let container = document.getElementById('demo-generator'); + +const copyButton = document.querySelector('.copy-button'); +const outputCode = document.querySelector('.output-code'); +const pointerZoomCheckbox = document.querySelector('[data-checkbox]'); + +const accordions = document.querySelectorAll('[data-accordion]'); +const pluginCheckboxOptions = document.querySelectorAll('.plugin-option'); +const pluginInputs = document.querySelectorAll('[plugin-input]'); +let controlButtons = Array.from(document.querySelectorAll('control-buttons')); let isSpinY = false; const CLOUDIMAGE_360 = window.CI360; function updateContainer() { - container = document.getElementById("demo-generator"); + container = document.getElementById('demo-generator'); } function updateControlButtons() { - controlButtons = Array.from(document.querySelectorAll(".control-buttons")); + controlButtons = Array.from(document.querySelectorAll('.control-buttons')); } function toggleControlButtons() { - const yButtonsIds = ["control-up-button", "control-down-button"]; + const yButtonsIds = ['control-up-button', 'control-down-button']; controlButtons.forEach((button) => { if (isSpinY) { - button.style.visibility = controlOption.checked ? "visible" : "hidden"; + button.style.visibility = controlOption.checked ? 'visible' : 'hidden'; } else { - button.style.visibility = "hidden"; + button.style.visibility = 'hidden'; button.style.visibility = - controlOption.checked && !yButtonsIds.includes(button.id) ? "visible" : "hidden"; + controlOption.checked && !yButtonsIds.includes(button.id) + ? 'visible' + : 'hidden'; } }); } @@ -64,21 +66,21 @@ function changeSpinDirectionHandler(event) { const spinDirection = event.target.value; const earbudsPlugin = Object.entries(EARBUDS_PLUGIN); const nikePlugin = Object.entries(NIKE_PLUGIN); - const isSpinYDirection = spinDirection === "Y"; + const isSpinYDirection = spinDirection === 'Y'; nikePlugin.forEach(([key, value]) => { updatePluginValues(key, { value }, null, !isSpinYDirection); - isSpinYDirection ? - container.setAttribute(key, value) : - container.removeAttribute(key); + isSpinYDirection + ? container.setAttribute(key, value) + : container.removeAttribute(key); }); if (isSpinYDirection) { isSpinY = true; - imageXSelector.style.display = "none"; - nikeXSelector.style.display = "block"; - imagesY.style.display = "flex"; + imageXSelector.style.display = 'none'; + nikeXSelector.style.display = 'block'; + imagesY.style.display = 'flex'; } else { isSpinY = false; @@ -87,14 +89,14 @@ function changeSpinDirectionHandler(event) { updatePluginValues(key, { value }); }); - imageXSelector.style.display = "block"; - nikeXSelector.style.display = "none"; - imagesY.style.display = "none"; + imageXSelector.style.display = 'block'; + nikeXSelector.style.display = 'none'; + imagesY.style.display = 'none'; } - autoPlayBehavior.disabled = !autoPlayBehavior.disabled + autoPlayBehavior.disabled = !autoPlayBehavior.disabled; - CLOUDIMAGE_360.update("demo-generator"); + CLOUDIMAGE_360.update('demo-generator'); updateContainer(); updateControlButtons(); toggleControlButtons(); @@ -102,103 +104,102 @@ function changeSpinDirectionHandler(event) { function changePointerZoomHandler(event) { const ispluginCheckboxChecked = event.target.checked; - const nextCheckbox = event.target.getAttribute("data-checkbox"); + const nextCheckbox = event.target.getAttribute('data-checkbox'); const pluginInput = document.querySelector(`[data-input=${nextCheckbox}]`); - const pluginAttribute = event.target.getAttribute("data-plugin-value"); - const value = pluginInput[pluginInput.type === "checkbox" ? "checked" : "value"]; + const pluginAttribute = event.target.getAttribute('data-plugin-value'); + const value = + pluginInput[pluginInput.type === 'checkbox' ? 'checked' : 'value']; if (ispluginCheckboxChecked) { container.setAttribute(pluginAttribute, value); - } else { + } else { container.removeAttribute(pluginAttribute); } - pluginInput.disabled=!pluginInput.disabled + pluginInput.disabled = !pluginInput.disabled; - CLOUDIMAGE_360.update("demo-generator"); + CLOUDIMAGE_360.update('demo-generator'); updateContainer(); - updatePluginValues( - pluginAttribute, - { value: value }, - event.target.type, - ); + updatePluginValues(pluginAttribute, { value: value }, event.target.type); } function changeResponsiveOptionHandler(event) { - const allPluginInput = document.querySelectorAll("[responsive-option]"); + const allPluginInput = document.querySelectorAll('[responsive-option]'); const ispluginCheckboxChecked = event.target.checked; allPluginInput.forEach((input) => { - const pluginAttribute = input.getAttribute("data-plugin-value"); + const pluginAttribute = input.getAttribute('data-plugin-value'); if (ispluginCheckboxChecked) { container.setAttribute(pluginAttribute, input.value); updatePluginValues( pluginAttribute, { value: input.value }, - event.target.type, + event.target.type ); } else { container.removeAttribute(pluginAttribute); - updatePluginValues(pluginAttribute, { value: "" }, event.target.type); + updatePluginValues(pluginAttribute, { value: '' }, event.target.type); } - input.disabled=!input.disabled + input.disabled = !input.disabled; }); - CLOUDIMAGE_360.update("demo-generator", true); + CLOUDIMAGE_360.update('demo-generator', true); updateContainer(); } function changeBoxShadowOptionHandler(event) { - const shadowBoxInput = document.querySelector("[box-shadow-option]"); + const shadowBoxInput = document.querySelector('[box-shadow-option]'); const ispluginCheckboxChecked = event.target.checked; - const pluginAttribute = shadowBoxInput.getAttribute("data-plugin-value"); + const pluginAttribute = shadowBoxInput.getAttribute('data-plugin-value'); - if (ispluginCheckboxChecked) { - container.setAttribute(pluginAttribute, shadowBoxInput.value); + if (ispluginCheckboxChecked) { + container.setAttribute(pluginAttribute, shadowBoxInput.value); - updatePluginValues( - pluginAttribute, - { value: shadowBoxInput.value }, - event.target.type, - ); - } else { - container.removeAttribute(pluginAttribute); - updatePluginValues(pluginAttribute, { value: "" }, event.target.type); - } + updatePluginValues( + pluginAttribute, + { value: shadowBoxInput.value }, + event.target.type + ); + } else { + container.removeAttribute(pluginAttribute); + updatePluginValues(pluginAttribute, { value: '' }, event.target.type); + } - shadowBoxInput.disabled=!shadowBoxInput.disabled + shadowBoxInput.disabled = !shadowBoxInput.disabled; - CLOUDIMAGE_360.update("demo-generator", true); + CLOUDIMAGE_360.update('demo-generator', true); updateContainer(); } function showAccordionContent(event) { - const contentID = event.target.getAttribute("data-accordion"); - const accordionContent = ( - document.querySelector(`[data-accordion-content="${contentID}"]`) + const contentID = event.target.getAttribute('data-accordion'); + const accordionContent = document.querySelector( + `[data-accordion-content="${contentID}"]` ); - accordionContent.style.display = !accordionContent.offsetWidth ? "block": "none"; + accordionContent.style.display = !accordionContent.offsetWidth + ? 'block' + : 'none'; } function copyCodeHandler() { navigator.clipboard.writeText(outputCode.innerText); - copyText.innerHTML = "Copied"; + copyText.innerHTML = 'Copied'; setTimeout(() => { - copyText.innerHTML = "Copy"; + copyText.innerHTML = 'Copy'; }, 500); } function pluginCheckboxOptionsHandler(event) { const ispluginCheckboxChecked = event.target.checked; - const pluginAttribute = event.target.getAttribute("data-plugin-value"); - const defaultValue = event.target.value - const value = defaultValue === "on" ? "" : defaultValue + const pluginAttribute = event.target.getAttribute('data-plugin-value'); + const defaultValue = event.target.value; + const value = defaultValue === 'on' ? '' : defaultValue; if (ispluginCheckboxChecked) { container.setAttribute(pluginAttribute, value); @@ -206,14 +207,14 @@ function pluginCheckboxOptionsHandler(event) { container.removeAttribute(pluginAttribute); } - CLOUDIMAGE_360.update("demo-generator"); + CLOUDIMAGE_360.update('demo-generator'); updateContainer(); updatePluginValues(pluginAttribute, { value: value }, event.target.type); } function changePluginInputsHandler(event) { const value = event.target.value; - const pluginAttribute = event.target.getAttribute("data-plugin-value"); + const pluginAttribute = event.target.getAttribute('data-plugin-value'); if (value) { container.setAttribute(pluginAttribute, value); @@ -221,18 +222,18 @@ function changePluginInputsHandler(event) { container.removeAttribute(pluginAttribute); } - CLOUDIMAGE_360.update("demo-generator"); + CLOUDIMAGE_360.update('demo-generator'); updateContainer(); updatePluginValues(pluginAttribute, { value }, event.target.type); } function updatePluginValues(key, properties = {}, inputType, removeProp) { - const isCheckbox = inputType === "checkbox"; + const isCheckbox = inputType === 'checkbox'; const isEmptyInput = !isCheckbox && !properties.value; if ( - Object.keys(PLUGIN_PROPS).includes(key) - && (isCheckbox || isEmptyInput || removeProp) + Object.keys(PLUGIN_PROPS).includes(key) && + (isCheckbox || isEmptyInput || removeProp) ) { delete PLUGIN_PROPS[key]; } else if (key) { @@ -244,12 +245,12 @@ function updatePluginValues(key, properties = {}, inputType, removeProp) { } function updateCodeBlock() { - codeBlock.innerText = ""; + codeBlock.innerText = ''; Object.entries(PLUGIN_PROPS).forEach(([key, properties]) => { - const propertyWrapper = document.createElement("div"); - const propertyName = document.createElement("span"); - const propertyValue = document.createElement("span"); + const propertyWrapper = document.createElement('div'); + const propertyName = document.createElement('span'); + const propertyValue = document.createElement('span'); propertyName.innerText = key; @@ -264,7 +265,7 @@ function updateCodeBlock() { if (properties?.value) { propertyValue.innerText = `"${properties?.value}"`; - propertyWrapper.innerHTML += "="; + propertyWrapper.innerHTML += '='; propertyWrapper.appendChild(propertyValue); } @@ -274,20 +275,20 @@ function updateCodeBlock() { } updatePluginValues(); -window.CI360.addHotspots("gurkha-suv", GURKHA_SUV_HOTSPOTS_CONFIG); - -spinDirections.addEventListener("change", changeSpinDirectionHandler); -copyButton.addEventListener("click", copyCodeHandler); -controlOption.addEventListener("change", toggleControlButtons); -responsive.addEventListener("change", changeResponsiveOptionHandler); -boxShadow.addEventListener("change", changeBoxShadowOptionHandler); -pointerZoomCheckbox.addEventListener("change", changePointerZoomHandler); +window.CI360.addHotspots('gurkha-suv', GURKHA_SUV_HOTSPOTS_CONFIG); + +spinDirections.addEventListener('change', changeSpinDirectionHandler); +copyButton.addEventListener('click', copyCodeHandler); +controlOption.addEventListener('change', toggleControlButtons); +responsive.addEventListener('change', changeResponsiveOptionHandler); +boxShadow.addEventListener('change', changeBoxShadowOptionHandler); +pointerZoomCheckbox.addEventListener('change', changePointerZoomHandler); accordions.forEach((accordion) => { - accordion.addEventListener("click", showAccordionContent) + accordion.addEventListener('click', showAccordionContent); }); pluginCheckboxOptions.forEach((option) => { - option.addEventListener("change", pluginCheckboxOptionsHandler) + option.addEventListener('change', pluginCheckboxOptionsHandler); }); pluginInputs.forEach((input) => { - input.addEventListener("change", changePluginInputsHandler) -}); \ No newline at end of file + input.addEventListener('change', changePluginInputsHandler); +}); diff --git a/examples/src/mouse-direction.js b/examples/src/mouse-direction.js new file mode 100644 index 0000000..6f66d5b --- /dev/null +++ b/examples/src/mouse-direction.js @@ -0,0 +1,42 @@ +import throttle from 'lodash.throttle'; + +export class MouseDirection { + constructor(canvas, threshold = 5, isClicked) { + this.canvas = canvas; + this.previousX = 0; + this.previousY = 0; + this.threshold = threshold; + this.direction = ''; + + this.canvas.addEventListener('mousemove', throttle(this.handleMouseMove.bind(this), 1000)); + } + + handleMouseMove(event) { + const rect = this.canvas.getBoundingClientRect(); + const mouseX = event.clientX - rect.left; // Mouse X relative to canvas + const mouseY = event.clientY - rect.top; // Mouse Y relative to canvas + + const deltaX = mouseX - this.previousX; + const deltaY = mouseY - this.previousY; + + let direction = ''; + + // Determine dominant axis of movement + if (Math.abs(deltaX) > Math.abs(deltaY)) { + // Horizontal movement is dominant + direction = deltaX > 0 ? 'right' : 'left'; + } else { + // Vertical movement is dominant + direction = deltaY > 0 ? 'down' : 'up'; + } + + // Log the direction if it has changed significantly + if (direction) { + this.direction = direction; + } + + // Update the previous mouse position for the next calculation + this.previousX = mouseX; + this.previousY = mouseY; + } +} diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css index 27d35aa..6b676a9 100644 --- a/examples/src/styles/main.css +++ b/examples/src/styles/main.css @@ -5,7 +5,7 @@ } body { - font-family: "Inter"; + font-family: 'Inter'; overflow-x: hidden; } @@ -166,14 +166,14 @@ body { color: #fff7f4; } -.cloudimage-360-modal-description{ +.cloudimage-360-modal-description { font-size: 11px; } .popup-link a { font-size: 11px; line-height: 16px; - color: #0C6DC7; + color: #0c6dc7; font-weight: 700; } @@ -472,7 +472,7 @@ body { } .demo-usage .plugin-selector { - background: url("https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/input-arrow.svg"); + background: url('https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/input-arrow.svg'); background-repeat: no-repeat; background-position-x: calc(100% - 20px); background-position-y: 17.12px; @@ -503,7 +503,9 @@ body { width: 8px; } -.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar-thumb { +.demo-usage-wrapper + .demo-usage-content + .customize-wrapper::-webkit-scrollbar-thumb { background: #dbdddf; } @@ -609,7 +611,7 @@ body { /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { - content: ""; + content: ''; position: absolute; display: none; } @@ -625,7 +627,7 @@ body { top: 4px; width: 19px; height: 13px; - background-image: url("https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/check-icon.svg"); + background-image: url('https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/check-icon.svg'); background-repeat: no-repeat; } @@ -901,17 +903,13 @@ body { color: #4d5c74; } -.cloudimage-360-loader { - opacity: 0; -} - .transition-outline-button { transition: all 300ms ease-in-out; } .transition-outline-button:hover { background-color: #3daba4; - color: #FFF !important; + color: #fff !important; } .transition-filled-button { @@ -945,7 +943,9 @@ body { width: 8px; } - .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar-thumb { + .demo-usage + .demo-usage-content + .plugin-options-wrapper::-webkit-scrollbar-thumb { background: #dbdddf; } @@ -1018,7 +1018,7 @@ body { } } -@media(max-width: 768px){ +@media (max-width: 768px) { .content-wrapper .header { display: flex; padding: 23.5px 16px 0 16px; @@ -1175,7 +1175,7 @@ body { } .gallery-section { - padding: 0 16px; + padding: 0 16px; } .demo-usage { diff --git a/package.json b/package.json index c5963b1..49f1d63 100644 --- a/package.json +++ b/package.json @@ -36,13 +36,16 @@ "dependencies": { "@babel/runtime": "^7.17.0", "@popperjs/core": "^2.11.2", - "core-js": "^3.0.0" + "core-js": "^3.0.0", + "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1" }, "devDependencies": { "@babel/cli": "^7.16.7", "@babel/core": "^7.16.7", "@babel/plugin-transform-runtime": "^7.16.5", "@babel/preset-env": "^7.16.5", + "@eslint/js": "^9.12.0", "babel-loader": "^8.2.3", "babel-plugin-array-includes": "^2.0.3", "babel-preset-env": "^1.7.0", @@ -51,14 +54,17 @@ "babel-preset-stage-0": "^6.24.1", "css-loader": "^2.1.1", "dotenv": "^16.0.3", + "eslint": "^9.12.0", "form-data": "^4.0.0", "fs": "^0.0.1-security", "gh-pages": "^2.0.1", + "globals": "^15.11.0", "highlight.js": "^10.4.1", "html-webpack-plugin": "^5.5.1", "isomorphic-fetch": "^3.0.0", "mini-css-extract-plugin": "^0.9.0", "mobile-detect": "^1.4.3", + "prettier": "3.3.3", "style-loader": "^3.3.2", "webpack": "^5.79.0", "webpack-cli": "^5.0.1", diff --git a/src/ci360.service.js b/src/ci360.service.js index 2b82cee..d2bf3bc 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -1,19 +1,12 @@ -import { - get360ViewProps, - setView360Icon, -} from './ci360.utils'; -import { - ORIENTATIONS, - AUTOPLAY_BEHAVIOR, -} from './constants/'; +import throttle from 'lodash.throttle'; + +import { get360ViewProps } from './ci360.utils'; import './static/css/style.css'; import './static/css/hotspots.css'; import { - generateImagesPath, + generateCdnPath, preloadImages, - preloadOriginalImages, - create360ViewIcon, - createCloseFullscreenIcon, + createCloseIcon, createFullscreenIcon, createMagnifierIcon, createLoader, @@ -22,423 +15,174 @@ import { createCanvas, create360ViewCircleIcon, createFullscreenModal, - contain, - getCurrentOriginalImage, magnify, - createBoxShadow, - getSpeedFactor, isCompletedOneCycle, getMovingDirection, - applyStylesToContainer, initControls, - addClass, - removeClass, - getItemSkipped, loop, - generateZoomInSteps, - generateZoomOutSteps, - updateHotspots, - createHotspots, - generateHotspotsConfigs, - isMouseOnHotspot, - hideHotspotsIcons, - isPropsChangeRequireReload, - getImageAspectRatio, - removeChildFromParent, initLazyload, + createInitialIcon, + removeElementFromContainer, + generateHighPreviewCdnUrl, + loadImage, + delay, + shouldSwitchSpinDirection, + switchSpinDirection, } from './utils'; -import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; +import { ORIENTATIONS, THROTTLE_TIME } from './utils/constants'; +import { getDefaultSpinDirection } from './utils/spin/get-default-spin-direction'; +import { isSpinKeysPressed } from './utils/spin/is-spin-keys-pressed'; class CI360Viewer { - constructor(container, fullscreen, hotspotsConfigs) { + constructor(container, fullscreen) { this.container = container; - this.movementStart = { x: 0, y: 0 }; - this.isStartSpin = false; - this.movingDirection = ORIENTATIONS.CENTER; this.isClicked = false; - this.loadedImagesX = 0; - this.loadedImagesY = 0; - this.imagesLoaded = false; - this.reversed = false; this.fullscreenView = !!fullscreen; this.imagesX = []; this.imagesY = []; - this.originalImagesX = []; - this.originalImagesY = []; - this.resizedImagesX = []; - this.resizedImagesY = []; this.devicePixelRatio = Math.round(window.devicePixelRatio || 1); - this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints); this.id = container.id; - this.hotspotsConfigs = hotspotsConfigs && generateHotspotsConfigs(hotspotsConfigs); - this.isMagnifyOpen = false; - this.isDragged = false; - this.startPointerZoom = false; - this.zoomIntensity = 0; - this.mouseTracked = false; - this.intialPositions = { x: 0, y: 0 }; - this.pointerCurrentPosition = { x: 0, y: 0 }; - this.isStartedLoadOriginalImages = false; - this.init(container); - } - - isReady() { - const totalAmount = this.amountX + this.amountY; + this.movementStart = { x: 0, y: 0 }; + this.draggingDirection = null; + this.isReady = false; - return (this.imagesX.length + this.imagesY.length) === totalAmount; + this.init(container); } mouseDown(event) { - if (!this.imagesLoaded) return; + if (!this.isReady) return; - const isMouseOnHotspotElement = isMouseOnHotspot(); const { pageX, pageY } = event; - this.hideInitialIcons(); - if (this.autoplay || this.loopTimeoutId) { - this.stop(); + this.stopAutoplay(); this.autoplay = false; - this.isZoomReady = true; } - this.intialPositions = { x: pageX, y: pageY }; + this.hideAllIcons(); this.movementStart = { x: pageX, y: pageY }; this.isClicked = true; - this.isDragged = false; - - if (this.hotspotsConfigs) { - togglePopupEvents(this.hotspotsConfigs, event, true); - } - - if (isMouseOnHotspotElement) { - this.isClicked = false; - } - - if (this.hotspotsConfigs) { - updateHotspots( - this.container, - this.hotspotsConfigs, - this.activeImageX, - this.activeImageY, - this.movingDirection - ); - } } mouseUp() { - if (!this.imagesLoaded || !this.isClicked) return; + if (!this.isReady) return; + this.showAllIcons(); this.movementStart = { x: 0, y: 0 }; - this.isStartSpin = false; this.isClicked = false; + this.innerBox.style.cursor = 'grab'; + } - if (this.bottomCircle && !this.mouseTracked) { - this.show360ViewCircleIcon(); - } + drag(pageX, pageY) { + if (!this.isReady || !this.isClicked) return; - if (this.hotspotsConfigs) { - togglePopupEvents(this.hotspotsConfigs); - } + const deltaX = pageX - this.movementStart.x; + const deltaY = pageY - this.movementStart.y; - if (this.pointerZoom && !this.fullscreenView) { - setTimeout(() => { - this.isZoomReady = true; - }, 50); + this.draggingDirection = getMovingDirection(deltaX, deltaY, this.allowSpinY) || this.draggingDirection; - if (this.mouseTracked) { - this.container.style.cursor = 'zoom-out'; - } else { - this.container.style.cursor = 'zoom-in'; - } - } else { - this.container.style.cursor = 'grab'; - } - } - - mouseClick(event) { - if (!this.pointerZoom || this.fullscreenView) return; + const container = this.fullscreenView ? document.body : this.container; + const dragFactor = this.dragSpeed / 50; + const speedFactorX = dragFactor * (this.amountX / container.offsetWidth); + const speedFactorY = dragFactor * (this.amountY / container.offsetHeight); - this.setCursorPosition(event); - this.hideInitialIcons(); + const itemsSkippedX = Math.round(deltaX * speedFactorX); + const itemsSkippedY = Math.round(deltaY * speedFactorY); - if (!this.isStartedLoadOriginalImages && !this.isDragged && this.isZoomReady) { - this.prepareOriginalImages(event); + if (itemsSkippedX !== 0 || (this.allowSpinY && itemsSkippedY !== 0)) { + this.onMoveHandler(this.draggingDirection, itemsSkippedX, itemsSkippedY); + this.movementStart = { x: pageX, y: pageY }; } - - if (this.isAllOriginalImagesLoaded && !this.isDragged && this.isZoomReady) { - this.togglePointerZoom(event); - }; } mouseMove(event) { - if (!this.imagesLoaded) return; - - const { pageX, pageY } = event; - - if (this.mouseTracked) { - this.setCursorPosition(event); - - if (!this.isClicked) { - this.update(); - } - } - - if (this.isClicked) { - const nextPositions = { x: pageX, y: pageY }; - - this.container.style.cursor = 'grabbing'; - this.isDragged = true; - this.movingDirection = getMovingDirection( - this.isStartSpin, - this.allowSpinY, - this.intialPositions, - nextPositions, - this.movingDirection - ); - - this.onMoveHandler(event); - } + this.drag(event.pageX, event.pageY); } - mouseLeave() { - if (!this.imagesLoaded) return; - - if (this.pointerZoom && this.mouseTracked) { - this.togglePointerZoom(); - } - - if (this.isMagnifyOpen) { - this.closeMagnifier(); - } + mouseClick() { + // !TODO: rework } - togglePointerZoom() { - if (this.autoplay || this.loopTimeoutId) { - this.stop(); - this.autoplay = false; - } - - if (this.mouseTracked) { - const zoomSteps = generateZoomOutSteps(this.pointerZoom); - this.container.style.cursor = 'zoom-in'; - - zoomSteps.forEach((step, index) => { - setTimeout(() => { - this.zoomIntensity = step; - this.update(); - - const isReachedIntialScale = index === (zoomSteps.length - 1); - - if (isReachedIntialScale) { - this.mouseTracked = false; - this.update(); - }; - }, (this.pointerZoom - step) * 200); - }) - } else { - if (this.bottomCircle) this.hide360ViewCircleIcon(); - - const zoomSteps = generateZoomInSteps(this.pointerZoom); - - if (this.hotspotsConfigs) { - hideHotspotsIcons(); - } - - zoomSteps.forEach((step) => { - setTimeout(() => { - this.zoomIntensity = step; - this.update(); - }, step * 200); - }) - - this.mouseTracked = true; - this.container.style.cursor = 'zoom-out'; - } - } - - onOriginalImageLoad(orientation, event, image, index) { - if (orientation === ORIENTATIONS.Y) { - this.originalImagesY[index] = image; - } else { - this.originalImagesX[index] = image; - } - - const loadedOriginalXImages = this.originalImagesX - .filter(image => image); - const loadedOriginalYImages = this.originalImagesY - .filter(image => image); - - const totalAmount = this.amountX + this.amountY; - const totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length; - - const isAllImagesLoaded = ( - loadedOriginalXImages.length + loadedOriginalYImages.length === this.amountX + this.amountY - ); - - const percentage = Math.round(totalLoadedImages / totalAmount * 100); - - this.updatePercentageInLoader(percentage); - - if (isAllImagesLoaded) { - this.removeLoader(); - this.togglePointerZoom(event); - - this.mouseTracked = true; - this.isAllOriginalImagesLoaded = true; - } - } + touchOutside(event) { + if (!this.glass) return; - prepareOriginalImages(event) { - const srcX = generateImagesPath(this.srcXConfig); + const isOutside = !this.canvas.contains(event.target); - this.isStartedLoadOriginalImages = true; - this.loader = createLoader(this.innerBox); - this.container.style.cursor = 'wait'; - - preloadOriginalImages( - this.srcXConfig, - srcX, - this.onOriginalImageLoad.bind(this, ORIENTATIONS.X, event) - ); - - if (this.allowSpinY) { - const srcY = generateImagesPath(this.srcYConfig); - - preloadOriginalImages( - this.srcYConfig, - srcY, - this.onOriginalImageLoad.bind(this, ORIENTATIONS.Y, event) - ); + if (isOutside) { + this.removeGlass(); } } touchStart(event) { - if (!this.imagesLoaded) return; - - const isMouseOnHotspotElement = isMouseOnHotspot(); + if (!this.isReady || event.touches.length > 1 || this.glass) return; - this.hideInitialIcons(); + const { pageX, pageY } = event.touches[0]; if (this.autoplay || this.loopTimeoutId) { - this.stop(); + this.stopAutoplay(); this.autoplay = false; } - this.intialPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY }; - this.movementStart = { x: event.touches[0].clientX, y: event.touches[0].clientY }; + this.hideAllIcons(); + this.movementStart = { x: pageX, y: pageY }; this.isClicked = true; - - if (isMouseOnHotspotElement) { - this.isClicked = false; - } } touchEnd() { - if (!this.imagesLoaded) return; - - if (this.bottomCircle) this.show360ViewCircleIcon(); + if (!this.isReady) return; + this.showAllIcons(); this.movementStart = { x: 0, y: 0 }; - this.isStartSpin = false; this.isClicked = false; } touchMove(event) { - if (!this.isClicked || !this.imagesLoaded) return; + if (!this.isReady || !this.isClicked || this.glass) return; + const { pageX, pageY } = event.touches[0]; + event.preventDefault(); - if (event.cancelable && this.allowSpinY) { - event.preventDefault(); - } - - const nextPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY }; - - this.movingDirection = getMovingDirection( - this.isStartSpin, - this.allowSpinY, - this.intialPositions, - nextPositions, - this.movingDirection - ); - - this.onMoveHandler(event); - } - - keyDownGeneral(event) { - if (!this.imagesLoaded) return; - - if (this.glass) { - this.closeMagnifier(); - } - - if (event.keyCode === 27) { //ESC - if (this.mouseTracked) { - this.togglePointerZoom(); - } - } - } - - hideInitialIcons() { - if (this.glass) { - this.closeMagnifier(); - } - - if (this.view360Icon) { - this.remove360ViewIcon(); - } - } - - setCursorPosition(event) { - this.mousePositions = { - x: event.clientX, - y: event.clientY - }; - } - - getCursorPositionInCanvas() { - const canvasRect = this.canvas.getBoundingClientRect(); - - this.pointerCurrentPosition = { - x: this.mousePositions.x - canvasRect.left, - y: this.mousePositions.y - canvasRect.top - }; - - return this.pointerCurrentPosition; + this.drag(pageX, pageY); } keyDown(event) { - if (!this.imagesLoaded) return; - - if (this.glass) { - this.closeMagnifier(); - } - - if (event.keyCode === 37) { // left - this.keysReverse ? this.left() : this.right(); - - this.onSpin(); - } - - if (event.keyCode === 39) { // right - this.keysReverse ? this.right() : this.left(); - - this.onSpin(); + if (!this.isReady) return; + + const { keyCode } = event; + const isReverse = this.keysReverse; + + if (isSpinKeysPressed(keyCode, this.allowSpinY)) { + this.hideAllIcons(); + } + + switch (keyCode) { + case 37: // left arrow + isReverse ? this.moveLeft() : this.moveRight(); + break; + case 39: // right arrow + isReverse ? this.moveRight() : this.moveLeft(); + break; + case 38: // up arrow + if (this.allowSpinY) { + event.preventDefault(); + isReverse ? this.moveTop() : this.moveBottom(); + } + break; + case 40: // down arrow + if (this.allowSpinY) { + event.preventDefault(); + isReverse ? this.moveBottom() : this.moveTop(); + } + break; + default: + break; } + } - if (this.allowSpinY) { - event.preventDefault(); - - if (event.keyCode === 38) { // up - this.keysReverse ? this.top() : this.bottom(); - - this.onSpin(); - } - - if (event.keyCode === 40) { // down - this.keysReverse ? this.bottom() : this.top(); + keyUp(event) { + const { keyCode } = event; - this.onSpin(); - } + if (isSpinKeysPressed(keyCode, this.allowSpinY)) { + this.showAllIcons(); } } @@ -447,624 +191,266 @@ class CI360Viewer { this.hide360ViewCircleIcon(); } - if (this.view360Icon) { + if (this.initialIcon) { this.remove360ViewIcon(); } if (this.autoplay || this.loopTimeoutId) { - this.stop(); + this.stopAutoplay(); this.autoplay = false; } } - keyUp(event) { - if (!this.imagesLoaded) return; - - if ([37, 39].includes(event.keyCode)) { - this.onFinishSpin(); - } - } - onFinishSpin() { if (this.bottomCircle) this.show360ViewCircleIcon(); } - moveActiveIndexUp(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageX + itemsSkipped >= this.amountX; - - if (isReachedTheEdge) { - this.activeImageX = this.amountX; - - if (isReverse ? this.leftElem : this.rightElem) { - addClass(isReverse ? this.leftElem : this.rightElem, 'not-active'); - } - } else { - this.activeImageX += itemsSkipped; - - if (this.rightElem) removeClass(this.rightElem, 'not-active'); - - if (this.leftElem) removeClass(this.leftElem, 'not-active'); - } - } else { - this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX; - - if (this.activeImageX === this.amountX && this.allowSpinY) this.spinY = true; - } + moveActiveXIndexUp(itemsSkipped) { + this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX; } - moveActiveIndexDown(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageX - itemsSkipped <= 1; - - if (isReachedTheEdge) { - this.activeImageX = 1; - - if (isReverse ? this.rightElem : this.leftElem) { - addClass(isReverse ? this.rightElem : this.leftElem, 'not-active'); - } - } else { - this.activeImageX -= itemsSkipped; - - if (this.leftElem) removeClass(this.leftElem, 'not-active'); - - if (this.rightElem) removeClass(this.rightElem, 'not-active'); - } - } else { - if (this.activeImageX - itemsSkipped < 1) { - this.activeImageX = this.amountX + (this.activeImageX - itemsSkipped); - this.spinY = true; - } else { - this.activeImageX -= itemsSkipped; - } - } + moveActiveXIndexDown(itemsSkipped) { + this.activeImageX = (this.activeImageX - itemsSkipped + this.amountX) % this.amountX; } moveActiveYIndexUp(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageY + itemsSkipped >= this.amountY; - - if (isReachedTheEdge) { - this.activeImageY = this.amountY; - - if (isReverse ? this.bottomElem : this.topElem) { - addClass(isReverse ? this.bottomElem : this.topElem, 'not-active'); - } - } else { - this.activeImageY += itemsSkipped; - - if (this.topElem) removeClass(this.topElem, 'not-active'); - - if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); - } - } else { - this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY; - - if (this.activeImageY === this.amountY) this.spinY = false; - } + this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY; } moveActiveYIndexDown(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageY - itemsSkipped <= 1; - - if (isReachedTheEdge) { - this.activeImageY = 1; - - if (isReverse ? this.topElem : this.bottomElem) { - addClass(isReverse ? this.topElem : this.bottomElem, 'not-active'); - } - } else { - this.activeImageY -= itemsSkipped; - - if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); - if (this.topElem) removeClass(this.topElem, 'not-active'); - } - } else { - if (this.activeImageY - itemsSkipped < 1) { - this.activeImageY = this.amountY + (this.activeImageY - itemsSkipped); - this.spinY = false; - } else { - this.activeImageY -= itemsSkipped; - } - } - } - - moveRight(currentPositionX) { - const itemsSkippedRight = getItemSkipped(currentPositionX, this.movementStart.x, this.speedFactor); - - this.spinReverse ? this.moveActiveIndexDown(itemsSkippedRight) - : this.moveActiveIndexUp(itemsSkippedRight); - - this.movementStart.x = currentPositionX; - this.activeImageY = 1; - this.update(); + this.activeImageY = (this.activeImageY - itemsSkipped + this.amountY) % this.amountY; } - moveLeft(currentPositionX) { - const itemsSkippedLeft = getItemSkipped(this.movementStart.x, currentPositionX, this.speedFactor); + moveRight(stopAtEdges) { + if (stopAtEdges && this.activeImageX >= this.imagesX.length - 1) return; - this.spinReverse ? this.moveActiveIndexUp(itemsSkippedLeft) - : this.moveActiveIndexDown(itemsSkippedLeft); - - this.activeImageY = 1; - this.movementStart.x = currentPositionX; - this.update(); + this.moveActiveXIndexUp(1); + this.update(ORIENTATIONS.X); } - moveTop(currentPositionY) { - const itemsSkippedTop = getItemSkipped(this.movementStart.y, currentPositionY, this.speedFactor); - - this.spinReverse ? this.moveActiveYIndexUp(itemsSkippedTop) - : this.moveActiveYIndexDown(itemsSkippedTop); + moveLeft(stopAtEdges) { + if (stopAtEdges && this.activeImageX <= 0) return; - this.activeImageX = 1; - this.movementStart.y = currentPositionY; - this.update(); + this.moveActiveXIndexDown(1); + this.update(ORIENTATIONS.X); } - moveBottom(currentPositionY) { - const itemsSkippedBottom = getItemSkipped(currentPositionY, this.movementStart.y, this.speedFactor); - - this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) - : this.moveActiveYIndexUp(itemsSkippedBottom); - - this.activeImageX = 1; - this.movementStart.y = currentPositionY; - this.update(); - } - - onMoveHandler(event) { - const currentPositionX = this.isMobile ? event.touches[0].clientX : event.pageX; - const currentPositionY = this.isMobile ? event.touches[0].clientY : event.pageY; - - const isMoveRight = currentPositionX - this.movementStart.x >= this.speedFactor; - const isMoveLeft = this.movementStart.x - currentPositionX >= this.speedFactor; - const isMoveTop = this.movementStart.y - currentPositionY >= this.speedFactor; - const isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor; - - if (this.bottomCircle) this.hide360ViewCircleIcon(); - - if (isMoveRight && this.movingDirection === ORIENTATIONS.X) { - this.moveRight(currentPositionX); - - this.isStartSpin = true; - } else if (isMoveLeft && this.movingDirection === ORIENTATIONS.X) { - this.moveLeft(currentPositionX); - - this.isStartSpin = true; - } else if (isMoveTop && this.movingDirection === ORIENTATIONS.Y) { - this.moveTop(currentPositionY); - - this.isStartSpin = true; - } else if (isMoveBottom && this.movingDirection === ORIENTATIONS.Y) { - this.moveBottom(currentPositionY); - - this.isStartSpin = true; - } - } - - left() { - this.movingDirection = ORIENTATIONS.X; - this.activeImageY = this.reversed ? this.amountY : 1; - - this.moveActiveIndexDown(1); - this.update(); - } - - right() { - this.movingDirection = ORIENTATIONS.X; - this.activeImageY = this.reversed ? this.amountY : 1; - - this.moveActiveIndexUp(1); - this.update(); - } - - top() { - this.movingDirection = ORIENTATIONS.Y; - this.activeImageX = this.reversed ? this.amountX : 1; + moveTop(stopAtEdges) { + if (stopAtEdges && this.activeImageY >= this.imagesY.length - 1) return; this.moveActiveYIndexUp(1); - this.update(); + this.update(ORIENTATIONS.Y); } - bottom() { - this.movingDirection = ORIENTATIONS.Y; - this.activeImageX = this.reversed ? this.amountX : 1; + moveBottom(stopAtEdges) { + if (stopAtEdges && this.activeImageY <= 0) return; this.moveActiveYIndexDown(1); - this.update(); + this.update(ORIENTATIONS.Y); } - loop(reversed) { - const loopTriggers = { - left: this.left.bind(this), - right: this.right.bind(this), - top: this.top.bind(this), - bottom: this.bottom.bind(this) + onMoveHandler(movingDirection, itemsSkippedX, itemsSkippedY) { + if (movingDirection === 'right') { + this.moveRight(this.stopAtEdges, itemsSkippedX); + } else if (movingDirection === 'left') { + this.moveLeft(this.stopAtEdges, itemsSkippedX); + } else if (movingDirection === 'up') { + this.moveTop(this.stopAtEdges, itemsSkippedY); + } else if (movingDirection === 'down') { + this.moveBottom(this.stopAtEdges, itemsSkippedY); } - - loop(this.autoplayBehavior, this.spinY, reversed, loopTriggers); } - updateContainerAndCanvasSize(image) { - const imageAspectRatio = getImageAspectRatio(image, this.ratio); - - if (this.fullscreenView) { - this.container.width = window.innerWidth * this.devicePixelRatio; - this.container.style.width = window.innerWidth + 'px'; - 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'; + update(orientation) { + const image = + orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; - return; - } - - 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'; - } - - onResizedImageLoad(orientation, image, index) { - if (orientation === ORIENTATIONS.Y) { - this.resizedImagesY[index] = image; - } else { - this.resizedImagesX[index] = image; - } - - const isAllImagesLoaded = ( - this.resizedImagesX.length + this.resizedImagesY.length === this.amountX + this.amountY - ); - - if (isAllImagesLoaded) { - this.imagesX = this.resizedImagesX; - this.imagesY = this.resizedImagesY; - - this.update(); - } + this.drawImageOnCanvas(image); } - showImageInfo(ctx) { - ctx.font = `${this.fullscreenView ? 28 : 14}px serif`; - ctx.fillStyle = (this.info === 'white' ? '#FFF' : '#000'); - - const imageDimension = `image-dimension: ${this.container.offsetWidth}x${this.container.offsetHeight}px`; - - const currentXImage = 'active-index-x: ' + this.activeImageX; - const currentYImage = 'active-index-y: ' + this.activeImageY; - - const imageIndex = [currentXImage, currentYImage].join(' | '); + updatePercentageInLoader(percentage = 0) { + if (!this.loader) return; - ctx.fillText(imageDimension, 20, this.container.offsetHeight - 35); - ctx.fillText(imageIndex, 20, this.container.offsetHeight - 10); + this.loader.innerText = percentage + '%'; } - requestResizedImages() { - if (!this.isReady()) return; - - const responsive = this.ciParams.ciToken; - const firstImage = this.imagesX[0]; + drawImageOnCanvas(image) { + if (!this.canvas || !image) return; - this.update(); + const ctx = this.canvas.getContext('2d'); - if (!responsive || !this.requestResponsiveImages || (this.container.offsetWidth < firstImage.width * 1.5)) return; + // Handle fullscreen mode: use the full screen dimensions if fullscreen is active + const containerWidth = this.fullscreenView ? window.innerWidth : this.canvas.clientWidth; + const containerHeight = this.fullscreenView ? window.innerHeight : this.canvas.clientHeight; - this.speedFactor = getSpeedFactor(this.dragSpeed, this.amountX, this.container.offsetWidth); - const srcX = generateImagesPath(this.srcXConfig); + // Set canvas resolution to match container size, with device pixel ratio for sharper rendering + this.canvas.width = containerWidth * this.devicePixelRatio; + this.canvas.height = containerHeight * this.devicePixelRatio; - preloadImages( - this.srcXConfig, - srcX, - this.onResizedImageLoad.bind(this, ORIENTATIONS.X), - ) + // Scale the context to handle high DPI screens + ctx.scale(this.devicePixelRatio, this.devicePixelRatio); - if (this.allowSpinY) { - const srcY = generateImagesPath(this.srcYConfig); + // Enable image smoothing for higher quality + ctx.imageSmoothingEnabled = true; + ctx.imageSmoothingQuality = 'high'; - preloadImages( - this.srcYConfig, - srcY, - this.onResizedImageLoad.bind(this, ORIENTATIONS.Y), - ) - } - } + // Calculate the aspect ratios + const imageAspectRatio = image.naturalWidth / image.naturalHeight; + const containerAspectRatio = containerWidth / containerHeight; - update() { - let image = this.imagesX[this.activeImageX - 1]; + let drawWidth, drawHeight, offsetX, offsetY; - if (this.movingDirection === ORIENTATIONS.Y) { - image = this.imagesY[this.activeImageY - 1]; + // Adjust image scaling logic based on aspect ratios + if (imageAspectRatio > containerAspectRatio) { + // Image is wider than container + drawWidth = containerWidth; + drawHeight = containerWidth / imageAspectRatio; + offsetX = 0; + offsetY = (containerHeight - drawHeight) / 2; + } else { + // Image is taller than container + drawHeight = containerHeight; + drawWidth = containerHeight * imageAspectRatio; + offsetX = (containerWidth - drawWidth) / 2; + offsetY = 0; } - if (!image) return; - - const ctx = this.canvas.getContext("2d"); - ctx.scale(this.devicePixelRatio, this.devicePixelRatio); + // Clear the canvas before redrawing + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.updateContainerAndCanvasSize(image); + // Draw the image on the canvas, scaling and positioning it as needed + ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight); - if (this.fullscreenView) { - const { width, height, offsetX, offsetY } = - contain(this.canvas.width, this.canvas.height, image.width, image.height); + return ctx; + } - ctx.drawImage(image, offsetX, offsetY, width, height); + pushImageToSet(image, index, orientation) { + if (orientation === ORIENTATIONS.X) { + this.imagesX[index] = image; } else { - if (this.mouseTracked) { - this.updateImageScale(ctx); - } else { - if (this.hotspotsConfigs && !this.autoplay) { - updateHotspots( - this.container, - this.hotspotsConfigs, - this.activeImageX, - this.activeImageY, - this.movingDirection, - this.isClicked - ); - } - - ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); - } - } - - if (this.info) { - this.showImageInfo(ctx); + this.imagesY[index] = image; } } - updateImageScale(ctx) { - let image = this.originalImagesX[this.activeImageX - 1]; - - if (this.movingDirection === ORIENTATIONS.Y) { - image = this.originalImagesY[this.activeImageY - 1]; - } - - const position = this.getCursorPositionInCanvas(); - const imageWidth = this.canvas.width; - const imageHeight = this.canvas.height; - - const width = (this.canvas.width * this.zoomIntensity); - const height = (this.canvas.height * this.zoomIntensity); - - const pointX = 0 - ((position.x / imageWidth) * (width - this.canvas.width)); - const pointY = 0 - ((position.y / imageHeight) * (height - this.canvas.height)); - - ctx.drawImage(image, pointX, pointY, width, height); + calculatePercentage() { + const totalAmount = this.amountX + this.amountY; + const totalLoadedImages = this.imagesX.length + this.imagesY.length; + return Math.round((totalLoadedImages / totalAmount) * 100); } - updatePercentageInLoader(percentage) { - if (this.loader) { - this.loader.style.width = percentage + '%'; - } - - if (this.view360Icon) { - this.view360Icon.innerText = percentage + '%'; - } + onImageLoad(image, index, orientation) { + this.pushImageToSet(image, index, orientation); + this.updatePercentageInLoader(this.calculatePercentage()); } - onFirstImageLoaded(image) { - this.add360ViewIcon(); - - const ctx = this.canvas.getContext("2d"); - ctx.scale(this.devicePixelRatio, this.devicePixelRatio); - this.updateContainerAndCanvasSize(image); - - if (this.fullscreenView) { - const { offsetX, offsetY, width, height } = - contain(this.canvas.width, this.canvas.height, image.width, image.height); - - this.offset = { x: offsetX, y: offsetY }; - - this.addCloseFullscreenView(); - - ctx.drawImage(image, offsetX, offsetY, width, height); - } else { - ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); - } - - if (this.info) { - this.showImageInfo(ctx); - } - - if (this.magnifier) { - this.addMagnifier(); - } - - if (this.boxShadow && !this.fullscreenView) { - this.boxShadowEl = createBoxShadow(this.boxShadow, this.innerBox); - } - - if (this.bottomCircle && !this.fullscreenView) { - this.add360ViewCircleIcon(); - } - - if (this.fullscreen && !this.fullscreenView) { - this.addFullscreenIcon(); - } + onFirstImageLoaded(event, image) { + this.createContainers(event); + this.drawImageOnCanvas(image); } onAllImagesLoaded() { - this.removeLoader(); - this.imagesLoaded = true; - - if (this.autoplay && this.pointerZoom) { - this.container.style.cursor = 'zoom-in'; - } else { - this.container.style.cursor = 'grab'; - } - - this.speedFactor = getSpeedFactor(this.dragSpeed, this.amountX, this.container.offsetWidth); + this.addAllIcons(); + this.isReady = true; + this.amountX = this.imagesX.length - 1; + this.amountY = this.imagesY.length - 1; if (this.autoplay) { - this.play(); - } + this.hideAllIcons(); + const delayedPlay = delay(this.play.bind(this)); - if (this.disableDrag) { - this.container.style.cursor = 'default'; + delayedPlay(); } - - if (this.view360Icon) { - if (this.hide360Logo) return this.remove360ViewIcon(); - - this.view360Icon.innerText = ''; - //TODO [deprecated]: remove setView360Icon in the upcoming versions - if (this.logoSrc) setView360Icon(this.view360Icon, this.logoSrc); - } - - this.initControls(); } magnify(event) { event.stopPropagation(); - if (this.mouseTracked) this.togglePointerZoom(); - - const currentOriginalImage = getCurrentOriginalImage( - this.movingDirection, - this.imagesX, - this.imagesY, - this.activeImageX, - this.activeImageY - ); - - this.isMagnifyOpen = true; + const highPreviewCdnUrl = generateHighPreviewCdnUrl(this.imagesX[this.activeImageX].src); + this.createGlass(); - currentOriginalImage.onload = () => { - if (this.glass) { - this.glass.style.cursor = 'none'; - } + const onLoadImage = (image) => { + magnify(event, this.innerBox, this.offset, image, this.glass, this.magnifier); }; - this.glass = document.createElement('div'); - this.container.style.overflow = 'hidden'; - - magnify( - this.container, - this.offset, - currentOriginalImage, - this.glass, - this.magnifier || 3 - ); - } - - closeMagnifier() { - if (!this.glass) return; - - this.container.style.overflow = 'visible'; - this.container.removeChild(this.glass); - this.glass = null; - this.isMagnifyOpen = false; + loadImage(highPreviewCdnUrl, onLoadImage); } openFullscreenModal(event) { event.stopPropagation(); - if (this.mouseTracked) this.togglePointerZoom(); - const fullscreenContainer = createFullscreenModal(this.container); - new CI360Viewer(fullscreenContainer, true, this.hotspotsConfigs); + new CI360Viewer(fullscreenContainer, true); } - setFullscreenEvents(_, event) { - if (event.type === 'click') return this.closeFullscreenModal(event); - if (event.key === 'Escape' && this.container.parentNode.parentNode === document.body) { - this.closeFullscreenModalOnEsc(event); - } - } + closeFullscreenModal(event) { + event.stopPropagation(); - closeFullscreenModalOnEsc(event) { - this.closeFullscreenModal(event); + document.body.removeChild(this.container.parentNode); + window.document.body.style.overflow = 'visible'; } play() { - if (this.bottomCircle) this.hide360ViewCircleIcon(); + this.hide360ViewCircleIcon(); - this.remove360ViewIcon(); + const loopTriggers = { + left: this.moveLeft.bind(this), + right: this.moveRight.bind(this), + top: this.moveTop.bind(this), + bottom: this.moveBottom.bind(this), + }; this.loopTimeoutId = window.setInterval(() => { - this.loop(this.reversed); - - const isPlayedOnce = isCompletedOneCycle( - this.autoplayBehavior, - this.activeImageX, - this.activeImageY, - this.amountX, - this.amountY, - this.reversed - ); - - if (this.playOnce && isPlayedOnce) { - window.clearTimeout(this.loopTimeoutId); - this.autoplay = false; - - if (this.hotspotsConfigs) { - updateHotspots( - this.container, - this.hotspotsConfigs, - this.activeImageX, - this.activeImageY, - this.movingDirection, - this.isClicked - ); - } + const completedOneCycle = + this.playOnce && + isCompletedOneCycle({ + autoplayBehavior: this.autoplayBehavior, + activeImageX: this.activeImageX, + activeImageY: this.activeImageY, + amountX: this.amountX, + amountY: this.amountY, + autoplayReverse: this.autoplayReverse, + }); + + if (completedOneCycle) { + this.stopAutoplay(); + return; } - }, this.autoplaySpeed); - } - - stop() { - if (this.bottomCircle) this.show360ViewCircleIcon(); - window.clearTimeout(this.loopTimeoutId); - } - - updateView(forceUpdate, viewers, hotspotConfigs) { - let container = this.container; - - const imageProps = get360ViewProps(container); - const srcPropsChanged = isPropsChangeRequireReload(this, imageProps); - const reInitView = srcPropsChanged || forceUpdate; - - if (reInitView) { - const oldElement = this.container; - const viewIndex = viewers.findIndex(view => view.id === this.container.id); - - container.removeChild(this.innerBox); - container = container.cloneNode(true); - - container.className = container.className.replace(' initialized', ''); + const shouldSwitch = shouldSwitchSpinDirection({ + autoplayBehavior: this.autoplayBehavior, + activeImageX: this.activeImageX, + activeImageY: this.activeImageY, + amountX: this.amountX, + amountY: this.amountY, + autoplayReverse: this.autoplayReverse, + spinDirection: this.spinDirection, + }); + + if (shouldSwitch) { + this.spinDirection = switchSpinDirection(this.spinDirection); + } - oldElement.parentNode.replaceChild(container, oldElement); + const spinY = this.spinDirection === 'y'; - return viewers.splice(viewIndex, 1, new CI360Viewer(container)); - } + loop({ + autoplayBehavior: this.autoplayBehavior, + spinY, + reversed: this.autoplayReverse, + loopTriggers, + }); + }, this.autoplaySpeed); + } - container.style.position = 'relative'; - container.style.width = '100%'; - container.style.cursor = 'default'; - container.setAttribute('draggable', 'false'); + stopAutoplay() { + this.showAllIcons(); + this.autoplay = false; - this.stop(); - this.init(container, true, hotspotConfigs); + window.clearTimeout(this.loopTimeoutId); } destroy() { - this.stop(); + this.stopAutoplay(); const oldElement = this.container; const newElement = oldElement.cloneNode(true); @@ -1080,66 +466,83 @@ class CI360Viewer { oldElement.parentNode.replaceChild(newElement, oldElement); } - addCloseFullscreenView(event) { - const closeFullscreenIcon = createCloseFullscreenIcon(); - - closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event); - window.onkeyup = this.setFullscreenEvents.bind(this, event); - - this.iconsContainer.appendChild(closeFullscreenIcon); - } - - add360ViewIcon() { - this.view360Icon = create360ViewIcon(); - this.innerBox.appendChild(this.view360Icon); + addInitialIcon() { + this.initialIcon = createInitialIcon(); + this.innerBox.appendChild(this.initialIcon); } - addFullscreenIcon() { - this.fullscreenIcon = createFullscreenIcon(); - this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this); + showInitialIcon() { + if (!this.initialIcon) return; - this.iconsContainer.appendChild(this.fullscreenIcon); + this.initialIcon.style.opacity = 1; } - showFullscreenIcon() { - if (!this.fullscreenIcon) return; + hideInitialIcon() { + if (!this.initialIcon) return; - this.fullscreenIcon.style.display = 'block'; - this.fullscreenIcon.style.pointerEvents = 'auto'; + this.initialIcon.style.opacity = 0; } - hideFullscreenIcon() { - if (!this.fullscreenIcon) return; + createGlass() { + this.hideAllIcons(); + this.glass = document.createElement('div'); + this.innerBox.appendChild(this.glass); + this.innerBox.style.cursor = 'default'; + } - this.fullscreenIcon.style.display = 'none'; - this.fullscreenIcon.style.pointerEvents = 'none'; + removeGlass() { + this.showAllIcons(); + this.innerBox.removeChild(this.glass); + this.glass = null; } - addMagnifier() { + addMagnifierIcon() { + if (!this.magnifier) return; + this.magnifierIcon = createMagnifierIcon(); this.magnifierIcon.onclick = this.magnify.bind(this); this.iconsContainer.appendChild(this.magnifierIcon); } - enableMagnifierIcon() { + showMagnifierIcon() { if (!this.magnifierIcon) return; - this.magnifierIcon.style.display = 'block'; - this.magnifierIcon.style.pointerEvents = 'auto'; + this.magnifierIcon.style.visibility = 'visible'; // !TODO: Rework + this.magnifierIcon.style.opacity = 1; } - disableMagnifierIcon() { + hideMagnifierIcon() { if (!this.magnifierIcon) return; - this.magnifierIcon.style.display = 'none'; - this.magnifierIcon.style.pointerEvents = 'none'; + this.magnifierIcon.style.visibility = 'hidden'; + this.magnifierIcon.style.opacity = 0; } - closeFullscreenModal(event) { - event.stopPropagation(); - document.body.removeChild(this.container.parentNode); - window.document.body.style.overflow = 'visible'; + addFullscreenIcon() { + this.fullscreenIcon = createFullscreenIcon(); + this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this); + + this.iconsContainer.appendChild(this.fullscreenIcon); + } + + addCloseFullscreenIcon() { + this.fullscreenCloseIcon = createCloseIcon(); + this.fullscreenCloseIcon.onclick = this.closeFullscreenModal.bind(this); + + this.iconsContainer.appendChild(this.fullscreenCloseIcon); + } + + showFullscreenIcon() { + if (!this.fullscreenIcon) return; + + this.fullscreenIcon.style.opacity = 1; + } + + hideFullscreenIcon() { + if (!this.fullscreenIcon) return; + + this.fullscreenIcon.style.opacity = 0; } add360ViewCircleIcon() { @@ -1150,13 +553,13 @@ class CI360Viewer { show360ViewCircleIcon() { if (!this.view360CircleIcon) return; - this.view360CircleIcon.style.opacity = '1'; + this.view360CircleIcon.style.opacity = 1; } hide360ViewCircleIcon() { if (!this.view360CircleIcon) return; - this.view360CircleIcon.style.opacity = '0'; + this.view360CircleIcon.style.opacity = 0; } remove360ViewCircleIcon() { @@ -1166,6 +569,31 @@ class CI360Viewer { this.view360CircleIcon = null; } + addAllIcons() { + this.removeLoader(); + + if (!this.fullscreenView) this.addMagnifierIcon(); + if (!this.fullscreenView) this.addFullscreenIcon(); + if (!this.initialIconHidden) this.addInitialIcon(); + if (!this.bottomCircleHidden) this.add360ViewCircleIcon(); + } + + showAllIcons() { + this.showInitialIcon(); + this.show360ViewCircleIcon(); + this.showMagnifierIcon(); + this.showFullscreenIcon(); + } + + hideAllIcons() { + this.hideInitialIcon(); + this.hide360ViewCircleIcon(); + this.hideMagnifierIcon(); + this.hideFullscreenIcon(); + + if (this.glass) this.removeGlass(); + } + removeLoader() { if (!this.loader) return; @@ -1173,15 +601,6 @@ class CI360Viewer { this.loader = null; } - remove360ViewIcon() { - if (!this.view360Icon) return; - - try { - this.innerBox.removeChild(this.view360Icon); - this.view360Icon = null; - } catch { } - } - initControls() { const onLeftStart = (event) => { event.stopPropagation(); @@ -1217,26 +636,20 @@ class CI360Viewer { this.bottom(); this.loopTimeoutId = window.setInterval(this.bottom.bind(this), this.autoplaySpeed); - } - - const onEventEnd = () => { - this.onFinishSpin(); - window.clearTimeout(this.loopTimeoutId); }; const controlsConfig = { container: this.container, controlReverse: this.controlReverse, spinReverse: this.spinReverse, - stopAtEdges: this.stopAtEdges - } + stopAtEdges: this.stopAtEdges, + }; const controlsTriggers = { onLeftStart, onRightStart, onTopStart, onBottomStart, - onEventEnd, }; const controlsElements = initControls(controlsConfig, controlsTriggers); @@ -1248,35 +661,87 @@ class CI360Viewer { } attachEvents(draggable, swipeable, keys) { - window.addEventListener('resize', this.requestResizedImages.bind(this)); - - if ((draggable) && (!this.disableDrag)) { - this.container.addEventListener('click', this.mouseClick.bind(this)); - this.container.addEventListener('mousedown', this.mouseDown.bind(this)); - this.container.addEventListener('mousemove', this.mouseMove.bind(this)); - this.container.addEventListener('mouseleave', this.mouseLeave.bind(this)); - - document.addEventListener('mouseup', this.mouseUp.bind(this)); + if (draggable) { + this.addMouseEvents(); } - if ((swipeable) && (!this.disableDrag)) { - this.container.addEventListener('touchstart', this.touchStart.bind(this), { passive: true }); - this.container.addEventListener('touchend', this.touchEnd.bind(this)); - this.container.addEventListener('touchmove', this.touchMove.bind(this)); + if (swipeable) { + this.addTouchEvents(); } if (keys) { - document.addEventListener('keydown', this.keyDown.bind(this)); - document.addEventListener('keyup', this.keyUp.bind(this)); + this.addKeyboardEvents(); } + } + + addMouseEvents() { + this.innerBox.addEventListener('click', this.mouseClick.bind(this)); + this.innerBox.addEventListener('mousedown', this.mouseDown.bind(this)); + + document.addEventListener('mousemove', throttle(this.mouseMove.bind(this), THROTTLE_TIME)); + document.addEventListener('mouseup', this.mouseUp.bind(this)); + } + + addTouchEvents() { + document.addEventListener('touchstart', this.touchOutside.bind(this)); + + this.container.addEventListener('touchstart', this.touchStart.bind(this)); + this.container.addEventListener('touchend', this.touchEnd.bind(this)); + this.container.addEventListener('touchmove', throttle(this.touchMove.bind(this), THROTTLE_TIME)); + } + + addKeyboardEvents() { + document.addEventListener('keydown', this.keyDown.bind(this)); + document.addEventListener('keyup', this.keyUp.bind(this)); + } + + createContainers(event) { + this.iconsContainer = createIconsContainer(this.container); + this.canvas = createCanvas(this.innerBox, event); + this.loader = createLoader(this.innerBox); + + if (this.fullscreenView) this.addCloseFullscreenIcon(); - document.addEventListener('keydown', this.keyDownGeneral.bind(this)); + removeElementFromContainer(this.innerBox, '.cloudimage-lazy'); } - init(container, update = false, hotspotsConfigs = null) { + init(container) { let { - folder, apiVersion, filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow, - autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, pointerZoom, ratio, imageInfo = 'black', requestResponsiveImages + folder, + apiVersion, + filenameX, + filenameY, + imageListX, + imageListY, + indexZeroBase, + amountX, + amountY, + draggable = true, + swipeable = true, + keys, + keysReverse, + bottomCircle, + bottomCircleOffset, + autoplay, + autoplayBehavior, + playOnce, + speed, + autoplayReverse, + fullscreen, + magnifier, + ciToken, + ciFilters, + ciTransformation, + lazyload, + lazySelector, + dragSpeed, + stopAtEdges, + controlReverse, + logoSrc, + pointerZoom, + imageInfo = 'black', + initialIconHidden, + bottomCircleHidden, } = get360ViewProps(container); const ciParams = { ciToken, ciFilters, ciTransformation }; @@ -1290,28 +755,23 @@ class CI360Viewer { this.indexZeroBase = indexZeroBase; this.amountX = imageListX ? JSON.parse(imageListX).length : amountX; this.amountY = imageListY ? JSON.parse(imageListY).length : amountY; - this.allowSpinY = (!!this.amountY); - this.activeImageX = autoplayReverse ? this.amountX : 1; - this.activeImageY = autoplayReverse ? this.amountY : 1; - this.spinY = (autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX) ? true : false; + this.allowSpinY = !!this.amountY; + this.activeImageX = autoplayReverse ? this.amountX - 1 : 0; + this.activeImageY = autoplayReverse ? this.amountY - 1 : 0; this.bottomCircle = bottomCircle; this.bottomCircleOffset = bottomCircleOffset; - this.boxShadow = boxShadow; this.autoplay = autoplay; this.autoplayBehavior = autoplayBehavior; this.playOnce = playOnce; this.speed = speed; - this.reversed = autoplayReverse; - this.disableDrag = disableDrag; + this.autoplayReverse = autoplayReverse; this.fullscreen = fullscreen; - this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0; + this.magnifier = magnifier > 1 ? Math.min(magnifier, 5) : 0; this.lazySelector = lazySelector; - this.spinReverse = spinReverse; this.controlReverse = controlReverse; this.dragSpeed = Math.max(dragSpeed, 50); - this.autoplaySpeed = this.speed * 36 / this.amountX; + this.autoplaySpeed = (this.speed * 36) / this.amountX; this.stopAtEdges = stopAtEdges; - this.hide360Logo = hide360Logo; this.logoSrc = logoSrc; this.ciParams = ciParams; this.apiVersion = apiVersion; @@ -1319,57 +779,10 @@ class CI360Viewer { this.keysReverse = keysReverse; this.info = imageInfo; this.keys = keys; - this.ratio = ratio && JSON.parse(ratio); - this.requestResponsiveImages = requestResponsiveImages - - if (update) { - removeChildFromParent(this.innerBox, this.iconsContainer); - removeChildFromParent(this.innerBox, this.boxShadowEl); - removeChildFromParent(this.innerBox, this.view360Icon); - this.remove360ViewCircleIcon(); - - this.iconsContainer = createIconsContainer(this.innerBox); - - if (!this.hide360Logo && !this.lazyload && this.logoSrc) { - this.add360ViewIcon(); - setView360Icon(this.view360Icon, this.logoSrc); - } - - if (this.magnifier) { - this.addMagnifier(); - } - - if (this.bottomCircle && !this.fullscreenView) { - this.add360ViewCircleIcon(); - } - - if (this.fullscreen && !this.fullscreenView) { - this.addFullscreenIcon(); - } - - if (this.boxShadow && !this.fullscreenView) { - this.boxShadowEl = createBoxShadow(this.boxShadow, this.innerBox); - } - - - if (hotspotsConfigs && !this.fullscreenView) { - this.hotspotsConfigs = generateHotspotsConfigs(hotspotsConfigs); - createHotspots(container, this.hotspotsConfigs); - } - - return this.onAllImagesLoaded(); - } - this.innerBox = createInnerBox(this.container); - this.iconsContainer = createIconsContainer(this.innerBox); - this.canvas = createCanvas(this.innerBox); - this.loader = createLoader(this.innerBox); - - if (this.hotspotsConfigs && !this.fullscreenView) { - createHotspots(container, this.hotspotsConfigs); - } - - applyStylesToContainer(this.container); + this.initialIconHidden = initialIconHidden; + this.bottomCircleHidden = bottomCircleHidden; + this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior); this.srcXConfig = { folder, @@ -1383,70 +796,32 @@ class CI360Viewer { amount: this.amountX, indexZeroBase, fullscreen: this.fullscreenView, - } + autoplayReverse, + }; this.srcYConfig = { ...this.srcXConfig, filename: filenameY, - orientation: ORIENTATIONS.Y, imageList: imageListY, - amount: this.amountY - } - - const srcX = generateImagesPath(this.srcXConfig); - - const onImageLoad = (orientation, image, index) => { - if (orientation === ORIENTATIONS.X) { - this.imagesX[index] = image; - } else { - this.imagesY[index] = image; - } - - const totalAmount = this.amountX + this.amountY; - const totalLoadedImages = this.imagesX.length + this.imagesY.length; - const isFirstImageLoaded = !index && orientation !== ORIENTATIONS.Y; - const percentage = Math.round(totalLoadedImages / totalAmount * 100); - - this.updatePercentageInLoader(percentage); - if (isFirstImageLoaded) { - this.onFirstImageLoaded(image); - } else if (this.autoplay) { - this.moveRight(index) - } - - if (this.isReady()) { - this.onAllImagesLoaded(); - } - } + orientation: ORIENTATIONS.Y, + amount: this.amountY, + }; - const loadImages = () => { - preloadImages( - this.srcXConfig, - srcX, - (onImageLoad.bind(this, ORIENTATIONS.X)) - ); - - if (this.allowSpinY) { - const srcY = generateImagesPath(this.srcYConfig); - - preloadImages( - this.srcYConfig, - srcY, - onImageLoad.bind(this, ORIENTATIONS.Y) - ); - } - } + const cdnPathX = generateCdnPath(this.srcXConfig, this.fullscreenView); + const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, this.fullscreenView) : null; if (lazyload) { - const onFirstImageLoad = (image) => { - this.innerBox.removeChild(image); - - loadImages(); - } - - initLazyload(srcX, this.srcXConfig, onFirstImageLoad); - } else { - loadImages(); + initLazyload(cdnPathX, this.srcXConfig, (event) => { + preloadImages({ + cdnPathX, + cdnPathY, + configX: this.srcXConfig, + configY: this.srcYConfig, + onImageLoad: (image, index, orientation) => this.onImageLoad(image, index, orientation), + onFirstImageLoad: (image) => this.onFirstImageLoaded(event, image), + onAllImagesLoad: this.onAllImagesLoaded.bind(this), + }); + }); } this.attachEvents(draggable, swipeable, keys); diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 7499fa8..a3bd00f 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -1,56 +1,67 @@ -import { AUTOPLAY_BEHAVIOR } from './constants'; +import { AUTOPLAY_BEHAVIOR } from './utils/constants'; + //TODO [deprecated]: remove filename, amount in the upcoming versions const get360ViewProps = (image) => ({ folder: attr(image, 'folder') || attr(image, 'data-folder') || '/', - apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') - || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7", - filenameX: attr(image, 'filename') || attr(image, 'data-filename') - || attr(image, 'filename-x') || attr(image, 'data-filename-x') - || 'image-{index}.jpg', - filenameY: attr(image, 'filename-y') || - attr(image, 'data-filename-y') || 'image-y-{index}.jpg', + apiVersion: + attr(image, 'api-version') || + attr(image, 'data-api-version') || + attr(image, 'apiVersion') || + attr(image, 'data-apiVersion') || + 'v7', + filenameX: + attr(image, 'filename') || + attr(image, 'data-filename') || + attr(image, 'filename-x') || + attr(image, 'data-filename-x') || + 'image-{index}.jpg', + filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg', imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null, imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null, indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10), - amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') - || attr(image, 'amount-x') || attr(image, 'data-amount-x') - || 36, 10), - amountY: parseInt(attr(image, 'amount-y') || - attr(image, 'data-amount-y') || 0, 10), + amountX: parseInt( + attr(image, 'amount') || + attr(image, 'data-amount') || + attr(image, 'amount-x') || + attr(image, 'data-amount-x') || + 36, + 10 + ), + amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10), speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10), dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10), keys: isTrue(image, 'keys'), keysReverse: isTrue(image, 'keys-reverse'), boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'), autoplay: isTrue(image, 'autoplay'), - autoplayBehavior: attr(image, 'autoplay-behavior') - || attr(image, 'data-autoplay-behavior') - || AUTOPLAY_BEHAVIOR.SPIN_X, + autoplayBehavior: + attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || AUTOPLAY_BEHAVIOR.SPIN_X, playOnce: isTrue(image, 'play-once'), autoplayReverse: isTrue(image, 'autoplay-reverse'), - pointerZoom: parseFloat(attr(image, 'pointer-zoom') || - attr(image, 'data-pointer-zoom') || 0, 10), + pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10), bottomCircle: isTrue(image, 'bottom-circle'), - disableDrag: isTrue(image, 'disable-drag'), fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'), - magnifier: ((attr(image, 'magnifier') !== null) || (attr(image, 'data-magnifier') !== null)) && + magnifier: + (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10), - bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10), + bottomCircleOffset: parseInt( + attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, + 10 + ), ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'), - ciFilters: attr(image, 'filters') - || attr(image, 'data-filters'), - ciTransformation: attr(image, 'transformation') - || attr(image, 'data-transformation'), + ciFilters: attr(image, 'filters') || attr(image, 'data-filters'), + ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'), lazyload: isTrue(image, 'lazyload'), lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload', spinReverse: isTrue(image, 'spin-reverse'), controlReverse: isTrue(image, 'control-reverse'), stopAtEdges: isTrue(image, 'stop-at-edges'), - hide360Logo: isTrue(image, 'hide-360-logo'), - logoSrc: attr(image, 'logo-src') || 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', - ratio: attr(image, 'ratio') || attr(image, 'data-ratio'), - imageInfo: attr(image, 'info')|| attr(image, 'data-info') || isTrue(image, 'info'), - requestResponsiveImages: isTrue(image, 'request-responsive-images') + logoSrc: + attr(image, 'logo-src') || + 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', + imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info'), + initialIconHidden: isFalse(image, 'initial-icon'), + bottomCircleHidden: isFalse(image, 'bottom-circle'), }); const isTrue = (image, type) => { @@ -59,28 +70,13 @@ const isTrue = (image, type) => { return (imgProp !== null && imgProp !== 'false') || (imgDataProp !== null && imgDataProp !== 'false'); }; +const isFalse = (image, type) => { + const imgProp = attr(image, type); + const imgDataProp = attr(image, `data-${type}`); -const attr = (element, attribute) => element.getAttribute(attribute); - -const setView360Icon = (view360Icon, logoSrc) => { - view360Icon.style.background = `rgba(255,255,255,0.8) url('${logoSrc}') 50% 50% / contain no-repeat`; -} - -const debounce = (func, timeout) => { - let timer; - return (...args) => { - clearTimeout(timer); + return imgProp === 'false' || imgDataProp === 'false'; +}; - timer = setTimeout(() => { - func.apply(this, args) - }, timeout) - } -} +const attr = (element, attribute) => element.getAttribute(attribute); -export { - get360ViewProps, - setView360Icon, - attr, - isTrue, - debounce -} \ No newline at end of file +export { get360ViewProps, attr, isTrue }; diff --git a/src/constants/auto-play-behavior.js b/src/constants/auto-play-behavior.js deleted file mode 100644 index 05798e5..0000000 --- a/src/constants/auto-play-behavior.js +++ /dev/null @@ -1,6 +0,0 @@ -export const AUTOPLAY_BEHAVIOR = { - SPIN_X: 'spin-x', - SPIN_Y: 'spin-y', - SPIN_XY: 'spin-xy', - SPIN_YX: 'spin-yx', -}; diff --git a/src/constants/falsy-values.js b/src/constants/falsy-values.js deleted file mode 100644 index 07b2d76..0000000 --- a/src/constants/falsy-values.js +++ /dev/null @@ -1,10 +0,0 @@ -export const FALSY_VALUES = [ - false, - 0, - null, - undefined, - 'false', - '0', - 'null', - 'undefined', -]; diff --git a/src/constants/index.js b/src/constants/index.js deleted file mode 100644 index 2543085..0000000 --- a/src/constants/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export { AUTOPLAY_BEHAVIOR } from './auto-play-behavior'; -export { FALSY_VALUES } from './falsy-values'; -export { ORIENTATIONS } from './orientations'; -export { - ORGINAL_SIZE_REGEX, - AND_SYMBOL_REGEX, -} from './regex'; diff --git a/src/constants/orientations.js b/src/constants/orientations.js deleted file mode 100644 index 4d59489..0000000 --- a/src/constants/orientations.js +++ /dev/null @@ -1,5 +0,0 @@ -export const ORIENTATIONS = { - X: 'x-axis', - Y: 'y-axis', - CENTER: 'center', -}; diff --git a/src/constants/regex.js b/src/constants/regex.js deleted file mode 100644 index 8bba279..0000000 --- a/src/constants/regex.js +++ /dev/null @@ -1,8 +0,0 @@ -const ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g; -const AND_SYMBOL_REGEX = /\?&/g; - - -export { - ORGINAL_SIZE_REGEX, - AND_SYMBOL_REGEX, -}; diff --git a/src/index.js b/src/index.js index 18e66b0..cdb0c60 100644 --- a/src/index.js +++ b/src/index.js @@ -19,17 +19,19 @@ function getContainerWithId(container) { function init() { const viewers = []; - const view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)'); + const view360Array = document.querySelectorAll( + '.cloudimage-360:not(.initialized)' + ); - [].slice.call(view360Array).forEach(_container => { + [].slice.call(view360Array).forEach((_container) => { const container = getContainerWithId(_container); - const isHotspotsEnabled = isTrue(container, 'hotspots') + const isHotspotsEnabled = isTrue(container, 'hotspots'); if (!isHotspotsEnabled) { viewers.push(new CI360Viewer(container)); } - }) + }); window.CI360._viewers = viewers; } @@ -37,7 +39,9 @@ function init() { function destroy() { if (isNoViewers()) return; - window.CI360._viewers.forEach(viewer => { viewer.destroy(); }); + window.CI360._viewers.forEach((viewer) => { + viewer.destroy(); + }); window.CI360._viewers = []; } @@ -45,28 +49,35 @@ function destroy() { function getActiveIndexByID(id, oriantation) { if (isNoViewers()) return; - let currentViewer = window.CI360._viewers.filter(viewer => viewer.id === id)[0]; + let currentViewer = window.CI360._viewers.filter( + (viewer) => viewer.id === id + )[0]; if (oriantation === 'y') { - return currentViewer && (currentViewer.activeImageY - 1); + return currentViewer && currentViewer.activeImageY - 1; } - return currentViewer && (currentViewer.activeImageX - 1); + return currentViewer && currentViewer.activeImageX - 1; } function add(id) { - const view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)')); + const view360Array = Array.from( + document.querySelectorAll('.cloudimage-360:not(.initialized)') + ); if (view360Array.length && id) { - const newViewContainer = view360Array.filter(viewer => viewer.id === id)[0]; + const newViewContainer = view360Array.filter( + (viewer) => viewer.id === id + )[0]; - newViewContainer && window.CI360._viewers.push(new CI360Viewer(newViewContainer)); + newViewContainer && + window.CI360._viewers.push(new CI360Viewer(newViewContainer)); } } function update(id = null, forceUpdate = false, hotspotConfigs = null) { if (id) { - const view = window.CI360._viewers.filter(viewer => viewer.id === id)[0]; + const view = window.CI360._viewers.filter((viewer) => viewer.id === id)[0]; if (hotspotConfigs) { const view360Array = document.querySelectorAll('.cloudimage-360'); @@ -76,8 +87,9 @@ function update(id = null, forceUpdate = false, hotspotConfigs = null) { view.updateView(forceUpdate, window.CI360._viewers, hotspotConfigs); } else { - window.CI360._viewers - .forEach(viewer => { viewer.updateView(forceUpdate, window.CI360._viewers); }); + window.CI360._viewers.forEach((viewer) => { + viewer.updateView(forceUpdate, window.CI360._viewers); + }); } } @@ -86,15 +98,21 @@ function isNoViewers() { } function addHotspots(instanceId, config) { - const view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)'); - const notInitializedContainer = Array.from(view360Array).find(view => view.id === instanceId); + const view360Array = document.querySelectorAll( + '.cloudimage-360:not(.initialized)' + ); + const notInitializedContainer = Array.from(view360Array).find( + (view) => view.id === instanceId + ); if (notInitializedContainer) { - container.setAttribute('data-hotspots', true) + container.setAttribute('data-hotspots', true); - return window.CI360._viewers.push(new CI360Viewer(container, false, config)) + return window.CI360._viewers.push( + new CI360Viewer(container, false, config) + ); } else { - update(instanceId, false, config) + update(instanceId, false, config); } } @@ -108,4 +126,4 @@ window.CI360.addHotspots = addHotspots; if (!window.CI360.notInitOnLoad) { init(); -} \ No newline at end of file +} diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index b227731..6d4598c 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -15,7 +15,7 @@ width: 16px; height: 16px; background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg'); - background-color: #0C6DC7; + background-color: #0c6dc7; background-repeat: no-repeat; background-size: 9px; background-position: center; @@ -24,15 +24,15 @@ transform: translate(-50%, -50%); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); border-radius: 50%; - animation: pulse 2s infinite; + animation: pulse 2s infinite; cursor: auto; } .cloudimage-360-hotspot-custom-icon { width: 42px; height: 42px; - background: #76AD0133; - border: 1px solid #FFFFFF33; + background: #76ad0133; + border: 1px solid #ffffff33; border-radius: 50%; box-sizing: border-box; transition: opacity 300ms ease-in-out; @@ -45,7 +45,7 @@ width: 16px; height: 16px; background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg'); - background-color: #76AD01; + background-color: #76ad01; background-repeat: no-repeat; background-size: 9px; background-position: center; @@ -54,14 +54,14 @@ transform: translate(-50%, -50%); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); border-radius: 50%; - animation: pulse 2s infinite; + animation: pulse 2s infinite; cursor: auto; } .cloudimage-360-hotspot-popup { visibility: hidden; opacity: 0; - background-color: #FFFFFF; + background-color: #ffffff; padding: 6px; border-radius: 2px; box-shadow: 0px 4px 4px 0px #00000040; @@ -153,7 +153,7 @@ .cloudimage-360-carousel-dot { width: 6px; height: 6px; - background-color: #C9D0DE; + background-color: #c9d0de; border-radius: 50%; cursor: pointer; transition: background-color 0.6s ease; @@ -162,7 +162,7 @@ } .cloudimage-360-carousel-dot.active-dot { - background-color: #76AD01; + background-color: #76ad01; } .cloudimage-360-carousel-dot:focus, @@ -186,8 +186,8 @@ } .cloudimage-360-modal-more-details { - color: #76AD01; - background-color: #ECFAE6; + color: #76ad01; + background-color: #ecfae6; font-size: 10px; line-height: 16px; font-weight: 400; @@ -198,25 +198,29 @@ } .cloudimage-360-modal-more-details:hover { - color: #76AD01; + color: #76ad01; background-color: #e1f5d8; } @keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7); - } + 0% { + box-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7); + } - 70% { - box-shadow: 0 0 0 10px rgba(99, 99, 99, 0); - } + 70% { + box-shadow: 0 0 0 10px rgba(99, 99, 99, 0); + } - 100% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0); - } + 100% { + box-shadow: 0 0 0 0 rgba(99, 99, 99, 0); + } } @keyframes fade-active-image { - from { opacity: 0.7 } - to { opacity: 1 } -} \ No newline at end of file + from { + opacity: 0.7; + } + to { + opacity: 1; + } +} diff --git a/src/static/css/style.css b/src/static/css/style.css index 9aa0ccc..d555172 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -1,29 +1,43 @@ +.cloudimage-360 { + width: 100%; + position: relative; +} + +.cloudimage-360-inner-box { + cursor: grab; + width: 100%; + height: 100%; +} + .cloudimage-360-icons-container { position: absolute; display: flex; - top: 5px; + top: 15px; right: 5px; - width: 30px; - height: 95%; + width: 25px; + height: 100%; flex-direction: column; align-items: center; - z-index: 101; + z-index: 100; + gap: 8px; } .cloudimage-360-magnifier-icon { - width: 25px; + width: 100%; height: 25px; - margin-bottom: 5px; cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat; + transition: all 200ms ease-out; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% + 50% / cover no-repeat; } .cloudimage-360-fullscreen-icon { - width: 25px; + width: 100%; height: 25px; - margin-bottom: 5px; cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat; + transition: all 200ms ease-out; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') + 50% 50% / cover no-repeat; } .cloudimage-360-reset-zoom-icon { @@ -32,25 +46,46 @@ height: 30px; margin-top: auto; cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') + 50% 50% / cover no-repeat; } -.cloudimage-360-close-fullscreen-icon { - width: 25px; +.cloudimage-360-close-icon { + width: 100%; height: 25px; cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% + 50% / cover no-repeat; } -.cloudimage-360-loader { +.cloudimage-initial-icon { position: absolute; top: 0; + bottom: 0; left: 0; right: 0; - width: 0%; - height: 8px; - background-color: rgb(165, 175, 184); - z-index: 100; + width: 100px; + height: 100px; + margin: auto; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(200, 200, 200, 0.5)); + backdrop-filter: blur(8px); + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.5); + box-shadow: + 0 8px 12px rgba(0, 0, 0, 0.2), + 0 4px 6px rgba(0, 0, 0, 0.1); + transition: + 200ms all, + transform 0.2s; + color: #4b4b4b; + text-align: center; + z-index: 2; + line-height: 100px; + user-select: none; +} + +.cloudimage-initial-icon:hover { + background-color: rgba(200, 200, 200, 0.2); /* Brighten on hover */ } .cloudimage-360-box-shadow { @@ -62,25 +97,6 @@ z-index: 99; } -.cloudimage-360-view-360-icon { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100px; - height: 100px; - margin: auto; - background-color: rgba(255, 255, 255, 0.8); - border-radius: 50%; - box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; - transition: 0.5s all; - color: rgb(80, 80, 80); - text-align: center; - line-height: 100px; - z-index: 2; -} - .cloudimage-360-view-360-circle { position: absolute; left: 0; @@ -90,7 +106,7 @@ margin: auto; pointer-events: none; user-select: none; - transition: 0.5s all; + transition: 200ms all; z-index: 2; } @@ -103,16 +119,20 @@ width: 100%; height: 100%; z-index: 999; - background-color: #FFF; + background-color: #fff; } .cloudimage-360-img-magnifier-glass { - background-color: #FFF; + background-color: #fff; + background-image: radial-gradient( + circle at center, + rgba(255, 255, 255, 0.8), + rgba(240, 240, 240, 0.9) + ); background-repeat: no-repeat; position: absolute; - border: 3px solid #000; + border: 2px solid rgba(0, 0, 0, 0.3); /* Softer border */ border-radius: 50%; - cursor: wait; line-height: 200px; text-align: center; z-index: 1000; @@ -120,6 +140,12 @@ height: 250px; top: -75px; right: -85px; + box-shadow: + 0 8px 16px rgba(0, 0, 0, 0.4), + 0 4px 8px rgba(0, 0, 0, 0.2); + transition: box-shadow 200ms ease; + overflow: hidden; + pointer-events: none; } .cloudimage-360 .cloudimage-360-left, @@ -227,4 +253,4 @@ .cloudimage-360 .cloudimage-360-bottom.not-active { opacity: 0.4; cursor: default; -} \ No newline at end of file +} diff --git a/src/utils/auto-play/get-speed-factor.js b/src/utils/auto-play/get-speed-factor.js index b76eb16..2558a8f 100644 --- a/src/utils/auto-play/get-speed-factor.js +++ b/src/utils/auto-play/get-speed-factor.js @@ -1,6 +1,3 @@ export const getSpeedFactor = (dragSpeed, amount, containerOffset) => { - const containerOffsetWidth = Math.max(containerOffset, 600); - const speedFactor = (dragSpeed / 150) * (36 / amount) * 25 * (containerOffsetWidth / 1500) || 1; - - return Math.floor(speedFactor); + return Math.floor(((((dragSpeed / 150) * 36) / amount) * 25 * containerOffset) / 1500) || 1; }; diff --git a/src/utils/auto-play/get-throttle-time.js b/src/utils/auto-play/get-throttle-time.js new file mode 100644 index 0000000..24a7e4c --- /dev/null +++ b/src/utils/auto-play/get-throttle-time.js @@ -0,0 +1,18 @@ +export const getThrottleTime = (dragSpeed, amount, containerOffset) => { + const baseThrottle = 15; // Base throttle time in ms + const minThrottle = 1; // Minimum throttle time + const maxThrottle = 30; // Maximum throttle time + + // Calculate factors based on input parameters + const containerFactor = Math.max(1, containerOffset / 100); // Adjust the scale factor + const amountFactor = Math.max(1, 100 / amount); // Use a higher divisor to adjust sensitivity + const speedFactor = Math.max(1, dragSpeed / 1000); // Higher divisor for drag speed + + // Dynamic throttle time calculation + let throttleTime = baseThrottle + (containerFactor * amountFactor) / speedFactor; + + // Ensure throttle time is within min and max bounds + throttleTime = Math.min(Math.max(throttleTime, minThrottle), maxThrottle); + + return Math.floor(throttleTime); +}; diff --git a/src/utils/auto-play/is-completed-one-cycle.js b/src/utils/auto-play/is-completed-one-cycle.js index 93bff6b..925f8dc 100644 --- a/src/utils/auto-play/is-completed-one-cycle.js +++ b/src/utils/auto-play/is-completed-one-cycle.js @@ -1,26 +1,26 @@ -import { AUTOPLAY_BEHAVIOR } from '../../constants/auto-play-behavior'; +import { AUTOPLAY_BEHAVIOR } from '../constants'; + +export const isCompletedOneCycle = ({ + autoplayBehavior, + activeImageX, + activeImageY, + amountX, + amountY, + autoplayReverse, +}) => { + const checkEdge = (activeImage, amount) => { + const lastIndex = amount - 1; // Calculate the last index + return autoplayReverse ? activeImage === 0 : activeImage === lastIndex; + }; -export const isCompletedOneCycle = (autoplayBehavior, activeImageX, activeImageY, amountX, amountY, isReversed) => { switch (autoplayBehavior) { case AUTOPLAY_BEHAVIOR.SPIN_XY: - case AUTOPLAY_BEHAVIOR.SPIN_Y: { - const isReachedTheEdge = isReversed ? (activeImageY === 1) - : (activeImageY === amountY); - - if (isReachedTheEdge) return true; - - return false; - } + case AUTOPLAY_BEHAVIOR.SPIN_Y: + return checkEdge(activeImageY, amountY); case AUTOPLAY_BEHAVIOR.SPIN_X: case AUTOPLAY_BEHAVIOR.SPIN_YX: - default: { - const isReachedTheEdge = isReversed ? (activeImageX === 1) - : (activeImageX === amountX); - - if (isReachedTheEdge) return true; - - return false; - } + default: + return checkEdge(activeImageX, amountX); } }; diff --git a/src/utils/auto-play/loop.js b/src/utils/auto-play/loop.js index 3b6933b..bf9c7fd 100644 --- a/src/utils/auto-play/loop.js +++ b/src/utils/auto-play/loop.js @@ -1,53 +1,38 @@ -import { AUTOPLAY_BEHAVIOR } from '../../constants/auto-play-behavior'; +import { AUTOPLAY_BEHAVIOR } from '../constants'; -export const loop = (autoplayBehavior, spinY, reversed, loopTriggers) => { - const { - bottom, top, left, right, - } = loopTriggers; +const handleSpinY = (reversed, { bottom, top }) => { + if (reversed) { + bottom(); + } else { + top(); + } +}; - switch (autoplayBehavior) { - case AUTOPLAY_BEHAVIOR.SPIN_Y: - if (reversed) { - bottom(); - } else { - top(); - } - break; +const handleSpinX = (reversed, { left, right }) => { + if (reversed) { + left(); + } else { + right(); + } +}; +export const loop = ({ autoplayBehavior, spinY, reversed, loopTriggers }) => { + switch (autoplayBehavior) { case AUTOPLAY_BEHAVIOR.SPIN_XY: + case AUTOPLAY_BEHAVIOR.SPIN_YX: if (spinY) { - if (reversed) { - bottom(); - } else { - top(); - } - } else if (reversed) { - left(); + handleSpinY(reversed, loopTriggers); } else { - right(); + handleSpinX(reversed, loopTriggers); } break; - case AUTOPLAY_BEHAVIOR.SPIN_YX: - if (spinY) { - if (reversed) { - bottom(); - } else { - top(); - } - } else if (reversed) { - left(); - } else { - right(); - } + case AUTOPLAY_BEHAVIOR.SPIN_Y: + handleSpinY(reversed, loopTriggers); break; case AUTOPLAY_BEHAVIOR.SPIN_X: default: - if (reversed) { - left(); - } else { - right(); - } + handleSpinX(reversed, loopTriggers); } }; diff --git a/src/utils/class-names/remove-class.js b/src/utils/class-names/remove-class.js index a7b9822..c842338 100644 --- a/src/utils/class-names/remove-class.js +++ b/src/utils/class-names/remove-class.js @@ -1,3 +1,10 @@ export const removeClass = (el, className) => { - if (el.classList) { el.classList.remove(className); } else { el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), ' '); } + if (el.classList) { + el.classList.remove(className); + } else { + el.className = el.className.replace( + new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), + ' ' + ); + } }; diff --git a/src/constants/props-require-reload.js b/src/utils/constants.js similarity index 50% rename from src/constants/props-require-reload.js rename to src/utils/constants.js index ff992f3..a361f8d 100644 --- a/src/constants/props-require-reload.js +++ b/src/utils/constants.js @@ -1,3 +1,18 @@ +export const AUTOPLAY_BEHAVIOR = { + SPIN_X: 'spin-x', + SPIN_Y: 'spin-y', + SPIN_XY: 'spin-xy', + SPIN_YX: 'spin-yx', +}; + +export const FALSY_VALUES = [false, 0, null, undefined, 'false', '0', 'null', 'undefined']; + +export const ORIENTATIONS = { + X: 'x-axis', + Y: 'y-axis', + CENTER: 'center', +}; + export const PROPS_REQUIRE_RELOAD = [ 'folder', //images source 'filenameX', //images source @@ -12,4 +27,9 @@ export const PROPS_REQUIRE_RELOAD = [ 'disableDrag', // events 'controlReverse', // events 'disableDrag', // events -] \ No newline at end of file +]; + +export const LEFT_RIGHT_KEYS = [37, 39]; +export const UP_DOWN_KEYS = [38, 40]; + +export const THROTTLE_TIME = 10; diff --git a/src/utils/container-elements/create-360-view-circle-icon.js b/src/utils/container-elements/create-360-view-circle-icon.js index 0c32901..c5f8a01 100644 --- a/src/utils/container-elements/create-360-view-circle-icon.js +++ b/src/utils/container-elements/create-360-view-circle-icon.js @@ -1,7 +1,8 @@ export const create360ViewCircleIcon = (circleOffset) => { const view360CircleIcon = new Image(); - view360CircleIcon.src = 'https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg'; + view360CircleIcon.src = + 'https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg'; view360CircleIcon.style.bottom = `${circleOffset}%`; view360CircleIcon.className = 'cloudimage-360-view-360-circle'; diff --git a/src/utils/container-elements/create-360-view-icon.js b/src/utils/container-elements/create-360-view-icon.js deleted file mode 100644 index 889673b..0000000 --- a/src/utils/container-elements/create-360-view-icon.js +++ /dev/null @@ -1,8 +0,0 @@ -export const create360ViewIcon = () => { - const view360Icon = document.createElement('div'); - - view360Icon.className = 'cloudimage-360-view-360-icon'; - view360Icon.innerText = '0%'; - - return view360Icon; -}; diff --git a/src/utils/container-elements/create-canvas.js b/src/utils/container-elements/create-canvas.js index 475c87d..a19264a 100644 --- a/src/utils/container-elements/create-canvas.js +++ b/src/utils/container-elements/create-canvas.js @@ -1,7 +1,13 @@ -export const createCanvas = (innerBox) => { +export const createCanvas = (innerBox, event) => { + const { width, height } = event; const canvas = document.createElement('canvas'); + + canvas.width = width; + canvas.height = height; + canvas.style.width = '100%'; - canvas.style.fontSize = '0'; + canvas.style.height = 'auto'; + innerBox.appendChild(canvas); return canvas; diff --git a/src/utils/container-elements/create-close-fullscreen-icon.js b/src/utils/container-elements/create-close-fullscreen-icon.js index f06eb17..fe4711f 100644 --- a/src/utils/container-elements/create-close-fullscreen-icon.js +++ b/src/utils/container-elements/create-close-fullscreen-icon.js @@ -1,6 +1,6 @@ -export const createCloseFullscreenIcon = () => { - const closeFullscreenIcon = document.createElement('div'); - closeFullscreenIcon.className = 'cloudimage-360-close-fullscreen-icon'; +export const createFullscreenIcon = () => { + const closeIcon = document.createElement('div'); + closeIcon.className = 'cloudimage-360-fullscreen-icon'; - return closeFullscreenIcon; + return closeIcon; }; diff --git a/src/utils/container-elements/create-close-icon.js b/src/utils/container-elements/create-close-icon.js new file mode 100644 index 0000000..b59e07a --- /dev/null +++ b/src/utils/container-elements/create-close-icon.js @@ -0,0 +1,7 @@ +export const createCloseIcon = () => { + const fullscreenIcon = document.createElement('div'); + + fullscreenIcon.className = 'cloudimage-360-close-icon'; + + return fullscreenIcon; +}; diff --git a/src/utils/container-elements/create-fullscreen-icon.js b/src/utils/container-elements/create-fullscreen-icon.js deleted file mode 100644 index 478aab8..0000000 --- a/src/utils/container-elements/create-fullscreen-icon.js +++ /dev/null @@ -1,7 +0,0 @@ -export const createFullscreenIcon = () => { - const fullscreenIcon = document.createElement('div'); - - fullscreenIcon.className = 'cloudimage-360-fullscreen-icon'; - - return fullscreenIcon; -}; diff --git a/src/utils/container-elements/create-fullscreen-modal.js b/src/utils/container-elements/create-fullscreen-modal.js index ed4933b..41a8b48 100644 --- a/src/utils/container-elements/create-fullscreen-modal.js +++ b/src/utils/container-elements/create-fullscreen-modal.js @@ -5,12 +5,11 @@ export const createFullscreenModal = (container) => { const fullscreenContainer = container.cloneNode(); - fullscreenContainer.style.height = '100%'; + fullscreenContainer.style.height = '100vh'; fullscreenContainer.style.maxHeight = '100%'; fullscreenModal.appendChild(fullscreenContainer); - window.document.body.style.overflow = 'hidden'; window.document.body.appendChild(fullscreenModal); return fullscreenContainer; diff --git a/src/utils/container-elements/create-initial-icon.js b/src/utils/container-elements/create-initial-icon.js new file mode 100644 index 0000000..19a6e6d --- /dev/null +++ b/src/utils/container-elements/create-initial-icon.js @@ -0,0 +1,8 @@ +export const createInitialIcon = () => { + const view360Icon = document.createElement('div'); + + view360Icon.className = 'cloudimage-initial-icon'; + view360Icon.innerText = '360°'; + + return view360Icon; +}; diff --git a/src/utils/container-elements/create-loader.js b/src/utils/container-elements/create-loader.js index f1e82ce..5cfde2c 100644 --- a/src/utils/container-elements/create-loader.js +++ b/src/utils/container-elements/create-loader.js @@ -1,7 +1,13 @@ export const createLoader = (innerBox) => { const loader = document.createElement('div'); - loader.className = 'cloudimage-360-loader'; + loader.className = 'cloudimage-initial-icon'; + // Percentage text element + const percentageText = document.createElement('span'); + percentageText.className = 'percentage'; + percentageText.innerText = '0%'; + + loader.appendChild(percentageText); innerBox.appendChild(loader); return loader; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index 65434d0..9a5dcf1 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -1,8 +1,8 @@ export { create360ViewCircleIcon } from './create-360-view-circle-icon'; -export { create360ViewIcon } from './create-360-view-icon'; +export { createInitialIcon } from './create-initial-icon'; export { createCanvas } from './create-canvas'; -export { createCloseFullscreenIcon } from './create-close-fullscreen-icon'; -export { createFullscreenIcon } from './create-fullscreen-icon'; +export { createCloseIcon } from './create-close-icon'; +export { createFullscreenIcon } from './create-close-fullscreen-icon'; export { createIconsContainer } from './create-icons-container'; export { createInnerBox } from './create-inner-box'; export { createMagnifierIcon } from './create-magnifier-icon'; @@ -10,4 +10,4 @@ export { createBoxShadow } from './create-box-shadow'; export { createLoader } from './create-loader'; export { applyStylesToContainer } from './apply-styles-to-container'; export { createFullscreenModal } from './create-fullscreen-modal'; -export { removeChildFromParent } from './remove-child-from-parent'; \ No newline at end of file +export { removeElementFromContainer } from './remove-element-from-container'; diff --git a/src/utils/container-elements/remove-child-from-parent.js b/src/utils/container-elements/remove-child-from-parent.js deleted file mode 100644 index 7dd3121..0000000 --- a/src/utils/container-elements/remove-child-from-parent.js +++ /dev/null @@ -1,7 +0,0 @@ -export const removeChildFromParent = (parent, child) => { - if (parent && child) { - try { - parent.removeChild(child); - } catch {} - } -} \ No newline at end of file diff --git a/src/utils/container-elements/remove-element-from-container.js b/src/utils/container-elements/remove-element-from-container.js new file mode 100644 index 0000000..4df69b9 --- /dev/null +++ b/src/utils/container-elements/remove-element-from-container.js @@ -0,0 +1,7 @@ +export const removeElementFromContainer = (container, selector) => { + const element = container.querySelector(selector); + + if (element) { + element.parentNode.removeChild(element); + } +}; diff --git a/src/utils/controls/get-item-skipped.js b/src/utils/controls/get-item-skipped.js index 362cfee..ee5608c 100644 --- a/src/utils/controls/get-item-skipped.js +++ b/src/utils/controls/get-item-skipped.js @@ -1,7 +1,2 @@ -export const getItemSkipped = (currentPosition, movementStart, speedFactor) => { - const itemsSkipped = Math.floor( - (currentPosition - movementStart) / speedFactor, - ) || 1; - - return itemsSkipped; -}; +export const getItemSkipped = (previousPosition, currentPosition, speedFactor = 1) => + Math.abs(Math.floor((currentPosition - previousPosition) / speedFactor)) || 1; diff --git a/src/utils/controls/init-controls.js b/src/utils/controls/init-controls.js index bb95731..bdbd8a8 100644 --- a/src/utils/controls/init-controls.js +++ b/src/utils/controls/init-controls.js @@ -1,21 +1,22 @@ import { addClass } from '../class-names/add-class'; export const initControls = (controlsConfig, controlsTriggers) => { - const { - container, controlReverse, spinReverse, stopAtEdges, - } = controlsConfig; + const { container, controlReverse, spinReverse, stopAtEdges } = + controlsConfig; - const { - onRightStart, onLeftStart, onTopStart, onBottomStart, - onEventEnd, - } = controlsTriggers; + const { onRightStart, onLeftStart, onTopStart, onBottomStart, onEventEnd } = + controlsTriggers; const controlElements = {}; const isReverse = controlReverse ? !spinReverse : spinReverse; - const left = container.querySelectorAll('.cloudimage-360-left, .cloudimage-360-prev')[0]; + const left = container.querySelectorAll( + '.cloudimage-360-left, .cloudimage-360-prev' + )[0]; - const right = container.querySelectorAll('.cloudimage-360-right, .cloudimage-360-next')[0]; + const right = container.querySelectorAll( + '.cloudimage-360-right, .cloudimage-360-next' + )[0]; const top = container.querySelector('.cloudimage-360-top'); @@ -24,7 +25,11 @@ export const initControls = (controlsConfig, controlsTriggers) => { if (left) { left.style.display = 'block'; left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart); - left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, { passive: true }); + left.addEventListener( + 'touchstart', + isReverse ? onRightStart : onLeftStart, + { passive: true } + ); left.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd); left.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd); @@ -34,7 +39,11 @@ export const initControls = (controlsConfig, controlsTriggers) => { if (right) { right.style.display = 'block'; right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart); - right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, { passive: true }); + right.addEventListener( + 'touchstart', + isReverse ? onLeftStart : onRightStart, + { passive: true } + ); right.addEventListener('mouseup', onEventEnd); right.addEventListener('touchend', onEventEnd); @@ -53,8 +62,14 @@ export const initControls = (controlsConfig, controlsTriggers) => { if (bottom) { bottom.style.display = 'block'; - bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart); - bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart); + bottom.addEventListener( + 'mousedown', + isReverse ? onTopStart : onBottomStart + ); + bottom.addEventListener( + 'touchstart', + isReverse ? onTopStart : onBottomStart + ); bottom.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd); bottom.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd); diff --git a/src/utils/delay.js b/src/utils/delay.js new file mode 100644 index 0000000..a583a50 --- /dev/null +++ b/src/utils/delay.js @@ -0,0 +1,9 @@ +export const delay = (func, ms = 150) => { + let timer; + return function (...args) { + clearTimeout(timer); + timer = setTimeout(() => { + func.apply(this, args); + }, ms); + }; +}; diff --git a/src/utils/hotspots/attach-events/hide-popup.js b/src/utils/hotspots/attach-events/hide-popup.js index 331eed2..6b7d118 100644 --- a/src/utils/hotspots/attach-events/hide-popup.js +++ b/src/utils/hotspots/attach-events/hide-popup.js @@ -3,4 +3,4 @@ export const hidePopup = (popup, isVisible) => { popup.removeAttribute('data-show'); popup.removeAttribute('data-cloudimage-360-show'); } -}; \ No newline at end of file +}; diff --git a/src/utils/hotspots/attach-events/show-popup.js b/src/utils/hotspots/attach-events/show-popup.js index 8022907..4c0bcf0 100644 --- a/src/utils/hotspots/attach-events/show-popup.js +++ b/src/utils/hotspots/attach-events/show-popup.js @@ -3,4 +3,4 @@ export const showPopup = (popup, popperInstance) => { popup.setAttribute('data-cloudimage-360-show', ''); popperInstance.update(); -} \ No newline at end of file +}; diff --git a/src/utils/hotspots/configs-error-handler.js b/src/utils/hotspots/configs-error-handler.js index dcb888e..568a5ed 100644 --- a/src/utils/hotspots/configs-error-handler.js +++ b/src/utils/hotspots/configs-error-handler.js @@ -1,20 +1,24 @@ export const configsErrorHandler = (hotspotProps) => { const { variant = {} } = hotspotProps; - const { - url, - title, - anchorId, - images, - description, - moreDetailsUrl - } = variant; + const { url, title, anchorId, images, description, moreDetailsUrl } = variant; if (url && !title) { - console.error('Cloudimage-360: Hotspot config with variant link must have title for the link'); + console.error( + 'Cloudimage-360: Hotspot config with variant link must have title for the link' + ); } - if (!title && !url && !anchorId && !images && !description && !moreDetailsUrl) { - console.error('Cloudimage-360: Hotspot config with custom variant must provide anchorId'); + if ( + !title && + !url && + !anchorId && + !images && + !description && + !moreDetailsUrl + ) { + console.error( + 'Cloudimage-360: Hotspot config with custom variant must provide anchorId' + ); } }; diff --git a/src/utils/hotspots/create-popper-instace.js b/src/utils/hotspots/create-popper-instace.js index 0fa01f8..1b24168 100644 --- a/src/utils/hotspots/create-popper-instace.js +++ b/src/utils/hotspots/create-popper-instace.js @@ -25,6 +25,5 @@ export const createPopperInstance = (popper, popupProps, container) => { ], }); - return popperInstance; }; diff --git a/src/utils/hotspots/elements/create-hotspot-icon.js b/src/utils/hotspots/elements/create-hotspot-icon.js index 31d1853..14ae84a 100644 --- a/src/utils/hotspots/elements/create-hotspot-icon.js +++ b/src/utils/hotspots/elements/create-hotspot-icon.js @@ -2,10 +2,17 @@ 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, popup, popperInstance) => { +export const createHotspotIcon = ( + container, + hotspotConfig, + popup, + popperInstance +) => { const { indicatorSelector, variant } = hotspotConfig; const { url, anchorId } = variant; - const { popupProps: { open = false } } = hotspotConfig; + const { + popupProps: { open = false }, + } = hotspotConfig; let isVisible; const hotspotIcon = document.createElement('div'); @@ -25,7 +32,7 @@ export const createHotspotIcon = (container, hotspotConfig, popup, popperInstanc isVisible = false; !open && hidePopup(popup, isVisible); - } + }; hotspotIcon.onclick = (e) => e.stopPropagation(); @@ -38,9 +45,8 @@ export const createHotspotIcon = (container, hotspotConfig, popup, popperInstanc if (!open) { hideEvents.forEach((event) => { - hotspotIcon.addEventListener( - event, - () => setTimeout(() => hidePopup(popup, isVisible), 160) + hotspotIcon.addEventListener(event, () => + setTimeout(() => hidePopup(popup, isVisible), 160) ); }); } diff --git a/src/utils/hotspots/elements/create-hotspot-popup-link.js b/src/utils/hotspots/elements/create-hotspot-popup-link.js index 0983831..dbdabb2 100644 --- a/src/utils/hotspots/elements/create-hotspot-popup-link.js +++ b/src/utils/hotspots/elements/create-hotspot-popup-link.js @@ -1,7 +1,5 @@ export const createHotspotPopupLink = (variant) => { - const { - url, title, newTab, - } = variant; + const { url, title, newTab } = variant; const hyperLink = document.createElement('a'); diff --git a/src/utils/hotspots/elements/create-hotspots.js b/src/utils/hotspots/elements/create-hotspots.js index 7e8a755..38ca594 100644 --- a/src/utils/hotspots/elements/create-hotspots.js +++ b/src/utils/hotspots/elements/create-hotspots.js @@ -8,7 +8,12 @@ export const createHotspots = (container, hotspotsProps) => { const popup = createPopup(container, hotspotProps, popupProps); const popperInstance = createPopperInstance(popup, popupProps, container); - const hotspotIcon = createHotspotIcon(container, hotspotProps, popup, popperInstance); + const hotspotIcon = createHotspotIcon( + container, + hotspotProps, + popup, + popperInstance + ); popperInstance.state.elements.reference = hotspotIcon; popperInstance.update(); diff --git a/src/utils/hotspots/elements/create-images-carousel.js b/src/utils/hotspots/elements/create-images-carousel.js index c39cd77..7ae468c 100644 --- a/src/utils/hotspots/elements/create-images-carousel.js +++ b/src/utils/hotspots/elements/create-images-carousel.js @@ -18,6 +18,5 @@ export const createImagesCarousel = (images, popup, container) => { imagesCarousel.appendChild(carouselImage); }); - return [imagesCarousel, carouselDots]; }; diff --git a/src/utils/hotspots/elements/create-model-elements.js b/src/utils/hotspots/elements/create-model-elements.js index 4b5f56c..6054e3a 100644 --- a/src/utils/hotspots/elements/create-model-elements.js +++ b/src/utils/hotspots/elements/create-model-elements.js @@ -9,7 +9,7 @@ export const createModalElements = (variant, container, popup) => { title, description, moreDetailsUrl, - moreDetailsTitle = 'Read more' + moreDetailsTitle = 'Read more', } = variant; const modalWrapper = document.createElement('div'); @@ -17,7 +17,11 @@ export const createModalElements = (variant, container, popup) => { if (images) { const imagesCarouselWrapper = document.createElement('div'); - const [imagesCarousel, carouselDots] = createImagesCarousel(images, popup, container); + const [imagesCarousel, carouselDots] = createImagesCarousel( + images, + popup, + container + ); imagesCarouselWrapper.appendChild(imagesCarousel); diff --git a/src/utils/hotspots/elements/create-popup.js b/src/utils/hotspots/elements/create-popup.js index 46b4905..02178d0 100644 --- a/src/utils/hotspots/elements/create-popup.js +++ b/src/utils/hotspots/elements/create-popup.js @@ -20,13 +20,18 @@ export const createPopup = (container, hotspotConfig, popupProps) => { popup.onclick = (e) => e.stopPropagation(); - if (typeof variant === 'object' && images || description || moreDetailsUrl || (title && !url)) { + if ( + (typeof variant === 'object' && images) || + description || + moreDetailsUrl || + (title && !url) + ) { createModalElements(variant, container, popup); } else if (url) { const hotspotPopupLink = createHotspotPopupLink(variant); popup.appendChild(hotspotPopupLink); - } else if (typeof variant === 'string'){ + } else if (typeof variant === 'string') { try { const popupNode = getPopupNode(variant); const userPopup = popupNode.cloneNode(true); @@ -34,7 +39,9 @@ export const createPopup = (container, hotspotConfig, popupProps) => { popup.appendChild(userPopup); popupNode.parentNode.removeChild(popupNode); } catch { - console.error(`Cloudimage-360: Element with anchorId '${anchorId}' not exist in the DOM`); + console.error( + `Cloudimage-360: Element with anchorId '${anchorId}' not exist in the DOM` + ); } } diff --git a/src/utils/hotspots/elements/create-read-more-btn.js b/src/utils/hotspots/elements/create-read-more-btn.js index 23e31a9..3046ce6 100644 --- a/src/utils/hotspots/elements/create-read-more-btn.js +++ b/src/utils/hotspots/elements/create-read-more-btn.js @@ -8,4 +8,4 @@ export const createReadMoreBtn = (moreDetailsUrl, moreDetailsTitle) => { readMoreBtn.target = '_blank'; return readMoreBtn; -} \ No newline at end of file +}; diff --git a/src/utils/hotspots/generate-hotspots-configs.js b/src/utils/hotspots/generate-hotspots-configs.js index 73ad709..71d7181 100644 --- a/src/utils/hotspots/generate-hotspots-configs.js +++ b/src/utils/hotspots/generate-hotspots-configs.js @@ -19,11 +19,11 @@ export const generateHotspotsConfigs = (hotspotsProps) => { if (!anchorId) { const uniqueID = Math.floor(Math.random() * 10000); - anchorId = `cloudimage-360-${uniqueID}` + anchorId = `cloudimage-360-${uniqueID}`; } const hotspotConfig = { - variant : { ...variant, anchorId }, + variant: { ...variant, anchorId }, popupProps: popupConfig, positions, indicatorSelector, diff --git a/src/utils/hotspots/generate-popup-config.js b/src/utils/hotspots/generate-popup-config.js index 416bf2d..f6ee4c3 100644 --- a/src/utils/hotspots/generate-popup-config.js +++ b/src/utils/hotspots/generate-popup-config.js @@ -7,7 +7,6 @@ export const generatePopupConfig = (popupProps) => { open = false, } = popupProps; - const popupConfig = { popupSelector, arrow, diff --git a/src/utils/hotspots/prepare-hotspots-positions.js b/src/utils/hotspots/prepare-hotspots-positions.js index e8a6e9d..196f4c0 100644 --- a/src/utils/hotspots/prepare-hotspots-positions.js +++ b/src/utils/hotspots/prepare-hotspots-positions.js @@ -1,18 +1,27 @@ import { fillEmptyCoordWithPrevious } from './fill-empty-coord-with-previous'; -export const prepareHotspotsPositions = (positions) => positions.reduce((accumulate, current, currentIndex) => { - const isIncludesXcoord = !!current?.xCoord; - const isIncludesYcoord = !!current?.yCoord; +export const prepareHotspotsPositions = (positions) => + positions.reduce((accumulate, current, currentIndex) => { + const isIncludesXcoord = !!current?.xCoord; + const isIncludesYcoord = !!current?.yCoord; - if (!isIncludesXcoord) { - current.xCoord = fillEmptyCoordWithPrevious(positions, currentIndex, 'xCoord'); - } + if (!isIncludesXcoord) { + current.xCoord = fillEmptyCoordWithPrevious( + positions, + currentIndex, + 'xCoord' + ); + } - if (!isIncludesYcoord) { - current.yCoord = fillEmptyCoordWithPrevious(positions, currentIndex, 'yCoord'); - } + if (!isIncludesYcoord) { + current.yCoord = fillEmptyCoordWithPrevious( + positions, + currentIndex, + 'yCoord' + ); + } - accumulate.push(current); + accumulate.push(current); - return accumulate; -}, []); + return accumulate; + }, []); diff --git a/src/utils/hotspots/toggle-popup-events.js b/src/utils/hotspots/toggle-popup-events.js index 262e587..e972e3a 100644 --- a/src/utils/hotspots/toggle-popup-events.js +++ b/src/utils/hotspots/toggle-popup-events.js @@ -1,8 +1,9 @@ -import { isTrue } from "../../ci360.utils"; -import { getHotspotIcon } from "./get-hotspot-icon"; +import { isTrue } from '../../ci360.utils'; +import { getHotspotIcon } from './get-hotspot-icon'; export const togglePopupEvents = (hotspotsProps, event, isMouseDown) => { - const iClickOnHotspotIcon = event && isTrue(event.target, 'data-cloudimage-360-hotspot'); + const iClickOnHotspotIcon = + event && isTrue(event.target, 'data-cloudimage-360-hotspot'); if (iClickOnHotspotIcon) return; @@ -14,4 +15,4 @@ export const togglePopupEvents = (hotspotsProps, event, isMouseDown) => { hotspotIcon.style.pointerEvents = isMouseDown ? 'none' : 'all'; }); -} +}; diff --git a/src/utils/hotspots/update-hotspot-icon-position.js b/src/utils/hotspots/update-hotspot-icon-position.js index 3b7b9f5..f7b8c97 100644 --- a/src/utils/hotspots/update-hotspot-icon-position.js +++ b/src/utils/hotspots/update-hotspot-icon-position.js @@ -1,4 +1,10 @@ -export const updateHotspotIconPosition = (container, initialDimensions, icon, xCoord, yCoord) => { +export const updateHotspotIconPosition = ( + container, + initialDimensions, + icon, + xCoord, + yCoord +) => { icon.style.visibility = 'visible'; icon.style.opacity = 1; icon.style.zIndex = 100; @@ -9,8 +15,8 @@ export const updateHotspotIconPosition = (container, initialDimensions, icon, xC const positionXRatio = container.offsetWidth / initialDimensions[0]; const positionYRatio = container.offsetHeight / initialDimensions[1]; - const translateX = `${(positionXRatio * xCoord)}px`; - const translateY = `${(positionYRatio * yCoord)}px`; + const translateX = `${positionXRatio * xCoord}px`; + const translateY = `${positionYRatio * yCoord}px`; icon.style.transform = `translate3d(${translateX}, ${translateY}, 0)`; }; diff --git a/src/utils/hotspots/update-hotspots.js b/src/utils/hotspots/update-hotspots.js index 4af5d84..ef072c0 100644 --- a/src/utils/hotspots/update-hotspots.js +++ b/src/utils/hotspots/update-hotspots.js @@ -4,10 +4,15 @@ import { updateHotspotIconPosition } from './update-hotspot-icon-position'; import { hideHotspotIcon } from './hide-hotspot-icon'; import { getHotspotOriantaion } from './get-hotspot-orientation'; -export const updateHotspots = (container, hotspotsProps, activeImageX = 0, activeImageY = 0, movingDirection = 'x-axis') => { +export const updateHotspots = ( + container, + hotspotsProps, + activeImageX = 0, + activeImageY = 0, + movingDirection = 'x-axis' +) => { hotspotsProps.forEach((hotspotProps) => { - const { positions, initialDimensions, orientation, variant - } = hotspotProps; + const { positions, initialDimensions, orientation, variant } = hotspotProps; const { anchorId } = variant; const hotspotOriantaion = getHotspotOriantaion(movingDirection); @@ -15,15 +20,22 @@ export const updateHotspots = (container, hotspotsProps, activeImageX = 0, activ const hotspotsPositions = prepareHotspotsPositions(positions); - const currentPosition = hotspotsPositions - .find((hotspotPosition) => hotspotPosition.imageIndex === currentImageIndex); + const currentPosition = hotspotsPositions.find( + (hotspotPosition) => hotspotPosition.imageIndex === currentImageIndex + ); const hotspotIcon = getHotspotIcon(anchorId); if (currentPosition && hotspotOriantaion === orientation) { const { xCoord = 0, yCoord = 0 } = currentPosition; - updateHotspotIconPosition(container, initialDimensions, hotspotIcon, xCoord, yCoord); + updateHotspotIconPosition( + container, + initialDimensions, + hotspotIcon, + xCoord, + yCoord + ); } else { hideHotspotIcon(hotspotIcon); } diff --git a/src/utils/image-src/generate-cdn-path.js b/src/utils/image-src/generate-cdn-path.js new file mode 100644 index 0000000..40998d1 --- /dev/null +++ b/src/utils/image-src/generate-cdn-path.js @@ -0,0 +1,37 @@ +import { FALSY_VALUES } from '../constants'; +import getSizeAccordingToPixelRatio from '../responsive/get-size-according-to-pixel-ratio'; + +const buildCdnUrl = (src, ciToken, finalApiVersion) => { + const isCloudImageUrl = new URL(src).origin.includes('cloudimg'); + return isCloudImageUrl ? src : `https://${ciToken}.cloudimg.io/${finalApiVersion}${src}`; +}; + +const buildTransformationParams = ({ ciTransformation, loadOriginalImages, responsiveWidth, ciFilters }) => { + const sizeParam = loadOriginalImages ? '' : `width=${responsiveWidth}`; + const transformation = ciTransformation || sizeParam; + const filters = ciFilters ? `&f=${ciFilters}` : ''; + return `${transformation}${filters}`; +}; + +export const generateCdnPath = (srcConfig, loadOriginalImages) => { + const { container, folder, apiVersion, filename = '', ciParams } = srcConfig; + const { ciToken, ciFilters, ciTransformation } = ciParams || {}; + + const src = `${folder}${filename}`; + + if (!ciToken) return src; + + const version = !FALSY_VALUES.includes(apiVersion) ? apiVersion : null; + const finalApiVersion = version ? `${version}/` : ''; + const responsiveWidth = getSizeAccordingToPixelRatio(container.offsetWidth); + + const cdn = buildCdnUrl(src, ciToken, finalApiVersion); + const transformationParams = buildTransformationParams({ + ciTransformation, + loadOriginalImages, + responsiveWidth, + ciFilters, + }); + + return `${cdn}${transformationParams ? '?' : ''}${transformationParams}`; +}; diff --git a/src/utils/image-src/generate-high-preview-cdn-url.js b/src/utils/image-src/generate-high-preview-cdn-url.js new file mode 100644 index 0000000..5c2ece1 --- /dev/null +++ b/src/utils/image-src/generate-high-preview-cdn-url.js @@ -0,0 +1,3 @@ +import removeParamByRegex from './removeParamByRegex'; + +export const generateHighPreviewCdnUrl = (url) => removeParamByRegex(url, 'width'); diff --git a/src/utils/image-src/generate-images-path.js b/src/utils/image-src/generate-images-path.js deleted file mode 100644 index f4d0ce4..0000000 --- a/src/utils/image-src/generate-images-path.js +++ /dev/null @@ -1,30 +0,0 @@ -import { FALSY_VALUES } from '../../constants/falsy-values'; -import { getResponsiveWidthOfContainer } from '../responsive/get-responsive-width-of-container'; -import { getSizeAccordingToPixelRatio } from '../responsive/get-size-according-to-pixel-ratio'; - -export const generateImagesPath = (srcConfig, loadOriginalImages) => { - const { - container, folder, apiVersion, filename = '', ciParams, - } = srcConfig; - - const { ciToken, ciFilters, ciTransformation } = ciParams || {}; - - let src = `${folder}${filename}`; - - if (ciToken) { - const imageOffsetWidth = container.offsetWidth; - - const version = !FALSY_VALUES.includes(apiVersion) ? apiVersion : null; - - const finalApiVersion = version ? `${version}/` : ''; - const ciSizeNext = getSizeAccordingToPixelRatio(getResponsiveWidthOfContainer(imageOffsetWidth)); - - const isCloudImageUrl = new URL(src).origin.includes('cloudimg'); - const cdn = isCloudImageUrl ? src - : `https://${ciToken}.cloudimg.io/${finalApiVersion}${src}`; - - src = `${cdn}?${ciTransformation || `${!loadOriginalImages ? `width=${ciSizeNext}`: ''} `}${ciFilters ? `&f=${ciFilters}` : ''}`; - } - - return src; -}; diff --git a/src/utils/image-src/generate-low-preview-cdn-url.js b/src/utils/image-src/generate-low-preview-cdn-url.js new file mode 100644 index 0000000..d7e6903 --- /dev/null +++ b/src/utils/image-src/generate-low-preview-cdn-url.js @@ -0,0 +1,10 @@ +import removeParamByRegex from './removeParamByRegex'; + +const generateLowPreviewCdnUrl = (cdnUrl) => { + const cleanedCdnUrl = removeParamByRegex(cdnUrl, 'width'); + const separator = cleanedCdnUrl.includes('?') ? '&' : '?'; + + return `${cleanedCdnUrl}${separator}width=${150 * devicePixelRatio}`; +}; + +export default generateLowPreviewCdnUrl; diff --git a/src/utils/image-src/is-props-change-require-reload.js b/src/utils/image-src/is-props-change-require-reload.js index a7587f2..2e0a76b 100644 --- a/src/utils/image-src/is-props-change-require-reload.js +++ b/src/utils/image-src/is-props-change-require-reload.js @@ -1,15 +1,13 @@ -import { PROPS_REQUIRE_RELOAD } from "../../constants/props-require-reload"; +import { PROPS_REQUIRE_RELOAD } from '../constants'; -export const isPropsChangeRequireReload = (currentProps, changedProps) => ( - Object.keys(changedProps) - .reduce((acc, current) => { - const isPropChanged = currentProps[current] !== changedProps[current]; - const isSrcProp = PROPS_REQUIRE_RELOAD.includes(current); +export const isPropsChangeRequireReload = (currentProps, changedProps) => + Object.keys(changedProps).reduce((acc, current) => { + const isPropChanged = currentProps[current] !== changedProps[current]; + const isSrcProp = PROPS_REQUIRE_RELOAD.includes(current); - if (isSrcProp && isPropChanged) { - acc = true; - } + if (isSrcProp && isPropChanged) { + acc = true; + } - return acc; - }, false) -); \ No newline at end of file + return acc; + }, false); diff --git a/src/utils/image-src/removeParamByRegex.js b/src/utils/image-src/removeParamByRegex.js new file mode 100644 index 0000000..3babf11 --- /dev/null +++ b/src/utils/image-src/removeParamByRegex.js @@ -0,0 +1,14 @@ +const removeParamByRegex = (url, paramToRemove) => { + const [base, query] = url.split('?'); + if (!query) return url; + + const regex = new RegExp(`^${paramToRemove}=|&${paramToRemove}=`); + const cleanedQuery = query + .split('&') + .filter((param) => !regex.test(param)) + .join('&'); + + return cleanedQuery ? `${base}?${cleanedQuery}` : base; +}; + +export default removeParamByRegex; diff --git a/src/utils/index.js b/src/utils/index.js index 7d1f605..e855554 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,14 +1,15 @@ export { isPropsChangeRequireReload } from './image-src/is-props-change-require-reload'; +export { generateCdnPath } from './image-src/generate-cdn-path'; +export { generateHighPreviewCdnUrl } from './image-src/generate-high-preview-cdn-url'; -export { generateImagesPath } from './image-src/generate-images-path'; export { preloadImages } from './load-images/preload-images'; export { preloadOriginalImages } from './load-images/preload-original-images'; -export { initLazyload } from './load-images/lazyload/init-lazyload' +export { initLazyload } from './load-images/lazyload/init-lazyload'; +export { loadImage } from './load-images/load-image'; export { contain } from './responsive/contain'; export { getImageAspectRatio } from './responsive/get-image-aspect-ratio'; -export { getCurrentOriginalImage } from './magnify/get-current-original-image'; export { magnify } from './magnify/magnify'; export { generateZoomInSteps } from './zoom/generate-zoom-in-steps'; @@ -21,6 +22,8 @@ export { isCompletedOneCycle } from './auto-play/is-completed-one-cycle'; export { addClass } from './class-names/add-class'; export { removeClass } from './class-names/remove-class'; +export { shouldSwitchSpinDirection } from './spin/should-switch-spin-direction'; +export { switchSpinDirection } from './spin/switch-spin-direction'; export { getMovingDirection } from './spin-y/get-moving-direction'; export { getItemSkipped } from './controls/get-item-skipped'; @@ -33,3 +36,5 @@ export { createHotspots } from './hotspots/elements/create-hotspots'; export { generateHotspotsConfigs } from './hotspots/generate-hotspots-configs'; export { isMouseOnHotspot } from './hotspots/is-mouse-on-hotspot'; export { hideHotspotsIcons } from './hotspots/hide-hotspots-icons'; + +export { delay } from './delay'; diff --git a/src/utils/load-images/generate-images-cdn-links.js b/src/utils/load-images/generate-images-cdn-links.js new file mode 100644 index 0000000..e826dfd --- /dev/null +++ b/src/utils/load-images/generate-images-cdn-links.js @@ -0,0 +1,4 @@ +import { pad } from './pad'; + +export const generateImagesCdnLinks = (cdnPath, { amount = 0, indexZeroBase = 0 } = {}) => + Array.from({ length: amount }, (_, index) => cdnPath.replace('{index}', pad(index + 1, indexZeroBase))); diff --git a/src/utils/load-images/images-from-folder/prepare-images-from-folder.js b/src/utils/load-images/images-from-folder/prepare-images-from-folder.js deleted file mode 100644 index 2131a13..0000000 --- a/src/utils/load-images/images-from-folder/prepare-images-from-folder.js +++ /dev/null @@ -1,21 +0,0 @@ -import { AND_SYMBOL_REGEX, ORGINAL_SIZE_REGEX } from '../../../constants/regex'; -import { pad } from '../pad'; - -export const prepareImagesFromFolder = (imagesSrc, srcConfig, loadOriginalImages) => { - const { amount, indexZeroBase } = srcConfig || {}; - - return [...new Array(amount)].map((_item, index) => { - const nextZeroFilledIndex = pad(index + 1, indexZeroBase); - const imageSrc = imagesSrc.replace('{index}', nextZeroFilledIndex); - - if (loadOriginalImages) { - const imageOriginalSrc = imageSrc - .replace(ORGINAL_SIZE_REGEX, '') - .replace(AND_SYMBOL_REGEX, '?'); - - return imageOriginalSrc; - } - - return imageSrc; - }); -}; diff --git a/src/utils/load-images/images-from-list/prepare-images-from-list.js b/src/utils/load-images/images-from-list/prepare-images-from-list.js index d953126..ce0a044 100644 --- a/src/utils/load-images/images-from-list/prepare-images-from-list.js +++ b/src/utils/load-images/images-from-list/prepare-images-from-list.js @@ -1,6 +1,6 @@ -import { generateImagesPath } from '../../image-src/generate-images-path'; +import { generateCdnPath } from '../../image-src/generate-cdn-path'; -export const prepareImagesFromList = (images, srcConfig, loadOriginalImages ) => { +export const prepareImagesFromList = (images, srcConfig, loadOriginalImages) => { const { folder } = srcConfig; return images.map((src) => { @@ -8,6 +8,6 @@ export const prepareImagesFromList = (images, srcConfig, loadOriginalImages ) => nextSrcConfig.folder = /(http(s?)):\/\//gi.test(src) ? '' : folder; nextSrcConfig.filename = src; - return generateImagesPath(nextSrcConfig, loadOriginalImages); + return generateCdnPath(nextSrcConfig, loadOriginalImages); }); }; diff --git a/src/utils/load-images/lazyload/init-lazyload.js b/src/utils/load-images/lazyload/init-lazyload.js index ad9a0c5..25a0286 100644 --- a/src/utils/load-images/lazyload/init-lazyload.js +++ b/src/utils/load-images/lazyload/init-lazyload.js @@ -1,38 +1,57 @@ -import { prepareFirstImageFromFolder } from "./prepare-first-image/prepare-first-image-from-folder"; -import { prepareFirstImageFromList } from "./prepare-first-image/prepare-first-image-from-list"; +import generateLowPreviewCdnUrl from '../../image-src/generate-low-preview-cdn-url'; +import getFirstCdnImage from './prepare-first-image/get-first-cdn-image'; +import getFirstCdnImageFromList from './prepare-first-image/get-first-cdn-mage-from-list'; -export const initLazyload = (imagesSrc, srcConfig, cb) => { - const { imageList, lazySelector, innerBox } = srcConfig || {}; - let firstImageSrc; +const getFirstImageSrc = (imagesSrc, srcConfig) => { + const { imageList, indexZeroBase } = srcConfig; if (imageList) { try { const images = JSON.parse(imageList); - - firstImageSrc = prepareFirstImageFromList(images, srcConfig); + return getFirstCdnImageFromList(images, srcConfig); } catch (error) { console.error(`Wrong format in image-list attribute: ${error.message}`); } - } else { - firstImageSrc = prepareFirstImageFromFolder(imagesSrc, srcConfig); } - const image = new Image(); - - image.setAttribute('data-src', firstImageSrc); - image.style.position = 'absolute'; - image.style.top = 0; - image.style.left = 0; - image.style.width = '100%'; - image.style.maxWidth = '100%'; - image.style.maxHeight = '100%'; - + return getFirstCdnImage(imagesSrc, indexZeroBase); +}; - if (lazySelector) image.className = lazySelector; +const createImage = (src, lazySelector) => { + const image = new Image(); + image.setAttribute('data-src', src); + image.style.cssText = ` + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + filter: blur(10px); + `; + + if (lazySelector) image.className = `${lazySelector} cloudimage-lazy`; + + return image; +}; + +export const initLazyload = (cdnPath, srcConfig, onLoad) => { + const { lazySelector, innerBox } = srcConfig || {}; + + const firstImageSrc = getFirstImageSrc(cdnPath, srcConfig); + const lowPreviewSrc = generateLowPreviewCdnUrl(firstImageSrc); + const image = createImage(lowPreviewSrc, lazySelector); + + image.onload = (event) => { + if (onLoad) { + onLoad({ + event: event, + width: image.width, + height: image.height, + naturalWidth: image.naturalWidth, + naturalHeight: image.naturalHeight, + src: lowPreviewSrc, + }); + } + }; innerBox.appendChild(image); - - if (cb) { - image.onload = () => cb(image); - } -} \ No newline at end of file +}; diff --git a/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-image.js b/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-image.js new file mode 100644 index 0000000..3bfec78 --- /dev/null +++ b/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-image.js @@ -0,0 +1,9 @@ +import { pad } from '../../pad'; + +const getFirstCdnImage = (cdnPath, indexZeroBase) => { + const nextZeroFilledIndex = pad(1, indexZeroBase); + + return cdnPath.replace('{index}', nextZeroFilledIndex); +}; + +export default getFirstCdnImage; diff --git a/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-mage-from-list.js b/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-mage-from-list.js new file mode 100644 index 0000000..f917b20 --- /dev/null +++ b/src/utils/load-images/lazyload/prepare-first-image/get-first-cdn-mage-from-list.js @@ -0,0 +1,14 @@ +import { generateCdnPath } from '../../../image-src/generate-cdn-path'; + +const getFirstCdnImageFromList = (images, srcConfig) => { + const [firstImageSrc] = images; + const isAbsoluteUrl = /(https?):\/\//i.test(firstImageSrc); + + return generateCdnPath({ + ...srcConfig, + folder: isAbsoluteUrl ? '' : srcConfig.folder, + filename: firstImageSrc, + }); +}; + +export default getFirstCdnImageFromList; diff --git a/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js b/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js deleted file mode 100644 index b3456d8..0000000 --- a/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js +++ /dev/null @@ -1,8 +0,0 @@ -import { pad } from "../../pad"; - -export const prepareFirstImageFromFolder = (imagesSrcs, srcConfig) => { - const {indexZeroBase } = srcConfig || {}; - const nextZeroFilledIndex = pad(1, indexZeroBase); - - return imagesSrcs.replace('{index}', nextZeroFilledIndex); -} \ No newline at end of file diff --git a/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js b/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js deleted file mode 100644 index 7755215..0000000 --- a/src/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js +++ /dev/null @@ -1,13 +0,0 @@ -import { generateImagesPath } from "../../../image-src/generate-images-path"; - -export const prepareFirstImageFromList = (images, srcConfig) => { - const { folder } = srcConfig; - - const firstImageSrc = images[0]; - - const nextSrcConfig = { ...srcConfig }; - nextSrcConfig.folder = /(http(s?)):\/\//gi.test(firstImageSrc) ? '' : folder; - nextSrcConfig.filename = firstImageSrc; - - return generateImagesPath(nextSrcConfig); -} \ No newline at end of file diff --git a/src/utils/load-images/load-image-as-promise.js b/src/utils/load-images/load-image-as-promise.js index b9f7bed..95faea9 100644 --- a/src/utils/load-images/load-image-as-promise.js +++ b/src/utils/load-images/load-image-as-promise.js @@ -4,6 +4,6 @@ export const loadImageAsPromise = (src, cb) => { const onImageLoad = () => cb(image); - image.onload = onImageLoad - image.onerror = onImageLoad + image.onload = onImageLoad; + image.onerror = onImageLoad; }; diff --git a/src/utils/load-images/load-image.js b/src/utils/load-images/load-image.js new file mode 100644 index 0000000..5d87054 --- /dev/null +++ b/src/utils/load-images/load-image.js @@ -0,0 +1,19 @@ +export const loadImage = (url, callback) => { + const image = new Image(); + + image.src = url; + image.onload = (event) => { + if (callback) { + callback({ + event: event, + width: image.width, + height: image.height, + naturalWidth: image.naturalWidth, + naturalHeight: image.naturalHeight, + src: url, + }); + } + }; + + image.onerror = function () {}; +}; diff --git a/src/utils/load-images/load-images-relative-to-container-size.js b/src/utils/load-images/load-images-relative-to-container-size.js deleted file mode 100644 index ddfcadd..0000000 --- a/src/utils/load-images/load-images-relative-to-container-size.js +++ /dev/null @@ -1,18 +0,0 @@ -import { loadImageAsPromise } from './load-image-as-promise'; - - -export const loadImagesRelativeToContainerSize = (imagesSrcs, cb, index = 0) => { - const imageSrc = imagesSrcs[index]; - - if (index > (imagesSrcs.length - 1)) return; - - const imageLoadCallback = (image) => { - const _index = index + 1; - - - cb(image, index); - loadImagesRelativeToContainerSize(imagesSrcs, cb, _index); - } - - loadImageAsPromise(imageSrc, imageLoadCallback); -}; diff --git a/src/utils/load-images/load-images.js b/src/utils/load-images/load-images.js new file mode 100644 index 0000000..3d22e3c --- /dev/null +++ b/src/utils/load-images/load-images.js @@ -0,0 +1,59 @@ +export const loadImages = ({ + imagesUrls, + onFirstImageLoad, + onImageLoad, + onAllImagesLoad, + autoplayReverse, +}) => { + let loadedCount = 0; + const totalImages = imagesUrls.length; + const loadedImages = []; + + const loadImage = (url, index) => { + const img = new Image(); + img.src = url; + + img.onload = () => { + loadedCount++; + loadedImages[index] = img; + onImageLoad?.(img, index); + + if (loadedCount === totalImages) { + onAllImagesLoad?.(loadedImages); + } + }; + + img.onerror = () => { + console.error(`Failed to load image: ${url}`); + loadedCount++; + + if (loadedCount === totalImages) { + onAllImagesLoad?.(loadedImages); + } + }; + }; + + const firstImg = new Image(); + firstImg.src = imagesUrls[autoplayReverse ? imagesUrls.length - 1 : 0]; + firstImg.onload = () => { + loadedImages[0] = firstImg; + loadedCount++; + onFirstImageLoad?.(firstImg); + onImageLoad?.(firstImg, 0); + + for (let i = 1; i < imagesUrls.length; i++) { + loadImage(imagesUrls[i], i); + } + }; + + firstImg.onerror = () => { + console.error(`Failed to load first image: ${imagesUrls[0]}`); + loadedCount++; + + for (let i = 1; i < imagesUrls.length; i++) { + loadImage(imagesUrls[i], i); + } + }; +}; + +export default loadImages; diff --git a/src/utils/load-images/load-original-images.js b/src/utils/load-images/load-original-images.js index f728008..c00abd0 100644 --- a/src/utils/load-images/load-original-images.js +++ b/src/utils/load-images/load-original-images.js @@ -1,7 +1,9 @@ import { loadImageAsPromise } from './load-image-as-promise'; export const loadOriginalImages = async (imagesSrcs, cb) => { - await Promise.all(imagesSrcs.map(async (src, index) => { - await loadImageAsPromise(src, index, cb); - })); + await Promise.all( + imagesSrcs.map(async (src, index) => { + await loadImageAsPromise(src, index, cb); + }) + ); }; diff --git a/src/utils/load-images/preload-images.js b/src/utils/load-images/preload-images.js index 0aa78f9..671855d 100644 --- a/src/utils/load-images/preload-images.js +++ b/src/utils/load-images/preload-images.js @@ -1,23 +1,85 @@ -/* eslint-disable no-console */ -import { loadImagesRelativeToContainerSize } from './load-images-relative-to-container-size'; -import { prepareImagesFromFolder } from './images-from-folder/prepare-images-from-folder'; -import { prepareImagesFromList } from './images-from-list/prepare-images-from-list'; - -export const preloadImages = (srcConfig, imagesSrc, cb) => { - const { imageList } = srcConfig || {}; - let imagesSrcs = []; - - if (imageList) { - try { - const images = JSON.parse(imageList); - - imagesSrcs = prepareImagesFromList(images, srcConfig); - } catch (error) { - console.error(`Wrong format in image-list attribute: ${error.message}`); +import { ORIENTATIONS } from '../constants'; +import { generateImagesCdnLinks } from './generate-images-cdn-links'; +import { loadImages } from './load-images'; + +export const preloadImages = ({ + cdnPathX, + cdnPathY, + configX, + configY, + onFirstImageLoad, + onImageLoad, + onAllImagesLoad, +}) => { + let imagesXUrls = []; + let imagesYUrls = []; + let allImagesLoaded = { x: false, y: false }; + let loadedImagesX = []; + let loadedImagesY = []; + + const handleAllImagesLoaded = () => { + if (allImagesLoaded.x && allImagesLoaded.y) { + onAllImagesLoad([...loadedImagesX, ...loadedImagesY]); + } + }; + + const loadImagesForOrientation = (cdnPath, config, orientation) => { + let imagesUrls = []; + + if (config.imageList) { + try { + const images = JSON.parse(config.imageList); + // imagesUrls = prepareImagesFromList(images, config); + } catch (error) { + console.error(`Wrong format in image-list attribute for ${orientation}: ${error.message}`); + } + } else { + imagesUrls = generateImagesCdnLinks(cdnPath, config); } + + return imagesUrls; + }; + + // Load X Images + if (cdnPathX) { + imagesXUrls = loadImagesForOrientation(cdnPathX, configX, ORIENTATIONS.X); + + loadImages({ + imagesUrls: imagesXUrls, + onFirstImageLoad, + onImageLoad: (img, index) => { + onImageLoad?.(img, index, ORIENTATIONS.X); + loadedImagesX[index] = img; + }, + onAllImagesLoad: (loadedImages) => { + loadedImagesX = loadedImages; + allImagesLoaded.x = true; + handleAllImagesLoaded(); + }, + autoplayReverse: configX.autoplayReverse, + }); } else { - imagesSrcs = prepareImagesFromFolder(imagesSrc, srcConfig); + allImagesLoaded.x = true; } - loadImagesRelativeToContainerSize(imagesSrcs, cb); + // Load Y Images + if (cdnPathY) { + imagesYUrls = loadImagesForOrientation(cdnPathY, configY, ORIENTATIONS.Y); + + loadImages({ + imagesUrls: imagesYUrls, + onImageLoad: (img, index) => { + onImageLoad?.(img, index, ORIENTATIONS.Y); + loadedImagesY[index] = img; + }, + onAllImagesLoad: (loadedImages) => { + loadedImagesY = loadedImages; + allImagesLoaded.y = true; + handleAllImagesLoaded(); + }, + autoplayReverse: configY.autoplayReverse, + }); + } else { + allImagesLoaded.y = true; + } }; diff --git a/src/utils/load-images/preload-original-images.js b/src/utils/load-images/preload-original-images.js index f8c1d88..e8fcc6d 100644 --- a/src/utils/load-images/preload-original-images.js +++ b/src/utils/load-images/preload-original-images.js @@ -1,23 +1 @@ -/* eslint-disable no-console */ -import { prepareImagesFromFolder } from './images-from-folder/prepare-images-from-folder'; -import { prepareImagesFromList } from './images-from-list/prepare-images-from-list'; -import { loadOriginalImages } from './load-original-images'; - -export const preloadOriginalImages = (srcConfig, imagesSrc, cb) => { - const { imageList } = srcConfig || {}; - let imagesSrcs = []; - - if (imageList) { - try { - const images = JSON.parse(imageList); - - imagesSrcs = prepareImagesFromList(images, srcConfig, true); - } catch (error) { - console.error(`Wrong format in image-list attribute: ${error.message}`); - } - } else { - imagesSrcs = prepareImagesFromFolder(imagesSrc, srcConfig, true); - } - - loadOriginalImages(imagesSrcs, cb); -}; +export const preloadOriginalImages = (srcConfig, imagesSrc, cb) => {}; diff --git a/src/utils/magnify/get-current-original-image.js b/src/utils/magnify/get-current-original-image.js index 5476408..ae358f8 100644 --- a/src/utils/magnify/get-current-original-image.js +++ b/src/utils/magnify/get-current-original-image.js @@ -1,16 +1,22 @@ import { ORIENTATIONS } from '../../constants/orientations'; import { AND_SYMBOL_REGEX, ORGINAL_SIZE_REGEX } from '../../constants/regex'; -export const getCurrentOriginalImage = (movingDirection, imagesX, imagesY, activeImageX, activeImageY) => { +export const getCurrentOriginalImage = ( + movingDirection, + imagesX, + imagesY, + activeImageX, + activeImageY +) => { const currentImage = new Image(); - const originalImagesXSrcs = imagesX.map((image) => image.src - .replace(ORGINAL_SIZE_REGEX, '') - .replace(AND_SYMBOL_REGEX, '?')); + const originalImagesXSrcs = imagesX.map((image) => + image.src.replace(ORGINAL_SIZE_REGEX, '').replace(AND_SYMBOL_REGEX, '?') + ); - const originalImagesYSrcs = imagesY.map((image) => image.src - .replace(ORGINAL_SIZE_REGEX, '') - .replace(AND_SYMBOL_REGEX, '?')); + const originalImagesYSrcs = imagesY.map((image) => + image.src.replace(ORGINAL_SIZE_REGEX, '').replace(AND_SYMBOL_REGEX, '?') + ); currentImage.src = originalImagesXSrcs[activeImageX - 1]; diff --git a/src/utils/magnify/get-cursor-position.js b/src/utils/magnify/get-cursor-position.js index ccec7e1..96e1e89 100644 --- a/src/utils/magnify/get-cursor-position.js +++ b/src/utils/magnify/get-cursor-position.js @@ -1,13 +1,10 @@ -export const getCursorPosition = (event = window.event, container) => { - let x = 0; - let y = 0; +export const getCursorPosition = (e, container) => { + const rect = container.getBoundingClientRect(); + const x = e.touches ? e.touches[0].clientX : e.clientX; + const y = e.touches ? e.touches[0].clientY : e.clientY; - const a = container.getBoundingClientRect(); - - x = event.pageX - a.left; - y = event.pageY - a.top; - x -= window.pageXOffset; - y -= window.pageYOffset; - - return { x, y }; + return { + x: x - rect.left, + y: y - rect.top, + }; }; diff --git a/src/utils/magnify/magnify.js b/src/utils/magnify/magnify.js index b28d430..b22d811 100644 --- a/src/utils/magnify/magnify.js +++ b/src/utils/magnify/magnify.js @@ -1,9 +1,9 @@ import { moveMagnifier } from './move-magnifier'; -export const magnify = (container, offset, currentImage, glass, zoom) => { +export const magnify = (clickEvent, container, offset, currentImage, glass, zoom) => { const { x: offsetX = 0, y: offsetY = 0 } = offset || {}; - const backgroundSizeX = (container.offsetWidth - (offsetX * 2)) * zoom; - const backgroundSizeY = (container.offsetHeight - (offsetY * 2)) * zoom; + const backgroundSizeX = (container.offsetWidth - offsetX * 2) * zoom; + const backgroundSizeY = (container.offsetHeight - offsetY * 2) * zoom; glass.setAttribute('class', 'cloudimage-360-img-magnifier-glass'); container.prepend(glass); @@ -16,20 +16,29 @@ export const magnify = (container, offset, currentImage, glass, zoom) => { const h = glass.offsetHeight / 2; const containerConfig = { - container, w, h, zoom, bw, offsetX, offsetY, + container, + w, + h, + zoom, + bw, + offsetX, + offsetY, }; + moveMagnifier(clickEvent, containerConfig, glass); + const MouseMoveHandler = (event) => { moveMagnifier(event, containerConfig, glass); }; const touchHandler = (event) => { + event.preventDefault(); + moveMagnifier(event, containerConfig, glass); }; glass.addEventListener('mousemove', MouseMoveHandler); container.addEventListener('mousemove', MouseMoveHandler); - glass.addEventListener('touchmove', touchHandler, { passive: true }); - container.addEventListener('touchmove', touchHandler, { passive: true }); + container.addEventListener('touchmove', touchHandler); }; diff --git a/src/utils/magnify/move-magnifier.js b/src/utils/magnify/move-magnifier.js index 672f00b..e177998 100644 --- a/src/utils/magnify/move-magnifier.js +++ b/src/utils/magnify/move-magnifier.js @@ -1,42 +1,24 @@ import { getCursorPosition } from './get-cursor-position'; export const moveMagnifier = (e, containerConfig, glass) => { - const { - container, w, h, zoom, bw, offsetX, offsetY, - } = containerConfig; - - let x; let y; + const { container, w, h, zoom, bw, offsetX, offsetY } = containerConfig; const pos = getCursorPosition(e, container); - x = pos.x; - y = pos.y; - - if (x > container.offsetWidth - (w / zoom)) { - x = container.offsetWidth - (w / zoom); - } - - if (x < w / zoom) { - x = w / zoom; - } + let x = pos.x; + let y = pos.y; - if (y > container.offsetHeight - (h / zoom)) { - y = container.offsetHeight - (h / zoom); - } - - if (y < h / zoom) { - y = h / zoom; - } + // Ensure the magnifier doesn't move outside container bounds + x = Math.max(w / zoom, Math.min(x, container.offsetWidth - w / zoom)); + y = Math.max(h / zoom, Math.min(y, container.offsetHeight - h / zoom)); + // Update the magnifier glass position glass.style.left = `${x - w}px`; glass.style.top = `${y - h}px`; - const backgroundPosX = ( - (x - offsetX) * zoom - ) - w + bw; - - const backgroundPosY = ( - (y - offsetY) * zoom - ) - h + bw; + // Calculate background position (where the magnified image should show) + const backgroundPosX = (x - offsetX) * zoom - w + bw; + const backgroundPosY = (y - offsetY) * zoom - h + bw; + // Apply background position to simulate zoom effect glass.style.backgroundPosition = `-${backgroundPosX}px -${backgroundPosY}px`; }; diff --git a/src/utils/responsive/fit.js b/src/utils/responsive/fit.js index 879b072..9028b4f 100644 --- a/src/utils/responsive/fit.js +++ b/src/utils/responsive/fit.js @@ -1,19 +1,29 @@ -export const fit = (contains) => (parentWidth, parentHeight, childWidth, childHeight, scale = 1, offsetX = 0.5, offsetY = 0.5) => { - const childRatio = childWidth / childHeight; - const parentRatio = parentWidth / parentHeight; - let width = parentWidth * scale; - let height = parentHeight * scale; +export const fit = + (contains) => + ( + parentWidth, + parentHeight, + childWidth, + childHeight, + scale = 1, + offsetX = 0.5, + offsetY = 0.5 + ) => { + const childRatio = childWidth / childHeight; + const parentRatio = parentWidth / parentHeight; + let width = parentWidth * scale; + let height = parentHeight * scale; - if (contains ? (childRatio > parentRatio) : (childRatio < parentRatio)) { - height = width / childRatio; - } else { - width = height * childRatio; - } + if (contains ? childRatio > parentRatio : childRatio < parentRatio) { + height = width / childRatio; + } else { + width = height * childRatio; + } - return { - width, - height, - offsetX: (parentWidth - width) * offsetX, - offsetY: (parentHeight - height) * offsetY, + return { + width, + height, + offsetX: (parentWidth - width) * offsetX, + offsetY: (parentHeight - height) * offsetY, + }; }; -}; diff --git a/src/utils/responsive/get-image-aspect-ratio.js b/src/utils/responsive/get-image-aspect-ratio.js index 1cc5ef1..416429f 100644 --- a/src/utils/responsive/get-image-aspect-ratio.js +++ b/src/utils/responsive/get-image-aspect-ratio.js @@ -7,12 +7,11 @@ export const getImageAspectRatio = (image, providedRatio) => { } if (providedRatio && typeof providedRatio === 'object') { - const mediaQueries = Object.keys(providedRatio) - .sort((a, b) => a - b); + const mediaQueries = Object.keys(providedRatio).sort((a, b) => a - b); - const activeMedia = mediaQueries.find((mediaQuery) => ( - window.innerWidth <= parseInt(mediaQuery, 10) - )); + const activeMedia = mediaQueries.find( + (mediaQuery) => window.innerWidth <= parseInt(mediaQuery, 10) + ); if (activeMedia) { imageAspectRatio = providedRatio[activeMedia]; @@ -23,4 +22,4 @@ export const getImageAspectRatio = (image, providedRatio) => { } catch { return 1; } -} \ No newline at end of file +}; diff --git a/src/utils/responsive/get-size-according-to-pixel-ratio.js b/src/utils/responsive/get-size-according-to-pixel-ratio.js index 0b7c6a4..1948a64 100644 --- a/src/utils/responsive/get-size-according-to-pixel-ratio.js +++ b/src/utils/responsive/get-size-according-to-pixel-ratio.js @@ -1,10 +1,6 @@ -export const getSizeAccordingToPixelRatio = (size) => { - const splittedSizes = size.toString().split('x'); - const result = []; - - [].forEach.call(splittedSizes, (splittedSize) => { - result.push(splittedSize * Math.round(window.devicePixelRatio || 1)); - }); - - return result.join('x'); +const getSizeAccordingToPixelRatio = (size = 1) => { + const pixelRatio = Math.round(window.devicePixelRatio || 1); + return parseInt(size) * pixelRatio; }; + +export default getSizeAccordingToPixelRatio; diff --git a/src/utils/spin-y/get-moving-direction.js b/src/utils/spin-y/get-moving-direction.js index ed175b2..88c7ddc 100644 --- a/src/utils/spin-y/get-moving-direction.js +++ b/src/utils/spin-y/get-moving-direction.js @@ -1,17 +1,13 @@ -import { ORIENTATIONS } from '../../constants/orientations'; - -export const getMovingDirection = (isStartSpin, allowSpinY, prevPosition, nextPositions, currentMovingDirection) => { - let movingDirection = ORIENTATIONS.CENTER; - - if (isStartSpin) return currentMovingDirection; - - const differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x); - const differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y); - const sensitivity = 10; - - if (differenceInPositionX > sensitivity) movingDirection = ORIENTATIONS.X; - - if (differenceInPositionY > sensitivity && allowSpinY) movingDirection = ORIENTATIONS.Y; - - return movingDirection; +export const getMovingDirection = (deltaX, deltaY, allowSpinY, threshold = 1) => { + // Check if the movement along the X-axis is greater than along the Y-axis + if (Math.abs(deltaX) - threshold > Math.abs(deltaY) || !allowSpinY) { + return deltaX > 0 ? 'right' : 'left'; + } + + // If Y-axis movement is allowed + if (Math.abs(deltaY) - threshold > Math.abs(deltaX) && allowSpinY) { + return deltaY > 0 ? 'down' : 'up'; + } + + return null; // Return null if no valid direction is determined }; diff --git a/src/utils/spin/ease-out.js b/src/utils/spin/ease-out.js new file mode 100644 index 0000000..3ad5204 --- /dev/null +++ b/src/utils/spin/ease-out.js @@ -0,0 +1,3 @@ +export const easeOutQuad = (t) => { + return t * (2 - t); +}; diff --git a/src/utils/spin/get-default-spin-direction.js b/src/utils/spin/get-default-spin-direction.js new file mode 100644 index 0000000..24be429 --- /dev/null +++ b/src/utils/spin/get-default-spin-direction.js @@ -0,0 +1,15 @@ +import { AUTOPLAY_BEHAVIOR } from '../constants'; + +export const getDefaultSpinDirection = (autoplayBehavior) => { + switch (autoplayBehavior) { + case AUTOPLAY_BEHAVIOR.SPIN_XY: + return 'x'; + case AUTOPLAY_BEHAVIOR.SPIN_YX: + return 'y'; + case AUTOPLAY_BEHAVIOR.SPIN_Y: + return 'y'; + case AUTOPLAY_BEHAVIOR.SPIN_X: + default: + return 'x'; + } +}; diff --git a/src/utils/spin/is-spin-keys-pressed.js b/src/utils/spin/is-spin-keys-pressed.js new file mode 100644 index 0000000..31d181c --- /dev/null +++ b/src/utils/spin/is-spin-keys-pressed.js @@ -0,0 +1,11 @@ +import { LEFT_RIGHT_KEYS, UP_DOWN_KEYS } from '../constants'; + +export const isSpinKeysPressed = (keyCode, allowSpinY) => { + const keys = [...LEFT_RIGHT_KEYS]; + + if (allowSpinY) { + return [...keys, ...UP_DOWN_KEYS].includes(keyCode); + } + + return keys.includes(keyCode); +}; diff --git a/src/utils/spin/should-switch-spin-direction.js b/src/utils/spin/should-switch-spin-direction.js new file mode 100644 index 0000000..b04af2a --- /dev/null +++ b/src/utils/spin/should-switch-spin-direction.js @@ -0,0 +1,23 @@ +import { AUTOPLAY_BEHAVIOR } from '../constants'; + +export const shouldSwitchSpinDirection = ({ + autoplayBehavior, + activeImageX, + activeImageY, + amountX, + amountY, + autoplayReverse, + spinDirection, +}) => { + const reachedEdgeX = activeImageX === (autoplayReverse ? 0 : amountX); + const reachedEdgeY = activeImageY === (autoplayReverse ? 0 : amountY); + + if ( + autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_XY || + autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX + ) { + return (spinDirection === 'x' && reachedEdgeX) || (spinDirection === 'y' && reachedEdgeY); + } + + return false; +}; diff --git a/src/utils/spin/switch-spin-direction.js b/src/utils/spin/switch-spin-direction.js new file mode 100644 index 0000000..45a1f18 --- /dev/null +++ b/src/utils/spin/switch-spin-direction.js @@ -0,0 +1,3 @@ +export const switchSpinDirection = (currentDirection) => { + return currentDirection === 'x' ? 'y' : 'x'; +}; diff --git a/src/utils/zoom/generate-zoom-in-steps.js b/src/utils/zoom/generate-zoom-in-steps.js index 41333b5..136a597 100644 --- a/src/utils/zoom/generate-zoom-in-steps.js +++ b/src/utils/zoom/generate-zoom-in-steps.js @@ -1,16 +1,15 @@ export const generateZoomInSteps = (zoomIntenisty) => { const transitionStepsFactor = 20; - return Array.from(Array(transitionStepsFactor)) - .reduce((acc, _, index) => { - const previousIndex = index - 1; - const previousValue = previousIndex < 0 ? 1 : acc[index - 1]; + return Array.from(Array(transitionStepsFactor)).reduce((acc, _, index) => { + const previousIndex = index - 1; + const previousValue = previousIndex < 0 ? 1 : acc[index - 1]; - const step = (previousValue) + ((zoomIntenisty - 1) / (transitionStepsFactor)); - const stepFixedValue = +step.toFixed(2); + const step = previousValue + (zoomIntenisty - 1) / transitionStepsFactor; + const stepFixedValue = +step.toFixed(2); - (acc || []).push(stepFixedValue); + (acc || []).push(stepFixedValue); - return acc; - }, []); + return acc; + }, []); }; diff --git a/src/utils/zoom/generate-zoom-out-steps.js b/src/utils/zoom/generate-zoom-out-steps.js index ca2d8f9..cfa3fbf 100644 --- a/src/utils/zoom/generate-zoom-out-steps.js +++ b/src/utils/zoom/generate-zoom-out-steps.js @@ -1,16 +1,15 @@ export const generateZoomOutSteps = (zoomIntenisty) => { const transitionStepsFactor = 20; - return Array.from(Array(transitionStepsFactor)) - .reduce((acc, _, index) => { - const previousIndex = index - 1; - const previousValue = previousIndex < 0 ? zoomIntenisty : acc[index - 1]; + return Array.from(Array(transitionStepsFactor)).reduce((acc, _, index) => { + const previousIndex = index - 1; + const previousValue = previousIndex < 0 ? zoomIntenisty : acc[index - 1]; - const step = previousValue - ((zoomIntenisty - 1) / transitionStepsFactor); - const stepFixedValue = +step.toFixed(2); + const step = previousValue - (zoomIntenisty - 1) / transitionStepsFactor; + const stepFixedValue = +step.toFixed(2); - (acc || []).push(stepFixedValue); + (acc || []).push(stepFixedValue); - return acc; - }, []); + return acc; + }, []); }; From 98e28f82763d4d51d72f495b15dccc546f6e363f Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Fri, 18 Oct 2024 00:24:58 +0300 Subject: [PATCH 02/31] feat: Add refactored Pointer zoom, Magnifier and fullScreen --- examples/src/index.html | 53 ++-- src/ci360.service.js | 262 +++++++++++------- src/static/css/style.css | 62 +++-- .../create-loading-spinner.js | 7 + .../create-transition-overlay.js | 7 + src/utils/container-elements/index.js | 2 + src/utils/index.js | 7 + src/utils/load-images/preload-images.js | 2 +- .../zoom/calculate-offsets-from-events.js | 12 + src/utils/zoom/calculate-zoomed-dimensions.js | 5 + src/utils/zoom/calculate-zoomed-offset.js | 22 ++ 11 files changed, 296 insertions(+), 145 deletions(-) create mode 100644 src/utils/container-elements/create-loading-spinner.js create mode 100644 src/utils/container-elements/create-transition-overlay.js create mode 100644 src/utils/zoom/calculate-offsets-from-events.js create mode 100644 src/utils/zoom/calculate-zoomed-dimensions.js create mode 100644 src/utils/zoom/calculate-zoomed-offset.js diff --git a/examples/src/index.html b/examples/src/index.html index 60ebb6e..1b70b8c 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -26,7 +26,7 @@ JS Cloudimage 360 view @@ -35,18 +35,18 @@
star star-img
View on GitHub Edit to CodeSandbox @@ -83,7 +83,7 @@

Trusted by top brands, worldwide data-filename-x="{index}.jpg" data-amount-x="16" data-lazyload + pointer-zoom="1.01" + data-magnifier="3" data-lazy-selector="lazyload" data-responsive="scaleflex" >
@@ -154,7 +156,7 @@

Trusted by top brands, worldwide

Trusted by top brands, worldwide
Create 360° views, your way data-amount-x="233" data-autoplay data-speed="100" + data-pointer-zoom="2" data-drag-speed="100" data-responsive="scaleflex" data-lazyload data-lazy-selector="lazyload" > - - + +
@@ -612,7 +615,7 @@

Any questions?

Submit GitHub issue @@ -636,19 +639,19 @@

Any questions?

View GitHub Current Issues Documentation @@ -686,7 +689,7 @@

Any questions?

Cloudimage Responsive Cloudimage 360 view @@ -698,19 +701,19 @@

Any questions?

star star-img Any questions?

Info

View GitHub Current Issues Documentation @@ -784,7 +787,7 @@

Filerobot UI Family

Cloudimage Responsive Cloudimage 360 view diff --git a/src/ci360.service.js b/src/ci360.service.js index d2bf3bc..9c1d6d5 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -18,7 +18,6 @@ import { magnify, isCompletedOneCycle, getMovingDirection, - initControls, loop, initLazyload, createInitialIcon, @@ -28,10 +27,16 @@ import { delay, shouldSwitchSpinDirection, switchSpinDirection, + ORIENTATIONS, + THROTTLE_TIME, + getDefaultSpinDirection, + isSpinKeysPressed, + calculateZoomedDimensions, + calculateZoomOffsets, + calculateOffsetFromEvent, + createLoadingSpinner, + createTransitionOverlay, } from './utils'; -import { ORIENTATIONS, THROTTLE_TIME } from './utils/constants'; -import { getDefaultSpinDirection } from './utils/spin/get-default-spin-direction'; -import { isSpinKeysPressed } from './utils/spin/is-spin-keys-pressed'; class CI360Viewer { constructor(container, fullscreen) { @@ -45,6 +50,7 @@ class CI360Viewer { this.movementStart = { x: 0, y: 0 }; this.draggingDirection = null; this.isReady = false; + this.currentZoomScale = 1; this.init(container); } @@ -59,15 +65,16 @@ class CI360Viewer { this.autoplay = false; } - this.hideAllIcons(); this.movementStart = { x: pageX, y: pageY }; this.isClicked = true; + this.isDragging = false; } mouseUp() { if (!this.isReady) return; - this.showAllIcons(); + if (!this.isZoomed) this.showAllIcons(); + this.movementStart = { x: 0, y: 0 }; this.isClicked = false; this.innerBox.style.cursor = 'grab'; @@ -88,19 +95,92 @@ class CI360Viewer { const itemsSkippedX = Math.round(deltaX * speedFactorX); const itemsSkippedY = Math.round(deltaY * speedFactorY); + const shouldMove = itemsSkippedX !== 0 || (this.allowSpinY && itemsSkippedY !== 0); - if (itemsSkippedX !== 0 || (this.allowSpinY && itemsSkippedY !== 0)) { + if (shouldMove) { this.onMoveHandler(this.draggingDirection, itemsSkippedX, itemsSkippedY); + setTimeout(() => { + this.isDragging = true; + }, 150); this.movementStart = { x: pageX, y: pageY }; } } mouseMove(event) { + if (!this.isReady || (!this.isClicked && !this.isZoomed)) return; + + this.hideAllIcons(); this.drag(event.pageX, event.pageY); + + if (this.isZoomed) this.applyZoom(event); } - mouseClick() { - // !TODO: rework + mouseClick(event) { + if (!this.isReady || this.isDragging || !this.pointerZoom) return; + + if (this.glass) { + this.removeGlass(); + return; + } + + this.toggleZoom(event); + } + + loadOriginalImages(onLoad) { + const cdnPathX = generateCdnPath(this.srcXConfig, true); + const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, true) : null; + + preloadImages({ + cdnPathX, + cdnPathY, + configX: this.srcXConfig, + configY: this.srcYConfig, + onAllImagesLoad: (loadedImagesX, loadedImagesY) => { + this.imagesX = loadedImagesX; + this.imagesY = loadedImagesY; + onLoad(); + }, + }); + } + + toggleZoom(event) { + if (this.isZoomed) { + this.showTransitionOverlay(); + + setTimeout(() => { + this.removeZoom(); + }, 800); + } else { + this.showLoadingSpinner(); + + this.loadOriginalImages(() => { + this.showTransitionOverlay(); + + setTimeout(() => { + this.applyZoom(event); + }, 800); + }); + } + } + + removeZoom() { + this.isZoomed = false; + + this.update(ORIENTATIONS.X); + this.showAllIcons(); + this.hideTransitionOverlay(); + } + + applyZoom(event) { + const { offsetX, offsetY } = calculateOffsetFromEvent(event, this.canvas, this.devicePixelRatio); + + this.isZoomed = true; + this.hideAllIcons(); + this.hideLoadingSpinner(); + this.hideTransitionOverlay(); + + console.log(this.pointerZoom); + this.update(ORIENTATIONS.X, this.pointerZoom, offsetX, offsetY); } touchOutside(event) { @@ -186,25 +266,6 @@ class CI360Viewer { } } - onSpin() { - if (this.bottomCircle) { - this.hide360ViewCircleIcon(); - } - - if (this.initialIcon) { - this.remove360ViewIcon(); - } - - if (this.autoplay || this.loopTimeoutId) { - this.stopAutoplay(); - this.autoplay = false; - } - } - - onFinishSpin() { - if (this.bottomCircle) this.show360ViewCircleIcon(); - } - moveActiveXIndexUp(itemsSkipped) { this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX; } @@ -261,11 +322,11 @@ class CI360Viewer { } } - update(orientation) { + update(orientation, zoomScale, offsetX, offsetY) { const image = orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; - this.drawImageOnCanvas(image); + this.drawImageOnCanvas(image, zoomScale, offsetX, offsetY); } updatePercentageInLoader(percentage = 0) { @@ -274,7 +335,7 @@ class CI360Viewer { this.loader.innerText = percentage + '%'; } - drawImageOnCanvas(image) { + drawImageOnCanvas(image, zoomScale = 1, pointerX = 0, pointerY = 0) { if (!this.canvas || !image) return; const ctx = this.canvas.getContext('2d'); @@ -287,14 +348,11 @@ class CI360Viewer { this.canvas.width = containerWidth * this.devicePixelRatio; this.canvas.height = containerHeight * this.devicePixelRatio; - // Scale the context to handle high DPI screens ctx.scale(this.devicePixelRatio, this.devicePixelRatio); - // Enable image smoothing for higher quality ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; - // Calculate the aspect ratios const imageAspectRatio = image.naturalWidth / image.naturalHeight; const containerAspectRatio = containerWidth / containerHeight; @@ -315,13 +373,35 @@ class CI360Viewer { offsetY = 0; } - // Clear the canvas before redrawing ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - // Draw the image on the canvas, scaling and positioning it as needed - ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight); + if (!this.isZoomed) { + ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight); + } else { + const { zoomedWidth, zoomedHeight } = calculateZoomedDimensions(drawWidth, drawHeight, zoomScale); + + const { zoomOffsetX, zoomOffsetY } = calculateZoomOffsets({ + pointerX, + pointerY, + image, + zoomedWidth, + zoomedHeight, + drawWidth, + drawHeight, + }); - return ctx; + ctx.drawImage( + image, + zoomOffsetX, + zoomOffsetY, + zoomedWidth, + zoomedHeight, + offsetX, + offsetY, + drawWidth, + drawHeight + ); + } } pushImageToSet(image, index, orientation) { @@ -391,6 +471,7 @@ class CI360Viewer { } play() { + if (this.isClicked) return; this.hide360ViewCircleIcon(); const loopTriggers = { @@ -562,6 +643,42 @@ class CI360Viewer { this.view360CircleIcon.style.opacity = 0; } + addLoadingSpinner() { + this.loadingSpinner = createLoadingSpinner(); + this.innerBox.appendChild(this.loadingSpinner); + } + + showLoadingSpinner() { + if (!this.loadingSpinner) return; + + this.hideAllIcons(); + this.loadingSpinner.style.opacity = 1; + } + + createTransitionOverlay() { + this.transitionOverlay = createTransitionOverlay(); + this.innerBox.appendChild(this.transitionOverlay); + } + + showTransitionOverlay() { + if (!this.transitionOverlay) return; + + this.hideAllIcons(); + this.transitionOverlay.style.opacity = 1; + } + + hideTransitionOverlay() { + if (!this.transitionOverlay) return; + + this.transitionOverlay.style.opacity = 0; + } + + hideLoadingSpinner() { + if (!this.loadingSpinner) return; + + this.loadingSpinner.style.opacity = 0; + } + remove360ViewCircleIcon() { if (!this.view360CircleIcon) return; @@ -572,6 +689,10 @@ class CI360Viewer { addAllIcons() { this.removeLoader(); + if (this.pointerZoom) { + this.createTransitionOverlay(); + this.addLoadingSpinner(); + } if (!this.fullscreenView) this.addMagnifierIcon(); if (!this.fullscreenView) this.addFullscreenIcon(); if (!this.initialIconHidden) this.addInitialIcon(); @@ -590,8 +711,6 @@ class CI360Viewer { this.hide360ViewCircleIcon(); this.hideMagnifierIcon(); this.hideFullscreenIcon(); - - if (this.glass) this.removeGlass(); } removeLoader() { @@ -601,65 +720,6 @@ class CI360Viewer { this.loader = null; } - initControls() { - const onLeftStart = (event) => { - event.stopPropagation(); - - this.onSpin(); - this.left(); - - this.loopTimeoutId = window.setInterval(this.left.bind(this), this.autoplaySpeed); - }; - - const onRightStart = (event) => { - event.stopPropagation(); - - this.onSpin(); - this.right(); - - this.loopTimeoutId = window.setInterval(this.right.bind(this), this.autoplaySpeed); - }; - - const onTopStart = (event) => { - event.stopPropagation(); - - this.onSpin(); - this.top(); - - this.loopTimeoutId = window.setInterval(this.top.bind(this), this.autoplaySpeed); - }; - - const onBottomStart = (event) => { - event.stopPropagation(); - - this.onSpin(); - this.bottom(); - - this.loopTimeoutId = window.setInterval(this.bottom.bind(this), this.autoplaySpeed); - }; - - const controlsConfig = { - container: this.container, - controlReverse: this.controlReverse, - spinReverse: this.spinReverse, - stopAtEdges: this.stopAtEdges, - }; - - const controlsTriggers = { - onLeftStart, - onRightStart, - onTopStart, - onBottomStart, - }; - - const controlsElements = initControls(controlsConfig, controlsTriggers); - - this.topElem = controlsElements.top; - this.bottomElem = controlsElements.bottom; - this.leftElem = controlsElements.left; - this.rightElem = controlsElements.right; - } - attachEvents(draggable, swipeable, keys) { if (draggable) { this.addMouseEvents(); @@ -696,7 +756,7 @@ class CI360Viewer { } createContainers(event) { - this.iconsContainer = createIconsContainer(this.container); + this.iconsContainer = createIconsContainer(this.innerBox); this.canvas = createCanvas(this.innerBox, event); this.loader = createLoader(this.innerBox); @@ -775,7 +835,7 @@ class CI360Viewer { this.logoSrc = logoSrc; this.ciParams = ciParams; this.apiVersion = apiVersion; - this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0; + this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : null; this.keysReverse = keysReverse; this.info = imageInfo; this.keys = keys; diff --git a/src/static/css/style.css b/src/static/css/style.css index d555172..e47974f 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -1,3 +1,12 @@ +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + .cloudimage-360 { width: 100%; position: relative; @@ -7,13 +16,14 @@ cursor: grab; width: 100%; height: 100%; + position: relative; } .cloudimage-360-icons-container { position: absolute; display: flex; top: 15px; - right: 5px; + right: 10px; width: 25px; height: 100%; flex-direction: column; @@ -22,13 +32,26 @@ gap: 8px; } +.cloudimage-transition-overlay { + position: absolute; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 1); + opacity: 0; + transition: all 1s ease-out; + z-index: 10; +} + .cloudimage-360-magnifier-icon { width: 100%; height: 25px; cursor: pointer; transition: all 200ms ease-out; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% - 50% / cover no-repeat; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / + cover no-repeat; } .cloudimage-360-fullscreen-icon { @@ -36,8 +59,8 @@ height: 25px; cursor: pointer; transition: all 200ms ease-out; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') - 50% 50% / cover no-repeat; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / + cover no-repeat; } .cloudimage-360-reset-zoom-icon { @@ -54,8 +77,8 @@ width: 100%; height: 25px; cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% - 50% / cover no-repeat; + background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / + cover no-repeat; } .cloudimage-initial-icon { @@ -88,13 +111,20 @@ background-color: rgba(200, 200, 200, 0.2); /* Brighten on hover */ } -.cloudimage-360-box-shadow { +.cloudimage-loading-spinner { + width: 30px; + height: 30px; + transform: translate(-50%, -50%); + border: 3px solid #fff; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 99; + top: 15px; + left: 15px; + border-bottom-color: #a3a3a3; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + opacity: 0; + animation: rotation 700ms linear infinite; } .cloudimage-360-view-360-circle { @@ -124,11 +154,7 @@ .cloudimage-360-img-magnifier-glass { background-color: #fff; - background-image: radial-gradient( - circle at center, - rgba(255, 255, 255, 0.8), - rgba(240, 240, 240, 0.9) - ); + background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.9)); background-repeat: no-repeat; position: absolute; border: 2px solid rgba(0, 0, 0, 0.3); /* Softer border */ diff --git a/src/utils/container-elements/create-loading-spinner.js b/src/utils/container-elements/create-loading-spinner.js new file mode 100644 index 0000000..63ab628 --- /dev/null +++ b/src/utils/container-elements/create-loading-spinner.js @@ -0,0 +1,7 @@ +export const createLoadingSpinner = () => { + const loadingSpinner = document.createElement('div'); + + loadingSpinner.className = 'cloudimage-loading-spinner'; + + return loadingSpinner; +}; diff --git a/src/utils/container-elements/create-transition-overlay.js b/src/utils/container-elements/create-transition-overlay.js new file mode 100644 index 0000000..9544704 --- /dev/null +++ b/src/utils/container-elements/create-transition-overlay.js @@ -0,0 +1,7 @@ +export const createTransitionOverlay = () => { + const transitionOverlay = document.createElement('div'); + + transitionOverlay.className = 'cloudimage-transition-overlay'; + + return transitionOverlay; +}; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index 9a5dcf1..dcc2b1d 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -11,3 +11,5 @@ export { createLoader } from './create-loader'; export { applyStylesToContainer } from './apply-styles-to-container'; export { createFullscreenModal } from './create-fullscreen-modal'; export { removeElementFromContainer } from './remove-element-from-container'; +export { createLoadingSpinner } from './create-loading-spinner'; +export { createTransitionOverlay } from './create-transition-overlay'; diff --git a/src/utils/index.js b/src/utils/index.js index e855554..f3a10ab 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -14,6 +14,9 @@ export { magnify } from './magnify/magnify'; export { generateZoomInSteps } from './zoom/generate-zoom-in-steps'; export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps'; +export { calculateOffsetFromEvent } from './zoom/calculate-offsets-from-events'; +export { calculateZoomedDimensions } from './zoom/calculate-zoomed-dimensions'; +export { calculateZoomOffsets } from './zoom/calculate-zoomed-offset'; export { loop } from './auto-play/loop'; export { getSpeedFactor } from './auto-play/get-speed-factor'; @@ -23,13 +26,17 @@ export { addClass } from './class-names/add-class'; export { removeClass } from './class-names/remove-class'; export { shouldSwitchSpinDirection } from './spin/should-switch-spin-direction'; +export { getDefaultSpinDirection } from './spin/get-default-spin-direction'; export { switchSpinDirection } from './spin/switch-spin-direction'; +export { isSpinKeysPressed } from './spin/is-spin-keys-pressed'; + export { getMovingDirection } from './spin-y/get-moving-direction'; export { getItemSkipped } from './controls/get-item-skipped'; export { initControls } from './controls/init-controls'; export * from './container-elements'; +export * from './constants'; export { updateHotspots } from './hotspots/update-hotspots'; export { createHotspots } from './hotspots/elements/create-hotspots'; diff --git a/src/utils/load-images/preload-images.js b/src/utils/load-images/preload-images.js index 671855d..87be433 100644 --- a/src/utils/load-images/preload-images.js +++ b/src/utils/load-images/preload-images.js @@ -19,7 +19,7 @@ export const preloadImages = ({ const handleAllImagesLoaded = () => { if (allImagesLoaded.x && allImagesLoaded.y) { - onAllImagesLoad([...loadedImagesX, ...loadedImagesY]); + onAllImagesLoad(loadedImagesX, loadedImagesY); } }; diff --git a/src/utils/zoom/calculate-offsets-from-events.js b/src/utils/zoom/calculate-offsets-from-events.js new file mode 100644 index 0000000..f70296d --- /dev/null +++ b/src/utils/zoom/calculate-offsets-from-events.js @@ -0,0 +1,12 @@ +export const calculateOffsetFromEvent = (event, canvas, devicePixelRatio) => { + const { clientX, clientY } = event; + const canvasRect = canvas.getBoundingClientRect(); + + const scaleX = canvas.width / (canvasRect.width * devicePixelRatio); + const scaleY = canvas.height / (canvasRect.height * devicePixelRatio); + + const offsetX = (clientX - canvasRect.left) * scaleX; + const offsetY = (clientY - canvasRect.top) * scaleY; + + return { offsetX, offsetY }; +}; diff --git a/src/utils/zoom/calculate-zoomed-dimensions.js b/src/utils/zoom/calculate-zoomed-dimensions.js new file mode 100644 index 0000000..e6ee4b6 --- /dev/null +++ b/src/utils/zoom/calculate-zoomed-dimensions.js @@ -0,0 +1,5 @@ +export const calculateZoomedDimensions = (drawWidth, drawHeight, zoomScale) => { + const zoomedWidth = drawWidth / zoomScale; + const zoomedHeight = drawHeight / zoomScale; + return { zoomedWidth, zoomedHeight }; +}; diff --git a/src/utils/zoom/calculate-zoomed-offset.js b/src/utils/zoom/calculate-zoomed-offset.js new file mode 100644 index 0000000..7d60c25 --- /dev/null +++ b/src/utils/zoom/calculate-zoomed-offset.js @@ -0,0 +1,22 @@ +export const calculateZoomOffsets = ({ + pointerX, + pointerY, + image, + zoomedWidth, + zoomedHeight, + drawWidth, + drawHeight, +}) => { + let zoomOffsetX = (pointerX / drawWidth) * image.naturalWidth - zoomedWidth / 2; + let zoomOffsetY = (pointerY / drawHeight) * image.naturalHeight - zoomedHeight / 2; + + // Calculate max offset values + const maxOffsetX = Math.max(0, image.naturalWidth - zoomedWidth); + const maxOffsetY = Math.max(0, image.naturalHeight - zoomedHeight); + + // Clamp zoom offsets to the valid range + zoomOffsetX = Math.max(0, Math.min(zoomOffsetX, maxOffsetX)); + zoomOffsetY = Math.max(0, Math.min(zoomOffsetY, maxOffsetY)); + + return { zoomOffsetX, zoomOffsetY }; +}; From ed17c6c4ca9d6d593d71269f0179f8c644e6a67a Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Thu, 24 Oct 2024 19:48:04 +0300 Subject: [PATCH 03/31] feat: Add offscreen canvas --- src/canvas.worker.js | 103 ++++++++++++++ src/ci360.service.js | 162 +++++++++------------- src/static/css/style.css | 1 - src/utils/image-src/generate-cdn-path.js | 11 +- src/utils/load-images/load-images.js | 39 ++++-- src/utils/zoom/calculate-zoomed-offset.js | 11 +- 6 files changed, 211 insertions(+), 116 deletions(-) create mode 100644 src/canvas.worker.js diff --git a/src/canvas.worker.js b/src/canvas.worker.js new file mode 100644 index 0000000..223f5a1 --- /dev/null +++ b/src/canvas.worker.js @@ -0,0 +1,103 @@ +import { calculateZoomedDimensions, calculateZoomOffsets } from './utils'; + +let canvas, ctx, dpr, drawWidth, drawHeight, wideImage; + +self.onmessage = async (event) => { + const { + action, + offscreen, + devicePixelRatio, + imageData, + zoomScale, + pointerX, + pointerY, + imageAspectRatio, + containerWidth, + containerHeight, + } = event.data; + + switch (action) { + case 'initCanvas': + initCanvas(offscreen, devicePixelRatio); + break; + case 'adaptCanvasSize': + adaptCanvasSize(imageAspectRatio, containerWidth, containerHeight); + break; + case 'drawImageOnCanvas': + await drawImageOnCanvas(imageData, zoomScale, pointerX, pointerY); + break; + default: + break; + } +}; + +const initCanvas = (offscreenCanvas, devicePixelRatio) => { + canvas = offscreenCanvas; + ctx = canvas.getContext('2d'); + dpr = devicePixelRatio; +}; + +const adaptCanvasSize = (imageAspectRatio, containerWidth, containerHeight) => { + const containerAspectRatio = containerWidth / containerHeight; + wideImage = imageAspectRatio > containerAspectRatio; + + canvas.width = containerWidth * dpr; + canvas.height = containerHeight * dpr; + ctx.scale(dpr, dpr); + + if (wideImage) { + drawWidth = containerWidth; + drawHeight = containerWidth / imageAspectRatio; + } else { + drawHeight = containerHeight; + drawWidth = containerHeight * imageAspectRatio; + } + + ctx.imageSmoothingEnabled = true; + ctx.imageSmoothingQuality = 'high'; +}; + +// Draw the image on the OffscreenCanvas +const drawImageOnCanvas = (imageData = {}, zoomScale = 1, pointerX = 0, pointerY = 0) => { + const { bitmapImage } = imageData; + if (!canvas || !bitmapImage) return; + + let offsetX, offsetY; + if (wideImage) { + offsetX = 0; + offsetY = (canvas.height / dpr - drawHeight) / 2; + } else { + offsetX = (canvas.width / dpr - drawWidth) / 2; + offsetY = 0; + } + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + if (zoomScale !== 1) { + const { zoomedWidth, zoomedHeight } = calculateZoomedDimensions(drawWidth, drawHeight, zoomScale); + + const { zoomOffsetX, zoomOffsetY } = calculateZoomOffsets({ + pointerX, + pointerY, + imageData, + zoomedWidth, + zoomedHeight, + drawWidth, + drawHeight, + }); + + ctx.drawImage( + bitmapImage, + zoomOffsetX, + zoomOffsetY, + zoomedWidth, + zoomedHeight, + offsetX, + offsetY, + drawWidth, + drawHeight + ); + } else { + ctx.drawImage(bitmapImage, offsetX, offsetY, drawWidth, drawHeight); + } +}; diff --git a/src/ci360.service.js b/src/ci360.service.js index 9c1d6d5..e1f242a 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -31,8 +31,6 @@ import { THROTTLE_TIME, getDefaultSpinDirection, isSpinKeysPressed, - calculateZoomedDimensions, - calculateZoomOffsets, calculateOffsetFromEvent, createLoadingSpinner, createTransitionOverlay, @@ -51,12 +49,13 @@ class CI360Viewer { this.draggingDirection = null; this.isReady = false; this.currentZoomScale = 1; + this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); this.init(container); } mouseDown(event) { - if (!this.isReady) return; + if (!this.isReady || this.glass) return; const { pageX, pageY } = event; @@ -93,21 +92,22 @@ class CI360Viewer { const speedFactorX = dragFactor * (this.amountX / container.offsetWidth); const speedFactorY = dragFactor * (this.amountY / container.offsetHeight); - const itemsSkippedX = Math.round(deltaX * speedFactorX); - const itemsSkippedY = Math.round(deltaY * speedFactorY); + const itemsSkippedX = Math.abs(Math.round(deltaX * speedFactorX)); + const itemsSkippedY = Math.abs(Math.round(deltaY * speedFactorY)); const shouldMove = itemsSkippedX !== 0 || (this.allowSpinY && itemsSkippedY !== 0); if (shouldMove) { this.onMoveHandler(this.draggingDirection, itemsSkippedX, itemsSkippedY); + this.movementStart = { x: pageX, y: pageY }; + setTimeout(() => { this.isDragging = true; }, 150); - this.movementStart = { x: pageX, y: pageY }; } } mouseMove(event) { - if (!this.isReady || (!this.isClicked && !this.isZoomed)) return; + if (!this.isReady || (!this.isClicked && !this.isZoomed) || this.glass) return; this.hideAllIcons(); this.drag(event.pageX, event.pageY); @@ -116,19 +116,19 @@ class CI360Viewer { } mouseClick(event) { - if (!this.isReady || this.isDragging || !this.pointerZoom) return; + if (!this.isReady || this.isDragging) return; if (this.glass) { this.removeGlass(); return; } - this.toggleZoom(event); + if (this.pointerZoom) this.toggleZoom(event); } - loadOriginalImages(onLoad) { - const cdnPathX = generateCdnPath(this.srcXConfig, true); - const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, true) : null; + loadHigherQualityImages(width, onLoad) { + const cdnPathX = generateCdnPath(this.srcXConfig, width); + const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, width) : null; preloadImages({ cdnPathX, @@ -151,9 +151,10 @@ class CI360Viewer { this.removeZoom(); }, 800); } else { - this.showLoadingSpinner(); + let width = (this.fullscreenView || this.pointerZoom ? document.body : this.container).offsetWidth; - this.loadOriginalImages(() => { + this.showLoadingSpinner(); + this.loadHigherQualityImages(width, () => { this.showTransitionOverlay(); setTimeout(() => { @@ -179,7 +180,6 @@ class CI360Viewer { this.hideLoadingSpinner(); this.hideTransitionOverlay(); - console.log(this.pointerZoom); this.update(ORIENTATIONS.X, this.pointerZoom, offsetX, offsetY); } @@ -282,35 +282,35 @@ class CI360Viewer { this.activeImageY = (this.activeImageY - itemsSkipped + this.amountY) % this.amountY; } - moveRight(stopAtEdges) { + moveRight(stopAtEdges, itemsSkippedX = 1) { if (stopAtEdges && this.activeImageX >= this.imagesX.length - 1) return; - this.moveActiveXIndexUp(1); + this.moveActiveXIndexUp(itemsSkippedX); this.update(ORIENTATIONS.X); } - moveLeft(stopAtEdges) { + moveLeft(stopAtEdges, itemsSkippedX = 1) { if (stopAtEdges && this.activeImageX <= 0) return; - this.moveActiveXIndexDown(1); + this.moveActiveXIndexDown(itemsSkippedX); this.update(ORIENTATIONS.X); } - moveTop(stopAtEdges) { + moveTop(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY >= this.imagesY.length - 1) return; - this.moveActiveYIndexUp(1); + this.moveActiveYIndexUp(itemsSkippedY); this.update(ORIENTATIONS.Y); } - moveBottom(stopAtEdges) { + moveBottom(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY <= 0) return; - this.moveActiveYIndexDown(1); + this.moveActiveYIndexDown(itemsSkippedY); this.update(ORIENTATIONS.Y); } - onMoveHandler(movingDirection, itemsSkippedX, itemsSkippedY) { + onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1) { if (movingDirection === 'right') { this.moveRight(this.stopAtEdges, itemsSkippedX); } else if (movingDirection === 'left') { @@ -323,10 +323,10 @@ class CI360Viewer { } update(orientation, zoomScale, offsetX, offsetY) { - const image = + const imageData = orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; - this.drawImageOnCanvas(image, zoomScale, offsetX, offsetY); + this.drawImageOnCanvas(imageData, zoomScale, offsetX, offsetY); } updatePercentageInLoader(percentage = 0) { @@ -335,73 +335,29 @@ class CI360Viewer { this.loader.innerText = percentage + '%'; } - drawImageOnCanvas(image, zoomScale = 1, pointerX = 0, pointerY = 0) { - if (!this.canvas || !image) return; - - const ctx = this.canvas.getContext('2d'); - - // Handle fullscreen mode: use the full screen dimensions if fullscreen is active + adaptCanvasSize(imageData) { + const { naturalWidth, naturalHeight } = imageData; + const imageAspectRatio = naturalWidth / naturalHeight; const containerWidth = this.fullscreenView ? window.innerWidth : this.canvas.clientWidth; const containerHeight = this.fullscreenView ? window.innerHeight : this.canvas.clientHeight; - // Set canvas resolution to match container size, with device pixel ratio for sharper rendering - this.canvas.width = containerWidth * this.devicePixelRatio; - this.canvas.height = containerHeight * this.devicePixelRatio; - - ctx.scale(this.devicePixelRatio, this.devicePixelRatio); - - ctx.imageSmoothingEnabled = true; - ctx.imageSmoothingQuality = 'high'; - - const imageAspectRatio = image.naturalWidth / image.naturalHeight; - const containerAspectRatio = containerWidth / containerHeight; - - let drawWidth, drawHeight, offsetX, offsetY; - - // Adjust image scaling logic based on aspect ratios - if (imageAspectRatio > containerAspectRatio) { - // Image is wider than container - drawWidth = containerWidth; - drawHeight = containerWidth / imageAspectRatio; - offsetX = 0; - offsetY = (containerHeight - drawHeight) / 2; - } else { - // Image is taller than container - drawHeight = containerHeight; - drawWidth = containerHeight * imageAspectRatio; - offsetX = (containerWidth - drawWidth) / 2; - offsetY = 0; - } - - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - - if (!this.isZoomed) { - ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight); - } else { - const { zoomedWidth, zoomedHeight } = calculateZoomedDimensions(drawWidth, drawHeight, zoomScale); - - const { zoomOffsetX, zoomOffsetY } = calculateZoomOffsets({ - pointerX, - pointerY, - image, - zoomedWidth, - zoomedHeight, - drawWidth, - drawHeight, - }); + this.canvasWorker.postMessage({ + action: 'adaptCanvasSize', + devicePixelRatio: this.devicePixelRatio, + imageAspectRatio: imageAspectRatio, + containerWidth, + containerHeight, + }); + } - ctx.drawImage( - image, - zoomOffsetX, - zoomOffsetY, - zoomedWidth, - zoomedHeight, - offsetX, - offsetY, - drawWidth, - drawHeight - ); - } + drawImageOnCanvas(imageData, zoomScale = 1, pointerX = 0, pointerY = 0) { + this.canvasWorker.postMessage({ + action: 'drawImageOnCanvas', + imageData, + zoomScale, + pointerX, + pointerY, + }); } pushImageToSet(image, index, orientation) { @@ -423,9 +379,11 @@ class CI360Viewer { this.updatePercentageInLoader(this.calculatePercentage()); } - onFirstImageLoaded(event, image) { + onFirstImageLoaded(event, imageData) { this.createContainers(event); - this.drawImageOnCanvas(image); + + this.adaptCanvasSize(imageData); + this.drawImageOnCanvas(imageData); } onAllImagesLoaded() { @@ -444,8 +402,9 @@ class CI360Viewer { magnify(event) { event.stopPropagation(); + const { src } = this.imagesX[this.activeImageX]; + const highPreviewCdnUrl = generateHighPreviewCdnUrl(src); - const highPreviewCdnUrl = generateHighPreviewCdnUrl(this.imagesX[this.activeImageX].src); this.createGlass(); const onLoadImage = (image) => { @@ -688,6 +647,7 @@ class CI360Viewer { addAllIcons() { this.removeLoader(); + this.innerBox.style.cursor = 'grab'; if (this.pointerZoom) { this.createTransitionOverlay(); @@ -760,6 +720,16 @@ class CI360Viewer { this.canvas = createCanvas(this.innerBox, event); this.loader = createLoader(this.innerBox); + const offscreenCanvas = this.canvas.transferControlToOffscreen(); + this.canvasWorker.postMessage( + { + action: 'initCanvas', + offscreen: offscreenCanvas, + devicePixelRatio: window.devicePixelRatio, + }, + [offscreenCanvas] + ); + if (this.fullscreenView) this.addCloseFullscreenIcon(); removeElementFromContainer(this.innerBox, '.cloudimage-lazy'); @@ -835,7 +805,7 @@ class CI360Viewer { this.logoSrc = logoSrc; this.ciParams = ciParams; this.apiVersion = apiVersion; - this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : null; + this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 5) : null; this.keysReverse = keysReverse; this.info = imageInfo; this.keys = keys; @@ -855,7 +825,6 @@ class CI360Viewer { lazySelector, amount: this.amountX, indexZeroBase, - fullscreen: this.fullscreenView, autoplayReverse, }; @@ -867,8 +836,9 @@ class CI360Viewer { amount: this.amountY, }; - const cdnPathX = generateCdnPath(this.srcXConfig, this.fullscreenView); - const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, this.fullscreenView) : null; + const width = (this.fullscreenView ? document.body : this.container).offsetWidth; + const cdnPathX = generateCdnPath(this.srcXConfig, width); + const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, width) : null; if (lazyload) { initLazyload(cdnPathX, this.srcXConfig, (event) => { diff --git a/src/static/css/style.css b/src/static/css/style.css index e47974f..be0332d 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -13,7 +13,6 @@ } .cloudimage-360-inner-box { - cursor: grab; width: 100%; height: 100%; position: relative; diff --git a/src/utils/image-src/generate-cdn-path.js b/src/utils/image-src/generate-cdn-path.js index 40998d1..d131890 100644 --- a/src/utils/image-src/generate-cdn-path.js +++ b/src/utils/image-src/generate-cdn-path.js @@ -6,15 +6,15 @@ const buildCdnUrl = (src, ciToken, finalApiVersion) => { return isCloudImageUrl ? src : `https://${ciToken}.cloudimg.io/${finalApiVersion}${src}`; }; -const buildTransformationParams = ({ ciTransformation, loadOriginalImages, responsiveWidth, ciFilters }) => { - const sizeParam = loadOriginalImages ? '' : `width=${responsiveWidth}`; +const buildTransformationParams = ({ ciTransformation, responsiveWidth, ciFilters }) => { + const sizeParam = `width=${responsiveWidth}`; const transformation = ciTransformation || sizeParam; const filters = ciFilters ? `&f=${ciFilters}` : ''; return `${transformation}${filters}`; }; -export const generateCdnPath = (srcConfig, loadOriginalImages) => { - const { container, folder, apiVersion, filename = '', ciParams } = srcConfig; +export const generateCdnPath = (srcConfig, width) => { + const { folder, apiVersion, filename = '', ciParams } = srcConfig; const { ciToken, ciFilters, ciTransformation } = ciParams || {}; const src = `${folder}${filename}`; @@ -23,12 +23,11 @@ export const generateCdnPath = (srcConfig, loadOriginalImages) => { const version = !FALSY_VALUES.includes(apiVersion) ? apiVersion : null; const finalApiVersion = version ? `${version}/` : ''; - const responsiveWidth = getSizeAccordingToPixelRatio(container.offsetWidth); + const responsiveWidth = getSizeAccordingToPixelRatio(width); const cdn = buildCdnUrl(src, ciToken, finalApiVersion); const transformationParams = buildTransformationParams({ ciTransformation, - loadOriginalImages, responsiveWidth, ciFilters, }); diff --git a/src/utils/load-images/load-images.js b/src/utils/load-images/load-images.js index 3d22e3c..cef9dd5 100644 --- a/src/utils/load-images/load-images.js +++ b/src/utils/load-images/load-images.js @@ -11,12 +11,23 @@ export const loadImages = ({ const loadImage = (url, index) => { const img = new Image(); + img.crossOrigin = 'anonymous'; img.src = url; - img.onload = () => { + img.onload = async () => { + const bitmapImage = await createImageBitmap(img); + + const imageData = { + src: url, + bitmapImage, + naturalWidth: firstImg.naturalWidth, + naturalHeight: firstImg.naturalHeight, + }; + loadedCount++; - loadedImages[index] = img; - onImageLoad?.(img, index); + loadedImages[index] = imageData; + + onImageLoad?.(imageData, index); if (loadedCount === totalImages) { onAllImagesLoad?.(loadedImages); @@ -34,12 +45,24 @@ export const loadImages = ({ }; const firstImg = new Image(); - firstImg.src = imagesUrls[autoplayReverse ? imagesUrls.length - 1 : 0]; - firstImg.onload = () => { - loadedImages[0] = firstImg; + const src = imagesUrls[autoplayReverse ? imagesUrls.length - 1 : 0]; + firstImg.crossOrigin = 'anonymous'; + firstImg.src = src; + firstImg.onload = async () => { + const bitmapImage = await createImageBitmap(firstImg); + + const imageData = { + src, + bitmapImage, + naturalWidth: firstImg.naturalWidth, + naturalHeight: firstImg.naturalHeight, + }; + + loadedImages[0] = imageData; loadedCount++; - onFirstImageLoad?.(firstImg); - onImageLoad?.(firstImg, 0); + + onFirstImageLoad?.(imageData); + onImageLoad?.(imageData, 0); for (let i = 1; i < imagesUrls.length; i++) { loadImage(imagesUrls[i], i); diff --git a/src/utils/zoom/calculate-zoomed-offset.js b/src/utils/zoom/calculate-zoomed-offset.js index 7d60c25..13a4da5 100644 --- a/src/utils/zoom/calculate-zoomed-offset.js +++ b/src/utils/zoom/calculate-zoomed-offset.js @@ -1,18 +1,19 @@ export const calculateZoomOffsets = ({ pointerX, pointerY, - image, + imageData, zoomedWidth, zoomedHeight, drawWidth, drawHeight, }) => { - let zoomOffsetX = (pointerX / drawWidth) * image.naturalWidth - zoomedWidth / 2; - let zoomOffsetY = (pointerY / drawHeight) * image.naturalHeight - zoomedHeight / 2; + const { naturalWidth, naturalHeight } = imageData; + let zoomOffsetX = (pointerX / drawWidth) * naturalWidth - zoomedWidth / 2; + let zoomOffsetY = (pointerY / drawHeight) * naturalHeight - zoomedHeight / 2; // Calculate max offset values - const maxOffsetX = Math.max(0, image.naturalWidth - zoomedWidth); - const maxOffsetY = Math.max(0, image.naturalHeight - zoomedHeight); + const maxOffsetX = Math.max(0, naturalWidth - zoomedWidth); + const maxOffsetY = Math.max(0, naturalHeight - zoomedHeight); // Clamp zoom offsets to the valid range zoomOffsetX = Math.max(0, Math.min(zoomOffsetX, maxOffsetX)); From 0f359443dce4680409834b59acf0d3a331448e5d Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Thu, 24 Oct 2024 20:11:47 +0300 Subject: [PATCH 04/31] fix: SpinY images --- src/ci360.service.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index e1f242a..e3b27d7 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -166,8 +166,7 @@ class CI360Viewer { removeZoom() { this.isZoomed = false; - - this.update(ORIENTATIONS.X); + this.update(); this.showAllIcons(); this.hideTransitionOverlay(); } @@ -180,7 +179,7 @@ class CI360Viewer { this.hideLoadingSpinner(); this.hideTransitionOverlay(); - this.update(ORIENTATIONS.X, this.pointerZoom, offsetX, offsetY); + this.update(this.pointerZoom, offsetX, offsetY); } touchOutside(event) { @@ -267,18 +266,22 @@ class CI360Viewer { } moveActiveXIndexUp(itemsSkipped) { + this.orientation = ORIENTATIONS.X; this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX; } moveActiveXIndexDown(itemsSkipped) { + this.orientation = ORIENTATIONS.X; this.activeImageX = (this.activeImageX - itemsSkipped + this.amountX) % this.amountX; } moveActiveYIndexUp(itemsSkipped) { + this.orientation = ORIENTATIONS.Y; this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY; } moveActiveYIndexDown(itemsSkipped) { + this.orientation = ORIENTATIONS.Y; this.activeImageY = (this.activeImageY - itemsSkipped + this.amountY) % this.amountY; } @@ -286,28 +289,28 @@ class CI360Viewer { if (stopAtEdges && this.activeImageX >= this.imagesX.length - 1) return; this.moveActiveXIndexUp(itemsSkippedX); - this.update(ORIENTATIONS.X); + if (!this.isZoomed) this.update(); } moveLeft(stopAtEdges, itemsSkippedX = 1) { if (stopAtEdges && this.activeImageX <= 0) return; this.moveActiveXIndexDown(itemsSkippedX); - this.update(ORIENTATIONS.X); + if (!this.isZoomed) this.update(); } moveTop(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY >= this.imagesY.length - 1) return; this.moveActiveYIndexUp(itemsSkippedY); - this.update(ORIENTATIONS.Y); + if (!this.isZoomed) this.update(); } moveBottom(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY <= 0) return; this.moveActiveYIndexDown(itemsSkippedY); - this.update(ORIENTATIONS.Y); + if (!this.isZoomed) this.update(); } onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1) { @@ -322,9 +325,9 @@ class CI360Viewer { } } - update(orientation, zoomScale, offsetX, offsetY) { + update(zoomScale, offsetX, offsetY) { const imageData = - orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; + this.orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; this.drawImageOnCanvas(imageData, zoomScale, offsetX, offsetY); } @@ -402,7 +405,8 @@ class CI360Viewer { magnify(event) { event.stopPropagation(); - const { src } = this.imagesX[this.activeImageX]; + const { src } = + this.orientation === ORIENTATIONS.Y ? this.imagesY[this.activeImageY] : this.imagesX[this.activeImageX]; const highPreviewCdnUrl = generateHighPreviewCdnUrl(src); this.createGlass(); From f97e2126ddf79c94fcf05e40479bc9c4db84423d Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Fri, 25 Oct 2024 01:47:14 +0300 Subject: [PATCH 05/31] feat: load images from list --- src/ci360.service.js | 58 ++++++++------ src/ci360.utils.js | 2 +- .../load-images/lazyload/init-lazyload.js | 8 +- src/utils/load-images/preload-images.js | 76 ++++++++----------- src/utils/spin-y/get-moving-direction.js | 15 ++-- src/utils/spin/get-default-spin-direction.js | 6 +- .../spin/should-switch-spin-direction.js | 9 +-- 7 files changed, 85 insertions(+), 89 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index e3b27d7..8078662 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -85,16 +85,19 @@ class CI360Viewer { const deltaX = pageX - this.movementStart.x; const deltaY = pageY - this.movementStart.y; - this.draggingDirection = getMovingDirection(deltaX, deltaY, this.allowSpinY) || this.draggingDirection; + this.draggingDirection = + getMovingDirection({ deltaX, deltaY, allowSpinX: this.allowSpinX, allowSpinY: this.allowSpinY }) || + this.draggingDirection; const container = this.fullscreenView ? document.body : this.container; const dragFactor = this.dragSpeed / 50; + const speedFactorX = dragFactor * (this.amountX / container.offsetWidth); const speedFactorY = dragFactor * (this.amountY / container.offsetHeight); + const itemsSkippedX = this.allowSpinX ? Math.abs(Math.round(deltaX * speedFactorX)) : 0; + const itemsSkippedY = this.allowSpinY ? Math.abs(Math.round(deltaY * speedFactorY)) : 0; - const itemsSkippedX = Math.abs(Math.round(deltaX * speedFactorX)); - const itemsSkippedY = Math.abs(Math.round(deltaY * speedFactorY)); - const shouldMove = itemsSkippedX !== 0 || (this.allowSpinY && itemsSkippedY !== 0); + const shouldMove = (this.allowSpinX && itemsSkippedX !== 0) || (this.allowSpinY && itemsSkippedY !== 0); if (shouldMove) { this.onMoveHandler(this.draggingDirection, itemsSkippedX, itemsSkippedY); @@ -392,8 +395,10 @@ class CI360Viewer { onAllImagesLoaded() { this.addAllIcons(); this.isReady = true; - this.amountX = this.imagesX.length - 1; - this.amountY = this.imagesY.length - 1; + this.amountX = this.imagesX.length; + this.amountY = this.imagesY.length; + this.activeImageX = this.autoplayReverse ? this.amountX - 1 : 0; + this.activeImageY = this.autoplayReverse ? this.amountY - 1 : 0; if (this.autoplay) { this.hideAllIcons(); @@ -483,7 +488,7 @@ class CI360Viewer { reversed: this.autoplayReverse, loopTriggers, }); - }, this.autoplaySpeed); + }, this.speed); } stopAutoplay() { @@ -779,16 +784,12 @@ class CI360Viewer { } = get360ViewProps(container); const ciParams = { ciToken, ciFilters, ciTransformation }; + const parsedImagesListX = imageListX ? JSON.parse(imageListX) : []; + const parsedImagesListY = imageListY ? JSON.parse(imageListY) : []; - this.folder = folder; - this.apiVersion = apiVersion; - this.filenameX = filenameX; - this.filenameY = filenameY; - this.imageListX = imageListX; - this.imageListY = imageListY; - this.indexZeroBase = indexZeroBase; - this.amountX = imageListX ? JSON.parse(imageListX).length : amountX; - this.amountY = imageListY ? JSON.parse(imageListY).length : amountY; + this.amountX = parsedImagesListX.length || amountX; + this.amountY = parsedImagesListY.length || amountY; + this.allowSpinX = !!this.amountX; this.allowSpinY = !!this.amountY; this.activeImageX = autoplayReverse ? this.amountX - 1 : 0; this.activeImageY = autoplayReverse ? this.amountY - 1 : 0; @@ -804,7 +805,6 @@ class CI360Viewer { this.lazySelector = lazySelector; this.controlReverse = controlReverse; this.dragSpeed = Math.max(dragSpeed, 50); - this.autoplaySpeed = (this.speed * 36) / this.amountX; this.stopAtEdges = stopAtEdges; this.logoSrc = logoSrc; this.ciParams = ciParams; @@ -816,12 +816,12 @@ class CI360Viewer { this.innerBox = createInnerBox(this.container); this.initialIconHidden = initialIconHidden; this.bottomCircleHidden = bottomCircleHidden; - this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior); + this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior, this.allowSpinX, this.allowSpinY); this.srcXConfig = { folder, filename: filenameX, - imageList: imageListX, + imageList: parsedImagesListX, container, innerBox: this.innerBox, apiVersion, @@ -835,27 +835,35 @@ class CI360Viewer { this.srcYConfig = { ...this.srcXConfig, filename: filenameY, - imageList: imageListY, + imageList: parsedImagesListY, orientation: ORIENTATIONS.Y, amount: this.amountY, }; const width = (this.fullscreenView ? document.body : this.container).offsetWidth; - const cdnPathX = generateCdnPath(this.srcXConfig, width); - const cdnPathY = this.allowSpinY ? generateCdnPath(this.srcYConfig, width) : null; + const cdnPathX = + this.allowSpinX && !parsedImagesListX.length ? generateCdnPath(this.srcXConfig, width) : null; + const cdnPathY = + this.allowSpinY && !parsedImagesListY.length ? generateCdnPath(this.srcYConfig, width) : null; if (lazyload) { - initLazyload(cdnPathX, this.srcXConfig, (event) => { + const loadCallback = (event) => { preloadImages({ cdnPathX, cdnPathY, configX: this.srcXConfig, configY: this.srcYConfig, onImageLoad: (image, index, orientation) => this.onImageLoad(image, index, orientation), - onFirstImageLoad: (image) => this.onFirstImageLoaded(event, image), + onFirstImageLoad: (imageData) => this.onFirstImageLoaded(event, imageData), onAllImagesLoad: this.onAllImagesLoaded.bind(this), }); - }); + }; + + if (this.allowSpinX) { + initLazyload(cdnPathX, this.srcXConfig, loadCallback); + } else if (this.allowSpinY) { + initLazyload(cdnPathY, this.srcYConfig, loadCallback); + } } this.attachEvents(draggable, swipeable, keys); diff --git a/src/ci360.utils.js b/src/ci360.utils.js index a3bd00f..120fb14 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -24,7 +24,7 @@ const get360ViewProps = (image) => ({ attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || - 36, + 0, 10 ), amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10), diff --git a/src/utils/load-images/lazyload/init-lazyload.js b/src/utils/load-images/lazyload/init-lazyload.js index 25a0286..b34be52 100644 --- a/src/utils/load-images/lazyload/init-lazyload.js +++ b/src/utils/load-images/lazyload/init-lazyload.js @@ -5,7 +5,7 @@ import getFirstCdnImageFromList from './prepare-first-image/get-first-cdn-mage-f const getFirstImageSrc = (imagesSrc, srcConfig) => { const { imageList, indexZeroBase } = srcConfig; - if (imageList) { + if (imageList.length) { try { const images = JSON.parse(imageList); return getFirstCdnImageFromList(images, srcConfig); @@ -34,9 +34,9 @@ const createImage = (src, lazySelector) => { }; export const initLazyload = (cdnPath, srcConfig, onLoad) => { - const { lazySelector, innerBox } = srcConfig || {}; - - const firstImageSrc = getFirstImageSrc(cdnPath, srcConfig); + const { lazySelector, innerBox, imageList } = srcConfig || {}; + const [firstImageSrcInList] = imageList; + const firstImageSrc = firstImageSrcInList || getFirstImageSrc(cdnPath, srcConfig); const lowPreviewSrc = generateLowPreviewCdnUrl(firstImageSrc); const image = createImage(lowPreviewSrc, lazySelector); diff --git a/src/utils/load-images/preload-images.js b/src/utils/load-images/preload-images.js index 87be433..53398e0 100644 --- a/src/utils/load-images/preload-images.js +++ b/src/utils/load-images/preload-images.js @@ -11,11 +11,11 @@ export const preloadImages = ({ onImageLoad, onAllImagesLoad, }) => { - let imagesXUrls = []; - let imagesYUrls = []; let allImagesLoaded = { x: false, y: false }; let loadedImagesX = []; let loadedImagesY = []; + const loadX = cdnPathX || configX.imageList.length; + const loadY = cdnPathY || configY.imageList.length; const handleAllImagesLoaded = () => { if (allImagesLoaded.x && allImagesLoaded.y) { @@ -23,61 +23,45 @@ export const preloadImages = ({ } }; - const loadImagesForOrientation = (cdnPath, config, orientation) => { - let imagesUrls = []; - - if (config.imageList) { - try { - const images = JSON.parse(config.imageList); - // imagesUrls = prepareImagesFromList(images, config); - } catch (error) { - console.error(`Wrong format in image-list attribute for ${orientation}: ${error.message}`); - } - } else { - imagesUrls = generateImagesCdnLinks(cdnPath, config); - } - - return imagesUrls; - }; - - // Load X Images - if (cdnPathX) { - imagesXUrls = loadImagesForOrientation(cdnPathX, configX, ORIENTATIONS.X); + const loadOrientationImages = ({ cdnPath, config, orientation, loadedImages, onFirstImageLoad }) => { + const xOrientation = orientation === ORIENTATIONS.X; + const imageList = config.imageList.length ? config.imageList : generateImagesCdnLinks(cdnPath, config); loadImages({ - imagesUrls: imagesXUrls, + imagesUrls: imageList, onFirstImageLoad, - onImageLoad: (img, index) => { - onImageLoad?.(img, index, ORIENTATIONS.X); - loadedImagesX[index] = img; + onImageLoad: (imageData, index) => { + onImageLoad?.(imageData, index, orientation); + loadedImages[index] = imageData; }, - onAllImagesLoad: (loadedImages) => { - loadedImagesX = loadedImages; - allImagesLoaded.x = true; + onAllImagesLoad: (loadedImagesResult) => { + loadedImages = loadedImagesResult; + allImagesLoaded[xOrientation ? 'x' : 'y'] = true; handleAllImagesLoaded(); }, - autoplayReverse: configX.autoplayReverse, + autoplayReverse: config.autoplayReverse, + }); + }; + + if (loadX) { + loadOrientationImages({ + cdnPath: cdnPathX, + config: configX, + orientation: ORIENTATIONS.X, + loadedImages: loadedImagesX, + onFirstImageLoad, }); } else { allImagesLoaded.x = true; } - // Load Y Images - if (cdnPathY) { - imagesYUrls = loadImagesForOrientation(cdnPathY, configY, ORIENTATIONS.Y); - - loadImages({ - imagesUrls: imagesYUrls, - onImageLoad: (img, index) => { - onImageLoad?.(img, index, ORIENTATIONS.Y); - loadedImagesY[index] = img; - }, - onAllImagesLoad: (loadedImages) => { - loadedImagesY = loadedImages; - allImagesLoaded.y = true; - handleAllImagesLoaded(); - }, - autoplayReverse: configY.autoplayReverse, + if (loadY) { + loadOrientationImages({ + cdnPath: cdnPathY, + config: configY, + orientation: ORIENTATIONS.Y, + loadedImages: loadedImagesY, + onFirstImageLoad: !loadX ? onFirstImageLoad : undefined, }); } else { allImagesLoaded.y = true; diff --git a/src/utils/spin-y/get-moving-direction.js b/src/utils/spin-y/get-moving-direction.js index 88c7ddc..96608aa 100644 --- a/src/utils/spin-y/get-moving-direction.js +++ b/src/utils/spin-y/get-moving-direction.js @@ -1,13 +1,16 @@ -export const getMovingDirection = (deltaX, deltaY, allowSpinY, threshold = 1) => { - // Check if the movement along the X-axis is greater than along the Y-axis - if (Math.abs(deltaX) - threshold > Math.abs(deltaY) || !allowSpinY) { +export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 1 }) => { + const absDeltaX = Math.abs(deltaX); + const absDeltaY = Math.abs(deltaY); + + // X-axis movement logic + if (allowSpinX && absDeltaX - threshold > absDeltaY) { return deltaX > 0 ? 'right' : 'left'; } - // If Y-axis movement is allowed - if (Math.abs(deltaY) - threshold > Math.abs(deltaX) && allowSpinY) { + // Y-axis movement logic + if (allowSpinY && absDeltaY - threshold > absDeltaX) { return deltaY > 0 ? 'down' : 'up'; } - return null; // Return null if no valid direction is determined + return null; }; diff --git a/src/utils/spin/get-default-spin-direction.js b/src/utils/spin/get-default-spin-direction.js index 24be429..f88e57e 100644 --- a/src/utils/spin/get-default-spin-direction.js +++ b/src/utils/spin/get-default-spin-direction.js @@ -1,6 +1,10 @@ import { AUTOPLAY_BEHAVIOR } from '../constants'; -export const getDefaultSpinDirection = (autoplayBehavior) => { +export const getDefaultSpinDirection = (autoplayBehavior, allowSpinX, allowSpinY) => { + if (!allowSpinY) return 'x'; + + if (!allowSpinX) return 'y'; + switch (autoplayBehavior) { case AUTOPLAY_BEHAVIOR.SPIN_XY: return 'x'; diff --git a/src/utils/spin/should-switch-spin-direction.js b/src/utils/spin/should-switch-spin-direction.js index b04af2a..0277107 100644 --- a/src/utils/spin/should-switch-spin-direction.js +++ b/src/utils/spin/should-switch-spin-direction.js @@ -9,13 +9,10 @@ export const shouldSwitchSpinDirection = ({ autoplayReverse, spinDirection, }) => { - const reachedEdgeX = activeImageX === (autoplayReverse ? 0 : amountX); - const reachedEdgeY = activeImageY === (autoplayReverse ? 0 : amountY); + const reachedEdgeX = activeImageX === (autoplayReverse ? 0 : amountX - 1); + const reachedEdgeY = activeImageY === (autoplayReverse ? 0 : amountY - 1); - if ( - autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_XY || - autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX - ) { + if (autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_XY || autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX) { return (spinDirection === 'x' && reachedEdgeX) || (spinDirection === 'y' && reachedEdgeY); } From 82ad8bfd216451a25c4ebb1222a80b327761d175 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Fri, 25 Oct 2024 14:17:23 +0300 Subject: [PATCH 06/31] refactor: Remove unused files --- src/ci360.service.js | 2 +- src/utils/auto-play/get-speed-factor.js | 3 -- src/utils/auto-play/get-throttle-time.js | 18 ------------ src/utils/class-names/remove-class.js | 10 ------- .../apply-styles-to-container.js | 7 ----- src/utils/container-elements/index.js | 1 - .../generate-high-preview-cdn-url.js | 2 +- .../image-src/generate-low-preview-cdn-url.js | 2 +- ...ramByRegex.js => remove-param-by-regex.js} | 4 +-- src/utils/index.js | 6 ---- .../load-images/load-image-as-promise.js | 9 ------ src/utils/load-images/load-original-images.js | 9 ------ .../load-images/preload-original-images.js | 1 - .../magnify/get-current-original-image.js | 28 ------------------ src/utils/responsive/contain.js | 3 -- src/utils/responsive/fit.js | 29 ------------------- .../responsive/get-image-aspect-ratio.js | 25 ---------------- .../get-responsive-width-of-container.js | 3 -- src/utils/responsive/get-size-limit.js | 6 ---- 19 files changed, 4 insertions(+), 164 deletions(-) delete mode 100644 src/utils/auto-play/get-speed-factor.js delete mode 100644 src/utils/auto-play/get-throttle-time.js delete mode 100644 src/utils/class-names/remove-class.js delete mode 100644 src/utils/container-elements/apply-styles-to-container.js rename src/utils/image-src/{removeParamByRegex.js => remove-param-by-regex.js} (77%) delete mode 100644 src/utils/load-images/load-image-as-promise.js delete mode 100644 src/utils/load-images/load-original-images.js delete mode 100644 src/utils/load-images/preload-original-images.js delete mode 100644 src/utils/magnify/get-current-original-image.js delete mode 100644 src/utils/responsive/contain.js delete mode 100644 src/utils/responsive/fit.js delete mode 100644 src/utils/responsive/get-image-aspect-ratio.js delete mode 100644 src/utils/responsive/get-responsive-width-of-container.js delete mode 100644 src/utils/responsive/get-size-limit.js diff --git a/src/ci360.service.js b/src/ci360.service.js index 8078662..dea6fbd 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -734,7 +734,7 @@ class CI360Viewer { { action: 'initCanvas', offscreen: offscreenCanvas, - devicePixelRatio: window.devicePixelRatio, + devicePixelRatio: this.devicePixelRatio, }, [offscreenCanvas] ); diff --git a/src/utils/auto-play/get-speed-factor.js b/src/utils/auto-play/get-speed-factor.js deleted file mode 100644 index 2558a8f..0000000 --- a/src/utils/auto-play/get-speed-factor.js +++ /dev/null @@ -1,3 +0,0 @@ -export const getSpeedFactor = (dragSpeed, amount, containerOffset) => { - return Math.floor(((((dragSpeed / 150) * 36) / amount) * 25 * containerOffset) / 1500) || 1; -}; diff --git a/src/utils/auto-play/get-throttle-time.js b/src/utils/auto-play/get-throttle-time.js deleted file mode 100644 index 24a7e4c..0000000 --- a/src/utils/auto-play/get-throttle-time.js +++ /dev/null @@ -1,18 +0,0 @@ -export const getThrottleTime = (dragSpeed, amount, containerOffset) => { - const baseThrottle = 15; // Base throttle time in ms - const minThrottle = 1; // Minimum throttle time - const maxThrottle = 30; // Maximum throttle time - - // Calculate factors based on input parameters - const containerFactor = Math.max(1, containerOffset / 100); // Adjust the scale factor - const amountFactor = Math.max(1, 100 / amount); // Use a higher divisor to adjust sensitivity - const speedFactor = Math.max(1, dragSpeed / 1000); // Higher divisor for drag speed - - // Dynamic throttle time calculation - let throttleTime = baseThrottle + (containerFactor * amountFactor) / speedFactor; - - // Ensure throttle time is within min and max bounds - throttleTime = Math.min(Math.max(throttleTime, minThrottle), maxThrottle); - - return Math.floor(throttleTime); -}; diff --git a/src/utils/class-names/remove-class.js b/src/utils/class-names/remove-class.js deleted file mode 100644 index c842338..0000000 --- a/src/utils/class-names/remove-class.js +++ /dev/null @@ -1,10 +0,0 @@ -export const removeClass = (el, className) => { - if (el.classList) { - el.classList.remove(className); - } else { - el.className = el.className.replace( - new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), - ' ' - ); - } -}; diff --git a/src/utils/container-elements/apply-styles-to-container.js b/src/utils/container-elements/apply-styles-to-container.js deleted file mode 100644 index a727926..0000000 --- a/src/utils/container-elements/apply-styles-to-container.js +++ /dev/null @@ -1,7 +0,0 @@ -export const applyStylesToContainer = (container) => { - container.style.position = 'relative'; - container.style.width = '100%'; - container.style.cursor = 'wait'; - container.setAttribute('draggable', 'false'); - container.className = `${container.className} initialized`; -}; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index dcc2b1d..bf502c6 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -8,7 +8,6 @@ export { createInnerBox } from './create-inner-box'; export { createMagnifierIcon } from './create-magnifier-icon'; export { createBoxShadow } from './create-box-shadow'; export { createLoader } from './create-loader'; -export { applyStylesToContainer } from './apply-styles-to-container'; export { createFullscreenModal } from './create-fullscreen-modal'; export { removeElementFromContainer } from './remove-element-from-container'; export { createLoadingSpinner } from './create-loading-spinner'; diff --git a/src/utils/image-src/generate-high-preview-cdn-url.js b/src/utils/image-src/generate-high-preview-cdn-url.js index 5c2ece1..2ade30d 100644 --- a/src/utils/image-src/generate-high-preview-cdn-url.js +++ b/src/utils/image-src/generate-high-preview-cdn-url.js @@ -1,3 +1,3 @@ -import removeParamByRegex from './removeParamByRegex'; +import { removeParamByRegex } from './remove-param-by-regex'; export const generateHighPreviewCdnUrl = (url) => removeParamByRegex(url, 'width'); diff --git a/src/utils/image-src/generate-low-preview-cdn-url.js b/src/utils/image-src/generate-low-preview-cdn-url.js index d7e6903..6b605a0 100644 --- a/src/utils/image-src/generate-low-preview-cdn-url.js +++ b/src/utils/image-src/generate-low-preview-cdn-url.js @@ -1,4 +1,4 @@ -import removeParamByRegex from './removeParamByRegex'; +import { removeParamByRegex } from './remove-param-by-regex'; const generateLowPreviewCdnUrl = (cdnUrl) => { const cleanedCdnUrl = removeParamByRegex(cdnUrl, 'width'); diff --git a/src/utils/image-src/removeParamByRegex.js b/src/utils/image-src/remove-param-by-regex.js similarity index 77% rename from src/utils/image-src/removeParamByRegex.js rename to src/utils/image-src/remove-param-by-regex.js index 3babf11..f2f95c5 100644 --- a/src/utils/image-src/removeParamByRegex.js +++ b/src/utils/image-src/remove-param-by-regex.js @@ -1,4 +1,4 @@ -const removeParamByRegex = (url, paramToRemove) => { +export const removeParamByRegex = (url, paramToRemove) => { const [base, query] = url.split('?'); if (!query) return url; @@ -10,5 +10,3 @@ const removeParamByRegex = (url, paramToRemove) => { return cleanedQuery ? `${base}?${cleanedQuery}` : base; }; - -export default removeParamByRegex; diff --git a/src/utils/index.js b/src/utils/index.js index f3a10ab..b9f09a8 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -3,13 +3,9 @@ export { generateCdnPath } from './image-src/generate-cdn-path'; export { generateHighPreviewCdnUrl } from './image-src/generate-high-preview-cdn-url'; export { preloadImages } from './load-images/preload-images'; -export { preloadOriginalImages } from './load-images/preload-original-images'; export { initLazyload } from './load-images/lazyload/init-lazyload'; export { loadImage } from './load-images/load-image'; -export { contain } from './responsive/contain'; -export { getImageAspectRatio } from './responsive/get-image-aspect-ratio'; - export { magnify } from './magnify/magnify'; export { generateZoomInSteps } from './zoom/generate-zoom-in-steps'; @@ -19,11 +15,9 @@ export { calculateZoomedDimensions } from './zoom/calculate-zoomed-dimensions'; export { calculateZoomOffsets } from './zoom/calculate-zoomed-offset'; export { loop } from './auto-play/loop'; -export { getSpeedFactor } from './auto-play/get-speed-factor'; export { isCompletedOneCycle } from './auto-play/is-completed-one-cycle'; export { addClass } from './class-names/add-class'; -export { removeClass } from './class-names/remove-class'; export { shouldSwitchSpinDirection } from './spin/should-switch-spin-direction'; export { getDefaultSpinDirection } from './spin/get-default-spin-direction'; diff --git a/src/utils/load-images/load-image-as-promise.js b/src/utils/load-images/load-image-as-promise.js deleted file mode 100644 index 95faea9..0000000 --- a/src/utils/load-images/load-image-as-promise.js +++ /dev/null @@ -1,9 +0,0 @@ -export const loadImageAsPromise = (src, cb) => { - const image = new Image(); - image.src = src; - - const onImageLoad = () => cb(image); - - image.onload = onImageLoad; - image.onerror = onImageLoad; -}; diff --git a/src/utils/load-images/load-original-images.js b/src/utils/load-images/load-original-images.js deleted file mode 100644 index c00abd0..0000000 --- a/src/utils/load-images/load-original-images.js +++ /dev/null @@ -1,9 +0,0 @@ -import { loadImageAsPromise } from './load-image-as-promise'; - -export const loadOriginalImages = async (imagesSrcs, cb) => { - await Promise.all( - imagesSrcs.map(async (src, index) => { - await loadImageAsPromise(src, index, cb); - }) - ); -}; diff --git a/src/utils/load-images/preload-original-images.js b/src/utils/load-images/preload-original-images.js deleted file mode 100644 index e8fcc6d..0000000 --- a/src/utils/load-images/preload-original-images.js +++ /dev/null @@ -1 +0,0 @@ -export const preloadOriginalImages = (srcConfig, imagesSrc, cb) => {}; diff --git a/src/utils/magnify/get-current-original-image.js b/src/utils/magnify/get-current-original-image.js deleted file mode 100644 index ae358f8..0000000 --- a/src/utils/magnify/get-current-original-image.js +++ /dev/null @@ -1,28 +0,0 @@ -import { ORIENTATIONS } from '../../constants/orientations'; -import { AND_SYMBOL_REGEX, ORGINAL_SIZE_REGEX } from '../../constants/regex'; - -export const getCurrentOriginalImage = ( - movingDirection, - imagesX, - imagesY, - activeImageX, - activeImageY -) => { - const currentImage = new Image(); - - const originalImagesXSrcs = imagesX.map((image) => - image.src.replace(ORGINAL_SIZE_REGEX, '').replace(AND_SYMBOL_REGEX, '?') - ); - - const originalImagesYSrcs = imagesY.map((image) => - image.src.replace(ORGINAL_SIZE_REGEX, '').replace(AND_SYMBOL_REGEX, '?') - ); - - currentImage.src = originalImagesXSrcs[activeImageX - 1]; - - if (movingDirection === ORIENTATIONS.Y) { - currentImage.src = originalImagesYSrcs[activeImageY - 1]; - } - - return currentImage; -}; diff --git a/src/utils/responsive/contain.js b/src/utils/responsive/contain.js deleted file mode 100644 index e43e329..0000000 --- a/src/utils/responsive/contain.js +++ /dev/null @@ -1,3 +0,0 @@ -import { fit } from './fit'; - -export const contain = fit(true); diff --git a/src/utils/responsive/fit.js b/src/utils/responsive/fit.js deleted file mode 100644 index 9028b4f..0000000 --- a/src/utils/responsive/fit.js +++ /dev/null @@ -1,29 +0,0 @@ -export const fit = - (contains) => - ( - parentWidth, - parentHeight, - childWidth, - childHeight, - scale = 1, - offsetX = 0.5, - offsetY = 0.5 - ) => { - const childRatio = childWidth / childHeight; - const parentRatio = parentWidth / parentHeight; - let width = parentWidth * scale; - let height = parentHeight * scale; - - if (contains ? childRatio > parentRatio : childRatio < parentRatio) { - height = width / childRatio; - } else { - width = height * childRatio; - } - - return { - width, - height, - offsetX: (parentWidth - width) * offsetX, - offsetY: (parentHeight - height) * offsetY, - }; - }; diff --git a/src/utils/responsive/get-image-aspect-ratio.js b/src/utils/responsive/get-image-aspect-ratio.js deleted file mode 100644 index 416429f..0000000 --- a/src/utils/responsive/get-image-aspect-ratio.js +++ /dev/null @@ -1,25 +0,0 @@ -export const getImageAspectRatio = (image, providedRatio) => { - try { - let imageAspectRatio = image.width / image.height; - - if (typeof providedRatio === 'number') { - imageAspectRatio = providedRatio; - } - - if (providedRatio && typeof providedRatio === 'object') { - const mediaQueries = Object.keys(providedRatio).sort((a, b) => a - b); - - const activeMedia = mediaQueries.find( - (mediaQuery) => window.innerWidth <= parseInt(mediaQuery, 10) - ); - - if (activeMedia) { - imageAspectRatio = providedRatio[activeMedia]; - } - } - - return imageAspectRatio; - } catch { - return 1; - } -}; diff --git a/src/utils/responsive/get-responsive-width-of-container.js b/src/utils/responsive/get-responsive-width-of-container.js deleted file mode 100644 index e8e209d..0000000 --- a/src/utils/responsive/get-responsive-width-of-container.js +++ /dev/null @@ -1,3 +0,0 @@ -import { getSizeLimit } from './get-size-limit'; - -export const getResponsiveWidthOfContainer = (width) => getSizeLimit(width); diff --git a/src/utils/responsive/get-size-limit.js b/src/utils/responsive/get-size-limit.js deleted file mode 100644 index 7cfa6ce..0000000 --- a/src/utils/responsive/get-size-limit.js +++ /dev/null @@ -1,6 +0,0 @@ -export const getSizeLimit = (currentSize) => { - if (currentSize <= 25) return '25'; - if (currentSize <= 50) return '50'; - - return (Math.ceil(currentSize / 100) * 100).toString(); -}; From 5d678db501d2be43eccb3205a4a85b437c533123 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Fri, 25 Oct 2024 18:00:08 +0300 Subject: [PATCH 07/31] feat: Init instance in a lazy mode --- src/ci360.js | 52 +++++ src/ci360.service.js | 47 +++-- src/ci360.utils.js | 188 +++++++++++------- src/index.js | 130 +----------- src/static/css/style.css | 4 +- src/types/ci360.d.ts | 53 +++++ .../load-images/lazyload/init-lazyload.js | 10 +- 7 files changed, 258 insertions(+), 226 deletions(-) create mode 100644 src/ci360.js create mode 100644 src/types/ci360.d.ts diff --git a/src/ci360.js b/src/ci360.js new file mode 100644 index 0000000..6a2f3f5 --- /dev/null +++ b/src/ci360.js @@ -0,0 +1,52 @@ +import CI360Viewer from './ci360.service'; + +class CI360 { + constructor() { + this.views = new Map(); + this.initAll = this.initAll.bind(this); + this.getViews = this.getViews.bind(this); + } + + generateId() { + return `ci360-${Math.random().toString(36).slice(2, 11)}`; + } + + init(container, config, fullscreen) { + if (!container) return; + + const containerId = container.id || this.generateId(); + if (!container.id) { + container.id = containerId; + } + + const instance = new CI360Viewer(container, config, fullscreen); + this.views.set(containerId, instance); + + return instance; + } + + initAll(className = 'cloudimage-360') { + const containers = document.querySelectorAll(`.${className}`); + + [...containers].filter(Boolean).forEach((container) => { + const containerId = container.id || this.generateId(); + + if (!container.id) { + container.id = containerId; + } + + const instance = new CI360Viewer(container); + this.views.set(containerId, instance); + }); + } + + getViewById(id) { + return this.views.get(id); + } + + getViews() { + return Array.from(this.views.values()); + } +} + +export default CI360; diff --git a/src/ci360.service.js b/src/ci360.service.js index dea6fbd..77ab78c 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -1,6 +1,6 @@ import throttle from 'lodash.throttle'; -import { get360ViewProps } from './ci360.utils'; +import { adaptConfig, getConfigFromImage } from './ci360.utils'; import './static/css/style.css'; import './static/css/hotspots.css'; import { @@ -37,7 +37,7 @@ import { } from './utils'; class CI360Viewer { - constructor(container, fullscreen) { + constructor(container, config, fullscreen) { this.container = container; this.isClicked = false; this.fullscreenView = !!fullscreen; @@ -51,7 +51,7 @@ class CI360Viewer { this.currentZoomScale = 1; this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); - this.init(container); + this.init(this.container, config); } mouseDown(event) { @@ -428,7 +428,7 @@ class CI360Viewer { const fullscreenContainer = createFullscreenModal(this.container); - new CI360Viewer(fullscreenContainer, true); + new CI360Viewer(fullscreenContainer, null, true); } closeFullscreenModal(event) { @@ -557,7 +557,7 @@ class CI360Viewer { showMagnifierIcon() { if (!this.magnifierIcon) return; - this.magnifierIcon.style.visibility = 'visible'; // !TODO: Rework + this.magnifierIcon.style.visibility = 'visible'; this.magnifierIcon.style.opacity = 1; } @@ -744,7 +744,7 @@ class CI360Viewer { removeElementFromContainer(this.innerBox, '.cloudimage-lazy'); } - init(container) { + init(container, config) { let { folder, apiVersion, @@ -781,7 +781,7 @@ class CI360Viewer { imageInfo = 'black', initialIconHidden, bottomCircleHidden, - } = get360ViewProps(container); + } = config ? adaptConfig(config) : getConfigFromImage(container); const ciParams = { ciToken, ciFilters, ciTransformation }; const parsedImagesListX = imageListX ? JSON.parse(imageListX) : []; @@ -826,6 +826,7 @@ class CI360Viewer { innerBox: this.innerBox, apiVersion, ciParams, + lazyload, lazySelector, amount: this.amountX, indexZeroBase, @@ -846,24 +847,22 @@ class CI360Viewer { const cdnPathY = this.allowSpinY && !parsedImagesListY.length ? generateCdnPath(this.srcYConfig, width) : null; - if (lazyload) { - const loadCallback = (event) => { - preloadImages({ - cdnPathX, - cdnPathY, - configX: this.srcXConfig, - configY: this.srcYConfig, - onImageLoad: (image, index, orientation) => this.onImageLoad(image, index, orientation), - onFirstImageLoad: (imageData) => this.onFirstImageLoaded(event, imageData), - onAllImagesLoad: this.onAllImagesLoaded.bind(this), - }); - }; + const loadCallback = (event) => { + preloadImages({ + cdnPathX, + cdnPathY, + configX: this.srcXConfig, + configY: this.srcYConfig, + onImageLoad: (image, index, orientation) => this.onImageLoad(image, index, orientation), + onFirstImageLoad: (imageData) => this.onFirstImageLoaded(event, imageData), + onAllImagesLoad: this.onAllImagesLoaded.bind(this), + }); + }; - if (this.allowSpinX) { - initLazyload(cdnPathX, this.srcXConfig, loadCallback); - } else if (this.allowSpinY) { - initLazyload(cdnPathY, this.srcYConfig, loadCallback); - } + if (this.allowSpinX) { + initLazyload(cdnPathX, this.srcXConfig, loadCallback); + } else if (this.allowSpinY) { + initLazyload(cdnPathY, this.srcYConfig, loadCallback); } this.attachEvents(draggable, swipeable, keys); diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 120fb14..2bf95ed 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -1,82 +1,136 @@ import { AUTOPLAY_BEHAVIOR } from './utils/constants'; -//TODO [deprecated]: remove filename, amount in the upcoming versions -const get360ViewProps = (image) => ({ - folder: attr(image, 'folder') || attr(image, 'data-folder') || '/', - apiVersion: - attr(image, 'api-version') || - attr(image, 'data-api-version') || - attr(image, 'apiVersion') || - attr(image, 'data-apiVersion') || - 'v7', - filenameX: - attr(image, 'filename') || - attr(image, 'data-filename') || - attr(image, 'filename-x') || - attr(image, 'data-filename-x') || - 'image-{index}.jpg', - filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg', - imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null, - imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null, - indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10), - amountX: parseInt( - attr(image, 'amount') || - attr(image, 'data-amount') || - attr(image, 'amount-x') || - attr(image, 'data-amount-x') || - 0, - 10 - ), - amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10), - speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10), - dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10), - keys: isTrue(image, 'keys'), - keysReverse: isTrue(image, 'keys-reverse'), - boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'), - autoplay: isTrue(image, 'autoplay'), - autoplayBehavior: - attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || AUTOPLAY_BEHAVIOR.SPIN_X, - playOnce: isTrue(image, 'play-once'), - autoplayReverse: isTrue(image, 'autoplay-reverse'), - pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10), - bottomCircle: isTrue(image, 'bottom-circle'), - fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'), - magnifier: - (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && - parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10), +// Default values object +const DEFAULTS_VALUES = { + folder: '/', + apiVersion: 'v7', + filenameX: 'image-{index}.jpg', + filenameY: 'image-y-{index}.jpg', + imageListX: null, + imageListY: null, + indexZeroBase: 0, + amountX: 0, + amountY: 0, + speed: 80, + dragSpeed: 150, + keys: false, + keysReverse: false, + boxShadow: null, + autoplay: false, + autoplayBehavior: AUTOPLAY_BEHAVIOR.SPIN_X, + playOnce: false, + autoplayReverse: false, + pointerZoom: 0, + bottomCircle: false, + fullscreen: false, + magnifier: null, + bottomCircleOffset: 5, + ciToken: null, + ciFilters: null, + ciTransformation: null, + lazyload: false, + lazySelector: 'lazyload', + spinReverse: false, + controlReverse: false, + stopAtEdges: false, + logoSrc: 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', + imageInfo: false, + initialIconHidden: true, + bottomCircleHidden: true, +}; + +const getConfigFromImage = (image) => ({ + folder: getAttr(image, 'folder', DEFAULTS_VALUES.folder), + apiVersion: getAttr(image, 'api-version', DEFAULTS_VALUES.apiVersion), + filenameX: getAttr(image, 'filename') || getAttr(image, 'filename-x') || DEFAULTS_VALUES.filenameX, + filenameY: getAttr(image, 'filename-y', DEFAULTS_VALUES.filenameY), + imageListX: getAttr(image, 'image-list-x', DEFAULTS_VALUES.imageListX), + imageListY: getAttr(image, 'image-list-y', DEFAULTS_VALUES.imageListY), + indexZeroBase: parseInt(getAttr(image, 'index-zero-base', DEFAULTS_VALUES.indexZeroBase), 10), + amountX: parseInt(getAttr(image, 'amount-x', DEFAULTS_VALUES.amountX), 10), + amountY: parseInt(getAttr(image, 'amount-y', DEFAULTS_VALUES.amountY), 10), + speed: parseInt(getAttr(image, 'speed', DEFAULTS_VALUES.speed), 10), + dragSpeed: parseInt(getAttr(image, 'drag-speed', DEFAULTS_VALUES.dragSpeed), 10), + keys: isTrue(image, 'keys', DEFAULTS_VALUES.keys), + keysReverse: isTrue(image, 'keys-reverse', DEFAULTS_VALUES.keysReverse), + boxShadow: getAttr(image, 'box-shadow', DEFAULTS_VALUES.boxShadow), + autoplay: isTrue(image, 'autoplay', DEFAULTS_VALUES.autoplay), + autoplayBehavior: getAttr(image, 'autoplay-behavior', DEFAULTS_VALUES.autoplayBehavior), + playOnce: isTrue(image, 'play-once', DEFAULTS_VALUES.playOnce), + autoplayReverse: isTrue(image, 'autoplay-reverse', DEFAULTS_VALUES.autoplayReverse), + pointerZoom: parseFloat(getAttr(image, 'pointer-zoom', DEFAULTS_VALUES.pointerZoom), 10), + bottomCircle: isTrue(image, 'bottom-circle', DEFAULTS_VALUES.bottomCircle), + fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen', DEFAULTS_VALUES.fullscreen), + magnifier: parseFloat(getAttr(image, 'magnifier', DEFAULTS_VALUES.magnifier), 10), bottomCircleOffset: parseInt( - attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, + getAttr(image, 'bottom-circle-offset', DEFAULTS_VALUES.bottomCircleOffset), 10 ), - ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'), - ciFilters: attr(image, 'filters') || attr(image, 'data-filters'), - ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'), - lazyload: isTrue(image, 'lazyload'), - lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload', - spinReverse: isTrue(image, 'spin-reverse'), - controlReverse: isTrue(image, 'control-reverse'), - stopAtEdges: isTrue(image, 'stop-at-edges'), - logoSrc: - attr(image, 'logo-src') || - 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', - imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info'), + ciToken: getAttr(image, 'responsive', DEFAULTS_VALUES.ciToken), + ciFilters: getAttr(image, 'filters', DEFAULTS_VALUES.ciFilters), + ciTransformation: getAttr(image, 'transformation', DEFAULTS_VALUES.ciTransformation), + lazyload: isTrue(image, 'lazyload', DEFAULTS_VALUES.lazyload), + lazySelector: getAttr(image, 'lazyload-selector', DEFAULTS_VALUES.lazySelector), + spinReverse: isTrue(image, 'spin-reverse', DEFAULTS_VALUES.spinReverse), + controlReverse: isTrue(image, 'control-reverse', DEFAULTS_VALUES.controlReverse), + stopAtEdges: isTrue(image, 'stop-at-edges', DEFAULTS_VALUES.stopAtEdges), + logoSrc: getAttr(image, 'logo-src', DEFAULTS_VALUES.logoSrc), + imageInfo: isTrue(image, 'info', DEFAULTS_VALUES.imageInfo), initialIconHidden: isFalse(image, 'initial-icon'), bottomCircleHidden: isFalse(image, 'bottom-circle'), }); +const adaptConfig = (config) => ({ + folder: config.folder || DEFAULTS_VALUES.folder, + apiVersion: config.apiVersion || DEFAULTS_VALUES.apiVersion, + filenameX: config.filenameX || config.filename || DEFAULTS_VALUES.filenameX, + filenameY: config.filenameY || DEFAULTS_VALUES.filenameY, + imageListX: config.imageListX || DEFAULTS_VALUES.imageListX, + imageListY: config.imageListY || DEFAULTS_VALUES.imageListY, + indexZeroBase: parseInt(config.indexZeroBase ?? DEFAULTS_VALUES.indexZeroBase, 10), + amountX: parseInt(config.amountX ?? DEFAULTS_VALUES.amountX, 10), + amountY: parseInt(config.amountY ?? DEFAULTS_VALUES.amountY, 10), + speed: parseInt(config.speed ?? DEFAULTS_VALUES.speed, 10), + dragSpeed: parseInt(config.dragSpeed ?? DEFAULTS_VALUES.dragSpeed, 10), + keys: config.keys ?? DEFAULTS_VALUES.keys, + keysReverse: config.keysReverse ?? DEFAULTS_VALUES.keysReverse, + boxShadow: config.boxShadow || DEFAULTS_VALUES.boxShadow, + autoplay: config.autoplay ?? DEFAULTS_VALUES.autoplay, + autoplayBehavior: config.autoplayBehavior || DEFAULTS_VALUES.autoplayBehavior, + playOnce: config.playOnce ?? DEFAULTS_VALUES.playOnce, + autoplayReverse: config.autoplayReverse ?? DEFAULTS_VALUES.autoplayReverse, + pointerZoom: parseFloat(config.pointerZoom ?? DEFAULTS_VALUES.pointerZoom, 10), + bottomCircle: config.bottomCircle ?? DEFAULTS_VALUES.bottomCircle, + fullscreen: config.fullscreen ?? DEFAULTS_VALUES.fullscreen, + magnifier: parseFloat(config.magnifier ?? DEFAULTS_VALUES.magnifier, 10), + bottomCircleOffset: parseInt(config.bottomCircleOffset ?? DEFAULTS_VALUES.bottomCircleOffset, 10), + ciToken: config.ciToken || DEFAULTS_VALUES.ciToken, + ciFilters: config.ciFilters || DEFAULTS_VALUES.ciFilters, + ciTransformation: config.ciTransformation || DEFAULTS_VALUES.ciTransformation, + lazyload: config.lazyload ?? DEFAULTS_VALUES.lazyload, + lazySelector: config.lazySelector || DEFAULTS_VALUES.lazySelector, + spinReverse: config.spinReverse ?? DEFAULTS_VALUES.spinReverse, + controlReverse: config.controlReverse ?? DEFAULTS_VALUES.controlReverse, + stopAtEdges: config.stopAtEdges ?? DEFAULTS_VALUES.stopAtEdges, + logoSrc: config.logoSrc || DEFAULTS_VALUES.logoSrc, + imageInfo: config.imageInfo ?? DEFAULTS_VALUES.imageInfo, + initialIconHidden: config.initialIconHidden ?? DEFAULTS_VALUES.initialIconHidden, + bottomCircleHidden: config.bottomCircleHidden ?? DEFAULTS_VALUES.bottomCircleHidden, +}); + +// Helper functions +const getAttr = (element, attribute, defaultValue) => + element.getAttribute(attribute) || element.getAttribute(`data-${attribute}`) || defaultValue; + const isTrue = (image, type) => { - const imgProp = attr(image, type); - const imgDataProp = attr(image, `data-${type}`); + const imgProp = getAttr(image, type) || getAttr(image, `data-${type}`); - return (imgProp !== null && imgProp !== 'false') || (imgDataProp !== null && imgDataProp !== 'false'); + return imgProp !== null && imgProp !== 'false'; }; -const isFalse = (image, type) => { - const imgProp = attr(image, type); - const imgDataProp = attr(image, `data-${type}`); - return imgProp === 'false' || imgDataProp === 'false'; +const isFalse = (image, type) => { + const imgProp = getAttr(image, type, null); + return imgProp === 'false'; }; -const attr = (element, attribute) => element.getAttribute(attribute); - -export { get360ViewProps, attr, isTrue }; +export { adaptConfig, getConfigFromImage }; diff --git a/src/index.js b/src/index.js index cdb0c60..a379db5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,129 +1,3 @@ -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 { isTrue } from './ci360.utils'; +import CI360 from './ci360'; -function getContainerWithId(container) { - const containerId = container.id; - - if (!containerId) { - const uniqueId = Math.floor(Math.random() * 10000); - const generatedContainerId = `cloudimage-360-view-${uniqueId}`; - - container.id = generatedContainerId; - } - - return container; -} - -function init() { - const viewers = []; - const view360Array = document.querySelectorAll( - '.cloudimage-360:not(.initialized)' - ); - - [].slice.call(view360Array).forEach((_container) => { - const container = getContainerWithId(_container); - - const isHotspotsEnabled = isTrue(container, 'hotspots'); - - if (!isHotspotsEnabled) { - viewers.push(new CI360Viewer(container)); - } - }); - - window.CI360._viewers = viewers; -} - -function destroy() { - if (isNoViewers()) return; - - window.CI360._viewers.forEach((viewer) => { - viewer.destroy(); - }); - - window.CI360._viewers = []; -} - -function getActiveIndexByID(id, oriantation) { - if (isNoViewers()) return; - - let currentViewer = window.CI360._viewers.filter( - (viewer) => viewer.id === id - )[0]; - - if (oriantation === 'y') { - return currentViewer && currentViewer.activeImageY - 1; - } - - return currentViewer && currentViewer.activeImageX - 1; -} - -function add(id) { - const view360Array = Array.from( - document.querySelectorAll('.cloudimage-360:not(.initialized)') - ); - - if (view360Array.length && id) { - const newViewContainer = view360Array.filter( - (viewer) => viewer.id === id - )[0]; - - newViewContainer && - window.CI360._viewers.push(new CI360Viewer(newViewContainer)); - } -} - -function update(id = null, forceUpdate = false, hotspotConfigs = null) { - if (id) { - const view = window.CI360._viewers.filter((viewer) => viewer.id === id)[0]; - - if (hotspotConfigs) { - const view360Array = document.querySelectorAll('.cloudimage-360'); - const container = Array.from(view360Array).find((view) => view.id === id); - container.setAttribute('data-hotspots', true); - } - - view.updateView(forceUpdate, window.CI360._viewers, hotspotConfigs); - } else { - window.CI360._viewers.forEach((viewer) => { - viewer.updateView(forceUpdate, window.CI360._viewers); - }); - } -} - -function isNoViewers() { - return !(window.CI360._viewers && window.CI360._viewers.length > 0); -} - -function addHotspots(instanceId, config) { - const view360Array = document.querySelectorAll( - '.cloudimage-360:not(.initialized)' - ); - const notInitializedContainer = Array.from(view360Array).find( - (view) => view.id === instanceId - ); - - if (notInitializedContainer) { - container.setAttribute('data-hotspots', true); - - return window.CI360._viewers.push( - new CI360Viewer(container, false, config) - ); - } else { - update(instanceId, 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(); -} +export default CI360; diff --git a/src/static/css/style.css b/src/static/css/style.css index be0332d..d47d65a 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -129,8 +129,8 @@ .cloudimage-360-view-360-circle { position: absolute; left: 0; - right: 0; - width: 80%; + bottom: 0; + width: 100%; height: auto; margin: auto; pointer-events: none; diff --git a/src/types/ci360.d.ts b/src/types/ci360.d.ts new file mode 100644 index 0000000..5fa2d30 --- /dev/null +++ b/src/types/ci360.d.ts @@ -0,0 +1,53 @@ +declare module CI360 { + export interface CI360ViewerConfig { + folder?: string; + apiVersion?: string; + filenameX?: string; + filenameY?: string; + imageListX?: string | null; + imageListY?: string | null; + indexZeroBase?: number; + amountX?: number; + amountY?: number; + draggable?: boolean; + swipeable?: boolean; + keys?: boolean; + keysReverse?: boolean; + bottomCircle?: boolean; + bottomCircleOffset?: number; + autoplay?: boolean; + autoplayBehavior?: string; + playOnce?: boolean; + speed?: number; + autoplayReverse?: boolean; + fullscreen?: boolean; + magnifier?: number | null; + ciToken?: string | null; + ciFilters?: string | null; + ciTransformation?: string | null; + lazyload?: boolean; + lazySelector?: string; + dragSpeed?: number; + stopAtEdges?: boolean; + controlReverse?: boolean; + logoSrc?: string; + pointerZoom?: number; + imageInfo?: string; + initialIconHidden?: boolean; + bottomCircleHidden?: boolean; + } + + // Define the CI360Viewer class with the config type and constructor + export default class CI360Viewer { + constructor(container: HTMLElement | string, config?: CI360ViewerConfig, fullscreen?: boolean); + } + + // Define the CI360 class + export class CI360 { + instances: CI360Viewer[]; + initAll: (className?: string) => void; + getInstances: () => CI360Viewer[]; + init: (container: HTMLElement | string, config?: CI360ViewerConfig, fullscreen?: boolean) => CI360Viewer; + constructor(); + } +} diff --git a/src/utils/load-images/lazyload/init-lazyload.js b/src/utils/load-images/lazyload/init-lazyload.js index b34be52..dccb187 100644 --- a/src/utils/load-images/lazyload/init-lazyload.js +++ b/src/utils/load-images/lazyload/init-lazyload.js @@ -17,9 +17,9 @@ const getFirstImageSrc = (imagesSrc, srcConfig) => { return getFirstCdnImage(imagesSrc, indexZeroBase); }; -const createImage = (src, lazySelector) => { +const createImage = (src, lazyload, lazySelector) => { const image = new Image(); - image.setAttribute('data-src', src); + image.setAttribute(lazyload ? 'data-src' : 'src', src); image.style.cssText = ` width: 100%; height: 100%; @@ -28,17 +28,17 @@ const createImage = (src, lazySelector) => { filter: blur(10px); `; - if (lazySelector) image.className = `${lazySelector} cloudimage-lazy`; + image.className = `${lazySelector} cloudimage-lazy`; return image; }; export const initLazyload = (cdnPath, srcConfig, onLoad) => { - const { lazySelector, innerBox, imageList } = srcConfig || {}; + const { lazySelector, innerBox, imageList, lazyLoad } = srcConfig || {}; const [firstImageSrcInList] = imageList; const firstImageSrc = firstImageSrcInList || getFirstImageSrc(cdnPath, srcConfig); const lowPreviewSrc = generateLowPreviewCdnUrl(firstImageSrc); - const image = createImage(lowPreviewSrc, lazySelector); + const image = createImage(lowPreviewSrc, lazyLoad, lazySelector); image.onload = (event) => { if (onLoad) { From cf70bb38ec1110c5b0e0dfa0d59f28ee8683068c Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Sun, 27 Oct 2024 17:05:37 +0300 Subject: [PATCH 08/31] feat: new hotspot implementation --- examples/src/mouse-direction.js | 42 --- src/ci360.service.js | 19 +- src/ci360.utils.js | 6 +- src/hotspots.js | 98 +++++++ src/static/css/hotspots.css | 256 ++++-------------- .../create-hotspots-container.js | 7 + src/utils/container-elements/index.js | 1 + src/utils/debounce.js | 7 + src/utils/hotspots.js | 65 +++++ .../hotspots/attach-events/hide-popup.js | 6 - .../hotspots/attach-events/show-popup.js | 6 - src/utils/hotspots/configs-error-handler.js | 24 -- src/utils/hotspots/create-popper-instace.js | 29 -- .../hotspots/elements/create-carousel-dot.js | 15 - .../elements/create-carousel-image.js | 14 - .../hotspots/elements/create-hotspot-icon.js | 62 ----- .../elements/create-hotspot-popup-link.js | 14 - .../hotspots/elements/create-hotspots.js | 21 -- .../elements/create-images-carousel.js | 22 -- .../elements/create-modal-description.js | 8 - .../hotspots/elements/create-modal-title.js | 8 - .../elements/create-model-elements.js | 55 ---- .../hotspots/elements/create-popup-arrow.js | 10 - src/utils/hotspots/elements/create-popup.js | 57 ---- .../hotspots/elements/create-read-more-btn.js | 11 - .../fill-empty-coord-with-previous.js | 17 -- .../hotspots/generate-hotspots-configs.js | 38 --- src/utils/hotspots/generate-popup-config.js | 19 -- src/utils/hotspots/get-hotspot-icon.js | 6 - src/utils/hotspots/get-hotspot-orientation.js | 12 - src/utils/hotspots/get-hotspot-popup-node.js | 6 - src/utils/hotspots/get-popup-node.js | 7 - src/utils/hotspots/hide-hotspot-icon.js | 4 - src/utils/hotspots/hide-hotspots-icons.js | 10 - src/utils/hotspots/is-mouse-on-hotspot.js | 7 - .../hotspots/prepare-hotspots-positions.js | 27 -- src/utils/hotspots/set-current-slide.js | 19 -- src/utils/hotspots/toggle-popup-events.js | 18 -- .../hotspots/update-hotspot-icon-position.js | 22 -- src/utils/hotspots/update-hotspots.js | 43 --- src/utils/index.js | 8 +- src/utils/spin-y/get-moving-direction.js | 2 +- 42 files changed, 253 insertions(+), 875 deletions(-) delete mode 100644 examples/src/mouse-direction.js create mode 100644 src/hotspots.js create mode 100644 src/utils/container-elements/create-hotspots-container.js create mode 100644 src/utils/debounce.js create mode 100644 src/utils/hotspots.js delete mode 100644 src/utils/hotspots/attach-events/hide-popup.js delete mode 100644 src/utils/hotspots/attach-events/show-popup.js delete mode 100644 src/utils/hotspots/configs-error-handler.js delete mode 100644 src/utils/hotspots/create-popper-instace.js delete mode 100644 src/utils/hotspots/elements/create-carousel-dot.js delete mode 100644 src/utils/hotspots/elements/create-carousel-image.js delete mode 100644 src/utils/hotspots/elements/create-hotspot-icon.js delete mode 100644 src/utils/hotspots/elements/create-hotspot-popup-link.js delete mode 100644 src/utils/hotspots/elements/create-hotspots.js delete mode 100644 src/utils/hotspots/elements/create-images-carousel.js delete mode 100644 src/utils/hotspots/elements/create-modal-description.js delete mode 100644 src/utils/hotspots/elements/create-modal-title.js delete mode 100644 src/utils/hotspots/elements/create-model-elements.js delete mode 100644 src/utils/hotspots/elements/create-popup-arrow.js delete mode 100644 src/utils/hotspots/elements/create-popup.js delete mode 100644 src/utils/hotspots/elements/create-read-more-btn.js delete mode 100644 src/utils/hotspots/fill-empty-coord-with-previous.js delete mode 100644 src/utils/hotspots/generate-hotspots-configs.js delete mode 100644 src/utils/hotspots/generate-popup-config.js delete mode 100644 src/utils/hotspots/get-hotspot-icon.js delete mode 100644 src/utils/hotspots/get-hotspot-orientation.js delete mode 100644 src/utils/hotspots/get-hotspot-popup-node.js delete mode 100644 src/utils/hotspots/get-popup-node.js delete mode 100644 src/utils/hotspots/hide-hotspot-icon.js delete mode 100644 src/utils/hotspots/hide-hotspots-icons.js delete mode 100644 src/utils/hotspots/is-mouse-on-hotspot.js delete mode 100644 src/utils/hotspots/prepare-hotspots-positions.js delete mode 100644 src/utils/hotspots/set-current-slide.js delete mode 100644 src/utils/hotspots/toggle-popup-events.js delete mode 100644 src/utils/hotspots/update-hotspot-icon-position.js delete mode 100644 src/utils/hotspots/update-hotspots.js diff --git a/examples/src/mouse-direction.js b/examples/src/mouse-direction.js deleted file mode 100644 index 6f66d5b..0000000 --- a/examples/src/mouse-direction.js +++ /dev/null @@ -1,42 +0,0 @@ -import throttle from 'lodash.throttle'; - -export class MouseDirection { - constructor(canvas, threshold = 5, isClicked) { - this.canvas = canvas; - this.previousX = 0; - this.previousY = 0; - this.threshold = threshold; - this.direction = ''; - - this.canvas.addEventListener('mousemove', throttle(this.handleMouseMove.bind(this), 1000)); - } - - handleMouseMove(event) { - const rect = this.canvas.getBoundingClientRect(); - const mouseX = event.clientX - rect.left; // Mouse X relative to canvas - const mouseY = event.clientY - rect.top; // Mouse Y relative to canvas - - const deltaX = mouseX - this.previousX; - const deltaY = mouseY - this.previousY; - - let direction = ''; - - // Determine dominant axis of movement - if (Math.abs(deltaX) > Math.abs(deltaY)) { - // Horizontal movement is dominant - direction = deltaX > 0 ? 'right' : 'left'; - } else { - // Vertical movement is dominant - direction = deltaY > 0 ? 'down' : 'up'; - } - - // Log the direction if it has changed significantly - if (direction) { - this.direction = direction; - } - - // Update the previous mouse position for the next calculation - this.previousX = mouseX; - this.previousY = mouseY; - } -} diff --git a/src/ci360.service.js b/src/ci360.service.js index 77ab78c..3794f47 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -36,6 +36,8 @@ import { createTransitionOverlay, } from './utils'; +import Hotspot from './hotspots'; + class CI360Viewer { constructor(container, config, fullscreen) { this.container = container; @@ -329,9 +331,15 @@ class CI360Viewer { } update(zoomScale, offsetX, offsetY) { + const activeIndex = this.orientation === ORIENTATIONS.X ? this.activeImageX : this.activeImageY; + const imageData = this.orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; + if (this.hotspotsInstance) { + this.hotspotsInstance.updateHotspotPosition(activeIndex, this.orientation); + } + this.drawImageOnCanvas(imageData, zoomScale, offsetX, offsetY); } @@ -394,6 +402,11 @@ class CI360Viewer { onAllImagesLoaded() { this.addAllIcons(); + + if (this.hotspots) { + this.hotspotsInstance = new Hotspot(this.hotspots, this.innerBox); + } + this.isReady = true; this.amountX = this.imagesX.length; this.amountY = this.imagesY.length; @@ -428,7 +441,7 @@ class CI360Viewer { const fullscreenContainer = createFullscreenModal(this.container); - new CI360Viewer(fullscreenContainer, null, true); + new CI360Viewer(fullscreenContainer, this.viewerConfig, true); } closeFullscreenModal(event) { @@ -735,6 +748,7 @@ class CI360Viewer { action: 'initCanvas', offscreen: offscreenCanvas, devicePixelRatio: this.devicePixelRatio, + hotspotsConfig: this.hotspots, }, [offscreenCanvas] ); @@ -781,12 +795,14 @@ class CI360Viewer { imageInfo = 'black', initialIconHidden, bottomCircleHidden, + hotspots, } = config ? adaptConfig(config) : getConfigFromImage(container); const ciParams = { ciToken, ciFilters, ciTransformation }; const parsedImagesListX = imageListX ? JSON.parse(imageListX) : []; const parsedImagesListY = imageListY ? JSON.parse(imageListY) : []; + this.viewerConfig = config; this.amountX = parsedImagesListX.length || amountX; this.amountY = parsedImagesListY.length || amountY; this.allowSpinX = !!this.amountX; @@ -817,6 +833,7 @@ class CI360Viewer { this.initialIconHidden = initialIconHidden; this.bottomCircleHidden = bottomCircleHidden; this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior, this.allowSpinX, this.allowSpinY); + this.hotspots = hotspots; this.srcXConfig = { folder, diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 2bf95ed..cc388de 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -37,6 +37,7 @@ const DEFAULTS_VALUES = { imageInfo: false, initialIconHidden: true, bottomCircleHidden: true, + hotspots: [], }; const getConfigFromImage = (image) => ({ @@ -116,6 +117,7 @@ const adaptConfig = (config) => ({ imageInfo: config.imageInfo ?? DEFAULTS_VALUES.imageInfo, initialIconHidden: config.initialIconHidden ?? DEFAULTS_VALUES.initialIconHidden, bottomCircleHidden: config.bottomCircleHidden ?? DEFAULTS_VALUES.bottomCircleHidden, + hotspots: config.hotspots ?? DEFAULTS_VALUES.hotspots, }); // Helper functions @@ -123,9 +125,9 @@ const getAttr = (element, attribute, defaultValue) => element.getAttribute(attribute) || element.getAttribute(`data-${attribute}`) || defaultValue; const isTrue = (image, type) => { - const imgProp = getAttr(image, type) || getAttr(image, `data-${type}`); + const hasAttribute = image.hasAttribute(type) || image.hasAttribute(`data-${type}`); - return imgProp !== null && imgProp !== 'false'; + return hasAttribute; }; const isFalse = (image, type) => { diff --git a/src/hotspots.js b/src/hotspots.js new file mode 100644 index 0000000..b8fca7e --- /dev/null +++ b/src/hotspots.js @@ -0,0 +1,98 @@ +import { createHotspotsContainer, debounce } from './utils'; +import { + createHotspotElement, + createPopperElement, + createPopperModifiers, + findHotspotsForFrame, + getLastValidPosition, +} from './utils/hotspots'; +import { createPopper } from '@popperjs/core'; + +class Hotspot { + constructor(hotspotsConfig, container) { + this.hotspotsConfig = hotspotsConfig; + this.container = container; + this.popper = null; + this.popperInstance = null; + this.hotspotsContainer = createHotspotsContainer(this.container); + + this.initHotspots(); + } + + showPopper(hotspotElement, content, id) { + if (this.popperInstance) { + this.hidePopper(); + } + + const popperOptions = { + placement: 'top', + modifiers: createPopperModifiers(this.container), + }; + + this.popper = createPopperElement(content, id); + + requestAnimationFrame(() => this.popper.setAttribute('data-show', '')); + + this.popperInstance = createPopper(hotspotElement, this.popper, popperOptions); + } + + // Hide popper with transition + hidePopper() { + if (this.popperInstance) { + this.popperInstance.destroy(); + this.popperInstance = null; + } + + if (this.popper) { + this.popper.removeAttribute('data-show'); + setTimeout(() => { + if (this.popper) this.popper.remove(); + this.popper = null; + }, 200); + } + } + + createHotspot(hotspot) { + const { id, content } = hotspot; + const hotspotElement = createHotspotElement(id); + + hotspotElement.addEventListener('mouseenter', () => this.showPopper(hotspotElement, content, id)); + hotspotElement.addEventListener('mouseleave', () => this.hidePopper()); + + this.hotspotsContainer.appendChild(hotspotElement); + } + + hideHotspots() { + this.hotspotsContainer.querySelectorAll('.cloudimage-360-hotspot').forEach((hotspot) => { + hotspot.style.opacity = 0; + }); + } + + updateAndShowHotspot(hotspotConfig, activeIndex) { + const { positions, id } = hotspotConfig; + const position = positions[activeIndex] || getLastValidPosition(positions, activeIndex); + const { x, y } = position; + const hotspot = this.hotspotsContainer.querySelector(`[data-hotspot-id="${id}"]`); + + if (hotspot) { + hotspot.style.translate = `${x}px ${y}px`; + hotspot.style.opacity = 1; + } + } + + updateHotspotPosition = debounce((activeIndex, orientation) => { + const frameHotspots = findHotspotsForFrame(this.hotspotsConfig, activeIndex, orientation); + this.hideHotspots(); + frameHotspots.forEach((hotspot) => this.updateAndShowHotspot(hotspot, activeIndex)); + }, 50); + + createAllHotspots() { + this.hotspotsConfig.forEach((hotspot) => this.createHotspot(hotspot)); + } + + initHotspots() { + this.createAllHotspots(); + } +} + +export default Hotspot; diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index 6d4598c..7c6239f 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -1,226 +1,70 @@ -.cloudimage-360-hotspot-link-icon { - width: 42px; - height: 42px; - background: rgba(12, 109, 199, 0.2); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 50%; - box-sizing: border-box; - transition: opacity 600ms ease-in-out; - cursor: auto; -} - -.cloudimage-360-hotspot-link-icon::before { - content: ''; +.cloudimage-360-hotspot-container { position: absolute; - width: 16px; - height: 16px; - background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg'); - background-color: #0c6dc7; - background-repeat: no-repeat; - background-size: 9px; - background-position: center; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); - border-radius: 50%; - animation: pulse 2s infinite; - cursor: auto; -} - -.cloudimage-360-hotspot-custom-icon { - width: 42px; - height: 42px; - background: #76ad0133; - border: 1px solid #ffffff33; - border-radius: 50%; - box-sizing: border-box; - transition: opacity 300ms ease-in-out; - cursor: auto; -} - -.cloudimage-360-hotspot-custom-icon::before { - content: ''; - position: absolute; - width: 16px; - height: 16px; - background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg'); - background-color: #76ad01; - background-repeat: no-repeat; - background-size: 9px; - background-position: center; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); - border-radius: 50%; - animation: pulse 2s infinite; - cursor: auto; -} - -.cloudimage-360-hotspot-popup { - visibility: hidden; - opacity: 0; - background-color: #ffffff; - padding: 6px; - border-radius: 2px; - box-shadow: 0px 4px 4px 0px #00000040; + inset: 0; + width: 100%; + height: 100%; z-index: 999; } -.cloudimage-360-hotspot-popup[data-show] { - visibility: visible; - opacity: 1; -} - -.cloudimage-360-popup-arrow, -.cloudimage-360-popup-arrow::before { +.cloudimage-360-hotspot { position: absolute; - width: 8px; - height: 8px; - background: inherit; - cursor: 'auto'; -} - -.cloudimage-360-popup-arrow { - visibility: hidden; -} - -.cloudimage-360-popup-arrow::before { - visibility: visible; - content: ''; - transform: rotate(45deg); -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='top'] - > .cloudimage-360-popup-arrow { - bottom: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='bottom'] - > .cloudimage-360-popup-arrow { - top: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='left'] - > .cloudimage-360-popup-arrow { - right: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='right'] - > .cloudimage-360-popup-arrow { - left: -4px; -} - -.cloudimage-360-modal-wrapper { - max-width: 222px; -} - -.cloudimage-360-images-carousel-wrapper { - margin: 0 auto; -} - -.cloudimage-360-images-carousel { - background-color: #f5f4f4; - border-radius: 2px; -} - -.cloudimage-360-images-carousel .cloudimage-360-carousel-image { - display: none; - object-fit: contain; - min-height: 187px; - max-width: 100%; - max-height: 100%; -} - -.cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image { - display: block; - animation-name: fade-active-image; - animation-duration: 1.5s; -} - -.cloudimage-360-carousel-dots { - display: flex; - column-gap: 6px; - justify-content: center; - flex-wrap: wrap; - margin: 5px auto; - row-gap: 3px; - padding: 0 6px; - width: 50%; -} - -.cloudimage-360-carousel-dot { - width: 6px; - height: 6px; - background-color: #c9d0de; + display: inline-block; + background: radial-gradient(circle, #0e82fe 30%, #00d4ff); border-radius: 50%; + height: 15px; + width: 15px; + box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.6); + opacity: 0; + animation: pulse 2s infinite; cursor: pointer; - transition: background-color 0.6s ease; - border: 0; - padding: 0; -} - -.cloudimage-360-carousel-dot.active-dot { - background-color: #76ad01; } -.cloudimage-360-carousel-dot:focus, -.cloudimage-360-carousel-dot:focus-visible { - border: 0; - outline: 0; -} - -.cloudimage-360-modal-title { - font-size: 12px; - font-weight: 700; - line-height: 16px; - margin: 4px 0; -} - -.cloudimage-360-modal-description { - font-size: 10px; - font-weight: 400; - line-height: 16px; - margin: 4px 0; -} - -.cloudimage-360-modal-more-details { - color: #76ad01; - background-color: #ecfae6; - font-size: 10px; - line-height: 16px; - font-weight: 400; - padding: 4px 8px; - transition: background-color 200ms ease-in-out; - border-radius: 2px; - text-decoration: none; -} - -.cloudimage-360-modal-more-details:hover { - color: #76ad01; - background-color: #e1f5d8; +.cloudimage-360-hotspot.visible { + opacity: 1; } @keyframes pulse { 0% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7); + scale: 1; + box-shadow: + 0 0 0 0 rgba(0, 123, 255, 0.6), + 0 0 0 6px rgba(0, 123, 255, 0.4), + 0 0 0 12px rgba(0, 123, 255, 0.2); } - - 70% { - box-shadow: 0 0 0 10px rgba(99, 99, 99, 0); + 50% { + scale: 1.1; + box-shadow: + 0 0 0 10px rgba(0, 123, 255, 0), + 0 0 0 20px rgba(0, 123, 255, 0.1), + 0 0 0 30px rgba(0, 123, 255, 0); } - 100% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0); + scale: 1; + box-shadow: + 0 0 0 0 rgba(0, 123, 255, 0), + 0 0 0 6px rgba(0, 123, 255, 0), + 0 0 0 12px rgba(0, 123, 255, 0); } } -@keyframes fade-active-image { - from { - opacity: 0.7; - } - to { - opacity: 1; - } +.cloudimage-360-popper { + background-color: #333; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); + font-size: 14px; + max-width: 200px; + z-index: 9999; + text-align: center; + transition: + opacity 0.2s ease, + translate 0.2s ease; + opacity: 0; + translate: 0 -10px; +} + +.cloudimage-360-popper[data-show] { + opacity: 1; + translate: 0; } diff --git a/src/utils/container-elements/create-hotspots-container.js b/src/utils/container-elements/create-hotspots-container.js new file mode 100644 index 0000000..9c1f82f --- /dev/null +++ b/src/utils/container-elements/create-hotspots-container.js @@ -0,0 +1,7 @@ +export const createHotspotsContainer = (container) => { + const hotspotContainer = document.createElement('div'); + hotspotContainer.className = 'cloudimage-360-hotspot-container'; + container.appendChild(hotspotContainer); + + return hotspotContainer; +}; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index bf502c6..3bde562 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -12,3 +12,4 @@ export { createFullscreenModal } from './create-fullscreen-modal'; export { removeElementFromContainer } from './remove-element-from-container'; export { createLoadingSpinner } from './create-loading-spinner'; export { createTransitionOverlay } from './create-transition-overlay'; +export { createHotspotsContainer } from './create-hotspots-container'; diff --git a/src/utils/debounce.js b/src/utils/debounce.js new file mode 100644 index 0000000..c8163ee --- /dev/null +++ b/src/utils/debounce.js @@ -0,0 +1,7 @@ +export const debounce = (func, delay) => { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(this, args), delay); + }; +}; diff --git a/src/utils/hotspots.js b/src/utils/hotspots.js new file mode 100644 index 0000000..7c8088c --- /dev/null +++ b/src/utils/hotspots.js @@ -0,0 +1,65 @@ +import { ORIENTATIONS } from './constants'; + +const adaptOrientation = (orientation) => (orientation === 'x' ? ORIENTATIONS.X : ORIENTATIONS.Y); + +export const findHotspotsForFrame = (hotspots, currentFrame, orientation) => { + return hotspots.filter( + (hotspot) => adaptOrientation(hotspot.orientation) === orientation && currentFrame in hotspot.positions + ); +}; + +export const createHotspotElement = (id) => { + const hotspotElement = document.createElement('span'); + hotspotElement.id = id; + hotspotElement.className = 'cloudimage-360-hotspot'; + hotspotElement.dataset.hotspotId = id; + + hotspotElement.onclick = (event) => { + event.stopPropagation(); + }; + + return hotspotElement; +}; + +export const getLastValidPosition = (positions, activeIndex) => { + let lastValidPosition = null; + + for (let i = activeIndex; i > 0; i--) { + if (positions[i]) { + lastValidPosition = positions[i]; + break; + } + } + return lastValidPosition; +}; + +export const createPopperModifiers = (container) => [ + { + name: 'offset', + options: { + offset: [5, 5], + }, + }, + { + name: 'preventOverflow', + options: { + boundary: container, + }, + }, +]; + +export const createPopperElement = (content, id) => { + const popper = document.createElement('div'); + popper.className = 'cloudimage-360-popper'; + popper.id = id; + popper.dataset.popperId = id; + + if (typeof content === 'string' && /<\/?[a-z][\s\S]*>/i.test(content)) { + popper.innerHTML = content; + } else { + popper.textContent = content; + } + + document.body.appendChild(popper); + return popper; +}; diff --git a/src/utils/hotspots/attach-events/hide-popup.js b/src/utils/hotspots/attach-events/hide-popup.js deleted file mode 100644 index 6b7d118..0000000 --- a/src/utils/hotspots/attach-events/hide-popup.js +++ /dev/null @@ -1,6 +0,0 @@ -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 deleted file mode 100644 index 4c0bcf0..0000000 --- a/src/utils/hotspots/attach-events/show-popup.js +++ /dev/null @@ -1,6 +0,0 @@ -export const showPopup = (popup, popperInstance) => { - popup.setAttribute('data-show', ''); - popup.setAttribute('data-cloudimage-360-show', ''); - - popperInstance.update(); -}; diff --git a/src/utils/hotspots/configs-error-handler.js b/src/utils/hotspots/configs-error-handler.js deleted file mode 100644 index 568a5ed..0000000 --- a/src/utils/hotspots/configs-error-handler.js +++ /dev/null @@ -1,24 +0,0 @@ -export const configsErrorHandler = (hotspotProps) => { - const { variant = {} } = hotspotProps; - - const { url, title, anchorId, images, description, moreDetailsUrl } = variant; - - if (url && !title) { - console.error( - 'Cloudimage-360: Hotspot config with variant link must have title for the link' - ); - } - - if ( - !title && - !url && - !anchorId && - !images && - !description && - !moreDetailsUrl - ) { - console.error( - 'Cloudimage-360: Hotspot config with custom variant must provide anchorId' - ); - } -}; diff --git a/src/utils/hotspots/create-popper-instace.js b/src/utils/hotspots/create-popper-instace.js deleted file mode 100644 index 1b24168..0000000 --- a/src/utils/hotspots/create-popper-instace.js +++ /dev/null @@ -1,29 +0,0 @@ -import { createPopper } from '@popperjs/core'; - -export const createPopperInstance = (popper, popupProps, container) => { - const { placement, offset } = popupProps; - - const virtualReference = document.createElement('div'); - - const popperInstance = createPopper(virtualReference, popper); - - popperInstance.setOptions({ - placement, - modifiers: [ - { - name: 'offset', - options: { - offset, - }, - }, - { - name: 'preventOverflow', - options: { - boundary: container, - }, - }, - ], - }); - - return popperInstance; -}; diff --git a/src/utils/hotspots/elements/create-carousel-dot.js b/src/utils/hotspots/elements/create-carousel-dot.js deleted file mode 100644 index 36a132f..0000000 --- a/src/utils/hotspots/elements/create-carousel-dot.js +++ /dev/null @@ -1,15 +0,0 @@ -import { setCurrentSlide } from '../set-current-slide'; - -export const createCarouselDot = (image, imageIndex, popup) => { - const imageDot = document.createElement('button'); - - imageDot.className = 'cloudimage-360-carousel-dot'; - imageDot.onclick = () => setCurrentSlide(image, imageDot, popup); - - if (!imageIndex) { - imageDot.className += ' active-dot'; - imageDot.setAttribute('data-active-dot', ''); - } - - return imageDot; -}; diff --git a/src/utils/hotspots/elements/create-carousel-image.js b/src/utils/hotspots/elements/create-carousel-image.js deleted file mode 100644 index 57dba83..0000000 --- a/src/utils/hotspots/elements/create-carousel-image.js +++ /dev/null @@ -1,14 +0,0 @@ -export const createCarouselImage = (image, imageIndex) => { - const carouselImage = document.createElement('img'); - carouselImage.className = 'cloudimage-360-carousel-image'; - - carouselImage.setAttribute('src', image.src || ''); - carouselImage.setAttribute('alt', image.alt || 'more-info'); - - if (!imageIndex) { - carouselImage.setAttribute('data-active-image', ''); - carouselImage.className += ' active-image'; - } - - return carouselImage; -}; diff --git a/src/utils/hotspots/elements/create-hotspot-icon.js b/src/utils/hotspots/elements/create-hotspot-icon.js deleted file mode 100644 index 14ae84a..0000000 --- a/src/utils/hotspots/elements/create-hotspot-icon.js +++ /dev/null @@ -1,62 +0,0 @@ -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, - popup, - popperInstance -) => { - const { indicatorSelector, variant } = hotspotConfig; - const { url, anchorId } = variant; - const { - popupProps: { open = false }, - } = hotspotConfig; - - let isVisible; - const hotspotIcon = document.createElement('div'); - - 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', ''); - - 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); - - return hotspotIcon; -}; diff --git a/src/utils/hotspots/elements/create-hotspot-popup-link.js b/src/utils/hotspots/elements/create-hotspot-popup-link.js deleted file mode 100644 index dbdabb2..0000000 --- a/src/utils/hotspots/elements/create-hotspot-popup-link.js +++ /dev/null @@ -1,14 +0,0 @@ -export const createHotspotPopupLink = (variant) => { - const { url, title, newTab } = variant; - - const hyperLink = document.createElement('a'); - - hyperLink.href = url; - hyperLink.innerText = title; - - if (newTab) { - hyperLink.target = '_blank'; - } - - return hyperLink; -}; diff --git a/src/utils/hotspots/elements/create-hotspots.js b/src/utils/hotspots/elements/create-hotspots.js deleted file mode 100644 index 38ca594..0000000 --- a/src/utils/hotspots/elements/create-hotspots.js +++ /dev/null @@ -1,21 +0,0 @@ -import { createPopperInstance } from '../create-popper-instace'; -import { createHotspotIcon } from './create-hotspot-icon'; -import { createPopup } from './create-popup'; - -export const createHotspots = (container, hotspotsProps) => { - hotspotsProps.forEach((hotspotProps) => { - const { popupProps } = hotspotProps; - - const popup = createPopup(container, hotspotProps, popupProps); - const popperInstance = createPopperInstance(popup, popupProps, container); - const hotspotIcon = createHotspotIcon( - container, - hotspotProps, - popup, - popperInstance - ); - - popperInstance.state.elements.reference = hotspotIcon; - popperInstance.update(); - }); -}; diff --git a/src/utils/hotspots/elements/create-images-carousel.js b/src/utils/hotspots/elements/create-images-carousel.js deleted file mode 100644 index 7ae468c..0000000 --- a/src/utils/hotspots/elements/create-images-carousel.js +++ /dev/null @@ -1,22 +0,0 @@ -import { createCarouselDot } from './create-carousel-dot'; -import { createCarouselImage } from './create-carousel-image'; - -export const createImagesCarousel = (images, popup, container) => { - const imagesCarousel = document.createElement('div'); - const carouselDots = document.createElement('div'); - - imagesCarousel.className = 'cloudimage-360-images-carousel'; - imagesCarousel.style.maxWidth = `${container.offsetWidth}px`; - - carouselDots.className = 'cloudimage-360-carousel-dots'; - - images.forEach((image, imageIndex) => { - const carouselImage = createCarouselImage(image, imageIndex); - const carouselDot = createCarouselDot(carouselImage, imageIndex, popup); - - carouselDots.appendChild(carouselDot); - imagesCarousel.appendChild(carouselImage); - }); - - return [imagesCarousel, carouselDots]; -}; diff --git a/src/utils/hotspots/elements/create-modal-description.js b/src/utils/hotspots/elements/create-modal-description.js deleted file mode 100644 index 607ab78..0000000 --- a/src/utils/hotspots/elements/create-modal-description.js +++ /dev/null @@ -1,8 +0,0 @@ -export const createModalDescription = (description) => { - const modalDescription = document.createElement('p'); - - modalDescription.innerText = description; - modalDescription.className = 'cloudimage-360-modal-description'; - - return modalDescription; -}; diff --git a/src/utils/hotspots/elements/create-modal-title.js b/src/utils/hotspots/elements/create-modal-title.js deleted file mode 100644 index 8a7f485..0000000 --- a/src/utils/hotspots/elements/create-modal-title.js +++ /dev/null @@ -1,8 +0,0 @@ -export const createModalTitle = (title) => { - const modalTitle = document.createElement('h4'); - - modalTitle.innerText = title; - modalTitle.className = 'cloudimage-360-modal-title'; - - return modalTitle; -}; diff --git a/src/utils/hotspots/elements/create-model-elements.js b/src/utils/hotspots/elements/create-model-elements.js deleted file mode 100644 index 6054e3a..0000000 --- a/src/utils/hotspots/elements/create-model-elements.js +++ /dev/null @@ -1,55 +0,0 @@ -import { createImagesCarousel } from './create-images-carousel'; -import { createModalDescription } from './create-modal-description'; -import { createModalTitle } from './create-modal-title'; -import { createReadMoreBtn } from './create-read-more-btn'; - -export const createModalElements = (variant, container, popup) => { - const { - images, - title, - description, - moreDetailsUrl, - moreDetailsTitle = 'Read more', - } = variant; - - const modalWrapper = document.createElement('div'); - modalWrapper.className = 'cloudimage-360-modal-wrapper'; - - if (images) { - const imagesCarouselWrapper = document.createElement('div'); - const [imagesCarousel, carouselDots] = createImagesCarousel( - images, - popup, - container - ); - - imagesCarouselWrapper.appendChild(imagesCarousel); - - if (images.length > 1) { - imagesCarouselWrapper.appendChild(carouselDots); - } - - modalWrapper.appendChild(imagesCarouselWrapper); - imagesCarouselWrapper.className = 'cloudimage-360-images-carousel-wrapper'; - } - - if (title) { - const modalTitle = createModalTitle(title); - - modalWrapper.appendChild(modalTitle); - } - - if (description) { - const modalDescription = createModalDescription(description); - - modalWrapper.appendChild(modalDescription); - } - - if (moreDetailsUrl) { - const readMoreBtn = createReadMoreBtn(moreDetailsUrl, moreDetailsTitle); - - modalWrapper.appendChild(readMoreBtn); - } - - popup.appendChild(modalWrapper); -}; diff --git a/src/utils/hotspots/elements/create-popup-arrow.js b/src/utils/hotspots/elements/create-popup-arrow.js deleted file mode 100644 index 399647a..0000000 --- a/src/utils/hotspots/elements/create-popup-arrow.js +++ /dev/null @@ -1,10 +0,0 @@ -export const createPopupArrow = () => { - const popupArrow = document.createElement('div'); - - popupArrow.setAttribute('data-popper-arrow', ''); - popupArrow.setAttribute('data-cloudimage-360-hotspot', ''); - - popupArrow.className = 'cloudimage-360-popup-arrow'; - - return popupArrow; -}; diff --git a/src/utils/hotspots/elements/create-popup.js b/src/utils/hotspots/elements/create-popup.js deleted file mode 100644 index 02178d0..0000000 --- a/src/utils/hotspots/elements/create-popup.js +++ /dev/null @@ -1,57 +0,0 @@ -import { createHotspotPopupLink } from './create-hotspot-popup-link'; -import { getPopupNode } from '../get-popup-node'; -import { createPopupArrow } from './create-popup-arrow'; -import { createModalElements } from './create-model-elements'; - -export const createPopup = (container, hotspotConfig, popupProps) => { - const { variant } = hotspotConfig; - const { popupSelector, arrow } = popupProps; - const { url, images, title, anchorId, description, moreDetailsUrl } = variant; - - const popup = document.createElement('div'); - - popup.className = `cloudimage-360-hotspot-popup ${popupSelector}`; - popup.setAttribute('data-hotspot-popup-id', anchorId); - popup.setAttribute('data-cloudimage-360-hotspot', ''); - - popup.style.minHeight = 16; - popup.style.minWidth = 16; - popup.style.cursor = 'default'; - - popup.onclick = (e) => e.stopPropagation(); - - if ( - (typeof variant === 'object' && images) || - description || - moreDetailsUrl || - (title && !url) - ) { - createModalElements(variant, container, popup); - } else if (url) { - const hotspotPopupLink = createHotspotPopupLink(variant); - - popup.appendChild(hotspotPopupLink); - } else if (typeof variant === 'string') { - try { - const popupNode = getPopupNode(variant); - const userPopup = popupNode.cloneNode(true); - - popup.appendChild(userPopup); - popupNode.parentNode.removeChild(popupNode); - } catch { - console.error( - `Cloudimage-360: Element with anchorId '${anchorId}' not exist in the DOM` - ); - } - } - - if (arrow) { - const popupArrow = createPopupArrow(); - - popup.appendChild(popupArrow); - } - - container.appendChild(popup); - - return popup; -}; diff --git a/src/utils/hotspots/elements/create-read-more-btn.js b/src/utils/hotspots/elements/create-read-more-btn.js deleted file mode 100644 index 3046ce6..0000000 --- a/src/utils/hotspots/elements/create-read-more-btn.js +++ /dev/null @@ -1,11 +0,0 @@ -export const createReadMoreBtn = (moreDetailsUrl, moreDetailsTitle) => { - const readMoreBtn = document.createElement('a'); - - readMoreBtn.href = moreDetailsUrl; - readMoreBtn.innerText = moreDetailsTitle; - - readMoreBtn.className = 'cloudimage-360-modal-more-details'; - readMoreBtn.target = '_blank'; - - return readMoreBtn; -}; diff --git a/src/utils/hotspots/fill-empty-coord-with-previous.js b/src/utils/hotspots/fill-empty-coord-with-previous.js deleted file mode 100644 index c5af2b4..0000000 --- a/src/utils/hotspots/fill-empty-coord-with-previous.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }] */ - -export const fillEmptyCoordWithPrevious = (positions, hotspotIndex, coord) => { - const coordIndexes = new Array(hotspotIndex); - - const intialValue = '0%'; - - for (let i = coordIndexes.length - 1; i > -1; i--) { - const previousXCoord = positions[i]?.[coord]; - - if (previousXCoord) { - return previousXCoord; - } - } - - return intialValue; -}; diff --git a/src/utils/hotspots/generate-hotspots-configs.js b/src/utils/hotspots/generate-hotspots-configs.js deleted file mode 100644 index 71d7181..0000000 --- a/src/utils/hotspots/generate-hotspots-configs.js +++ /dev/null @@ -1,38 +0,0 @@ -import { configsErrorHandler } from './configs-error-handler'; -import { generatePopupConfig } from './generate-popup-config'; - -export const generateHotspotsConfigs = (hotspotsProps) => { - const hotspotsConfigs = hotspotsProps.map((hotspotProps) => { - const { - variant = {}, - positions = [], - indicatorSelector = '', - popupProps = {}, - orientation = 'x', - initialDimensions = [500, 500], - } = hotspotProps; - - configsErrorHandler(hotspotProps); - - const popupConfig = generatePopupConfig(popupProps); - let anchorId = variant?.anchorId; - - if (!anchorId) { - const uniqueID = Math.floor(Math.random() * 10000); - anchorId = `cloudimage-360-${uniqueID}`; - } - - const hotspotConfig = { - variant: { ...variant, anchorId }, - popupProps: popupConfig, - positions, - indicatorSelector, - initialDimensions, - orientation: orientation.toLowerCase(), - }; - - return hotspotConfig; - }); - - return hotspotsConfigs; -}; diff --git a/src/utils/hotspots/generate-popup-config.js b/src/utils/hotspots/generate-popup-config.js deleted file mode 100644 index f6ee4c3..0000000 --- a/src/utils/hotspots/generate-popup-config.js +++ /dev/null @@ -1,19 +0,0 @@ -export const generatePopupConfig = (popupProps) => { - const { - popupSelector = '', - arrow = true, - offset = [0, 10], - placement = 'auto', - open = false, - } = popupProps; - - const popupConfig = { - popupSelector, - arrow, - offset, - placement, - open, - }; - - return popupConfig; -}; diff --git a/src/utils/hotspots/get-hotspot-icon.js b/src/utils/hotspots/get-hotspot-icon.js deleted file mode 100644 index 2ab3579..0000000 --- a/src/utils/hotspots/get-hotspot-icon.js +++ /dev/null @@ -1,6 +0,0 @@ -export const getHotspotIcon = (anchorId) => { - const hotspotIconSelector = `[data-hotspot-icon-id=${anchorId}]`; - const hotspotIcon = document.querySelector(hotspotIconSelector); - - return hotspotIcon; -}; diff --git a/src/utils/hotspots/get-hotspot-orientation.js b/src/utils/hotspots/get-hotspot-orientation.js deleted file mode 100644 index c141d8d..0000000 --- a/src/utils/hotspots/get-hotspot-orientation.js +++ /dev/null @@ -1,12 +0,0 @@ -export const getHotspotOriantaion = (orientation) => { - switch (orientation.toLowerCase()) { - case 'x-axis': - return 'x'; - - case 'y-axis': - return 'y'; - - default: - return 'x'; - } -}; diff --git a/src/utils/hotspots/get-hotspot-popup-node.js b/src/utils/hotspots/get-hotspot-popup-node.js deleted file mode 100644 index 25f76e3..0000000 --- a/src/utils/hotspots/get-hotspot-popup-node.js +++ /dev/null @@ -1,6 +0,0 @@ -export const getHotspotPopupNode = (anchorId) => { - const hotspotPopupSelector = `[data-hotspot-popup-id=${anchorId}]`; - const hotspotPopup = document.querySelector(hotspotPopupSelector); - - return hotspotPopup; -}; diff --git a/src/utils/hotspots/get-popup-node.js b/src/utils/hotspots/get-popup-node.js deleted file mode 100644 index f007def..0000000 --- a/src/utils/hotspots/get-popup-node.js +++ /dev/null @@ -1,7 +0,0 @@ -export const getPopupNode = (popupId) => { - const popupSelector = 'data-cloudimage-360-hotspots'; - - const popupNode = document.querySelector(`[${popupSelector}=${popupId}]`); - - return popupNode; -}; diff --git a/src/utils/hotspots/hide-hotspot-icon.js b/src/utils/hotspots/hide-hotspot-icon.js deleted file mode 100644 index ac285ec..0000000 --- a/src/utils/hotspots/hide-hotspot-icon.js +++ /dev/null @@ -1,4 +0,0 @@ -export const hideHotspotIcon = (icon) => { - icon.style.visibility = 'hidden'; - icon.style.opacity = 0; -}; diff --git a/src/utils/hotspots/hide-hotspots-icons.js b/src/utils/hotspots/hide-hotspots-icons.js deleted file mode 100644 index 7c0a75b..0000000 --- a/src/utils/hotspots/hide-hotspots-icons.js +++ /dev/null @@ -1,10 +0,0 @@ -import { hideHotspotIcon } from './hide-hotspot-icon'; - -export const hideHotspotsIcons = () => { - const hotspotIconSelector = '[data-hotspot-icon-id]'; - const hotspotIcons = document.querySelectorAll(hotspotIconSelector) || []; - - hotspotIcons.forEach((hotspotIcon) => { - hideHotspotIcon(hotspotIcon); - }); -}; diff --git a/src/utils/hotspots/is-mouse-on-hotspot.js b/src/utils/hotspots/is-mouse-on-hotspot.js deleted file mode 100644 index a3452cd..0000000 --- a/src/utils/hotspots/is-mouse-on-hotspot.js +++ /dev/null @@ -1,7 +0,0 @@ -export const isMouseOnHotspot = () => { - const hotspotElementsSelector = '[data-cloudimage-360-show]'; - - const hostpotElements = document.querySelectorAll(hotspotElementsSelector); - - return !!hostpotElements.length; -}; diff --git a/src/utils/hotspots/prepare-hotspots-positions.js b/src/utils/hotspots/prepare-hotspots-positions.js deleted file mode 100644 index 196f4c0..0000000 --- a/src/utils/hotspots/prepare-hotspots-positions.js +++ /dev/null @@ -1,27 +0,0 @@ -import { fillEmptyCoordWithPrevious } from './fill-empty-coord-with-previous'; - -export const prepareHotspotsPositions = (positions) => - positions.reduce((accumulate, current, currentIndex) => { - const isIncludesXcoord = !!current?.xCoord; - const isIncludesYcoord = !!current?.yCoord; - - if (!isIncludesXcoord) { - current.xCoord = fillEmptyCoordWithPrevious( - positions, - currentIndex, - 'xCoord' - ); - } - - if (!isIncludesYcoord) { - current.yCoord = fillEmptyCoordWithPrevious( - positions, - currentIndex, - 'yCoord' - ); - } - - accumulate.push(current); - - return accumulate; - }, []); diff --git a/src/utils/hotspots/set-current-slide.js b/src/utils/hotspots/set-current-slide.js deleted file mode 100644 index d496c87..0000000 --- a/src/utils/hotspots/set-current-slide.js +++ /dev/null @@ -1,19 +0,0 @@ -export const setCurrentSlide = (image, imageDot, popup) => { - const activeDotSelector = '[data-active-dot]'; - const activeImageSelector = '[data-active-image]'; - - const previousActiveDot = popup.querySelector(activeDotSelector); - const previousActiveImage = popup.querySelector(activeImageSelector); - - previousActiveDot.classList.remove('active-dot'); - previousActiveDot.removeAttribute('data-active-dot'); - - previousActiveImage.classList.remove('active-image'); - previousActiveImage.removeAttribute('data-active-image'); - - image.className += ' active-image'; - image.setAttribute('data-active-image', ''); - - imageDot.className += ' active-dot'; - imageDot.setAttribute('data-active-dot', ''); -}; diff --git a/src/utils/hotspots/toggle-popup-events.js b/src/utils/hotspots/toggle-popup-events.js deleted file mode 100644 index e972e3a..0000000 --- a/src/utils/hotspots/toggle-popup-events.js +++ /dev/null @@ -1,18 +0,0 @@ -import { isTrue } from '../../ci360.utils'; -import { getHotspotIcon } from './get-hotspot-icon'; - -export const togglePopupEvents = (hotspotsProps, event, isMouseDown) => { - const iClickOnHotspotIcon = - event && isTrue(event.target, 'data-cloudimage-360-hotspot'); - - if (iClickOnHotspotIcon) return; - - hotspotsProps.forEach((hotspotProps) => { - const { variant } = hotspotProps; - const { anchorId } = variant; - - const hotspotIcon = getHotspotIcon(anchorId); - - hotspotIcon.style.pointerEvents = isMouseDown ? 'none' : 'all'; - }); -}; diff --git a/src/utils/hotspots/update-hotspot-icon-position.js b/src/utils/hotspots/update-hotspot-icon-position.js deleted file mode 100644 index f7b8c97..0000000 --- a/src/utils/hotspots/update-hotspot-icon-position.js +++ /dev/null @@ -1,22 +0,0 @@ -export const updateHotspotIconPosition = ( - container, - initialDimensions, - icon, - xCoord, - yCoord -) => { - icon.style.visibility = 'visible'; - icon.style.opacity = 1; - icon.style.zIndex = 100; - - icon.style.left = `${-icon.offsetWidth / 2}px`; - icon.style.top = `${-icon.offsetHeight / 2}px`; - - const positionXRatio = container.offsetWidth / initialDimensions[0]; - const positionYRatio = container.offsetHeight / initialDimensions[1]; - - const translateX = `${positionXRatio * xCoord}px`; - const translateY = `${positionYRatio * yCoord}px`; - - icon.style.transform = `translate3d(${translateX}, ${translateY}, 0)`; -}; diff --git a/src/utils/hotspots/update-hotspots.js b/src/utils/hotspots/update-hotspots.js deleted file mode 100644 index ef072c0..0000000 --- a/src/utils/hotspots/update-hotspots.js +++ /dev/null @@ -1,43 +0,0 @@ -import { prepareHotspotsPositions } from './prepare-hotspots-positions'; -import { getHotspotIcon } from './get-hotspot-icon'; -import { updateHotspotIconPosition } from './update-hotspot-icon-position'; -import { hideHotspotIcon } from './hide-hotspot-icon'; -import { getHotspotOriantaion } from './get-hotspot-orientation'; - -export const updateHotspots = ( - container, - hotspotsProps, - activeImageX = 0, - activeImageY = 0, - movingDirection = 'x-axis' -) => { - hotspotsProps.forEach((hotspotProps) => { - const { positions, initialDimensions, orientation, variant } = hotspotProps; - const { anchorId } = variant; - - const hotspotOriantaion = getHotspotOriantaion(movingDirection); - const currentImageIndex = orientation === 'x' ? activeImageX : activeImageY; - - const hotspotsPositions = prepareHotspotsPositions(positions); - - const currentPosition = hotspotsPositions.find( - (hotspotPosition) => hotspotPosition.imageIndex === currentImageIndex - ); - - const hotspotIcon = getHotspotIcon(anchorId); - - if (currentPosition && hotspotOriantaion === orientation) { - const { xCoord = 0, yCoord = 0 } = currentPosition; - - updateHotspotIconPosition( - container, - initialDimensions, - hotspotIcon, - xCoord, - yCoord - ); - } else { - hideHotspotIcon(hotspotIcon); - } - }); -}; diff --git a/src/utils/index.js b/src/utils/index.js index b9f09a8..d8106e3 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -29,13 +29,9 @@ export { getMovingDirection } from './spin-y/get-moving-direction'; export { getItemSkipped } from './controls/get-item-skipped'; export { initControls } from './controls/init-controls'; +export { debounce } from './debounce'; + export * from './container-elements'; export * from './constants'; -export { updateHotspots } from './hotspots/update-hotspots'; -export { createHotspots } from './hotspots/elements/create-hotspots'; -export { generateHotspotsConfigs } from './hotspots/generate-hotspots-configs'; -export { isMouseOnHotspot } from './hotspots/is-mouse-on-hotspot'; -export { hideHotspotsIcons } from './hotspots/hide-hotspots-icons'; - export { delay } from './delay'; diff --git a/src/utils/spin-y/get-moving-direction.js b/src/utils/spin-y/get-moving-direction.js index 96608aa..0e334c3 100644 --- a/src/utils/spin-y/get-moving-direction.js +++ b/src/utils/spin-y/get-moving-direction.js @@ -1,4 +1,4 @@ -export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 1 }) => { +export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 2 }) => { const absDeltaX = Math.abs(deltaX); const absDeltaY = Math.abs(deltaY); From ff7766486b0c6e94d6a6b8efdf00a17242115350 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 13:03:52 +0300 Subject: [PATCH 09/31] fix: Hotspots instance --- examples/src/hotspots-config.constant.js | 203 +++++++----------- src/hotspots.js | 63 +++++- src/static/css/hotspots.css | 2 +- src/utils/hotspots.js | 46 +++- src/utils/index.js | 4 +- .../{spin-y => spin}/get-moving-direction.js | 4 +- src/utils/zoom/generate-zoom-in-steps.js | 15 -- 7 files changed, 173 insertions(+), 164 deletions(-) rename src/utils/{spin-y => spin}/get-moving-direction.js (80%) delete mode 100644 src/utils/zoom/generate-zoom-in-steps.js diff --git a/examples/src/hotspots-config.constant.js b/examples/src/hotspots-config.constant.js index db5c2a1..725506c 100644 --- a/examples/src/hotspots-config.constant.js +++ b/examples/src/hotspots-config.constant.js @@ -1,142 +1,91 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ { - variant: { - images: [ - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', - alt: 'air snorkel', - }, - ], - title: 'Air Intake Snorkel', - description: - 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', - moreDetailsUrl: 'https://forcegurkha.co.in', + id: 'hotspot-1', + orientation: 'x', + containerSize: [1220, 680], + positions: { + 0: { x: 527, y: 319 }, + 1: { x: 527, y: 319 }, + 2: { x: 527, y: null }, + 3: { x: 498, y: null }, + 4: { x: 470, y: null }, + 5: { x: 441, y: null }, + 73: { x: 555, y: null }, + 72: { x: 586, y: null }, + 71: { x: 614, y: null }, + 70: { x: 641, y: null }, + 69: { x: 668, y: null }, + 68: { x: 692, y: null }, + 67: { x: 715, y: null }, + 66: { x: 736, y: null }, + 65: { x: 756, y: null }, + 64: { x: 773, y: null }, + 63: { x: 787, y: null }, }, - popupProps: { popupSelector: 'air-intake-popup' }, - initialDimensions: [1170, 662], - positions: [ - { imageIndex: 0, xCoord: 527, yCoord: 319 }, - { imageIndex: 1, xCoord: 527, yCoord: 319 }, - { imageIndex: 2, xCoord: 527 }, - { imageIndex: 3, xCoord: 498 }, - { imageIndex: 4, xCoord: 470 }, - { imageIndex: 5, xCoord: 441 }, - { imageIndex: 73, xCoord: 555 }, - { imageIndex: 72, xCoord: 586 }, - { imageIndex: 71, xCoord: 614 }, - { imageIndex: 70, xCoord: 641 }, - { imageIndex: 69, xCoord: 668 }, - { imageIndex: 68, xCoord: 692 }, - { imageIndex: 67, xCoord: 715 }, - { imageIndex: 66, xCoord: 736 }, - { imageIndex: 65, xCoord: 756 }, - { imageIndex: 64, xCoord: 773 }, - { imageIndex: 63, xCoord: 787 }, - ], + content: '
Info about Hotspot 1
', }, { - variant: { - title: 'New Gurkha Technical Specifications', - url: 'https://www.forcegurkha.co.in/specifications/', - newTab: true, + id: 'hotspot-2', + orientation: 'x', + containerSize: [1220, 680], + positions: { + 73: { x: 355, y: 474 }, + 74: { x: 355, y: null }, + 72: { x: 341, y: 479 }, + 71: { x: 336, y: null }, + 70: { x: 332, y: null }, + 69: { x: 327, y: null }, + 68: { x: 326, y: null }, + 67: { x: 327, y: null }, + 66: { x: 331, y: null }, + 65: { x: 334, y: null }, + 64: { x: 336, y: null }, + 63: { x: 347, y: 474 }, }, - initialDimensions: [1170, 662], - popupProps: { popupSelector: 'popup-link' }, - positions: [ - { imageIndex: 73, xCoord: 355, yCoord: 474 }, - { imageIndex: 74, xCoord: 355 }, - { imageIndex: 73, xCoord: 355 }, - { imageIndex: 72, xCoord: 341, yCoord: 479 }, - { imageIndex: 71, xCoord: 336 }, - { imageIndex: 70, xCoord: 332 }, - { imageIndex: 69, xCoord: 327 }, - { imageIndex: 68, xCoord: 326 }, - { imageIndex: 67, xCoord: 327 }, - { imageIndex: 66, xCoord: 331 }, - { imageIndex: 65, xCoord: 334 }, - { imageIndex: 64, xCoord: 336 }, - { imageIndex: 63, xCoord: 347 }, - ], + content: '
Info about Hotspot 2
', }, { - variant: { - images: [ - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%281%29.jpg', - alt: 'car accessory', - }, - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%282%29.jpg', - alt: 'spoiler', - }, - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent.jpg', - alt: 'car accessory', - }, - ], - description: - 'The All New Force Gurkha ensures best-in-class safety for passengers and security for the vehicle with its full metal body structure.', - moreDetailsTitle: 'Download accessories brochure', - moreDetailsUrl: - 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf', + id: 'hotspot-3', + orientation: 'x', + containerSize: [1220, 680], + positions: { + 11: { x: 683, y: 151 }, + 12: { x: 683, y: null }, + 13: { x: 683, y: null }, + 14: { x: 683, y: null }, + 15: { x: 683, y: null }, + 16: { x: 683, y: null }, + 17: { x: 681, y: 152 }, + 18: { x: 677, y: 156 }, + 19: { x: 671, y: 159 }, + 20: { x: 665, y: 163 }, + 21: { x: 656, y: 168 }, + 22: { x: 650, y: 171 }, + 23: { x: 643, y: 176 }, + 24: { x: 635, y: 178 }, + 25: { x: 628, y: 181 }, + 26: { x: 621, y: null }, + 27: { x: 610, y: null }, + 28: { x: 598, y: null }, + 29: { x: 588, y: null }, + 30: { x: 578, y: null }, + 31: { x: 570, y: 176 }, + 32: { x: 560, y: 173 }, }, - popupProps: { popupSelector: 'accessories-popup' }, - initialDimensions: [1170, 662], - positions: [ - { imageIndex: 11, xCoord: 683, yCoord: 151 }, - { imageIndex: 12, xCoord: 683 }, - { imageIndex: 13, xCoord: 683 }, - { imageIndex: 14, xCoord: 683 }, - { imageIndex: 15, xCoord: 683 }, - { imageIndex: 16, xCoord: 683 }, - { imageIndex: 17, xCoord: 681, yCoord: 152 }, - { imageIndex: 18, xCoord: 677, yCoord: 156 }, - { imageIndex: 19, xCoord: 671, yCoord: 159 }, - { imageIndex: 20, xCoord: 665, yCoord: 163 }, - { imageIndex: 21, xCoord: 656, yCoord: 168 }, - { imageIndex: 22, xCoord: 650, yCoord: 171 }, - { imageIndex: 23, xCoord: 643, yCoord: 176 }, - { imageIndex: 24, xCoord: 635, yCoord: 178 }, - { imageIndex: 25, xCoord: 628, yCoord: 181 }, - { imageIndex: 26, xCoord: 621 }, - { imageIndex: 27, xCoord: 610 }, - { imageIndex: 28, xCoord: 598 }, - { imageIndex: 29, xCoord: 588 }, - { imageIndex: 30, xCoord: 578 }, - { imageIndex: 31, xCoord: 570, yCoord: 176 }, - { imageIndex: 32, xCoord: 560, yCoord: 173 }, - ], + content: '
Info about Hotspot 3
', }, { - variant: { - images: [ - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-5.png', - alt: 'car top', - }, - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/ALL_AROUND_VISIBILITY_UPDATED.png', - alt: 'car inside', - }, - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-2.png', - alt: 'transmission', - }, - ], - description: - 'All four captain seats with ample head room, leg room and shoulder room.Easy ingress and egress from the rear door into the widest gangway in the category that makes space for all your luggage', - moreDetailsUrl: - 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf', + id: 'hotspot-4', + orientation: 'x', + containerSize: [1220, 680], + positions: { + 6: { x: 607, y: 246 }, + 7: { x: 619, y: null }, + 8: { x: 630, y: null }, + 9: { x: 637, y: null }, + 10: { x: 642, y: null }, }, - initialDimensions: [1170, 662], - popupProps: { popupSelector: 'car-cabin' }, - positions: [ - { imageIndex: 6, xCoord: 607, yCoord: 246 }, - { imageIndex: 7, xCoord: 619 }, - { imageIndex: 8, xCoord: 630 }, - { imageIndex: 9, xCoord: 637 }, - { imageIndex: 10, xCoord: 642 }, - ], + content: '
Info about Hotspot 4
', }, ]; diff --git a/src/hotspots.js b/src/hotspots.js index b8fca7e..a476c20 100644 --- a/src/hotspots.js +++ b/src/hotspots.js @@ -1,22 +1,60 @@ -import { createHotspotsContainer, debounce } from './utils'; +import { createHotspotsContainer } from './utils'; import { + adaptHotspotConfig, createHotspotElement, createPopperElement, createPopperModifiers, findHotspotsForFrame, - getLastValidPosition, } from './utils/hotspots'; import { createPopper } from '@popperjs/core'; class Hotspot { constructor(hotspotsConfig, container) { - this.hotspotsConfig = hotspotsConfig; this.container = container; this.popper = null; this.popperInstance = null; this.hotspotsContainer = createHotspotsContainer(this.container); + this.hideHotspots = this.hideHotspots.bind(this); + this.hotspotsConfig = adaptHotspotConfig(hotspotsConfig); + + const { containerSize } = hotspotsConfig[0]; + this.initialContainerSize = containerSize || [container.offsetWidth, container.offsetHeight]; this.initHotspots(); + this.observeContainerResize(); + } + + observeContainerResize() { + this.resizeObserver = new ResizeObserver(() => { + const newWidth = this.container.offsetWidth; + const newHeight = this.container.offsetHeight; + this.updateHotspotsForResize(newWidth, newHeight); + }); + this.resizeObserver.observe(this.container); + } + + updateHotspotsForResize(newWidth, newHeight) { + const [initialWidth, initialHeight] = this.initialContainerSize; + const widthRatio = newWidth / initialWidth; + const heightRatio = newHeight / initialHeight; + + this.hotspotsConfig.forEach((hotspot) => { + const updatedPositions = {}; + + Object.entries(hotspot.initialPositions).forEach(([key, initialPosition]) => { + const scaledX = initialPosition.x * widthRatio; + const scaledY = initialPosition.y * heightRatio; + + updatedPositions[key] = { + x: scaledX, + y: scaledY, + }; + }); + + hotspot.positions = updatedPositions; + }); + + this.updateHotspotPosition(this.currentActiveIndex, this.currentOrientation); } showPopper(hotspotElement, content, id) { @@ -36,7 +74,6 @@ class Hotspot { this.popperInstance = createPopper(hotspotElement, this.popper, popperOptions); } - // Hide popper with transition hidePopper() { if (this.popperInstance) { this.popperInstance.destroy(); @@ -70,8 +107,8 @@ class Hotspot { updateAndShowHotspot(hotspotConfig, activeIndex) { const { positions, id } = hotspotConfig; - const position = positions[activeIndex] || getLastValidPosition(positions, activeIndex); - const { x, y } = position; + const { x, y } = positions[activeIndex] ?? {}; + const hotspot = this.hotspotsContainer.querySelector(`[data-hotspot-id="${id}"]`); if (hotspot) { @@ -80,11 +117,14 @@ class Hotspot { } } - updateHotspotPosition = debounce((activeIndex, orientation) => { + updateHotspotPosition = (activeIndex, orientation) => { + this.currentActiveIndex = activeIndex; + this.currentOrientation = orientation; const frameHotspots = findHotspotsForFrame(this.hotspotsConfig, activeIndex, orientation); this.hideHotspots(); + frameHotspots.forEach((hotspot) => this.updateAndShowHotspot(hotspot, activeIndex)); - }, 50); + }; createAllHotspots() { this.hotspotsConfig.forEach((hotspot) => this.createHotspot(hotspot)); @@ -93,6 +133,13 @@ class Hotspot { initHotspots() { this.createAllHotspots(); } + + destroy() { + this.resizeObserver.disconnect(); + this.hidePopper(); + + this.hotspotsContainer.innerHTML = ''; + } } export default Hotspot; diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index 7c6239f..ca04e37 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -7,7 +7,6 @@ } .cloudimage-360-hotspot { - position: absolute; display: inline-block; background: radial-gradient(circle, #0e82fe 30%, #00d4ff); border-radius: 50%; @@ -17,6 +16,7 @@ opacity: 0; animation: pulse 2s infinite; cursor: pointer; + transition: opacity 0.2s ease; } .cloudimage-360-hotspot.visible { diff --git a/src/utils/hotspots.js b/src/utils/hotspots.js index 7c8088c..6c2abdb 100644 --- a/src/utils/hotspots.js +++ b/src/utils/hotspots.js @@ -21,16 +21,36 @@ export const createHotspotElement = (id) => { return hotspotElement; }; -export const getLastValidPosition = (positions, activeIndex) => { - let lastValidPosition = null; +export const fillEmptyPositions = (positions) => { + const sortedEntries = Object.entries(positions).sort(([keyA], [keyB]) => Number(keyA) - Number(keyB)); - for (let i = activeIndex; i > 0; i--) { - if (positions[i]) { - lastValidPosition = positions[i]; - break; + let lastValidX = null; + let lastValidY = null; + + const updatedPositions = {}; + + for (const [key, pos] of sortedEntries) { + if (!pos) { + updatedPositions[key] = { x: lastValidX, y: lastValidY }; + } else { + const { x, y } = pos; + + if (x !== null && x !== undefined) { + lastValidX = x; + } + + if (y !== null && y !== undefined) { + lastValidY = y; + } + + updatedPositions[key] = { + x: x || lastValidX, + y: y || lastValidY, + }; } } - return lastValidPosition; + + return updatedPositions; }; export const createPopperModifiers = (container) => [ @@ -63,3 +83,15 @@ export const createPopperElement = (content, id) => { document.body.appendChild(popper); return popper; }; + +export const adaptHotspotConfig = (hotspotsConfig) => { + const updatedHotspotConfig = [...hotspotsConfig]; + + updatedHotspotConfig.forEach((hotspot, index) => { + const updatedPositions = { ...fillEmptyPositions(hotspot.positions) }; + updatedHotspotConfig[index].initialPositions = updatedPositions; + updatedHotspotConfig[index].positions = updatedPositions; + }); + + return updatedHotspotConfig; +}; diff --git a/src/utils/index.js b/src/utils/index.js index d8106e3..2573670 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -8,8 +8,6 @@ export { loadImage } from './load-images/load-image'; export { magnify } from './magnify/magnify'; -export { generateZoomInSteps } from './zoom/generate-zoom-in-steps'; -export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps'; export { calculateOffsetFromEvent } from './zoom/calculate-offsets-from-events'; export { calculateZoomedDimensions } from './zoom/calculate-zoomed-dimensions'; export { calculateZoomOffsets } from './zoom/calculate-zoomed-offset'; @@ -24,7 +22,7 @@ export { getDefaultSpinDirection } from './spin/get-default-spin-direction'; export { switchSpinDirection } from './spin/switch-spin-direction'; export { isSpinKeysPressed } from './spin/is-spin-keys-pressed'; -export { getMovingDirection } from './spin-y/get-moving-direction'; +export { getMovingDirection } from './spin/get-moving-direction'; export { getItemSkipped } from './controls/get-item-skipped'; export { initControls } from './controls/init-controls'; diff --git a/src/utils/spin-y/get-moving-direction.js b/src/utils/spin/get-moving-direction.js similarity index 80% rename from src/utils/spin-y/get-moving-direction.js rename to src/utils/spin/get-moving-direction.js index 0e334c3..a702325 100644 --- a/src/utils/spin-y/get-moving-direction.js +++ b/src/utils/spin/get-moving-direction.js @@ -1,13 +1,11 @@ -export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 2 }) => { +export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 1 }) => { const absDeltaX = Math.abs(deltaX); const absDeltaY = Math.abs(deltaY); - // X-axis movement logic if (allowSpinX && absDeltaX - threshold > absDeltaY) { return deltaX > 0 ? 'right' : 'left'; } - // Y-axis movement logic if (allowSpinY && absDeltaY - threshold > absDeltaX) { return deltaY > 0 ? 'down' : 'up'; } diff --git a/src/utils/zoom/generate-zoom-in-steps.js b/src/utils/zoom/generate-zoom-in-steps.js deleted file mode 100644 index 136a597..0000000 --- a/src/utils/zoom/generate-zoom-in-steps.js +++ /dev/null @@ -1,15 +0,0 @@ -export const generateZoomInSteps = (zoomIntenisty) => { - const transitionStepsFactor = 20; - - return Array.from(Array(transitionStepsFactor)).reduce((acc, _, index) => { - const previousIndex = index - 1; - const previousValue = previousIndex < 0 ? 1 : acc[index - 1]; - - const step = previousValue + (zoomIntenisty - 1) / transitionStepsFactor; - const stepFixedValue = +step.toFixed(2); - - (acc || []).push(stepFixedValue); - - return acc; - }, []); -}; From b35a832b3d4976b697f0661ba7169c908120bf5b Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 13:15:42 +0300 Subject: [PATCH 10/31] improvement: Hide hotspots on pointer zoom --- src/ci360.service.js | 9 ++++++++- src/static/css/hotspots.css | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index 3794f47..cfbd67b 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -148,6 +148,12 @@ class CI360Viewer { }); } + hideHotspots() { + if (!this.hotspotsInstance) return; + + this.hotspotsInstance.hideHotspots(); + } + toggleZoom(event) { if (this.isZoomed) { this.showTransitionOverlay(); @@ -158,6 +164,7 @@ class CI360Viewer { } else { let width = (this.fullscreenView || this.pointerZoom ? document.body : this.container).offsetWidth; + this.hideHotspots(); this.showLoadingSpinner(); this.loadHigherQualityImages(width, () => { this.showTransitionOverlay(); @@ -336,7 +343,7 @@ class CI360Viewer { const imageData = this.orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; - if (this.hotspotsInstance) { + if (this.hotspotsInstance && !this.isZoomed) { this.hotspotsInstance.updateHotspotPosition(activeIndex, this.orientation); } diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index ca04e37..891694e 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -3,7 +3,7 @@ inset: 0; width: 100%; height: 100%; - z-index: 999; + z-index: 20; } .cloudimage-360-hotspot { From e2b5a1e4171696bcb402418d47bb1e7aa73e6066 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 14:00:23 +0300 Subject: [PATCH 11/31] feat: Add onclick for hotspot element --- src/ci360.service.js | 8 ++++- src/hotspots.js | 58 +++++++++++++++++++++++++++++++------ src/static/css/hotspots.css | 5 ++++ src/utils/hotspots.js | 8 ++--- 4 files changed, 63 insertions(+), 16 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index cfbd67b..360935d 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -102,6 +102,7 @@ class CI360Viewer { const shouldMove = (this.allowSpinX && itemsSkippedX !== 0) || (this.allowSpinY && itemsSkippedY !== 0); if (shouldMove) { + this.hideHotspotPopper(); this.onMoveHandler(this.draggingDirection, itemsSkippedX, itemsSkippedY); this.movementStart = { x: pageX, y: pageY }; @@ -154,6 +155,12 @@ class CI360Viewer { this.hotspotsInstance.hideHotspots(); } + hideHotspotPopper() { + if (!this.hotspotsInstance) return; + + this.hotspotsInstance.hidePopper(); + } + toggleZoom(event) { if (this.isZoomed) { this.showTransitionOverlay(); @@ -755,7 +762,6 @@ class CI360Viewer { action: 'initCanvas', offscreen: offscreenCanvas, devicePixelRatio: this.devicePixelRatio, - hotspotsConfig: this.hotspots, }, [offscreenCanvas] ); diff --git a/src/hotspots.js b/src/hotspots.js index a476c20..073c704 100644 --- a/src/hotspots.js +++ b/src/hotspots.js @@ -14,8 +14,9 @@ class Hotspot { this.popper = null; this.popperInstance = null; this.hotspotsContainer = createHotspotsContainer(this.container); - this.hideHotspots = this.hideHotspots.bind(this); this.hotspotsConfig = adaptHotspotConfig(hotspotsConfig); + this.shouldHidePopper = true; + this.hidePopper = this.hidePopper.bind(this); const { containerSize } = hotspotsConfig[0]; this.initialContainerSize = containerSize || [container.offsetWidth, container.offsetHeight]; @@ -57,8 +58,8 @@ class Hotspot { this.updateHotspotPosition(this.currentActiveIndex, this.currentOrientation); } - showPopper(hotspotElement, content, id) { - if (this.popperInstance) { + showPopper({ hotspotElement, content, id, keepOpen }) { + if (this.popperInstance && this.popperInstance.instanceId !== id) { this.hidePopper(); } @@ -68,10 +69,39 @@ class Hotspot { }; this.popper = createPopperElement(content, id); + this.popper.setAttribute('data-show', ''); + + this.popper.addEventListener('mouseenter', () => { + this.shouldHidePopper = false; + }); + this.popper.addEventListener('mouseleave', () => { + this.shouldHidePopper = true; + this.checkAndHidePopper(); + }); + + hotspotElement.addEventListener('mouseleave', () => { + this.shouldHidePopper = true; + this.checkAndHidePopper(); + }); + + hotspotElement.addEventListener('mouseenter', () => { + this.shouldHidePopper = false; + if (this.hidePopperTimeout) clearTimeout(this.hidePopperTimeout); + }); - requestAnimationFrame(() => this.popper.setAttribute('data-show', '')); + this.popperInstance = { + ...createPopper(hotspotElement, this.popper, popperOptions), + keepOpen, + instanceId: id, + }; + } - this.popperInstance = createPopper(hotspotElement, this.popper, popperOptions); + checkAndHidePopper() { + if (this.shouldHidePopper && !this.popperInstance?.keepOpen) { + this.hidePopperTimeout = setTimeout(() => { + if (this.shouldHidePopper) this.hidePopper(); + }, 150); + } } hidePopper() { @@ -90,11 +120,19 @@ class Hotspot { } createHotspot(hotspot) { - const { id, content } = hotspot; - const hotspotElement = createHotspotElement(id); + const { id, content, keepOpen, onclick } = hotspot; + const hotspotElement = createHotspotElement(id, onclick); - hotspotElement.addEventListener('mouseenter', () => this.showPopper(hotspotElement, content, id)); - hotspotElement.addEventListener('mouseleave', () => this.hidePopper()); + hotspotElement.onclick = (event) => { + event.stopPropagation(); + onclick?.(event, this.popperInstance, id); + }; + + if (content) { + hotspotElement.addEventListener('mouseenter', () => + this.showPopper({ hotspotElement, content, id, keepOpen }) + ); + } this.hotspotsContainer.appendChild(hotspotElement); } @@ -102,6 +140,7 @@ class Hotspot { hideHotspots() { this.hotspotsContainer.querySelectorAll('.cloudimage-360-hotspot').forEach((hotspot) => { hotspot.style.opacity = 0; + hotspot.style.pointerEvents = 'none'; }); } @@ -114,6 +153,7 @@ class Hotspot { if (hotspot) { hotspot.style.translate = `${x}px ${y}px`; hotspot.style.opacity = 1; + hotspot.style.pointerEvents = 'all'; } } diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index 891694e..4b49371 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -6,6 +6,11 @@ z-index: 20; } +.cloudimage-360-popper { + opacity: 1; + transition: opacity 0.2s ease-in-out; +} + .cloudimage-360-hotspot { display: inline-block; background: radial-gradient(circle, #0e82fe 30%, #00d4ff); diff --git a/src/utils/hotspots.js b/src/utils/hotspots.js index 6c2abdb..1574ea1 100644 --- a/src/utils/hotspots.js +++ b/src/utils/hotspots.js @@ -14,10 +14,6 @@ export const createHotspotElement = (id) => { hotspotElement.className = 'cloudimage-360-hotspot'; hotspotElement.dataset.hotspotId = id; - hotspotElement.onclick = (event) => { - event.stopPropagation(); - }; - return hotspotElement; }; @@ -57,7 +53,7 @@ export const createPopperModifiers = (container) => [ { name: 'offset', options: { - offset: [5, 5], + offset: [0, 10], }, }, { @@ -71,7 +67,7 @@ export const createPopperModifiers = (container) => [ export const createPopperElement = (content, id) => { const popper = document.createElement('div'); popper.className = 'cloudimage-360-popper'; - popper.id = id; + popper.id = `cloudimage-360-popper-${id}`; popper.dataset.popperId = id; if (typeof content === 'string' && /<\/?[a-z][\s\S]*>/i.test(content)) { From 78fd01b4e06b41c3c78bafa7f5b043ef397b69b3 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 17:23:57 +0300 Subject: [PATCH 12/31] fix: Demo --- README.md | 2 +- examples/src/constants.js | 54 ++-- examples/src/index.html | 166 ++-------- examples/src/index.js | 284 ++++-------------- examples/src/styles/main.css | 13 +- src/ci360.js | 17 ++ src/ci360.service.js | 120 ++++++-- src/ci360.utils.js | 20 +- src/utils/constants.js | 21 +- src/utils/image-src/has-config-changed.js | 7 + .../is-props-change-require-reload.js | 13 - src/utils/index.js | 2 +- src/utils/spin/get-moving-direction.js | 6 +- 13 files changed, 274 insertions(+), 451 deletions(-) create mode 100644 src/utils/image-src/has-config-changed.js delete mode 100644 src/utils/image-src/is-props-change-require-reload.js diff --git a/README.md b/README.md index b66df5a..7655113 100644 --- a/README.md +++ b/README.md @@ -414,7 +414,7 @@ Speed of changing frames for autoplay in milliseconds. Speed Factor of changing frames on drag event. -### data-spin-reverse (or spin-reverse) +### data-drag-reverse (or drag-reverse) ###### Type: **Bool** | Default: **false** | _optional_ diff --git a/examples/src/constants.js b/examples/src/constants.js index d3d9023..78bd5dd 100644 --- a/examples/src/constants.js +++ b/examples/src/constants.js @@ -1,38 +1,48 @@ import { GURKHA_SUV_HOTSPOTS_CONFIG } from './hotspots-config.constant'; const NIKE_PLUGIN = { - 'data-folder': 'https://scaleflex.cloudimg.io/v7/demo/360-nike/', - 'data-filename-x': 'nike-{index}.jpg', - 'data-filename-y': 'nike-y-{index}.jpg', - 'data-amount-x': '35', - 'data-amount-y': '36', - 'data-autoplay-behavior': 'spin-xy', + folder: 'https://scaleflex.cloudimg.io/v7/demo/360-nike/', + filenameX: 'nike-{index}.jpg', + filenameY: 'nike-y-{index}.jpg', + amountX: '35', + amountY: '36', + autoplayBehavior: 'spin-xy', }; const EARBUDS_PLUGIN = { - 'data-folder': 'https://scaleflex.cloudimg.io/v7/demo/earbuds/', - 'data-filename-x': '{index}.jpg', - 'data-amount-x': '233', + folder: 'https://scaleflex.cloudimg.io/v7/demo/earbuds/', + filenameX: '{index}.jpg', + amountX: '233', + amountY: undefined, + filenameY: undefined, }; -const SPIN_DIRECTION_PROPS = [ - 'data-filename-y', - 'data-amount-y', - 'data-autoplay-behavior', -]; +const SPIN_DIRECTION_PROPS = ['filename-y', 'data-amount-y', 'data-autoplay-behavior']; const PLUGIN_PROPS = { - class: { value: 'cloudimage-360', isRequired: true }, - 'data-folder': { + folder: { + label: 'data-folder', value: 'https://scaleflex.cloudimg.io/v7/demo/earbuds/', isRequired: true, isUrl: true, }, - 'data-filename-x': { value: '{index}.jpg', isRequired: true }, - 'data-amount-x': { value: 233, isRequired: true }, - 'data-speed': { value: 100, isRequired: true }, - 'data-drag-speed': { value: 120, isRequired: true }, - 'data-autoplay': { isRequired: true }, + filenameX: { label: 'data-filename-x', value: '{index}.jpg' }, + filenameY: { label: 'data-filename-y' }, + amountY: { label: 'data-amount-y', isRequired: false }, + amountX: { label: 'data-amount-x', value: 233, isRequired: true }, + speed: { label: 'data-speed', value: 100, isRequired: false }, + dragSpeed: { label: 'data-drag-speed', value: 120, isRequired: false }, + autoplay: { label: 'data-autoplay', isRequired: false }, + pointerZoom: { label: 'data-pointer-zoom', value: 1.5, isRequired: false }, + autoplayBehavior: { label: 'data-autoplay-behavior', value: 'spin-xy', isRequired: false }, + magnifier: { label: 'data-magnifier', value: 1.5, isRequired: false }, + autoplayReverse: { label: 'data-autoplay-reverse', isRequired: false }, + playOnce: { label: 'data-play-once', isRequired: false }, + keys: { label: 'data-keys', isRequired: false }, + keysReverse: { label: 'data-keys-reverse', isRequired: false }, + draggable: { label: 'data-draggable', isRequired: false }, + swipeable: { label: 'data-swipeable', isRequired: false }, + fullscreen: { label: 'data-fullscreen', isRequired: false }, }; const PROPERTIES_COLORS = { @@ -40,7 +50,7 @@ const PROPERTIES_COLORS = { URL: '#2D88CB', }; -const URL_PROPERTIES = ['data-folder', 'class']; +const URL_PROPERTIES = ['folder', 'class']; export { NIKE_PLUGIN, diff --git a/examples/src/index.html b/examples/src/index.html index 1b70b8c..9dd44c9 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -156,26 +156,24 @@

Trusted by top brands, worldwide

Vivo

Geely

@@ -202,11 +200,10 @@

Create 360° views, your way

data-amount-x="233" data-autoplay data-speed="100" - data-pointer-zoom="2" + data-pointer-zoom="1.5" data-drag-speed="100" data-responsive="scaleflex" data-lazyload - data-lazy-selector="lazyload" > @@ -258,7 +255,7 @@

Images source

Select amount-x

@@ -296,11 +293,11 @@

Customize

@@ -309,13 +306,11 @@

Customize

zoom scale

@@ -343,7 +338,7 @@

Customize

Customize Customize @@ -380,7 +375,7 @@

Customize

@@ -436,18 +432,7 @@

Customize

-
-
- @@ -470,7 +455,7 @@

Customize

-
- -
-
-
-
- -
-
-

Box Shadow

- -
-
-
-
- -
-
-

Token

- -
-
-
-

Transformation

- -
-
-

Filter

-
diff --git a/examples/src/index.js b/examples/src/index.js index 9e14dc9..a7e21c8 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -1,188 +1,35 @@ import '../../src'; import './controllers.css'; import './styles/main.css'; - +import CI360 from '../../src/ci360'; import { EARBUDS_PLUGIN, + GURKHA_SUV_HOTSPOTS_CONFIG, NIKE_PLUGIN, PLUGIN_PROPS, PROPERTIES_COLORS, URL_PROPERTIES, - GURKHA_SUV_HOTSPOTS_CONFIG, } from './constants'; const spinDirections = document.getElementById('spin-directions'); -const imagesY = document.getElementById('images-y'); -const responsive = document.getElementById('responsive-checkbox'); -const boxShadow = document.getElementById('box-shadow'); -const imageXSelector = document.getElementById('x-images-selector'); -const nikeXSelector = document.getElementById('nike-x-images'); const copyText = document.getElementById('copy-text'); const codeBlock = document.getElementById('code-block'); const codeWrapper = document.getElementById('code-wrapper'); -const controlOption = document.getElementById('control-option'); -const autoPlayBehavior = document.getElementById('auto-play-behavior'); -let container = document.getElementById('demo-generator'); +const pointerZoomSelector = document.getElementById('pointer-zoom-selector'); const copyButton = document.querySelector('.copy-button'); const outputCode = document.querySelector('.output-code'); -const pointerZoomCheckbox = document.querySelector('[data-checkbox]'); - -const accordions = document.querySelectorAll('[data-accordion]'); +const pointerZoomCheckbox = document.getElementById('pointer-checkbox'); const pluginCheckboxOptions = document.querySelectorAll('.plugin-option'); -const pluginInputs = document.querySelectorAll('[plugin-input]'); -let controlButtons = Array.from(document.querySelectorAll('control-buttons')); - -let isSpinY = false; - -const CLOUDIMAGE_360 = window.CI360; - -function updateContainer() { - container = document.getElementById('demo-generator'); -} - -function updateControlButtons() { - controlButtons = Array.from(document.querySelectorAll('.control-buttons')); -} - -function toggleControlButtons() { - const yButtonsIds = ['control-up-button', 'control-down-button']; - controlButtons.forEach((button) => { - if (isSpinY) { - button.style.visibility = controlOption.checked ? 'visible' : 'hidden'; - } else { - button.style.visibility = 'hidden'; - - button.style.visibility = - controlOption.checked && !yButtonsIds.includes(button.id) - ? 'visible' - : 'hidden'; - } - }); -} +const instance = new CI360(); function changeSpinDirectionHandler(event) { const spinDirection = event.target.value; - const earbudsPlugin = Object.entries(EARBUDS_PLUGIN); - const nikePlugin = Object.entries(NIKE_PLUGIN); - const isSpinYDirection = spinDirection === 'Y'; - - nikePlugin.forEach(([key, value]) => { - updatePluginValues(key, { value }, null, !isSpinYDirection); - isSpinYDirection - ? container.setAttribute(key, value) - : container.removeAttribute(key); - }); - - if (isSpinYDirection) { - isSpinY = true; - - imageXSelector.style.display = 'none'; - nikeXSelector.style.display = 'block'; - imagesY.style.display = 'flex'; - } else { - isSpinY = false; - - earbudsPlugin.forEach(([key, value]) => { - container.setAttribute(key, value); - updatePluginValues(key, { value }); - }); - - imageXSelector.style.display = 'block'; - nikeXSelector.style.display = 'none'; - imagesY.style.display = 'none'; - } + const config = spinDirection === 'Y' ? NIKE_PLUGIN : EARBUDS_PLUGIN; + const updatedView = instance.updateView('demo-generator', config); - autoPlayBehavior.disabled = !autoPlayBehavior.disabled; - - CLOUDIMAGE_360.update('demo-generator'); - updateContainer(); - updateControlButtons(); - toggleControlButtons(); -} - -function changePointerZoomHandler(event) { - const ispluginCheckboxChecked = event.target.checked; - const nextCheckbox = event.target.getAttribute('data-checkbox'); - const pluginInput = document.querySelector(`[data-input=${nextCheckbox}]`); - const pluginAttribute = event.target.getAttribute('data-plugin-value'); - const value = - pluginInput[pluginInput.type === 'checkbox' ? 'checked' : 'value']; - - if (ispluginCheckboxChecked) { - container.setAttribute(pluginAttribute, value); - } else { - container.removeAttribute(pluginAttribute); - } - - pluginInput.disabled = !pluginInput.disabled; - - CLOUDIMAGE_360.update('demo-generator'); - updateContainer(); - - updatePluginValues(pluginAttribute, { value: value }, event.target.type); -} - -function changeResponsiveOptionHandler(event) { - const allPluginInput = document.querySelectorAll('[responsive-option]'); - const ispluginCheckboxChecked = event.target.checked; - - allPluginInput.forEach((input) => { - const pluginAttribute = input.getAttribute('data-plugin-value'); - if (ispluginCheckboxChecked) { - container.setAttribute(pluginAttribute, input.value); - - updatePluginValues( - pluginAttribute, - { value: input.value }, - event.target.type - ); - } else { - container.removeAttribute(pluginAttribute); - updatePluginValues(pluginAttribute, { value: '' }, event.target.type); - } - - input.disabled = !input.disabled; - }); - - CLOUDIMAGE_360.update('demo-generator', true); - updateContainer(); -} - -function changeBoxShadowOptionHandler(event) { - const shadowBoxInput = document.querySelector('[box-shadow-option]'); - const ispluginCheckboxChecked = event.target.checked; - const pluginAttribute = shadowBoxInput.getAttribute('data-plugin-value'); - - if (ispluginCheckboxChecked) { - container.setAttribute(pluginAttribute, shadowBoxInput.value); - - updatePluginValues( - pluginAttribute, - { value: shadowBoxInput.value }, - event.target.type - ); - } else { - container.removeAttribute(pluginAttribute); - updatePluginValues(pluginAttribute, { value: '' }, event.target.type); - } - - shadowBoxInput.disabled = !shadowBoxInput.disabled; - - CLOUDIMAGE_360.update('demo-generator', true); - updateContainer(); -} - -function showAccordionContent(event) { - const contentID = event.target.getAttribute('data-accordion'); - const accordionContent = document.querySelector( - `[data-accordion-content="${contentID}"]` - ); - - accordionContent.style.display = !accordionContent.offsetWidth - ? 'block' - : 'none'; + updateCodeBlock(updatedView.viewerConfig); } function copyCodeHandler() { @@ -195,64 +42,50 @@ function copyCodeHandler() { }, 500); } -function pluginCheckboxOptionsHandler(event) { - const ispluginCheckboxChecked = event.target.checked; - const pluginAttribute = event.target.getAttribute('data-plugin-value'); - const defaultValue = event.target.value; - const value = defaultValue === 'on' ? '' : defaultValue; - - if (ispluginCheckboxChecked) { - container.setAttribute(pluginAttribute, value); - } else { - container.removeAttribute(pluginAttribute); - } +function changePointerZoom(event) { + const checked = event.target.checked; + const value = parseFloat(pointerZoomSelector.value, 10); + const updatedView = instance.updateView('demo-generator', { pointerZoom: checked ? value : false }); + pointerZoomSelector.disabled = !checked; - CLOUDIMAGE_360.update('demo-generator'); - updateContainer(); - updatePluginValues(pluginAttribute, { value: value }, event.target.type); + updateCodeBlock(updatedView.viewerConfig); } -function changePluginInputsHandler(event) { - const value = event.target.value; - const pluginAttribute = event.target.getAttribute('data-plugin-value'); +function changePointerZoomSelector(event) { + const { value } = event.target; - if (value) { - container.setAttribute(pluginAttribute, value); - } else { - container.removeAttribute(pluginAttribute); - } + const updatedView = instance.updateView('demo-generator', { pointerZoom: parseFloat(value, 10) }); - CLOUDIMAGE_360.update('demo-generator'); - updateContainer(); - updatePluginValues(pluginAttribute, { value }, event.target.type); + updateCodeBlock(updatedView.viewerConfig); } -function updatePluginValues(key, properties = {}, inputType, removeProp) { - const isCheckbox = inputType === 'checkbox'; - const isEmptyInput = !isCheckbox && !properties.value; - - if ( - Object.keys(PLUGIN_PROPS).includes(key) && - (isCheckbox || isEmptyInput || removeProp) - ) { - delete PLUGIN_PROPS[key]; - } else if (key) { - PLUGIN_PROPS[key] = {}; - PLUGIN_PROPS[key].value = properties.value; +function pluginCheckboxOptionsHandler(event) { + const checked = event.target.checked; + const key = event.target.getAttribute('data-plugin-property'); + const pluginValue = event.target.getAttribute('data-plugin-value'); + + let value = checked; + if (pluginValue) { + value = checked ? JSON.parse(pluginValue) : undefined; } - updateCodeBlock(); + const updatedView = instance.updateView('demo-generator', { [key]: value }); + + updateCodeBlock(updatedView.viewerConfig); } -function updateCodeBlock() { +function updateCodeBlock(config) { codeBlock.innerText = ''; + const configKeys = Object.keys(config); + const keys = configKeys.filter((key) => PLUGIN_PROPS[key] && !!config[key]); - Object.entries(PLUGIN_PROPS).forEach(([key, properties]) => { + keys.forEach((key) => { + const { label } = PLUGIN_PROPS[key]; const propertyWrapper = document.createElement('div'); const propertyName = document.createElement('span'); const propertyValue = document.createElement('span'); - propertyName.innerText = key; + propertyName.innerText = label; propertyName.style.color = PROPERTIES_COLORS.NAME; @@ -262,33 +95,44 @@ function updateCodeBlock() { propertyWrapper.appendChild(propertyName); - if (properties?.value) { - propertyValue.innerText = `"${properties?.value}"`; + propertyValue.innerText = `"${config[key]}"`; - propertyWrapper.innerHTML += '='; - propertyWrapper.appendChild(propertyValue); - } + propertyWrapper.innerHTML += '='; + propertyWrapper.appendChild(propertyValue); codeBlock.appendChild(propertyWrapper); codeWrapper.scrollTop = codeWrapper.scrollHeight; }); } -updatePluginValues(); -window.CI360.addHotspots('gurkha-suv', GURKHA_SUV_HOTSPOTS_CONFIG); - +pointerZoomCheckbox.addEventListener('change', changePointerZoom); +pointerZoomSelector.addEventListener('change', changePointerZoomSelector); spinDirections.addEventListener('change', changeSpinDirectionHandler); copyButton.addEventListener('click', copyCodeHandler); -controlOption.addEventListener('change', toggleControlButtons); -responsive.addEventListener('change', changeResponsiveOptionHandler); -boxShadow.addEventListener('change', changeBoxShadowOptionHandler); -pointerZoomCheckbox.addEventListener('change', changePointerZoomHandler); -accordions.forEach((accordion) => { - accordion.addEventListener('click', showAccordionContent); -}); pluginCheckboxOptions.forEach((option) => { option.addEventListener('change', pluginCheckboxOptionsHandler); }); -pluginInputs.forEach((input) => { - input.addEventListener('change', changePluginInputsHandler); -}); + +const suvCarContainer = document.getElementById('gurkha-suv'); + +const config = { + folder: 'https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/', + filenameX: 'orange-{index}.jpg', + amountX: 73, + lazyload: true, + hide360Logo: true, + speed: 120, + pointerZoom: 2, + responsive: 'scaleflex', + autoplay: false, + playOnce: true, + hotspots: GURKHA_SUV_HOTSPOTS_CONFIG, + magnifier: 3, +}; + +instance.init(suvCarContainer, config); +instance.initAll(); + +const demoGeneratorInstance = instance.getViewById('demo-generator'); + +updateCodeBlock(demoGeneratorInstance.viewerConfig); diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css index 6b676a9..7a7fc45 100644 --- a/examples/src/styles/main.css +++ b/examples/src/styles/main.css @@ -483,7 +483,6 @@ body { display: flex; flex-direction: column; row-gap: 20.5px; - padding-top: 28px; max-width: 270px; max-height: 600px; min-width: fit-content; @@ -503,9 +502,7 @@ body { width: 8px; } -.demo-usage-wrapper - .demo-usage-content - .customize-wrapper::-webkit-scrollbar-thumb { +.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar-thumb { background: #dbdddf; } @@ -584,6 +581,10 @@ body { user-select: none; } +.pointer-checkbox { + margin-bottom: 4px; +} + /* Hide the browser's default checkbox */ .checkbox-container input { position: absolute; @@ -943,9 +944,7 @@ body { width: 8px; } - .demo-usage - .demo-usage-content - .plugin-options-wrapper::-webkit-scrollbar-thumb { + .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar-thumb { background: #dbdddf; } diff --git a/src/ci360.js b/src/ci360.js index 6a2f3f5..1c6bb86 100644 --- a/src/ci360.js +++ b/src/ci360.js @@ -1,4 +1,5 @@ import CI360Viewer from './ci360.service'; +import { hasConfigChanged } from './utils'; class CI360 { constructor() { @@ -47,6 +48,22 @@ class CI360 { getViews() { return Array.from(this.views.values()); } + + updateView(id, config) { + const view = this.getViewById(id); + const updatedConfig = { ...view.viewerConfig, ...config }; + const requireReload = hasConfigChanged(view.viewerConfig, config); + + if (requireReload) { + view.destroy(); + const container = document.getElementById(id); + this.init(container, updatedConfig); + } else { + view.update(updatedConfig); + } + + return view; + } } export default CI360; diff --git a/src/ci360.service.js b/src/ci360.service.js index 360935d..9f06243 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -88,8 +88,13 @@ class CI360Viewer { const deltaY = pageY - this.movementStart.y; this.draggingDirection = - getMovingDirection({ deltaX, deltaY, allowSpinX: this.allowSpinX, allowSpinY: this.allowSpinY }) || - this.draggingDirection; + getMovingDirection({ + deltaX, + deltaY, + reversed: this.dragReverse, + allowSpinX: this.allowSpinX, + allowSpinY: this.allowSpinY, + }) || this.draggingDirection; const container = this.fullscreenView ? document.body : this.container; const dragFactor = this.dragSpeed / 50; @@ -185,7 +190,7 @@ class CI360Viewer { removeZoom() { this.isZoomed = false; - this.update(); + this.updateView(); this.showAllIcons(); this.hideTransitionOverlay(); } @@ -198,7 +203,7 @@ class CI360Viewer { this.hideLoadingSpinner(); this.hideTransitionOverlay(); - this.update(this.pointerZoom, offsetX, offsetY); + this.updateView(this.pointerZoom, offsetX, offsetY); } touchOutside(event) { @@ -308,28 +313,28 @@ class CI360Viewer { if (stopAtEdges && this.activeImageX >= this.imagesX.length - 1) return; this.moveActiveXIndexUp(itemsSkippedX); - if (!this.isZoomed) this.update(); + if (!this.isZoomed) this.updateView(); } moveLeft(stopAtEdges, itemsSkippedX = 1) { if (stopAtEdges && this.activeImageX <= 0) return; this.moveActiveXIndexDown(itemsSkippedX); - if (!this.isZoomed) this.update(); + if (!this.isZoomed) this.updateView(); } moveTop(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY >= this.imagesY.length - 1) return; this.moveActiveYIndexUp(itemsSkippedY); - if (!this.isZoomed) this.update(); + if (!this.isZoomed) this.updateView(); } moveBottom(stopAtEdges, itemsSkippedY = 1) { if (stopAtEdges && this.activeImageY <= 0) return; this.moveActiveYIndexDown(itemsSkippedY); - if (!this.isZoomed) this.update(); + if (!this.isZoomed) this.updateView(); } onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1) { @@ -344,7 +349,7 @@ class CI360Viewer { } } - update(zoomScale, offsetX, offsetY) { + updateView(zoomScale, offsetX, offsetY) { const activeIndex = this.orientation === ORIENTATIONS.X ? this.activeImageX : this.activeImageY; const imageData = @@ -533,16 +538,13 @@ class CI360Viewer { const innerBox = newElement.querySelector('.cloudimage-360-inner-box'); newElement.className = newElement.className.replace(' initialized', ''); - newElement.style.position = 'relative'; - newElement.style.width = '100%'; - newElement.style.cursor = 'default'; - newElement.setAttribute('draggable', 'false'); - newElement.style.minHeight = 'auto'; newElement.removeChild(innerBox); oldElement.parentNode.replaceChild(newElement, oldElement); } addInitialIcon() { + if (this.initialIcon) return; + this.initialIcon = createInitialIcon(); this.innerBox.appendChild(this.initialIcon); } @@ -596,6 +598,8 @@ class CI360Viewer { } addFullscreenIcon() { + if (!this.fullscreen) return; + this.fullscreenIcon = createFullscreenIcon(); this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this); @@ -622,6 +626,8 @@ class CI360Viewer { } add360ViewCircleIcon() { + if (this.view360CircleIcon) return; + this.view360CircleIcon = create360ViewCircleIcon(this.bottomCircleOffset); this.innerBox.appendChild(this.view360CircleIcon); } @@ -715,7 +721,6 @@ class CI360Viewer { this.innerBox.removeChild(this.loader); this.loader = null; } - attachEvents(draggable, swipeable, keys) { if (draggable) { this.addMouseEvents(); @@ -730,25 +735,61 @@ class CI360Viewer { } } + removeEvents() { + this.removeMouseEvents(); + this.removeTouchEvents(); + this.removeKeyboardEvents(); + } + addMouseEvents() { - this.innerBox.addEventListener('click', this.mouseClick.bind(this)); - this.innerBox.addEventListener('mousedown', this.mouseDown.bind(this)); + this.boundMouseClick = this.mouseClick.bind(this); + this.boundMouseDown = this.mouseDown.bind(this); + this.boundMouseMove = throttle(this.mouseMove.bind(this), THROTTLE_TIME); + this.boundMouseUp = this.mouseUp.bind(this); - document.addEventListener('mousemove', throttle(this.mouseMove.bind(this), THROTTLE_TIME)); - document.addEventListener('mouseup', this.mouseUp.bind(this)); + this.innerBox.addEventListener('click', this.boundMouseClick); + this.innerBox.addEventListener('mousedown', this.boundMouseDown); + document.addEventListener('mousemove', this.boundMouseMove); + document.addEventListener('mouseup', this.boundMouseUp); } addTouchEvents() { - document.addEventListener('touchstart', this.touchOutside.bind(this)); + this.boundTouchOutside = this.touchOutside.bind(this); + this.boundTouchStart = this.touchStart.bind(this); + this.boundTouchEnd = this.touchEnd.bind(this); + this.boundTouchMove = throttle(this.touchMove.bind(this), THROTTLE_TIME); - this.container.addEventListener('touchstart', this.touchStart.bind(this)); - this.container.addEventListener('touchend', this.touchEnd.bind(this)); - this.container.addEventListener('touchmove', throttle(this.touchMove.bind(this), THROTTLE_TIME)); + document.addEventListener('touchstart', this.boundTouchOutside); + this.container.addEventListener('touchstart', this.boundTouchStart); + this.container.addEventListener('touchend', this.boundTouchEnd); + this.container.addEventListener('touchmove', this.boundTouchMove); } addKeyboardEvents() { - document.addEventListener('keydown', this.keyDown.bind(this)); - document.addEventListener('keyup', this.keyUp.bind(this)); + this.boundKeyDown = this.keyDown.bind(this); + this.boundKeyUp = this.keyUp.bind(this); + + document.addEventListener('keydown', this.boundKeyDown); + document.addEventListener('keyup', this.boundKeyUp); + } + + removeMouseEvents() { + this.innerBox.removeEventListener('click', this.boundMouseClick); + this.innerBox.removeEventListener('mousedown', this.boundMouseDown); + document.removeEventListener('mousemove', this.boundMouseMove); + document.removeEventListener('mouseup', this.boundMouseUp); + } + + removeTouchEvents() { + document.removeEventListener('touchstart', this.boundTouchOutside); + this.container.removeEventListener('touchstart', this.boundTouchStart); + this.container.removeEventListener('touchend', this.boundTouchEnd); + this.container.removeEventListener('touchmove', this.boundTouchMove); + } + + removeKeyboardEvents() { + document.removeEventListener('keydown', this.boundKeyDown); + document.removeEventListener('keyup', this.boundKeyUp); } createContainers(event) { @@ -771,8 +812,18 @@ class CI360Viewer { removeElementFromContainer(this.innerBox, '.cloudimage-lazy'); } - init(container, config) { - let { + update(newConfig) { + this.stopAutoplay(); + removeElementFromContainer(this.innerBox, '.cloudimage-360-icons-container'); + this.init(this.container, newConfig, true); + this.iconsContainer = createIconsContainer(this.innerBox); + this.onAllImagesLoaded(); + } + + init(container, config, update) { + const adaptedConfig = config ? adaptConfig(config) : getConfigFromImage(container); + + const { folder, apiVersion, filenameX, @@ -809,13 +860,14 @@ class CI360Viewer { initialIconHidden, bottomCircleHidden, hotspots, - } = config ? adaptConfig(config) : getConfigFromImage(container); + dragReverse, + } = adaptedConfig; const ciParams = { ciToken, ciFilters, ciTransformation }; const parsedImagesListX = imageListX ? JSON.parse(imageListX) : []; const parsedImagesListY = imageListY ? JSON.parse(imageListY) : []; - this.viewerConfig = config; + this.viewerConfig = adaptedConfig; this.amountX = parsedImagesListX.length || amountX; this.amountY = parsedImagesListY.length || amountY; this.allowSpinX = !!this.amountX; @@ -842,10 +894,11 @@ class CI360Viewer { this.keysReverse = keysReverse; this.info = imageInfo; this.keys = keys; - this.innerBox = createInnerBox(this.container); + this.innerBox = this.innerBox ?? createInnerBox(this.container); this.initialIconHidden = initialIconHidden; this.bottomCircleHidden = bottomCircleHidden; this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior, this.allowSpinX, this.allowSpinY); + this.dragReverse = dragReverse; this.hotspots = hotspots; this.srcXConfig = { @@ -871,6 +924,11 @@ class CI360Viewer { amount: this.amountY, }; + if (update) this.removeEvents(); + this.attachEvents(draggable, swipeable, keys); + + if (update) return; + const width = (this.fullscreenView ? document.body : this.container).offsetWidth; const cdnPathX = this.allowSpinX && !parsedImagesListX.length ? generateCdnPath(this.srcXConfig, width) : null; @@ -894,8 +952,6 @@ class CI360Viewer { } else if (this.allowSpinY) { initLazyload(cdnPathY, this.srcYConfig, loadCallback); } - - this.attachEvents(draggable, swipeable, keys); } } diff --git a/src/ci360.utils.js b/src/ci360.utils.js index cc388de..91f29d8 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -5,7 +5,7 @@ const DEFAULTS_VALUES = { folder: '/', apiVersion: 'v7', filenameX: 'image-{index}.jpg', - filenameY: 'image-y-{index}.jpg', + filenameY: null, imageListX: null, imageListY: null, indexZeroBase: 0, @@ -13,6 +13,8 @@ const DEFAULTS_VALUES = { amountY: 0, speed: 80, dragSpeed: 150, + draggable: true, + swipeable: true, keys: false, keysReverse: false, boxShadow: null, @@ -30,14 +32,14 @@ const DEFAULTS_VALUES = { ciTransformation: null, lazyload: false, lazySelector: 'lazyload', - spinReverse: false, + dragReverse: false, controlReverse: false, stopAtEdges: false, logoSrc: 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', imageInfo: false, initialIconHidden: true, bottomCircleHidden: true, - hotspots: [], + hotspots: null, }; const getConfigFromImage = (image) => ({ @@ -52,6 +54,8 @@ const getConfigFromImage = (image) => ({ amountY: parseInt(getAttr(image, 'amount-y', DEFAULTS_VALUES.amountY), 10), speed: parseInt(getAttr(image, 'speed', DEFAULTS_VALUES.speed), 10), dragSpeed: parseInt(getAttr(image, 'drag-speed', DEFAULTS_VALUES.dragSpeed), 10), + draggable: isTrue(image, 'draggable', DEFAULTS_VALUES.draggable), + swipeable: isTrue(image, 'swipeable', DEFAULTS_VALUES.swipeable), keys: isTrue(image, 'keys', DEFAULTS_VALUES.keys), keysReverse: isTrue(image, 'keys-reverse', DEFAULTS_VALUES.keysReverse), boxShadow: getAttr(image, 'box-shadow', DEFAULTS_VALUES.boxShadow), @@ -72,7 +76,7 @@ const getConfigFromImage = (image) => ({ ciTransformation: getAttr(image, 'transformation', DEFAULTS_VALUES.ciTransformation), lazyload: isTrue(image, 'lazyload', DEFAULTS_VALUES.lazyload), lazySelector: getAttr(image, 'lazyload-selector', DEFAULTS_VALUES.lazySelector), - spinReverse: isTrue(image, 'spin-reverse', DEFAULTS_VALUES.spinReverse), + dragReverse: isTrue(image, 'drag-reverse', DEFAULTS_VALUES.dragReverse), controlReverse: isTrue(image, 'control-reverse', DEFAULTS_VALUES.controlReverse), stopAtEdges: isTrue(image, 'stop-at-edges', DEFAULTS_VALUES.stopAtEdges), logoSrc: getAttr(image, 'logo-src', DEFAULTS_VALUES.logoSrc), @@ -92,6 +96,8 @@ const adaptConfig = (config) => ({ amountX: parseInt(config.amountX ?? DEFAULTS_VALUES.amountX, 10), amountY: parseInt(config.amountY ?? DEFAULTS_VALUES.amountY, 10), speed: parseInt(config.speed ?? DEFAULTS_VALUES.speed, 10), + draggable: config.draggable ?? DEFAULTS_VALUES.draggable, + swipeable: config.swipeable ?? DEFAULTS_VALUES.swipeable, dragSpeed: parseInt(config.dragSpeed ?? DEFAULTS_VALUES.dragSpeed, 10), keys: config.keys ?? DEFAULTS_VALUES.keys, keysReverse: config.keysReverse ?? DEFAULTS_VALUES.keysReverse, @@ -110,7 +116,7 @@ const adaptConfig = (config) => ({ ciTransformation: config.ciTransformation || DEFAULTS_VALUES.ciTransformation, lazyload: config.lazyload ?? DEFAULTS_VALUES.lazyload, lazySelector: config.lazySelector || DEFAULTS_VALUES.lazySelector, - spinReverse: config.spinReverse ?? DEFAULTS_VALUES.spinReverse, + dragReverse: config.dragReverse ?? DEFAULTS_VALUES.dragReverse, controlReverse: config.controlReverse ?? DEFAULTS_VALUES.controlReverse, stopAtEdges: config.stopAtEdges ?? DEFAULTS_VALUES.stopAtEdges, logoSrc: config.logoSrc || DEFAULTS_VALUES.logoSrc, @@ -124,10 +130,10 @@ const adaptConfig = (config) => ({ const getAttr = (element, attribute, defaultValue) => element.getAttribute(attribute) || element.getAttribute(`data-${attribute}`) || defaultValue; -const isTrue = (image, type) => { +const isTrue = (image, type, defaultValue) => { const hasAttribute = image.hasAttribute(type) || image.hasAttribute(`data-${type}`); - return hasAttribute; + return hasAttribute || defaultValue; }; const isFalse = (image, type) => { diff --git a/src/utils/constants.js b/src/utils/constants.js index a361f8d..a822e4a 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -14,19 +14,14 @@ export const ORIENTATIONS = { }; export const PROPS_REQUIRE_RELOAD = [ - 'folder', //images source - 'filenameX', //images source - 'filenameY', //images source - 'apiVersion', //images source - 'imageListX', //images source - 'imageListY', //images source - 'indexZeroBase', //images source - 'lazySelector', //images source - 'keys', // events - 'stopAtEdges', // events - 'disableDrag', // events - 'controlReverse', // events - 'disableDrag', // events + 'folder', + 'folderX', + 'folderY', + 'filenameX', + 'filenameY', + 'imageListX', + 'imageListY', + 'indexZeroBase', ]; export const LEFT_RIGHT_KEYS = [37, 39]; diff --git a/src/utils/image-src/has-config-changed.js b/src/utils/image-src/has-config-changed.js new file mode 100644 index 0000000..e86c3a9 --- /dev/null +++ b/src/utils/image-src/has-config-changed.js @@ -0,0 +1,7 @@ +import { PROPS_REQUIRE_RELOAD } from '../constants'; + +export const hasConfigChanged = (originalConfig, newConfig, propsToCheck = PROPS_REQUIRE_RELOAD) => { + return propsToCheck.some((prop) => { + return prop in newConfig && newConfig[prop] !== originalConfig[prop]; + }); +}; diff --git a/src/utils/image-src/is-props-change-require-reload.js b/src/utils/image-src/is-props-change-require-reload.js deleted file mode 100644 index 2e0a76b..0000000 --- a/src/utils/image-src/is-props-change-require-reload.js +++ /dev/null @@ -1,13 +0,0 @@ -import { PROPS_REQUIRE_RELOAD } from '../constants'; - -export const isPropsChangeRequireReload = (currentProps, changedProps) => - Object.keys(changedProps).reduce((acc, current) => { - const isPropChanged = currentProps[current] !== changedProps[current]; - const isSrcProp = PROPS_REQUIRE_RELOAD.includes(current); - - if (isSrcProp && isPropChanged) { - acc = true; - } - - return acc; - }, false); diff --git a/src/utils/index.js b/src/utils/index.js index 2573670..0acff9b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,4 +1,4 @@ -export { isPropsChangeRequireReload } from './image-src/is-props-change-require-reload'; +export { hasConfigChanged } from './image-src/has-config-changed'; export { generateCdnPath } from './image-src/generate-cdn-path'; export { generateHighPreviewCdnUrl } from './image-src/generate-high-preview-cdn-url'; diff --git a/src/utils/spin/get-moving-direction.js b/src/utils/spin/get-moving-direction.js index a702325..bdfa277 100644 --- a/src/utils/spin/get-moving-direction.js +++ b/src/utils/spin/get-moving-direction.js @@ -1,12 +1,16 @@ -export const getMovingDirection = ({ deltaX, deltaY, allowSpinX, allowSpinY, threshold = 1 }) => { +export const getMovingDirection = ({ deltaX, deltaY, reversed, allowSpinX, allowSpinY, threshold = 1 }) => { const absDeltaX = Math.abs(deltaX); const absDeltaY = Math.abs(deltaY); if (allowSpinX && absDeltaX - threshold > absDeltaY) { + if (reversed) return deltaX > 0 ? 'left' : 'right'; + return deltaX > 0 ? 'right' : 'left'; } if (allowSpinY && absDeltaY - threshold > absDeltaX) { + if (reversed) return deltaY > 0 ? 'up' : 'down'; + return deltaY > 0 ? 'down' : 'up'; } From 58a9031be08f432d399fb5254ee0fd4e3f2ca059 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 17:43:33 +0300 Subject: [PATCH 13/31] feat: Request higher quality image on magnifier open --- src/ci360.service.js | 10 ++++++++-- src/utils/image-src/add-or-update-param.js | 14 ++++++++++++++ .../image-src/generate-high-preview-cdn-url.js | 4 ++-- src/utils/index.js | 1 + 4 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 src/utils/image-src/add-or-update-param.js diff --git a/src/ci360.service.js b/src/ci360.service.js index 9f06243..9c9c32d 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -444,7 +444,9 @@ class CI360Viewer { event.stopPropagation(); const { src } = this.orientation === ORIENTATIONS.Y ? this.imagesY[this.activeImageY] : this.imagesX[this.activeImageX]; - const highPreviewCdnUrl = generateHighPreviewCdnUrl(src); + const width = (this.fullscreenView ? document.body : this.container).offsetWidth; + const imageWidth = width * this.devicePixelRatio * this.magnifier; + const highPreviewCdnUrl = generateHighPreviewCdnUrl(src, imageWidth); this.createGlass(); @@ -474,6 +476,7 @@ class CI360Viewer { if (this.isClicked) return; this.hide360ViewCircleIcon(); + const autoplaySpeed = (this.speed * 36) / (this.amountX + this.amountY); const loopTriggers = { left: this.moveLeft.bind(this), right: this.moveRight.bind(this), @@ -520,7 +523,7 @@ class CI360Viewer { reversed: this.autoplayReverse, loopTriggers, }); - }, this.speed); + }, autoplaySpeed); } stopAutoplay() { @@ -532,6 +535,7 @@ class CI360Viewer { destroy() { this.stopAutoplay(); + if (this.hotspotsInstance) this.hotspotsInstance.destroy(); const oldElement = this.container; const newElement = oldElement.cloneNode(true); @@ -813,6 +817,8 @@ class CI360Viewer { } update(newConfig) { + if (!this.isReady) return; + this.stopAutoplay(); removeElementFromContainer(this.innerBox, '.cloudimage-360-icons-container'); this.init(this.container, newConfig, true); diff --git a/src/utils/image-src/add-or-update-param.js b/src/utils/image-src/add-or-update-param.js new file mode 100644 index 0000000..102a2c2 --- /dev/null +++ b/src/utils/image-src/add-or-update-param.js @@ -0,0 +1,14 @@ +export const addOrUpdateParam = (url, paramName, paramValue) => { + const [base, query] = url.split('?'); + const newParam = `${paramName}=${encodeURIComponent(paramValue)}`; + + if (!query) { + return `${base}?${newParam}`; + } + + const params = new URLSearchParams(query); + + params.set(paramName, paramValue); + + return `${base}?${params.toString()}`; +}; diff --git a/src/utils/image-src/generate-high-preview-cdn-url.js b/src/utils/image-src/generate-high-preview-cdn-url.js index 2ade30d..087b43c 100644 --- a/src/utils/image-src/generate-high-preview-cdn-url.js +++ b/src/utils/image-src/generate-high-preview-cdn-url.js @@ -1,3 +1,3 @@ -import { removeParamByRegex } from './remove-param-by-regex'; +import { addOrUpdateParam } from './add-or-update-param'; -export const generateHighPreviewCdnUrl = (url) => removeParamByRegex(url, 'width'); +export const generateHighPreviewCdnUrl = (url, width) => addOrUpdateParam(url, 'width', width); diff --git a/src/utils/index.js b/src/utils/index.js index 0acff9b..317e942 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,6 +1,7 @@ export { hasConfigChanged } from './image-src/has-config-changed'; export { generateCdnPath } from './image-src/generate-cdn-path'; export { generateHighPreviewCdnUrl } from './image-src/generate-high-preview-cdn-url'; +export { addOrUpdateParam } from './image-src/add-or-update-param'; export { preloadImages } from './load-images/preload-images'; export { initLazyload } from './load-images/lazyload/init-lazyload'; From 6239bf86d81add1af033b1817b1be6b07408cf8f Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 19:04:24 +0300 Subject: [PATCH 14/31] improvements: Icons fullscreen, magnifier and closeFullscreen --- README.md | 38 ----- config/webpack-demo.config.js | 4 + examples/src/index.js | 5 +- package.json | 1 + src/ci360.service.js | 12 +- src/static/css/icons/close.svg | 1 + src/static/css/icons/fullscreen.svg | 1 + src/static/css/icons/magnifier.svg | 1 + src/static/css/style.css | 161 +++--------------- .../create-close-fullscreen-icon.js | 6 - .../container-elements/create-close-icon.js | 10 +- .../create-fullscreen-icon.js | 10 ++ .../create-magnifier-icon.js | 10 +- src/utils/container-elements/index.js | 2 +- src/utils/magnify/magnify.js | 2 + 15 files changed, 71 insertions(+), 193 deletions(-) create mode 100644 src/static/css/icons/close.svg create mode 100644 src/static/css/icons/fullscreen.svg create mode 100644 src/static/css/icons/magnifier.svg delete mode 100644 src/utils/container-elements/create-close-fullscreen-icon.js create mode 100644 src/utils/container-elements/create-fullscreen-icon.js diff --git a/README.md b/README.md index 7655113..9e0cdad 100644 --- a/README.md +++ b/README.md @@ -204,44 +204,6 @@ The oriantation of the active index You can customize elements by adding the following classes: -### Example CSS - -```css -.cloudimage-360-icons-container { - top: 5px; - right: 5px; -} -.cloudimage-360-fullscreen-modal { - top: 0; - bottom: 0; -} -.cloudimage-360-magnifier-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) - 50% 50% / cover no-repeat; -} -.cloudimage-360-close-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) - 50% 50% / cover no-repeat; -} -.cloudimage-360-view-360-circle { - margin: auto; -} -.cloudimage-360-loader { - margin: auto; -} -.cloudimage-initial-icon { - background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) - 50% 50% / cover no-repeat; -} -.cloudimage-360-box-shadow { - top: 0; - left: 0; -} -.cloudimage-360-img-magnifier-glass { - border: 3px solid #000; - border-radius: 50%; -} -``` ## Config diff --git a/config/webpack-demo.config.js b/config/webpack-demo.config.js index 2fbd23b..caa59da 100644 --- a/config/webpack-demo.config.js +++ b/config/webpack-demo.config.js @@ -22,6 +22,10 @@ module.exports = { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, + { + test: /\.svg$/, + loader: 'svg-inline-loader', + }, ], }, plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin()], diff --git a/examples/src/index.js b/examples/src/index.js index a7e21c8..e42d947 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -124,10 +124,11 @@ const config = { speed: 120, pointerZoom: 2, responsive: 'scaleflex', - autoplay: false, + autoplay: true, + fullscreen: true, + magnifier: 3, playOnce: true, hotspots: GURKHA_SUV_HOTSPOTS_CONFIG, - magnifier: 3, }; instance.init(suvCarContainer, config); diff --git a/package.json b/package.json index 49f1d63..e4ce430 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "mobile-detect": "^1.4.3", "prettier": "3.3.3", "style-loader": "^3.3.2", + "svg-inline-loader": "^0.8.2", "webpack": "^5.79.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.3" diff --git a/src/ci360.service.js b/src/ci360.service.js index 9c9c32d..ebfbfde 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -129,12 +129,12 @@ class CI360Viewer { mouseClick(event) { if (!this.isReady || this.isDragging) return; - if (this.glass) { + if (this.glass && this.magnified) { this.removeGlass(); return; } - if (this.pointerZoom) this.toggleZoom(event); + if (this.pointerZoom && !this.glass) this.toggleZoom(event); } loadHigherQualityImages(width, onLoad) { @@ -355,7 +355,7 @@ class CI360Viewer { const imageData = this.orientation === ORIENTATIONS.X ? this.imagesX[this.activeImageX] : this.imagesY[this.activeImageY]; - if (this.hotspotsInstance && !this.isZoomed) { + if (this.hotspotsInstance && !this.isZoomed && !this.autoplay) { this.hotspotsInstance.updateHotspotPosition(activeIndex, this.orientation); } @@ -445,12 +445,15 @@ class CI360Viewer { const { src } = this.orientation === ORIENTATIONS.Y ? this.imagesY[this.activeImageY] : this.imagesX[this.activeImageX]; const width = (this.fullscreenView ? document.body : this.container).offsetWidth; - const imageWidth = width * this.devicePixelRatio * this.magnifier; + const imageWidth = width * this.magnifier; const highPreviewCdnUrl = generateHighPreviewCdnUrl(src, imageWidth); + this.showLoadingSpinner(); this.createGlass(); const onLoadImage = (image) => { + this.hideLoadingSpinner(); + this.magnified = true; magnify(event, this.innerBox, this.offset, image, this.glass, this.magnifier); }; @@ -576,6 +579,7 @@ class CI360Viewer { this.showAllIcons(); this.innerBox.removeChild(this.glass); this.glass = null; + this.magnified = false; } addMagnifierIcon() { diff --git a/src/static/css/icons/close.svg b/src/static/css/icons/close.svg new file mode 100644 index 0000000..193dde0 --- /dev/null +++ b/src/static/css/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/css/icons/fullscreen.svg b/src/static/css/icons/fullscreen.svg new file mode 100644 index 0000000..3226213 --- /dev/null +++ b/src/static/css/icons/fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/css/icons/magnifier.svg b/src/static/css/icons/magnifier.svg new file mode 100644 index 0000000..54c68c7 --- /dev/null +++ b/src/static/css/icons/magnifier.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/css/style.css b/src/static/css/style.css index d47d65a..74f0811 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -23,7 +23,6 @@ display: flex; top: 15px; right: 10px; - width: 25px; height: 100%; flex-direction: column; align-items: center; @@ -44,40 +43,37 @@ z-index: 10; } -.cloudimage-360-magnifier-icon { - width: 100%; - height: 25px; +.cloudimage-360-button { + width: 30px; + height: 30px; cursor: pointer; - transition: all 200ms ease-out; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / - cover no-repeat; + transition: + transform 150ms ease-out, + background-color 150ms ease-out; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: #f0f0f0; + color: #4a4a4a; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 6px; } -.cloudimage-360-fullscreen-icon { - width: 100%; - height: 25px; - cursor: pointer; - transition: all 200ms ease-out; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / - cover no-repeat; +.cloudimage-360-button:hover { + transform: scale(1.05); + background-color: #e7e6e6; } -.cloudimage-360-reset-zoom-icon { - display: none; - width: 30px; - height: 30px; - margin-top: auto; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') - 50% 50% / cover no-repeat; +.cloudimage-360-button svg { + width: 18px; + height: 18px; + fill: #4a4a4a; + transition: fill 150ms ease-out; } -.cloudimage-360-close-icon { - width: 100%; - height: 25px; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / - cover no-repeat; +.cloudimage-360-button:hover svg { + fill: #2c2c2c; } .cloudimage-initial-icon { @@ -156,7 +152,7 @@ background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.9)); background-repeat: no-repeat; position: absolute; - border: 2px solid rgba(0, 0, 0, 0.3); /* Softer border */ + border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 50%; line-height: 200px; text-align: center; @@ -172,110 +168,3 @@ overflow: hidden; pointer-events: none; } - -.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; -} diff --git a/src/utils/container-elements/create-close-fullscreen-icon.js b/src/utils/container-elements/create-close-fullscreen-icon.js deleted file mode 100644 index fe4711f..0000000 --- a/src/utils/container-elements/create-close-fullscreen-icon.js +++ /dev/null @@ -1,6 +0,0 @@ -export const createFullscreenIcon = () => { - const closeIcon = document.createElement('div'); - closeIcon.className = 'cloudimage-360-fullscreen-icon'; - - return closeIcon; -}; diff --git a/src/utils/container-elements/create-close-icon.js b/src/utils/container-elements/create-close-icon.js index b59e07a..59705c6 100644 --- a/src/utils/container-elements/create-close-icon.js +++ b/src/utils/container-elements/create-close-icon.js @@ -1,7 +1,11 @@ +import closeIcon from '../../static/css/icons/close.svg'; + export const createCloseIcon = () => { - const fullscreenIcon = document.createElement('div'); + const close = document.createElement('div'); + + close.className = 'cloudimage-360-button cloudimage-360-close-icon'; - fullscreenIcon.className = 'cloudimage-360-close-icon'; + close.innerHTML = closeIcon; - return fullscreenIcon; + return close; }; diff --git a/src/utils/container-elements/create-fullscreen-icon.js b/src/utils/container-elements/create-fullscreen-icon.js new file mode 100644 index 0000000..5bf47ea --- /dev/null +++ b/src/utils/container-elements/create-fullscreen-icon.js @@ -0,0 +1,10 @@ +import FullscreenIcon from '../../static/css/icons/fullscreen.svg'; + +export const createFullscreenIcon = () => { + const fullscreenIcon = document.createElement('div'); + fullscreenIcon.className = 'cloudimage-360-button cloudimage-360-fullscreen-button'; + + fullscreenIcon.innerHTML = FullscreenIcon; + + return fullscreenIcon; +}; diff --git a/src/utils/container-elements/create-magnifier-icon.js b/src/utils/container-elements/create-magnifier-icon.js index 92e1201..7921840 100644 --- a/src/utils/container-elements/create-magnifier-icon.js +++ b/src/utils/container-elements/create-magnifier-icon.js @@ -1,7 +1,11 @@ +import MagnifierIcon from '../../static/css/icons/magnifier.svg'; + export const createMagnifierIcon = () => { - const magnifyIcon = document.createElement('div'); + const magnifier = document.createElement('div'); + + magnifier.className = 'cloudimage-360-button cloudimage-360-magnifier-button'; - magnifyIcon.className = 'cloudimage-360-magnifier-icon'; + magnifier.innerHTML = MagnifierIcon; - return magnifyIcon; + return magnifier; }; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index 3bde562..7be2480 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -2,7 +2,7 @@ export { create360ViewCircleIcon } from './create-360-view-circle-icon'; export { createInitialIcon } from './create-initial-icon'; export { createCanvas } from './create-canvas'; export { createCloseIcon } from './create-close-icon'; -export { createFullscreenIcon } from './create-close-fullscreen-icon'; +export { createFullscreenIcon } from './create-fullscreen-icon'; export { createIconsContainer } from './create-icons-container'; export { createInnerBox } from './create-inner-box'; export { createMagnifierIcon } from './create-magnifier-icon'; diff --git a/src/utils/magnify/magnify.js b/src/utils/magnify/magnify.js index b22d811..e51d6fb 100644 --- a/src/utils/magnify/magnify.js +++ b/src/utils/magnify/magnify.js @@ -5,6 +5,8 @@ export const magnify = (clickEvent, container, offset, currentImage, glass, zoom const backgroundSizeX = (container.offsetWidth - offsetX * 2) * zoom; const backgroundSizeY = (container.offsetHeight - offsetY * 2) * zoom; + if (!glass) return; + glass.setAttribute('class', 'cloudimage-360-img-magnifier-glass'); container.prepend(glass); From b9a14091650698b9eac208940dde67f6a4dd23bc Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 19:24:24 +0300 Subject: [PATCH 15/31] improvement: Demo styles --- examples/src/index.html | 36 +++++++++++----------- examples/src/styles/main.css | 7 +++++ src/hotspots.js | 6 +++- src/static/css/hotspots.css | 60 +++++++++++++++++++++--------------- 4 files changed, 66 insertions(+), 43 deletions(-) diff --git a/examples/src/index.html b/examples/src/index.html index 9dd44c9..1a3b9d0 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -26,7 +26,7 @@ JS Cloudimage 360 view @@ -35,18 +35,18 @@
star star-img
View on GitHub Edit to CodeSandbox @@ -513,7 +513,7 @@

Any questions?

Submit GitHub issue @@ -537,19 +537,19 @@

Any questions?

View GitHub Current Issues Documentation @@ -587,7 +587,7 @@

Any questions?

Cloudimage Responsive Cloudimage 360 view @@ -599,19 +599,19 @@

Any questions?

star star-img Any questions?

Info

View GitHub Current Issues Documentation @@ -685,7 +685,7 @@

Filerobot UI Family

Cloudimage Responsive Cloudimage 360 view diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css index 7a7fc45..4744d96 100644 --- a/examples/src/styles/main.css +++ b/examples/src/styles/main.css @@ -9,6 +9,13 @@ body { overflow-x: hidden; } +.cloudimage-360 canvas, +#demo-generator canvas, +#gurkha-suv canvas { + overflow: hidden; + border-radius: 6px; +} + .container-fluid { max-width: 1170px; margin: 0 auto; diff --git a/src/hotspots.js b/src/hotspots.js index 073c704..e4b6c85 100644 --- a/src/hotspots.js +++ b/src/hotspots.js @@ -121,7 +121,11 @@ class Hotspot { createHotspot(hotspot) { const { id, content, keepOpen, onclick } = hotspot; - const hotspotElement = createHotspotElement(id, onclick); + const hotspotElement = createHotspotElement(id); + + if (onclick) { + hotspotElement.style.cursor = 'pointer'; + } hotspotElement.onclick = (event) => { event.stopPropagation(); diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index 4b49371..f8b0737 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -13,15 +13,20 @@ .cloudimage-360-hotspot { display: inline-block; - background: radial-gradient(circle, #0e82fe 30%, #00d4ff); + background: #00aaff; + border: 1px solid #fff; border-radius: 50%; - height: 15px; - width: 15px; - box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.6); + height: 20px; + width: 20px; + box-shadow: + 0 0 0 0 rgba(0, 170, 255, 0.6), + 0 2px 6px rgba(0, 0, 0, 0.2); opacity: 0; animation: pulse 2s infinite; - cursor: pointer; - transition: opacity 0.2s ease; + transition: + opacity 0.1s ease, + transform 0.2s ease, + box-shadow 0.2s ease; } .cloudimage-360-hotspot.visible { @@ -30,36 +35,43 @@ @keyframes pulse { 0% { - scale: 1; + transform: scale(1); box-shadow: - 0 0 0 0 rgba(0, 123, 255, 0.6), - 0 0 0 6px rgba(0, 123, 255, 0.4), - 0 0 0 12px rgba(0, 123, 255, 0.2); + 0 0 0 0 rgba(0, 170, 255, 0.6), + 0 0 0 10px rgba(0, 170, 255, 0.4), + 0 0 0 20px rgba(0, 170, 255, 0.2); } 50% { - scale: 1.1; + transform: scale(1.1); box-shadow: - 0 0 0 10px rgba(0, 123, 255, 0), - 0 0 0 20px rgba(0, 123, 255, 0.1), - 0 0 0 30px rgba(0, 123, 255, 0); + 0 0 0 10px rgba(0, 170, 255, 0), + 0 0 0 20px rgba(0, 170, 255, 0.1), + 0 0 0 30px rgba(0, 170, 255, 0); } 100% { - scale: 1; + transform: scale(1); box-shadow: - 0 0 0 0 rgba(0, 123, 255, 0), - 0 0 0 6px rgba(0, 123, 255, 0), - 0 0 0 12px rgba(0, 123, 255, 0); + 0 0 0 0 rgba(0, 170, 255, 0), + 0 0 0 10px rgba(0, 170, 255, 0), + 0 0 0 20px rgba(0, 170, 255, 0); } } +.cloudimage-360-hotspot:hover { + transform: scale(1.2); + box-shadow: + 0 0 0 5px rgba(0, 170, 255, 0.5), + 0 4px 12px rgba(0, 0, 0, 0.3); +} + .cloudimage-360-popper { - background-color: #333; - color: #fff; - padding: 8px 12px; - border-radius: 4px; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); + background-color: rgba(255, 255, 255, 0.9); + color: #333; + padding: 10px 15px; + border-radius: 6px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); font-size: 14px; - max-width: 200px; + max-width: 220px; z-index: 9999; text-align: center; transition: From 7eabfbd1eb085a1749b403fdc7168bedb3dc99ea Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 20:13:16 +0300 Subject: [PATCH 16/31] fix: Lazy loading and deprecate lazy selector --- examples/src/index.html | 2 - src/ci360.service.js | 5 -- src/ci360.utils.js | 6 -- src/types/ci360.d.ts | 2 - src/utils/controls/get-item-skipped.js | 2 - src/utils/controls/init-controls.js | 87 ------------------- src/utils/index.js | 3 - .../load-images/lazyload/init-lazyload.js | 30 ++++--- .../load-images/lazyload/lazyload-image.js | 28 ++++++ 9 files changed, 47 insertions(+), 118 deletions(-) delete mode 100644 src/utils/controls/get-item-skipped.js delete mode 100644 src/utils/controls/init-controls.js create mode 100644 src/utils/load-images/lazyload/lazyload-image.js diff --git a/examples/src/index.html b/examples/src/index.html index 1a3b9d0..e642e95 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -93,7 +93,6 @@

data-play-once data-hide-360-logo data-speed="120" - data-lazy-selector="lazyload" data-hotspots data-responsive="scaleflex" >

@@ -149,7 +148,6 @@

Trusted by top brands, worldwide

data-lazyload pointer-zoom="1.01" data-magnifier="3" - data-lazy-selector="lazyload" data-responsive="scaleflex" >

Toyota

diff --git a/src/ci360.service.js b/src/ci360.service.js index ebfbfde..ff6d2c1 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -860,10 +860,8 @@ class CI360Viewer { ciFilters, ciTransformation, lazyload, - lazySelector, dragSpeed, stopAtEdges, - controlReverse, logoSrc, pointerZoom, imageInfo = 'black', @@ -893,8 +891,6 @@ class CI360Viewer { this.autoplayReverse = autoplayReverse; this.fullscreen = fullscreen; this.magnifier = magnifier > 1 ? Math.min(magnifier, 5) : 0; - this.lazySelector = lazySelector; - this.controlReverse = controlReverse; this.dragSpeed = Math.max(dragSpeed, 50); this.stopAtEdges = stopAtEdges; this.logoSrc = logoSrc; @@ -920,7 +916,6 @@ class CI360Viewer { apiVersion, ciParams, lazyload, - lazySelector, amount: this.amountX, indexZeroBase, autoplayReverse, diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 91f29d8..624cad5 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -31,9 +31,7 @@ const DEFAULTS_VALUES = { ciFilters: null, ciTransformation: null, lazyload: false, - lazySelector: 'lazyload', dragReverse: false, - controlReverse: false, stopAtEdges: false, logoSrc: 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', imageInfo: false, @@ -75,9 +73,7 @@ const getConfigFromImage = (image) => ({ ciFilters: getAttr(image, 'filters', DEFAULTS_VALUES.ciFilters), ciTransformation: getAttr(image, 'transformation', DEFAULTS_VALUES.ciTransformation), lazyload: isTrue(image, 'lazyload', DEFAULTS_VALUES.lazyload), - lazySelector: getAttr(image, 'lazyload-selector', DEFAULTS_VALUES.lazySelector), dragReverse: isTrue(image, 'drag-reverse', DEFAULTS_VALUES.dragReverse), - controlReverse: isTrue(image, 'control-reverse', DEFAULTS_VALUES.controlReverse), stopAtEdges: isTrue(image, 'stop-at-edges', DEFAULTS_VALUES.stopAtEdges), logoSrc: getAttr(image, 'logo-src', DEFAULTS_VALUES.logoSrc), imageInfo: isTrue(image, 'info', DEFAULTS_VALUES.imageInfo), @@ -115,9 +111,7 @@ const adaptConfig = (config) => ({ ciFilters: config.ciFilters || DEFAULTS_VALUES.ciFilters, ciTransformation: config.ciTransformation || DEFAULTS_VALUES.ciTransformation, lazyload: config.lazyload ?? DEFAULTS_VALUES.lazyload, - lazySelector: config.lazySelector || DEFAULTS_VALUES.lazySelector, dragReverse: config.dragReverse ?? DEFAULTS_VALUES.dragReverse, - controlReverse: config.controlReverse ?? DEFAULTS_VALUES.controlReverse, stopAtEdges: config.stopAtEdges ?? DEFAULTS_VALUES.stopAtEdges, logoSrc: config.logoSrc || DEFAULTS_VALUES.logoSrc, imageInfo: config.imageInfo ?? DEFAULTS_VALUES.imageInfo, diff --git a/src/types/ci360.d.ts b/src/types/ci360.d.ts index 5fa2d30..e540641 100644 --- a/src/types/ci360.d.ts +++ b/src/types/ci360.d.ts @@ -26,10 +26,8 @@ declare module CI360 { ciFilters?: string | null; ciTransformation?: string | null; lazyload?: boolean; - lazySelector?: string; dragSpeed?: number; stopAtEdges?: boolean; - controlReverse?: boolean; logoSrc?: string; pointerZoom?: number; imageInfo?: string; diff --git a/src/utils/controls/get-item-skipped.js b/src/utils/controls/get-item-skipped.js deleted file mode 100644 index ee5608c..0000000 --- a/src/utils/controls/get-item-skipped.js +++ /dev/null @@ -1,2 +0,0 @@ -export const getItemSkipped = (previousPosition, currentPosition, speedFactor = 1) => - Math.abs(Math.floor((currentPosition - previousPosition) / speedFactor)) || 1; diff --git a/src/utils/controls/init-controls.js b/src/utils/controls/init-controls.js deleted file mode 100644 index bdbd8a8..0000000 --- a/src/utils/controls/init-controls.js +++ /dev/null @@ -1,87 +0,0 @@ -import { addClass } from '../class-names/add-class'; - -export const initControls = (controlsConfig, controlsTriggers) => { - const { container, controlReverse, spinReverse, stopAtEdges } = - controlsConfig; - - const { onRightStart, onLeftStart, onTopStart, onBottomStart, onEventEnd } = - controlsTriggers; - - const controlElements = {}; - const isReverse = controlReverse ? !spinReverse : spinReverse; - - const left = container.querySelectorAll( - '.cloudimage-360-left, .cloudimage-360-prev' - )[0]; - - const right = container.querySelectorAll( - '.cloudimage-360-right, .cloudimage-360-next' - )[0]; - - const top = container.querySelector('.cloudimage-360-top'); - - const bottom = container.querySelector('.cloudimage-360-bottom'); - - if (left) { - left.style.display = 'block'; - left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart); - left.addEventListener( - 'touchstart', - isReverse ? onRightStart : onLeftStart, - { passive: true } - ); - left.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd); - left.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd); - - controlElements.left = left; - } - - if (right) { - right.style.display = 'block'; - right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart); - right.addEventListener( - 'touchstart', - isReverse ? onLeftStart : onRightStart, - { passive: true } - ); - right.addEventListener('mouseup', onEventEnd); - right.addEventListener('touchend', onEventEnd); - - controlElements.right = right; - } - - if (top) { - top.style.display = 'block'; - top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart); - top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart); - top.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd); - top.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd); - - controlElements.top = top; - } - - if (bottom) { - bottom.style.display = 'block'; - bottom.addEventListener( - 'mousedown', - isReverse ? onTopStart : onBottomStart - ); - bottom.addEventListener( - 'touchstart', - isReverse ? onTopStart : onBottomStart - ); - bottom.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd); - bottom.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd); - - controlElements.bottom = bottom; - } - - if (isReverse ? right : left) { - if (stopAtEdges) { - addClass(isReverse ? right : left, 'not-active'); - addClass(isReverse ? top : bottom, 'not-active'); - } - } - - return controlElements; -}; diff --git a/src/utils/index.js b/src/utils/index.js index 317e942..70d791a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -25,9 +25,6 @@ export { isSpinKeysPressed } from './spin/is-spin-keys-pressed'; export { getMovingDirection } from './spin/get-moving-direction'; -export { getItemSkipped } from './controls/get-item-skipped'; -export { initControls } from './controls/init-controls'; - export { debounce } from './debounce'; export * from './container-elements'; diff --git a/src/utils/load-images/lazyload/init-lazyload.js b/src/utils/load-images/lazyload/init-lazyload.js index dccb187..f0f5172 100644 --- a/src/utils/load-images/lazyload/init-lazyload.js +++ b/src/utils/load-images/lazyload/init-lazyload.js @@ -1,4 +1,6 @@ +import { removeElementFromContainer } from '../../container-elements'; import generateLowPreviewCdnUrl from '../../image-src/generate-low-preview-cdn-url'; +import lazyLoadImages from './lazyload-image'; import getFirstCdnImage from './prepare-first-image/get-first-cdn-image'; import getFirstCdnImageFromList from './prepare-first-image/get-first-cdn-mage-from-list'; @@ -17,9 +19,10 @@ const getFirstImageSrc = (imagesSrc, srcConfig) => { return getFirstCdnImage(imagesSrc, indexZeroBase); }; -const createImage = (src, lazyload, lazySelector) => { +const createImage = (src, lazyload, className) => { const image = new Image(); image.setAttribute(lazyload ? 'data-src' : 'src', src); + image.className = className; image.style.cssText = ` width: 100%; height: 100%; @@ -28,30 +31,35 @@ const createImage = (src, lazyload, lazySelector) => { filter: blur(10px); `; - image.className = `${lazySelector} cloudimage-lazy`; - return image; }; export const initLazyload = (cdnPath, srcConfig, onLoad) => { - const { lazySelector, innerBox, imageList, lazyLoad } = srcConfig || {}; + const { innerBox, imageList, lazyload } = srcConfig || {}; const [firstImageSrcInList] = imageList; const firstImageSrc = firstImageSrcInList || getFirstImageSrc(cdnPath, srcConfig); const lowPreviewSrc = generateLowPreviewCdnUrl(firstImageSrc); - const image = createImage(lowPreviewSrc, lazyLoad, lazySelector); + const lazyloadImage = createImage(lowPreviewSrc, lazyload, 'cloudimage-lazy'); + const placeholderImage = createImage(lowPreviewSrc, false, 'cloudimage-360-placeholder'); + + const loadImageCallback = (event) => { + removeElementFromContainer(innerBox, '.cloudimage-360-placeholder'); - image.onload = (event) => { if (onLoad) { onLoad({ event: event, - width: image.width, - height: image.height, - naturalWidth: image.naturalWidth, - naturalHeight: image.naturalHeight, + width: lazyloadImage.width, + height: lazyloadImage.height, + naturalWidth: lazyloadImage.naturalWidth, + naturalHeight: lazyloadImage.naturalHeight, src: lowPreviewSrc, }); } }; - innerBox.appendChild(image); + lazyloadImage.onload = loadImageCallback; + innerBox.appendChild(lazyloadImage); + innerBox.appendChild(placeholderImage); + + lazyLoadImages(lazyloadImage); }; diff --git a/src/utils/load-images/lazyload/lazyload-image.js b/src/utils/load-images/lazyload/lazyload-image.js new file mode 100644 index 0000000..e8c2527 --- /dev/null +++ b/src/utils/load-images/lazyload/lazyload-image.js @@ -0,0 +1,28 @@ +const lazyLoadImages = (image) => { + const options = { + root: null, + rootMargin: '0px', + threshold: 0.1, + }; + + const loadImage = (image) => { + const src = image.getAttribute('data-src'); + + if (src) { + image.src = src; + } + }; + + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + loadImage(entry.target); + observer.unobserve(entry.target); + } + }); + }, options); + + observer.observe(image); +}; + +export default lazyLoadImages; From 0aa9fce72abc43593e8d2b5de7cb4c6e06027426 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Mon, 28 Oct 2024 21:26:11 +0300 Subject: [PATCH 17/31] fix: Hide hotspots in fullscreen view --- src/canvas.worker.js | 2 +- src/ci360.service.js | 8 +++++--- src/static/css/hotspots.css | 6 ++++-- src/utils/index.js | 1 + src/utils/is-touch-device.js | 3 +++ 5 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 src/utils/is-touch-device.js diff --git a/src/canvas.worker.js b/src/canvas.worker.js index 223f5a1..83c96a0 100644 --- a/src/canvas.worker.js +++ b/src/canvas.worker.js @@ -24,7 +24,7 @@ self.onmessage = async (event) => { adaptCanvasSize(imageAspectRatio, containerWidth, containerHeight); break; case 'drawImageOnCanvas': - await drawImageOnCanvas(imageData, zoomScale, pointerX, pointerY); + drawImageOnCanvas(imageData, zoomScale, pointerX, pointerY); break; default: break; diff --git a/src/ci360.service.js b/src/ci360.service.js index ff6d2c1..7dd8915 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -34,6 +34,7 @@ import { calculateOffsetFromEvent, createLoadingSpinner, createTransitionOverlay, + isTouchDevice, } from './utils'; import Hotspot from './hotspots'; @@ -51,6 +52,7 @@ class CI360Viewer { this.draggingDirection = null; this.isReady = false; this.currentZoomScale = 1; + this.touchDevice = isTouchDevice(); this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); this.init(this.container, config); @@ -134,7 +136,7 @@ class CI360Viewer { return; } - if (this.pointerZoom && !this.glass) this.toggleZoom(event); + if (this.pointerZoom && !this.glass && !this.touchDevice) this.toggleZoom(event); } loadHigherQualityImages(width, onLoad) { @@ -422,7 +424,7 @@ class CI360Viewer { onAllImagesLoaded() { this.addAllIcons(); - if (this.hotspots) { + if (this.hotspots && !this.fullscreenView) { this.hotspotsInstance = new Hotspot(this.hotspots, this.innerBox); } @@ -703,7 +705,7 @@ class CI360Viewer { this.createTransitionOverlay(); this.addLoadingSpinner(); } - if (!this.fullscreenView) this.addMagnifierIcon(); + if (!this.fullscreenView && !this.touchDevice) this.addMagnifierIcon(); if (!this.fullscreenView) this.addFullscreenIcon(); if (!this.initialIconHidden) this.addInitialIcon(); if (!this.bottomCircleHidden) this.add360ViewCircleIcon(); diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index f8b0737..c46c672 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -13,11 +13,13 @@ .cloudimage-360-hotspot { display: inline-block; + position: absolute; + inset: 0; background: #00aaff; border: 1px solid #fff; border-radius: 50%; - height: 20px; - width: 20px; + height: 18px; + width: 18px; box-shadow: 0 0 0 0 rgba(0, 170, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2); diff --git a/src/utils/index.js b/src/utils/index.js index 70d791a..11865a5 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -26,6 +26,7 @@ export { isSpinKeysPressed } from './spin/is-spin-keys-pressed'; export { getMovingDirection } from './spin/get-moving-direction'; export { debounce } from './debounce'; +export { isTouchDevice } from './is-touch-device'; export * from './container-elements'; export * from './constants'; diff --git a/src/utils/is-touch-device.js b/src/utils/is-touch-device.js new file mode 100644 index 0000000..1647fc2 --- /dev/null +++ b/src/utils/is-touch-device.js @@ -0,0 +1,3 @@ +export const isTouchDevice = () => { + return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; +}; From aacc737f86fc051d78dab66cc7fe0c2997d5f6ed Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 01:36:48 +0300 Subject: [PATCH 18/31] improvement: Hotspot position on resize --- examples/src/hotspots-config.constant.js | 2 +- examples/src/index.js | 2 +- src/ci360.service.js | 8 ++--- src/hotspots.js | 28 ++++++----------- src/static/css/hotspots.css | 2 +- src/utils/hotspots.js | 40 ++++++++++++++++++++++++ 6 files changed, 56 insertions(+), 26 deletions(-) diff --git a/examples/src/hotspots-config.constant.js b/examples/src/hotspots-config.constant.js index 725506c..ed37425 100644 --- a/examples/src/hotspots-config.constant.js +++ b/examples/src/hotspots-config.constant.js @@ -2,7 +2,7 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [ { id: 'hotspot-1', orientation: 'x', - containerSize: [1220, 680], + containerSize: [1170, 663], positions: { 0: { x: 527, y: 319 }, 1: { x: 527, y: 319 }, diff --git a/examples/src/index.js b/examples/src/index.js index e42d947..1097a13 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -124,7 +124,7 @@ const config = { speed: 120, pointerZoom: 2, responsive: 'scaleflex', - autoplay: true, + autoplay: false, fullscreen: true, magnifier: 3, playOnce: true, diff --git a/src/ci360.service.js b/src/ci360.service.js index 7dd8915..e350527 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -372,14 +372,14 @@ class CI360Viewer { adaptCanvasSize(imageData) { const { naturalWidth, naturalHeight } = imageData; - const imageAspectRatio = naturalWidth / naturalHeight; + this.imageAspectRatio = naturalWidth / naturalHeight; const containerWidth = this.fullscreenView ? window.innerWidth : this.canvas.clientWidth; const containerHeight = this.fullscreenView ? window.innerHeight : this.canvas.clientHeight; this.canvasWorker.postMessage({ action: 'adaptCanvasSize', devicePixelRatio: this.devicePixelRatio, - imageAspectRatio: imageAspectRatio, + imageAspectRatio: this.imageAspectRatio, containerWidth, containerHeight, }); @@ -424,8 +424,8 @@ class CI360Viewer { onAllImagesLoaded() { this.addAllIcons(); - if (this.hotspots && !this.fullscreenView) { - this.hotspotsInstance = new Hotspot(this.hotspots, this.innerBox); + if (this.hotspots) { + this.hotspotsInstance = new Hotspot(this.hotspots, this.innerBox, this.imageAspectRatio); } this.isReady = true; diff --git a/src/hotspots.js b/src/hotspots.js index e4b6c85..1ccb0f2 100644 --- a/src/hotspots.js +++ b/src/hotspots.js @@ -1,6 +1,7 @@ import { createHotspotsContainer } from './utils'; import { adaptHotspotConfig, + calculateHotspotPositions, createHotspotElement, createPopperElement, createPopperModifiers, @@ -9,7 +10,7 @@ import { import { createPopper } from '@popperjs/core'; class Hotspot { - constructor(hotspotsConfig, container) { + constructor(hotspotsConfig, container, imageAspectRatio) { this.container = container; this.popper = null; this.popperInstance = null; @@ -17,6 +18,7 @@ class Hotspot { this.hotspotsConfig = adaptHotspotConfig(hotspotsConfig); this.shouldHidePopper = true; this.hidePopper = this.hidePopper.bind(this); + this.imageAspectRatio = imageAspectRatio; const { containerSize } = hotspotsConfig[0]; this.initialContainerSize = containerSize || [container.offsetWidth, container.offsetHeight]; @@ -35,24 +37,12 @@ class Hotspot { } updateHotspotsForResize(newWidth, newHeight) { - const [initialWidth, initialHeight] = this.initialContainerSize; - const widthRatio = newWidth / initialWidth; - const heightRatio = newHeight / initialHeight; - - this.hotspotsConfig.forEach((hotspot) => { - const updatedPositions = {}; - - Object.entries(hotspot.initialPositions).forEach(([key, initialPosition]) => { - const scaledX = initialPosition.x * widthRatio; - const scaledY = initialPosition.y * heightRatio; - - updatedPositions[key] = { - x: scaledX, - y: scaledY, - }; - }); - - hotspot.positions = updatedPositions; + this.hotspotsConfig = calculateHotspotPositions({ + newWidth, + newHeight, + initialContainerSize: this.initialContainerSize, + imageAspectRatio: this.imageAspectRatio, + hotspotsConfig: this.hotspotsConfig, }); this.updateHotspotPosition(this.currentActiveIndex, this.currentOrientation); diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css index c46c672..3f47bd3 100644 --- a/src/static/css/hotspots.css +++ b/src/static/css/hotspots.css @@ -15,6 +15,7 @@ display: inline-block; position: absolute; inset: 0; + transform: translate(-50%, -50%); background: #00aaff; border: 1px solid #fff; border-radius: 50%; @@ -26,7 +27,6 @@ opacity: 0; animation: pulse 2s infinite; transition: - opacity 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease; } diff --git a/src/utils/hotspots.js b/src/utils/hotspots.js index 1574ea1..4f1d24e 100644 --- a/src/utils/hotspots.js +++ b/src/utils/hotspots.js @@ -91,3 +91,43 @@ export const adaptHotspotConfig = (hotspotsConfig) => { return updatedHotspotConfig; }; + +export const calculateHotspotPositions = ({ + newWidth, + newHeight, + initialContainerSize, + imageAspectRatio, + hotspotsConfig, +}) => { + const [initialWidth, initialHeight] = initialContainerSize; + let width = newWidth; + let height = newHeight; + let offsetX = 0; + let offsetY = 0; + const containerAspectRatio = newWidth / newHeight; + const wideContainer = imageAspectRatio > containerAspectRatio; + + if (wideContainer) { + height = newWidth / imageAspectRatio; + offsetY = (newHeight - height) / 2; + } else { + width = newHeight * imageAspectRatio; + offsetX = (newWidth - width) / 2; + } + + const widthRatio = width / initialWidth; + const heightRatio = height / initialHeight; + + return hotspotsConfig.map((hotspot) => { + const updatedPositions = {}; + + Object.entries(hotspot.initialPositions).forEach(([key, initialPosition]) => { + updatedPositions[key] = { + x: initialPosition.x * widthRatio + offsetX, + y: initialPosition.y * heightRatio + offsetY, + }; + }); + + return { ...hotspot, positions: updatedPositions }; + }); +}; From 4e054006169e6bc5c774a488974c2e6437471a98 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 01:45:08 +0300 Subject: [PATCH 19/31] improvement: lazy loading and image placeholder --- src/ci360.service.js | 2 +- src/utils/load-images/lazyload/init-lazyload.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index e350527..6df4eab 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -819,7 +819,7 @@ class CI360Viewer { if (this.fullscreenView) this.addCloseFullscreenIcon(); - removeElementFromContainer(this.innerBox, '.cloudimage-lazy'); + removeElementFromContainer(this.innerBox, '.cloudimage-360-placeholder'); } update(newConfig) { diff --git a/src/utils/load-images/lazyload/init-lazyload.js b/src/utils/load-images/lazyload/init-lazyload.js index f0f5172..fc527ab 100644 --- a/src/utils/load-images/lazyload/init-lazyload.js +++ b/src/utils/load-images/lazyload/init-lazyload.js @@ -24,7 +24,9 @@ const createImage = (src, lazyload, className) => { image.setAttribute(lazyload ? 'data-src' : 'src', src); image.className = className; image.style.cssText = ` + position: ${lazyload ? 'absolute' : 'static'}; width: 100%; + inset: 0; height: 100%; object-fit: contain; object-position: center; @@ -43,7 +45,7 @@ export const initLazyload = (cdnPath, srcConfig, onLoad) => { const placeholderImage = createImage(lowPreviewSrc, false, 'cloudimage-360-placeholder'); const loadImageCallback = (event) => { - removeElementFromContainer(innerBox, '.cloudimage-360-placeholder'); + removeElementFromContainer(innerBox, '.cloudimage-lazy'); if (onLoad) { onLoad({ From 9cad8c5b1b7eda6f58368b5f34084bb397a06ea5 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 02:01:41 +0300 Subject: [PATCH 20/31] improvement: demo page --- examples/src/index.html | 7 +++---- examples/src/index.js | 35 +++++++++++++++++++++++++++++++++-- examples/src/styles/main.css | 4 ++++ src/utils/constants.js | 2 ++ 4 files changed, 42 insertions(+), 6 deletions(-) diff --git a/examples/src/index.html b/examples/src/index.html index e642e95..2587805 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -253,13 +253,11 @@

Images source

Select amount-x

-
+

Select amount-y

diff --git a/examples/src/index.js b/examples/src/index.js index 1097a13..81ec08f 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -21,14 +21,35 @@ const copyButton = document.querySelector('.copy-button'); const outputCode = document.querySelector('.output-code'); const pointerZoomCheckbox = document.getElementById('pointer-checkbox'); const pluginCheckboxOptions = document.querySelectorAll('.plugin-option'); - +const imageXAmountSelector = document.getElementById('x-images-selector'); +const imageYSelector = document.getElementById('images-y'); +const autoplaySpeed = document.getElementById('spin-speed'); +const dragSpeed = document.getElementById('drag-speed'); const instance = new CI360(); function changeSpinDirectionHandler(event) { const spinDirection = event.target.value; - const config = spinDirection === 'Y' ? NIKE_PLUGIN : EARBUDS_PLUGIN; + const isYDirection = spinDirection === 'Y'; + const config = isYDirection ? NIKE_PLUGIN : EARBUDS_PLUGIN; const updatedView = instance.updateView('demo-generator', config); + imageXAmountSelector.value = isYDirection ? 35 : 233; + imageYSelector.style.display = isYDirection ? 'block' : 'none'; + + updateCodeBlock(updatedView.viewerConfig); +} + +function changeDragSpeed(event) { + const { value } = event.target; + const updatedView = instance.updateView('demo-generator', { dragSpeed: parseInt(value, 10) }); + + updateCodeBlock(updatedView.viewerConfig); +} + +function changeAutoplaySpeed(event) { + const { value } = event.target; + const updatedView = instance.updateView('demo-generator', { speed: parseInt(value, 10) }); + updateCodeBlock(updatedView.viewerConfig); } @@ -42,6 +63,13 @@ function copyCodeHandler() { }, 500); } +function changeImageXAmount(event) { + const { value } = event.target; + const updatedView = instance.updateView('demo-generator', { amountX: parseInt(value, 10) }); + + updateCodeBlock(updatedView.viewerConfig); +} + function changePointerZoom(event) { const checked = event.target.checked; const value = parseFloat(pointerZoomSelector.value, 10); @@ -105,7 +133,10 @@ function updateCodeBlock(config) { }); } +dragSpeed.addEventListener('change', changeDragSpeed); +autoplaySpeed.addEventListener('change', changeAutoplaySpeed); pointerZoomCheckbox.addEventListener('change', changePointerZoom); +imageXAmountSelector.addEventListener('change', changeImageXAmount); pointerZoomSelector.addEventListener('change', changePointerZoomSelector); spinDirections.addEventListener('change', changeSpinDirectionHandler); copyButton.addEventListener('click', copyCodeHandler); diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css index 4744d96..a5b4a1e 100644 --- a/examples/src/styles/main.css +++ b/examples/src/styles/main.css @@ -9,6 +9,10 @@ body { overflow-x: hidden; } +#images-y { + display: none; +} + .cloudimage-360 canvas, #demo-generator canvas, #gurkha-suv canvas { diff --git a/src/utils/constants.js b/src/utils/constants.js index a822e4a..5cf1586 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -22,6 +22,8 @@ export const PROPS_REQUIRE_RELOAD = [ 'imageListX', 'imageListY', 'indexZeroBase', + 'amountX', + 'amountY', ]; export const LEFT_RIGHT_KEYS = [37, 39]; From 42e4f1a81db438eb230e55ea8fb3aeda5f51066e Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 02:03:14 +0300 Subject: [PATCH 21/31] improvement: demo page --- examples/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/src/index.js b/examples/src/index.js index 81ec08f..8fb56a0 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -155,7 +155,7 @@ const config = { speed: 120, pointerZoom: 2, responsive: 'scaleflex', - autoplay: false, + autoplay: true, fullscreen: true, magnifier: 3, playOnce: true, From ad6eb8c3ec32fe1ea2389839f5d55bce2fc4fd57 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 12:49:07 +0300 Subject: [PATCH 22/31] improvement: Remove deprecated properties --- src/ci360.service.js | 18 +++++++--------- src/ci360.utils.js | 21 ++++++------------- src/types/ci360.d.ts | 4 +--- .../container-elements/create-box-shadow.js | 9 -------- src/utils/container-elements/index.js | 1 - 5 files changed, 15 insertions(+), 38 deletions(-) delete mode 100644 src/utils/container-elements/create-box-shadow.js diff --git a/src/ci360.service.js b/src/ci360.service.js index 6df4eab..93b2529 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -705,10 +705,11 @@ class CI360Viewer { this.createTransitionOverlay(); this.addLoadingSpinner(); } + if (!this.fullscreenView && !this.touchDevice) this.addMagnifierIcon(); if (!this.fullscreenView) this.addFullscreenIcon(); - if (!this.initialIconHidden) this.addInitialIcon(); - if (!this.bottomCircleHidden) this.add360ViewCircleIcon(); + if (this.initialIconShown) this.addInitialIcon(); + if (!this.bottomCircle) this.add360ViewCircleIcon(); } showAllIcons() { @@ -833,6 +834,7 @@ class CI360Viewer { } init(container, config, update) { + console.log(getConfigFromImage(container)); const adaptedConfig = config ? adaptConfig(config) : getConfigFromImage(container); const { @@ -849,7 +851,6 @@ class CI360Viewer { swipeable = true, keys, keysReverse, - bottomCircle, bottomCircleOffset, autoplay, autoplayBehavior, @@ -864,11 +865,10 @@ class CI360Viewer { lazyload, dragSpeed, stopAtEdges, - logoSrc, pointerZoom, imageInfo = 'black', - initialIconHidden, - bottomCircleHidden, + initialIconShown, + bottomCircle, hotspots, dragReverse, } = adaptedConfig; @@ -884,7 +884,6 @@ class CI360Viewer { this.allowSpinY = !!this.amountY; this.activeImageX = autoplayReverse ? this.amountX - 1 : 0; this.activeImageY = autoplayReverse ? this.amountY - 1 : 0; - this.bottomCircle = bottomCircle; this.bottomCircleOffset = bottomCircleOffset; this.autoplay = autoplay; this.autoplayBehavior = autoplayBehavior; @@ -895,7 +894,6 @@ class CI360Viewer { this.magnifier = magnifier > 1 ? Math.min(magnifier, 5) : 0; this.dragSpeed = Math.max(dragSpeed, 50); this.stopAtEdges = stopAtEdges; - this.logoSrc = logoSrc; this.ciParams = ciParams; this.apiVersion = apiVersion; this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 5) : null; @@ -903,8 +901,8 @@ class CI360Viewer { this.info = imageInfo; this.keys = keys; this.innerBox = this.innerBox ?? createInnerBox(this.container); - this.initialIconHidden = initialIconHidden; - this.bottomCircleHidden = bottomCircleHidden; + this.initialIconShown = initialIconShown; + this.bottomCircle = bottomCircle; this.spinDirection = getDefaultSpinDirection(this.autoplayBehavior, this.allowSpinX, this.allowSpinY); this.dragReverse = dragReverse; this.hotspots = hotspots; diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 624cad5..7cad297 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -17,15 +17,14 @@ const DEFAULTS_VALUES = { swipeable: true, keys: false, keysReverse: false, - boxShadow: null, autoplay: false, autoplayBehavior: AUTOPLAY_BEHAVIOR.SPIN_X, playOnce: false, autoplayReverse: false, pointerZoom: 0, - bottomCircle: false, fullscreen: false, magnifier: null, + bottomCircle: true, bottomCircleOffset: 5, ciToken: null, ciFilters: null, @@ -33,10 +32,8 @@ const DEFAULTS_VALUES = { lazyload: false, dragReverse: false, stopAtEdges: false, - logoSrc: 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg', imageInfo: false, - initialIconHidden: true, - bottomCircleHidden: true, + initialIconShown: true, hotspots: null, }; @@ -56,13 +53,11 @@ const getConfigFromImage = (image) => ({ swipeable: isTrue(image, 'swipeable', DEFAULTS_VALUES.swipeable), keys: isTrue(image, 'keys', DEFAULTS_VALUES.keys), keysReverse: isTrue(image, 'keys-reverse', DEFAULTS_VALUES.keysReverse), - boxShadow: getAttr(image, 'box-shadow', DEFAULTS_VALUES.boxShadow), autoplay: isTrue(image, 'autoplay', DEFAULTS_VALUES.autoplay), autoplayBehavior: getAttr(image, 'autoplay-behavior', DEFAULTS_VALUES.autoplayBehavior), playOnce: isTrue(image, 'play-once', DEFAULTS_VALUES.playOnce), autoplayReverse: isTrue(image, 'autoplay-reverse', DEFAULTS_VALUES.autoplayReverse), pointerZoom: parseFloat(getAttr(image, 'pointer-zoom', DEFAULTS_VALUES.pointerZoom), 10), - bottomCircle: isTrue(image, 'bottom-circle', DEFAULTS_VALUES.bottomCircle), fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen', DEFAULTS_VALUES.fullscreen), magnifier: parseFloat(getAttr(image, 'magnifier', DEFAULTS_VALUES.magnifier), 10), bottomCircleOffset: parseInt( @@ -75,10 +70,9 @@ const getConfigFromImage = (image) => ({ lazyload: isTrue(image, 'lazyload', DEFAULTS_VALUES.lazyload), dragReverse: isTrue(image, 'drag-reverse', DEFAULTS_VALUES.dragReverse), stopAtEdges: isTrue(image, 'stop-at-edges', DEFAULTS_VALUES.stopAtEdges), - logoSrc: getAttr(image, 'logo-src', DEFAULTS_VALUES.logoSrc), imageInfo: isTrue(image, 'info', DEFAULTS_VALUES.imageInfo), - initialIconHidden: isFalse(image, 'initial-icon'), - bottomCircleHidden: isFalse(image, 'bottom-circle'), + initialIconShown: !isFalse(image, 'initial-icon'), + bottomCircle: !isFalse(image, 'bottom-circle'), }); const adaptConfig = (config) => ({ @@ -97,13 +91,11 @@ const adaptConfig = (config) => ({ dragSpeed: parseInt(config.dragSpeed ?? DEFAULTS_VALUES.dragSpeed, 10), keys: config.keys ?? DEFAULTS_VALUES.keys, keysReverse: config.keysReverse ?? DEFAULTS_VALUES.keysReverse, - boxShadow: config.boxShadow || DEFAULTS_VALUES.boxShadow, autoplay: config.autoplay ?? DEFAULTS_VALUES.autoplay, autoplayBehavior: config.autoplayBehavior || DEFAULTS_VALUES.autoplayBehavior, playOnce: config.playOnce ?? DEFAULTS_VALUES.playOnce, autoplayReverse: config.autoplayReverse ?? DEFAULTS_VALUES.autoplayReverse, pointerZoom: parseFloat(config.pointerZoom ?? DEFAULTS_VALUES.pointerZoom, 10), - bottomCircle: config.bottomCircle ?? DEFAULTS_VALUES.bottomCircle, fullscreen: config.fullscreen ?? DEFAULTS_VALUES.fullscreen, magnifier: parseFloat(config.magnifier ?? DEFAULTS_VALUES.magnifier, 10), bottomCircleOffset: parseInt(config.bottomCircleOffset ?? DEFAULTS_VALUES.bottomCircleOffset, 10), @@ -113,10 +105,9 @@ const adaptConfig = (config) => ({ lazyload: config.lazyload ?? DEFAULTS_VALUES.lazyload, dragReverse: config.dragReverse ?? DEFAULTS_VALUES.dragReverse, stopAtEdges: config.stopAtEdges ?? DEFAULTS_VALUES.stopAtEdges, - logoSrc: config.logoSrc || DEFAULTS_VALUES.logoSrc, imageInfo: config.imageInfo ?? DEFAULTS_VALUES.imageInfo, - initialIconHidden: config.initialIconHidden ?? DEFAULTS_VALUES.initialIconHidden, - bottomCircleHidden: config.bottomCircleHidden ?? DEFAULTS_VALUES.bottomCircleHidden, + initialIconShown: config.initialIconShown ?? DEFAULTS_VALUES.initialIconShown, + bottomCircle: config.bottomCircle ?? DEFAULTS_VALUES.bottomCircle, hotspots: config.hotspots ?? DEFAULTS_VALUES.hotspots, }); diff --git a/src/types/ci360.d.ts b/src/types/ci360.d.ts index e540641..019f8a7 100644 --- a/src/types/ci360.d.ts +++ b/src/types/ci360.d.ts @@ -13,7 +13,6 @@ declare module CI360 { swipeable?: boolean; keys?: boolean; keysReverse?: boolean; - bottomCircle?: boolean; bottomCircleOffset?: number; autoplay?: boolean; autoplayBehavior?: string; @@ -28,10 +27,9 @@ declare module CI360 { lazyload?: boolean; dragSpeed?: number; stopAtEdges?: boolean; - logoSrc?: string; pointerZoom?: number; imageInfo?: string; - initialIconHidden?: boolean; + initialIconShown?: boolean; bottomCircleHidden?: boolean; } diff --git a/src/utils/container-elements/create-box-shadow.js b/src/utils/container-elements/create-box-shadow.js deleted file mode 100644 index 5abbdb8..0000000 --- a/src/utils/container-elements/create-box-shadow.js +++ /dev/null @@ -1,9 +0,0 @@ -export const createBoxShadow = (boxShadow, innerBox) => { - const nextBoxShadow = document.createElement('div'); - - nextBoxShadow.className = 'cloudimage-360-box-shadow'; - nextBoxShadow.style.boxShadow = boxShadow; - innerBox.appendChild(nextBoxShadow); - - return nextBoxShadow; -}; diff --git a/src/utils/container-elements/index.js b/src/utils/container-elements/index.js index 7be2480..e968424 100644 --- a/src/utils/container-elements/index.js +++ b/src/utils/container-elements/index.js @@ -6,7 +6,6 @@ export { createFullscreenIcon } from './create-fullscreen-icon'; export { createIconsContainer } from './create-icons-container'; export { createInnerBox } from './create-inner-box'; export { createMagnifierIcon } from './create-magnifier-icon'; -export { createBoxShadow } from './create-box-shadow'; export { createLoader } from './create-loader'; export { createFullscreenModal } from './create-fullscreen-modal'; export { removeElementFromContainer } from './remove-element-from-container'; From 0a784c01d5e75884513bd7a5fe5f515992875528 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 14:21:17 +0300 Subject: [PATCH 23/31] chore: Update docs and README.md --- README.md | 1071 +++++------------ examples/src/index.js | 2 +- src/ci360.service.js | 4 +- src/ci360.utils.js | 2 +- src/hotspots.js | 6 +- src/static/css/style.css | 2 +- .../create-transition-overlay.js | 2 +- 7 files changed, 317 insertions(+), 772 deletions(-) diff --git a/README.md b/README.md index 9e0cdad..e39e96b 100644 --- a/README.md +++ b/README.md @@ -1,854 +1,401 @@ -[![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases) -[![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view) -[![Download](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange) -[![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%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home) -[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home) -

- - cloudimage logo - - - cloudimage logo - + + cloudimage logo +

- -

- JS Cloudimage 360 View -

- +

JS Cloudimage 360 View +

- - Docs - • - Demo - • - Code Sandbox - • - Video Tutorial - • - Why - + 360 Views, Infinite Possibilities: Unleash the Power of js-cloudimage-360-view!

-

A simple, interactive resource that can be used to provide a virtual tour of your product.

- The Lounge + + Release + + + Size + + + Download + + + Contributions welcome + + + License + + + Scaleflex team + + + Cloudimage +

+

+

+

+ +

+
+ +## 🔗 Table of Contents + +- [📍 Overview](#-overview) +- [👾 Features](#-features) +- [🚀 Getting Started](#-getting-started) + - [⚙️ Installation](#installation) + - [Option 1: Add via CDN](#option-1-add-via-cdn) + - [Option 2: Install with Package Manager](#option-2-install-with-package-manager) + - [🛠️ Usage](#-usage) + - [⚙️ Configuration Options](#configuration-options) + - [Method 1: Initialization via JavaScript Code](#method-1-initialization-via-javascript-code) + - [Method 2: Initialization via Data Attributes](#method-2-initialization-via-data-attributes) +- [🗺️ Hotspots or Markers Configuration](#-hotspots-or-markers-configuration) +- [🗺️ Cloudimage responsive integration](#-cloudimage-responsive-integration) +- [🔧 Methods](#-methods) + - [getViewById](#getviewbyidid) + - [getViews](#getviews) + - [updateView](#updateviewid-config) + - [onMoveHandler](#onmovehandlermovingdirection-itemsSkippedX-itemsSkippedY) +- [🔰 Contributing](#-contributing) +- [🎗 License](#-license) -## Table of contents - -- [Demo](#demo) -- [Step 1: Installation](#installation) -- [Step 2: Initialize](#initialize) -- [Methods](#methods) -- [Customize elements](#customize-elements) -- [Configuration](#configuration) -- [Controls](#controls) -- [Spin in X and Y axis](#spin_x_y) -- [Hotspots or Markers](#hotspots) -- [Cloudimage responsive integration](#cloudimage-responsive-integration) -- [Lazy loading integration](#lazy-loading) -- [Best practices](#best-practices) -- [Browser support](#browser_support) -- [Filerobot UI Family](#ui_family) -- [Contributing](#contributing) -- [License](#license) - -## Demo - -To see the Cloudimage 360 view plugin in action, please check out the -[Demo page](https://scaleflex.github.io/js-cloudimage-360-view/). - -## Step 1: Installation +--- -Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag +## 📍 Overview -```javascript - -``` +The js-cloudimage-360-view project revolutionizes interactive 360-degree image viewing experiences. With robust build and deployment scripts, it simplifies development processes. Key features include viewer initialization, hotspot functionality, and dynamic configuration utilities. Ideal for e-commerce platforms and virtual tours, it offers immersive and engaging user experiences. -## Step 2: Initialize +--- +## 👾 Features -After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**, -**server folder path**, **file name** and amount of images: +| | Feature | Summary | +| :--- | :---: | :--- | +| ⚙️ | **Image Viewing** |
  • Enables interactive 360-degree image viewing with smooth transitions
  • Supports high-resolution images for detailed visualization
  • Touch and drag navigation for user-friendly experiences
| +| 🔩 | **Customization** |
  • Offers customizable settings for rotation speed, direction, and initial angle
  • Supports multiple display modes and responsive adjustments
  • Adaptable to various website designs for seamless integration
| +| 📄 | **Documentation** |
  • Comprehensive guides on installation and usage
  • Step-by-step instructions for integration and configuration
  • Provides examples to help users implement the plugin quickly
| +| 🔌 | **Framework Support** |
  • Easily integrates with popular JavaScript frameworks
  • Includes clear instructions for setup in React, Vue, Angular, and vanilla JavaScript
  • Adjustable settings to adapt to project requirements
| +| ⚡️ | **Performance** |
  • Optimized for fast loading and minimal resource consumption
  • Utilizes lazy loading and caching to improve load times
  • Lightweight script ensures minimal impact on page performance
| +| 📦 | **Dependencies** |
  • Minimal dependencies for essential functionality only
| -```html -
-``` +--- -edit in codesandbox +## 🚀 Getting Started -## Methods + ## ⚙️ Installation -### init +You can install `js-cloudimage-360-view` using one of the following methods: -###### Type: **Function** + ### Option 1: Add via CDN -Initialization of js cloudimage 360 view plugin. +Include the CDN link to the `js-cloudimage-360-view` library at the end of your `` tag: -```javascript -window.CI360.init(); +```code + ``` -> NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with **notInitOnLoad** param -> -> ```javascript -> -> -> -> ``` +This is the quickest way to get started without additional setup. + #### Option 2: Install with Package Manager -### add +You can add `js-cloudimage-360-view` to your project using either npm or Yarn: -###### Type: **Function** +For npm: -```javascript -window.CI360.add(idOftheView: string); +```sh +npm install js-cloudimage-360-view ``` -lazy init cloudimage-360 view by id. - -###### arguments - -`idOftheView`: string -The id of the new view - -edit in codesandbox - -### update +For Yarn: -###### Type: **Function** - -```javascript -window.CI360.update(idOftheView, forceUpdate); +```sh +yarn add js-cloudimage-360-view ``` -Update cloudimage 360 viewer instance.
-For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`), -the plugin will re-init. - -###### arguments - -`idOftheView`: string -The id of the new view - -`forceUpdate`: bool -Force the view to reinitialize. - -```html -
-``` +Then, import it in your JavaScript file: ```javascript -window.CI360.update('gurkha-suv'); +import CloudImage360 from 'js-cloudimage-360-view'; ``` -```javascript -window.CI360.update(null, true); -``` +Choose the method that best suits your project setup, and refer to the documentation for configuration options and usage examples. -edit in codesandbox +### 🛠️ Usage -### destroy +To use `js-cloudimage-360-view`, you need to initialize an instance of the viewer. You can either initialize a specific view or initialize all instances with a common selector. -###### Type: **Function** +#### Initialize a Single View -Destroying a cloudimage 360 viewer instance will reset the HTML to its original state. +To initialize a single 360-degree view, use the following code: ```javascript -window.CI360.destroy(); -``` - - - edit in codesandbox - -### getActiveIndexByID +const cloudimage360 = new CloudImage360(); -###### Type: **Function** +const suvCarContainer = document.getElementById('gurkha-suv'); -Get the {index} of the image that is being viewed. +const config = { + folder: 'https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/', + filenameX: 'orange-{index}.jpg', + amountX: 73, + responsive: 'scaleflex', +}; -```javascript -window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string); +instance.init(suvCarContainer, config); ``` -###### arguments - -`idOfInstance`: string -The id of the instance - -`oriantation`: string -The oriantation of the active index - -## Customize elements - -You can customize elements by adding the following classes: - - -## Config - -### class - -###### Type: **String** | Value: **"cloudimage-360"** | _required_ - -The selector for js-cloudimage-360-view lib. - -### data-folder (or folder) - -###### Type: **String(url)** | _required_ +#### Initialize All Instances -Your images folder on server. - -### data-api-version (or api-version) - -###### Type: **String** |Default: **'v7'** | _optional_ - -Allow to use a specific version of API. - -- set a specific version of API - -```javascript -data-api-version="v7" -``` - -- disable API version +To initialize all instances with a common selector, use the following code: ```javascript -data-api-version="null" +instance.initAll('.cloudimage-360'); ``` -### data-filename-x (or filename-x) - -###### Type: **String** | Default: **image-{index}.jpg** | _optional_ - -The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and [data-amount-x](#data-amount-x). - -### data-filename-y (or filename-y) - -###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_ - -The same for [data-amount-x](#data-amount-x) but for images set in Y-axis. - -### data-amount-x (or amount-x) - -###### Type: **Number** | Default: **36** | _optional_ - -Amount of images to load in X-axis for 360 view . +This will apply the 360-degree viewer to all elements matching the specified selector. -### data-amount-y (or amount-y) -###### Type: **Number** | Default: **0** | _optional_ +### ⚙️ Configuration Options -Amount of images to load in Y-axis for 360 view. +When initializing the `js-cloudimage-360-view`, you can customize various configuration options. Below is a list of available options, their required status, default values, and the corresponding data attributes you can use in HTML. -### data-keys (or keys) +#### Method 1: Initialization via JavaScript Code +To initialize a view programmatically, use the following configuration options: -###### Type: **Bool** | Default: **false** | _optional_ -Support for 360 spin by pressing arrow keys on keyboard. - -### data-keys-reverse (or keys-reverse) - -###### Type: **Bool** | Default: **false** | _optional_ - -invert arrow keys on keyboard. - -### data-autoplay (or autoplay) - -###### Type: **Bool** | Default: **false** | _optional_ - -Autoplay 360 spin view on load. - -### data-play-once (or autoplay) - -###### Type: **Bool** | Default: **false** | _optional_ - -stops the autoplay after one complete cycle. - -### data-autoplay-behavior (or autoplay-behavior) - -###### Type: **String** | Default: **spin-x** | _optional_ - -Changing autoplay behavior - -Available behaviors (spin-x, spin-y, spin-xy, spin-yx) - -### data-fullscreen (or fullscreen) - -###### Type: **Bool** | Default: **false** | _optional_ - -Open 360 spin view in full screen modal. - -### data-magnifier (or magnifier) - -###### Type: **Number** | Default: **none** | _optional_ - -Magnifier to zoom image. - -### data-ratio (or ratio) - -###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_ - -#### `ratio`: string - -Setting the height relative to the container width according to the provided ratio
- -```html -
-``` - -edit in codesandbox - -#### `ratio`: JSON - -Setting the height relative to the container width at any window size. - -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. +#### Method 2: Initialization via Data Attributes +You can also initialize the view using HTML data attributes, which correspond to the configuration options listed below. +For example: ```html -
-``` - -edit in codesandbox - -### data-autoplay-reverse (or autoplay-reverse) - -###### Type: **Bool** | Default: **false** | _optional_ - -Autoplay 360 spin view on load. - -### data-disable-drag (or disable-drag) - -###### Type: **bool** | Default: **false** | _optional_ - -disable mouse drag. - -### data-speed (or speed) - -###### Type: **Number** | Default: **150** | _optional_ - -Speed of changing frames for autoplay in milliseconds. - -### data-drag-speed (or drag-speed) - -###### Type: **Number** | Default: **150** | _optional_ - -Speed Factor of changing frames on drag event. - -### data-drag-reverse (or drag-reverse) - -###### Type: **Bool** | Default: **false** | _optional_ - -Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount-x). - -### data-box-shadow (or box-shadow) - -###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_ - -Apply box shadow for container. - -### data-bottom-circle (or bottom-circle) - -###### Type: **Bool** | Default: **false** | _optional_ - -Display 360 view line at the bottom of container. - - -### data-control-reverse (or control-reverse) - -###### Type: **Bool** | Default: **false** | _optional_ - -Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount-x). - -### data-stop-at-edges (or stop-at-edges) - -###### Type: **Bool** | Default: **false** | _optional_ - -Blocks repeating images after reaching last image (or first image in opposite direction) - -### data-bottom-circle-offset (or bottom-circle-offset) - -###### Type: **Number** | Default: **5** | _optional_ - -Bottom offset for 360 view line. - -### data-index-zero-base (or index-zero-base) - -###### Type: **Number** | _optional_ - -Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004" - -### data-image-list-x (or data-image-list-x) - -###### Type: **Array** | _optional_ - -Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`. - -example: - -```javascript -data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/" -data-image-list-x='[ - "iris-1.jpeg", - "iris-4.jpeg", - "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg", - "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg" - ]’ -``` - -### data-image-list-y (or data-image-list-y) - -###### Type: **Array** | _optional_ - -Option to add list of images in y-oriantation instead of `folder` , `filename-y` & `amount-y`. - -example: - -```javascript -data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/" -data-image-list-y='[ - "iris-2-y.jpeg", - "iris-6-y.jpeg", - "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg", - "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg" - ]’ -``` - -### data-pointer-zoom (or pointer-zoom) - -###### Type: **Number** | Default: **none** | _optional_ - -Option to scale images on click on it to provided value. - -example: - -```javascript -data-pointer-zoom="3" -``` - -### data-lazyload (or lazyload) - -###### Type: **Bool** | Default: **false** | _optional_ - -Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see [Lazy loading](#lazy-loading) - -### data-lazyload-selector (or lazyload-selector) - -###### Type: **String** | Default: **lazyload** | _optional_ - -Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading) - -## Controls - -You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, \*\*cloudimage-360-bottom - -### Example CSS - -```css -.cloudimage-360 .cloudimage-360-left, -.cloudimage-360 .cloudimage-360-right { - padding: 8px; - background: rgba(255, 255, 255, 0.5); - 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; -} -``` - -### Example HTML - -```html -
- - - - +
``` - -edit in codesandbox - -## Spin in X and Y axes - -Allow the view to spin in both X, Y axes - -### Requirements - -We need to provide the `file-name` of the y-axis images using data-filename-y - -Also as we did for the x-axis if we are intializing the view using data-folder and data-filename-y -so we need to provide data-amount-y which indicates the number of images on the y-axis. -example: - +| Option | Data Attribute | Required | Default Value | Description | +| ---------------------| --------------------------| -------- | ----------------------------------------------- | ------------------------------------------------- | +| `folder` | `data-folder` | Yes | `'/'` | The path to the folder containing the images. | +| `apiVersion` | `data-api-version` | No | `'v7'` | The API version to use. | +| `filenameX` | `data-filename-x` | Yes | `'image-{index}.jpg'` | The filename pattern for the X-axis images. | +| `filenameY` | `data-filename-y` | No | `null` | The filename pattern for the Y-axis images (optional). | +| `imageListX` | `data-image-list-x` | No | `null` | An array of images for the X-axis (optional). | +| `imageListY` | `data-image-list-y` | No | `null` | An array of images for the Y-axis (optional). | +| `indexZeroBase` | `data-index-zero-base` | No | `0` | Whether the index starts from 0. | +| `amountX` | `data-amount-x` | Yes | `0` | Total number of X-axis images. | +| `amountY` | `data-amount-y` | No | `0` | Total number of Y-axis images (optional). | +| `speed` | `data-speed` | No | `80` | The speed of the rotation in milliseconds. | +| `dragSpeed` | `data-drag-speed` | No | `150` | The speed when dragging the image. | +| `draggable` | `data-draggable` | No | `true` | Enables dragging functionality. | +| `swipeable` | `data-swipeable` | No | `true` | Enables swipe functionality on touch devices. | +| `keys` | `data-keys` | No | `false` | Enables keyboard navigation. | +| `keysReverse` | `data-keys-reverse` | No | `false` | Reverses keyboard navigation controls. | +| `autoplay` | `data-autoplay` | No | `false` | Automatically plays the rotation. | +| `autoplayBehavior` | `data-autoplay-behavior` | No | `AUTOPLAY_BEHAVIOR.SPIN_X` | Defines how autoplay behaves. | +| `playOnce` | `data-play-once` | No | `false` | Plays the animation only once. | +| `autoplayReverse` | `data-autoplay-reverse` | No | `false` | Plays the autoplay in reverse. | +| `pointerZoom` | `data-pointer-zoom` | No | `0` | Defines the zoom level on pointer hover. | +| `fullscreen` | `data-fullscreen` | No | `false` | Enables fullscreen mode. | +| `magnifier` | `data-magnifier` | No | `null` | Defines the magnification level (optional). | +| `bottomCircle` | `data-bottom-circle` | No | `true` | Displays the bottom circle navigation. | +| `bottomCircleOffset` | `data-bottom-circle-offset`| No | `5` | The offset of the bottom circle from the container.| +| `ciToken` | `data-responsive` | No | `null` | Token for Cloudimage API authentication (optional). [🗺️ Cloudimage responsive integration](#-cloudimage-responsive-integration) | +| `ciFilters` | `data-filters` | No | `null` | Filters applied to Cloudimage images (optional). | +| `ciTransformation` | `data-transformation` | No | `null` | Transformations for Cloudimage images (optional). | +| `lazyload` | `data-lazyload` | No | `true` | Enables lazy loading of images. | +| `dragReverse` | `data-drag-reverse` | No | `false` | Reverses drag direction. | +| `stopAtEdges` | `data-stop-at-edges` | No | `false` | Stops the rotation at the edges. | +| `imageInfo` | `data-info` | No | `false` | Displays image information. | +| `initialIconShown` | `data-initial-icon` | No | `true` | Shows the initial icon on load. | + + +The library will automatically read these attributes to configure the instance. + +### 🗺️ Hotspots or Markers Configuration + +An array defines the configuration for hotspots or markers that can be displayed on the 360 view. Each hotspot can provide additional information or interactivity. +#### Hotspot Configuration Structure +Each hotspot configuration consists of the following properties: + +| Property | Required | Description | +| --------------------- | -------- | ----------------------------------------------------------------------------------------------------- | +| `id` | Yes | A unique identifier for the hotspot. | +| `orientation` | Yes | The orientation of the hotspot (e.g., `'x'` for X-axis). | +| `containerSize` | Yes | An array defining the width and height of the container in pixels (e.g., `[width, height]`). This size represents the dimensions of the container when you first start setting the hotspots. | +| `positions` | Yes | An object where keys are indices (image indexes) representing the position of the hotspot for specific images. | +| `content` | Yes | HTML content to display in the tooltip when the hotspot is hovered or clicked. | +| `onClick` | No | A function that defines the behavior when the hotspot is clicked (optional). | + +#### Positions +The `positions` property is an object where: +- The key is the index of the image in the 360 view (e.g., 6, 7, 8, ...). +- The value is an object with `x` and `y` properties, representing the coordinates of the hotspot on the image. + +If either the `x` or `y` value is `null`, it means that the hotspot will take the coordinates from the previous defined position for that index. + +For example: ```javascript -
-``` - -edit in codesandbox
- -> Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.
-> Just we need to provide the data-amount-y - -## Hotspots or Markers - -Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image. - -### Requirements - -First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config. -Also we need to set an `id` attribute, we will need it to link the view with the hotspots config. - -### Create hotspots configuration - -The hotspots config should be an array of objects, each object in the array indicates a single hotspot config. -For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it.
hint: To know the current image index we will need to set `data-info="white || black"` attribute. - -example: - -```js -const HOTSPOTS_CONFIG = [ - { - positions: [ - { imageIndex: 0, xCoord: 527, yCoord: 319 }, - { imageIndex: 1, xCoord: 524 }, - { imageIndex: 2, xCoord: 520 }, - { imageIndex: 3, xCoord: 498 }, - { imageIndex: 4, xCoord: 470 }, - { imageIndex: 5, xCoord: 441 }, - ], - }, -]; -``` - -In the previous example, we have only set the Ycoord a single time at the image index 0. -So if the coord didn't change there's no need to reset it, it will already take the previous value. - -Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below. - -## Variant - -### Link - -we need to provide the URL of the link and the link title. - -example: - -```js -const HOTSPOTS_CONFIG = [ - { - positions, - variant: { - title: 'New Gurkha Technical Specifications', - url: 'https://www.forcegurkha.co.in/specifications/', - newTab: true, - }, - }, -]; +positions: { + 6: { x: 607, y: 246 }, + 7: { x: 619, y: null }, // y is null, so it takes the previous y (246) + 8: { x: 630, y: null }, // y is null, so it takes the previous y (246) + 9: { x: 637, y: null }, // y is null, so it takes the previous y (246) + 10: { x: 642, y: null }, // y is null, so it takes the previous y (246) +}, ``` ---- - -### Popup - -Only the property inserted will displayed. -| Property |Type | Default | Description | -| ------------- | ------------- | ------------- |------------- | -| images | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image | -| title |String| null | Display title underneath the images | -| description| String | null | Display description underneath the title | -| moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL | -| moreDetailsTitle | String | null| Set the title of the more details button | - -example: - -```js -const HOTSPOTS_CONFIG = [ +#### Example Hotspot Configuration +Here's an example configuration for multiple hotspots: +```javascript +const GURKHA_SUV_HOTSPOTS_CONFIG = [ { - positions, - variant: { - images: [ - { - src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', - alt: 'air snorkel', - }, - ], // optional - title: 'Air Intake Snorkel', // optional - description: - 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional - moreDetailsUrl: 'https://forcegurkha.co.in', // optional - moreDetailsTitle: 'Read more', // optional + id: 'hotspot-1', + orientation: 'x', + containerSize: [1170, 663], + positions: { + 0: { x: 527, y: 319 }, + 1: { x: 527, y: 319 }, + 2: { x: 527, y: null }, // Takes the previous position + 3: { x: 498, y: null }, // Takes the previous y (319) + 4: { x: 470, y: null }, // Takes the previous y (319) + // Additional positions... }, + content: '
Info about Hotspot 1
', }, + // Additional hotspots... ]; ``` +In the example above, the keys (0, 1, 2, 3, 4, ...) represent image indexes. If the `y` value is `null`, it inherits the `y` coordinate from the previous defined position. This allows for easier configuration and reduces redundancy. + +### 🎨 Styling +The following class names are used for styling various elements within the 360-degree viewer and hotspot functionality. Each class serves a specific purpose in controlling the appearance and behavior of the component. +| Class Name | Description | +| -------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `cloudimage-360-transition-overlay` | Applies styling for the overlay that appears during transitions. | +| `cloudimage-360-button` | Styles the main button for interacting with the 360 view. | +| `cloudimage-360-magnifier-button` | Styles the button that activates the magnifier feature within the 360 view. | +| `cloudimage-loading-spinner` | Styles the loading spinner displayed while the images are being loaded. | +| `cloudimage-initial-icon` | Styles the initial icon displayed before the 360 view is fully loaded. | +| `cloudimage-360-icons-container` | Styles the container for all icons associated with the 360 view (e.g., buttons, overlays). | +| `cloudimage-360-hotspot-container` | Styles the container that holds the hotspots or markers in the 360 view. | +| `cloudimage-360-fullscreen-modal` | Styles the modal that appears when the 360 view is in fullscreen mode. | +| `cloudimage-360-fullscreen-button` | Styles the button that toggles the fullscreen mode of the 360 view. | +| `cloudimage-360-close-icon` | Styles the close icon used to exit the fullscreen view. | +| `cloudimage-360-view-360-circle` | Styles the circular view area of the 360 images. | +| `cloudimage-360-popper` | Styles the popper element for displaying tooltips or additional information on hover or click. | +| `cloudimage-360-hotspot` | Styles individual hotspots within the 360 view, allowing for customizable appearance and behavior. | + +Customize these class names in your CSS files to match your application's design requirements. + + +## Methods + +### `getViewById(id)` +Returns the view object associated with the specified ID. ---- - -### Custom - -Display any element in the DOM in a popup and link it with the hotspot.
-We will need to set the variant property value to the id of the element. - -example: - -```js -const HOTSPOTS_CONFIG = [ - { - positions, - variant: 'gurkha-suv', - }, -]; +```javascript +getViewById(id) ``` -## PopupProps - -Options to customize the hotspot popup. +### `getViews()` +Returns an array of all the view objects currently available. -### Properties - -| Property | Type | Defaullt | Description | -| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------- | -| popupSelector | String | null | Set className to the popup wrapper | -| open | Boolean | false | Open the popup | -| arrow | Boolean | true | Dipslay an arrow that points toward the hotspot element | -| offset | Array | [0, 0] | Set a distance between the hotspot element and the popup | -| placement | String | Auto | - we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right) | - -example: - -```js -const HOTSPOTS_CONFIG = [ - { - positions, - variant, - popupProps: { - popupSelector: 'air-intake-popup', // optional - offset: [20, 5], // optional - arrow: false, // optional - placement: 'bottom', // optional - }, - indicatorSelector: 'first-hotspot-icon', // optional - }, -]; +```javascript +getViews() ``` -## Responsive hotspots +### `updateView(id, config)` +Updates the configuration of an existing view identified by its ID. If the configuration has changed significantly, the view will be destroyed and reinitialized; otherwise, it will simply be updated. -Now we need to make our hotspots responsive to have an accurate positioning in different screens. -we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.
-hint: `data-info` can be used to get view size. - -example: - -```js -const HOTSPOTS_CONFIG = [ - { - positions, - variant, - popupProps, - indicatorSelector, - initialDimensions: [1170, 662], - }, -]; +```javascript +updateView(id, config) ``` -## Add Hotspots +### View Methods -we need this function to link the created config with the 360-view. +#### `onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1)` +Handles the movement of items in the view. It takes a direction and the number of items to skip horizontally and vertically. -```js -window.CI360.addHotspots(idOftheView, hotspotsConfig); +```javascript +onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1) ``` -example: - -```js -window.CI360.addHotspots('gurkha-suv', HOTSPOTS_CONFIG); -``` + **Parameters:** +- `movingDirection`: A string indicating the direction of movement (`'right'`, `'left'`, `'top'`, or `'bottom'`). +- `itemsSkippedX`: The number of items to skip in the horizontal direction (default is 1). +- `itemsSkippedY`: The number of items to skip in the vertical direction (default is 1). -edit in codesandbox +--- -### data-responsive (or responsive) +## Cloudimage Responsive Integration -###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_ +### Overview -Enables cloudimage responsive plugin for 360 view. +Integrating Cloudimage for responsive images enhances the loading speed and performance of your website. This service delivers optimized images over a Content Delivery Network (CDN), ensuring that your images are served quickly and efficiently, regardless of the user's location. -## Cloudimage Responsive Integration +### How It Works -[See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074) +To see how Cloudimage transforms image delivery for responsive design, check out the [full article on Medium](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074). The article details the importance of responsive images in modern web development and how Cloudimage simplifies the process. ### Requirements -To use the Cloudimage Responsive plugin, you will need a -Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by -registering [here](https://www.cloudimage.io/en/register_page). -Once your token is created, you can configure it as described below. -This token allows you to use 25GB of image cache and 25GB of worldwide -CDN traffic per month for free. - -### data-responsive (or responsive) - -###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_ - -Enables cloudimage responsive plugin for 360 view. - -### data-request-responsive-images (or request-responsive-images) - -###### Type: **Bool** | Default: **false** - -Request new images on resize, based on the container width. - -### data-transformation (or transformation) - -###### Type: **String** | Default: **none** | _optional_ - -Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement... -Multiple transformation operations can be applied to your image, separated by "`&`" (Ampersand). -example: - -```html -data-transformation="w=400&h=200&func=fit" -``` - -[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing) - -### data-filters (or filters) - -###### Type: **String** | Default: **none** | _optional_ - -Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen... -Multiple filters can be applied, separated by "`,`" (comma). -example: - -```html -data-filters="bright:15,contrast:30" -``` - -[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters) - -## Lazy Loading - -Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like [lazysizes](https://github.com/aFarkas/lazysizes), [yall.js (Yet Another Lazy Loader)](https://github.com/malchata/yall.js), [lozad.js](https://github.com/ApoorvSaxena/lozad.js) to handle it. - -[Implementation example with lazysizes](https://codesandbox.io/s/js-cloudimage-360-view-examples-ux850x) - -[Implementation example with yall.js](https://codesandbox.io/s/js-cloudimage-360-view-xjpdg1) - -[Implementation example with lozad.js](https://codesandbox.io/s/js-cloudimage-360-view-examples-8iukcn) - -## Best practices - -- In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server - or storage bucket (S3, Google Cloud, Azure Blob...) reachable over - HTTP or HTTPS by Cloudimage. If you want to upload your master images to - Cloudimage, contact us at - [hello@cloudimage.io](mailto:hello@cloudimage.io). - -## Browser support - -Tested in all modern browsers and IE 11, 10, 9. - -## Filerobot UI Familiy - -- [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive) -- [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive) -- [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive) -- [Image Editor](https://github.com/scaleflex/filerobot-image-editor) -- [Uploader](https://github.com/scaleflex/filerobot-uploader) - -## Contributing! +Before you start using the Cloudimage Responsive plugin, make sure you have the following: + +- **Cloudimage Token**: You'll need a unique Cloudimage token to deliver your images over their CDN. + + **Getting Your Token**: + - Register at the [Cloudimage website](https://cloudimage.io). + - After registration, you'll receive a token that allows you to access their services. + + The token grants you **25GB of image cache** and **25GB of worldwide CDN traffic per month** for free. This is perfect for startups and small projects looking to enhance their website's performance without incurring costs. + + +## 🔰 Contributing + +- **💬 [Join the Discussions](https://github.com/Scaleflex/js-cloudimage-360-view/discussions)**: Share your insights, provide feedback, or ask questions. +- **🐛 [Report Issues](https://github.com/Scaleflex/js-cloudimage-360-view/issues)**: Submit bugs found or log feature requests for the `js-cloudimage-360-view` project. +- **💡 [Submit Pull Requests](https://github.com/Scaleflex/js-cloudimage-360-view/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs. + +
+Contributing Guidelines + +1. **Fork the Repository**: Start by forking the project repository to your github account. +2. **Clone Locally**: Clone the forked repository to your local machine using a git client. + ```sh + git clone https://github.com/Scaleflex/js-cloudimage-360-view + ``` +3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name. + ```sh + git checkout -b new-feature-x + ``` +4. **Make Your Changes**: Develop and test your changes locally. +5. **Commit Your Changes**: Commit with a clear message describing your updates. + ```sh + git commit -m 'Implemented new feature x.' + ``` +6. **Push to github**: Push the changes to your forked repository. + ```sh + git push origin new-feature-x + ``` +7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations. +8. **Review**: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution! +
+ +
+Contributor Graph +
+

+ + + +

+
-All contributions are super welcome! +--- -## License +## 🎗 License JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT) diff --git a/examples/src/index.js b/examples/src/index.js index 8fb56a0..a788b52 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -151,7 +151,6 @@ const config = { filenameX: 'orange-{index}.jpg', amountX: 73, lazyload: true, - hide360Logo: true, speed: 120, pointerZoom: 2, responsive: 'scaleflex', @@ -167,4 +166,5 @@ instance.initAll(); const demoGeneratorInstance = instance.getViewById('demo-generator'); +console.log(demoGeneratorInstance); updateCodeBlock(demoGeneratorInstance.viewerConfig); diff --git a/src/ci360.service.js b/src/ci360.service.js index 93b2529..949d297 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -54,7 +54,7 @@ class CI360Viewer { this.currentZoomScale = 1; this.touchDevice = isTouchDevice(); this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); - + this.onMoveHandler = this.onMoveHandler.bind(this); this.init(this.container, config); } @@ -546,7 +546,6 @@ class CI360Viewer { const newElement = oldElement.cloneNode(true); const innerBox = newElement.querySelector('.cloudimage-360-inner-box'); - newElement.className = newElement.className.replace(' initialized', ''); newElement.removeChild(innerBox); oldElement.parentNode.replaceChild(newElement, oldElement); } @@ -834,7 +833,6 @@ class CI360Viewer { } init(container, config, update) { - console.log(getConfigFromImage(container)); const adaptedConfig = config ? adaptConfig(config) : getConfigFromImage(container); const { diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 7cad297..b0e0491 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -29,7 +29,7 @@ const DEFAULTS_VALUES = { ciToken: null, ciFilters: null, ciTransformation: null, - lazyload: false, + lazyload: true, dragReverse: false, stopAtEdges: false, imageInfo: false, diff --git a/src/hotspots.js b/src/hotspots.js index 1ccb0f2..f92f9c0 100644 --- a/src/hotspots.js +++ b/src/hotspots.js @@ -110,16 +110,16 @@ class Hotspot { } createHotspot(hotspot) { - const { id, content, keepOpen, onclick } = hotspot; + const { id, content, keepOpen, onClick } = hotspot; const hotspotElement = createHotspotElement(id); - if (onclick) { + if (onClick) { hotspotElement.style.cursor = 'pointer'; } hotspotElement.onclick = (event) => { event.stopPropagation(); - onclick?.(event, this.popperInstance, id); + onClick?.(event, this.popperInstance, id); }; if (content) { diff --git a/src/static/css/style.css b/src/static/css/style.css index 74f0811..526fbcc 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -30,7 +30,7 @@ gap: 8px; } -.cloudimage-transition-overlay { +.cloudimage-360-transition-overlay { position: absolute; position: absolute; top: 0; diff --git a/src/utils/container-elements/create-transition-overlay.js b/src/utils/container-elements/create-transition-overlay.js index 9544704..702fa34 100644 --- a/src/utils/container-elements/create-transition-overlay.js +++ b/src/utils/container-elements/create-transition-overlay.js @@ -1,7 +1,7 @@ export const createTransitionOverlay = () => { const transitionOverlay = document.createElement('div'); - transitionOverlay.className = 'cloudimage-transition-overlay'; + transitionOverlay.className = 'cloudimage-360-transition-overlay'; return transitionOverlay; }; From 59cb7b8286ae5131066d199c08a6237b691381af Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 15:25:48 +0300 Subject: [PATCH 24/31] fix Types and declaration --- examples/src/index.js | 1 - examples/src/styles/main.css | 1 - src/ci360.js | 16 ++++++++ src/ci360.service.js | 1 + src/types/ci360.d.ts | 78 +++++++++++++++++++++--------------- 5 files changed, 63 insertions(+), 34 deletions(-) diff --git a/examples/src/index.js b/examples/src/index.js index a788b52..fc00c13 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -166,5 +166,4 @@ instance.initAll(); const demoGeneratorInstance = instance.getViewById('demo-generator'); -console.log(demoGeneratorInstance); updateCodeBlock(demoGeneratorInstance.viewerConfig); diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css index a5b4a1e..71055e6 100644 --- a/examples/src/styles/main.css +++ b/examples/src/styles/main.css @@ -487,7 +487,6 @@ body { background-repeat: no-repeat; background-position-x: calc(100% - 20px); background-position-y: 17.12px; - -webkit-appearance: none; } .demo-usage-wrapper .demo-usage-content .customize { diff --git a/src/ci360.js b/src/ci360.js index 1c6bb86..74f6c85 100644 --- a/src/ci360.js +++ b/src/ci360.js @@ -41,6 +41,22 @@ class CI360 { }); } + destroy(id) { + const view = this.getViewById(id); + if (view) { + view.destroy(); + this.views.delete(id); + } + } + + destroyAll() { + this.views.forEach((view) => { + view.destroy(); + }); + + this.views.clear(); + } + getViewById(id) { return this.views.get(id); } diff --git a/src/ci360.service.js b/src/ci360.service.js index 949d297..4e5602b 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -55,6 +55,7 @@ class CI360Viewer { this.touchDevice = isTouchDevice(); this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); this.onMoveHandler = this.onMoveHandler.bind(this); + this.destroy = this.destroy.bind(this); this.init(this.container, config); } diff --git a/src/types/ci360.d.ts b/src/types/ci360.d.ts index 019f8a7..bc32393 100644 --- a/src/types/ci360.d.ts +++ b/src/types/ci360.d.ts @@ -1,49 +1,63 @@ declare module CI360 { export interface CI360ViewerConfig { - folder?: string; - apiVersion?: string; - filenameX?: string; - filenameY?: string; - imageListX?: string | null; - imageListY?: string | null; - indexZeroBase?: number; - amountX?: number; - amountY?: number; - draggable?: boolean; - swipeable?: boolean; - keys?: boolean; - keysReverse?: boolean; - bottomCircleOffset?: number; - autoplay?: boolean; - autoplayBehavior?: string; - playOnce?: boolean; - speed?: number; - autoplayReverse?: boolean; - fullscreen?: boolean; - magnifier?: number | null; - ciToken?: string | null; - ciFilters?: string | null; - ciTransformation?: string | null; - lazyload?: boolean; - dragSpeed?: number; - stopAtEdges?: boolean; - pointerZoom?: number; - imageInfo?: string; - initialIconShown?: boolean; - bottomCircleHidden?: boolean; + folder?: string; // Default: '/' + apiVersion?: string; // Default: 'v7' + filenameX?: string; // Default: 'image-{index}.jpg' + filenameY?: string | null; // Default: null + imageListX?: string | null; // Default: null + imageListY?: string | null; // Default: null + indexZeroBase?: number; // Default: 0 + amountX?: number; // Default: 0 + amountY?: number; // Default: 0 + draggable?: boolean; // Default: true + swipeable?: boolean; // Default: true + keys?: boolean; // Default: false + keysReverse?: boolean; // Default: false + bottomCircleOffset?: number; // Default: 5 + autoplay?: boolean; // Default: false + autoplayBehavior?: string; // Default: AUTOPLAY_BEHAVIOR.SPIN_X + playOnce?: boolean; // Default: false + speed?: number; // Default: 80 + autoplayReverse?: boolean; // Default: false + fullscreen?: boolean; // Default: false + magnifier?: number | null; // Default: null + ciToken?: string | null; // Default: null + ciFilters?: string | null; // Default: null + ciTransformation?: string | null; // Default: null + lazyload?: boolean; // Default: true + dragSpeed?: number; // Default: 150 + stopAtEdges?: boolean; // Default: false + pointerZoom?: number; // Default: 0 + imageInfo?: boolean; // Changed from string to boolean; Default: false + initialIconShown?: boolean; // Default: true + bottomCircleHidden?: boolean; // Added to reflect your requirements; Default: true + hotspots?: any; // Default: null (type adjusted as needed) } // Define the CI360Viewer class with the config type and constructor export default class CI360Viewer { constructor(container: HTMLElement | string, config?: CI360ViewerConfig, fullscreen?: boolean); + destroy(): void; + update(config: CI360ViewerConfig): void; + viewerConfig: CI360ViewerConfig; } // Define the CI360 class export class CI360 { + views: Map; instances: CI360Viewer[]; initAll: (className?: string) => void; getInstances: () => CI360Viewer[]; - init: (container: HTMLElement | string, config?: CI360ViewerConfig, fullscreen?: boolean) => CI360Viewer; + init: ( + container: HTMLElement | string, + config?: CI360ViewerConfig, + fullscreen?: boolean + ) => CI360Viewer | undefined; + getViewById: (id: string) => CI360Viewer | undefined; + getViews: () => CI360Viewer[]; + updateView: (id: string, config: CI360ViewerConfig) => CI360Viewer | undefined; + destroy: (id: string) => void; + destroyAll: () => void; constructor(); } } From 5c2d4066b3b1f06dd99eb4a8a6675e2bd75115bb Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 18:21:14 +0300 Subject: [PATCH 25/31] fix: Build and demo --- examples/src/index.html | 3 ++- examples/src/index.js | 5 ++--- src/ci360.service.js | 3 ++- src/index.js | 2 +- .../container-elements/create-close-icon.js | 2 +- .../create-fullscreen-icon.js | 2 +- .../create-magnifier-icon.js | 2 +- vite.config.js | 19 +++++++++++++++++++ 8 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 vite.config.js diff --git a/examples/src/index.html b/examples/src/index.html index 2587805..0989e7e 100644 --- a/examples/src/index.html +++ b/examples/src/index.html @@ -14,6 +14,7 @@ href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Rubik:wght@400;500;600&display=swap" rel="stylesheet" /> + JS-Cloudimage-360-view @@ -691,6 +692,6 @@

Filerobot UI Family

- + diff --git a/examples/src/index.js b/examples/src/index.js index fc00c13..bee5acd 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -1,7 +1,6 @@ -import '../../src'; import './controllers.css'; -import './styles/main.css'; -import CI360 from '../../src/ci360'; +import CI360 from '../../src'; + import { EARBUDS_PLUGIN, GURKHA_SUV_HOTSPOTS_CONFIG, diff --git a/src/ci360.service.js b/src/ci360.service.js index 4e5602b..36033ce 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -37,6 +37,7 @@ import { isTouchDevice, } from './utils'; +import CanvasWorker from './canvas.worker.js?worker&inline'; import Hotspot from './hotspots'; class CI360Viewer { @@ -53,7 +54,7 @@ class CI360Viewer { this.isReady = false; this.currentZoomScale = 1; this.touchDevice = isTouchDevice(); - this.canvasWorker = new Worker(new URL('canvas.worker.js', import.meta.url)); + this.canvasWorker = new CanvasWorker(); this.onMoveHandler = this.onMoveHandler.bind(this); this.destroy = this.destroy.bind(this); this.init(this.container, config); diff --git a/src/index.js b/src/index.js index a379db5..54d6789 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,3 @@ import CI360 from './ci360'; - +window.CI360 = CI360; export default CI360; diff --git a/src/utils/container-elements/create-close-icon.js b/src/utils/container-elements/create-close-icon.js index 59705c6..69954f3 100644 --- a/src/utils/container-elements/create-close-icon.js +++ b/src/utils/container-elements/create-close-icon.js @@ -5,7 +5,7 @@ export const createCloseIcon = () => { close.className = 'cloudimage-360-button cloudimage-360-close-icon'; - close.innerHTML = closeIcon; + close.innerHTML = `close icon`; return close; }; diff --git a/src/utils/container-elements/create-fullscreen-icon.js b/src/utils/container-elements/create-fullscreen-icon.js index 5bf47ea..4891457 100644 --- a/src/utils/container-elements/create-fullscreen-icon.js +++ b/src/utils/container-elements/create-fullscreen-icon.js @@ -4,7 +4,7 @@ export const createFullscreenIcon = () => { const fullscreenIcon = document.createElement('div'); fullscreenIcon.className = 'cloudimage-360-button cloudimage-360-fullscreen-button'; - fullscreenIcon.innerHTML = FullscreenIcon; + fullscreenIcon.innerHTML = `fullscreen icon`; return fullscreenIcon; }; diff --git a/src/utils/container-elements/create-magnifier-icon.js b/src/utils/container-elements/create-magnifier-icon.js index 7921840..c1b95a1 100644 --- a/src/utils/container-elements/create-magnifier-icon.js +++ b/src/utils/container-elements/create-magnifier-icon.js @@ -5,7 +5,7 @@ export const createMagnifierIcon = () => { magnifier.className = 'cloudimage-360-button cloudimage-360-magnifier-button'; - magnifier.innerHTML = MagnifierIcon; + magnifier.innerHTML = `magnifier icon`; return magnifier; }; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..6954ea6 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,19 @@ +/* eslint-disable no-undef */ +import { defineConfig } from 'vite'; +import { resolve } from 'path'; +import dts from 'vite-plugin-dts'; +import { libInjectCss } from 'vite-plugin-lib-inject-css'; + +export default defineConfig({ + plugins: [libInjectCss(), dts({ include: ['lib'] })], + build: { + copyPublicDir: false, + lib: { entry: resolve(__dirname, 'src/index.js'), formats: ['es'] }, + rollupOptions: { + output: { + assetFileNames: '[name][extname]', + entryFileNames: '[name].js', + }, + }, + }, +}); From 645fbc2bb0e82c554d3787e77fc63029a69a91fa Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 19:29:32 +0300 Subject: [PATCH 26/31] chore: Added changelog --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++ README.md | 7 ++++++ build/js-cloudimage-360-view.min.js | 2 -- package.json | 11 ++++++---- src/index.js | 2 ++ 5 files changed, 49 insertions(+), 6 deletions(-) delete mode 100644 build/js-cloudimage-360-view.min.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 03ad4b6..8ef06e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,39 @@ Types of changes: --- +## 4.0.0 - 2024-10-29 + +### Breaking Changes + +This release introduces several breaking changes, with deprecated properties and improved functionalities for performance and configurability. + +### Deprecated + +The following properties and functionalities have been deprecated: + +- **Configuration Properties**: `boxShadow`, `lazySelector`, `hide360Logo`, `logoSrc`, `ratio`, `imageInfo`, and `requestResponsiveImages`. +- **Hotspot Properties**: `title`, `url`, `newTab`, `description`, `moreDetailsUrl`, `moreDetailsTitle`, `popupSelector`, `open`, `arrow`, `offset`, `placement`. +- **Control Buttons**: Control buttons have been removed from this version. + +### Added + +- **360 Canvas Offscreen**: The 360 canvas now operates offscreen, significantly improving performance. +- **Configurable Hotspots**: Hotspots now offer greater customization options. +- **Instance Selection by ID**: Instances can now be selected using their IDs. +- **Lazy Initialization**: Instances can be initialized programmatically, allowing for delayed loading as needed. +- **Independent Y-Axis Spin**: The Y-axis can now spin independently of the X-axis. + +### Fixed + +- **Lazy Loading**: Enhanced lazy loading functionality. +- **Pointer Zoom**: Improved zoom control with pointer interactions. +- **Drag Speed**: Adjusted drag speed for smoother user control. +- **Autoplay Speed**: Optimized autoplay speed settings. +- **Y-Axis Spin Behavior**: Refined Y-axis spin behavior for smoother operation. +- **Image Loading Speed**: Faster image loading, now performed asynchronously. +- **Magnifier**: Improved the quality of the magnified image. + + ## 3.2.0 - 2023-09-25 ### Added diff --git a/README.md b/README.md index e39e96b..59448c0 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,13 @@ Then, import it in your JavaScript file: import CloudImage360 from 'js-cloudimage-360-view'; ``` +OR + +```javascript +window.CI360 +``` + + Choose the method that best suits your project setup, and refer to the documentation for configuration options and usage examples. ### 🛠️ Usage diff --git a/build/js-cloudimage-360-view.min.js b/build/js-cloudimage-360-view.min.js deleted file mode 100644 index c2769d4..0000000 --- a/build/js-cloudimage-360-view.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see js-cloudimage-360-view.min.js.LICENSE.txt */ -(()=>{var t={5861:(t,e,n)=>{var i=n(3921);t.exports=i},3740:(t,e,n)=>{var i=n(5823);t.exports=i},909:(t,e,n)=>{var i=n(6575);t.exports=i},5354:(t,e,n)=>{n(7327);var i=n(2649);t.exports=i("Array","filter")},817:(t,e,n)=>{n(9554);var i=n(2649);t.exports=i("Array","forEach")},3462:(t,e,n)=>{n(6699);var i=n(2649);t.exports=i("Array","includes")},6139:(t,e,n)=>{n(7037)},7528:(t,e,n)=>{n(4978)},4577:(t,e,n)=>{n(9059)},7037:(t,e,n)=>{var i=n(5861);t.exports=i},4978:(t,e,n)=>{var i=n(3740);t.exports=i},9059:(t,e,n)=>{var i=n(909);t.exports=i},9662:(t,e,n)=>{var i=n(614),o=n(6330),r=TypeError;t.exports=function(t){if(i(t))return t;throw r(o(t)+" is not a function")}},1223:(t,e,n)=>{var i=n(5112),o=n(30),r=n(3070).f,a=i("unscopables"),s=Array.prototype;null==s[a]&&r(s,a,{configurable:!0,value:o(null)}),t.exports=function(t){s[a][t]=!0}},9670:(t,e,n)=>{var i=n(111),o=String,r=TypeError;t.exports=function(t){if(i(t))return t;throw r(o(t)+" is not an object")}},8533:(t,e,n)=>{"use strict";var i=n(2092).forEach,o=n(9341)("forEach");t.exports=o?[].forEach:function(t){return i(this,t,arguments.length>1?arguments[1]:void 0)}},1318:(t,e,n)=>{var i=n(5656),o=n(1400),r=n(6244),a=function(t){return function(e,n,a){var s,c=i(e),u=r(c),l=o(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},2092:(t,e,n)=>{var i=n(9974),o=n(1702),r=n(8361),a=n(7908),s=n(6244),c=n(5417),u=o([].push),l=function(t){var e=1==t,n=2==t,o=3==t,l=4==t,d=6==t,h=7==t,f=5==t||d;return function(p,m,v,g){for(var y,b,w=a(p),x=r(w),I=i(m,v),O=s(x),k=0,E=g||c,S=e?E(p,O):n||h?E(p,0):void 0;O>k;k++)if((f||k in x)&&(b=I(y=x[k],k,w),t))if(e)S[k]=b;else if(b)switch(t){case 3:return!0;case 5:return y;case 6:return k;case 2:u(S,y)}else switch(t){case 4:return!1;case 7:u(S,y)}return d?-1:o||l?l:S}};t.exports={forEach:l(0),map:l(1),filter:l(2),some:l(3),every:l(4),find:l(5),findIndex:l(6),filterReject:l(7)}},1194:(t,e,n)=>{var i=n(7293),o=n(5112),r=n(7392),a=o("species");t.exports=function(t){return r>=51||!i((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},9341:(t,e,n)=>{"use strict";var i=n(7293);t.exports=function(t,e){var n=[][t];return!!n&&i((function(){n.call(null,e||function(){return 1},1)}))}},7475:(t,e,n)=>{var i=n(3157),o=n(4411),r=n(111),a=n(5112)("species"),s=Array;t.exports=function(t){var e;return i(t)&&(e=t.constructor,(o(e)&&(e===s||i(e.prototype))||r(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?s:e}},5417:(t,e,n)=>{var i=n(7475);t.exports=function(t,e){return new(i(t))(0===e?0:e)}},4326:(t,e,n)=>{var i=n(1702),o=i({}.toString),r=i("".slice);t.exports=function(t){return r(o(t),8,-1)}},648:(t,e,n)=>{var i=n(1694),o=n(614),r=n(4326),a=n(5112)("toStringTag"),s=Object,c="Arguments"==r(function(){return arguments}());t.exports=i?r:function(t){var e,n,i;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=s(t),a))?n:c?r(e):"Object"==(i=r(e))&&o(e.callee)?"Arguments":i}},9920:(t,e,n)=>{var i=n(2597),o=n(3887),r=n(1236),a=n(3070);t.exports=function(t,e,n){for(var s=o(e),c=a.f,u=r.f,l=0;l{var i=n(9781),o=n(3070),r=n(9114);t.exports=i?function(t,e,n){return o.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},9114:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},8052:(t,e,n)=>{var i=n(614),o=n(3070),r=n(6339),a=n(3072);t.exports=function(t,e,n,s){s||(s={});var c=s.enumerable,u=void 0!==s.name?s.name:e;if(i(n)&&r(n,u,s),s.global)c?t[e]=n:a(e,n);else{try{s.unsafe?t[e]&&(c=!0):delete t[e]}catch(t){}c?t[e]=n:o.f(t,e,{value:n,enumerable:!1,configurable:!s.nonConfigurable,writable:!s.nonWritable})}return t}},3072:(t,e,n)=>{var i=n(7854),o=Object.defineProperty;t.exports=function(t,e){try{o(i,t,{value:e,configurable:!0,writable:!0})}catch(n){i[t]=e}return e}},9781:(t,e,n)=>{var i=n(7293);t.exports=!i((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},4154:t=>{var e="object"==typeof document&&document.all,n=void 0===e&&void 0!==e;t.exports={all:e,IS_HTMLDDA:n}},317:(t,e,n)=>{var i=n(7854),o=n(111),r=i.document,a=o(r)&&o(r.createElement);t.exports=function(t){return a?r.createElement(t):{}}},8113:t=>{t.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},7392:(t,e,n)=>{var i,o,r=n(7854),a=n(8113),s=r.process,c=r.Deno,u=s&&s.versions||c&&c.version,l=u&&u.v8;l&&(o=(i=l.split("."))[0]>0&&i[0]<4?1:+(i[0]+i[1])),!o&&a&&(!(i=a.match(/Edge\/(\d+)/))||i[1]>=74)&&(i=a.match(/Chrome\/(\d+)/))&&(o=+i[1]),t.exports=o},2649:(t,e,n)=>{var i=n(7854),o=n(1702);t.exports=function(t,e){return o(i[t].prototype[e])}},748:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},2109:(t,e,n)=>{var i=n(7854),o=n(1236).f,r=n(8880),a=n(8052),s=n(3072),c=n(9920),u=n(4705);t.exports=function(t,e){var n,l,d,h,f,p=t.target,m=t.global,v=t.stat;if(n=m?i:v?i[p]||s(p,{}):(i[p]||{}).prototype)for(l in e){if(h=e[l],d=t.dontCallGetSet?(f=o(n,l))&&f.value:n[l],!u(m?l:p+(v?".":"#")+l,t.forced)&&void 0!==d){if(typeof h==typeof d)continue;c(h,d)}(t.sham||d&&d.sham)&&r(h,"sham",!0),a(n,l,h,t)}}},7293:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},9974:(t,e,n)=>{var i=n(1470),o=n(9662),r=n(4374),a=i(i.bind);t.exports=function(t,e){return o(t),void 0===e?t:r?a(t,e):function(){return t.apply(e,arguments)}}},4374:(t,e,n)=>{var i=n(7293);t.exports=!i((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},6916:(t,e,n)=>{var i=n(4374),o=Function.prototype.call;t.exports=i?o.bind(o):function(){return o.apply(o,arguments)}},6530:(t,e,n)=>{var i=n(9781),o=n(2597),r=Function.prototype,a=i&&Object.getOwnPropertyDescriptor,s=o(r,"name"),c=s&&"something"===function(){}.name,u=s&&(!i||i&&a(r,"name").configurable);t.exports={EXISTS:s,PROPER:c,CONFIGURABLE:u}},1470:(t,e,n)=>{var i=n(4326),o=n(1702);t.exports=function(t){if("Function"===i(t))return o(t)}},1702:(t,e,n)=>{var i=n(4374),o=Function.prototype,r=o.call,a=i&&o.bind.bind(r,r);t.exports=i?a:function(t){return function(){return r.apply(t,arguments)}}},5005:(t,e,n)=>{var i=n(7854),o=n(614);t.exports=function(t,e){return arguments.length<2?(n=i[t],o(n)?n:void 0):i[t]&&i[t][e];var n}},8173:(t,e,n)=>{var i=n(9662),o=n(8554);t.exports=function(t,e){var n=t[e];return o(n)?void 0:i(n)}},7854:(t,e,n)=>{var i=function(t){return t&&t.Math==Math&&t};t.exports=i("object"==typeof globalThis&&globalThis)||i("object"==typeof window&&window)||i("object"==typeof self&&self)||i("object"==typeof n.g&&n.g)||function(){return this}()||Function("return this")()},2597:(t,e,n)=>{var i=n(1702),o=n(7908),r=i({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return r(o(t),e)}},3501:t=>{t.exports={}},490:(t,e,n)=>{var i=n(5005);t.exports=i("document","documentElement")},4664:(t,e,n)=>{var i=n(9781),o=n(7293),r=n(317);t.exports=!i&&!o((function(){return 7!=Object.defineProperty(r("div"),"a",{get:function(){return 7}}).a}))},8361:(t,e,n)=>{var i=n(1702),o=n(7293),r=n(4326),a=Object,s=i("".split);t.exports=o((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"==r(t)?s(t,""):a(t)}:a},2788:(t,e,n)=>{var i=n(1702),o=n(614),r=n(5465),a=i(Function.toString);o(r.inspectSource)||(r.inspectSource=function(t){return a(t)}),t.exports=r.inspectSource},9909:(t,e,n)=>{var i,o,r,a=n(4811),s=n(7854),c=n(111),u=n(8880),l=n(2597),d=n(5465),h=n(6200),f=n(3501),p="Object already initialized",m=s.TypeError,v=s.WeakMap;if(a||d.state){var g=d.state||(d.state=new v);g.get=g.get,g.has=g.has,g.set=g.set,i=function(t,e){if(g.has(t))throw m(p);return e.facade=t,g.set(t,e),e},o=function(t){return g.get(t)||{}},r=function(t){return g.has(t)}}else{var y=h("state");f[y]=!0,i=function(t,e){if(l(t,y))throw m(p);return e.facade=t,u(t,y,e),e},o=function(t){return l(t,y)?t[y]:{}},r=function(t){return l(t,y)}}t.exports={set:i,get:o,has:r,enforce:function(t){return r(t)?o(t):i(t,{})},getterFor:function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw m("Incompatible receiver, "+t+" required");return n}}}},3157:(t,e,n)=>{var i=n(4326);t.exports=Array.isArray||function(t){return"Array"==i(t)}},614:(t,e,n)=>{var i=n(4154),o=i.all;t.exports=i.IS_HTMLDDA?function(t){return"function"==typeof t||t===o}:function(t){return"function"==typeof t}},4411:(t,e,n)=>{var i=n(1702),o=n(7293),r=n(614),a=n(648),s=n(5005),c=n(2788),u=function(){},l=[],d=s("Reflect","construct"),h=/^\s*(?:class|function)\b/,f=i(h.exec),p=!h.exec(u),m=function(t){if(!r(t))return!1;try{return d(u,l,t),!0}catch(t){return!1}},v=function(t){if(!r(t))return!1;switch(a(t)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return p||!!f(h,c(t))}catch(t){return!0}};v.sham=!0,t.exports=!d||o((function(){var t;return m(m.call)||!m(Object)||!m((function(){t=!0}))||t}))?v:m},4705:(t,e,n)=>{var i=n(7293),o=n(614),r=/#|\.prototype\./,a=function(t,e){var n=c[s(t)];return n==l||n!=u&&(o(e)?i(e):!!e)},s=a.normalize=function(t){return String(t).replace(r,".").toLowerCase()},c=a.data={},u=a.NATIVE="N",l=a.POLYFILL="P";t.exports=a},8554:t=>{t.exports=function(t){return null==t}},111:(t,e,n)=>{var i=n(614),o=n(4154),r=o.all;t.exports=o.IS_HTMLDDA?function(t){return"object"==typeof t?null!==t:i(t)||t===r}:function(t){return"object"==typeof t?null!==t:i(t)}},1913:t=>{t.exports=!1},2190:(t,e,n)=>{var i=n(5005),o=n(614),r=n(7976),a=n(3307),s=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=i("Symbol");return o(e)&&r(e.prototype,s(t))}},6244:(t,e,n)=>{var i=n(7466);t.exports=function(t){return i(t.length)}},6339:(t,e,n)=>{var i=n(1702),o=n(7293),r=n(614),a=n(2597),s=n(9781),c=n(6530).CONFIGURABLE,u=n(2788),l=n(9909),d=l.enforce,h=l.get,f=String,p=Object.defineProperty,m=i("".slice),v=i("".replace),g=i([].join),y=s&&!o((function(){return 8!==p((function(){}),"length",{value:8}).length})),b=String(String).split("String"),w=t.exports=function(t,e,n){"Symbol("===m(f(e),0,7)&&(e="["+v(f(e),/^Symbol\(([^)]*)\)/,"$1")+"]"),n&&n.getter&&(e="get "+e),n&&n.setter&&(e="set "+e),(!a(t,"name")||c&&t.name!==e)&&(s?p(t,"name",{value:e,configurable:!0}):t.name=e),y&&n&&a(n,"arity")&&t.length!==n.arity&&p(t,"length",{value:n.arity});try{n&&a(n,"constructor")&&n.constructor?s&&p(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var i=d(t);return a(i,"source")||(i.source=g(b,"string"==typeof e?e:"")),t};Function.prototype.toString=w((function(){return r(this)&&h(this).source||u(this)}),"toString")},4758:t=>{var e=Math.ceil,n=Math.floor;t.exports=Math.trunc||function(t){var i=+t;return(i>0?n:e)(i)}},30:(t,e,n)=>{var i,o=n(9670),r=n(6048),a=n(748),s=n(3501),c=n(490),u=n(317),l=n(6200),d="prototype",h="script",f=l("IE_PROTO"),p=function(){},m=function(t){return"<"+h+">"+t+""},v=function(t){t.write(m("")),t.close();var e=t.parentWindow.Object;return t=null,e},g=function(){try{i=new ActiveXObject("htmlfile")}catch(t){}var t,e,n;g="undefined"!=typeof document?document.domain&&i?v(i):(e=u("iframe"),n="java"+h+":",e.style.display="none",c.appendChild(e),e.src=String(n),(t=e.contentWindow.document).open(),t.write(m("document.F=Object")),t.close(),t.F):v(i);for(var o=a.length;o--;)delete g[d][a[o]];return g()};s[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p[d]=o(t),n=new p,p[d]=null,n[f]=t):n=g(),void 0===e?n:r.f(n,e)}},6048:(t,e,n)=>{var i=n(9781),o=n(3353),r=n(3070),a=n(9670),s=n(5656),c=n(1956);e.f=i&&!o?Object.defineProperties:function(t,e){a(t);for(var n,i=s(e),o=c(e),u=o.length,l=0;u>l;)r.f(t,n=o[l++],i[n]);return t}},3070:(t,e,n)=>{var i=n(9781),o=n(4664),r=n(3353),a=n(9670),s=n(4948),c=TypeError,u=Object.defineProperty,l=Object.getOwnPropertyDescriptor,d="enumerable",h="configurable",f="writable";e.f=i?r?function(t,e,n){if(a(t),e=s(e),a(n),"function"==typeof t&&"prototype"===e&&"value"in n&&f in n&&!n[f]){var i=l(t,e);i&&i[f]&&(t[e]=n.value,n={configurable:h in n?n[h]:i[h],enumerable:d in n?n[d]:i[d],writable:!1})}return u(t,e,n)}:u:function(t,e,n){if(a(t),e=s(e),a(n),o)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw c("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},1236:(t,e,n)=>{var i=n(9781),o=n(6916),r=n(5296),a=n(9114),s=n(5656),c=n(4948),u=n(2597),l=n(4664),d=Object.getOwnPropertyDescriptor;e.f=i?d:function(t,e){if(t=s(t),e=c(e),l)try{return d(t,e)}catch(t){}if(u(t,e))return a(!o(r.f,t,e),t[e])}},8006:(t,e,n)=>{var i=n(6324),o=n(748).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return i(t,o)}},5181:(t,e)=>{e.f=Object.getOwnPropertySymbols},7976:(t,e,n)=>{var i=n(1702);t.exports=i({}.isPrototypeOf)},6324:(t,e,n)=>{var i=n(1702),o=n(2597),r=n(5656),a=n(1318).indexOf,s=n(3501),c=i([].push);t.exports=function(t,e){var n,i=r(t),u=0,l=[];for(n in i)!o(s,n)&&o(i,n)&&c(l,n);for(;e.length>u;)o(i,n=e[u++])&&(~a(l,n)||c(l,n));return l}},1956:(t,e,n)=>{var i=n(6324),o=n(748);t.exports=Object.keys||function(t){return i(t,o)}},5296:(t,e)=>{"use strict";var n={}.propertyIsEnumerable,i=Object.getOwnPropertyDescriptor,o=i&&!n.call({1:2},1);e.f=o?function(t){var e=i(this,t);return!!e&&e.enumerable}:n},2140:(t,e,n)=>{var i=n(6916),o=n(614),r=n(111),a=TypeError;t.exports=function(t,e){var n,s;if("string"===e&&o(n=t.toString)&&!r(s=i(n,t)))return s;if(o(n=t.valueOf)&&!r(s=i(n,t)))return s;if("string"!==e&&o(n=t.toString)&&!r(s=i(n,t)))return s;throw a("Can't convert object to primitive value")}},3887:(t,e,n)=>{var i=n(5005),o=n(1702),r=n(8006),a=n(5181),s=n(9670),c=o([].concat);t.exports=i("Reflect","ownKeys")||function(t){var e=r.f(s(t)),n=a.f;return n?c(e,n(t)):e}},4488:(t,e,n)=>{var i=n(8554),o=TypeError;t.exports=function(t){if(i(t))throw o("Can't call method on "+t);return t}},6200:(t,e,n)=>{var i=n(2309),o=n(9711),r=i("keys");t.exports=function(t){return r[t]||(r[t]=o(t))}},5465:(t,e,n)=>{var i=n(7854),o=n(3072),r="__core-js_shared__",a=i[r]||o(r,{});t.exports=a},2309:(t,e,n)=>{var i=n(1913),o=n(5465);(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.30.0",mode:i?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.30.0/LICENSE",source:"https://github.com/zloirock/core-js"})},6293:(t,e,n)=>{var i=n(7392),o=n(7293);t.exports=!!Object.getOwnPropertySymbols&&!o((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&i&&i<41}))},1400:(t,e,n)=>{var i=n(9303),o=Math.max,r=Math.min;t.exports=function(t,e){var n=i(t);return n<0?o(n+e,0):r(n,e)}},5656:(t,e,n)=>{var i=n(8361),o=n(4488);t.exports=function(t){return i(o(t))}},9303:(t,e,n)=>{var i=n(4758);t.exports=function(t){var e=+t;return e!=e||0===e?0:i(e)}},7466:(t,e,n)=>{var i=n(9303),o=Math.min;t.exports=function(t){return t>0?o(i(t),9007199254740991):0}},7908:(t,e,n)=>{var i=n(4488),o=Object;t.exports=function(t){return o(i(t))}},7593:(t,e,n)=>{var i=n(6916),o=n(111),r=n(2190),a=n(8173),s=n(2140),c=n(5112),u=TypeError,l=c("toPrimitive");t.exports=function(t,e){if(!o(t)||r(t))return t;var n,c=a(t,l);if(c){if(void 0===e&&(e="default"),n=i(c,t,e),!o(n)||r(n))return n;throw u("Can't convert object to primitive value")}return void 0===e&&(e="number"),s(t,e)}},4948:(t,e,n)=>{var i=n(7593),o=n(2190);t.exports=function(t){var e=i(t,"string");return o(e)?e:e+""}},1694:(t,e,n)=>{var i={};i[n(5112)("toStringTag")]="z",t.exports="[object z]"===String(i)},6330:t=>{var e=String;t.exports=function(t){try{return e(t)}catch(t){return"Object"}}},9711:(t,e,n)=>{var i=n(1702),o=0,r=Math.random(),a=i(1..toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++o+r,36)}},3307:(t,e,n)=>{var i=n(6293);t.exports=i&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},3353:(t,e,n)=>{var i=n(9781),o=n(7293);t.exports=i&&o((function(){return 42!=Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},4811:(t,e,n)=>{var i=n(7854),o=n(614),r=i.WeakMap;t.exports=o(r)&&/native code/.test(String(r))},5112:(t,e,n)=>{var i=n(7854),o=n(2309),r=n(2597),a=n(9711),s=n(6293),c=n(3307),u=i.Symbol,l=o("wks"),d=c?u.for||u:u&&u.withoutSetter||a;t.exports=function(t){return r(l,t)||(l[t]=s&&r(u,t)?u[t]:d("Symbol."+t)),l[t]}},7327:(t,e,n)=>{"use strict";var i=n(2109),o=n(2092).filter;i({target:"Array",proto:!0,forced:!n(1194)("filter")},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},9554:(t,e,n)=>{"use strict";var i=n(2109),o=n(8533);i({target:"Array",proto:!0,forced:[].forEach!=o},{forEach:o})},6699:(t,e,n)=>{"use strict";var i=n(2109),o=n(1318).includes,r=n(7293),a=n(1223);i({target:"Array",proto:!0,forced:r((function(){return!Array(1).includes()}))},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),a("includes")},3921:(t,e,n)=>{var i=n(5354);t.exports=i},5823:(t,e,n)=>{var i=n(817);t.exports=i},6575:(t,e,n)=>{var i=n(3462);t.exports=i},850:(t,e,n)=>{(t.exports=n(3645)(!1)).push([t.id,".cloudimage-360-hotspot-link-icon {\n width: 42px;\n height: 42px;\n background: rgba(12, 109, 199, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n box-sizing: border-box;\n transition: opacity 600ms ease-in-out;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-link-icon::before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg');\n background-color: #0C6DC7;\n background-repeat: no-repeat;\n background-size: 9px;\n background-position: center;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);\n border-radius: 50%;\n\tanimation: pulse 2s infinite;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-custom-icon {\n width: 42px;\n height: 42px;\n background: #76AD0133;\n border: 1px solid #FFFFFF33;\n border-radius: 50%;\n box-sizing: border-box;\n transition: opacity 300ms ease-in-out;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-custom-icon::before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg');\n background-color: #76AD01;\n background-repeat: no-repeat;\n background-size: 9px;\n background-position: center;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);\n border-radius: 50%;\n\tanimation: pulse 2s infinite;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-popup {\n visibility: hidden;\n opacity: 0;\n background-color: #FFFFFF;\n padding: 6px;\n border-radius: 2px;\n box-shadow: 0px 4px 4px 0px #00000040;\n z-index: 999;\n}\n\n.cloudimage-360-hotspot-popup[data-show] {\n visibility: visible;\n opacity: 1;\n}\n\n.cloudimage-360-popup-arrow,\n.cloudimage-360-popup-arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n cursor: 'auto';\n}\n\n.cloudimage-360-popup-arrow {\n visibility: hidden;\n}\n\n.cloudimage-360-popup-arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='top']\n > .cloudimage-360-popup-arrow {\n bottom: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='bottom']\n > .cloudimage-360-popup-arrow {\n top: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='left']\n > .cloudimage-360-popup-arrow {\n right: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='right']\n > .cloudimage-360-popup-arrow {\n left: -4px;\n}\n\n.cloudimage-360-modal-wrapper {\n max-width: 222px;\n}\n\n.cloudimage-360-images-carousel-wrapper {\n margin: 0 auto;\n}\n\n.cloudimage-360-images-carousel {\n background-color: #f5f4f4;\n border-radius: 2px;\n}\n\n.cloudimage-360-images-carousel .cloudimage-360-carousel-image {\n display: none;\n object-fit: contain;\n min-height: 187px;\n max-width: 100%;\n max-height: 100%;\n}\n\n.cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image {\n display: block;\n animation-name: fade-active-image;\n animation-duration: 1.5s;\n}\n\n.cloudimage-360-carousel-dots {\n display: flex;\n column-gap: 6px;\n justify-content: center;\n flex-wrap: wrap;\n margin: 5px auto;\n row-gap: 3px;\n padding: 0 6px;\n width: 50%;\n}\n\n.cloudimage-360-carousel-dot {\n width: 6px;\n height: 6px;\n background-color: #C9D0DE;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.6s ease;\n border: 0;\n padding: 0;\n}\n\n.cloudimage-360-carousel-dot.active-dot {\n background-color: #76AD01;\n}\n\n.cloudimage-360-carousel-dot:focus,\n.cloudimage-360-carousel-dot:focus-visible {\n border: 0;\n outline: 0;\n}\n\n.cloudimage-360-modal-title {\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n margin: 4px 0;\n}\n\n.cloudimage-360-modal-description {\n font-size: 10px;\n font-weight: 400;\n line-height: 16px;\n margin: 4px 0;\n}\n\n.cloudimage-360-modal-more-details {\n color: #76AD01;\n background-color: #ECFAE6;\n font-size: 10px;\n line-height: 16px;\n font-weight: 400;\n padding: 4px 8px;\n transition: background-color 200ms ease-in-out;\n border-radius: 2px;\n text-decoration: none;\n}\n\n.cloudimage-360-modal-more-details:hover {\n color: #76AD01;\n background-color: #e1f5d8;\n}\n\n@keyframes pulse {\n\t0% {\n\t\tbox-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7);\n\t}\n\n\t70% {\n\t\tbox-shadow: 0 0 0 10px rgba(99, 99, 99, 0);\n\t}\n\n\t100% {\n\t\tbox-shadow: 0 0 0 0 rgba(99, 99, 99, 0);\n\t}\n}\n\n@keyframes fade-active-image {\n from { opacity: 0.7 }\n to { opacity: 1 }\n}",""])},1860:(t,e,n)=>{(t.exports=n(3645)(!1)).push([t.id,".cloudimage-360-icons-container {\n position: absolute;\n display: flex;\n top: 5px;\n right: 5px;\n width: 30px;\n height: 95%;\n flex-direction: column;\n align-items: center;\n z-index: 101;\n}\n\n.cloudimage-360-magnifier-icon {\n width: 25px;\n height: 25px;\n margin-bottom: 5px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-fullscreen-icon {\n width: 25px;\n height: 25px;\n margin-bottom: 5px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-reset-zoom-icon {\n display: none;\n width: 30px;\n height: 30px;\n margin-top: auto;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-close-fullscreen-icon {\n width: 25px;\n height: 25px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-loader {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n width: 0%;\n height: 8px;\n background-color: rgb(165, 175, 184);\n z-index: 100;\n}\n\n.cloudimage-360-box-shadow {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 99;\n}\n\n.cloudimage-360-view-360-icon {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100px;\n height: 100px;\n margin: auto;\n background-color: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;\n transition: 0.5s all;\n color: rgb(80, 80, 80);\n text-align: center;\n line-height: 100px;\n z-index: 2;\n}\n\n.cloudimage-360-view-360-circle {\n position: absolute;\n left: 0;\n right: 0;\n width: 80%;\n height: auto;\n margin: auto;\n pointer-events: none;\n user-select: none;\n transition: 0.5s all;\n z-index: 2;\n}\n\n.cloudimage-360-fullscreen-modal {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n z-index: 999;\n background-color: #FFF;\n}\n\n.cloudimage-360-img-magnifier-glass {\n background-color: #FFF;\n background-repeat: no-repeat;\n position: absolute;\n border: 3px solid #000;\n border-radius: 50%;\n cursor: wait;\n line-height: 200px;\n text-align: center;\n z-index: 1000;\n width: 250px;\n height: 250px;\n top: -75px;\n right: -85px;\n}\n\n.cloudimage-360 .cloudimage-360-left,\n.cloudimage-360 .cloudimage-360-right {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-left:focus,\n.cloudimage-360 .cloudimage-360-right:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-left {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n left: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-right {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n right: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-left:before,\n.cloudimage-360 .cloudimage-360-right:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-left:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-right:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-left.not-active,\n.cloudimage-360 .cloudimage-360-right.not-active {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n\n.cloudimage-360 .cloudimage-360-top,\n.cloudimage-360 .cloudimage-360-bottom {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-top:focus,\n.cloudimage-360 .cloudimage-360-bottom:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-top {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n top: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-bottom {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n bottom: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-top:before,\n.cloudimage-360 .cloudimage-360-bottom:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-top:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-bottom:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-top.not-active,\n.cloudimage-360 .cloudimage-360-bottom.not-active {\n opacity: 0.4;\n cursor: default;\n}",""])},3645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n,i=t[1]||"",o=t[3];if(!o)return i;if(e&&"function"==typeof btoa){var r=(n=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),a=o.sources.map((function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"}));return[i].concat(a).concat([r]).join("\n")}return[i].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},o=0;o{"use strict";var e=[];function n(t){for(var n=-1,i=0;i{"use strict";var e={};t.exports=function(t,n){var i=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}},9216:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},3565:(t,e,n)=>{"use strict";t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},7795:t=>{"use strict";t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var i="";n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,o&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleTagTransform(i,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},4589:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},7061:(t,e,n)=>{var i=n(8698).default;function o(){"use strict";t.exports=o=function(){return e},t.exports.__esModule=!0,t.exports.default=t.exports;var e={},n=Object.prototype,r=n.hasOwnProperty,a=Object.defineProperty||function(t,e,n){t[e]=n.value},s="function"==typeof Symbol?Symbol:{},c=s.iterator||"@@iterator",u=s.asyncIterator||"@@asyncIterator",l=s.toStringTag||"@@toStringTag";function d(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{d({},"")}catch(t){d=function(t,e,n){return t[e]=n}}function h(t,e,n,i){var o=e&&e.prototype instanceof m?e:m,r=Object.create(o.prototype),s=new j(i||[]);return a(r,"_invoke",{value:k(t,n,s)}),r}function f(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}e.wrap=h;var p={};function m(){}function v(){}function g(){}var y={};d(y,c,(function(){return this}));var b=Object.getPrototypeOf,w=b&&b(b(L([])));w&&w!==n&&r.call(w,c)&&(y=w);var x=g.prototype=m.prototype=Object.create(y);function I(t){["next","throw","return"].forEach((function(e){d(t,e,(function(t){return this._invoke(e,t)}))}))}function O(t,e){function n(o,a,s,c){var u=f(t[o],t,a);if("throw"!==u.type){var l=u.arg,d=l.value;return d&&"object"==i(d)&&r.call(d,"__await")?e.resolve(d.__await).then((function(t){n("next",t,s,c)}),(function(t){n("throw",t,s,c)})):e.resolve(d).then((function(t){l.value=t,s(l)}),(function(t){return n("throw",t,s,c)}))}c(u.arg)}var o;a(this,"_invoke",{value:function(t,i){function r(){return new e((function(e,o){n(t,i,e,o)}))}return o=o?o.then(r,r):r()}})}function k(t,e,n){var i="suspendedStart";return function(o,r){if("executing"===i)throw new Error("Generator is already running");if("completed"===i){if("throw"===o)throw r;return{value:void 0,done:!0}}for(n.method=o,n.arg=r;;){var a=n.delegate;if(a){var s=E(a,n);if(s){if(s===p)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===i)throw i="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);i="executing";var c=f(t,e,n);if("normal"===c.type){if(i=n.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(i="completed",n.method="throw",n.arg=c.arg)}}}function E(t,e){var n=e.method,i=t.iterator[n];if(void 0===i)return e.delegate=null,"throw"===n&&t.iterator.return&&(e.method="return",e.arg=void 0,E(t,e),"throw"===e.method)||"return"!==n&&(e.method="throw",e.arg=new TypeError("The iterator does not provide a '"+n+"' method")),p;var o=f(i,t.iterator,e.arg);if("throw"===o.type)return e.method="throw",e.arg=o.arg,e.delegate=null,p;var r=o.arg;return r?r.done?(e[t.resultName]=r.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):r:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function S(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function C(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(S,this),this.reset(!0)}function L(t){if(t){var e=t[c];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return n("end");if(o.tryLoc<=this.prev){var s=r.call(o,"catchLoc"),c=r.call(o,"finallyLoc");if(s&&c){if(this.prev=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),C(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var i=n.completion;if("throw"===i.type){var o=i.arg;C(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:L(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},e}t.exports=o,t.exports.__esModule=!0,t.exports.default=t.exports},8698:t=>{function e(n){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(n)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports},4687:(t,e,n)=>{var i=n(7061)();t.exports=i;try{regeneratorRuntime=i}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=i:Function("r","regeneratorRuntime = r")(i)}}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={id:i,exports:{}};return t[i](r,r.exports,n),r.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0,(()=>{"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e){var n=function(e,n){if("object"!==t(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var o=i.call(e,"string");if("object"!==t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===t(n)?n:String(n)}function i(t,n,i){return(n=e(n))in t?Object.defineProperty(t,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[n]=i,t}function o(t,n){for(var i=0;i2&&void 0!==arguments[2]?arguments[2]:0,o=e[i];i>e.length-1||X(o,(function(o){var r=i+1;n(o,i),t(e,n,r)}))};function F(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n1&&void 0!==arguments[1]?arguments[1]:0;return(t+="").length>=e?t:new Array(e-t.length+1).join("0")+t},_=function(t,e,n){var i,o=e||{},r=o.amount,a=o.indexZeroBase;return(i=new Array(r),function(t){if(Array.isArray(t))return F(t)}(i)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(i)||z(i)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e,i){var o=B(i+1,a),r=t.replace("{index}",o);return n?r.replace(N,"").replace(V,"?"):r}))};function W(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}var H=function(t,e,n){var o=e.folder;return t.map((function(t){var r=function(t){for(var e=1;e4&&void 0!==arguments[4]?arguments[4]:1,r=n/i,a=t/e,s=t*o,c=e*o;return r>a?c=s/r:s=c*r,{width:s,height:c,offsetX:(t-s)*(arguments.length>5&&void 0!==arguments[5]?arguments[5]:.5),offsetY:(e-c)*(arguments.length>6&&void 0!==arguments[6]?arguments[6]:.5)}},nt=function(t,e,n){var i,o,r=e.container,a=e.w,s=e.h,c=e.zoom,u=e.bw,l=e.offsetX,d=e.offsetY,h=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.event,e=0,n=0,i=(arguments.length>1?arguments[1]:void 0).getBoundingClientRect();return e=t.pageX-i.left,n=t.pageY-i.top,{x:e-=window.pageXOffset,y:n-=window.pageYOffset}}(t,r);i=h.x,o=h.y,i>r.offsetWidth-a/c&&(i=r.offsetWidth-a/c),ir.offsetHeight-s/c&&(o=r.offsetHeight-s/c),o10&&(r=c),s>10&&e&&(r=u),r},st=function(t,e,n){return Math.floor((t-e)/n)||1},ct=function(t){var e=document.createElement("div");return e.className="cloudimage-360-icons-container",t.appendChild(e),e},ut=function(t,e){var n=document.createElement("div");return n.className="cloudimage-360-box-shadow",n.style.boxShadow=t,e.appendChild(n),n},lt=function(t){var e=document.createElement("div");return e.className="cloudimage-360-loader",t.appendChild(e),e},dt=function(t,e){if(t&&e)try{t.removeChild(e)}catch(t){}},ht=function(t,e,n){for(var i=new Array(e).length-1;i>-1;i--){var o,r=null===(o=t[i])||void 0===o?void 0:o[n];if(r)return r}return"0%"},ft=function(t){var e="[data-hotspot-icon-id=".concat(t,"]");return document.querySelector(e)},pt=function(t){t.style.visibility="hidden",t.style.opacity=0},mt=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"x-axis";e.forEach((function(e){var r=e.positions,a=e.initialDimensions,s=e.orientation,c=e.variant.anchorId,u=function(t){switch(t.toLowerCase()){case"x-axis":default:return"x";case"y-axis":return"y"}}(o),l="x"===s?n:i,d=function(t){return t.reduce((function(e,n,i){var o=!(null==n||!n.xCoord),r=!(null==n||!n.yCoord);return o||(n.xCoord=ht(t,i,"xCoord")),r||(n.yCoord=ht(t,i,"yCoord")),e.push(n),e}),[])}(r),h=d.find((function(t){return t.imageIndex===l})),f=ft(c);if(h&&u===s){var p=h.xCoord,m=void 0===p?0:p,v=h.yCoord;!function(t,e,n,i,o){n.style.visibility="visible",n.style.opacity=1,n.style.zIndex=100,n.style.left="".concat(-n.offsetWidth/2,"px"),n.style.top="".concat(-n.offsetHeight/2,"px");var r=t.offsetWidth/e[0],a=t.offsetHeight/e[1],s="".concat(r*i,"px"),c="".concat(a*o,"px");n.style.transform="translate3d(".concat(s,", ").concat(c,", 0)")}(t,a,f,m,void 0===v?0:v)}else pt(f)}))};function vt(t){if(null==t)return window;if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function gt(t){return t instanceof vt(t).Element||t instanceof Element}function yt(t){return t instanceof vt(t).HTMLElement||t instanceof HTMLElement}function bt(t){return"undefined"!=typeof ShadowRoot&&(t instanceof vt(t).ShadowRoot||t instanceof ShadowRoot)}var wt=Math.max,xt=Math.min,It=Math.round;function Ot(){var t=navigator.userAgentData;return null!=t&&t.brands&&Array.isArray(t.brands)?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function kt(){return!/^((?!chrome|android).)*safari/i.test(Ot())}function Et(t,e,n){void 0===e&&(e=!1),void 0===n&&(n=!1);var i=t.getBoundingClientRect(),o=1,r=1;e&&yt(t)&&(o=t.offsetWidth>0&&It(i.width)/t.offsetWidth||1,r=t.offsetHeight>0&&It(i.height)/t.offsetHeight||1);var a=(gt(t)?vt(t):window).visualViewport,s=!kt()&&n,c=(i.left+(s&&a?a.offsetLeft:0))/o,u=(i.top+(s&&a?a.offsetTop:0))/r,l=i.width/o,d=i.height/r;return{width:l,height:d,top:u,right:c+l,bottom:u+d,left:c,x:c,y:u}}function St(t){var e=vt(t);return{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function Ct(t){return t?(t.nodeName||"").toLowerCase():null}function jt(t){return((gt(t)?t.ownerDocument:t.document)||window.document).documentElement}function Lt(t){return Et(jt(t)).left+St(t).scrollLeft}function Pt(t){return vt(t).getComputedStyle(t)}function At(t){var e=Pt(t),n=e.overflow,i=e.overflowX,o=e.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+i)}function Dt(t,e,n){void 0===n&&(n=!1);var i,o,r=yt(e),a=yt(e)&&function(t){var e=t.getBoundingClientRect(),n=It(e.width)/t.offsetWidth||1,i=It(e.height)/t.offsetHeight||1;return 1!==n||1!==i}(e),s=jt(e),c=Et(t,a,n),u={scrollLeft:0,scrollTop:0},l={x:0,y:0};return(r||!r&&!n)&&(("body"!==Ct(e)||At(s))&&(u=(i=e)!==vt(i)&&yt(i)?{scrollLeft:(o=i).scrollLeft,scrollTop:o.scrollTop}:St(i)),yt(e)?((l=Et(e,!0)).x+=e.clientLeft,l.y+=e.clientTop):s&&(l.x=Lt(s))),{x:c.left+u.scrollLeft-l.x,y:c.top+u.scrollTop-l.y,width:c.width,height:c.height}}function Yt(t){var e=Et(t),n=t.offsetWidth,i=t.offsetHeight;return Math.abs(e.width-n)<=1&&(n=e.width),Math.abs(e.height-i)<=1&&(i=e.height),{x:t.offsetLeft,y:t.offsetTop,width:n,height:i}}function Tt(t){return"html"===Ct(t)?t:t.assignedSlot||t.parentNode||(bt(t)?t.host:null)||jt(t)}function Rt(t){return["html","body","#document"].indexOf(Ct(t))>=0?t.ownerDocument.body:yt(t)&&At(t)?t:Rt(Tt(t))}function Xt(t,e){var n;void 0===e&&(e=[]);var i=Rt(t),o=i===(null==(n=t.ownerDocument)?void 0:n.body),r=vt(i),a=o?[r].concat(r.visualViewport||[],At(i)?i:[]):i,s=e.concat(a);return o?s:s.concat(Xt(Tt(a)))}function Mt(t){return["table","td","th"].indexOf(Ct(t))>=0}function Ft(t){return yt(t)&&"fixed"!==Pt(t).position?t.offsetParent:null}function zt(t){for(var e=vt(t),n=Ft(t);n&&Mt(n)&&"static"===Pt(n).position;)n=Ft(n);return n&&("html"===Ct(n)||"body"===Ct(n)&&"static"===Pt(n).position)?e:n||function(t){var e=/firefox/i.test(Ot());if(/Trident/i.test(Ot())&&yt(t)&&"fixed"===Pt(t).position)return null;var n=Tt(t);for(bt(n)&&(n=n.host);yt(n)&&["html","body"].indexOf(Ct(n))<0;){var i=Pt(n);if("none"!==i.transform||"none"!==i.perspective||"paint"===i.contain||-1!==["transform","perspective"].indexOf(i.willChange)||e&&"filter"===i.willChange||e&&i.filter&&"none"!==i.filter)return n;n=n.parentNode}return null}(t)||e}var Nt="top",Vt="bottom",Bt="right",_t="left",Wt="auto",Ht=[Nt,Vt,Bt,_t],qt="start",Ut="end",Zt="viewport",Gt="popper",Jt=Ht.reduce((function(t,e){return t.concat([e+"-"+qt,e+"-"+Ut])}),[]),$t=[].concat(Ht,[Wt]).reduce((function(t,e){return t.concat([e,e+"-"+qt,e+"-"+Ut])}),[]),Kt=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function Qt(t){var e=new Map,n=new Set,i=[];function o(t){n.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!n.has(t)){var i=e.get(t);i&&o(i)}})),i.push(t)}return t.forEach((function(t){e.set(t.name,t)})),t.forEach((function(t){n.has(t.name)||o(t)})),i}var te={placement:"bottom",modifiers:[],strategy:"absolute"};function ee(){for(var t=arguments.length,e=new Array(t),n=0;n=0?"x":"y"}function ce(t){var e,n=t.reference,i=t.element,o=t.placement,r=o?re(o):null,a=o?ae(o):null,s=n.x+n.width/2-i.width/2,c=n.y+n.height/2-i.height/2;switch(r){case Nt:e={x:s,y:n.y-i.height};break;case Vt:e={x:s,y:n.y+n.height};break;case Bt:e={x:n.x+n.width,y:c};break;case _t:e={x:n.x-i.width,y:c};break;default:e={x:n.x,y:n.y}}var u=r?se(r):null;if(null!=u){var l="y"===u?"height":"width";switch(a){case qt:e[u]=e[u]-(n[l]/2-i[l]/2);break;case Ut:e[u]=e[u]+(n[l]/2-i[l]/2)}}return e}var ue={top:"auto",right:"auto",bottom:"auto",left:"auto"};function le(t){var e,n=t.popper,i=t.popperRect,o=t.placement,r=t.variation,a=t.offsets,s=t.position,c=t.gpuAcceleration,u=t.adaptive,l=t.roundOffsets,d=t.isFixed,h=a.x,f=void 0===h?0:h,p=a.y,m=void 0===p?0:p,v="function"==typeof l?l({x:f,y:m}):{x:f,y:m};f=v.x,m=v.y;var g=a.hasOwnProperty("x"),y=a.hasOwnProperty("y"),b=_t,w=Nt,x=window;if(u){var I=zt(n),O="clientHeight",k="clientWidth";I===vt(n)&&"static"!==Pt(I=jt(n)).position&&"absolute"===s&&(O="scrollHeight",k="scrollWidth"),(o===Nt||(o===_t||o===Bt)&&r===Ut)&&(w=Vt,m-=(d&&I===x&&x.visualViewport?x.visualViewport.height:I[O])-i.height,m*=c?1:-1),o!==_t&&(o!==Nt&&o!==Vt||r!==Ut)||(b=Bt,f-=(d&&I===x&&x.visualViewport?x.visualViewport.width:I[k])-i.width,f*=c?1:-1)}var E,S=Object.assign({position:s},u&&ue),C=!0===l?function(t,e){var n=t.x,i=t.y,o=e.devicePixelRatio||1;return{x:It(n*o)/o||0,y:It(i*o)/o||0}}({x:f,y:m},vt(n)):{x:f,y:m};return f=C.x,m=C.y,c?Object.assign({},S,((E={})[w]=y?"0":"",E[b]=g?"0":"",E.transform=(x.devicePixelRatio||1)<=1?"translate("+f+"px, "+m+"px)":"translate3d("+f+"px, "+m+"px, 0)",E)):Object.assign({},S,((e={})[w]=y?m+"px":"",e[b]=g?f+"px":"",e.transform="",e))}const de={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var e=t.state,n=t.options,i=n.gpuAcceleration,o=void 0===i||i,r=n.adaptive,a=void 0===r||r,s=n.roundOffsets,c=void 0===s||s,u={placement:re(e.placement),variation:ae(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o,isFixed:"fixed"===e.options.strategy};null!=e.modifiersData.popperOffsets&&(e.styles.popper=Object.assign({},e.styles.popper,le(Object.assign({},u,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:c})))),null!=e.modifiersData.arrow&&(e.styles.arrow=Object.assign({},e.styles.arrow,le(Object.assign({},u,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})},data:{}},he={name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var e=t.state;Object.keys(e.elements).forEach((function(t){var n=e.styles[t]||{},i=e.attributes[t]||{},o=e.elements[t];yt(o)&&Ct(o)&&(Object.assign(o.style,n),Object.keys(i).forEach((function(t){var e=i[t];!1===e?o.removeAttribute(t):o.setAttribute(t,!0===e?"":e)})))}))},effect:function(t){var e=t.state,n={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,n.popper),e.styles=n,e.elements.arrow&&Object.assign(e.elements.arrow.style,n.arrow),function(){Object.keys(e.elements).forEach((function(t){var i=e.elements[t],o=e.attributes[t]||{},r=Object.keys(e.styles.hasOwnProperty(t)?e.styles[t]:n[t]).reduce((function(t,e){return t[e]="",t}),{});yt(i)&&Ct(i)&&(Object.assign(i.style,r),Object.keys(o).forEach((function(t){i.removeAttribute(t)})))}))}},requires:["computeStyles"]},fe={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var e=t.state,n=t.options,i=t.name,o=n.offset,r=void 0===o?[0,0]:o,a=$t.reduce((function(t,n){return t[n]=function(t,e,n){var i=re(t),o=[_t,Nt].indexOf(i)>=0?-1:1,r="function"==typeof n?n(Object.assign({},e,{placement:t})):n,a=r[0],s=r[1];return a=a||0,s=(s||0)*o,[_t,Bt].indexOf(i)>=0?{x:s,y:a}:{x:a,y:s}}(n,e.rects,r),t}),{}),s=a[e.placement],c=s.x,u=s.y;null!=e.modifiersData.popperOffsets&&(e.modifiersData.popperOffsets.x+=c,e.modifiersData.popperOffsets.y+=u),e.modifiersData[i]=a}};var pe={left:"right",right:"left",bottom:"top",top:"bottom"};function me(t){return t.replace(/left|right|bottom|top/g,(function(t){return pe[t]}))}var ve={start:"end",end:"start"};function ge(t){return t.replace(/start|end/g,(function(t){return ve[t]}))}function ye(t,e){var n=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(n&&bt(n)){var i=e;do{if(i&&t.isSameNode(i))return!0;i=i.parentNode||i.host}while(i)}return!1}function be(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function we(t,e,n){return e===Zt?be(function(t,e){var n=vt(t),i=jt(t),o=n.visualViewport,r=i.clientWidth,a=i.clientHeight,s=0,c=0;if(o){r=o.width,a=o.height;var u=kt();(u||!u&&"fixed"===e)&&(s=o.offsetLeft,c=o.offsetTop)}return{width:r,height:a,x:s+Lt(t),y:c}}(t,n)):gt(e)?function(t,e){var n=Et(t,!1,"fixed"===e);return n.top=n.top+t.clientTop,n.left=n.left+t.clientLeft,n.bottom=n.top+t.clientHeight,n.right=n.left+t.clientWidth,n.width=t.clientWidth,n.height=t.clientHeight,n.x=n.left,n.y=n.top,n}(e,n):be(function(t){var e,n=jt(t),i=St(t),o=null==(e=t.ownerDocument)?void 0:e.body,r=wt(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=wt(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-i.scrollLeft+Lt(t),c=-i.scrollTop;return"rtl"===Pt(o||n).direction&&(s+=wt(n.clientWidth,o?o.clientWidth:0)-r),{width:r,height:a,x:s,y:c}}(jt(t)))}function xe(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function Ie(t,e){return e.reduce((function(e,n){return e[n]=t,e}),{})}function Oe(t,e){void 0===e&&(e={});var n=e,i=n.placement,o=void 0===i?t.placement:i,r=n.strategy,a=void 0===r?t.strategy:r,s=n.boundary,c=void 0===s?"clippingParents":s,u=n.rootBoundary,l=void 0===u?Zt:u,d=n.elementContext,h=void 0===d?Gt:d,f=n.altBoundary,p=void 0!==f&&f,m=n.padding,v=void 0===m?0:m,g=xe("number"!=typeof v?v:Ie(v,Ht)),y=h===Gt?"reference":Gt,b=t.rects.popper,w=t.elements[p?y:h],x=function(t,e,n,i){var o="clippingParents"===e?function(t){var e=Xt(Tt(t)),n=["absolute","fixed"].indexOf(Pt(t).position)>=0&&yt(t)?zt(t):t;return gt(n)?e.filter((function(t){return gt(t)&&ye(t,n)&&"body"!==Ct(t)})):[]}(t):[].concat(e),r=[].concat(o,[n]),a=r[0],s=r.reduce((function(e,n){var o=we(t,n,i);return e.top=wt(o.top,e.top),e.right=xt(o.right,e.right),e.bottom=xt(o.bottom,e.bottom),e.left=wt(o.left,e.left),e}),we(t,a,i));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(gt(w)?w:w.contextElement||jt(t.elements.popper),c,l,a),I=Et(t.elements.reference),O=ce({reference:I,element:b,strategy:"absolute",placement:o}),k=be(Object.assign({},b,O)),E=h===Gt?k:I,S={top:x.top-E.top+g.top,bottom:E.bottom-x.bottom+g.bottom,left:x.left-E.left+g.left,right:E.right-x.right+g.right},C=t.modifiersData.offset;if(h===Gt&&C){var j=C[o];Object.keys(S).forEach((function(t){var e=[Bt,Vt].indexOf(t)>=0?1:-1,n=[Nt,Vt].indexOf(t)>=0?"y":"x";S[t]+=j[n]*e}))}return S}const ke={name:"flip",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,i=t.name;if(!e.modifiersData[i]._skip){for(var o=n.mainAxis,r=void 0===o||o,a=n.altAxis,s=void 0===a||a,c=n.fallbackPlacements,u=n.padding,l=n.boundary,d=n.rootBoundary,h=n.altBoundary,f=n.flipVariations,p=void 0===f||f,m=n.allowedAutoPlacements,v=e.options.placement,g=re(v),y=c||(g!==v&&p?function(t){if(re(t)===Wt)return[];var e=me(t);return[ge(t),e,ge(e)]}(v):[me(v)]),b=[v].concat(y).reduce((function(t,n){return t.concat(re(n)===Wt?function(t,e){void 0===e&&(e={});var n=e,i=n.placement,o=n.boundary,r=n.rootBoundary,a=n.padding,s=n.flipVariations,c=n.allowedAutoPlacements,u=void 0===c?$t:c,l=ae(i),d=l?s?Jt:Jt.filter((function(t){return ae(t)===l})):Ht,h=d.filter((function(t){return u.indexOf(t)>=0}));0===h.length&&(h=d);var f=h.reduce((function(e,n){return e[n]=Oe(t,{placement:n,boundary:o,rootBoundary:r,padding:a})[re(n)],e}),{});return Object.keys(f).sort((function(t,e){return f[t]-f[e]}))}(e,{placement:n,boundary:l,rootBoundary:d,padding:u,flipVariations:p,allowedAutoPlacements:m}):n)}),[]),w=e.rects.reference,x=e.rects.popper,I=new Map,O=!0,k=b[0],E=0;E=0,P=L?"width":"height",A=Oe(e,{placement:S,boundary:l,rootBoundary:d,altBoundary:h,padding:u}),D=L?j?Bt:_t:j?Vt:Nt;w[P]>x[P]&&(D=me(D));var Y=me(D),T=[];if(r&&T.push(A[C]<=0),s&&T.push(A[D]<=0,A[Y]<=0),T.every((function(t){return t}))){k=S,O=!1;break}I.set(S,T)}if(O)for(var R=function(t){var e=b.find((function(e){var n=I.get(e);if(n)return n.slice(0,t).every((function(t){return t}))}));if(e)return k=e,"break"},X=p?3:1;X>0&&"break"!==R(X);X--);e.placement!==k&&(e.modifiersData[i]._skip=!0,e.placement=k,e.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function Ee(t,e,n){return wt(t,xt(e,n))}const Se={name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var e=t.state,n=t.options,i=t.name,o=n.mainAxis,r=void 0===o||o,a=n.altAxis,s=void 0!==a&&a,c=n.boundary,u=n.rootBoundary,l=n.altBoundary,d=n.padding,h=n.tether,f=void 0===h||h,p=n.tetherOffset,m=void 0===p?0:p,v=Oe(e,{boundary:c,rootBoundary:u,padding:d,altBoundary:l}),g=re(e.placement),y=ae(e.placement),b=!y,w=se(g),x="x"===w?"y":"x",I=e.modifiersData.popperOffsets,O=e.rects.reference,k=e.rects.popper,E="function"==typeof m?m(Object.assign({},e.rects,{placement:e.placement})):m,S="number"==typeof E?{mainAxis:E,altAxis:E}:Object.assign({mainAxis:0,altAxis:0},E),C=e.modifiersData.offset?e.modifiersData.offset[e.placement]:null,j={x:0,y:0};if(I){if(r){var L,P="y"===w?Nt:_t,A="y"===w?Vt:Bt,D="y"===w?"height":"width",Y=I[w],T=Y+v[P],R=Y-v[A],X=f?-k[D]/2:0,M=y===qt?O[D]:k[D],F=y===qt?-k[D]:-O[D],z=e.elements.arrow,N=f&&z?Yt(z):{width:0,height:0},V=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},B=V[P],_=V[A],W=Ee(0,O[D],N[D]),H=b?O[D]/2-X-W-B-S.mainAxis:M-W-B-S.mainAxis,q=b?-O[D]/2+X+W+_+S.mainAxis:F+W+_+S.mainAxis,U=e.elements.arrow&&zt(e.elements.arrow),Z=U?"y"===w?U.clientTop||0:U.clientLeft||0:0,G=null!=(L=null==C?void 0:C[w])?L:0,J=Y+q-G,$=Ee(f?xt(T,Y+H-G-Z):T,Y,f?wt(R,J):R);I[w]=$,j[w]=$-Y}if(s){var K,Q="x"===w?Nt:_t,tt="x"===w?Vt:Bt,et=I[x],nt="y"===x?"height":"width",it=et+v[Q],ot=et-v[tt],rt=-1!==[Nt,_t].indexOf(g),at=null!=(K=null==C?void 0:C[x])?K:0,st=rt?it:et-O[nt]-k[nt]-at+S.altAxis,ct=rt?et+O[nt]+k[nt]-at-S.altAxis:ot,ut=f&&rt?function(t,e,n){var i=Ee(t,e,n);return i>n?n:i}(st,et,ct):Ee(f?st:it,et,f?ct:ot);I[x]=ut,j[x]=ut-et}e.modifiersData[i]=j}},requiresIfExists:["offset"]},Ce={name:"arrow",enabled:!0,phase:"main",fn:function(t){var e,n=t.state,i=t.name,o=t.options,r=n.elements.arrow,a=n.modifiersData.popperOffsets,s=re(n.placement),c=se(s),u=[_t,Bt].indexOf(s)>=0?"height":"width";if(r&&a){var l=function(t,e){return xe("number"!=typeof(t="function"==typeof t?t(Object.assign({},e.rects,{placement:e.placement})):t)?t:Ie(t,Ht))}(o.padding,n),d=Yt(r),h="y"===c?Nt:_t,f="y"===c?Vt:Bt,p=n.rects.reference[u]+n.rects.reference[c]-a[c]-n.rects.popper[u],m=a[c]-n.rects.reference[c],v=zt(r),g=v?"y"===c?v.clientHeight||0:v.clientWidth||0:0,y=p/2-m/2,b=l[h],w=g-d[u]-l[f],x=g/2-d[u]/2+y,I=Ee(b,x,w),O=c;n.modifiersData[i]=((e={})[O]=I,e.centerOffset=I-x,e)}},effect:function(t){var e=t.state,n=t.options.element,i=void 0===n?"[data-popper-arrow]":n;null!=i&&("string"!=typeof i||(i=e.elements.popper.querySelector(i)))&&ye(e.elements.popper,i)&&(e.elements.arrow=i)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function je(t,e,n){return void 0===n&&(n={x:0,y:0}),{top:t.top-e.height-n.y,right:t.right-e.width+n.x,bottom:t.bottom-e.height+n.y,left:t.left-e.width-n.x}}function Le(t){return[Nt,Bt,Vt,_t].some((function(e){return t[e]>=0}))}var Pe=ne({defaultModifiers:[oe,{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var e=t.state,n=t.name;e.modifiersData[n]=ce({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement})},data:{}},de,he,fe,ke,Se,Ce,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var e=t.state,n=t.name,i=e.rects.reference,o=e.rects.popper,r=e.modifiersData.preventOverflow,a=Oe(e,{elementContext:"reference"}),s=Oe(e,{altBoundary:!0}),c=je(a,i),u=je(s,o,r),l=Le(c),d=Le(u);e.modifiersData[n]={referenceClippingOffsets:c,popperEscapeOffsets:u,isReferenceHidden:l,hasPopperEscaped:d},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":l,"data-popper-escaped":d})}}]}),Ae=function(t,e){e||(t.removeAttribute("data-show"),t.removeAttribute("data-cloudimage-360-show"))};var De=function(t,e,n){var i,o,r=t.images,a=t.title,s=t.description,c=t.moreDetailsUrl,u=t.moreDetailsTitle,l=void 0===u?"Read more":u,d=document.createElement("div");if(d.className="cloudimage-360-modal-wrapper",r){var h=document.createElement("div"),f=(i=function(t,e,n){var i=document.createElement("div"),o=document.createElement("div");return i.className="cloudimage-360-images-carousel",i.style.maxWidth="".concat(n.offsetWidth,"px"),o.className="cloudimage-360-carousel-dots",t.forEach((function(t,n){var r=function(t,e){var n=document.createElement("img");return n.className="cloudimage-360-carousel-image",n.setAttribute("src",t.src||""),n.setAttribute("alt",t.alt||"more-info"),e||(n.setAttribute("data-active-image",""),n.className+=" active-image"),n}(t,n),a=function(t,e,n){var i=document.createElement("button");return i.className="cloudimage-360-carousel-dot",i.onclick=function(){return function(t,e,n){var i=n.querySelector("[data-active-dot]"),o=n.querySelector("[data-active-image]");i.classList.remove("active-dot"),i.removeAttribute("data-active-dot"),o.classList.remove("active-image"),o.removeAttribute("data-active-image"),t.className+=" active-image",t.setAttribute("data-active-image",""),e.className+=" active-dot",e.setAttribute("data-active-dot","")}(t,i,n)},e||(i.className+=" active-dot",i.setAttribute("data-active-dot","")),i}(r,n,e);o.appendChild(a),i.appendChild(r)})),[i,o]}(r,n,e),o=2,function(t){if(Array.isArray(t))return t}(i)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,o,r,a,s=[],c=!0,u=!1;try{if(r=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(i=r.call(n)).done)&&(s.push(i.value),s.length!==e);c=!0);}catch(t){u=!0,o=t}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(i,o)||z(i,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),p=f[0],m=f[1];h.appendChild(p),r.length>1&&h.appendChild(m),d.appendChild(h),h.className="cloudimage-360-images-carousel-wrapper"}if(a){var v=function(t){var e=document.createElement("h4");return e.innerText=t,e.className="cloudimage-360-modal-title",e}(a);d.appendChild(v)}if(s){var g=function(t){var e=document.createElement("p");return e.innerText=t,e.className="cloudimage-360-modal-description",e}(s);d.appendChild(g)}if(c){var y=function(t,e){var n=document.createElement("a");return n.href=t,n.innerText=e,n.className="cloudimage-360-modal-more-details",n.target="_blank",n}(c,l);d.appendChild(y)}n.appendChild(d)},Ye=function(e,n){n.forEach((function(n){var i=n.popupProps,o=function(e,n,i){var o,r=n.variant,a=i.popupSelector,s=i.arrow,c=r.url,u=r.images,l=r.title,d=r.anchorId,h=r.description,f=r.moreDetailsUrl,p=document.createElement("div");if(p.className="cloudimage-360-hotspot-popup ".concat(a),p.setAttribute("data-hotspot-popup-id",d),p.setAttribute("data-cloudimage-360-hotspot",""),p.style.minHeight=16,p.style.minWidth=16,p.style.cursor="default",p.onclick=function(t){return t.stopPropagation()},"object"===t(r)&&u||h||f||l&&!c)De(r,e,p);else if(c){var m=function(t){var e=t.url,n=t.title,i=t.newTab,o=document.createElement("a");return o.href=e,o.innerText=n,i&&(o.target="_blank"),o}(r);p.appendChild(m)}else if("string"==typeof r)try{var v=(o=r,document.querySelector("[".concat("data-cloudimage-360-hotspots","=").concat(o,"]"))),g=v.cloneNode(!0);p.appendChild(g),v.parentNode.removeChild(v)}catch(t){console.error("Cloudimage-360: Element with anchorId '".concat(d,"' not exist in the DOM"))}if(s){var y=function(){var t=document.createElement("div");return t.setAttribute("data-popper-arrow",""),t.setAttribute("data-cloudimage-360-hotspot",""),t.className="cloudimage-360-popup-arrow",t}();p.appendChild(y)}return e.appendChild(p),p}(e,n,i),r=function(t,e,n){var i=e.placement,o=e.offset,r=document.createElement("div"),a=Pe(r,t);return a.setOptions({placement:i,modifiers:[{name:"offset",options:{offset:o}},{name:"preventOverflow",options:{boundary:n}}]}),a}(o,i,e),a=function(t,e,n,i){var o,r=e.indicatorSelector,a=e.variant,s=a.url,c=a.anchorId,u=e.popupProps.open,l=void 0!==u&&u,d=document.createElement("div");return d.style.position="absolute",d.className="cloudimage-360-hotspot-".concat(s?"link":"custom","-icon ").concat(r),d.setAttribute("data-hotspot-icon-id",c),d.setAttribute("data-cloudimage-360-hotspot",""),d.onclick=function(t){return t.stopPropagation()},["mouseenter","touchstart","focus"].forEach((function(t){d.addEventListener(t,(function(){return function(t,e){t.setAttribute("data-show",""),t.setAttribute("data-cloudimage-360-show",""),e.update()}(n,i)}))})),l||["mouseleave","blur"].forEach((function(t){d.addEventListener(t,(function(){return setTimeout((function(){return Ae(n,o)}),160)}))})),n.addEventListener("mouseenter",(function(){o=!0})),n.addEventListener("mouseleave",(function(){o=!1,!l&&Ae(n,o)})),pt(d),t.appendChild(d),d}(e,n,o,r);r.state.elements.reference=a,r.update()}))};function Te(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function Re(t){for(var e=1;e=this.amountX?(this.activeImageX=this.amountX,(e?this.leftElem:this.rightElem)&&ot(e?this.leftElem:this.rightElem,"not-active")):(this.activeImageX+=t,this.rightElem&&rt(this.rightElem,"not-active"),this.leftElem&&rt(this.leftElem,"not-active")):(this.activeImageX=(this.activeImageX+t)%this.amountX||this.amountX,this.activeImageX===this.amountX&&this.allowSpinY&&(this.spinY=!0))}},{key:"moveActiveIndexDown",value:function(t){var e=this.controlReverse?!this.spinReverse:this.spinReverse;this.stopAtEdges?this.activeImageX-t<=1?(this.activeImageX=1,(e?this.rightElem:this.leftElem)&&ot(e?this.rightElem:this.leftElem,"not-active")):(this.activeImageX-=t,this.leftElem&&rt(this.leftElem,"not-active"),this.rightElem&&rt(this.rightElem,"not-active")):this.activeImageX-t<1?(this.activeImageX=this.amountX+(this.activeImageX-t),this.spinY=!0):this.activeImageX-=t}},{key:"moveActiveYIndexUp",value:function(t){var e=this.controlReverse?!this.spinReverse:this.spinReverse;this.stopAtEdges?this.activeImageY+t>=this.amountY?(this.activeImageY=this.amountY,(e?this.bottomElem:this.topElem)&&ot(e?this.bottomElem:this.topElem,"not-active")):(this.activeImageY+=t,this.topElem&&rt(this.topElem,"not-active"),this.bottomElem&&rt(this.bottomElem,"not-active")):(this.activeImageY=(this.activeImageY+t)%this.amountY||this.amountY,this.activeImageY===this.amountY&&(this.spinY=!1))}},{key:"moveActiveYIndexDown",value:function(t){var e=this.controlReverse?!this.spinReverse:this.spinReverse;this.stopAtEdges?this.activeImageY-t<=1?(this.activeImageY=1,(e?this.topElem:this.bottomElem)&&ot(e?this.topElem:this.bottomElem,"not-active")):(this.activeImageY-=t,this.bottomElem&&rt(this.bottomElem,"not-active"),this.topElem&&rt(this.topElem,"not-active")):this.activeImageY-t<1?(this.activeImageY=this.amountY+(this.activeImageY-t),this.spinY=!1):this.activeImageY-=t}},{key:"moveRight",value:function(t){var e=st(t,this.movementStart.x,this.speedFactor);this.spinReverse?this.moveActiveIndexDown(e):this.moveActiveIndexUp(e),this.movementStart.x=t,this.activeImageY=1,this.update()}},{key:"moveLeft",value:function(t){var e=st(this.movementStart.x,t,this.speedFactor);this.spinReverse?this.moveActiveIndexUp(e):this.moveActiveIndexDown(e),this.activeImageY=1,this.movementStart.x=t,this.update()}},{key:"moveTop",value:function(t){var e=st(this.movementStart.y,t,this.speedFactor);this.spinReverse?this.moveActiveYIndexUp(e):this.moveActiveYIndexDown(e),this.activeImageX=1,this.movementStart.y=t,this.update()}},{key:"moveBottom",value:function(t){var e=st(t,this.movementStart.y,this.speedFactor);this.spinReverse?this.moveActiveYIndexDown(e):this.moveActiveYIndexUp(e),this.activeImageX=1,this.movementStart.y=t,this.update()}},{key:"onMoveHandler",value:function(t){var e=this.isMobile?t.touches[0].clientX:t.pageX,n=this.isMobile?t.touches[0].clientY:t.pageY,i=e-this.movementStart.x>=this.speedFactor,o=this.movementStart.x-e>=this.speedFactor,r=this.movementStart.y-n>=this.speedFactor,a=n-this.movementStart.y>=this.speedFactor;this.bottomCircle&&this.hide360ViewCircleIcon(),i&&this.movingDirection===c?(this.moveRight(e),this.isStartSpin=!0):o&&this.movingDirection===c?(this.moveLeft(e),this.isStartSpin=!0):r&&this.movingDirection===u?(this.moveTop(n),this.isStartSpin=!0):a&&this.movingDirection===u&&(this.moveBottom(n),this.isStartSpin=!0)}},{key:"left",value:function(){this.movingDirection=c,this.activeImageY=this.reversed?this.amountY:1,this.moveActiveIndexDown(1),this.update()}},{key:"right",value:function(){this.movingDirection=c,this.activeImageY=this.reversed?this.amountY:1,this.moveActiveIndexUp(1),this.update()}},{key:"top",value:function(){this.movingDirection=u,this.activeImageX=this.reversed?this.amountX:1,this.moveActiveYIndexUp(1),this.update()}},{key:"bottom",value:function(){this.movingDirection=u,this.activeImageX=this.reversed?this.amountX:1,this.moveActiveYIndexDown(1),this.update()}},{key:"loop",value:function(t){var e={left:this.left.bind(this),right:this.right.bind(this),top:this.top.bind(this),bottom:this.bottom.bind(this)};!function(t,e,n,i){var o=i.bottom,c=i.top,u=i.left,l=i.right;switch(t){case r:n?o():c();break;case a:case s:e?n?o():c():n?u():l();break;default:n?u():l()}}(this.autoplayBehavior,this.spinY,t,e)}},{key:"updateContainerAndCanvasSize",value:function(e){var n=function(e,n){try{var i=e.width/e.height;if("number"==typeof n&&(i=n),n&&"object"===t(n)){var o=Object.keys(n).sort((function(t,e){return t-e})).find((function(t){return window.innerWidth<=parseInt(t,10)}));o&&(i=n[o])}return i}catch(t){return 1}}(e,this.ratio);if(this.fullscreenView)return this.container.width=window.innerWidth*this.devicePixelRatio,this.container.style.width=window.innerWidth+"px",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,void(this.canvas.style.height=window.innerHeight+"px");this.canvas.width=this.container.offsetWidth*this.devicePixelRatio,this.canvas.style.width=this.container.offsetWidth+"px",this.canvas.height=this.container.offsetWidth/n*this.devicePixelRatio,this.canvas.style.height=this.container.offsetWidth/n+"px"}},{key:"onResizedImageLoad",value:function(t,e,n){t===u?this.resizedImagesY[n]=e:this.resizedImagesX[n]=e,this.resizedImagesX.length+this.resizedImagesY.length===this.amountX+this.amountY&&(this.imagesX=this.resizedImagesX,this.imagesY=this.resizedImagesY,this.update())}},{key:"showImageInfo",value:function(t){t.font="".concat(this.fullscreenView?28:14,"px serif"),t.fillStyle="white"===this.info?"#FFF":"#000";var e="image-dimension: ".concat(this.container.offsetWidth,"x").concat(this.container.offsetHeight,"px"),n=["active-index-x: "+this.activeImageX,"active-index-y: "+this.activeImageY].join(" | ");t.fillText(e,20,this.container.offsetHeight-35),t.fillText(n,20,this.container.offsetHeight-10)}},{key:"requestResizedImages",value:function(){if(this.isReady()){var t=this.ciParams.ciToken,e=this.imagesX[0];if(this.update(),t&&this.requestResponsiveImages&&!(this.container.offsetWidth<1.5*e.width)){this.speedFactor=it(this.dragSpeed,this.amountX,this.container.offsetWidth);var n=R(this.srcXConfig);if(q(this.srcXConfig,n,this.onResizedImageLoad.bind(this,c)),this.allowSpinY){var i=R(this.srcYConfig);q(this.srcYConfig,i,this.onResizedImageLoad.bind(this,u))}}}}},{key:"update",value:function(){var t=this.imagesX[this.activeImageX-1];if(this.movingDirection===u&&(t=this.imagesY[this.activeImageY-1]),t){var e=this.canvas.getContext("2d");if(e.scale(this.devicePixelRatio,this.devicePixelRatio),this.updateContainerAndCanvasSize(t),this.fullscreenView){var n=et(this.canvas.width,this.canvas.height,t.width,t.height),i=n.width,o=n.height,r=n.offsetX,a=n.offsetY;e.drawImage(t,r,a,i,o)}else this.mouseTracked?this.updateImageScale(e):(this.hotspotsConfigs&&!this.autoplay&&mt(this.container,this.hotspotsConfigs,this.activeImageX,this.activeImageY,this.movingDirection,this.isClicked),e.drawImage(t,0,0,this.canvas.width,this.canvas.height));this.info&&this.showImageInfo(e)}}},{key:"updateImageScale",value:function(t){var e=this.originalImagesX[this.activeImageX-1];this.movingDirection===u&&(e=this.originalImagesY[this.activeImageY-1]);var n=this.getCursorPositionInCanvas(),i=this.canvas.width,o=this.canvas.height,r=this.canvas.width*this.zoomIntensity,a=this.canvas.height*this.zoomIntensity,s=0-n.x/i*(r-this.canvas.width),c=0-n.y/o*(a-this.canvas.height);t.drawImage(e,s,c,r,a)}},{key:"updatePercentageInLoader",value:function(t){this.loader&&(this.loader.style.width=t+"%"),this.view360Icon&&(this.view360Icon.innerText=t+"%")}},{key:"onFirstImageLoaded",value:function(t){this.add360ViewIcon();var e=this.canvas.getContext("2d");if(e.scale(this.devicePixelRatio,this.devicePixelRatio),this.updateContainerAndCanvasSize(t),this.fullscreenView){var n=et(this.canvas.width,this.canvas.height,t.width,t.height),i=n.offsetX,o=n.offsetY,r=n.width,a=n.height;this.offset={x:i,y:o},this.addCloseFullscreenView(),e.drawImage(t,i,o,r,a)}else e.drawImage(t,0,0,this.canvas.width,this.canvas.height);this.info&&this.showImageInfo(e),this.magnifier&&this.addMagnifier(),this.boxShadow&&!this.fullscreenView&&(this.boxShadowEl=ut(this.boxShadow,this.innerBox)),this.bottomCircle&&!this.fullscreenView&&this.add360ViewCircleIcon(),this.fullscreen&&!this.fullscreenView&&this.addFullscreenIcon()}},{key:"onAllImagesLoaded",value:function(){if(this.removeLoader(),this.imagesLoaded=!0,this.autoplay&&this.pointerZoom?this.container.style.cursor="zoom-in":this.container.style.cursor="grab",this.speedFactor=it(this.dragSpeed,this.amountX,this.container.offsetWidth),this.autoplay&&this.play(),this.disableDrag&&(this.container.style.cursor="default"),this.view360Icon){if(this.hide360Logo)return this.remove360ViewIcon();this.view360Icon.innerText="",this.logoSrc&&p(this.view360Icon,this.logoSrc)}this.initControls()}},{key:"magnify",value:function(t){var e=this;t.stopPropagation(),this.mouseTracked&&this.togglePointerZoom();var n,i,o,r,a,s,c,l,d=(n=this.movingDirection,i=this.imagesX,o=this.imagesY,r=this.activeImageX,a=this.activeImageY,s=new Image,c=i.map((function(t){return t.src.replace(N,"").replace(V,"?")})),l=o.map((function(t){return t.src.replace(N,"").replace(V,"?")})),s.src=c[r-1],n===u&&(s.src=l[a-1]),s);this.isMagnifyOpen=!0,d.onload=function(){e.glass&&(e.glass.style.cursor="none")},this.glass=document.createElement("div"),this.container.style.overflow="hidden",function(t,e,n,i,o){var r=e||{},a=r.x,s=void 0===a?0:a,c=r.y,u=void 0===c?0:c,l=(t.offsetWidth-2*s)*o,d=(t.offsetHeight-2*u)*o;i.setAttribute("class","cloudimage-360-img-magnifier-glass"),t.prepend(i),i.style.backgroundImage="url('".concat(n.src,"')"),i.style.backgroundSize="".concat(l,"px ").concat(d,"px");var h={container:t,w:i.offsetWidth/2,h:i.offsetHeight/2,zoom:o,bw:3,offsetX:s,offsetY:u},f=function(t){nt(t,h,i)},p=function(t){nt(t,h,i)};i.addEventListener("mousemove",f),t.addEventListener("mousemove",f),i.addEventListener("touchmove",p,{passive:!0}),t.addEventListener("touchmove",p,{passive:!0})}(this.container,this.offset,d,this.glass,this.magnifier||3)}},{key:"closeMagnifier",value:function(){this.glass&&(this.container.style.overflow="visible",this.container.removeChild(this.glass),this.glass=null,this.isMagnifyOpen=!1)}},{key:"openFullscreenModal",value:function(t){t.stopPropagation(),this.mouseTracked&&this.togglePointerZoom(),new e(function(t){var e=document.createElement("div");e.className="cloudimage-360-fullscreen-modal";var n=t.cloneNode();return n.style.height="100%",n.style.maxHeight="100%",e.appendChild(n),window.document.body.style.overflow="hidden",window.document.body.appendChild(e),n}(this.container),!0,this.hotspotsConfigs)}},{key:"setFullscreenEvents",value:function(t,e){if("click"===e.type)return this.closeFullscreenModal(e);"Escape"===e.key&&this.container.parentNode.parentNode===document.body&&this.closeFullscreenModalOnEsc(e)}},{key:"closeFullscreenModalOnEsc",value:function(t){this.closeFullscreenModal(t)}},{key:"play",value:function(){var t=this;this.bottomCircle&&this.hide360ViewCircleIcon(),this.remove360ViewIcon(),this.loopTimeoutId=window.setInterval((function(){t.loop(t.reversed);var e=function(t,e,n,i,o,s){switch(t){case a:case r:return!!(s?1===n:n===o);default:return!!(s?1===e:e===i)}}(t.autoplayBehavior,t.activeImageX,t.activeImageY,t.amountX,t.amountY,t.reversed);t.playOnce&&e&&(window.clearTimeout(t.loopTimeoutId),t.autoplay=!1,t.hotspotsConfigs&&mt(t.container,t.hotspotsConfigs,t.activeImageX,t.activeImageY,t.movingDirection,t.isClicked))}),this.autoplaySpeed)}},{key:"stop",value:function(){this.bottomCircle&&this.show360ViewCircleIcon(),window.clearTimeout(this.loopTimeoutId)}},{key:"updateView",value:function(t,n){var i,o,r=this,a=this.container,s=d(a);if(i=this,o=s,Object.keys(o).reduce((function(t,e){var n=i[e]!==o[e];return-1!==Y.indexOf(e)&&n&&(t=!0),t}),!1)||t){var c=this.container,u=n.findIndex((function(t){return t.id===r.container.id}));return a.removeChild(this.innerBox),(a=a.cloneNode(!0)).className=a.className.replace(" initialized",""),c.parentNode.replaceChild(a,c),n.splice(u,1,new e(a))}a.style.position="relative",a.style.width="100%",a.style.cursor="default",a.setAttribute("draggable","false"),this.stop(),this.init(a,!0)}},{key:"destroy",value:function(){this.stop();var t=this.container,e=t.cloneNode(!0),n=e.querySelector(".cloudimage-360-inner-box");e.className=e.className.replace(" initialized",""),e.style.position="relative",e.style.width="100%",e.style.cursor="default",e.setAttribute("draggable","false"),e.style.minHeight="auto",e.removeChild(n),t.parentNode.replaceChild(e,t)}},{key:"addCloseFullscreenView",value:function(t){var e=function(){var t=document.createElement("div");return t.className="cloudimage-360-close-fullscreen-icon",t}();e.onclick=this.setFullscreenEvents.bind(this,t),window.onkeyup=this.setFullscreenEvents.bind(this,t),this.iconsContainer.appendChild(e)}},{key:"add360ViewIcon",value:function(){var t;this.view360Icon=((t=document.createElement("div")).className="cloudimage-360-view-360-icon",t.innerText="0%",t),this.innerBox.appendChild(this.view360Icon)}},{key:"addFullscreenIcon",value:function(){var t;this.fullscreenIcon=((t=document.createElement("div")).className="cloudimage-360-fullscreen-icon",t),this.fullscreenIcon.onclick=this.openFullscreenModal.bind(this),this.iconsContainer.appendChild(this.fullscreenIcon)}},{key:"showFullscreenIcon",value:function(){this.fullscreenIcon&&(this.fullscreenIcon.style.display="block",this.fullscreenIcon.style.pointerEvents="auto")}},{key:"hideFullscreenIcon",value:function(){this.fullscreenIcon&&(this.fullscreenIcon.style.display="none",this.fullscreenIcon.style.pointerEvents="none")}},{key:"addMagnifier",value:function(){var t;this.magnifierIcon=((t=document.createElement("div")).className="cloudimage-360-magnifier-icon",t),this.magnifierIcon.onclick=this.magnify.bind(this),this.iconsContainer.appendChild(this.magnifierIcon)}},{key:"enableMagnifierIcon",value:function(){this.magnifierIcon&&(this.magnifierIcon.style.display="block",this.magnifierIcon.style.pointerEvents="auto")}},{key:"disableMagnifierIcon",value:function(){this.magnifierIcon&&(this.magnifierIcon.style.display="none",this.magnifierIcon.style.pointerEvents="none")}},{key:"closeFullscreenModal",value:function(t){t.stopPropagation(),document.body.removeChild(this.container.parentNode),window.document.body.style.overflow="visible"}},{key:"add360ViewCircleIcon",value:function(){var t,e;this.view360CircleIcon=(t=this.bottomCircleOffset,(e=new Image).src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg",e.style.bottom="".concat(t,"%"),e.className="cloudimage-360-view-360-circle",e),this.innerBox.appendChild(this.view360CircleIcon)}},{key:"show360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.view360CircleIcon.style.opacity="1")}},{key:"hide360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.view360CircleIcon.style.opacity="0")}},{key:"remove360ViewCircleIcon",value:function(){this.view360CircleIcon&&(this.innerBox.removeChild(this.view360CircleIcon),this.view360CircleIcon=null)}},{key:"removeLoader",value:function(){this.loader&&(this.innerBox.removeChild(this.loader),this.loader=null)}},{key:"remove360ViewIcon",value:function(){if(this.view360Icon)try{this.innerBox.removeChild(this.view360Icon),this.view360Icon=null}catch(t){}}},{key:"initControls",value:function(){var t=this,e=function(t,e){var n=t.container,i=t.spinReverse,o=t.stopAtEdges,r=e.onRightStart,a=e.onLeftStart,s=e.onTopStart,c=e.onBottomStart,u=e.onEventEnd,l={},d=t.controlReverse?!i:i,h=n.querySelectorAll(".cloudimage-360-left, .cloudimage-360-prev")[0],f=n.querySelectorAll(".cloudimage-360-right, .cloudimage-360-next")[0],p=n.querySelector(".cloudimage-360-top"),m=n.querySelector(".cloudimage-360-bottom");return h&&(h.style.display="block",h.addEventListener("mousedown",d?r:a),h.addEventListener("touchstart",d?r:a,{passive:!0}),h.addEventListener("mouseup",u),h.addEventListener("touchend",u),l.left=h),f&&(f.style.display="block",f.addEventListener("mousedown",d?a:r),f.addEventListener("touchstart",d?a:r,{passive:!0}),f.addEventListener("mouseup",u),f.addEventListener("touchend",u),l.right=f),p&&(p.style.display="block",p.addEventListener("mousedown",d?c:s),p.addEventListener("touchstart",d?c:s),p.addEventListener("mouseup",u),p.addEventListener("touchend",u),l.top=p),m&&(m.style.display="block",m.addEventListener("mousedown",d?s:c),m.addEventListener("touchstart",d?s:c),m.addEventListener("mouseup",u),m.addEventListener("touchend",u),l.bottom=m),(d?f:h)&&o&&(ot(d?f:h,"not-active"),ot(d?p:m,"not-active")),l}({container:this.container,controlReverse:this.controlReverse,spinReverse:this.spinReverse,stopAtEdges:this.stopAtEdges},{onLeftStart:function(e){e.stopPropagation(),t.onSpin(),t.left(),t.loopTimeoutId=window.setInterval(t.left.bind(t),t.autoplaySpeed)},onRightStart:function(e){e.stopPropagation(),t.onSpin(),t.right(),t.loopTimeoutId=window.setInterval(t.right.bind(t),t.autoplaySpeed)},onTopStart:function(e){e.stopPropagation(),t.onSpin(),t.top(),t.loopTimeoutId=window.setInterval(t.top.bind(t),t.autoplaySpeed)},onBottomStart:function(e){e.stopPropagation(),t.onSpin(),t.bottom(),t.loopTimeoutId=window.setInterval(t.bottom.bind(t),t.autoplaySpeed)},onEventEnd:function(){t.onFinishSpin(),window.clearTimeout(t.loopTimeoutId)}});this.topElem=e.top,this.bottomElem=e.bottom,this.leftElem=e.left,this.rightElem=e.right}},{key:"attachEvents",value:function(t,e,n){window.addEventListener("resize",this.requestResizedImages.bind(this)),t&&!this.disableDrag&&(this.container.addEventListener("click",this.mouseClick.bind(this)),this.container.addEventListener("mousedown",this.mouseDown.bind(this)),this.container.addEventListener("mousemove",this.mouseMove.bind(this)),this.container.addEventListener("mouseleave",this.mouseLeave.bind(this)),document.addEventListener("mouseup",this.mouseUp.bind(this))),e&&!this.disableDrag&&(this.container.addEventListener("touchstart",this.touchStart.bind(this),{passive:!0}),this.container.addEventListener("touchend",this.touchEnd.bind(this)),this.container.addEventListener("touchmove",this.touchMove.bind(this))),n&&(document.addEventListener("keydown",this.keyDown.bind(this)),document.addEventListener("keyup",this.keyUp.bind(this))),document.addEventListener("keydown",this.keyDownGeneral.bind(this))}},{key:"init",value:function(t){var e,n,i=this,o=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=d(t),a=r.folder,l=r.apiVersion,h=r.filenameX,f=r.filenameY,m=r.imageListX,v=r.imageListY,g=r.indexZeroBase,y=r.amountX,b=r.amountY,w=r.draggable,x=void 0===w||w,I=r.swipeable,O=void 0===I||I,k=r.keys,E=r.keysReverse,S=r.bottomCircle,C=r.bottomCircleOffset,j=r.boxShadow,L=r.autoplay,P=r.autoplayBehavior,A=r.playOnce,D=r.speed,Y=r.autoplayReverse,T=r.disableDrag,X=void 0===T||T,M=r.fullscreen,F=r.magnifier,z=r.ciToken,N=r.ciFilters,V=r.ciTransformation,B=r.lazyload,_=r.lazySelector,W=r.spinReverse,H=r.dragSpeed,U=r.stopAtEdges,Z=r.controlReverse,G=r.hide360Logo,J=r.logoSrc,$=r.pointerZoom,K=r.ratio,Q=r.imageInfo,et=void 0===Q?"black":Q,nt=r.requestResponsiveImages,it={ciToken:z,ciFilters:N,ciTransformation:V};if(this.folder=a,this.apiVersion=l,this.filenameX=h,this.filenameY=f,this.imageListX=m,this.imageListY=v,this.indexZeroBase=g,this.amountX=m?JSON.parse(m).length:y,this.amountY=v?JSON.parse(v).length:b,this.allowSpinY=!!this.amountY,this.activeImageX=Y?this.amountX:1,this.activeImageY=Y?this.amountY:1,this.spinY=P===s,this.bottomCircle=S,this.bottomCircleOffset=C,this.boxShadow=j,this.autoplay=L,this.autoplayBehavior=P,this.playOnce=A,this.speed=D,this.reversed=Y,this.disableDrag=X,this.fullscreen=M,this.magnifier=!this.isMobile&&F>1?Math.min(F,5):0,this.lazySelector=_,this.spinReverse=W,this.controlReverse=Z,this.dragSpeed=Math.max(H,50),this.autoplaySpeed=36*this.speed/this.amountX,this.stopAtEdges=U,this.hide360Logo=G,this.logoSrc=J,this.ciParams=it,this.apiVersion=l,this.pointerZoom=$>1?Math.min($,3):0,this.keysReverse=E,this.info=et,this.keys=k,this.ratio=K&&JSON.parse(K),this.requestResponsiveImages=nt,o)return dt(this.innerBox,this.iconsContainer),dt(this.innerBox,this.boxShadowEl),dt(this.innerBox,this.view360Icon),this.remove360ViewCircleIcon(),this.iconsContainer=ct(this.innerBox),this.hide360Logo||this.lazyload||!this.logoSrc||(this.add360ViewIcon(),p(this.view360Icon,this.logoSrc)),this.magnifier&&this.addMagnifier(),this.bottomCircle&&!this.fullscreenView&&this.add360ViewCircleIcon(),this.fullscreen&&!this.fullscreenView&&this.addFullscreenIcon(),this.boxShadow&&!this.fullscreenView&&(this.boxShadowEl=ut(this.boxShadow,this.innerBox)),this.onAllImagesLoaded();this.innerBox=function(t){var e=document.createElement("div");return e.className="cloudimage-360-inner-box",t.appendChild(e),e}(this.container),this.iconsContainer=ct(this.innerBox),this.canvas=(e=this.innerBox,(n=document.createElement("canvas")).style.width="100%",n.style.fontSize="0",e.appendChild(n),n),this.loader=lt(this.innerBox),this.hotspotsConfigs&&!this.fullscreenView&&Ye(t,this.hotspotsConfigs),function(t){t.style.position="relative",t.style.width="100%",t.style.cursor="wait",t.setAttribute("draggable","false"),t.className="".concat(t.className," initialized")}(this.container),this.srcXConfig={folder:a,filename:h,imageList:m,container:t,innerBox:this.innerBox,apiVersion:l,ciParams:it,lazySelector:_,amount:this.amountX,indexZeroBase:g,fullscreen:this.fullscreenView},this.srcYConfig=ze(ze({},this.srcXConfig),{},{filename:f,orientation:u,imageList:v,amount:this.amountY});var ot=R(this.srcXConfig),rt=function(t,e,n){t===c?i.imagesX[n]=e:i.imagesY[n]=e;var o=i.amountX+i.amountY,r=i.imagesX.length+i.imagesY.length,a=!n&&t!==u,s=Math.round(r/o*100);i.updatePercentageInLoader(s),a?i.onFirstImageLoaded(e):i.autoplay&&i.moveRight(n),i.isReady()&&i.onAllImagesLoaded()},at=function(){if(q(i.srcXConfig,ot,rt.bind(i,c)),i.allowSpinY){var t=R(i.srcYConfig);q(i.srcYConfig,t,rt.bind(i,u))}};B?tt(ot,this.srcXConfig,(function(t){i.innerBox.removeChild(t),at()})):at(),this.attachEvents(x,O,k)}}],i&&o(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),e}();const Ve=Ne;function Be(){var t=[],e=document.querySelectorAll(".cloudimage-360:not(.initialized)");[].slice.call(e).forEach((function(e){var n=function(t){if(!t.id){var e=Math.floor(1e4*Math.random()),n="cloudimage-360-view-".concat(e);t.id=n}return t}(e);h(n,"hotspots")||t.push(new Ve(n))})),window.CI360._viewers=t}function _e(){return!(window.CI360._viewers&&window.CI360._viewers.length>0)}window.CI360=window.CI360||{},window.CI360.init=Be,window.CI360.destroy=function(){_e()||(window.CI360._viewers.forEach((function(t){t.destroy()})),window.CI360._viewers=[])},window.CI360.getActiveIndexByID=function(t,e){if(!_e()){var n=window.CI360._viewers.filter((function(e){return e.id===t}))[0];return"y"===e?n&&n.activeImageY-1:n&&n.activeImageX-1}},window.CI360.update=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t?window.CI360._viewers.filter((function(e){return e.id===t}))[0].updateView(e,window.CI360._viewers):window.CI360._viewers.forEach((function(t){t.updateView(e,window.CI360._viewers)}))},window.CI360.add=function(t){var e=Array.from(document.querySelectorAll(".cloudimage-360:not(.initialized)"));if(e.length&&t){var n=e.filter((function(e){return e.id===t}))[0];n&&window.CI360._viewers.push(new Ve(n))}},window.CI360.addHotspots=function(t,e){var n=document.querySelectorAll(".cloudimage-360:not(.initialized)"),i=Array.from(n).find((function(e){return e.id===t}));i&&window.CI360._viewers.push(new Ve(i,!1,e))},window.CI360.notInitOnLoad||Be()})()})(); \ No newline at end of file diff --git a/package.json b/package.json index e4ce430..54be159 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "js-cloudimage-360-view", - "version": "3.2.0", + "version": "4.0.0", "main": "dist/index.js", + "types": "dist/index.d.ts", "description": "", "author": "scaleflex", "license": "MIT", @@ -22,9 +23,9 @@ "360 product view" ], "scripts": { - "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js", + "dev": "vite serve examples/src", "clean:build": "rm -rf build", - "build:bundle": "npm run clean:build && webpack --mode production --config config/webpack-build.config.js", + "build:bundle": "vite build", "deploy:bundle": "npm run build:bundle && node bin/deploy-bundle", "clean:dist": "rm -rf dist", "dist": "npm run clean:dist && babel src -d dist --copy-files", @@ -67,7 +68,9 @@ "prettier": "3.3.3", "style-loader": "^3.3.2", "svg-inline-loader": "^0.8.2", - "webpack": "^5.79.0", + "vite": "^5.4.10", + "vite-plugin-lib-inject-css": "^2.1.1", + "webpack": "^5.95.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.3" } diff --git a/src/index.js b/src/index.js index 54d6789..7347afb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ import CI360 from './ci360'; + window.CI360 = CI360; + export default CI360; From 92a57a7fa288dc8e276e43976e2646a49a51f2b1 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 29 Oct 2024 19:29:37 +0300 Subject: [PATCH 27/31] chore: Added changelog --- .babelrc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.babelrc b/.babelrc index 212a831..3c8f968 100644 --- a/.babelrc +++ b/.babelrc @@ -9,10 +9,10 @@ } ] ], - "plugins": ["array-includes", "@babel/plugin-transform-runtime"], + "plugins": ["array-includes"], "env": { "production": { "presets": ["minify"] } } -} +} \ No newline at end of file From 30bba2c1f9ecd27b4780068f91ee7922d5b16ab2 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Wed, 30 Oct 2024 01:45:50 +0300 Subject: [PATCH 28/31] chore: Update docs and release v4.0.0-beta --- .gitignore | 1 + .npmignore | 49 ++++++++++++++++--- README.md | 10 ++-- config/webpack-demo.config.js | 6 +-- {examples/src => demo}/constants.js | 0 {examples/src => demo}/controllers.css | 0 .../src => demo}/hotspots-config.constant.js | 0 {examples/src => demo}/index.html | 0 {examples/src => demo}/index.js | 2 +- {examples/src => demo}/styles/main.css | 0 package.json | 22 ++++----- vite-demo.config.js | 9 ++++ vite.config.js | 13 +++-- 13 files changed, 82 insertions(+), 30 deletions(-) rename {examples/src => demo}/constants.js (100%) rename {examples/src => demo}/controllers.css (100%) rename {examples/src => demo}/hotspots-config.constant.js (100%) rename {examples/src => demo}/index.html (100%) rename {examples/src => demo}/index.js (99%) rename {examples/src => demo}/styles/main.css (100%) create mode 100644 vite-demo.config.js diff --git a/.gitignore b/.gitignore index 6e7e9ef..2bd7d07 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ .idea /.idea dist +demo-dist build npm-debug.log* yarn-debug.log* diff --git a/.npmignore b/.npmignore index 739cdec..8f9da44 100644 --- a/.npmignore +++ b/.npmignore @@ -1,8 +1,43 @@ # .npmignore -src -examples -config -build -.babelrc -.gitignore -.idea \ No newline at end of file + +# Ignore source files +/src +/demo + +# Ignore configuration files and build artifacts +/config +/bin +/build +/.babelrc +/.gitignore +/eslint.config.mjs +/vite-demo.config.js +/vite.config.js + +# Ignore local environment files +/.env +/.env.local +/.env.development +/.env.production + +# Ignore test files and directories +/tests +/test-results +/coverage + +# Ignore documentation +/docs +/*.md + +# Ignore IDE-specific files +/.idea +/.vscode + +# Ignore npm-debug and other log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Ignore any other files you don't want to publish +.DS_Store +Thumbs.db \ No newline at end of file diff --git a/README.md b/README.md index 59448c0..9e0029a 100644 --- a/README.md +++ b/README.md @@ -88,14 +88,18 @@ The js-cloudimage-360-view project revolutionizes interactive 360-degree image v You can install `js-cloudimage-360-view` using one of the following methods: - ### Option 1: Add via CDN +### Option 1: Add via CDN -Include the CDN link to the `js-cloudimage-360-view` library at the end of your `` tag: +Include the CDN link to the `js-cloudimage-360-view` library at the end of your `` tag. Additionally, make sure to include the corresponding CSS file for proper styling: -```code +```html + ``` +### Note: +To ensure the `js-cloudimage-360-view` functionality works correctly, **you must also include the CSS file**. This is crucial for proper styling and display of the plugin. + This is the quickest way to get started without additional setup. #### Option 2: Install with Package Manager diff --git a/config/webpack-demo.config.js b/config/webpack-demo.config.js index caa59da..dce60bb 100644 --- a/config/webpack-demo.config.js +++ b/config/webpack-demo.config.js @@ -2,13 +2,13 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const htmlWebpackPlugin = new HtmlWebpackPlugin({ - template: path.join(__dirname, '../examples/src/index.html'), + template: path.join(__dirname, '../demo/index.html'), filename: './index.html', }); module.exports = { - entry: path.join(__dirname, '../examples/src/index.js'), + entry: path.join(__dirname, '../demo/index.js'), output: { - path: path.join(__dirname, '../examples/dist'), + path: path.join(__dirname, '../demo/dist'), filename: 'bundle[hash].js', }, module: { diff --git a/examples/src/constants.js b/demo/constants.js similarity index 100% rename from examples/src/constants.js rename to demo/constants.js diff --git a/examples/src/controllers.css b/demo/controllers.css similarity index 100% rename from examples/src/controllers.css rename to demo/controllers.css diff --git a/examples/src/hotspots-config.constant.js b/demo/hotspots-config.constant.js similarity index 100% rename from examples/src/hotspots-config.constant.js rename to demo/hotspots-config.constant.js diff --git a/examples/src/index.html b/demo/index.html similarity index 100% rename from examples/src/index.html rename to demo/index.html diff --git a/examples/src/index.js b/demo/index.js similarity index 99% rename from examples/src/index.js rename to demo/index.js index bee5acd..635aca6 100644 --- a/examples/src/index.js +++ b/demo/index.js @@ -1,5 +1,5 @@ import './controllers.css'; -import CI360 from '../../src'; +import CI360 from '../src'; import { EARBUDS_PLUGIN, diff --git a/examples/src/styles/main.css b/demo/styles/main.css similarity index 100% rename from examples/src/styles/main.css rename to demo/styles/main.css diff --git a/package.json b/package.json index 54be159..77fa78a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "js-cloudimage-360-view", - "version": "4.0.0", + "version": "4.0.0-beta.2", "main": "dist/index.js", "types": "dist/index.d.ts", "description": "", @@ -10,7 +10,7 @@ "type": "git", "url": "https://github.com/scaleflex/js-cloudimage-360-view" }, - "homepage": "#readme", + "homepage": "https://scaleflex.github.io/js-cloudimage-360-view/", "keywords": [ "image", "images", @@ -23,21 +23,19 @@ "360 product view" ], "scripts": { - "dev": "vite serve examples/src", - "clean:build": "rm -rf build", - "build:bundle": "vite build", + "dev": "vite serve demo", + "clean:build": "rm -rf dist", + "build:bundle": "npm run clean:build && vite build", "deploy:bundle": "npm run build:bundle && node bin/deploy-bundle", "clean:dist": "rm -rf dist", "dist": "npm run clean:dist && babel src -d dist --copy-files", - "clean:demo": "rm -rf examples/dist", - "build:demo": "npm run clean:demo && webpack --mode production --config config/webpack-demo.config.js", - "deploy:demo": "gh-pages -d examples/dist", - "publish:demo": "npm run build:demo && npm run deploy:demo" + "clean:demo": "rm -rf demo/dist", + "build:demo": "npm run clean:demo && vite --config vite-demo.config.js build", + "deploy:demo": "gh-pages -d dist", + "publish": "npm run build:demo && npm run deploy:demo" }, "dependencies": { - "@babel/runtime": "^7.17.0", "@popperjs/core": "^2.11.2", - "core-js": "^3.0.0", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1" }, @@ -69,6 +67,8 @@ "style-loader": "^3.3.2", "svg-inline-loader": "^0.8.2", "vite": "^5.4.10", + "vite-plugin-dts": "^4.3.0", + "vite-plugin-html": "^3.2.2", "vite-plugin-lib-inject-css": "^2.1.1", "webpack": "^5.95.0", "webpack-cli": "^5.0.1", diff --git a/vite-demo.config.js b/vite-demo.config.js new file mode 100644 index 0000000..101ddaf --- /dev/null +++ b/vite-demo.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + root: './demo', + base: '/js-cloudimage-360-view/', + build: { + outDir: '../dist', + }, +}); diff --git a/vite.config.js b/vite.config.js index 6954ea6..2c728b9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,18 +1,21 @@ /* eslint-disable no-undef */ import { defineConfig } from 'vite'; import { resolve } from 'path'; -import dts from 'vite-plugin-dts'; import { libInjectCss } from 'vite-plugin-lib-inject-css'; export default defineConfig({ - plugins: [libInjectCss(), dts({ include: ['lib'] })], + plugins: [libInjectCss()], build: { copyPublicDir: false, - lib: { entry: resolve(__dirname, 'src/index.js'), formats: ['es'] }, + lib: { + entry: resolve(__dirname, 'src/index.js'), + formats: ['es'], + }, rollupOptions: { output: { - assetFileNames: '[name][extname]', - entryFileNames: '[name].js', + dir: 'build', + assetFileNames: 'js-cloudimage-360-view.min[extname]', + entryFileNames: 'js-cloudimage-360-view.min.js', }, }, }, From 0ee760e448437bc683ec95d4e5e7538ffdff80d7 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Wed, 30 Oct 2024 15:26:44 +0300 Subject: [PATCH 29/31] fix: Demo page and control by keys --- demo/index.html | 27 ++------------------------- demo/index.js | 1 + src/ci360.service.js | 6 +++--- 3 files changed, 6 insertions(+), 28 deletions(-) diff --git a/demo/index.html b/demo/index.html index 0989e7e..50be0a9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -437,34 +437,11 @@

Customize

-
- -
-
- -