js-cloudimage-360-view 2.7.7 → 2.7.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/CHANGELOG.md +15 -0
- package/README.md +12 -2
- package/dist/ci360.service.js +75 -77
- package/dist/constants/props-require-reload.js +21 -0
- package/dist/index.js +37 -16
- package/dist/static/css/style.css +107 -0
- package/dist/utils/image-src/is-props-change-require-reload.js +23 -0
- package/dist/utils/index.js +4 -4
- package/package.json +1 -1
- package/dist/constants/image-src-props.js +0 -8
- package/dist/utils/image-src/is-src-props-changed.js +0 -23
package/CHANGELOG.md
CHANGED
|
@@ -25,6 +25,21 @@ Types of changes:
|
|
|
25
25
|
- ...
|
|
26
26
|
|
|
27
27
|
-------------
|
|
28
|
+
## 2.8.10 - 2022-03-01
|
|
29
|
+
### Fixed
|
|
30
|
+
- image quality in fullscreen
|
|
31
|
+
- resized image loading
|
|
32
|
+
|
|
33
|
+
## 2.7.9 - 2022-02-27
|
|
34
|
+
### Fixed
|
|
35
|
+
- typo in documentation
|
|
36
|
+
|
|
37
|
+
## 2.7.8 - 2022-02-27
|
|
38
|
+
### Added
|
|
39
|
+
- possibility to add new view to CI360 views
|
|
40
|
+
### Fixed
|
|
41
|
+
- re-render method
|
|
42
|
+
|
|
28
43
|
## 2.7.7 - 2022-02-24
|
|
29
44
|
### Fixed
|
|
30
45
|
- container width on mobile
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://github.com/scaleflex/js-cloudimage-360-view/releases)
|
|
2
2
|
[](#contributing)
|
|
3
3
|
[](https://opensource.org/licenses/MIT)
|
|
4
4
|
[](https://www.scaleflex.it/en/home)
|
|
@@ -105,6 +105,17 @@ window.CI360.init();
|
|
|
105
105
|
> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
|
|
106
106
|
> <script>window.CI360.init(); // initialize the plugin when you need</script>
|
|
107
107
|
> ```
|
|
108
|
+
|
|
109
|
+
### add
|
|
110
|
+
|
|
111
|
+
###### Type: **Function**
|
|
112
|
+
|
|
113
|
+
add new view by id to cloudimage 360 views.
|
|
114
|
+
|
|
115
|
+
```javascript
|
|
116
|
+
window.CI360.add(idOfView: string);
|
|
117
|
+
```
|
|
118
|
+
|
|
108
119
|
### update
|
|
109
120
|
|
|
110
121
|
###### Type: **Function**
|
|
@@ -230,7 +241,6 @@ data-api-version="v7"
|
|
|
230
241
|
```javascript
|
|
231
242
|
data-api-version="null"
|
|
232
243
|
```
|
|
233
|
-
### data-filename (or filename)
|
|
234
244
|
### data-filename-x (or filename-x)
|
|
235
245
|
### ~~data-filename (or filename)~~ [deprecated]
|
|
236
246
|
|
package/dist/ci360.service.js
CHANGED
|
@@ -248,10 +248,10 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
|
|
251
|
-
return
|
|
251
|
+
return image;
|
|
252
252
|
});
|
|
253
253
|
var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
|
|
254
|
-
return
|
|
254
|
+
return image;
|
|
255
255
|
});
|
|
256
256
|
var totalAmount = this.amountX + this.amountY;
|
|
257
257
|
var totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length;
|
|
@@ -277,7 +277,7 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
277
277
|
|
|
278
278
|
if (this.allowSpinY) {
|
|
279
279
|
var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
|
|
280
|
-
(0, _utils.preloadOriginalImages)(this.
|
|
280
|
+
(0, _utils.preloadOriginalImages)(this.srcYConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
283
|
}, {
|
|
@@ -665,6 +665,10 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
665
665
|
this.container.height = window.innerHeight * this.devicePixelRatio;
|
|
666
666
|
this.container.style.height = window.innerHeight + 'px';
|
|
667
667
|
this.container.style.maxWidth = 'unset';
|
|
668
|
+
this.canvas.width = window.innerWidth * this.devicePixelRatio;
|
|
669
|
+
this.canvas.style.width = window.innerWidth + 'px';
|
|
670
|
+
this.canvas.height = window.innerHeight * this.devicePixelRatio;
|
|
671
|
+
this.canvas.style.height = window.innerHeight + 'px';
|
|
668
672
|
return;
|
|
669
673
|
}
|
|
670
674
|
|
|
@@ -683,10 +687,10 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
683
687
|
}
|
|
684
688
|
|
|
685
689
|
var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
|
|
686
|
-
return
|
|
690
|
+
return image;
|
|
687
691
|
});
|
|
688
692
|
var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
|
|
689
|
-
return
|
|
693
|
+
return image;
|
|
690
694
|
});
|
|
691
695
|
var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
|
|
692
696
|
|
|
@@ -717,11 +721,11 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
717
721
|
this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
|
|
718
722
|
var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
|
|
719
723
|
if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
|
|
720
|
-
(0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X)
|
|
724
|
+
(0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
|
|
721
725
|
|
|
722
726
|
if (this.allowSpinY) {
|
|
723
727
|
var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
|
|
724
|
-
(0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y)
|
|
728
|
+
(0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y));
|
|
725
729
|
}
|
|
726
730
|
}
|
|
727
731
|
}, {
|
|
@@ -795,13 +799,9 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
795
799
|
value: function onFirstImageLoaded(image) {
|
|
796
800
|
if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
|
|
797
801
|
var ctx = this.canvas.getContext("2d");
|
|
802
|
+
this.updateContainerAndCanvasSize(image);
|
|
798
803
|
|
|
799
804
|
if (this.fullscreenView) {
|
|
800
|
-
this.canvas.width = window.innerWidth * this.devicePixelRatio;
|
|
801
|
-
this.canvas.style.width = window.innerWidth + 'px';
|
|
802
|
-
this.canvas.height = window.innerHeight * this.devicePixelRatio;
|
|
803
|
-
this.canvas.style.height = window.innerHeight + 'px';
|
|
804
|
-
|
|
805
805
|
var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
|
|
806
806
|
offsetX = _contain2.offsetX,
|
|
807
807
|
offsetY = _contain2.offsetY,
|
|
@@ -815,10 +815,6 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
815
815
|
this.addCloseFullscreenView();
|
|
816
816
|
ctx.drawImage(image, offsetX, offsetY, width, height);
|
|
817
817
|
} else {
|
|
818
|
-
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
|
|
819
|
-
this.canvas.style.width = this.container.offsetWidth + 'px';
|
|
820
|
-
this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
|
|
821
|
-
this.canvas.style.height = this.container.offsetHeight + 'px';
|
|
822
818
|
ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
|
|
823
819
|
}
|
|
824
820
|
|
|
@@ -956,19 +952,33 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
956
952
|
window.clearTimeout(this.loopTimeoutId);
|
|
957
953
|
}
|
|
958
954
|
}, {
|
|
959
|
-
key: "
|
|
960
|
-
value: function
|
|
955
|
+
key: "updateView",
|
|
956
|
+
value: function updateView(forceUpdate, viewers) {
|
|
957
|
+
var _this5 = this;
|
|
958
|
+
|
|
961
959
|
var container = this.container;
|
|
962
960
|
var imageProps = (0, _ci.get360ViewProps)(container);
|
|
963
|
-
var srcPropsChanged = (0, _utils.
|
|
964
|
-
var
|
|
961
|
+
var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
|
|
962
|
+
var reInitView = srcPropsChanged || forceUpdate;
|
|
963
|
+
|
|
964
|
+
if (reInitView) {
|
|
965
|
+
var oldElement = this.container;
|
|
966
|
+
var viewIndex = viewers.findIndex(function (view) {
|
|
967
|
+
return view.id === _this5.container.id;
|
|
968
|
+
});
|
|
969
|
+
container.removeChild(this.innerBox);
|
|
970
|
+
container = container.cloneNode(true);
|
|
971
|
+
container.className = container.className.replace(' initialized', '');
|
|
972
|
+
oldElement.parentNode.replaceChild(container, oldElement);
|
|
973
|
+
return viewers.splice(viewIndex, 1, new CI360Viewer(container));
|
|
974
|
+
}
|
|
975
|
+
|
|
965
976
|
container.style.position = 'relative';
|
|
966
977
|
container.style.width = '100%';
|
|
967
978
|
container.style.cursor = 'default';
|
|
968
979
|
container.setAttribute('draggable', 'false');
|
|
969
|
-
if (reloadPlugin) container.innerHTML = '';
|
|
970
980
|
this.stop();
|
|
971
|
-
this.init(container,
|
|
981
|
+
this.init(container, true);
|
|
972
982
|
}
|
|
973
983
|
}, {
|
|
974
984
|
key: "destroy",
|
|
@@ -1091,52 +1101,52 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1091
1101
|
}, {
|
|
1092
1102
|
key: "initControls",
|
|
1093
1103
|
value: function initControls() {
|
|
1094
|
-
var
|
|
1104
|
+
var _this6 = this;
|
|
1095
1105
|
|
|
1096
1106
|
var onLeftStart = function onLeftStart(event) {
|
|
1097
1107
|
event.stopPropagation();
|
|
1098
1108
|
|
|
1099
|
-
|
|
1109
|
+
_this6.onSpin();
|
|
1100
1110
|
|
|
1101
|
-
|
|
1111
|
+
_this6.left();
|
|
1102
1112
|
|
|
1103
|
-
|
|
1113
|
+
_this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
|
|
1104
1114
|
};
|
|
1105
1115
|
|
|
1106
1116
|
var onRightStart = function onRightStart(event) {
|
|
1107
1117
|
event.stopPropagation();
|
|
1108
1118
|
|
|
1109
|
-
|
|
1119
|
+
_this6.onSpin();
|
|
1110
1120
|
|
|
1111
|
-
|
|
1121
|
+
_this6.right();
|
|
1112
1122
|
|
|
1113
|
-
|
|
1123
|
+
_this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
|
|
1114
1124
|
};
|
|
1115
1125
|
|
|
1116
1126
|
var onTopStart = function onTopStart(event) {
|
|
1117
1127
|
event.stopPropagation();
|
|
1118
1128
|
|
|
1119
|
-
|
|
1129
|
+
_this6.onSpin();
|
|
1120
1130
|
|
|
1121
|
-
|
|
1131
|
+
_this6.top();
|
|
1122
1132
|
|
|
1123
|
-
|
|
1133
|
+
_this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
|
|
1124
1134
|
};
|
|
1125
1135
|
|
|
1126
1136
|
var onBottomStart = function onBottomStart(event) {
|
|
1127
1137
|
event.stopPropagation();
|
|
1128
1138
|
|
|
1129
|
-
|
|
1139
|
+
_this6.onSpin();
|
|
1130
1140
|
|
|
1131
|
-
|
|
1141
|
+
_this6.bottom();
|
|
1132
1142
|
|
|
1133
|
-
|
|
1143
|
+
_this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
|
|
1134
1144
|
};
|
|
1135
1145
|
|
|
1136
1146
|
var onEventEnd = function onEventEnd() {
|
|
1137
|
-
|
|
1147
|
+
_this6.onFinishSpin();
|
|
1138
1148
|
|
|
1139
|
-
window.clearTimeout(
|
|
1149
|
+
window.clearTimeout(_this6.loopTimeoutId);
|
|
1140
1150
|
};
|
|
1141
1151
|
|
|
1142
1152
|
var controlsConfig = {
|
|
@@ -1153,10 +1163,10 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1153
1163
|
onEventEnd: onEventEnd
|
|
1154
1164
|
};
|
|
1155
1165
|
var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
|
|
1156
|
-
this.topElem = controlsElements.top
|
|
1157
|
-
this.bottomElem = controlsElements.bottom
|
|
1158
|
-
this.leftElem = controlsElements.left
|
|
1159
|
-
this.rightElem = controlsElements.right
|
|
1166
|
+
this.topElem = controlsElements.top;
|
|
1167
|
+
this.bottomElem = controlsElements.bottom;
|
|
1168
|
+
this.leftElem = controlsElements.left;
|
|
1169
|
+
this.rightElem = controlsElements.right;
|
|
1160
1170
|
}
|
|
1161
1171
|
}, {
|
|
1162
1172
|
key: "attachEvents",
|
|
@@ -1189,10 +1199,9 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1189
1199
|
}, {
|
|
1190
1200
|
key: "init",
|
|
1191
1201
|
value: function init(container) {
|
|
1192
|
-
var
|
|
1202
|
+
var _this7 = this;
|
|
1193
1203
|
|
|
1194
1204
|
var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
1195
|
-
var reload = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
1196
1205
|
|
|
1197
1206
|
var _get360ViewProps = (0, _ci.get360ViewProps)(container),
|
|
1198
1207
|
folder = _get360ViewProps.folder,
|
|
@@ -1282,13 +1291,9 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1282
1291
|
this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
|
|
1283
1292
|
this.keysReverse = keysReverse;
|
|
1284
1293
|
this.info = imageInfo;
|
|
1294
|
+
this.keys = keys;
|
|
1285
1295
|
this.ratio = ratio && JSON.parse(ratio);
|
|
1286
1296
|
|
|
1287
|
-
if (reload) {
|
|
1288
|
-
new CI360Viewer(this.container);
|
|
1289
|
-
return;
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
1297
|
if (update) {
|
|
1293
1298
|
(0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
|
|
1294
1299
|
(0, _utils.removeChildFromParent)(this.innerBox, this.boxShadowEl);
|
|
@@ -1305,10 +1310,6 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1305
1310
|
this.addMagnifier();
|
|
1306
1311
|
}
|
|
1307
1312
|
|
|
1308
|
-
if (this.info) {
|
|
1309
|
-
this.showImageInfo(ctx);
|
|
1310
|
-
}
|
|
1311
|
-
|
|
1312
1313
|
if (this.bottomCircle && !this.fullscreenView) {
|
|
1313
1314
|
this.add360ViewCircleIcon();
|
|
1314
1315
|
}
|
|
@@ -1321,8 +1322,7 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1321
1322
|
this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
|
|
1322
1323
|
}
|
|
1323
1324
|
|
|
1324
|
-
this.onAllImagesLoaded();
|
|
1325
|
-
return;
|
|
1325
|
+
return this.onAllImagesLoaded();
|
|
1326
1326
|
}
|
|
1327
1327
|
|
|
1328
1328
|
this.innerBox = (0, _utils.createInnerBox)(this.container);
|
|
@@ -1359,60 +1359,58 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1359
1359
|
var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
|
|
1360
1360
|
|
|
1361
1361
|
var initLazyload = function initLazyload(image, orientation) {
|
|
1362
|
-
var lazyloadXConfig = _objectSpread(_objectSpread({},
|
|
1362
|
+
var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
|
|
1363
1363
|
lazyload: false
|
|
1364
1364
|
});
|
|
1365
1365
|
|
|
1366
|
-
var lazyloadYConfig = _objectSpread(_objectSpread({},
|
|
1366
|
+
var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
|
|
1367
1367
|
lazyload: false
|
|
1368
1368
|
});
|
|
1369
1369
|
|
|
1370
1370
|
if (orientation === _constants.ORIENTATIONS.Y) {
|
|
1371
|
-
|
|
1372
|
-
(0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(
|
|
1371
|
+
_this7.lazyloadY = false;
|
|
1372
|
+
(0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
|
|
1373
1373
|
} else {
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
(0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(
|
|
1374
|
+
_this7.lazyloadX = false;
|
|
1375
|
+
_this7.lazyloadInitImageX = image;
|
|
1376
|
+
(0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
|
|
1377
1377
|
}
|
|
1378
1378
|
};
|
|
1379
1379
|
|
|
1380
1380
|
var onImageLoad = function onImageLoad(orientation, image, index) {
|
|
1381
1381
|
if (orientation !== _constants.ORIENTATIONS.Y) {
|
|
1382
|
-
|
|
1382
|
+
_this7.imagesX[index] = image;
|
|
1383
1383
|
} else {
|
|
1384
|
-
|
|
1384
|
+
_this7.imagesY[index] = image;
|
|
1385
1385
|
}
|
|
1386
1386
|
|
|
1387
|
-
var loadedXImages =
|
|
1388
|
-
return
|
|
1387
|
+
var loadedXImages = _this7.imagesX.filter(function (image) {
|
|
1388
|
+
return image;
|
|
1389
1389
|
});
|
|
1390
1390
|
|
|
1391
|
-
var loadedYImages =
|
|
1392
|
-
return
|
|
1391
|
+
var loadedYImages = _this7.imagesY.filter(function (image) {
|
|
1392
|
+
return image;
|
|
1393
1393
|
});
|
|
1394
1394
|
|
|
1395
|
-
var totalAmount =
|
|
1396
|
-
var totalLoadedImages =
|
|
1395
|
+
var totalAmount = _this7.amountX + _this7.amountY;
|
|
1396
|
+
var totalLoadedImages = _this7.imagesX.length + _this7.imagesY.length;
|
|
1397
1397
|
var isFirstImageLoaded = index === 0 && orientation !== _constants.ORIENTATIONS.Y;
|
|
1398
|
-
var isAllImagesLoaded = loadedXImages.length + loadedYImages.length ===
|
|
1398
|
+
var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
|
|
1399
1399
|
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
|
|
1400
1400
|
|
|
1401
|
-
|
|
1401
|
+
_this7.updatePercentageInLoader(percentage);
|
|
1402
1402
|
|
|
1403
|
-
if (
|
|
1403
|
+
if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
|
|
1404
1404
|
|
|
1405
1405
|
if (isFirstImageLoaded) {
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
_this6.onFirstImageLoaded(image);
|
|
1406
|
+
_this7.onFirstImageLoaded(image);
|
|
1409
1407
|
}
|
|
1410
1408
|
|
|
1411
1409
|
if (isAllImagesLoaded) {
|
|
1412
|
-
|
|
1410
|
+
_this7.onAllImagesLoaded();
|
|
1413
1411
|
|
|
1414
1412
|
if (lazyload) {
|
|
1415
|
-
|
|
1413
|
+
_this7.innerBox.removeChild(_this7.lazyloadInitImageX);
|
|
1416
1414
|
}
|
|
1417
1415
|
}
|
|
1418
1416
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PROPS_REQUIRE_RELOAD = void 0;
|
|
7
|
+
var PROPS_REQUIRE_RELOAD = ['folder', //images source
|
|
8
|
+
'filenameX', //images source
|
|
9
|
+
'filenameY', //images source
|
|
10
|
+
'apiVersion', //images source
|
|
11
|
+
'imageListX', //images source
|
|
12
|
+
'imageListY', //images source
|
|
13
|
+
'indexZeroBase', //images source
|
|
14
|
+
'lazySelector', //images source
|
|
15
|
+
'keys', // events
|
|
16
|
+
'stopAtEdges', // events
|
|
17
|
+
'disableDrag', // events
|
|
18
|
+
'controlReverse', // events
|
|
19
|
+
'disableDrag' // events
|
|
20
|
+
];
|
|
21
|
+
exports.PROPS_REQUIRE_RELOAD = PROPS_REQUIRE_RELOAD;
|
package/dist/index.js
CHANGED
|
@@ -12,14 +12,27 @@ var _ci = _interopRequireDefault(require("./ci360.service"));
|
|
|
12
12
|
|
|
13
13
|
var _ci2 = require("./ci360.utils");
|
|
14
14
|
|
|
15
|
+
function setContainerId(container) {
|
|
16
|
+
var containerId = container.id;
|
|
17
|
+
|
|
18
|
+
if (!containerId) {
|
|
19
|
+
var uniqueId = Math.floor(Math.random() * 10000);
|
|
20
|
+
var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
|
|
21
|
+
container.id = generatedContainerId;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return container;
|
|
25
|
+
}
|
|
26
|
+
|
|
15
27
|
function init() {
|
|
16
28
|
var viewers = [];
|
|
17
29
|
var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
|
|
18
30
|
var hotspotsConfigs = window.CI360.hotspots || {};
|
|
19
31
|
[].slice.call(view360Array).forEach(function (container) {
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
|
|
32
|
+
var containerWithId = setContainerId(container);
|
|
33
|
+
var hotspotInstanceName = (0, _ci2.attr)(containerWithId, 'hotspot-instance') || (0, _ci2.attr)(containerWithId, 'data-hotspot-instance');
|
|
34
|
+
var hotspotConfig = hotspotsConfigs === null || hotspotsConfigs === void 0 ? void 0 : hotspotsConfigs[hotspotInstanceName];
|
|
35
|
+
viewers.push(new _ci.default(containerWithId, false, hotspotConfig));
|
|
23
36
|
});
|
|
24
37
|
window.CI360._viewers = viewers;
|
|
25
38
|
}
|
|
@@ -48,25 +61,32 @@ function getActiveIndexByID(id, oriantation) {
|
|
|
48
61
|
return currentViewer && currentViewer.activeImageX - 1;
|
|
49
62
|
}
|
|
50
63
|
|
|
64
|
+
function add(id) {
|
|
65
|
+
var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
|
|
66
|
+
|
|
67
|
+
if (view360Array.length && id) {
|
|
68
|
+
var newViewContainer = view360Array.filter(function (viewer) {
|
|
69
|
+
return viewer.id === id;
|
|
70
|
+
})[0];
|
|
71
|
+
newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
51
75
|
function update() {
|
|
52
76
|
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
53
77
|
var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
54
78
|
|
|
55
79
|
if (id) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
80
|
+
var view = window.CI360._viewers.filter(function (viewer) {
|
|
81
|
+
return viewer.id === id;
|
|
82
|
+
})[0];
|
|
83
|
+
|
|
84
|
+
view.updateView(forceUpdate, window.CI360._viewers);
|
|
85
|
+
} else {
|
|
86
|
+
window.CI360._viewers.forEach(function (viewer) {
|
|
87
|
+
viewer.updateView(forceUpdate, window.CI360._viewers);
|
|
88
|
+
});
|
|
65
89
|
}
|
|
66
|
-
|
|
67
|
-
return window.CI360._viewers.forEach(function (viewer) {
|
|
68
|
-
viewer.updatePlugin(forceUpdate);
|
|
69
|
-
});
|
|
70
90
|
}
|
|
71
91
|
|
|
72
92
|
function isNoViewers() {
|
|
@@ -78,6 +98,7 @@ window.CI360.init = init;
|
|
|
78
98
|
window.CI360.destroy = destroy;
|
|
79
99
|
window.CI360.getActiveIndexByID = getActiveIndexByID;
|
|
80
100
|
window.CI360.update = update;
|
|
101
|
+
window.CI360.add = add;
|
|
81
102
|
|
|
82
103
|
if (!window.CI360.notInitOnLoad) {
|
|
83
104
|
init();
|
|
@@ -118,4 +118,111 @@
|
|
|
118
118
|
height: 250px;
|
|
119
119
|
top: -75px;
|
|
120
120
|
right: -85px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.cloudimage-360 .cloudimage-360-left,
|
|
124
|
+
.cloudimage-360 .cloudimage-360-right {
|
|
125
|
+
padding: 8px;
|
|
126
|
+
background: rgb(244, 244, 244);
|
|
127
|
+
border: none;
|
|
128
|
+
border-radius: 4px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.cloudimage-360 .cloudimage-360-left:focus,
|
|
132
|
+
.cloudimage-360 .cloudimage-360-right:focus {
|
|
133
|
+
outline: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.cloudimage-360 .cloudimage-360-left {
|
|
137
|
+
display: none;
|
|
138
|
+
position: absolute;
|
|
139
|
+
z-index: 100;
|
|
140
|
+
top: calc(50% - 15px);
|
|
141
|
+
left: 20px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.cloudimage-360 .cloudimage-360-right {
|
|
145
|
+
display: none;
|
|
146
|
+
position: absolute;
|
|
147
|
+
z-index: 100;
|
|
148
|
+
top: calc(50% - 15px);
|
|
149
|
+
right: 20px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.cloudimage-360 .cloudimage-360-left:before,
|
|
153
|
+
.cloudimage-360 .cloudimage-360-right:before {
|
|
154
|
+
content: '';
|
|
155
|
+
display: block;
|
|
156
|
+
width: 30px;
|
|
157
|
+
height: 30px;
|
|
158
|
+
background: 50% 50% / cover no-repeat;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.cloudimage-360 .cloudimage-360-left:before {
|
|
162
|
+
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.cloudimage-360 .cloudimage-360-right:before {
|
|
166
|
+
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.cloudimage-360 .cloudimage-360-left.not-active,
|
|
170
|
+
.cloudimage-360 .cloudimage-360-right.not-active {
|
|
171
|
+
opacity: 0.4;
|
|
172
|
+
cursor: default;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.cloudimage-360 .cloudimage-360-top,
|
|
177
|
+
.cloudimage-360 .cloudimage-360-bottom {
|
|
178
|
+
padding: 8px;
|
|
179
|
+
background: rgb(244, 244, 244);
|
|
180
|
+
border: none;
|
|
181
|
+
border-radius: 4px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.cloudimage-360 .cloudimage-360-top:focus,
|
|
185
|
+
.cloudimage-360 .cloudimage-360-bottom:focus {
|
|
186
|
+
outline: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.cloudimage-360 .cloudimage-360-top {
|
|
190
|
+
display: none;
|
|
191
|
+
position: absolute;
|
|
192
|
+
z-index: 100;
|
|
193
|
+
left: calc(50% - 15px);
|
|
194
|
+
top: 20px;
|
|
195
|
+
transform: rotate(90deg);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.cloudimage-360 .cloudimage-360-bottom {
|
|
199
|
+
display: none;
|
|
200
|
+
position: absolute;
|
|
201
|
+
z-index: 100;
|
|
202
|
+
left: calc(50% - 15px);
|
|
203
|
+
bottom: 20px;
|
|
204
|
+
transform: rotate(90deg);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.cloudimage-360 .cloudimage-360-top:before,
|
|
208
|
+
.cloudimage-360 .cloudimage-360-bottom:before {
|
|
209
|
+
content: '';
|
|
210
|
+
display: block;
|
|
211
|
+
width: 30px;
|
|
212
|
+
height: 30px;
|
|
213
|
+
background: 50% 50% / cover no-repeat;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.cloudimage-360 .cloudimage-360-top:before {
|
|
217
|
+
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.cloudimage-360 .cloudimage-360-bottom:before {
|
|
221
|
+
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.cloudimage-360 .cloudimage-360-top.not-active,
|
|
225
|
+
.cloudimage-360 .cloudimage-360-bottom.not-active {
|
|
226
|
+
opacity: 0.4;
|
|
227
|
+
cursor: default;
|
|
121
228
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isPropsChangeRequireReload = void 0;
|
|
7
|
+
|
|
8
|
+
var _propsRequireReload = require("../../constants/props-require-reload");
|
|
9
|
+
|
|
10
|
+
var isPropsChangeRequireReload = function isPropsChangeRequireReload(currentProps, changedProps) {
|
|
11
|
+
return Object.keys(changedProps).reduce(function (acc, current) {
|
|
12
|
+
var isPropChanged = currentProps[current] !== changedProps[current];
|
|
13
|
+
var isSrcProp = _propsRequireReload.PROPS_REQUIRE_RELOAD.indexOf(current) !== -1;
|
|
14
|
+
|
|
15
|
+
if (isSrcProp && isPropChanged) {
|
|
16
|
+
acc = true;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return acc;
|
|
20
|
+
}, false);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.isPropsChangeRequireReload = isPropsChangeRequireReload;
|
package/dist/utils/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
|
-
|
|
7
|
+
isPropsChangeRequireReload: true,
|
|
8
8
|
generateImagesPath: true,
|
|
9
9
|
preloadImages: true,
|
|
10
10
|
preloadOriginalImages: true,
|
|
@@ -124,10 +124,10 @@ Object.defineProperty(exports, "isMouseOnHotspot", {
|
|
|
124
124
|
return _isMouseOnHotspot.isMouseOnHotspot;
|
|
125
125
|
}
|
|
126
126
|
});
|
|
127
|
-
Object.defineProperty(exports, "
|
|
127
|
+
Object.defineProperty(exports, "isPropsChangeRequireReload", {
|
|
128
128
|
enumerable: true,
|
|
129
129
|
get: function get() {
|
|
130
|
-
return
|
|
130
|
+
return _isPropsChangeRequireReload.isPropsChangeRequireReload;
|
|
131
131
|
}
|
|
132
132
|
});
|
|
133
133
|
Object.defineProperty(exports, "loop", {
|
|
@@ -167,7 +167,7 @@ Object.defineProperty(exports, "updateHotspots", {
|
|
|
167
167
|
}
|
|
168
168
|
});
|
|
169
169
|
|
|
170
|
-
var
|
|
170
|
+
var _isPropsChangeRequireReload = require("./image-src/is-props-change-require-reload");
|
|
171
171
|
|
|
172
172
|
var _generateImagesPath = require("./image-src/generate-images-path");
|
|
173
173
|
|
package/package.json
CHANGED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.IMAGE_SRC_PROPS = void 0;
|
|
7
|
-
var IMAGE_SRC_PROPS = ['folder', 'filenameX', 'filenameY', 'apiVersion', 'imageListX', 'imageListY', 'indexZeroBase', 'amountX', 'amountY', 'lazySelector'];
|
|
8
|
-
exports.IMAGE_SRC_PROPS = IMAGE_SRC_PROPS;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isSrcPropsChanged = void 0;
|
|
7
|
-
|
|
8
|
-
var _imageSrcProps = require("../../constants/image-src-props");
|
|
9
|
-
|
|
10
|
-
var isSrcPropsChanged = function isSrcPropsChanged(currentProps, changedProps) {
|
|
11
|
-
return Object.keys(changedProps).reduce(function (acc, current) {
|
|
12
|
-
var isPropChanged = currentProps[current] !== changedProps[current];
|
|
13
|
-
var isSrcProp = _imageSrcProps.IMAGE_SRC_PROPS.indexOf(current) !== -1;
|
|
14
|
-
|
|
15
|
-
if (isSrcProp && isPropChanged) {
|
|
16
|
-
acc = true;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return acc;
|
|
20
|
-
}, false);
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
exports.isSrcPropsChanged = isSrcPropsChanged;
|