Initial commit

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;