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 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
- [![Release](https://img.shields.io/badge/release-v2.7.7-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
1
+ [![Release](https://img.shields.io/badge/release-v2.7.10-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
2
  [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
3
3
  [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
4
4
  [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -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
 
@@ -248,10 +248,10 @@ var CI360Viewer = /*#__PURE__*/function () {
248
248
  }
249
249
 
250
250
  var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
251
- return !!image;
251
+ return image;
252
252
  });
253
253
  var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
254
- return !!image;
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.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
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 !!image;
690
+ return image;
687
691
  });
688
692
  var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
689
- return !!image;
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), true);
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), true);
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: "updatePlugin",
960
- value: function updatePlugin(forceUpdate) {
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.isSrcPropsChanged)(this, imageProps);
964
- var reloadPlugin = srcPropsChanged || forceUpdate;
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, !reloadPlugin, reloadPlugin);
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 _this5 = this;
1104
+ var _this6 = this;
1095
1105
 
1096
1106
  var onLeftStart = function onLeftStart(event) {
1097
1107
  event.stopPropagation();
1098
1108
 
1099
- _this5.onSpin();
1109
+ _this6.onSpin();
1100
1110
 
1101
- _this5.left();
1111
+ _this6.left();
1102
1112
 
1103
- _this5.loopTimeoutId = window.setInterval(_this5.left.bind(_this5), _this5.autoplaySpeed);
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
- _this5.onSpin();
1119
+ _this6.onSpin();
1110
1120
 
1111
- _this5.right();
1121
+ _this6.right();
1112
1122
 
1113
- _this5.loopTimeoutId = window.setInterval(_this5.right.bind(_this5), _this5.autoplaySpeed);
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
- _this5.onSpin();
1129
+ _this6.onSpin();
1120
1130
 
1121
- _this5.top();
1131
+ _this6.top();
1122
1132
 
1123
- _this5.loopTimeoutId = window.setInterval(_this5.top.bind(_this5), _this5.autoplaySpeed);
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
- _this5.onSpin();
1139
+ _this6.onSpin();
1130
1140
 
1131
- _this5.bottom();
1141
+ _this6.bottom();
1132
1142
 
1133
- _this5.loopTimeoutId = window.setInterval(_this5.bottom.bind(_this5), _this5.autoplaySpeed);
1143
+ _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
1134
1144
  };
1135
1145
 
1136
1146
  var onEventEnd = function onEventEnd() {
1137
- _this5.onFinishSpin();
1147
+ _this6.onFinishSpin();
1138
1148
 
1139
- window.clearTimeout(_this5.loopTimeoutId);
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 _this6 = this;
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({}, _this6.srcXConfig), {}, {
1362
+ var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
1363
1363
  lazyload: false
1364
1364
  });
1365
1365
 
1366
- var lazyloadYConfig = _objectSpread(_objectSpread({}, _this6.srcYConfig), {}, {
1366
+ var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
1367
1367
  lazyload: false
1368
1368
  });
1369
1369
 
1370
1370
  if (orientation === _constants.ORIENTATIONS.Y) {
1371
- _this6.lazyloadY = false;
1372
- (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _constants.ORIENTATIONS.X));
1371
+ _this7.lazyloadY = false;
1372
+ (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
1373
1373
  } else {
1374
- _this6.lazyloadX = false;
1375
- _this6.lazyloadInitImageX = image;
1376
- (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _constants.ORIENTATIONS.Y));
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
- _this6.imagesX[index] = image;
1382
+ _this7.imagesX[index] = image;
1383
1383
  } else {
1384
- _this6.imagesY[index] = image;
1384
+ _this7.imagesY[index] = image;
1385
1385
  }
1386
1386
 
1387
- var loadedXImages = _this6.imagesX.filter(function (image) {
1388
- return !!image;
1387
+ var loadedXImages = _this7.imagesX.filter(function (image) {
1388
+ return image;
1389
1389
  });
1390
1390
 
1391
- var loadedYImages = _this6.imagesY.filter(function (image) {
1392
- return !!image;
1391
+ var loadedYImages = _this7.imagesY.filter(function (image) {
1392
+ return image;
1393
1393
  });
1394
1394
 
1395
- var totalAmount = _this6.amountX + _this6.amountY;
1396
- var totalLoadedImages = _this6.imagesX.length + _this6.imagesY.length;
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 === _this6.amountX + _this6.amountY;
1398
+ var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
1399
1399
  var percentage = Math.round(totalLoadedImages / totalAmount * 100);
1400
1400
 
1401
- _this6.updatePercentageInLoader(percentage);
1401
+ _this7.updatePercentageInLoader(percentage);
1402
1402
 
1403
- if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
1403
+ if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
1404
1404
 
1405
1405
  if (isFirstImageLoaded) {
1406
- _this6.updateContainerAndCanvasSize(image);
1407
-
1408
- _this6.onFirstImageLoaded(image);
1406
+ _this7.onFirstImageLoaded(image);
1409
1407
  }
1410
1408
 
1411
1409
  if (isAllImagesLoaded) {
1412
- _this6.onAllImagesLoaded();
1410
+ _this7.onAllImagesLoaded();
1413
1411
 
1414
1412
  if (lazyload) {
1415
- _this6.innerBox.removeChild(_this6.lazyloadInitImageX);
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 hotspotInstanceName = (0, _ci2.attr)(container, 'hotspot-instance') || (0, _ci2.attr)(container, 'data-hotspot-instance');
21
- var hotspotConfig = hotspotsConfigs[hotspotInstanceName] ? hotspotsConfigs[hotspotInstanceName] : null;
22
- viewers.push(new _ci.default(container, false, hotspotConfig));
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
- try {
57
- var view = window.CI360._viewers.filter(function (viewer) {
58
- return viewer.id === id;
59
- })[0];
60
-
61
- return view.updatePlugin(forceUpdate);
62
- } catch (_unused) {
63
- console.error("Cloudimage-360: there is no view with such id '".concat(id, "'"));
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;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  var _exportNames = {
7
- isSrcPropsChanged: true,
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, "isSrcPropsChanged", {
127
+ Object.defineProperty(exports, "isPropsChangeRequireReload", {
128
128
  enumerable: true,
129
129
  get: function get() {
130
- return _isSrcPropsChanged.isSrcPropsChanged;
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 _isSrcPropsChanged = require("./image-src/is-src-props-changed");
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,6 +1,6 @@
1
1
  {
2
2
  "name": "js-cloudimage-360-view",
3
- "version": "2.7.7",
3
+ "version": "2.7.10",
4
4
  "main": "dist/index.js",
5
5
  "description": "",
6
6
  "author": "scaleflex",
@@ -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;