js-cloudimage-360-view 3.0.0 → 3.0.1

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -3
  2. package/README.md +11 -16
  3. package/dist/ci360.service.js +6 -16
  4. package/dist/static/css/hotspots.css +21 -28
  5. package/dist/utils/image-src/generate-images-path.js +5 -3
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -25,11 +25,18 @@ Types of changes:
25
25
  - ...
26
26
 
27
27
  -------------
28
+ ## 3.0.1 - 2022-03-28
29
+ ### Changed
30
+ - hotspots icons
31
+
32
+ ### Fixed
33
+ - loader is hidden if hide-360-logo is active
34
+
28
35
  ## 3.0.0 - 2022-03-25
29
36
  ### Added
30
- - possiblity to add makers or hotspots to each image
31
- - possiblity add views after init the plugin
32
- - possiblity to update views
37
+ - possibility to add makers or hotspots to each image
38
+ - possibility add views after init the plugin
39
+ - possibility to update views
33
40
  ### Fixed
34
41
  - hide 360 logo after play once
35
42
 
package/README.md CHANGED
@@ -1,14 +1,13 @@
1
1
 
2
- [![Release](https://img.shields.io/badge/release-v3.0.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
+ [![Release](https://img.shields.io/badge/release-v3.0.1-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
3
3
  [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
4
4
  [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
5
- [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
6
-
7
- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)
5
+ [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
6
+ [![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
8
7
 
9
8
  <p align="center">
10
- <img
11
- alt="The Lounge"
9
+ <img
10
+ alt="cloudimage logo"
12
11
  src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
13
12
  </p>
14
13
 
@@ -29,17 +28,13 @@
29
28
  <a href="https://medium.com/cloudimage/e-merchandising-how-can-a-360-view-of-your-products-boost-your-revenue-24b16eb9cd62" target="_blank">Why</a>
30
29
  </strong>
31
30
  </p>
32
-
33
- A simple, interactive resource that can be used to provide a virtual tour of your product.
34
- <p align="left">
31
+ <p align="center">A simple, interactive resource that can be used to provide a virtual tour of your product.</p>
32
+ <p align="center">
35
33
  <img
36
34
  alt="The Lounge"
37
- src="https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/demo-min.gif?vh=ecac07">
35
+ src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/demos/assets/a2.gif">
38
36
  </p>
39
37
 
40
- powered by [Cloudimage](https://www.cloudimage.io/)
41
- ([Watch the video here](https://www.youtube.com/watch?v=tk4j_MpqvM8))
42
-
43
38
  ## <a name="table_of_contents"></a>Table of contents
44
39
 
45
40
  * [Demo](#demo)
@@ -69,7 +64,7 @@ To see the Cloudimage 360 view plugin in action, please check out the
69
64
  Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
70
65
 
71
66
  ```javascript
72
- <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
67
+ <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.1/js-cloudimage-360-view.min.js"></script>
73
68
  ```
74
69
 
75
70
  ## <a name="initialize"></a>Step 2: Initialize
@@ -104,7 +99,7 @@ window.CI360.init();
104
99
  > NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with **notInitOnLoad** param
105
100
  > ```javascript
106
101
  > <script>window.CI360 = { notInitOnLoad: true }</script>
107
- > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
102
+ > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
108
103
  > <script>window.CI360.init(); // initialize the plugin when you need</script>
109
104
  > ```
110
105
 
@@ -778,4 +773,4 @@ Tested in all modern browsers and IE 11, 10, 9.
778
773
  All contributions are super welcome!
779
774
 
780
775
  ## <a name="license"></a>License
781
- JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
776
+ JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
package/dist/ci360.service.js CHANGED
@@ -117,6 +117,10 @@ var CI360Viewer = /*#__PURE__*/function () {
117
117
  if (isMouseOnHotspotElement) {
118
118
  this.isClicked = false;
119
119
  }
120
+
121
+ if (this.hotspotsConfigs) {
122
+ (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
123
+ }
120
124
  }
121
125
  }, {
122
126
  key: "mouseUp",
@@ -821,7 +825,7 @@ var CI360Viewer = /*#__PURE__*/function () {
821
825
  }, {
822
826
  key: "onFirstImageLoaded",
823
827
  value: function onFirstImageLoaded(image) {
824
- if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
828
+ this.add360ViewIcon();
825
829
  var ctx = this.canvas.getContext("2d");
826
830
  ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
827
831
  this.updateContainerAndCanvasSize(image);
@@ -862,10 +866,6 @@ var CI360Viewer = /*#__PURE__*/function () {
862
866
  if (this.fullscreen && !this.fullscreenView) {
863
867
  this.addFullscreenIcon();
864
868
  }
865
-
866
- if (this.hotspotsConfigs && !this.autoplay) {
867
- (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
868
- }
869
869
  }
870
870
  }, {
871
871
  key: "onAllImagesLoaded",
@@ -890,16 +890,13 @@ var CI360Viewer = /*#__PURE__*/function () {
890
890
  }
891
891
 
892
892
  if (this.view360Icon) {
893
+ if (this.hide360Logo) return this.remove360ViewIcon();
893
894
  this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
894
895
 
895
896
  if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
896
897
  }
897
898
 
898
899
  this.initControls();
899
-
900
- if (this.hotspotsConfigs && !this.autoplay) {
901
- (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
902
- }
903
900
  }
904
901
  }, {
905
902
  key: "magnify",
@@ -968,13 +965,6 @@ var CI360Viewer = /*#__PURE__*/function () {
968
965
  window.clearTimeout(_this4.loopTimeoutId);
969
966
  _this4.autoplay = false;
970
967
 
971
- if (!_this4.hide360Logo) {
972
- _this4.add360ViewIcon();
973
-
974
- _this4.view360Icon.innerText = '';
975
- (0, _ci.setView360Icon)(_this4.view360Icon, _this4.logoSrc);
976
- }
977
-
978
968
  if (_this4.hotspotsConfigs) {
979
969
  (0, _utils.updateHotspots)(_this4.container, _this4.hotspotsConfigs, _this4.activeImageX, _this4.activeImageY, _this4.movingDirection, _this4.isClicked);
980
970
  }
package/dist/static/css/hotspots.css CHANGED
@@ -12,12 +12,12 @@
12
12
  .cloudimage-360-hotspot-link-icon::before {
13
13
  content: '';
14
14
  position: absolute;
15
- width: 18px;
16
- height: 18px;
15
+ width: 16px;
16
+ height: 16px;
17
17
  background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg');
18
18
  background-color: #0C6DC7;
19
19
  background-repeat: no-repeat;
20
- background-size: 8px;
20
+ background-size: 17px 7px;
21
21
  background-position: center;
22
22
  left: 50%;
23
23
  top: 50%;
@@ -42,30 +42,19 @@
42
42
  .cloudimage-360-hotspot-custom-icon::before {
43
43
  content: '';
44
44
  position: absolute;
45
- width: 18px;
46
- height: 18px;
47
- left: 50%;
48
- top: 50%;
49
- transform: translate(-50%, -50%);
50
- box-sizing: border-box;
45
+ width: 16px;
46
+ height: 16px;
47
+ background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg');
51
48
  background-color: #76AD01;
52
49
  background-repeat: no-repeat;
53
- background-size: 8px;
50
+ background-size: 17px 7px;
54
51
  background-position: center;
55
- box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
56
- border-radius: 50%;
57
- animation: pulse 2s infinite;
58
- cursor: auto;
59
- }
60
-
61
- .cloudimage-360-hotspot-custom-icon::after {
62
- content: '+';
63
- position: absolute;
64
52
  left: 50%;
65
53
  top: 50%;
66
- color: #FFF;
67
- font-weight: 400;
68
54
  transform: translate(-50%, -50%);
55
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
56
+ border-radius: 50%;
57
+ animation: pulse 2s infinite;
69
58
  cursor: auto;
70
59
  }
71
60
 
@@ -103,19 +92,23 @@
103
92
  transform: rotate(45deg);
104
93
  }
105
94
 
106
- .cloudimage-360-hotspot-popup[data-popper-placement^='top'] > .cloudimage-360-popup-arrow {
95
+ .cloudimage-360-hotspot-popup[data-popper-placement^='top']
96
+ > .cloudimage-360-popup-arrow {
107
97
  bottom: -4px;
108
98
  }
109
99
 
110
- .cloudimage-360-hotspot-popup[data-popper-placement^='bottom'] > .cloudimage-360-popup-arrow {
100
+ .cloudimage-360-hotspot-popup[data-popper-placement^='bottom']
101
+ > .cloudimage-360-popup-arrow {
111
102
  top: -4px;
112
103
  }
113
104
 
114
- .cloudimage-360-hotspot-popup[data-popper-placement^='left'] > .cloudimage-360-popup-arrow {
105
+ .cloudimage-360-hotspot-popup[data-popper-placement^='left']
106
+ > .cloudimage-360-popup-arrow {
115
107
  right: -4px;
116
108
  }
117
109
 
118
- .cloudimage-360-hotspot-popup[data-popper-placement^='right'] > .cloudimage-360-popup-arrow {
110
+ .cloudimage-360-hotspot-popup[data-popper-placement^='right']
111
+ > .cloudimage-360-popup-arrow {
119
112
  left: -4px;
120
113
  }
121
114
 
@@ -148,7 +141,7 @@
148
141
 
149
142
  .cloudimage-360-carousel-dots {
150
143
  display: flex;
151
- column-gap: 3px;
144
+ column-gap: 6px;
152
145
  justify-content: center;
153
146
  flex-wrap: wrap;
154
147
  margin: 5px auto;
@@ -158,8 +151,8 @@
158
151
  }
159
152
 
160
153
  .cloudimage-360-carousel-dot {
161
- width: 5px;
162
- height: 5px;
154
+ width: 6px;
155
+ height: 6px;
163
156
  background-color: #C9D0DE;
164
157
  border-radius: 50%;
165
158
  cursor: pointer;
package/dist/utils/image-src/generate-images-path.js CHANGED
@@ -28,10 +28,12 @@ var generateImagesPath = function generateImagesPath(srcConfig) {
28
28
 
29
29
  if (ciToken) {
30
30
  var imageOffsetWidth = container.offsetWidth;
31
- var vesrion = _falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1 ? null : apiVersion;
32
- var finalApiVersion = vesrion ? "".concat(vesrion, "/") : '';
31
+ var version = !(_falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1) ? apiVersion : null;
32
+ var finalApiVersion = version ? "".concat(version, "/") : '';
33
33
  var ciSizeNext = (0, _getSizeAccordingToPixelRatio.getSizeAccordingToPixelRatio)((0, _getResponsiveWidthOfContainer.getResponsiveWidthOfContainer)(imageOffsetWidth));
34
- src = "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src, "?").concat(ciTransformation || "width=".concat(ciSizeNext)).concat(ciFilters ? "&f=".concat(ciFilters) : '');
34
+ var isCloudImageUrl = new URL(src).origin.indexOf('cloudimg') !== -1;
35
+ var cdn = isCloudImageUrl ? src : "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src);
36
+ src = "".concat(cdn, "?").concat(ciTransformation || "width=".concat(ciSizeNext)).concat(ciFilters ? "&f=".concat(ciFilters) : '');
35
37
  }
36
38
 
37
39
  return src;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "js-cloudimage-360-view",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "main": "dist/index.js",
5
5
  "description": "",
6
6
  "author": "scaleflex",