@lenne.tech/ng-base 0.3.1 → 0.3.2

package/bundles/lenne.tech-ng-base.umd.js

@@ -785,12 +785,162 @@
         src: [{ type: i0.Input }]
     };
 
+    /**
+     * Image service
+     */
+    var ImageService = /** @class */ (function () {
+        function ImageService() {
+        }
+        /**
+         * Preaload images (for lazy handling)
+         *
+         * @param options
+         * @protected
+         */
+        ImageService.prototype.preLoadImages = function (options) {
+            var _this = this;
+            // Init configuration
+            var config = Object.assign({ doneFunnction: undefined, elements: document, regExp: undefined, timeout: undefined }, options);
+            return new Promise(function (resolve) {
+                var e_1, _b;
+                var _a;
+                // Init variables
+                var resolved = false;
+                var timeoutId;
+                // HTMLCollection to array
+                if (config.elements instanceof HTMLCollection) {
+                    config.elements = Array.from(config.elements);
+                }
+                // Single element to array
+                if (!Array.isArray(config.elements)) {
+                    config.elements = [config.elements];
+                }
+                // Init loading
+                var promises = [];
+                // Get all images
+                var images = [];
+                config.elements.forEach(function (element) {
+                    images = images.concat(Array.from(element.getElementsByTagName('img')));
+                });
+                var _loop_1 = function (image) {
+                    var src = image.getAttribute('src');
+                    // Check if changes are necessary and possible
+                    if ((image.complete && image.naturalHeight !== 0) || // already laoded
+                        image.getAttribute('loading') !== 'lazy' || // loading attribute !== lazy
+                        !src || // Image has no src
+                        ((_a = config.regExp) === null || _a === void 0 ? void 0 : _a.test(src)) // Test if src matches regular expression
+                    ) {
+                        return "continue";
+                    }
+                    // Replace lazy loading image with immediately loading image
+                    var newImage = document.createElement('img');
+                    Array.from(image.attributes).forEach(function (attr) {
+                        if (attr.name !== 'loading' && attr.name !== 'src') {
+                            newImage.setAttribute(attr.name, attr.value);
+                        }
+                    });
+                    image.replaceWith(newImage);
+                    // Wait for laoding
+                    promises.push(_this.loadImage(newImage, src));
+                };
+                try {
+                    // Prepare images
+                    for (var images_1 = __values(images), images_1_1 = images_1.next(); !images_1_1.done; images_1_1 = images_1.next()) {
+                        var image = images_1_1.value;
+                        _loop_1(image);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (images_1_1 && !images_1_1.done && (_b = images_1.return)) _b.call(images_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                if (config.timeout) {
+                    timeoutId = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    resolved = true;
+                                    if (!config.doneFunnction) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, config.doneFunction()];
+                                case 1:
+                                    _b.sent();
+                                    _b.label = 2;
+                                case 2:
+                                    resolve(undefined);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                }
+                // Wait until all images loaded
+                Promise.all(promises)
+                    .catch(function (e) { return console.error('Error during image loading', e); })
+                    .finally(function () { return __awaiter(_this, void 0, void 0, function () {
+                    var result;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                // Check if already resolved
+                                if (resolved) {
+                                    return [2 /*return*/];
+                                }
+                                // Stop timeout
+                                if (timeoutId) {
+                                    clearTimeout(timeoutId);
+                                }
+                                if (!config.doneFunnction) return [3 /*break*/, 2];
+                                return [4 /*yield*/, config.doneFunction()];
+                            case 1:
+                                result = _b.sent();
+                                _b.label = 2;
+                            case 2:
+                                resolve(result);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        };
+        /**
+         * Load image for image element
+         *
+         * @param imageElement
+         * @param src
+         * @protected
+         */
+        ImageService.prototype.loadImage = function (imageElement, src) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    src = src || imageElement.src;
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            imageElement.onload = function () { return resolve(imageElement); };
+                            imageElement.onerror = reject;
+                            imageElement.src = src;
+                        })];
+                });
+            });
+        };
+        return ImageService;
+    }());
+    ImageService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(); }, token: ImageService, providedIn: "root" });
+    ImageService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+
     /**
      * Set same height (maximum) to different elements
      */
     var MatchHeightDirective = /** @class */ (function () {
-        function MatchHeightDirective(el) {
+        function MatchHeightDirective(el, imageService, zone) {
             this.el = el;
+            this.imageService = imageService;
+            this.zone = zone;
+            this.loadLazyImages = true;
         }
         MatchHeightDirective.prototype.onResize = function () {
             this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
@@ -799,33 +949,82 @@
             this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
         };
         MatchHeightDirective.prototype.matchHeight = function (parent, target) {
-            if (!parent) {
-                return;
-            }
-            var classNames;
-            if (!Array.isArray(target)) {
-                classNames = [target];
-            }
-            else {
-                classNames = target;
-            }
-            classNames.forEach(function (className) {
-                // find all child structureElements with the selected class name
-                var children = parent.getElementsByClassName(className);
-                if (!children) {
-                    return;
-                }
-                // reset all children height
-                Array.from(children).forEach(function (x) {
-                    x.style.height = 'initial';
+            var _this = this;
+            // Timeout is set to force Angular to wait for all actions and only continue once the process has run through.
+            // Otherwise, an infinite loop will occur.
+            setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                var classNames, _loop_1, this_1, classNames_1, classNames_1_1, className, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!parent) {
+                                return [2 /*return*/];
+                            }
+                            if (!Array.isArray(target)) {
+                                classNames = [target];
+                            }
+                            else {
+                                classNames = target;
+                            }
+                            _loop_1 = function (className) {
+                                var children, itemHeights, maxHeight;
+                                return __generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0:
+                                            children = parent.getElementsByClassName(className);
+                                            if (!children || children.length < 2) {
+                                                return [2 /*return*/, "continue"];
+                                            }
+                                            if (!this_1.loadLazyImages) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, this_1.imageService.preLoadImages({ elements: children })];
+                                        case 1:
+                                            _c.sent();
+                                            _c.label = 2;
+                                        case 2:
+                                            // reset all children height
+                                            Array.from(children).forEach(function (element) {
+                                                element.style.height = 'initial';
+                                            });
+                                            itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
+                                            maxHeight = itemHeights.reduce(function (prev, curr) { return (curr > prev ? curr : prev); }, 0);
+                                            // update the child structureElements height to the tallest one
+                                            Array.from(children).forEach(function (element) { return (element.style.height = maxHeight + "px"); });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_1 = this;
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, 7, 8]);
+                            classNames_1 = __values(classNames), classNames_1_1 = classNames_1.next();
+                            _b.label = 2;
+                        case 2:
+                            if (!!classNames_1_1.done) return [3 /*break*/, 5];
+                            className = classNames_1_1.value;
+                            return [5 /*yield**/, _loop_1(className)];
+                        case 3:
+                            _b.sent();
+                            _b.label = 4;
+                        case 4:
+                            classNames_1_1 = classNames_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_1_1 = _b.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (classNames_1_1 && !classNames_1_1.done && (_a = classNames_1.return)) _a.call(classNames_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
                 });
-                // get all the child structureElements heights
-                var itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
-                // find out the tallest one
-                var maxHeight = itemHeights.reduce(function (prev, curr) { return (curr > prev ? curr : prev); }, 0);
-                // update the child structureElements height to the tallest one
-                Array.from(children).forEach(function (x) { return (x.style.height = maxHeight + "px"); });
-            });
+            }); }, 1);
         };
         return MatchHeightDirective;
     }());
@@ -835,10 +1034,13 @@
                 },] }
     ];
     MatchHeightDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: ImageService },
+        { type: i0.NgZone }
     ]; };
     MatchHeightDirective.propDecorators = {
         ltMatchHeight: [{ type: i0.Input }],
+        loadLazyImages: [{ type: i0.Input }],
         onResize: [{ type: i0.HostListener, args: ['window:resize',] }]
     };
 
@@ -2602,9 +2804,10 @@
         /**
          * Initializer
          */
-        function ScrollService(router, moduleConfig) {
+        function ScrollService(router, moduleConfig, imageService) {
             this.router = router;
             this.moduleConfig = moduleConfig;
+            this.imageService = imageService;
             /**
              * Is a scroll listener set
              *
@@ -2655,7 +2858,7 @@
                                 undoOverflowChanges = true;
                             }
                             if (!config.loadImagesBefore) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.preLoadImages()];
+                            return [4 /*yield*/, this.imageService.preLoadImages()];
                         case 3:
                             _a.sent();
                             _a.label = 4;
@@ -2785,122 +2988,9 @@
             // Return promise
             return this.scrollPromise;
         };
-        /**
-         * Preaload images (for lazy handling)
-         *
-         * @param options
-         * @protected
-         */
-        ScrollService.prototype.preLoadImages = function (options) {
-            var _this = this;
-            // Init configuration
-            var config = Object.assign({ doneFunnction: undefined, timeout: undefined }, options);
-            return new Promise(function (resolve) {
-                var e_1, _a;
-                // Init variables
-                var resolved = false;
-                var timeoutId;
-                // Init loading
-                var images = Array.from(document.getElementsByTagName('img'));
-                var promises = [];
-                var _loop_1 = function (image) {
-                    var src = image.getAttribute('src');
-                    // Check if changes are necessary and possible
-                    if ((image.complete && image.naturalHeight !== 0) || image.getAttribute('loading') !== 'lazy' || !src) {
-                        return "continue";
-                    }
-                    var newImage = document.createElement('img');
-                    Array.from(image.attributes).forEach(function (attr) {
-                        if (attr.name !== 'loading' && attr.name !== 'src') {
-                            newImage.setAttribute(attr.name, attr.value);
-                        }
-                    });
-                    image.replaceWith(newImage);
-                    promises.push(_this.loadImage(newImage, src));
-                };
-                try {
-                    // Prepare images
-                    for (var images_1 = __values(images), images_1_1 = images_1.next(); !images_1_1.done; images_1_1 = images_1.next()) {
-                        var image = images_1_1.value;
-                        _loop_1(image);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (images_1_1 && !images_1_1.done && (_a = images_1.return)) _a.call(images_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                if (config.timeout) {
-                    timeoutId = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    resolved = true;
-                                    if (!config.doneFunnction) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, config.doneFunction()];
-                                case 1:
-                                    _a.sent();
-                                    _a.label = 2;
-                                case 2:
-                                    resolve(undefined);
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); });
-                }
-                // Wait until all images loaded
-                Promise.all(promises)
-                    .catch(function (e) { return console.error('Error during image loading', e); })
-                    .finally(function () { return __awaiter(_this, void 0, void 0, function () {
-                    var result;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                // Check if already resolved
-                                if (resolved) {
-                                    return [2 /*return*/];
-                                }
-                                // Stop timeout
-                                if (timeoutId) {
-                                    clearTimeout(timeoutId);
-                                }
-                                if (!config.doneFunnction) return [3 /*break*/, 2];
-                                return [4 /*yield*/, config.doneFunction()];
-                            case 1:
-                                result = _a.sent();
-                                _a.label = 2;
-                            case 2:
-                                resolve(result);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-        };
-        /**
-         * Load image for image element
-         *
-         * @param imageElement
-         * @param src
-         * @protected
-         */
-        ScrollService.prototype.loadImage = function (imageElement, src) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    src = src || imageElement.src;
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            imageElement.onload = function () { return resolve(imageElement); };
-                            imageElement.onerror = reject;
-                            imageElement.src = src;
-                        })];
-                });
-            });
-        };
         return ScrollService;
     }());
-    ScrollService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(BASE_MODULE_CONFIG)); }, token: ScrollService, providedIn: "root" });
+    ScrollService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(BASE_MODULE_CONFIG), i0__namespace.ɵɵinject(ImageService)); }, token: ScrollService, providedIn: "root" });
     ScrollService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -2908,7 +2998,8 @@
     ];
     ScrollService.ctorParameters = function () { return [
         { type: i1$2.Router },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [BASE_MODULE_CONFIG,] }] }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [BASE_MODULE_CONFIG,] }] },
+        { type: ImageService }
     ]; };
 
     /**
@@ -3000,6 +3091,7 @@
     exports.GraphQLService = GraphQLService;
     exports.GraphQLType = GraphQLType;
     exports.Helper = Helper;
+    exports.ImageService = ImageService;
     exports.LazyLoadDirective = LazyLoadDirective;
     exports.LoaderService = LoaderService;
     exports.LogoutGuard = LogoutGuard;