Create JS hash handler system for /app + Async loading of scripts (modules)

* Added a window.hashchange event listener to process everything
* Renamed http.js to base.js (as it contains more stuff)
* Improved nav button linking to support hash system
* Other refactoring
This commit is contained in:
Niko 2022-02-11 18:21:28 +01:00
parent 3b9c557d8e
commit 817837c046
7 changed files with 80 additions and 9 deletions

View File

@ -14,8 +14,19 @@
<?php tpl_styles(['themes.'.($theme ?? DEFAULT_THEME)]) ?>
<?php tpl_styles($styles ?? null) ?>
<script>var app = {};</script>
<?php tpl_scripts(['http', 'navmenu']) ?>
<script> var env = {
prod: '<?php echo PROD ?>' === '<?php echo env() ?>',
dev: '<?php echo DEV ?>' === '<?php echo env() ?>',
}; </script>
<script> var app = {
pages: {},
hashHandlers: [],
vars: {
app_dir: '<?php echo APP_DIR ?>',
js_dir: '<?php echo APP_DIR ?>/js',
},
}; </script>
<?php tpl_scripts(['base', 'navmenu', 'app']) ?>
<?php tpl_scripts($scripts ?? null) ?>
</head>
<body class="app">
@ -23,7 +34,7 @@
<div id="nav-container" class="flex center">
<div class="flex">
<div id="fedilove-icon" class="flex center icon button round">
<a class="center" href="javascript:app.page.home()">
<a class="center" href="#">
<img class="fedilove-icon" src="/assets/images/icon-proto-1.png"/>
</a>
</div>
@ -32,11 +43,11 @@
<div id="nav" class="flex center">
<?php $position = 'right' ?>
<?php tpl('buttons.menu', "class: rounder | position: $position | text: meet | icon: users |".
"id: nav-meet | onclick: app.page.meet()") ?>
"id: nav-meet | href: #meet ") ?>
<?php tpl('buttons.menu', "class: rounder | position: $position | text: crushes | icon: heart |".
"id: nav-crushes | onclick: app.page.crushes()") ?>
"id: nav-crushes | href: #crushes ") ?>
<?php tpl('buttons.menu', "class: rounder | position: $position | text: chat | icon: comments |".
"id: nav-chat | onclick: app.page.chat()") ?>
"id: nav-chat | href: #chat ") ?>
</div>
</div>
<div class="flex">

View File

@ -13,8 +13,8 @@ if ($id !== false)
<?php if ($alt_s !== false): ?>
title="<?php echo s($alt_s) ?>"
<?php endif ?>
<?php if (isset($onclick)): ?>
href="javascript:<?php echo $onclick?>"
<?php if (isset($href)): ?>
href="<?php echo $href ?>"
style="text-decoration: none; color: initial;"
<?php endif ?>
>

38
web/src/app/js/app.js Normal file
View File

@ -0,0 +1,38 @@
app.script = function(name, cback) {
cback = cback || function() {};
file = app.vars.js_dir + '/' + name.replaceAll('.', '/') + '.js';
if (env.dev)
file += '?_='+(new Date().getTime());
name = 'script__'+name.replaceAll('.', '-');
loadScript(name, file, cback);
}
window.onload = function(e) {
app.hashHandlers.push({'exact': '', 'callback': function(args) {
app.script('pages.home', function(ok) {
if (!ok) return;
app.pages.home.load(args);
});
}});
app.hashHandlers.push({'exact': 'meet', 'callback': function(args) {
app.script('pages.meet', function(ok) {
if (!ok) return;
app.pages.meet.load(args);
})
}});
}
window.onhashchange = function(e) {
var path = window.location.hash.substring(1).trim();
var args = path.split('/');
if (args.length > 0 && args[0].trim() === '')
args = [];
for (var i = 0; i < app.hashHandlers.length; i++) {
const cfg = app.hashHandlers[i];
if (cfg.exact !== undefined &&
cfg.exact === path)
return cfg.callback(args);
}
}

View File

@ -17,6 +17,18 @@ function html2text(html) {
return result;
}
function loadScript(id, file, cback) {
cback = cback || function() {};
if (document.getElementById(id) !== null)
return cback(true);
var script = document.createElement('script');
script.id = id;
script.src = file;
script.onload = function() { cback(true) };
script.onerror = function() { cback(false) };
document.body.appendChild(script);
}
function JSON_to_URLEncoded(element,key,list) {
var list = list || [];
if (typeof(element) == 'object') {

View File

@ -0,0 +1,5 @@
app.pages.home = {
load: function(args) {
console.log('HOME');
},
};

View File

@ -0,0 +1,5 @@
app.pages.meet = {
load: function(args) {
console.log('MEET');
},
};

View File

@ -2,7 +2,7 @@
<?php if_session_redirect_app() ?>
<?php tpl('pub.header', [
'title' => ' s(login)',
'scripts' => ['http']
'scripts' => ['base']
]) ?>
<form id="login" onsubmit="return loginAction(event)">