diff --git a/web/_model/main.php b/web/_model/main.php index f72a2f3..ab964fd 100644 --- a/web/_model/main.php +++ b/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 ''; + $stamp = $this->asset_stamp($path); + return ''; } /** @@ -60,7 +71,8 @@ class Main_model { * @param string $path - the path to the js file */ public function link_js($path) { - return ''; + $stamp = $this->asset_stamp($path); + return ''; } /** diff --git a/web/_views/modal/new_post.php b/web/_views/modal/new_post.php index 82243fb..71028ad 100644 --- a/web/_views/modal/new_post.php +++ b/web/_views/modal/new_post.php @@ -40,7 +40,6 @@ success: function(data) { window.location.reload(); }, - error: errorToast }); }); diff --git a/web/_views/template/post.php b/web/_views/template/post.php index 4fbf485..0541026 100644 --- a/web/_views/template/post.php +++ b/web/_views/template/post.php @@ -28,7 +28,7 @@
$post['id']); $cdata = $this->comments(); $loaded = $cdata['loaded']; diff --git a/web/config/aesthetic.php b/web/config/aesthetic.php index ed79653..a2e4194 100644 --- a/web/config/aesthetic.php +++ b/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 + */ + function get_files($route): array { $js_files = $this->config['_common']['js']; $css_files = $this->config['_common']['css']; diff --git a/web/public/css/common.css b/web/public/css/common.css index 84aabfc..8b55268 100644 --- a/web/public/css/common.css +++ b/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 { diff --git a/web/public/font/MaterialIcons-Regular.ttf b/web/public/font/material-icons.ttf similarity index 100% rename from web/public/font/MaterialIcons-Regular.ttf rename to web/public/font/material-icons.ttf diff --git a/web/public/js/lib.js b/web/public/js/lib.js index 7647208..55b8161 100644 --- a/web/public/js/lib.js +++ b/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$(() => { - $(containerSelector + ' ' + elementSelector).each(function (_, e) { - let me = $(e); - callback(me); - }); + // add jquery functions that + // are used and needed to be used for + // $$() + const functions = [ + 'on', + 'click', + 'submit', + 'each' + ]; - var onMutationsObserved = function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.addedNodes.length) { - var elements = $(mutation.addedNodes).find(elementSelector); - for (var i = 0, len = elements.length; i < len; i++) { - let me = elements[i]; - me = $(me); - callback(me); - } - } - }); - }; + let vtable = {}; - var target = $(containerSelector)[0]; + for (const name of functions) { + vtable[name] = (...params) => { - if (!target) { - console.warn('[observe] didnt find container: ', containerSelector); - return; - } + const onCreate = (me) => { + me[name](...params); + }; - var config = { childList: true, subtree: true }; - var MutationObserver = window.MutationObserver; - var observer = new MutationObserver(onMutationsObserved); - observer.observe(target, config); - }); + 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); + } + }); + }; + + $(function() { + $(selector).each(function (_ , me) { + onCreate($(me)); + }); + + let config = { childList: true, subtree: true }; + let MutationObserver = window.MutationObserver; + let observer = new MutationObserver(onMutate); + observer.observe(document.body, config); + }); + + }; + } + + return vtable; } -/// -/// 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) { - el.on('click', function() { - el.parent().remove(); - }); +$$('.action-close-toast').on('click', function() { + $(this).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 +}) diff --git a/web/public/js/shared/modal.js b/web/public/js/modal.js similarity index 87% rename from web/public/js/shared/modal.js rename to web/public/js/modal.js index 792cd85..2a704f3 100644 --- a/web/public/js/shared/modal.js +++ b/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) { - let header = $(el); +$$('.modal-header').each(function() { + 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(); + }); }); diff --git a/web/public/js/post.js b/web/public/js/post.js new file mode 100644 index 0000000..7e524bb --- /dev/null +++ b/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(); + }, + }); +}); diff --git a/web/public/js/shared/post.js b/web/public/js/shared/post.js deleted file mode 100644 index f22dd99..0000000 --- a/web/public/js/shared/post.js +++ /dev/null @@ -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 - }); - }); -}); diff --git a/web/public/js/jquery-3.7.1.min.js b/web/public/js/thirdparty/jquery.min.js similarity index 100% rename from web/public/js/jquery-3.7.1.min.js rename to web/public/js/thirdparty/jquery.min.js