js-cloudimage-360-view 2.7.10 → 2.7.11
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 +6 -1
- package/README.md +1 -1
- package/dist/ci360.service.js +35 -36
- package/dist/ci360.utils.js +1 -1
- package/dist/utils/index.js +9 -0
- package/dist/utils/load-images/images-from-folder/prepare-images-from-folder.js +10 -12
- package/dist/utils/load-images/images-from-list/prepare-images-from-list.js +9 -11
- package/dist/utils/load-images/lazyload/init-lazyload.js +49 -0
- package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js +18 -0
- package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js +29 -0
- package/dist/utils/load-images/load-image-as-promise.js +12 -37
- package/dist/utils/load-images/load-images-relative-to-container-size.js +4 -4
- package/dist/utils/load-images/load-original-images.js +2 -2
- package/dist/utils/load-images/preload-images.js +5 -8
- package/dist/utils/load-images/preload-original-images.js +5 -8
- package/dist/utils/responsive/get-image-aspect-ratio.js +1 -1
- package/package.json +1 -1
- package/dist/utils/load-images/load-image.js +0 -26
package/CHANGELOG.md
CHANGED
|
@@ -25,7 +25,12 @@ Types of changes:
|
|
|
25
25
|
- ...
|
|
26
26
|
|
|
27
27
|
-------------
|
|
28
|
-
## 2.
|
|
28
|
+
## 2.7.11 - 2022-03-17
|
|
29
|
+
### Fixed
|
|
30
|
+
- canvas aspect ratio
|
|
31
|
+
- initialization of lazyloading
|
|
32
|
+
|
|
33
|
+
## 2.7.10 - 2022-03-01
|
|
29
34
|
### Fixed
|
|
30
35
|
- image quality in fullscreen
|
|
31
36
|
- resized image loading
|
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)
|
package/dist/ci360.service.js
CHANGED
|
@@ -71,6 +71,18 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
(0, _createClass2.default)(CI360Viewer, [{
|
|
74
|
+
key: "isReady",
|
|
75
|
+
value: function isReady() {
|
|
76
|
+
var loadedXImages = this.imagesX.filter(function (image) {
|
|
77
|
+
return image;
|
|
78
|
+
});
|
|
79
|
+
var loadedYImages = this.imagesY.filter(function (image) {
|
|
80
|
+
return image;
|
|
81
|
+
});
|
|
82
|
+
var totalAmount = this.amountX + this.amountY;
|
|
83
|
+
return loadedXImages.length + loadedYImages.length === totalAmount;
|
|
84
|
+
}
|
|
85
|
+
}, {
|
|
74
86
|
key: "mouseDown",
|
|
75
87
|
value: function mouseDown(event) {
|
|
76
88
|
if (!this.imagesLoaded) return;
|
|
@@ -715,12 +727,13 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
715
727
|
}, {
|
|
716
728
|
key: "requestResizedImages",
|
|
717
729
|
value: function requestResizedImages() {
|
|
730
|
+
if (!this.isReady()) return;
|
|
718
731
|
var responsive = this.ciParams.ciToken;
|
|
719
732
|
var firstImage = this.imagesX[0];
|
|
720
733
|
this.update();
|
|
734
|
+
if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
|
|
721
735
|
this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
|
|
722
736
|
var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
|
|
723
|
-
if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
|
|
724
737
|
(0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
|
|
725
738
|
|
|
726
739
|
if (this.allowSpinY) {
|
|
@@ -799,6 +812,7 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
799
812
|
value: function onFirstImageLoaded(image) {
|
|
800
813
|
if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
|
|
801
814
|
var ctx = this.canvas.getContext("2d");
|
|
815
|
+
ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
|
|
802
816
|
this.updateContainerAndCanvasSize(image);
|
|
803
817
|
|
|
804
818
|
if (this.fullscreenView) {
|
|
@@ -1276,8 +1290,6 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1276
1290
|
this.disableDrag = disableDrag;
|
|
1277
1291
|
this.fullscreen = fullscreen;
|
|
1278
1292
|
this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
|
|
1279
|
-
this.lazyloadX = lazyload;
|
|
1280
|
-
this.lazyloadY = lazyload;
|
|
1281
1293
|
this.lazySelector = lazySelector;
|
|
1282
1294
|
this.spinReverse = spinReverse;
|
|
1283
1295
|
this.controlReverse = controlReverse;
|
|
@@ -1343,7 +1355,6 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1343
1355
|
innerBox: this.innerBox,
|
|
1344
1356
|
apiVersion: apiVersion,
|
|
1345
1357
|
ciParams: ciParams,
|
|
1346
|
-
lazyload: lazyload,
|
|
1347
1358
|
lazySelector: lazySelector,
|
|
1348
1359
|
amount: this.amountX,
|
|
1349
1360
|
indexZeroBase: indexZeroBase,
|
|
@@ -1356,26 +1367,6 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1356
1367
|
amount: this.amountY
|
|
1357
1368
|
});
|
|
1358
1369
|
var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
|
|
1359
|
-
var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
|
|
1360
|
-
|
|
1361
|
-
var initLazyload = function initLazyload(image, orientation) {
|
|
1362
|
-
var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
|
|
1363
|
-
lazyload: false
|
|
1364
|
-
});
|
|
1365
|
-
|
|
1366
|
-
var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
|
|
1367
|
-
lazyload: false
|
|
1368
|
-
});
|
|
1369
|
-
|
|
1370
|
-
if (orientation === _constants.ORIENTATIONS.Y) {
|
|
1371
|
-
_this7.lazyloadY = false;
|
|
1372
|
-
(0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
|
|
1373
|
-
} else {
|
|
1374
|
-
_this7.lazyloadX = false;
|
|
1375
|
-
_this7.lazyloadInitImageX = image;
|
|
1376
|
-
(0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
|
|
1377
|
-
}
|
|
1378
|
-
};
|
|
1379
1370
|
|
|
1380
1371
|
var onImageLoad = function onImageLoad(orientation, image, index) {
|
|
1381
1372
|
if (orientation !== _constants.ORIENTATIONS.Y) {
|
|
@@ -1393,32 +1384,40 @@ var CI360Viewer = /*#__PURE__*/function () {
|
|
|
1393
1384
|
});
|
|
1394
1385
|
|
|
1395
1386
|
var totalAmount = _this7.amountX + _this7.amountY;
|
|
1396
|
-
var totalLoadedImages =
|
|
1397
|
-
var isFirstImageLoaded = index
|
|
1398
|
-
var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
|
|
1387
|
+
var totalLoadedImages = loadedXImages.length + loadedYImages.length;
|
|
1388
|
+
var isFirstImageLoaded = !index && orientation !== _constants.ORIENTATIONS.Y;
|
|
1399
1389
|
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
|
|
1400
1390
|
|
|
1401
1391
|
_this7.updatePercentageInLoader(percentage);
|
|
1402
1392
|
|
|
1403
|
-
if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
|
|
1404
|
-
|
|
1405
1393
|
if (isFirstImageLoaded) {
|
|
1406
1394
|
_this7.onFirstImageLoaded(image);
|
|
1407
1395
|
}
|
|
1408
1396
|
|
|
1409
|
-
if (
|
|
1397
|
+
if (_this7.isReady()) {
|
|
1410
1398
|
_this7.onAllImagesLoaded();
|
|
1399
|
+
}
|
|
1400
|
+
};
|
|
1411
1401
|
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1402
|
+
var loadImages = function loadImages() {
|
|
1403
|
+
(0, _utils.preloadImages)(_this7.srcXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
|
|
1404
|
+
|
|
1405
|
+
if (_this7.allowSpinY) {
|
|
1406
|
+
var srcY = (0, _utils.generateImagesPath)(_this7.srcYConfig);
|
|
1407
|
+
(0, _utils.preloadImages)(_this7.srcYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
|
|
1415
1408
|
}
|
|
1416
1409
|
};
|
|
1417
1410
|
|
|
1418
|
-
(
|
|
1411
|
+
if (lazyload) {
|
|
1412
|
+
var onFirstImageLoad = function onFirstImageLoad(image) {
|
|
1413
|
+
_this7.innerBox.removeChild(image);
|
|
1419
1414
|
|
|
1420
|
-
|
|
1421
|
-
|
|
1415
|
+
loadImages();
|
|
1416
|
+
};
|
|
1417
|
+
|
|
1418
|
+
(0, _utils.initLazyload)(srcX, this.srcXConfig, onFirstImageLoad);
|
|
1419
|
+
} else {
|
|
1420
|
+
loadImages();
|
|
1422
1421
|
}
|
|
1423
1422
|
|
|
1424
1423
|
this.attachEvents(draggable, swipeable, keys);
|
package/dist/ci360.utils.js
CHANGED
|
@@ -46,7 +46,7 @@ var get360ViewProps = function get360ViewProps(image) {
|
|
|
46
46
|
stopAtEdges: isTrue(image, 'stop-at-edges'),
|
|
47
47
|
hide360Logo: isTrue(image, 'hide-360-logo'),
|
|
48
48
|
logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
|
|
49
|
-
ratio: attr(image, 'ratio') || attr(image, 'data-ratio')
|
|
49
|
+
ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
|
|
50
50
|
imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
|
|
51
51
|
};
|
|
52
52
|
};
|
package/dist/utils/index.js
CHANGED
|
@@ -8,6 +8,7 @@ var _exportNames = {
|
|
|
8
8
|
generateImagesPath: true,
|
|
9
9
|
preloadImages: true,
|
|
10
10
|
preloadOriginalImages: true,
|
|
11
|
+
initLazyload: true,
|
|
11
12
|
contain: true,
|
|
12
13
|
getImageAspectRatio: true,
|
|
13
14
|
getCurrentOriginalImage: true,
|
|
@@ -112,6 +113,12 @@ Object.defineProperty(exports, "initControls", {
|
|
|
112
113
|
return _initControls.initControls;
|
|
113
114
|
}
|
|
114
115
|
});
|
|
116
|
+
Object.defineProperty(exports, "initLazyload", {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: function get() {
|
|
119
|
+
return _initLazyload.initLazyload;
|
|
120
|
+
}
|
|
121
|
+
});
|
|
115
122
|
Object.defineProperty(exports, "isCompletedOneCycle", {
|
|
116
123
|
enumerable: true,
|
|
117
124
|
get: function get() {
|
|
@@ -175,6 +182,8 @@ var _preloadImages = require("./load-images/preload-images");
|
|
|
175
182
|
|
|
176
183
|
var _preloadOriginalImages = require("./load-images/preload-original-images");
|
|
177
184
|
|
|
185
|
+
var _initLazyload = require("./load-images/lazyload/init-lazyload");
|
|
186
|
+
|
|
178
187
|
var _contain = require("./responsive/contain");
|
|
179
188
|
|
|
180
189
|
var _getImageAspectRatio = require("./responsive/get-image-aspect-ratio");
|
|
@@ -13,24 +13,22 @@ var _regex = require("../../../constants/regex");
|
|
|
13
13
|
|
|
14
14
|
var _pad = require("../pad");
|
|
15
15
|
|
|
16
|
-
var prepareImagesFromFolder = function prepareImagesFromFolder(imagesSrc, srcConfig) {
|
|
16
|
+
var prepareImagesFromFolder = function prepareImagesFromFolder(imagesSrc, srcConfig, loadOriginalImages) {
|
|
17
17
|
var _ref = srcConfig || {},
|
|
18
18
|
amount = _ref.amount,
|
|
19
19
|
indexZeroBase = _ref.indexZeroBase;
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
var originalSrc = [];
|
|
23
|
-
(0, _toConsumableArray2.default)(new Array(amount)).forEach(function (_item, index) {
|
|
21
|
+
return (0, _toConsumableArray2.default)(new Array(amount)).map(function (_item, index) {
|
|
24
22
|
var nextZeroFilledIndex = (0, _pad.pad)(index + 1, indexZeroBase);
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
var imageSrc = imagesSrc.replace('{index}', nextZeroFilledIndex);
|
|
24
|
+
|
|
25
|
+
if (loadOriginalImages) {
|
|
26
|
+
var imageOriginalSrc = imageSrc.replace(_regex.ORGINAL_SIZE_REGEX, '').replace(_regex.AND_SYMBOL_REGEX, '?');
|
|
27
|
+
return imageOriginalSrc;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return imageSrc;
|
|
29
31
|
});
|
|
30
|
-
return {
|
|
31
|
-
resultSrc: resultSrc,
|
|
32
|
-
originalSrc: originalSrc
|
|
33
|
-
};
|
|
34
32
|
};
|
|
35
33
|
|
|
36
34
|
exports.prepareImagesFromFolder = prepareImagesFromFolder;
|
|
@@ -15,23 +15,21 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
15
15
|
|
|
16
16
|
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; }
|
|
17
17
|
|
|
18
|
-
var prepareImagesFromList = function prepareImagesFromList(images, srcConfig) {
|
|
18
|
+
var prepareImagesFromList = function prepareImagesFromList(images, srcConfig, loadOriginalImages) {
|
|
19
19
|
var folder = srcConfig.folder;
|
|
20
|
-
|
|
21
|
-
var originalSrc = [];
|
|
22
|
-
images.forEach(function (src) {
|
|
20
|
+
return images.map(function (src) {
|
|
23
21
|
var nextSrcConfig = _objectSpread({}, srcConfig);
|
|
24
22
|
|
|
25
23
|
nextSrcConfig.folder = /(http(s?)):\/\//gi.test(src) ? '' : folder;
|
|
26
24
|
nextSrcConfig.filename = src;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
|
|
26
|
+
if (loadOriginalImages) {
|
|
27
|
+
var lastIndex = resultSrc.lastIndexOf('//');
|
|
28
|
+
return resultSrc.slice(lastIndex);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig);
|
|
30
32
|
});
|
|
31
|
-
return {
|
|
32
|
-
resultSrc: resultSrc,
|
|
33
|
-
originalSrc: originalSrc
|
|
34
|
-
};
|
|
35
33
|
};
|
|
36
34
|
|
|
37
35
|
exports.prepareImagesFromList = prepareImagesFromList;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.initLazyload = void 0;
|
|
7
|
+
|
|
8
|
+
var _prepareFirstImageFromFolder = require("./prepare-first-image/prepare-first-image-from-folder");
|
|
9
|
+
|
|
10
|
+
var _prepareFirstImageFromList = require("./prepare-first-image/prepare-first-image-from-list");
|
|
11
|
+
|
|
12
|
+
var initLazyload = function initLazyload(imagesSrc, srcConfig, cb) {
|
|
13
|
+
var _ref = srcConfig || {},
|
|
14
|
+
imageList = _ref.imageList,
|
|
15
|
+
lazySelector = _ref.lazySelector,
|
|
16
|
+
innerBox = _ref.innerBox;
|
|
17
|
+
|
|
18
|
+
var firstImageSrc;
|
|
19
|
+
|
|
20
|
+
if (imageList) {
|
|
21
|
+
try {
|
|
22
|
+
var images = JSON.parse(imageList);
|
|
23
|
+
firstImageSrc = (0, _prepareFirstImageFromList.prepareFirstImageFromList)(images, srcConfig);
|
|
24
|
+
} catch (error) {
|
|
25
|
+
console.error("Wrong format in image-list attribute: ".concat(error.message));
|
|
26
|
+
}
|
|
27
|
+
} else {
|
|
28
|
+
firstImageSrc = (0, _prepareFirstImageFromFolder.prepareFirstImageFromFolder)(imagesSrc, srcConfig);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var image = new Image();
|
|
32
|
+
image.setAttribute('data-src', firstImageSrc);
|
|
33
|
+
image.style.position = 'absolute';
|
|
34
|
+
image.style.top = 0;
|
|
35
|
+
image.style.left = 0;
|
|
36
|
+
image.style.width = '100%';
|
|
37
|
+
image.style.maxWidth = '100%';
|
|
38
|
+
image.style.maxHeight = '100%';
|
|
39
|
+
if (lazySelector) image.className = lazySelector;
|
|
40
|
+
innerBox.appendChild(image);
|
|
41
|
+
|
|
42
|
+
if (cb) {
|
|
43
|
+
image.onload = function () {
|
|
44
|
+
return cb(image);
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
exports.initLazyload = initLazyload;
|
package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.prepareFirstImageFromFolder = void 0;
|
|
7
|
+
|
|
8
|
+
var _pad = require("../../pad");
|
|
9
|
+
|
|
10
|
+
var prepareFirstImageFromFolder = function prepareFirstImageFromFolder(imagesSrcs, srcConfig) {
|
|
11
|
+
var _ref = srcConfig || {},
|
|
12
|
+
indexZeroBase = _ref.indexZeroBase;
|
|
13
|
+
|
|
14
|
+
var nextZeroFilledIndex = (0, _pad.pad)(1, indexZeroBase);
|
|
15
|
+
return imagesSrcs.replace('{index}', nextZeroFilledIndex);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
exports.prepareFirstImageFromFolder = prepareFirstImageFromFolder;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.prepareFirstImageFromList = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _generateImagesPath = require("../../../image-src/generate-images-path");
|
|
13
|
+
|
|
14
|
+
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; }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
var prepareFirstImageFromList = function prepareFirstImageFromList(images, srcConfig) {
|
|
19
|
+
var folder = srcConfig.folder;
|
|
20
|
+
var firstImageSrc = images[0];
|
|
21
|
+
|
|
22
|
+
var nextSrcConfig = _objectSpread({}, srcConfig);
|
|
23
|
+
|
|
24
|
+
nextSrcConfig.folder = /(http(s?)):\/\//gi.test(firstImageSrc) ? '' : folder;
|
|
25
|
+
nextSrcConfig.filename = firstImageSrc;
|
|
26
|
+
return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
exports.prepareFirstImageFromList = prepareFirstImageFromList;
|
|
@@ -11,59 +11,34 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
11
11
|
|
|
12
12
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
13
13
|
|
|
14
|
-
var _orientations = require("../../constants/orientations");
|
|
15
|
-
|
|
16
14
|
var loadImageAsPromise = /*#__PURE__*/function () {
|
|
17
|
-
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index,
|
|
18
|
-
var
|
|
19
|
-
_ref2,
|
|
20
|
-
lazyload,
|
|
21
|
-
lazySelector,
|
|
22
|
-
fullscreenView,
|
|
23
|
-
innerBox,
|
|
24
|
-
orientation,
|
|
25
|
-
image,
|
|
26
|
-
_args = arguments;
|
|
27
|
-
|
|
15
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(src, index, cb) {
|
|
16
|
+
var image;
|
|
28
17
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
29
18
|
while (1) {
|
|
30
19
|
switch (_context.prev = _context.next) {
|
|
31
20
|
case 0:
|
|
32
|
-
onImageLoadCallback = _args.length > 3 && _args[3] !== undefined ? _args[3] : function () {};
|
|
33
|
-
_ref2 = srcConfig || {}, lazyload = _ref2.lazyload, lazySelector = _ref2.lazySelector, fullscreenView = _ref2.fullscreenView, innerBox = _ref2.innerBox, orientation = _ref2.orientation;
|
|
34
21
|
image = new Image();
|
|
35
|
-
|
|
36
|
-
if (lazyload && !fullscreenView) {
|
|
37
|
-
image.setAttribute('data-src', src);
|
|
38
|
-
image.className = image.className.length ? "".concat(image.className, " ").concat(lazySelector) : lazySelector;
|
|
39
|
-
|
|
40
|
-
if (index === 0 && orientation !== _orientations.ORIENTATIONS.Y) {
|
|
41
|
-
image.style.position = 'absolute';
|
|
42
|
-
image.style.top = '0';
|
|
43
|
-
image.style.left = '0';
|
|
44
|
-
innerBox.appendChild(image);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
image.onload = function () {
|
|
48
|
-
return onImageLoadCallback(image, index);
|
|
49
|
-
};
|
|
50
|
-
} else {
|
|
51
|
-
image.src = src;
|
|
52
|
-
}
|
|
53
|
-
|
|
22
|
+
image.src = src;
|
|
54
23
|
return _context.abrupt("return", new Promise(function (reslove) {
|
|
55
24
|
image.onload = function () {
|
|
56
|
-
onImageLoadCallback(image, index);
|
|
57
25
|
reslove(image);
|
|
26
|
+
|
|
27
|
+
if (cb) {
|
|
28
|
+
cb(image, index);
|
|
29
|
+
}
|
|
58
30
|
};
|
|
59
31
|
|
|
60
32
|
image.onerror = function () {
|
|
61
|
-
onImageLoadCallback(image, index);
|
|
62
33
|
reslove(image);
|
|
34
|
+
|
|
35
|
+
if (cb) {
|
|
36
|
+
cb(image, index);
|
|
37
|
+
}
|
|
63
38
|
};
|
|
64
39
|
}));
|
|
65
40
|
|
|
66
|
-
case
|
|
41
|
+
case 3:
|
|
67
42
|
case "end":
|
|
68
43
|
return _context.stop();
|
|
69
44
|
}
|
|
@@ -14,7 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
|
14
14
|
var _loadImageAsPromise = require("./load-image-as-promise");
|
|
15
15
|
|
|
16
16
|
var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
|
|
17
|
-
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs,
|
|
17
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, cb) {
|
|
18
18
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
19
19
|
while (1) {
|
|
20
20
|
switch (_context2.prev = _context2.next) {
|
|
@@ -27,7 +27,7 @@ var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
|
|
|
27
27
|
switch (_context.prev = _context.next) {
|
|
28
28
|
case 0:
|
|
29
29
|
_context.next = 2;
|
|
30
|
-
return (0, _loadImageAsPromise.loadImageAsPromise)(src, index,
|
|
30
|
+
return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, cb);
|
|
31
31
|
|
|
32
32
|
case 2:
|
|
33
33
|
case "end":
|
|
@@ -37,7 +37,7 @@ var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
|
|
|
37
37
|
}, _callee);
|
|
38
38
|
}));
|
|
39
39
|
|
|
40
|
-
return function (
|
|
40
|
+
return function (_x3, _x4) {
|
|
41
41
|
return _ref2.apply(this, arguments);
|
|
42
42
|
};
|
|
43
43
|
}()));
|
|
@@ -50,7 +50,7 @@ var loadImagesRelativeToContainerSize = /*#__PURE__*/function () {
|
|
|
50
50
|
}, _callee2);
|
|
51
51
|
}));
|
|
52
52
|
|
|
53
|
-
return function loadImagesRelativeToContainerSize(_x, _x2
|
|
53
|
+
return function loadImagesRelativeToContainerSize(_x, _x2) {
|
|
54
54
|
return _ref.apply(this, arguments);
|
|
55
55
|
};
|
|
56
56
|
}();
|
|
@@ -14,7 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
|
14
14
|
var _loadImageAsPromise = require("./load-image-as-promise");
|
|
15
15
|
|
|
16
16
|
var loadOriginalImages = /*#__PURE__*/function () {
|
|
17
|
-
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs,
|
|
17
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imagesSrcs, cb) {
|
|
18
18
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
19
19
|
while (1) {
|
|
20
20
|
switch (_context2.prev = _context2.next) {
|
|
@@ -27,7 +27,7 @@ var loadOriginalImages = /*#__PURE__*/function () {
|
|
|
27
27
|
switch (_context.prev = _context.next) {
|
|
28
28
|
case 0:
|
|
29
29
|
_context.next = 2;
|
|
30
|
-
return (0, _loadImageAsPromise.loadImageAsPromise)(src, index,
|
|
30
|
+
return (0, _loadImageAsPromise.loadImageAsPromise)(src, index, cb);
|
|
31
31
|
|
|
32
32
|
case 2:
|
|
33
33
|
case "end":
|
|
@@ -12,27 +12,24 @@ var _prepareImagesFromFolder = require("./images-from-folder/prepare-images-from
|
|
|
12
12
|
var _prepareImagesFromList = require("./images-from-list/prepare-images-from-list");
|
|
13
13
|
|
|
14
14
|
/* eslint-disable no-console */
|
|
15
|
-
var preloadImages = function preloadImages(srcConfig, imagesSrc,
|
|
15
|
+
var preloadImages = function preloadImages(srcConfig, imagesSrc, cb) {
|
|
16
16
|
var _ref = srcConfig || {},
|
|
17
17
|
imageList = _ref.imageList;
|
|
18
18
|
|
|
19
|
-
var
|
|
19
|
+
var imagesSrcs = [];
|
|
20
20
|
|
|
21
21
|
if (imageList) {
|
|
22
22
|
try {
|
|
23
23
|
var images = JSON.parse(imageList);
|
|
24
|
-
|
|
24
|
+
imagesSrcs = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig);
|
|
25
25
|
} catch (error) {
|
|
26
26
|
console.error("Wrong format in image-list attribute: ".concat(error.message));
|
|
27
27
|
}
|
|
28
28
|
} else {
|
|
29
|
-
|
|
29
|
+
imagesSrcs = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
resultSrc = _ref2.resultSrc;
|
|
34
|
-
|
|
35
|
-
(0, _loadImagesRelativeToContainerSize.loadImagesRelativeToContainerSize)(resultSrc, srcConfig, onImageLoadCallback);
|
|
32
|
+
(0, _loadImagesRelativeToContainerSize.loadImagesRelativeToContainerSize)(imagesSrcs, cb);
|
|
36
33
|
};
|
|
37
34
|
|
|
38
35
|
exports.preloadImages = preloadImages;
|
|
@@ -12,27 +12,24 @@ var _prepareImagesFromList = require("./images-from-list/prepare-images-from-lis
|
|
|
12
12
|
var _loadOriginalImages = require("./load-original-images");
|
|
13
13
|
|
|
14
14
|
/* eslint-disable no-console */
|
|
15
|
-
var preloadOriginalImages = function preloadOriginalImages(srcConfig, imagesSrc,
|
|
15
|
+
var preloadOriginalImages = function preloadOriginalImages(srcConfig, imagesSrc, cb) {
|
|
16
16
|
var _ref = srcConfig || {},
|
|
17
17
|
imageList = _ref.imageList;
|
|
18
18
|
|
|
19
|
-
var
|
|
19
|
+
var imagesSrcs = [];
|
|
20
20
|
|
|
21
21
|
if (imageList) {
|
|
22
22
|
try {
|
|
23
23
|
var images = JSON.parse(imageList);
|
|
24
|
-
|
|
24
|
+
imagesSrcs = (0, _prepareImagesFromList.prepareImagesFromList)(images, srcConfig, true);
|
|
25
25
|
} catch (error) {
|
|
26
26
|
console.error("Wrong format in image-list attribute: ".concat(error.message));
|
|
27
27
|
}
|
|
28
28
|
} else {
|
|
29
|
-
|
|
29
|
+
imagesSrcs = (0, _prepareImagesFromFolder.prepareImagesFromFolder)(imagesSrc, srcConfig, true);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
originalSrc = _ref2.originalSrc;
|
|
34
|
-
|
|
35
|
-
(0, _loadOriginalImages.loadOriginalImages)(originalSrc, onImageLoadCallback);
|
|
32
|
+
(0, _loadOriginalImages.loadOriginalImages)(imagesSrcs, cb);
|
|
36
33
|
};
|
|
37
34
|
|
|
38
35
|
exports.preloadOriginalImages = preloadOriginalImages;
|
|
@@ -17,7 +17,7 @@ var getImageAspectRatio = function getImageAspectRatio(image, providedRatio) {
|
|
|
17
17
|
imageAspectRatio = providedRatio;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
if ((0, _typeof2.default)(providedRatio) === 'object') {
|
|
20
|
+
if (providedRatio && (0, _typeof2.default)(providedRatio) === 'object') {
|
|
21
21
|
var mediaQueries = Object.keys(providedRatio).sort(function (a, b) {
|
|
22
22
|
return a - b;
|
|
23
23
|
});
|
package/package.json
CHANGED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.loadImage = void 0;
|
|
7
|
-
|
|
8
|
-
var loadImage = function loadImage(src, index, srcConfig) {
|
|
9
|
-
var _ref = srcConfig || {},
|
|
10
|
-
lazyload = _ref.lazyload,
|
|
11
|
-
lazySelector = _ref.lazySelector,
|
|
12
|
-
fullscreenView = _ref.fullscreenView;
|
|
13
|
-
|
|
14
|
-
var image = new Image();
|
|
15
|
-
|
|
16
|
-
if (lazyload && !fullscreenView) {
|
|
17
|
-
image.setAttribute('data-src', src);
|
|
18
|
-
image.className = image.className.length ? "".concat(image.className, " ").concat(lazySelector) : lazySelector;
|
|
19
|
-
} else {
|
|
20
|
-
image.src = src;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return image;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
exports.loadImage = loadImage;
|