js-cloudimage-360-view 3.2.1 → 4.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierrc +9 -0
- package/README.md +318 -721
- package/dist/js-cloudimage-360-view.min.css +1 -0
- package/dist/js-cloudimage-360-view.min.js +2111 -0
- package/package.json +30 -17
- package/.env +0 -3
- package/CHANGELOG.md +0 -175
- package/bin/deploy-bundle.js +0 -63
- package/dist/ci360.service.js +0 -1270
- package/dist/ci360.utils.js +0 -78
- package/dist/constants/auto-play-behavior.js +0 -13
- package/dist/constants/falsy-values.js +0 -8
- package/dist/constants/index.js +0 -39
- package/dist/constants/orientations.js +0 -12
- package/dist/constants/props-require-reload.js +0 -33
- package/dist/constants/regex.js +0 -10
- package/dist/index.js +0 -102
- package/dist/static/css/hotspots.css +0 -222
- package/dist/static/css/style.css +0 -230
- package/dist/utils/auto-play/get-speed-factor.js +0 -12
- package/dist/utils/auto-play/is-completed-one-cycle.js +0 -27
- package/dist/utils/auto-play/loop.js +0 -56
- package/dist/utils/class-names/add-class.js +0 -15
- package/dist/utils/class-names/remove-class.js +0 -14
- package/dist/utils/container-elements/apply-styles-to-container.js +0 -14
- package/dist/utils/container-elements/create-360-view-circle-icon.js +0 -14
- package/dist/utils/container-elements/create-360-view-icon.js +0 -13
- package/dist/utils/container-elements/create-box-shadow.js +0 -14
- package/dist/utils/container-elements/create-canvas.js +0 -14
- package/dist/utils/container-elements/create-close-fullscreen-icon.js +0 -12
- package/dist/utils/container-elements/create-fullscreen-icon.js +0 -12
- package/dist/utils/container-elements/create-fullscreen-modal.js +0 -18
- package/dist/utils/container-elements/create-icons-container.js +0 -13
- package/dist/utils/container-elements/create-inner-box.js +0 -13
- package/dist/utils/container-elements/create-loader.js +0 -13
- package/dist/utils/container-elements/create-magnifier-icon.js +0 -12
- package/dist/utils/container-elements/index.js +0 -96
- package/dist/utils/container-elements/remove-child-from-parent.js +0 -14
- package/dist/utils/controls/get-item-skipped.js +0 -11
- package/dist/utils/controls/init-controls.js +0 -68
- package/dist/utils/hotspots/attach-events/hide-popup.js +0 -13
- package/dist/utils/hotspots/attach-events/show-popup.js +0 -12
- package/dist/utils/hotspots/configs-error-handler.js +0 -23
- package/dist/utils/hotspots/create-popper-instace.js +0 -29
- package/dist/utils/hotspots/elements/create-carousel-dot.js +0 -20
- package/dist/utils/hotspots/elements/create-carousel-image.js +0 -18
- package/dist/utils/hotspots/elements/create-hotspot-icon.js +0 -55
- package/dist/utils/hotspots/elements/create-hotspot-popup-link.js +0 -19
- package/dist/utils/hotspots/elements/create-hotspots.js +0 -20
- package/dist/utils/hotspots/elements/create-images-carousel.js +0 -23
- package/dist/utils/hotspots/elements/create-modal-description.js +0 -13
- package/dist/utils/hotspots/elements/create-modal-title.js +0 -13
- package/dist/utils/hotspots/elements/create-model-elements.js +0 -49
- package/dist/utils/hotspots/elements/create-popup-arrow.js +0 -14
- package/dist/utils/hotspots/elements/create-popup.js +0 -55
- package/dist/utils/hotspots/elements/create-read-more-btn.js +0 -15
- package/dist/utils/hotspots/fill-empty-coord-with-previous.js +0 -21
- package/dist/utils/hotspots/generate-hotspots-configs.js +0 -48
- package/dist/utils/hotspots/generate-popup-config.js +0 -27
- package/dist/utils/hotspots/get-hotspot-icon.js +0 -12
- package/dist/utils/hotspots/get-hotspot-orientation.js +0 -17
- package/dist/utils/hotspots/get-hotspot-popup-node.js +0 -12
- package/dist/utils/hotspots/get-popup-node.js +0 -12
- package/dist/utils/hotspots/hide-hotspot-icon.js +0 -11
- package/dist/utils/hotspots/hide-hotspots-icons.js +0 -15
- package/dist/utils/hotspots/is-mouse-on-hotspot.js +0 -12
- package/dist/utils/hotspots/prepare-hotspots-positions.js +0 -22
- package/dist/utils/hotspots/set-current-slide.js +0 -21
- package/dist/utils/hotspots/toggle-popup-events.js +0 -19
- package/dist/utils/hotspots/update-hotspot-icon-position.js +0 -19
- package/dist/utils/hotspots/update-hotspots.js +0 -40
- package/dist/utils/image-src/generate-images-path.js +0 -33
- package/dist/utils/image-src/is-props-change-require-reload.js +0 -18
- package/dist/utils/index.js +0 -211
- package/dist/utils/load-images/images-from-folder/prepare-images-from-folder.js +0 -25
- package/dist/utils/load-images/images-from-list/prepare-images-from-list.js +0 -21
- package/dist/utils/load-images/lazyload/init-lazyload.js +0 -41
- package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js +0 -14
- package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js +0 -20
- package/dist/utils/load-images/load-image-as-promise.js +0 -16
- package/dist/utils/load-images/load-images-relative-to-container-size.js +0 -19
- package/dist/utils/load-images/load-original-images.js +0 -44
- package/dist/utils/load-images/pad.js +0 -12
- package/dist/utils/load-images/preload-images.js +0 -28
- package/dist/utils/load-images/preload-original-images.js +0 -28
- package/dist/utils/magnify/get-current-original-image.js +0 -23
- package/dist/utils/magnify/get-cursor-position.js +0 -22
- package/dist/utils/magnify/magnify.js +0 -47
- package/dist/utils/magnify/move-magnifier.js +0 -39
- package/dist/utils/responsive/contain.js +0 -9
- package/dist/utils/responsive/fit.js +0 -29
- package/dist/utils/responsive/get-image-aspect-ratio.js +0 -31
- package/dist/utils/responsive/get-responsive-width-of-container.js +0 -11
- package/dist/utils/responsive/get-size-according-to-pixel-ratio.js +0 -15
- package/dist/utils/responsive/get-size-limit.js +0 -12
- package/dist/utils/spin-y/get-moving-direction.js +0 -18
- package/dist/utils/zoom/generate-zoom-in-steps.js +0 -18
- package/dist/utils/zoom/generate-zoom-out-steps.js +0 -18
- package/yarn-error.log +0 -101
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.initControls = void 0;
|
|
7
|
-
var _addClass = require("../class-names/add-class");
|
|
8
|
-
var initControls = function initControls(controlsConfig, controlsTriggers) {
|
|
9
|
-
var container = controlsConfig.container,
|
|
10
|
-
controlReverse = controlsConfig.controlReverse,
|
|
11
|
-
spinReverse = controlsConfig.spinReverse,
|
|
12
|
-
stopAtEdges = controlsConfig.stopAtEdges;
|
|
13
|
-
var onRightStart = controlsTriggers.onRightStart,
|
|
14
|
-
onLeftStart = controlsTriggers.onLeftStart,
|
|
15
|
-
onTopStart = controlsTriggers.onTopStart,
|
|
16
|
-
onBottomStart = controlsTriggers.onBottomStart,
|
|
17
|
-
onEventEnd = controlsTriggers.onEventEnd;
|
|
18
|
-
var controlElements = {};
|
|
19
|
-
var isReverse = controlReverse ? !spinReverse : spinReverse;
|
|
20
|
-
var left = container.querySelectorAll('.cloudimage-360-left, .cloudimage-360-prev')[0];
|
|
21
|
-
var right = container.querySelectorAll('.cloudimage-360-right, .cloudimage-360-next')[0];
|
|
22
|
-
var top = container.querySelector('.cloudimage-360-top');
|
|
23
|
-
var bottom = container.querySelector('.cloudimage-360-bottom');
|
|
24
|
-
if (left) {
|
|
25
|
-
left.style.display = 'block';
|
|
26
|
-
left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
|
|
27
|
-
left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, {
|
|
28
|
-
passive: true
|
|
29
|
-
});
|
|
30
|
-
left.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
|
|
31
|
-
left.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
|
|
32
|
-
controlElements.left = left;
|
|
33
|
-
}
|
|
34
|
-
if (right) {
|
|
35
|
-
right.style.display = 'block';
|
|
36
|
-
right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
|
|
37
|
-
right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, {
|
|
38
|
-
passive: true
|
|
39
|
-
});
|
|
40
|
-
right.addEventListener('mouseup', onEventEnd);
|
|
41
|
-
right.addEventListener('touchend', onEventEnd);
|
|
42
|
-
controlElements.right = right;
|
|
43
|
-
}
|
|
44
|
-
if (top) {
|
|
45
|
-
top.style.display = 'block';
|
|
46
|
-
top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart);
|
|
47
|
-
top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart);
|
|
48
|
-
top.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
|
|
49
|
-
top.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
|
|
50
|
-
controlElements.top = top;
|
|
51
|
-
}
|
|
52
|
-
if (bottom) {
|
|
53
|
-
bottom.style.display = 'block';
|
|
54
|
-
bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart);
|
|
55
|
-
bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart);
|
|
56
|
-
bottom.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
|
|
57
|
-
bottom.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
|
|
58
|
-
controlElements.bottom = bottom;
|
|
59
|
-
}
|
|
60
|
-
if (isReverse ? right : left) {
|
|
61
|
-
if (stopAtEdges) {
|
|
62
|
-
(0, _addClass.addClass)(isReverse ? right : left, 'not-active');
|
|
63
|
-
(0, _addClass.addClass)(isReverse ? top : bottom, 'not-active');
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return controlElements;
|
|
67
|
-
};
|
|
68
|
-
exports.initControls = initControls;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.hidePopup = void 0;
|
|
7
|
-
var hidePopup = function hidePopup(popup, isVisible) {
|
|
8
|
-
if (!isVisible) {
|
|
9
|
-
popup.removeAttribute('data-show');
|
|
10
|
-
popup.removeAttribute('data-cloudimage-360-show');
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
exports.hidePopup = hidePopup;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.showPopup = void 0;
|
|
7
|
-
var showPopup = function showPopup(popup, popperInstance) {
|
|
8
|
-
popup.setAttribute('data-show', '');
|
|
9
|
-
popup.setAttribute('data-cloudimage-360-show', '');
|
|
10
|
-
popperInstance.update();
|
|
11
|
-
};
|
|
12
|
-
exports.showPopup = showPopup;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.configsErrorHandler = void 0;
|
|
7
|
-
var configsErrorHandler = function configsErrorHandler(hotspotProps) {
|
|
8
|
-
var _hotspotProps$variant = hotspotProps.variant,
|
|
9
|
-
variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant;
|
|
10
|
-
var url = variant.url,
|
|
11
|
-
title = variant.title,
|
|
12
|
-
anchorId = variant.anchorId,
|
|
13
|
-
images = variant.images,
|
|
14
|
-
description = variant.description,
|
|
15
|
-
moreDetailsUrl = variant.moreDetailsUrl;
|
|
16
|
-
if (url && !title) {
|
|
17
|
-
console.error('Cloudimage-360: Hotspot config with variant link must have title for the link');
|
|
18
|
-
}
|
|
19
|
-
if (!title && !url && !anchorId && !images && !description && !moreDetailsUrl) {
|
|
20
|
-
console.error('Cloudimage-360: Hotspot config with custom variant must provide anchorId');
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
exports.configsErrorHandler = configsErrorHandler;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createPopperInstance = void 0;
|
|
7
|
-
var _core = require("@popperjs/core");
|
|
8
|
-
var createPopperInstance = function createPopperInstance(popper, popupProps, container) {
|
|
9
|
-
var placement = popupProps.placement,
|
|
10
|
-
offset = popupProps.offset;
|
|
11
|
-
var virtualReference = document.createElement('div');
|
|
12
|
-
var popperInstance = (0, _core.createPopper)(virtualReference, popper);
|
|
13
|
-
popperInstance.setOptions({
|
|
14
|
-
placement: placement,
|
|
15
|
-
modifiers: [{
|
|
16
|
-
name: 'offset',
|
|
17
|
-
options: {
|
|
18
|
-
offset: offset
|
|
19
|
-
}
|
|
20
|
-
}, {
|
|
21
|
-
name: 'preventOverflow',
|
|
22
|
-
options: {
|
|
23
|
-
boundary: container
|
|
24
|
-
}
|
|
25
|
-
}]
|
|
26
|
-
});
|
|
27
|
-
return popperInstance;
|
|
28
|
-
};
|
|
29
|
-
exports.createPopperInstance = createPopperInstance;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createCarouselDot = void 0;
|
|
7
|
-
var _setCurrentSlide = require("../set-current-slide");
|
|
8
|
-
var createCarouselDot = function createCarouselDot(image, imageIndex, popup) {
|
|
9
|
-
var imageDot = document.createElement('button');
|
|
10
|
-
imageDot.className = 'cloudimage-360-carousel-dot';
|
|
11
|
-
imageDot.onclick = function () {
|
|
12
|
-
return (0, _setCurrentSlide.setCurrentSlide)(image, imageDot, popup);
|
|
13
|
-
};
|
|
14
|
-
if (!imageIndex) {
|
|
15
|
-
imageDot.className += ' active-dot';
|
|
16
|
-
imageDot.setAttribute('data-active-dot', '');
|
|
17
|
-
}
|
|
18
|
-
return imageDot;
|
|
19
|
-
};
|
|
20
|
-
exports.createCarouselDot = createCarouselDot;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createCarouselImage = void 0;
|
|
7
|
-
var createCarouselImage = function createCarouselImage(image, imageIndex) {
|
|
8
|
-
var carouselImage = document.createElement('img');
|
|
9
|
-
carouselImage.className = 'cloudimage-360-carousel-image';
|
|
10
|
-
carouselImage.setAttribute('src', image.src || '');
|
|
11
|
-
carouselImage.setAttribute('alt', image.alt || 'more-info');
|
|
12
|
-
if (!imageIndex) {
|
|
13
|
-
carouselImage.setAttribute('data-active-image', '');
|
|
14
|
-
carouselImage.className += ' active-image';
|
|
15
|
-
}
|
|
16
|
-
return carouselImage;
|
|
17
|
-
};
|
|
18
|
-
exports.createCarouselImage = createCarouselImage;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createHotspotIcon = void 0;
|
|
7
|
-
var _hidePopup = require("../attach-events/hide-popup");
|
|
8
|
-
var _showPopup = require("../attach-events/show-popup");
|
|
9
|
-
var _hideHotspotIcon = require("../hide-hotspot-icon");
|
|
10
|
-
var createHotspotIcon = function createHotspotIcon(container, hotspotConfig, popup, popperInstance) {
|
|
11
|
-
var indicatorSelector = hotspotConfig.indicatorSelector,
|
|
12
|
-
variant = hotspotConfig.variant;
|
|
13
|
-
var url = variant.url,
|
|
14
|
-
anchorId = variant.anchorId;
|
|
15
|
-
var _hotspotConfig$popupP = hotspotConfig.popupProps.open,
|
|
16
|
-
open = _hotspotConfig$popupP === void 0 ? false : _hotspotConfig$popupP;
|
|
17
|
-
var isVisible;
|
|
18
|
-
var hotspotIcon = document.createElement('div');
|
|
19
|
-
hotspotIcon.style.position = 'absolute';
|
|
20
|
-
hotspotIcon.className = "cloudimage-360-hotspot-".concat(url ? 'link' : 'custom', "-icon ").concat(indicatorSelector);
|
|
21
|
-
hotspotIcon.setAttribute('data-hotspot-icon-id', anchorId);
|
|
22
|
-
hotspotIcon.setAttribute('data-cloudimage-360-hotspot', '');
|
|
23
|
-
var popupMouseEnter = function popupMouseEnter() {
|
|
24
|
-
isVisible = true;
|
|
25
|
-
};
|
|
26
|
-
var popupMouseLeave = function popupMouseLeave() {
|
|
27
|
-
isVisible = false;
|
|
28
|
-
!open && (0, _hidePopup.hidePopup)(popup, isVisible);
|
|
29
|
-
};
|
|
30
|
-
hotspotIcon.onclick = function (e) {
|
|
31
|
-
return e.stopPropagation();
|
|
32
|
-
};
|
|
33
|
-
var showEvents = ['mouseenter', 'touchstart', 'focus'];
|
|
34
|
-
var hideEvents = ['mouseleave', 'blur'];
|
|
35
|
-
showEvents.forEach(function (event) {
|
|
36
|
-
hotspotIcon.addEventListener(event, function () {
|
|
37
|
-
return (0, _showPopup.showPopup)(popup, popperInstance);
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
if (!open) {
|
|
41
|
-
hideEvents.forEach(function (event) {
|
|
42
|
-
hotspotIcon.addEventListener(event, function () {
|
|
43
|
-
return setTimeout(function () {
|
|
44
|
-
return (0, _hidePopup.hidePopup)(popup, isVisible);
|
|
45
|
-
}, 160);
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
popup.addEventListener('mouseenter', popupMouseEnter);
|
|
50
|
-
popup.addEventListener('mouseleave', popupMouseLeave);
|
|
51
|
-
(0, _hideHotspotIcon.hideHotspotIcon)(hotspotIcon);
|
|
52
|
-
container.appendChild(hotspotIcon);
|
|
53
|
-
return hotspotIcon;
|
|
54
|
-
};
|
|
55
|
-
exports.createHotspotIcon = createHotspotIcon;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createHotspotPopupLink = void 0;
|
|
7
|
-
var createHotspotPopupLink = function createHotspotPopupLink(variant) {
|
|
8
|
-
var url = variant.url,
|
|
9
|
-
title = variant.title,
|
|
10
|
-
newTab = variant.newTab;
|
|
11
|
-
var hyperLink = document.createElement('a');
|
|
12
|
-
hyperLink.href = url;
|
|
13
|
-
hyperLink.innerText = title;
|
|
14
|
-
if (newTab) {
|
|
15
|
-
hyperLink.target = '_blank';
|
|
16
|
-
}
|
|
17
|
-
return hyperLink;
|
|
18
|
-
};
|
|
19
|
-
exports.createHotspotPopupLink = createHotspotPopupLink;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createHotspots = void 0;
|
|
7
|
-
var _createPopperInstace = require("../create-popper-instace");
|
|
8
|
-
var _createHotspotIcon = require("./create-hotspot-icon");
|
|
9
|
-
var _createPopup = require("./create-popup");
|
|
10
|
-
var createHotspots = function createHotspots(container, hotspotsProps) {
|
|
11
|
-
hotspotsProps.forEach(function (hotspotProps) {
|
|
12
|
-
var popupProps = hotspotProps.popupProps;
|
|
13
|
-
var popup = (0, _createPopup.createPopup)(container, hotspotProps, popupProps);
|
|
14
|
-
var popperInstance = (0, _createPopperInstace.createPopperInstance)(popup, popupProps, container);
|
|
15
|
-
var hotspotIcon = (0, _createHotspotIcon.createHotspotIcon)(container, hotspotProps, popup, popperInstance);
|
|
16
|
-
popperInstance.state.elements.reference = hotspotIcon;
|
|
17
|
-
popperInstance.update();
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
exports.createHotspots = createHotspots;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createImagesCarousel = void 0;
|
|
7
|
-
var _createCarouselDot = require("./create-carousel-dot");
|
|
8
|
-
var _createCarouselImage = require("./create-carousel-image");
|
|
9
|
-
var createImagesCarousel = function createImagesCarousel(images, popup, container) {
|
|
10
|
-
var imagesCarousel = document.createElement('div');
|
|
11
|
-
var carouselDots = document.createElement('div');
|
|
12
|
-
imagesCarousel.className = 'cloudimage-360-images-carousel';
|
|
13
|
-
imagesCarousel.style.maxWidth = "".concat(container.offsetWidth, "px");
|
|
14
|
-
carouselDots.className = 'cloudimage-360-carousel-dots';
|
|
15
|
-
images.forEach(function (image, imageIndex) {
|
|
16
|
-
var carouselImage = (0, _createCarouselImage.createCarouselImage)(image, imageIndex);
|
|
17
|
-
var carouselDot = (0, _createCarouselDot.createCarouselDot)(carouselImage, imageIndex, popup);
|
|
18
|
-
carouselDots.appendChild(carouselDot);
|
|
19
|
-
imagesCarousel.appendChild(carouselImage);
|
|
20
|
-
});
|
|
21
|
-
return [imagesCarousel, carouselDots];
|
|
22
|
-
};
|
|
23
|
-
exports.createImagesCarousel = createImagesCarousel;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createModalDescription = void 0;
|
|
7
|
-
var createModalDescription = function createModalDescription(description) {
|
|
8
|
-
var modalDescription = document.createElement('p');
|
|
9
|
-
modalDescription.innerText = description;
|
|
10
|
-
modalDescription.className = 'cloudimage-360-modal-description';
|
|
11
|
-
return modalDescription;
|
|
12
|
-
};
|
|
13
|
-
exports.createModalDescription = createModalDescription;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createModalTitle = void 0;
|
|
7
|
-
var createModalTitle = function createModalTitle(title) {
|
|
8
|
-
var modalTitle = document.createElement('h4');
|
|
9
|
-
modalTitle.innerText = title;
|
|
10
|
-
modalTitle.className = 'cloudimage-360-modal-title';
|
|
11
|
-
return modalTitle;
|
|
12
|
-
};
|
|
13
|
-
exports.createModalTitle = createModalTitle;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.createModalElements = void 0;
|
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
-
var _createImagesCarousel3 = require("./create-images-carousel");
|
|
10
|
-
var _createModalDescription = require("./create-modal-description");
|
|
11
|
-
var _createModalTitle = require("./create-modal-title");
|
|
12
|
-
var _createReadMoreBtn = require("./create-read-more-btn");
|
|
13
|
-
var createModalElements = function createModalElements(variant, container, popup) {
|
|
14
|
-
var images = variant.images,
|
|
15
|
-
title = variant.title,
|
|
16
|
-
description = variant.description,
|
|
17
|
-
moreDetailsUrl = variant.moreDetailsUrl,
|
|
18
|
-
_variant$moreDetailsT = variant.moreDetailsTitle,
|
|
19
|
-
moreDetailsTitle = _variant$moreDetailsT === void 0 ? 'Read more' : _variant$moreDetailsT;
|
|
20
|
-
var modalWrapper = document.createElement('div');
|
|
21
|
-
modalWrapper.className = 'cloudimage-360-modal-wrapper';
|
|
22
|
-
if (images) {
|
|
23
|
-
var imagesCarouselWrapper = document.createElement('div');
|
|
24
|
-
var _createImagesCarousel = (0, _createImagesCarousel3.createImagesCarousel)(images, popup, container),
|
|
25
|
-
_createImagesCarousel2 = (0, _slicedToArray2.default)(_createImagesCarousel, 2),
|
|
26
|
-
imagesCarousel = _createImagesCarousel2[0],
|
|
27
|
-
carouselDots = _createImagesCarousel2[1];
|
|
28
|
-
imagesCarouselWrapper.appendChild(imagesCarousel);
|
|
29
|
-
if (images.length > 1) {
|
|
30
|
-
imagesCarouselWrapper.appendChild(carouselDots);
|
|
31
|
-
}
|
|
32
|
-
modalWrapper.appendChild(imagesCarouselWrapper);
|
|
33
|
-
imagesCarouselWrapper.className = 'cloudimage-360-images-carousel-wrapper';
|
|
34
|
-
}
|
|
35
|
-
if (title) {
|
|
36
|
-
var modalTitle = (0, _createModalTitle.createModalTitle)(title);
|
|
37
|
-
modalWrapper.appendChild(modalTitle);
|
|
38
|
-
}
|
|
39
|
-
if (description) {
|
|
40
|
-
var modalDescription = (0, _createModalDescription.createModalDescription)(description);
|
|
41
|
-
modalWrapper.appendChild(modalDescription);
|
|
42
|
-
}
|
|
43
|
-
if (moreDetailsUrl) {
|
|
44
|
-
var readMoreBtn = (0, _createReadMoreBtn.createReadMoreBtn)(moreDetailsUrl, moreDetailsTitle);
|
|
45
|
-
modalWrapper.appendChild(readMoreBtn);
|
|
46
|
-
}
|
|
47
|
-
popup.appendChild(modalWrapper);
|
|
48
|
-
};
|
|
49
|
-
exports.createModalElements = createModalElements;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createPopupArrow = void 0;
|
|
7
|
-
var createPopupArrow = function createPopupArrow() {
|
|
8
|
-
var popupArrow = document.createElement('div');
|
|
9
|
-
popupArrow.setAttribute('data-popper-arrow', '');
|
|
10
|
-
popupArrow.setAttribute('data-cloudimage-360-hotspot', '');
|
|
11
|
-
popupArrow.className = 'cloudimage-360-popup-arrow';
|
|
12
|
-
return popupArrow;
|
|
13
|
-
};
|
|
14
|
-
exports.createPopupArrow = createPopupArrow;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.createPopup = void 0;
|
|
8
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
-
var _createHotspotPopupLink = require("./create-hotspot-popup-link");
|
|
10
|
-
var _getPopupNode = require("../get-popup-node");
|
|
11
|
-
var _createPopupArrow = require("./create-popup-arrow");
|
|
12
|
-
var _createModelElements = require("./create-model-elements");
|
|
13
|
-
var createPopup = function createPopup(container, hotspotConfig, popupProps) {
|
|
14
|
-
var variant = hotspotConfig.variant;
|
|
15
|
-
var popupSelector = popupProps.popupSelector,
|
|
16
|
-
arrow = popupProps.arrow;
|
|
17
|
-
var url = variant.url,
|
|
18
|
-
images = variant.images,
|
|
19
|
-
title = variant.title,
|
|
20
|
-
anchorId = variant.anchorId,
|
|
21
|
-
description = variant.description,
|
|
22
|
-
moreDetailsUrl = variant.moreDetailsUrl;
|
|
23
|
-
var popup = document.createElement('div');
|
|
24
|
-
popup.className = "cloudimage-360-hotspot-popup ".concat(popupSelector);
|
|
25
|
-
popup.setAttribute('data-hotspot-popup-id', anchorId);
|
|
26
|
-
popup.setAttribute('data-cloudimage-360-hotspot', '');
|
|
27
|
-
popup.style.minHeight = 16;
|
|
28
|
-
popup.style.minWidth = 16;
|
|
29
|
-
popup.style.cursor = 'default';
|
|
30
|
-
popup.onclick = function (e) {
|
|
31
|
-
return e.stopPropagation();
|
|
32
|
-
};
|
|
33
|
-
if ((0, _typeof2.default)(variant) === 'object' && images || description || moreDetailsUrl || title && !url) {
|
|
34
|
-
(0, _createModelElements.createModalElements)(variant, container, popup);
|
|
35
|
-
} else if (url) {
|
|
36
|
-
var hotspotPopupLink = (0, _createHotspotPopupLink.createHotspotPopupLink)(variant);
|
|
37
|
-
popup.appendChild(hotspotPopupLink);
|
|
38
|
-
} else if (typeof variant === 'string') {
|
|
39
|
-
try {
|
|
40
|
-
var popupNode = (0, _getPopupNode.getPopupNode)(variant);
|
|
41
|
-
var userPopup = popupNode.cloneNode(true);
|
|
42
|
-
popup.appendChild(userPopup);
|
|
43
|
-
popupNode.parentNode.removeChild(popupNode);
|
|
44
|
-
} catch (_unused) {
|
|
45
|
-
console.error("Cloudimage-360: Element with anchorId '".concat(anchorId, "' not exist in the DOM"));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (arrow) {
|
|
49
|
-
var popupArrow = (0, _createPopupArrow.createPopupArrow)();
|
|
50
|
-
popup.appendChild(popupArrow);
|
|
51
|
-
}
|
|
52
|
-
container.appendChild(popup);
|
|
53
|
-
return popup;
|
|
54
|
-
};
|
|
55
|
-
exports.createPopup = createPopup;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.createReadMoreBtn = void 0;
|
|
7
|
-
var createReadMoreBtn = function createReadMoreBtn(moreDetailsUrl, moreDetailsTitle) {
|
|
8
|
-
var readMoreBtn = document.createElement('a');
|
|
9
|
-
readMoreBtn.href = moreDetailsUrl;
|
|
10
|
-
readMoreBtn.innerText = moreDetailsTitle;
|
|
11
|
-
readMoreBtn.className = 'cloudimage-360-modal-more-details';
|
|
12
|
-
readMoreBtn.target = '_blank';
|
|
13
|
-
return readMoreBtn;
|
|
14
|
-
};
|
|
15
|
-
exports.createReadMoreBtn = createReadMoreBtn;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.fillEmptyCoordWithPrevious = void 0;
|
|
7
|
-
/* eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }] */
|
|
8
|
-
|
|
9
|
-
var fillEmptyCoordWithPrevious = function fillEmptyCoordWithPrevious(positions, hotspotIndex, coord) {
|
|
10
|
-
var coordIndexes = new Array(hotspotIndex);
|
|
11
|
-
var intialValue = '0%';
|
|
12
|
-
for (var i = coordIndexes.length - 1; i > -1; i--) {
|
|
13
|
-
var _positions$i;
|
|
14
|
-
var previousXCoord = (_positions$i = positions[i]) === null || _positions$i === void 0 ? void 0 : _positions$i[coord];
|
|
15
|
-
if (previousXCoord) {
|
|
16
|
-
return previousXCoord;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
return intialValue;
|
|
20
|
-
};
|
|
21
|
-
exports.fillEmptyCoordWithPrevious = fillEmptyCoordWithPrevious;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.generateHotspotsConfigs = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _configsErrorHandler = require("./configs-error-handler");
|
|
10
|
-
var _generatePopupConfig = require("./generate-popup-config");
|
|
11
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
|
-
var generateHotspotsConfigs = function generateHotspotsConfigs(hotspotsProps) {
|
|
14
|
-
var hotspotsConfigs = hotspotsProps.map(function (hotspotProps) {
|
|
15
|
-
var _hotspotProps$variant = hotspotProps.variant,
|
|
16
|
-
variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant,
|
|
17
|
-
_hotspotProps$positio = hotspotProps.positions,
|
|
18
|
-
positions = _hotspotProps$positio === void 0 ? [] : _hotspotProps$positio,
|
|
19
|
-
_hotspotProps$indicat = hotspotProps.indicatorSelector,
|
|
20
|
-
indicatorSelector = _hotspotProps$indicat === void 0 ? '' : _hotspotProps$indicat,
|
|
21
|
-
_hotspotProps$popupPr = hotspotProps.popupProps,
|
|
22
|
-
popupProps = _hotspotProps$popupPr === void 0 ? {} : _hotspotProps$popupPr,
|
|
23
|
-
_hotspotProps$orienta = hotspotProps.orientation,
|
|
24
|
-
orientation = _hotspotProps$orienta === void 0 ? 'x' : _hotspotProps$orienta,
|
|
25
|
-
_hotspotProps$initial = hotspotProps.initialDimensions,
|
|
26
|
-
initialDimensions = _hotspotProps$initial === void 0 ? [500, 500] : _hotspotProps$initial;
|
|
27
|
-
(0, _configsErrorHandler.configsErrorHandler)(hotspotProps);
|
|
28
|
-
var popupConfig = (0, _generatePopupConfig.generatePopupConfig)(popupProps);
|
|
29
|
-
var anchorId = variant === null || variant === void 0 ? void 0 : variant.anchorId;
|
|
30
|
-
if (!anchorId) {
|
|
31
|
-
var uniqueID = Math.floor(Math.random() * 10000);
|
|
32
|
-
anchorId = "cloudimage-360-".concat(uniqueID);
|
|
33
|
-
}
|
|
34
|
-
var hotspotConfig = {
|
|
35
|
-
variant: _objectSpread(_objectSpread({}, variant), {}, {
|
|
36
|
-
anchorId: anchorId
|
|
37
|
-
}),
|
|
38
|
-
popupProps: popupConfig,
|
|
39
|
-
positions: positions,
|
|
40
|
-
indicatorSelector: indicatorSelector,
|
|
41
|
-
initialDimensions: initialDimensions,
|
|
42
|
-
orientation: orientation.toLowerCase()
|
|
43
|
-
};
|
|
44
|
-
return hotspotConfig;
|
|
45
|
-
});
|
|
46
|
-
return hotspotsConfigs;
|
|
47
|
-
};
|
|
48
|
-
exports.generateHotspotsConfigs = generateHotspotsConfigs;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.generatePopupConfig = void 0;
|
|
7
|
-
var generatePopupConfig = function generatePopupConfig(popupProps) {
|
|
8
|
-
var _popupProps$popupSele = popupProps.popupSelector,
|
|
9
|
-
popupSelector = _popupProps$popupSele === void 0 ? '' : _popupProps$popupSele,
|
|
10
|
-
_popupProps$arrow = popupProps.arrow,
|
|
11
|
-
arrow = _popupProps$arrow === void 0 ? true : _popupProps$arrow,
|
|
12
|
-
_popupProps$offset = popupProps.offset,
|
|
13
|
-
offset = _popupProps$offset === void 0 ? [0, 10] : _popupProps$offset,
|
|
14
|
-
_popupProps$placement = popupProps.placement,
|
|
15
|
-
placement = _popupProps$placement === void 0 ? 'auto' : _popupProps$placement,
|
|
16
|
-
_popupProps$open = popupProps.open,
|
|
17
|
-
open = _popupProps$open === void 0 ? false : _popupProps$open;
|
|
18
|
-
var popupConfig = {
|
|
19
|
-
popupSelector: popupSelector,
|
|
20
|
-
arrow: arrow,
|
|
21
|
-
offset: offset,
|
|
22
|
-
placement: placement,
|
|
23
|
-
open: open
|
|
24
|
-
};
|
|
25
|
-
return popupConfig;
|
|
26
|
-
};
|
|
27
|
-
exports.generatePopupConfig = generatePopupConfig;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getHotspotIcon = void 0;
|
|
7
|
-
var getHotspotIcon = function getHotspotIcon(anchorId) {
|
|
8
|
-
var hotspotIconSelector = "[data-hotspot-icon-id=".concat(anchorId, "]");
|
|
9
|
-
var hotspotIcon = document.querySelector(hotspotIconSelector);
|
|
10
|
-
return hotspotIcon;
|
|
11
|
-
};
|
|
12
|
-
exports.getHotspotIcon = getHotspotIcon;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getHotspotOriantaion = void 0;
|
|
7
|
-
var getHotspotOriantaion = function getHotspotOriantaion(orientation) {
|
|
8
|
-
switch (orientation.toLowerCase()) {
|
|
9
|
-
case 'x-axis':
|
|
10
|
-
return 'x';
|
|
11
|
-
case 'y-axis':
|
|
12
|
-
return 'y';
|
|
13
|
-
default:
|
|
14
|
-
return 'x';
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
exports.getHotspotOriantaion = getHotspotOriantaion;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getHotspotPopupNode = void 0;
|
|
7
|
-
var getHotspotPopupNode = function getHotspotPopupNode(anchorId) {
|
|
8
|
-
var hotspotPopupSelector = "[data-hotspot-popup-id=".concat(anchorId, "]");
|
|
9
|
-
var hotspotPopup = document.querySelector(hotspotPopupSelector);
|
|
10
|
-
return hotspotPopup;
|
|
11
|
-
};
|
|
12
|
-
exports.getHotspotPopupNode = getHotspotPopupNode;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getPopupNode = void 0;
|
|
7
|
-
var getPopupNode = function getPopupNode(popupId) {
|
|
8
|
-
var popupSelector = 'data-cloudimage-360-hotspots';
|
|
9
|
-
var popupNode = document.querySelector("[".concat(popupSelector, "=").concat(popupId, "]"));
|
|
10
|
-
return popupNode;
|
|
11
|
-
};
|
|
12
|
-
exports.getPopupNode = getPopupNode;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.hideHotspotIcon = void 0;
|
|
7
|
-
var hideHotspotIcon = function hideHotspotIcon(icon) {
|
|
8
|
-
icon.style.visibility = 'hidden';
|
|
9
|
-
icon.style.opacity = 0;
|
|
10
|
-
};
|
|
11
|
-
exports.hideHotspotIcon = hideHotspotIcon;
|