@luftborn/custom-elements 1.1.43 → 1.4.0

package/src/framework/Utilities/DomUtil.ts

@@ -0,0 +1,117 @@
+import { ViewportUtil } from './ViewportUtil';
+
+export default class DomUtil {
+    private viewPortUtil: ViewportUtil;
+    public element: Element;
+    constructor(element: Element) {
+        this.element = element;
+        this.viewPortUtil = new ViewportUtil(this.element as HTMLElement);
+    }
+
+    public getDataAttr(attr: string, defaultvalue?: string): any {
+        if (!this.element) {
+            return null;
+        }
+        const value = this.element.getAttribute(`data-${attr}`);
+
+        return value !== undefined ? value : defaultvalue;
+    }
+
+    public setDataAttr(attr: string, value: string): any {
+        if (!this.element) {
+            return null;
+        }
+        return this.element.setAttribute(`data-${attr}`, value);
+    }
+
+    public getAttr(attr: string, defaultvalue?: string): any {
+        if (!this.element) {
+            return null;
+        }
+        const value = this.element.getAttribute(attr);
+        return value !== undefined ? value : defaultvalue;
+    }
+
+    public setAttr(attr: string, value: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.setAttribute(attr, value);
+    }
+
+    public removeAttr(attr: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.removeAttribute(attr);
+    }
+
+    public removeDataAttr(attr: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.removeAttribute(`data-${attr}`);
+    }
+
+    public hasAttr(attr: string): boolean {
+        if (!this.element) {
+            return null;
+        }
+        return this.element.hasAttribute(attr);
+    }
+
+    public shake(): void {
+        this.appendClass('shake');
+        setTimeout(() => {
+            this.removeClass('shake');
+            (this.element as HTMLInputElement).readOnly = false;
+        }, 600);
+    }
+
+    public error(): void {
+        this.appendClass('error');
+        setTimeout(() => {
+            this.removeClass('error');
+            (this.element as HTMLInputElement).readOnly = false;
+        }, 5000);
+    }
+
+    public focus(): void {
+        if (!this.viewPortUtil.IsVisible()) {
+            this.element.scrollIntoView();
+        }
+    }
+
+    public removeClass(classname): void {
+        this.element.classList.remove(classname);
+    }
+
+    public appendClass(classname): void {
+        this.element.classList.add(classname);
+    }
+
+    public deleteElement(): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.remove();
+    }
+
+    public setChildElementByAttrName(name: string, value: string): void {
+        const firstLetter = name.replace(/^\w/, c => c.toUpperCase());
+        const SubElement = this.element.querySelector(
+            `[name="${firstLetter}"]`,
+        ) as HTMLInputElement;
+        if (SubElement) {
+            SubElement.value = value;
+        }
+    }
+
+    public hasClass(className: string): boolean {
+        return this.element.classList.contains(className);
+    }
+
+    public getStyle(ruleName: string) {
+        return getComputedStyle(this.element)[ruleName];
+    }
+}

package/src/framework/Utilities/MakeRequest.ts

@@ -0,0 +1,47 @@
+export default class MakeRequest {
+    method: string;
+    url: string;
+    headers: any;
+
+    constructor(url: string, method: string = 'get', headers: any = {}) {
+        this.method = method;
+        this.url = url;
+        this.headers = headers;
+    }
+
+    private setHeaders(httpRequest: XMLHttpRequest) {
+        for (const header in this.headers) {
+            httpRequest.setRequestHeader(header, this.headers[header]);
+        }
+    }
+
+    send(data: any = null) {
+        return new Promise((resolve, reject) => {
+            const xmlHttpRequest = new XMLHttpRequest();
+            xmlHttpRequest.open(this.method, this.url);
+            this.setHeaders(xmlHttpRequest);
+            xmlHttpRequest.onload = () => {
+                if (
+                    xmlHttpRequest.status >= 200 &&
+                    xmlHttpRequest.status < 300
+                ) {
+                    resolve(xmlHttpRequest.response);
+                } else {
+                    reject({
+                        status: xmlHttpRequest.status,
+                        statusText: xmlHttpRequest.statusText,
+                        body: xmlHttpRequest.response,
+                    });
+                }
+            };
+            xmlHttpRequest.onerror = () => {
+                reject({
+                    status: xmlHttpRequest.status,
+                    statusText: xmlHttpRequest.statusText,
+                    body: xmlHttpRequest.response,
+                });
+            };
+            xmlHttpRequest.send(data);
+        });
+    }
+}

package/src/framework/Utilities/StringUtil.ts

@@ -0,0 +1,9 @@
+export class StringUtil {
+
+    constructor() {
+    }
+
+    public static StringFormat(str: string, ...args: string[]) {
+        return str.replace(/{(\d+)}/g, (match, index) => args[index] || '');
+    }
+}

package/src/framework/Utilities/ViewportUtil.ts

@@ -0,0 +1,46 @@
+export class ViewportUtil {
+    private element?: HTMLElement;
+    constructor(element: HTMLElement = null) {
+        this.element = element;
+    }
+
+    public IsVisible(): boolean {
+        const bounds = this.element.getBoundingClientRect();
+        return (
+            ((bounds.top > 0 && bounds.top < innerHeight) ||
+                (bounds.bottom > 0 && bounds.bottom < innerHeight)) &&
+            ((bounds.left > 0 && bounds.left < innerWidth) ||
+                (bounds.right > 0 && bounds.right < innerWidth))
+        );
+    }
+
+    public IsPartiallyVisible() {
+        const bounds = this.element.getBoundingClientRect();
+        return (
+            bounds.top >= 0 ||
+            bounds.left >= 0 ||
+            bounds.bottom <= innerHeight ||
+            bounds.right <= innerWidth
+        );
+    }
+
+    public IsOffsetVisible(offset: number = 300) {
+        const bounds = this.element.getBoundingClientRect();
+        // tslint:disable-next-line: max-line-length
+        return (
+            bounds.top + offset >= 0 ||
+            bounds.left + offset >= 0 ||
+            bounds.bottom - offset <= innerHeight ||
+            bounds.right - offset <= innerWidth
+        );
+    }
+
+    public WindowTop(offset: number = 0) {
+        const YOffset =
+            window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0;
+        return offset <= YOffset;
+    }
+}