refactor asset dir, refactor oberver in lib

This commit is contained in:
Freya Murphy 2024-03-30 21:28:46 -04:00
parent 1f647374a8
commit ef7b0e26fa
Signed by: freya
GPG key ID: 744AB800E383AE52
11 changed files with 176 additions and 168 deletions

View file

@ -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 * Loads a css html link
* @param string $path - the path to the css file * @param string $path - the path to the css file
*/ */
public function link_css($path) { 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 * @param string $path - the path to the js file
*/ */
public function link_js($path) { public function link_js($path) {
return '<script src="/public/'. $path . '"></script>'; $stamp = $this->asset_stamp($path);
return '<script src="/public/'. $path . '?stamp=' . $stamp . '"></script>';
} }
/** /**

View file

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

View file

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

View file

@ -7,9 +7,9 @@ class Aesthetic {
$this->config = array( $this->config = array(
'_common' => array( '_common' => array(
'js' => [ 'js' => [
'js/jquery-3.7.1.min.js', 'js/thirdparty/jquery.min.js',
'js/lib.js', 'js/lib.js',
'js/shared/modal.js', 'js/modal.js',
], ],
'css' => [ 'css' => [
'css/common.css' 'css/common.css'
@ -22,8 +22,8 @@ class Aesthetic {
), ),
'home' => array( 'home' => array(
'js' => [ 'js' => [
'js/shared/post.js',
'js/routes/home.js', 'js/routes/home.js',
'js/post.js',
], ],
'css' => [ 'css' => [
'css/home.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']; $js_files = $this->config['_common']['js'];
$css_files = $this->config['_common']['css']; $css_files = $this->config['_common']['css'];

View file

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

View file

@ -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 /// dom observer
/// checks for elements on the DOM now and added later /// 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) {
if (!target) { onCreate($(me));
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);
}); });
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 /// 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() { setTimeout(function() {
el.parent().remove(); me.parent().remove();
}, 5000); }, 5000);
}); });
///
/// ajax setup
///
$.ajaxSetup({
headers: (() => {
let ajaxHeaders = {};
ajaxHeaders['Content-Type'] = 'application/json';
if (jwtStr) {
ajaxHeaders['Authorization'] = 'Bearer ' + jwtStr
}
return ajaxHeaders;
})(),
error: errorToast
})

View file

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

81
web/public/js/post.js Normal file
View file

@ -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();
},
});
});

View file

@ -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
});
});
});