refactor

5 files changed, 123 insertions, 2 deletions

diff --git a/web/public/css/common.css b/web/public/css/common.css
index 05f429f..84aabfc 100644
--- a/web/public/css/common.css
+++ b/web/public/css/common.css
@@ -52,6 +52,8 @@ body {
 }
 
 header {
+	top: 0;
+	position: sticky;
 	height: 3.5rem;
 	background-color: var(--primary);
 	display: flex;
@@ -145,6 +147,10 @@ input:focus {
 	align-items: center;
 }
 
+.nav {
+	position: sticky;
+}
+
 .nav-right {
 	flex: 1;
 	justify-content: flex-end;
@@ -333,6 +339,30 @@ input:focus {
 	border-radius: .5rem;
 	display: flex;
 	flex-direction: column;
+	animation: fadeIn .1s, slideInModal .1s linear;
+}
+
+@keyframes slideInModal {
+	0% {
+		animation-timing-function: ease-in;
+		transform: translate(-50%, -60%);
+	}
+}
+
+@keyframes slideIn {
+	0% {
+		animation-timing-function: ease-out;
+		transform: translate(0, -50%);
+	}
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 .modal>form {
@@ -402,3 +432,30 @@ button[type="submit"]:hover {
 	background-color: var(--logo);
 }
 
+#toast-container {
+	position: fixed;
+	top: 4rem;
+	left: 100%;
+	transform: translateX(-110%);
+	margin-top: 1rem;
+	z-index: 10000;
+}
+
+.toast {
+	padding: .75rem;
+	margin: .5rem;
+	border-radius: .5rem;
+	min-width: 15rem;
+	font-family: sfpro;
+	animation: fadeIn .1s, slideIn .25s linear;
+	display: flex;
+	justify-content: space-between;
+}
+
+.toast.error {
+	background-color: var(--error);
+}
+
+.toast.success {
+	background-color: var(--success);
+}
diff --git a/web/public/js/lib.js b/web/public/js/lib.js
index d822b02..7647208 100644
--- a/web/public/js/lib.js
+++ b/web/public/js/lib.js
@@ -1,4 +1,8 @@
 
+///
+/// document ready functions
+///
+
 let ready = false;
 
 $(function() {
@@ -15,9 +19,14 @@ var r$ = function(callback) {
 	}
 }
 
+///
+/// dom observer
+/// checks for elements on the DOM now and added later
+///
+
 function observe(containerSelector, elementSelector, callback) {
-	r$(() => {
 
+	r$(() => {
 		$(containerSelector + ' ' + elementSelector).each(function (_, e) {
 			let me = $(e);
 			callback(me);
@@ -37,9 +46,64 @@ function observe(containerSelector, elementSelector, callback) {
     	};
 
     	var target = $(containerSelector)[0];
+
+		if (!target) {
+			console.warn('[observe] didnt find container: ', containerSelector);
+			return;
+		}
+
     	var config = { childList: true, subtree: true };
     	var MutationObserver = window.MutationObserver;
     	var observer = new MutationObserver(onMutationsObserved);
     	observer.observe(target, config);
 	});
 }
+
+///
+/// ajax setup
+///
+
+let ajaxHeaders = {};
+ajaxHeaders['Content-Type'] = 'application/json';
+if (jwtStr) {
+	ajaxHeaders['Authorization'] = 'Bearer ' + jwtStr
+}
+
+$.ajaxSetup({
+	headers: ajaxHeaders
+})
+
+///
+/// ajax error handle
+///
+
+var errorToast = (xhr) => {
+	let data = xhr.responseJSON;
+	let msg = data.message;
+	let detail = data.details;
+	let hint = data.hint;
+
+	let query = '?msg=' + msg;
+	if (detail) {
+		query += '&detail=' + detail;
+	}
+	if (hint) {
+		query += '&hint=' + hint;
+	}
+	let url = '/template/toast' + query;
+	$.get(url, function (data) {
+		$('#toast-container').prepend(data);
+	})
+}
+
+observe('#toast-container', '.action-close-toast', function(el) {
+	el.on('click', function() {
+		el.parent().remove();
+	});
+
+	setTimeout(function() {
+		el.parent().remove();
+	}, 5000);
+});
+
+
diff --git a/web/public/js/routes/home.js b/web/public/js/routes/home.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/web/public/js/routes/home.js
diff --git a/web/public/js/modal.js b/web/public/js/shared/modal.js
index 792cd85..792cd85 100644
--- a/web/public/js/modal.js
+++ b/web/public/js/shared/modal.js
diff --git a/web/public/js/post.js b/web/public/js/shared/post.js
index 736fa2b..afbeaf0 100644
--- a/web/public/js/post.js
+++ b/web/public/js/shared/post.js
@@ -1,4 +1,4 @@
-observe('.post', '.action-load-comments', function(me) {
+observe('#main-content', '.action-load-comments', function(me) {
 	me.on('click', function() {
 		let page = me.attr('page');
 		if (!page) {