js-cloudimage-360-view 3.0.2 → 3.0.4

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 (11) hide show
  1. package/.env +3 -0
  2. package/CHANGELOG.md +160 -152
  3. package/LICENSE +27 -33
  4. package/README.md +809 -806
  5. package/bin/deploy-bundle.js +63 -0
  6. package/dist/static/css/hotspots.css +221 -221
  7. package/dist/static/css/style.css +229 -229
  8. package/dist/utils/image-src/generate-images-path.js +2 -2
  9. package/dist/utils/load-images/images-from-list/prepare-images-from-list.js +1 -7
  10. package/package.json +67 -62
  11. package/yarn-error.log +6853 -0
package/dist/static/css/style.css CHANGED
@@ -1,230 +1,230 @@
1
- .cloudimage-360-icons-container {
2
- position: absolute;
3
- display: flex;
4
- top: 5px;
5
- right: 5px;
6
- width: 30px;
7
- height: 95%;
8
- flex-direction: column;
9
- align-items: center;
10
- z-index: 101;
11
- }
12
-
13
- .cloudimage-360-magnifier-icon {
14
- width: 25px;
15
- height: 25px;
16
- margin-bottom: 5px;
17
- cursor: pointer;
18
- background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
19
- }
20
-
21
- .cloudimage-360-fullscreen-icon {
22
- width: 25px;
23
- height: 25px;
24
- margin-bottom: 5px;
25
- cursor: pointer;
26
- background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
27
- }
28
-
29
- .cloudimage-360-reset-zoom-icon {
30
- display: none;
31
- width: 30px;
32
- height: 30px;
33
- margin-top: auto;
34
- cursor: pointer;
35
- background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
36
- }
37
-
38
- .cloudimage-360-close-fullscreen-icon {
39
- width: 25px;
40
- height: 25px;
41
- cursor: pointer;
42
- background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
43
- }
44
-
45
- .cloudimage-360-loader {
46
- position: absolute;
47
- top: 0;
48
- left: 0;
49
- right: 0;
50
- width: 0%;
51
- height: 8px;
52
- background-color: rgb(165, 175, 184);
53
- z-index: 100;
54
- }
55
-
56
- .cloudimage-360-box-shadow {
57
- position: absolute;
58
- top: 0;
59
- left: 0;
60
- right: 0;
61
- bottom: 0;
62
- z-index: 99;
63
- }
64
-
65
- .cloudimage-360-view-360-icon {
66
- position: absolute;
67
- top: 0;
68
- bottom: 0;
69
- left: 0;
70
- right: 0;
71
- width: 100px;
72
- height: 100px;
73
- margin: auto;
74
- background-color: rgba(255, 255, 255, 0.8);
75
- border-radius: 50%;
76
- box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
77
- transition: 0.5s all;
78
- color: rgb(80, 80, 80);
79
- text-align: center;
80
- line-height: 100px;
81
- z-index: 2;
82
- }
83
-
84
- .cloudimage-360-view-360-circle {
85
- position: absolute;
86
- left: 0;
87
- right: 0;
88
- width: 80%;
89
- height: auto;
90
- margin: auto;
91
- pointer-events: none;
92
- user-select: none;
93
- transition: 0.5s all;
94
- z-index: 2;
95
- }
96
-
97
- .cloudimage-360-fullscreen-modal {
98
- position: fixed;
99
- top: 0;
100
- bottom: 0;
101
- left: 0;
102
- right: 0;
103
- width: 100%;
104
- height: 100%;
105
- z-index: 999;
106
- background-color: #FFF;
107
- }
108
-
109
- .cloudimage-360-img-magnifier-glass {
110
- background-color: #FFF;
111
- background-repeat: no-repeat;
112
- position: absolute;
113
- border: 3px solid #000;
114
- border-radius: 50%;
115
- cursor: wait;
116
- line-height: 200px;
117
- text-align: center;
118
- z-index: 1000;
119
- width: 250px;
120
- height: 250px;
121
- top: -75px;
122
- right: -85px;
123
- }
124
-
125
- .cloudimage-360 .cloudimage-360-left,
126
- .cloudimage-360 .cloudimage-360-right {
127
- padding: 8px;
128
- background: rgb(244, 244, 244);
129
- border: none;
130
- border-radius: 4px;
131
- }
132
-
133
- .cloudimage-360 .cloudimage-360-left:focus,
134
- .cloudimage-360 .cloudimage-360-right:focus {
135
- outline: none;
136
- }
137
-
138
- .cloudimage-360 .cloudimage-360-left {
139
- display: none;
140
- position: absolute;
141
- z-index: 100;
142
- top: calc(50% - 15px);
143
- left: 20px;
144
- }
145
-
146
- .cloudimage-360 .cloudimage-360-right {
147
- display: none;
148
- position: absolute;
149
- z-index: 100;
150
- top: calc(50% - 15px);
151
- right: 20px;
152
- }
153
-
154
- .cloudimage-360 .cloudimage-360-left:before,
155
- .cloudimage-360 .cloudimage-360-right:before {
156
- content: '';
157
- display: block;
158
- width: 30px;
159
- height: 30px;
160
- background: 50% 50% / cover no-repeat;
161
- }
162
-
163
- .cloudimage-360 .cloudimage-360-left:before {
164
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
165
- }
166
-
167
- .cloudimage-360 .cloudimage-360-right:before {
168
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
169
- }
170
-
171
- .cloudimage-360 .cloudimage-360-left.not-active,
172
- .cloudimage-360 .cloudimage-360-right.not-active {
173
- opacity: 0.4;
174
- cursor: default;
175
- pointer-events: none;
176
- }
177
-
178
- .cloudimage-360 .cloudimage-360-top,
179
- .cloudimage-360 .cloudimage-360-bottom {
180
- padding: 8px;
181
- background: rgb(244, 244, 244);
182
- border: none;
183
- border-radius: 4px;
184
- }
185
-
186
- .cloudimage-360 .cloudimage-360-top:focus,
187
- .cloudimage-360 .cloudimage-360-bottom:focus {
188
- outline: none;
189
- }
190
-
191
- .cloudimage-360 .cloudimage-360-top {
192
- display: none;
193
- position: absolute;
194
- z-index: 100;
195
- left: calc(50% - 15px);
196
- top: 20px;
197
- transform: rotate(90deg);
198
- }
199
-
200
- .cloudimage-360 .cloudimage-360-bottom {
201
- display: none;
202
- position: absolute;
203
- z-index: 100;
204
- left: calc(50% - 15px);
205
- bottom: 20px;
206
- transform: rotate(90deg);
207
- }
208
-
209
- .cloudimage-360 .cloudimage-360-top:before,
210
- .cloudimage-360 .cloudimage-360-bottom:before {
211
- content: '';
212
- display: block;
213
- width: 30px;
214
- height: 30px;
215
- background: 50% 50% / cover no-repeat;
216
- }
217
-
218
- .cloudimage-360 .cloudimage-360-top:before {
219
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
220
- }
221
-
222
- .cloudimage-360 .cloudimage-360-bottom:before {
223
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
224
- }
225
-
226
- .cloudimage-360 .cloudimage-360-top.not-active,
227
- .cloudimage-360 .cloudimage-360-bottom.not-active {
228
- opacity: 0.4;
229
- cursor: default;
1
+ .cloudimage-360-icons-container {
2
+ position: absolute;
3
+ display: flex;
4
+ top: 5px;
5
+ right: 5px;
6
+ width: 30px;
7
+ height: 95%;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ z-index: 101;
11
+ }
12
+
13
+ .cloudimage-360-magnifier-icon {
14
+ width: 25px;
15
+ height: 25px;
16
+ margin-bottom: 5px;
17
+ cursor: pointer;
18
+ background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
19
+ }
20
+
21
+ .cloudimage-360-fullscreen-icon {
22
+ width: 25px;
23
+ height: 25px;
24
+ margin-bottom: 5px;
25
+ cursor: pointer;
26
+ background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
27
+ }
28
+
29
+ .cloudimage-360-reset-zoom-icon {
30
+ display: none;
31
+ width: 30px;
32
+ height: 30px;
33
+ margin-top: auto;
34
+ cursor: pointer;
35
+ background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
36
+ }
37
+
38
+ .cloudimage-360-close-fullscreen-icon {
39
+ width: 25px;
40
+ height: 25px;
41
+ cursor: pointer;
42
+ background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
43
+ }
44
+
45
+ .cloudimage-360-loader {
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ right: 0;
50
+ width: 0%;
51
+ height: 8px;
52
+ background-color: rgb(165, 175, 184);
53
+ z-index: 100;
54
+ }
55
+
56
+ .cloudimage-360-box-shadow {
57
+ position: absolute;
58
+ top: 0;
59
+ left: 0;
60
+ right: 0;
61
+ bottom: 0;
62
+ z-index: 99;
63
+ }
64
+
65
+ .cloudimage-360-view-360-icon {
66
+ position: absolute;
67
+ top: 0;
68
+ bottom: 0;
69
+ left: 0;
70
+ right: 0;
71
+ width: 100px;
72
+ height: 100px;
73
+ margin: auto;
74
+ background-color: rgba(255, 255, 255, 0.8);
75
+ border-radius: 50%;
76
+ box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
77
+ transition: 0.5s all;
78
+ color: rgb(80, 80, 80);
79
+ text-align: center;
80
+ line-height: 100px;
81
+ z-index: 2;
82
+ }
83
+
84
+ .cloudimage-360-view-360-circle {
85
+ position: absolute;
86
+ left: 0;
87
+ right: 0;
88
+ width: 80%;
89
+ height: auto;
90
+ margin: auto;
91
+ pointer-events: none;
92
+ user-select: none;
93
+ transition: 0.5s all;
94
+ z-index: 2;
95
+ }
96
+
97
+ .cloudimage-360-fullscreen-modal {
98
+ position: fixed;
99
+ top: 0;
100
+ bottom: 0;
101
+ left: 0;
102
+ right: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ z-index: 999;
106
+ background-color: #FFF;
107
+ }
108
+
109
+ .cloudimage-360-img-magnifier-glass {
110
+ background-color: #FFF;
111
+ background-repeat: no-repeat;
112
+ position: absolute;
113
+ border: 3px solid #000;
114
+ border-radius: 50%;
115
+ cursor: wait;
116
+ line-height: 200px;
117
+ text-align: center;
118
+ z-index: 1000;
119
+ width: 250px;
120
+ height: 250px;
121
+ top: -75px;
122
+ right: -85px;
123
+ }
124
+
125
+ .cloudimage-360 .cloudimage-360-left,
126
+ .cloudimage-360 .cloudimage-360-right {
127
+ padding: 8px;
128
+ background: rgb(244, 244, 244);
129
+ border: none;
130
+ border-radius: 4px;
131
+ }
132
+
133
+ .cloudimage-360 .cloudimage-360-left:focus,
134
+ .cloudimage-360 .cloudimage-360-right:focus {
135
+ outline: none;
136
+ }
137
+
138
+ .cloudimage-360 .cloudimage-360-left {
139
+ display: none;
140
+ position: absolute;
141
+ z-index: 100;
142
+ top: calc(50% - 15px);
143
+ left: 20px;
144
+ }
145
+
146
+ .cloudimage-360 .cloudimage-360-right {
147
+ display: none;
148
+ position: absolute;
149
+ z-index: 100;
150
+ top: calc(50% - 15px);
151
+ right: 20px;
152
+ }
153
+
154
+ .cloudimage-360 .cloudimage-360-left:before,
155
+ .cloudimage-360 .cloudimage-360-right:before {
156
+ content: '';
157
+ display: block;
158
+ width: 30px;
159
+ height: 30px;
160
+ background: 50% 50% / cover no-repeat;
161
+ }
162
+
163
+ .cloudimage-360 .cloudimage-360-left:before {
164
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
165
+ }
166
+
167
+ .cloudimage-360 .cloudimage-360-right:before {
168
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
169
+ }
170
+
171
+ .cloudimage-360 .cloudimage-360-left.not-active,
172
+ .cloudimage-360 .cloudimage-360-right.not-active {
173
+ opacity: 0.4;
174
+ cursor: default;
175
+ pointer-events: none;
176
+ }
177
+
178
+ .cloudimage-360 .cloudimage-360-top,
179
+ .cloudimage-360 .cloudimage-360-bottom {
180
+ padding: 8px;
181
+ background: rgb(244, 244, 244);
182
+ border: none;
183
+ border-radius: 4px;
184
+ }
185
+
186
+ .cloudimage-360 .cloudimage-360-top:focus,
187
+ .cloudimage-360 .cloudimage-360-bottom:focus {
188
+ outline: none;
189
+ }
190
+
191
+ .cloudimage-360 .cloudimage-360-top {
192
+ display: none;
193
+ position: absolute;
194
+ z-index: 100;
195
+ left: calc(50% - 15px);
196
+ top: 20px;
197
+ transform: rotate(90deg);
198
+ }
199
+
200
+ .cloudimage-360 .cloudimage-360-bottom {
201
+ display: none;
202
+ position: absolute;
203
+ z-index: 100;
204
+ left: calc(50% - 15px);
205
+ bottom: 20px;
206
+ transform: rotate(90deg);
207
+ }
208
+
209
+ .cloudimage-360 .cloudimage-360-top:before,
210
+ .cloudimage-360 .cloudimage-360-bottom:before {
211
+ content: '';
212
+ display: block;
213
+ width: 30px;
214
+ height: 30px;
215
+ background: 50% 50% / cover no-repeat;
216
+ }
217
+
218
+ .cloudimage-360 .cloudimage-360-top:before {
219
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
220
+ }
221
+
222
+ .cloudimage-360 .cloudimage-360-bottom:before {
223
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
224
+ }
225
+
226
+ .cloudimage-360 .cloudimage-360-top.not-active,
227
+ .cloudimage-360 .cloudimage-360-bottom.not-active {
228
+ opacity: 0.4;
229
+ cursor: default;
230
230
  }
package/dist/utils/image-src/generate-images-path.js CHANGED
@@ -11,7 +11,7 @@ var _getResponsiveWidthOfContainer = require("../responsive/get-responsive-width
11
11
 
12
12
  var _getSizeAccordingToPixelRatio = require("../responsive/get-size-according-to-pixel-ratio");
13
13
 
14
- var generateImagesPath = function generateImagesPath(srcConfig) {
14
+ var generateImagesPath = function generateImagesPath(srcConfig, loadOriginalImages) {
15
15
  var container = srcConfig.container,
16
16
  folder = srcConfig.folder,
17
17
  apiVersion = srcConfig.apiVersion,
@@ -33,7 +33,7 @@ var generateImagesPath = function generateImagesPath(srcConfig) {
33
33
  var ciSizeNext = (0, _getSizeAccordingToPixelRatio.getSizeAccordingToPixelRatio)((0, _getResponsiveWidthOfContainer.getResponsiveWidthOfContainer)(imageOffsetWidth));
34
34
  var isCloudImageUrl = new URL(src).origin.indexOf('cloudimg') !== -1;
35
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) : '');
36
+ src = "".concat(cdn, "?").concat(ciTransformation || "".concat(!loadOriginalImages ? "width=".concat(ciSizeNext) : '', " ")).concat(ciFilters ? "&f=".concat(ciFilters) : '');
37
37
  }
38
38
 
39
39
  return src;
package/dist/utils/load-images/images-from-list/prepare-images-from-list.js CHANGED
@@ -22,13 +22,7 @@ var prepareImagesFromList = function prepareImagesFromList(images, srcConfig, lo
22
22
 
23
23
  nextSrcConfig.folder = /(http(s?)):\/\//gi.test(src) ? '' : folder;
24
24
  nextSrcConfig.filename = src;
25
-
26
- if (loadOriginalImages) {
27
- var lastIndex = resultSrc.lastIndexOf('//');
28
- return resultSrc.slice(lastIndex);
29
- }
30
-
31
- return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig);
25
+ return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig, loadOriginalImages);
32
26
  });
33
27
  };
34
28
 
package/package.json CHANGED
@@ -1,62 +1,67 @@
1
- {
2
- "name": "js-cloudimage-360-view",
3
- "version": "3.0.2",
4
- "main": "dist/index.js",
5
- "description": "",
6
- "author": "scaleflex",
7
- "license": "MIT",
8
- "repository": {
9
- "type": "git",
10
- "url": "https://github.com/scaleflex/js-cloudimage-360-view"
11
- },
12
- "homepage": "#readme",
13
- "keywords": [
14
- "image",
15
- "images",
16
- "cloudimage",
17
- "360",
18
- "photo",
19
- "product",
20
- "view",
21
- "viewer",
22
- "360 product view"
23
- ],
24
- "scripts": {
25
- "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
26
- "clean-build": "rm -rf build",
27
- "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
28
- "clean-dist": "rm -rf dist",
29
- "dist": "npm run clean-dist && babel src -d dist --copy-files",
30
- "clean-demo": "rm -rf examples/dist",
31
- "build-demo": "npm run clean-demo && webpack --mode production --config config/webpack-demo.config.js",
32
- "deploy-demo": "gh-pages -d examples/dist",
33
- "publish-demo": "npm run build-demo && npm run deploy-demo"
34
- },
35
- "dependencies": {
36
- "@babel/runtime": "^7.17.0",
37
- "@popperjs/core": "^2.11.2",
38
- "core-js": "^3.0.0"
39
- },
40
- "devDependencies": {
41
- "@babel/cli": "^7.16.7",
42
- "@babel/core": "^7.16.7",
43
- "@babel/plugin-transform-runtime": "^7.16.5",
44
- "@babel/preset-env": "^7.16.5",
45
- "babel-loader": "^8.2.3",
46
- "babel-plugin-array-includes": "^2.0.3",
47
- "babel-preset-env": "^1.7.0",
48
- "babel-preset-es2015": "^6.24.1",
49
- "babel-preset-minify": "^0.5.0",
50
- "babel-preset-stage-0": "^6.24.1",
51
- "css-loader": "^2.1.1",
52
- "gh-pages": "^2.0.1",
53
- "highlight.js": "^10.4.1",
54
- "html-webpack-plugin": "^3.2.0",
55
- "mini-css-extract-plugin": "^0.9.0",
56
- "mobile-detect": "^1.4.3",
57
- "style-loader": "^0.23.1",
58
- "webpack": "^4.46.0",
59
- "webpack-cli": "^3.3.0",
60
- "webpack-dev-server": "^3.2.1"
61
- }
62
- }
1
+ {
2
+ "name": "js-cloudimage-360-view",
3
+ "version": "3.0.4",
4
+ "main": "dist/index.js",
5
+ "description": "",
6
+ "author": "scaleflex",
7
+ "license": "MIT",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/scaleflex/js-cloudimage-360-view"
11
+ },
12
+ "homepage": "#readme",
13
+ "keywords": [
14
+ "image",
15
+ "images",
16
+ "cloudimage",
17
+ "360",
18
+ "photo",
19
+ "product",
20
+ "view",
21
+ "viewer",
22
+ "360 product view"
23
+ ],
24
+ "scripts": {
25
+ "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
26
+ "clean:build": "rm -rf build",
27
+ "build:bundle": "npm run clean:build && webpack --mode production --config config/webpack-build.config.js",
28
+ "deploy:bundle": "npm run build:bundle && node bin/deploy-bundle",
29
+ "clean:dist": "rm -rf dist",
30
+ "dist": "npm run clean:dist && babel src -d dist --copy-files",
31
+ "clean:demo": "rm -rf examples/dist",
32
+ "build:demo": "npm run clean:demo && webpack --mode production --config config/webpack-demo.config.js",
33
+ "deploy:demo": "gh-pages -d examples/dist",
34
+ "publish:demo": "npm run build-demo && npm run deploy-demo"
35
+ },
36
+ "dependencies": {
37
+ "@babel/runtime": "^7.17.0",
38
+ "@popperjs/core": "^2.11.2",
39
+ "core-js": "^3.0.0"
40
+ },
41
+ "devDependencies": {
42
+ "@babel/cli": "^7.16.7",
43
+ "@babel/core": "^7.16.7",
44
+ "@babel/plugin-transform-runtime": "^7.16.5",
45
+ "@babel/preset-env": "^7.16.5",
46
+ "babel-loader": "^8.2.3",
47
+ "babel-plugin-array-includes": "^2.0.3",
48
+ "babel-preset-env": "^1.7.0",
49
+ "babel-preset-es2015": "^6.24.1",
50
+ "babel-preset-minify": "^0.5.0",
51
+ "babel-preset-stage-0": "^6.24.1",
52
+ "css-loader": "^2.1.1",
53
+ "dotenv": "^16.0.3",
54
+ "form-data": "^4.0.0",
55
+ "fs": "^0.0.1-security",
56
+ "gh-pages": "^2.0.1",
57
+ "highlight.js": "^10.4.1",
58
+ "html-webpack-plugin": "^3.2.0",
59
+ "isomorphic-fetch": "^3.0.0",
60
+ "mini-css-extract-plugin": "^0.9.0",
61
+ "mobile-detect": "^1.4.3",
62
+ "style-loader": "^0.23.1",
63
+ "webpack": "^4.46.0",
64
+ "webpack-cli": "^3.3.0",
65
+ "webpack-dev-server": "^3.2.1"
66
+ }
67
+ }