refactor asset dir, refactor oberver in lib

web/_model/main.php

@@ -47,12 +47,23 @@ class Main_model {
 		}
 	}
 
+	/**
+	 * Gets the stamp for a asset path
+	 * @param string $path
+	 */
+	private function asset_stamp($path): int {
+		$root = $GLOBALS['webroot'];
+		$path = $root . '/public/' . $path;
+		return filemtime($path);
+	}
+
 	/**
 	 * Loads a css html link
 	 * @param string $path - the path to the css file
 	 */
 	public function link_css($path) {
-		return '<link rel="stylesheet" href="/public/' . $path . '">';
+		$stamp = $this->asset_stamp($path);
+		return '<link rel="stylesheet" href="/public/' . $path . '?stamp=' . $stamp . '">';
 	}
 
 	/**
@@ -60,7 +71,8 @@ class Main_model {
 	 * @param string $path - the path to the js file
 	 */
 	public function link_js($path) {
-		return '<script src="/public/'. $path . '"></script>';
+		$stamp = $this->asset_stamp($path);
+		return '<script src="/public/'. $path . '?stamp=' . $stamp . '"></script>';
 	}
 
 	/**

web/_views/modal/new_post.php

@@ -40,7 +40,6 @@
 			success: function(data) {
 				window.location.reload();
 			},
-			error: errorToast
 		});
 	});
 </script>

web/_views/template/post.php

@@ -28,7 +28,7 @@
 <?php endif; ?>
 	<div class="col comments">
 		<?php
-			$_GET['id'] = $post['id'];
+			$_GET = array('id' => $post['id']);
 			$cdata = $this->comments();
 
 			$loaded = $cdata['loaded'];

web/config/aesthetic.php

@@ -7,9 +7,9 @@ class Aesthetic {
 		$this->config = array(
 			'_common' => array(
 				'js' => [
-					'js/jquery-3.7.1.min.js',
+					'js/thirdparty/jquery.min.js',
 					'js/lib.js',
-					'js/shared/modal.js',
+					'js/modal.js',
 				],
 				'css' => [
 					'css/common.css'
@@ -22,8 +22,8 @@ class Aesthetic {
 			),
 			'home' => array(
 				'js' => [
-					'js/shared/post.js',
 					'js/routes/home.js',
+					'js/post.js',
 				],
 				'css' => [
 					'css/home.css',
@@ -32,8 +32,11 @@ class Aesthetic {
 			),
 		);
 	}
-
+    /**
-	function get_files($route) {
+     * @param mixed $route
+     * @return array<string,>
+     */
+    function get_files($route): array {
 		$js_files = $this->config['_common']['js'];
 		$css_files = $this->config['_common']['css'];
 

web/public/css/common.css

@@ -18,7 +18,7 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url("/public/font/MaterialIcons-Regular.ttf") format('truetype');
+  src: url("/public/font/material-icons.ttf") format('truetype');
 }
 
 @font-face {

web/public/js/lib.js

@@ -1,78 +1,59 @@
-
-///
-/// document ready functions
-///
-
-let ready = false;
-
-$(function() {
-	ready = true;
-});
-
-var r$ = function(callback) {
-	if (ready) {
-		callback();
-	} else {
-		$(function() {
-			callback();
-		});
-	}
-}
-
 ///
 /// dom observer
 /// checks for elements on the DOM now and added later
 ///
 
-function observe(containerSelector, elementSelector, callback) {
+var $$ = (selector) => {
 
-	r$(() => {
+	// add jquery functions that
-		$(containerSelector + ' ' + elementSelector).each(function (_, e) {
+	// are used and needed to be used for
-			let me = $(e);
+	// $$()
-			callback(me);
+	const functions = [
-		});
+		'on',
+		'click',
+		'submit',
+		'each'
+	];
 
-		var onMutationsObserved = function(mutations) {
+	let vtable = {};
-    	    mutations.forEach(function(mutation) {
+
-    	        if (mutation.addedNodes.length) {
+	for (const name of functions) {
-    	            var elements = $(mutation.addedNodes).find(elementSelector);
+		vtable[name] = (...params) => {
-    	            for (var i = 0, len = elements.length; i < len; i++) {
+
-						let me = elements[i];
+			const onCreate = (me) => {
-						me = $(me);
+				me[name](...params);
-						callback(me);
+			};
+
+			const onMutate = (mutations) => {
+				mutations.forEach((mutation) => {
+					if (!mutation.addedNodes.length) {
+						return;
 					}
+					let elements = $(mutation.addedNodes).find(selector);
+					for (let i = 0, len = elements.length; i < len; i++) {
+						let me = $(elements[i]);
+						onCreate(me);
 					}
 				});
 			};
 
-    	var target = $(containerSelector)[0];
+			$(function() {
+				$(selector).each(function (_ , me) {
+					onCreate($(me));
+				});
 
-		if (!target) {
+				let config = { childList: true, subtree: true };
-			console.warn('[observe] didnt find container: ', containerSelector);
+    			let MutationObserver = window.MutationObserver;
-			return;
+    			let observer = new MutationObserver(onMutate);
+				observer.observe(document.body, config);
+			});
+
+		};
 	}
 
-    	var config = { childList: true, subtree: true };
+	return vtable;
-    	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
 ///
@@ -96,14 +77,29 @@ var errorToast = (xhr) => {
 	})
 }
 
-observe('#toast-container', '.action-close-toast', function(el) {
+$$('.action-close-toast').on('click', function() {
-	el.on('click', function() {
+	$(this).parent().remove();
-		el.parent().remove();
+});
-	});
 
+$$('.action-close-toast').each(function() {
+	let me = $(this);
 	setTimeout(function() {
-		el.parent().remove();
+		me.parent().remove();
 	}, 5000);
 });
 
+///
+/// ajax setup
+///
 
+$.ajaxSetup({
+	headers: (() => {
+		let ajaxHeaders = {};
+		ajaxHeaders['Content-Type'] = 'application/json';
+		if (jwtStr) {
+			ajaxHeaders['Authorization'] = 'Bearer ' + jwtStr
+		}
+		return ajaxHeaders;
+	})(),
+	error: errorToast
+})

web/public/js/modal.js

@@ -1,7 +1,3 @@
-$(document).on('click', ".modal-close", (o) => {
-	$(o.target).closest('.modal-container').remove();
-});
-
 const initDrag = (header, modal, container) => {
 	let drag = false;
 
@@ -54,11 +50,16 @@ const initDrag = (header, modal, container) => {
 	container.onmouseup = onEnd;
 };
 
-observe('body', '.modal-header', function(el) {
+$$('.modal-header').each(function() {
-	let header = $(el);
+	let header = $(this);
 	let modal = header.closest('.modal');
 	let container = header.closest('.modal-container');
 	initDrag(
 		header[0], modal[0], container[0]
 	);
+
+	let close = header.find('.modal-close');
+	close.on('click', function() {
+		container.remove();
+	});
 });

web/public/js/post.js

@@ -0,0 +1,81 @@
+
+$$('.action-load-comments').on('click', function() {
+	let me = $(this);
+	let page = me.attr('page');
+	if (!page) {
+		page = '1';
+	}
+	let newPage = Number(page) + 1;
+	me.attr('page', newPage + '');
+
+	let postId = me.attr('postId');
+	let loaded = Number(me.attr('loaded'));
+	let pageSize = Number(me.attr('pageSize'));
+	let commmentCount = Number(me.attr('commentCount'));
+	let commentMax = Number(me.attr('commentMax'));
+
+	let url = '/_util/post/comments?page=' + page + '&id=' + postId + '&max' + commentMax;
+		$.get(url, function (data) {
+		if (data === '') {
+			me.remove();
+			return;
+		}
+
+		$(data).insertBefore(me);
+
+		loaded += pageSize;
+		if (loaded >= commmentCount) {
+			me.remove();
+		} else {
+			me.attr('loaded', loaded + '');
+		}
+	});
+});
+
+$$('#action-load-posts').on('click', function() {
+	let me = $(this);
+	let page = me.attr('page');
+	if (!page) {
+		page = '1';
+	}
+	let newPage = Number(page) + 1;
+	me.attr('page', newPage + '');
+
+	let loaded = Number(me.attr('loaded'));
+	let pageSize = Number(me.attr('pageSize'));
+	let postCount = Number(me.attr('postCount'));
+	let postMax = Number(me.attr('postMax'));
+
+	let url = '/_util/post/posts?page=' + page + '&max=' + postMax;
+	$.get(url, function (data) {
+		if (data === '') {
+			me.remove();
+			return;
+		}
+
+		$(data).insertBefore(me);
+
+		loaded += pageSize;
+		if (loaded >= postCount) {
+			me.remove();
+		} else {
+			me.attr('loaded', loaded + '');
+		}
+	});
+});
+
+$$('.action-new-comment-form').on('submit', function(e) {
+	e.preventDefault();
+	let me = $(this);
+	let input = me.find('.action-new-comment');
+	let content = input.val();
+	let post_id = input.attr('postId');
+	$.ajax({
+		url: '/api/comment',
+		method: 'POST',
+		data: JSON.stringify({ post_id, content }),
+		success: function(_data) {
+			window.location.reload();
+		},
+	});
+});

web/public/js/shared/post.js

@@ -1,84 +0,0 @@
-observe('#main-content', '.action-load-comments', function(me) {
-	me.on('click', function() {
-		let page = me.attr('page');
-		if (!page) {
-			page = '1';
-		}
-		let newPage = Number(page) + 1;
-		me.attr('page', newPage + '');
-
-		let postId = me.attr('postId');
-		let loaded = Number(me.attr('loaded'));
-		let pageSize = Number(me.attr('pageSize'));
-		let commmentCount = Number(me.attr('commentCount'));
-		let commentMax = Number(me.attr('commentMax'));
-
-		let url = '/_util/post/comments?page=' + page + '&id=' + postId + '&max' + commentMax;
-			$.get(url, function (data) {
-			if (data === '') {
-				me.remove();
-				return;
-			}
-
-			$(data).insertBefore(me);
-
-			loaded += pageSize;
-			if (loaded >= commmentCount) {
-				me.remove();
-			} else {
-				me.attr('loaded', loaded + '');
-			}
-		});
-	});
-});
-
-observe('#main-content', '#action-load-posts', function(me) {
-	me.on('click', function () {
-		let page = me.attr('page');
-		if (!page) {
-			page = '1';
-		}
-		let newPage = Number(page) + 1;
-		me.attr('page', newPage + '');
-
-		let loaded = Number(me.attr('loaded'));
-		let pageSize = Number(me.attr('pageSize'));
-		let postCount = Number(me.attr('postCount'));
-		let postMax = Number(me.attr('postMax'));
-
-		let url = '/_util/post/posts?page=' + page + '&max=' + postMax;
-		$.get(url, function (data) {
-			if (data === '') {
-				me.remove();
-				return;
-			}
-
-			$(data).insertBefore(me);
-
-			loaded += pageSize;
-			if (loaded >= postCount) {
-				me.remove();
-			} else {
-				me.attr('loaded', loaded + '');
-			}
-		});
-	});
-});
-
-observe('#main-content', '.action-new-comment-form', function(me) {
-	me.on('submit', function(e) {
-		e.preventDefault();
-		let input = me.find('.action-new-comment');
-		let content = input.val();
-		let post_id = input.attr('postId');
-		$.ajax({
-			url: '/api/comment',
-			method: 'POST',
-			data: JSON.stringify({ post_id, content }),
-			success: function(_data) {
-				window.location.reload();
-			},
-			error: errorToast
-		});
-	});
-});