freya/xssbook2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor asset dir, refactor oberver in lib

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/_model/main.php
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
* @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>';
}
/**

1
web/_views/modal/new_post.php
View file

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

2
web/_views/template/post.php
View file

@ -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'];

13
web/config/aesthetic.php
View file

@ -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'];

2
web/public/css/common.css
View file

@ -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 {

0
web/public/font/MaterialIcons-Regular.ttf → web/public/font/material-icons.ttf
View file

122
web/public/js/lib.js
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
/// 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 = {};
for (const name of functions) {
vtable[name] = (...params) => {
const onCreate = (me) => {
me[name](...params);
};
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) {
console.warn('[observe] didnt find container: ', containerSelector);
return;
let config = { childList: true, subtree: true };
let MutationObserver = window.MutationObserver;
let observer = new MutationObserver(onMutate);
observer.observe(document.body, config);
});
};
}
var config = { childList: true, subtree: true };
var MutationObserver = window.MutationObserver;
var observer = new MutationObserver(onMutationsObserved);
observer.observe(target, 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
})

13
web/public/js/shared/modal.js → web/public/js/modal.js
View file

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

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

84
web/public/js/shared/post.js
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
});
});
});

0
web/public/js/jquery-3.7.1.min.js → web/public/js/thirdparty/jquery.min.js vendored
View file