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:
parent
3b9c557d8e
commit
817837c046
|
@ -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">
|
||||
|
|
|
@ -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 ?>
|
||||
>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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') {
|
|
@ -0,0 +1,5 @@
|
|||
app.pages.home = {
|
||||
load: function(args) {
|
||||
console.log('HOME');
|
||||
},
|
||||
};
|
|
@ -0,0 +1,5 @@
|
|||
app.pages.meet = {
|
||||
load: function(args) {
|
||||
console.log('MEET');
|
||||
},
|
||||
};
|
|
@ -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)">
|
||||
|
|
Loading…
Reference in New Issue