Initial commit

Frontend/pages/layouts/main/ts/CE.ts

@@ -0,0 +1,20 @@
+function ce(
+	type: string,
+	classList?: string | string[],
+	attributes?: { [key: string]: string },
+	innerText?: string,
+	innerHTML?: string,
+	styling?: { [key: string]: string }
+) {
+	var element = document.createElement(type);
+	if (classList)
+		if (typeof classList == 'string') element.classList.add(classList);
+		else element.classList.add(...classList);
+	if (attributes) for (var key in attributes) element.setAttribute(key, attributes[key]);
+	if (innerText) element.innerText = innerText;
+	if (innerHTML) element.innerHTML = innerHTML;
+	if (styling) for (var key in styling) element.style[key] = styling[key];
+	return element;
+}
+
+// declare var ce:(type:string, classList?:string|string[], attributes?:{[key:string]:string}, innerText?:string, innerHTML?:string) => HTMLDivElement;

Frontend/pages/layouts/main/ts/Notification.ts

@@ -0,0 +1,54 @@
+var notificationOpen = false;
+var notificationTimeout: NodeJS.Timeout;
+
+var UndeckedNotification: (message: string, type?: 'info' | 'error', time?: number) => void;
+
+window.addEventListener('DOMContentLoaded', () => {
+	UndeckedNotification = (message: string, type: 'info' | 'error' = 'info', time: number = 2000) => {
+		_UndeckedNotification.open(message, type, time);
+	};
+
+	var _UndeckedNotification = {
+		isOpen: false,
+		timeout: null as NodeJS.Timeout,
+		transitionDuration: 200,
+
+		elements: {
+			container: document.querySelector('.feedback').querySelector('.notificationcontainer') as HTMLDivElement,
+			box: document.querySelector('.feedback').querySelector('.notification') as HTMLDivElement
+		},
+
+		open: (message: string, type: 'info' | 'error' = 'info', time: number) => {
+			var open = () => {
+				_UndeckedNotification.elements.box.classList.remove('info', 'error');
+				_UndeckedNotification.elements.box.classList.add(type);
+				_UndeckedNotification.elements.box.innerText = message;
+				_UndeckedNotification.elements.container.style.transitionTimingFunction = 'ease-out';
+				_UndeckedNotification.elements.container.style.transitionDuration = `${_UndeckedNotification.transitionDuration}ms`;
+				_UndeckedNotification.elements.container.style.bottom = '50px';
+
+				_UndeckedNotification.isOpen = true;
+
+				_UndeckedNotification.timeout = setTimeout(_UndeckedNotification.close, time);
+
+				_UndeckedNotification.elements.box.onclick = () => _UndeckedNotification.close();
+			};
+
+			if (_UndeckedNotification.isOpen == true) {
+				_UndeckedNotification.close(open);
+			} else open();
+		},
+
+		close: (callback?: Function) => {
+			clearTimeout(_UndeckedNotification.timeout);
+			_UndeckedNotification.elements.container.style.transitionTimingFunction = 'ease-in';
+			_UndeckedNotification.elements.container.style.bottom = '-50px';
+			setTimeout(() => {
+				if (callback) callback();
+				_UndeckedNotification.isOpen = false;
+			}, _UndeckedNotification.transitionDuration + 100);
+		}
+	};
+});
+
+// declare var UndeckedNotification:  (message:string, type?:'info'|"error", time?:number) => void;