@lenne.tech/ng-base 0.3.1 → 0.3.2

package/fesm2015/lenne.tech-ng-base-src-lib-base.js

@@ -2,19 +2,19 @@ import * as i1 from 'apollo-angular';
 import { APOLLO_OPTIONS, gql, Apollo } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Directive, ElementRef, Input, Output, HostBinding, HostListener, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Directive, ElementRef, Input, Output, HostBinding, NgZone, HostListener, Pipe, NgModule } from '@angular/core';
 import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
 import { ApolloLink, split, concat } from '@apollo/client/core';
 import { InMemoryCache } from '@apollo/client/cache';
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
+import { __awaiter } from 'tslib';
 import * as i1$2 from '@angular/platform-browser';
 import { DomSanitizer, Title, Meta } from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
 import { Router } from '@angular/router';
 import { buildClientSchema, getIntrospectionQuery } from 'graphql';
 import { map } from 'rxjs/operators';
-import { __awaiter } from 'tslib';
 
 const BASE_MODULE_CONFIG = new InjectionToken('BASE_MODULE_CONFIG');
 
@@ -418,12 +418,125 @@ LazyLoadDirective.propDecorators = {
     src: [{ type: Input }]
 };
 
+/**
+ * Image service
+ */
+class ImageService {
+    /**
+     * Preaload images (for lazy handling)
+     *
+     * @param options
+     * @protected
+     */
+    preLoadImages(options) {
+        // Init configuration
+        const config = Object.assign({ doneFunnction: undefined, elements: document, regExp: undefined, timeout: undefined }, options);
+        return new Promise((resolve) => {
+            var _a;
+            // Init variables
+            let resolved = false;
+            let 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
+            const promises = [];
+            // Get all images
+            let images = [];
+            config.elements.forEach((element) => {
+                images = images.concat(Array.from(element.getElementsByTagName('img')));
+            });
+            // Prepare images
+            for (const image of images) {
+                const 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
+                ) {
+                    continue;
+                }
+                // Replace lazy loading image with immediately loading image
+                const newImage = document.createElement('img');
+                Array.from(image.attributes).forEach((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));
+            }
+            if (config.timeout) {
+                timeoutId = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                    resolved = true;
+                    if (config.doneFunnction) {
+                        yield config.doneFunction();
+                    }
+                    resolve(undefined);
+                }));
+            }
+            // Wait until all images loaded
+            Promise.all(promises)
+                .catch((e) => console.error('Error during image loading', e))
+                .finally(() => __awaiter(this, void 0, void 0, function* () {
+                // Check if already resolved
+                if (resolved) {
+                    return;
+                }
+                // Stop timeout
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+                // Return result
+                let result;
+                if (config.doneFunnction) {
+                    result = yield config.doneFunction();
+                }
+                resolve(result);
+            }));
+        });
+    }
+    /**
+     * Load image for image element
+     *
+     * @param imageElement
+     * @param src
+     * @protected
+     */
+    loadImage(imageElement, src) {
+        return __awaiter(this, void 0, void 0, function* () {
+            src = src || imageElement.src;
+            return new Promise((resolve, reject) => {
+                imageElement.onload = () => resolve(imageElement);
+                imageElement.onerror = reject;
+                imageElement.src = src;
+            });
+        });
+    }
+}
+ImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ImageService_Factory() { return new ImageService(); }, token: ImageService, providedIn: "root" });
+ImageService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
 /**
  * Set same height (maximum) to different elements
  */
 class MatchHeightDirective {
-    constructor(el) {
+    constructor(el, imageService, zone) {
         this.el = el;
+        this.imageService = imageService;
+        this.zone = zone;
+        this.loadLazyImages = true;
     }
     onResize() {
         this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
@@ -432,33 +545,41 @@ class MatchHeightDirective {
         this.matchHeight(this.el.nativeElement, this.ltMatchHeight);
     }
     matchHeight(parent, target) {
-        if (!parent) {
-            return;
-        }
-        let classNames;
-        if (!Array.isArray(target)) {
-            classNames = [target];
-        }
-        else {
-            classNames = target;
-        }
-        classNames.forEach((className) => {
-            // find all child structureElements with the selected class name
-            const children = parent.getElementsByClassName(className);
-            if (!children) {
+        // 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(() => __awaiter(this, void 0, void 0, function* () {
+            if (!parent) {
                 return;
             }
-            // reset all children height
-            Array.from(children).forEach((x) => {
-                x.style.height = 'initial';
-            });
-            // get all the child structureElements heights
-            const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
-            // find out the tallest one
-            const maxHeight = itemHeights.reduce((prev, curr) => (curr > prev ? curr : prev), 0);
-            // update the child structureElements height to the tallest one
-            Array.from(children).forEach((x) => (x.style.height = `${maxHeight}px`));
-        });
+            let classNames;
+            if (!Array.isArray(target)) {
+                classNames = [target];
+            }
+            else {
+                classNames = target;
+            }
+            for (const className of classNames) {
+                // find all child structureElements with the selected class name
+                const children = parent.getElementsByClassName(className);
+                if (!children || children.length < 2) {
+                    continue;
+                }
+                // Load images of children
+                if (this.loadLazyImages) {
+                    yield this.imageService.preLoadImages({ elements: children });
+                }
+                // reset all children height
+                Array.from(children).forEach((element) => {
+                    element.style.height = 'initial';
+                });
+                // get all the child structureElements heights
+                const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
+                // find out the tallest one
+                const maxHeight = itemHeights.reduce((prev, curr) => (curr > prev ? curr : prev), 0);
+                // update the child structureElements height to the tallest one
+                Array.from(children).forEach((element) => (element.style.height = `${maxHeight}px`));
+            }
+        }), 1);
     }
 }
 MatchHeightDirective.decorators = [
@@ -467,10 +588,13 @@ MatchHeightDirective.decorators = [
             },] }
 ];
 MatchHeightDirective.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ImageService },
+    { type: NgZone }
 ];
 MatchHeightDirective.propDecorators = {
     ltMatchHeight: [{ type: Input }],
+    loadLazyImages: [{ type: Input }],
     onResize: [{ type: HostListener, args: ['window:resize',] }]
 };
 
@@ -2001,9 +2125,10 @@ class ScrollService {
     /**
      * Initializer
      */
-    constructor(router, moduleConfig) {
+    constructor(router, moduleConfig, imageService) {
         this.router = router;
         this.moduleConfig = moduleConfig;
+        this.imageService = imageService;
         /**
          * Is a scroll listener set
          *
@@ -2053,7 +2178,7 @@ class ScrollService {
             }
             // Load images before scrolling (once)
             if (config.loadImagesBefore) {
-                yield this.preLoadImages();
+                yield this.imageService.preLoadImages();
             }
             // Get get bounding rect of target element
             const cords = el.getBoundingClientRect();
@@ -2164,87 +2289,8 @@ class ScrollService {
         // Return promise
         return this.scrollPromise;
     }
-    /**
-     * Preaload images (for lazy handling)
-     *
-     * @param options
-     * @protected
-     */
-    preLoadImages(options) {
-        // Init configuration
-        const config = Object.assign({ doneFunnction: undefined, timeout: undefined }, options);
-        return new Promise((resolve) => {
-            // Init variables
-            let resolved = false;
-            let timeoutId;
-            // Init loading
-            const images = Array.from(document.getElementsByTagName('img'));
-            const promises = [];
-            // Prepare images
-            for (const image of images) {
-                const src = image.getAttribute('src');
-                // Check if changes are necessary and possible
-                if ((image.complete && image.naturalHeight !== 0) || image.getAttribute('loading') !== 'lazy' || !src) {
-                    continue;
-                }
-                const newImage = document.createElement('img');
-                Array.from(image.attributes).forEach((attr) => {
-                    if (attr.name !== 'loading' && attr.name !== 'src') {
-                        newImage.setAttribute(attr.name, attr.value);
-                    }
-                });
-                image.replaceWith(newImage);
-                promises.push(this.loadImage(newImage, src));
-            }
-            if (config.timeout) {
-                timeoutId = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    resolved = true;
-                    if (config.doneFunnction) {
-                        yield config.doneFunction();
-                    }
-                    resolve(undefined);
-                }));
-            }
-            // Wait until all images loaded
-            Promise.all(promises)
-                .catch((e) => console.error('Error during image loading', e))
-                .finally(() => __awaiter(this, void 0, void 0, function* () {
-                // Check if already resolved
-                if (resolved) {
-                    return;
-                }
-                // Stop timeout
-                if (timeoutId) {
-                    clearTimeout(timeoutId);
-                }
-                // Return result
-                let result;
-                if (config.doneFunnction) {
-                    result = yield config.doneFunction();
-                }
-                resolve(result);
-            }));
-        });
-    }
-    /**
-     * Load image for image element
-     *
-     * @param imageElement
-     * @param src
-     * @protected
-     */
-    loadImage(imageElement, src) {
-        return __awaiter(this, void 0, void 0, function* () {
-            src = src || imageElement.src;
-            return new Promise((resolve, reject) => {
-                imageElement.onload = () => resolve(imageElement);
-                imageElement.onerror = reject;
-                imageElement.src = src;
-            });
-        });
-    }
 }
-ScrollService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(BASE_MODULE_CONFIG)); }, token: ScrollService, providedIn: "root" });
+ScrollService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ScrollService_Factory() { return new ScrollService(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(BASE_MODULE_CONFIG), i0.ɵɵinject(ImageService)); }, token: ScrollService, providedIn: "root" });
 ScrollService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
@@ -2252,7 +2298,8 @@ ScrollService.decorators = [
 ];
 ScrollService.ctorParameters = () => [
     { type: Router },
-    { type: undefined, decorators: [{ type: Inject, args: [BASE_MODULE_CONFIG,] }] }
+    { type: undefined, decorators: [{ type: Inject, args: [BASE_MODULE_CONFIG,] }] },
+    { type: ImageService }
 ];
 
 /**
@@ -2325,5 +2372,5 @@ function MustMatch(controlName, matchingControlName) {
  * Generated bundle index. Do not edit.
  */
 
-export { AuthGuard, AuthService, BASE_MODULE_CONFIG, BaseModule, BasicUser, CanDeactivateGuard, ComparisonOperatorEnum, ContextMenuDirective, EllipsesPipe, FullscreenService, GraphQLEnum, GraphQLMeta, GraphQLMetaService, GraphQLPlusService, GraphQLRequestType, GraphQLService, GraphQLType, Helper, LazyLoadDirective, LoaderService, LogicalOperatorEnum, LogoutGuard, MatchHeightDirective, MustMatch, ResizableDirective, SEOService, SafeHtmlPipe, ScrollService, SortOrderEnum, Standard, StorageService, apolloOptionsFactory };
+export { AuthGuard, AuthService, BASE_MODULE_CONFIG, BaseModule, BasicUser, CanDeactivateGuard, ComparisonOperatorEnum, ContextMenuDirective, EllipsesPipe, FullscreenService, GraphQLEnum, GraphQLMeta, GraphQLMetaService, GraphQLPlusService, GraphQLRequestType, GraphQLService, GraphQLType, Helper, ImageService, LazyLoadDirective, LoaderService, LogicalOperatorEnum, LogoutGuard, MatchHeightDirective, MustMatch, ResizableDirective, SEOService, SafeHtmlPipe, ScrollService, SortOrderEnum, Standard, StorageService, apolloOptionsFactory };
 //# sourceMappingURL=lenne.tech-ng-base-src-lib-base.js.map