@lenne.tech/ng-base 0.0.11 → 0.2.2

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

@@ -4,14 +4,17 @@ 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 { BehaviorSubject, Observable, of, throwError } from 'rxjs';
-import { ApolloLink } from '@apollo/client/core';
+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 * 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');
 
@@ -208,7 +211,8 @@ AuthService.ctorParameters = () => [
  * Factory for apollo-angular options
  */
 function apolloOptionsFactory(baseModuleConfig, httpLink, authService) {
-    const link = httpLink.create({
+    const links = [];
+    const http = httpLink.create({
         uri: baseModuleConfig.apiUrl,
     });
     const authMiddleware = new ApolloLink((operation, forward) => {
@@ -222,8 +226,44 @@ function apolloOptionsFactory(baseModuleConfig, httpLink, authService) {
         }
         return forward(operation);
     });
+    if (baseModuleConfig.wsUrl) {
+        let wsClient;
+        if (localStorage) {
+            const token = authService.token || null;
+            wsClient = new WebSocketLink({
+                uri: baseModuleConfig.wsUrl,
+                options: {
+                    reconnect: true,
+                    connectionParams: {
+                        authToken: token,
+                    },
+                },
+            });
+        }
+        else {
+            wsClient = new WebSocketLink({
+                uri: baseModuleConfig.wsUrl,
+                options: {
+                    reconnect: true,
+                },
+            });
+        }
+        // using the ability to split links, you can send data to each link
+        // depending on what kind of operation is being sent
+        links.push(split(
+        // split based on operation type
+        ({ query }) => {
+            // @ts-ignore
+            const { kind, operation } = getMainDefinition(query);
+            return kind === 'OperationDefinition' && operation === 'subscription';
+        }, wsClient, concat(authMiddleware, http)));
+    }
+    else {
+        links.push(http);
+        links.push(authMiddleware);
+    }
     return {
-        link: ApolloLink.from([authMiddleware, link]),
+        link: ApolloLink.from(links),
         cache: new InMemoryCache(),
         defaultOptions: {
             query: {
@@ -1536,13 +1576,29 @@ class GraphQLService {
                 const documentNode = fields
                     ? gql(config.type + '{\n' + graphql + args + fields + '\n}')
                     : gql(config.type + '{\n' + graphql + args + '\n}');
+                // Log
+                if (config.log) {
+                    console.log({ documentNode });
+                }
                 const request = {};
                 request[config.type] = documentNode;
                 // Log
                 if (config.log) {
                     console.log({ request });
                 }
-                const func = config.type === GraphQLRequestType.MUTATION ? 'mutate' : config.type;
+                let func;
+                if (config.type === GraphQLRequestType.MUTATION) {
+                    func = 'mutate';
+                    request[config.type] = documentNode;
+                }
+                else if (config.type === GraphQLRequestType.SUBSCRIPTION) {
+                    func = 'subscribe';
+                    request.query = documentNode;
+                }
+                else {
+                    func = config.type;
+                    request[config.type] = documentNode;
+                }
                 this.apollo[func](request).subscribe((result) => {
                     var _a;
                     const data = ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[graphql]) !== undefined ? result.data[graphql] : result;
@@ -1560,8 +1616,10 @@ class GraphQLService {
                     else {
                         subscriber.next(config.model.map(data));
                     }
-                    // Done
-                    subscriber.complete();
+                    if (config.type !== GraphQLRequestType.SUBSCRIPTION) {
+                        // Done
+                        subscriber.complete();
+                    }
                 }, (error) => {
                     subscriber.error(error);
                     subscriber.complete();
@@ -1572,14 +1630,23 @@ class GraphQLService {
     /**
      * Get fields / args from IGraphQLTypeCollection
      */
-    graphQLTypeCollectionToStringArray(collection, current = '', result = []) {
+    graphQLTypeCollectionToStringArray(collection, current = '', result = [], cacheNode = []) {
         if (collection) {
             if (collection instanceof GraphQLType) {
                 result.push(current);
             }
             else {
+                if (current === null || current === void 0 ? void 0 : current.includes('.')) {
+                    cacheNode.push(current.split('.')[1]);
+                }
+                else if (current) {
+                    cacheNode.push(current);
+                }
                 for (const key of Object.keys(collection)) {
-                    this.graphQLTypeCollectionToStringArray(collection[key], current ? current + '.' + key : key, result);
+                    if (current === key || cacheNode.includes(key)) {
+                        continue;
+                    }
+                    this.graphQLTypeCollectionToStringArray(collection[key], current ? current + '.' + key : key, result, cacheNode);
                 }
             }
         }
@@ -1631,6 +1698,10 @@ class GraphQLService {
         }
         // Process object
         else if (typeof args === 'object') {
+            // Check object is empty
+            if (args && Object.keys(args).length === 0 && Object.getPrototypeOf(args) === Object.prototype) {
+                return { argsString: '{}', schemaArgs, usedArgs };
+            }
             // Process all object entries
             for (const [key, value] of Object.entries(args)) {
                 // Init data for current entry
@@ -1869,7 +1940,9 @@ class GraphQLPlusService extends GraphQLService {
                 }
                 subscriber.next(response);
                 this.handleLoader('stop', options);
-                subscriber.complete();
+                if (options.type !== GraphQLRequestType.SUBSCRIPTION) {
+                    subscriber.complete();
+                }
             }, (error) => {
                 if (!options.ignoreErrors) {
                     this.handleError(error, options.excludedErrors);
@@ -1932,31 +2005,73 @@ class ScrollService {
         this.router = router;
         this.moduleConfig = moduleConfig;
         /**
-         * Scroll offset
+         * Is a scroll listener set
+         *
+         * @protected
          */
-        this.scrollOffset = 100;
+        this.scrollListener = false;
         /**
-         * Detection offset
-         * Should be >= scrollOffset
+         * Current scroll timer;
+         *
+         * @protected
          */
-        this.detectionOffset = 200;
-        const config = Object.assign({ scrollDetectionOffset: 200, scrollOffset: 100 }, moduleConfig);
+        this.scrollTimer = -1;
+        const config = Object.assign({ scrollDetectionOffset: 200, scrollOffset: 100, scrollSamplingRate: 100 }, moduleConfig);
         this.detectionOffset = config.scrollDetectionOffset;
         this.scrollOffset = config.scrollOffset;
+        this.scrollSamplingRate = config.scrollSamplingRate;
     }
     /**
      * Scroll to structureElement with specific ID
      */
     scrollTo(id, options = {}) {
-        options = Object.assign({ stopPropagation: true }, options);
-        if (this.router.url !== '/' && !this.router.url.startsWith('/#')) {
-            this.router.navigate(['/'], { fragment: id });
-            return options.stopPropagation ? false : true;
-        }
-        const el = document.getElementById(id);
-        const cords = el.getBoundingClientRect();
-        window.scrollBy({ top: cords.top - this.scrollOffset, behavior: 'smooth' });
-        return options.stopPropagation ? false : true;
+        return __awaiter(this, void 0, void 0, function* () {
+            // Prepare config
+            const config = Object.assign({ checkUrl: true, loadImagesBefore: true, resetStyles: false, setOverflow: true, stopPropagation: true }, options);
+            // Check current URL
+            if (config.checkUrl && this.router.url !== '/' && !this.router.url.startsWith('/#')) {
+                yield this.router.navigate(['/'], { fragment: id });
+                return !config.stopPropagation;
+            }
+            // Check if target element exits
+            const el = document.getElementById(id);
+            if (!el) {
+                console.error('Missing scroll element with ID:', id);
+                return !config.stopPropagation;
+            }
+            // Check if body overflow is visible
+            // This is necessary for scroll handling
+            const body = document.querySelector('body');
+            let undoOverflowChanges = false;
+            const scrollBodyStyles = JSON.parse(JSON.stringify(window.getComputedStyle(body)));
+            if (config.setOverflow && (scrollBodyStyles.overflowX !== 'visible' || scrollBodyStyles.overflowY !== 'visible')) {
+                // Set body overflow to visible
+                console.warn('Style of body element for overflowX and overflowY will be set to "visible" for scrolling!');
+                body.style.overflowX = 'visible';
+                body.style.overflowY = 'visible';
+                undoOverflowChanges = true;
+            }
+            // Load images before scrolling (once)
+            if (config.loadImagesBefore) {
+                yield this.preLoadImages();
+            }
+            // Get get bounding rect of target element
+            const cords = el.getBoundingClientRect();
+            // Scroll to element
+            window.scrollBy({ top: cords.top - this.scrollOffset, behavior: 'smooth' });
+            yield this.scrollDone({
+                doneFunction: () => {
+                    // Undo changes
+                    if (undoOverflowChanges && config.resetStyles) {
+                        body.style.overflowX = scrollBodyStyles.overflowX;
+                        body.style.overflowY = scrollBodyStyles.overflowY;
+                        console.warn('Original style of body element for overflowX and overflowY is set.');
+                    }
+                },
+            });
+            // Return stop propagation configuration
+            return !config.stopPropagation;
+        });
     }
     /**
      * Get last active structureElement
@@ -1986,6 +2101,148 @@ class ScrollService {
         const lastActiveElement = this.getLastActiveElement(list);
         return id === lastActiveElement || (lastActiveElement === null && isFirst);
     }
+    /**
+     * Scroll done promise
+     */
+    scrollDone(options = {}) {
+        // Init configuration
+        const config = Object.assign({ doneFunction: undefined, timeout: undefined }, options);
+        // Return promise for scroll done
+        return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+            // Init variables
+            let rejected = false;
+            let timeoutId;
+            // Set timeout handling if necessary
+            if (config.timeout) {
+                timeoutId = window.setTimeout(() => {
+                    rejected = true;
+                    reject(new Error('Timeout for scrollDone after:' + config.timeout));
+                }, config.timeout);
+            }
+            // Wait for scroll done
+            yield this.scrollDoneDetection();
+            // Resolve promise if not already rejected
+            if (!rejected) {
+                // Stop timeout if set
+                if (timeoutId) {
+                    window.clearTimeout(timeoutId);
+                }
+                // Get result (if doneFunction is set)
+                let result;
+                if (config.doneFunction) {
+                    result = yield config.doneFunction();
+                }
+                // Scroll done
+                resolve(result);
+            }
+        }));
+    }
+    /**
+     * Scroll done detecton
+     *
+     * @protected
+     */
+    scrollDoneDetection() {
+        // Return current scroll promise (Singelton)
+        if (this.scrollPromise) {
+            return this.scrollPromise;
+        }
+        // Create current scroll promise
+        this.scrollPromise = new Promise((resolve) => {
+            this.scrollPromiseResolve = resolve;
+            if (this.scrollTimer !== -1) {
+                window.clearTimeout(this.scrollTimer);
+            }
+            this.scrollTimer = window.setTimeout(() => {
+                window.removeEventListener('scroll', this.scrollDoneDetection.bind(this));
+                this.scrollPromise = undefined;
+                resolve();
+            }, this.scrollSamplingRate);
+        });
+        // Lisitening to scroll event;
+        window.addEventListener('scroll', this.scrollDoneDetection.bind(this));
+        // 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.decorators = [