Removed dynload
This commit is contained in:
parent
5413c3b433
commit
b943030412
4 changed files with 8 additions and 117 deletions
|
|
@ -30,14 +30,14 @@ $showNowPlaying = !empty($is_index) || !empty($do_fullscreen_header);
|
||||||
<img src="<?=($backgrounds[array_rand($backgrounds)]);?>" alt=""/>
|
<img src="<?=($backgrounds[array_rand($backgrounds)]);?>" alt=""/>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-foreground"<?php if(isset($offset) && $offset > 0) echo " style=\"padding-bottom: {$offset}px\""; ?>>
|
<div class="header-foreground"<?php if(isset($offset) && $offset > 0) echo " style=\"padding-bottom: {$offset}px\""; ?>>
|
||||||
<a class="header-logo" href="/" data-fm-dynload="">
|
<a class="header-logo" href="/">
|
||||||
<div class="header-flash">flash</div>
|
<div class="header-flash">flash</div>
|
||||||
<div class="header-wave">wave</div>
|
<div class="header-wave">wave</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<div class="header-now-playing header-now-playing-hidden">
|
<div class="header-now-playing header-now-playing-hidden">
|
||||||
<div class="header-now-playing-icon" title="Now listening to...">
|
<div class="header-now-playing-icon" title="Now listening to...">
|
||||||
<a href="/now-listening" data-fm-dynload=""><div class="fmi fmi-music"></div></a>
|
<a href="/now-listening"><div class="fmi fmi-music"></div></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-now-playing-cover">
|
<div class="header-now-playing-cover">
|
||||||
<img src="//now.flash.moe/resources/no-cover.png" alt=""/>
|
<img src="//now.flash.moe/resources/no-cover.png" alt=""/>
|
||||||
|
|
@ -49,7 +49,7 @@ $showNowPlaying = !empty($is_index) || !empty($do_fullscreen_header);
|
||||||
</div>
|
</div>
|
||||||
<div class="header-menu">
|
<div class="header-menu">
|
||||||
<?php foreach($menu as $link): ?>
|
<?php foreach($menu as $link): ?>
|
||||||
<a href="<?=$link['link'];?>"<?php if($link['link'][0] === '/' && substr($link['link'], 0, 2) !== '//') { echo ' data-fm-dynload=""'; } ?>><?=$link['title'];?></a>
|
<a href="<?=$link['link'];?>"<?php if($link['link'][0] === '/' && substr($link['link'], 0, 2) !== '//') { echo ''; } ?>><?=$link['title'];?></a>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -195,7 +195,7 @@ $router->get('/', function() use ($db) {
|
||||||
$body .= "<a href=\"{$link['link']}\"";
|
$body .= "<a href=\"{$link['link']}\"";
|
||||||
|
|
||||||
if($link['link'][0] === '/' && substr($link['link'], 0, 2) !== '//')
|
if($link['link'][0] === '/' && substr($link['link'], 0, 2) !== '//')
|
||||||
$body .= ' data-fm-dynload=""';
|
$body .= '';
|
||||||
|
|
||||||
$body .= ">{$link['title']}</a>";
|
$body .= ">{$link['title']}</a>";
|
||||||
}
|
}
|
||||||
|
|
@ -208,7 +208,7 @@ HTML;
|
||||||
$body .= <<<HTML
|
$body .= <<<HTML
|
||||||
<div class="index-feature">
|
<div class="index-feature">
|
||||||
<div class="index-feature-header">
|
<div class="index-feature-header">
|
||||||
<a href="/projects" class="index-feature-header-link" data-fm-dynload=""></a>
|
<a href="/projects" class="index-feature-header-link"></a>
|
||||||
<div class="index-feature-header-title">Projects</div>
|
<div class="index-feature-header-title">Projects</div>
|
||||||
<div class="index-feature-header-more">More</div>
|
<div class="index-feature-header-more">More</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -228,7 +228,7 @@ HTML;
|
||||||
|
|
||||||
$body .= <<<HTML
|
$body .= <<<HTML
|
||||||
<div class="index-project" style="background-color: #{$colour};">
|
<div class="index-project" style="background-color: #{$colour};">
|
||||||
<a href="/projects#{$project->getCleanName()}" class="index-project-anchor" data-fm-dynload=""></a>
|
<a href="/projects#{$project->getCleanName()}" class="index-project-anchor"></a>
|
||||||
<div class="index-project-content">
|
<div class="index-project-content">
|
||||||
<div class="index-project-name">{$project->getName()}</div>
|
<div class="index-project-name">{$project->getName()}</div>
|
||||||
HTML;
|
HTML;
|
||||||
|
|
@ -254,7 +254,7 @@ HTML;
|
||||||
</div>
|
</div>
|
||||||
<div class="index-feature">
|
<div class="index-feature">
|
||||||
<div class="index-feature-header">
|
<div class="index-feature-header">
|
||||||
<a href="/contact" class="index-feature-header-link" data-fm-dynload=""></a>
|
<a href="/contact" class="index-feature-header-link"></a>
|
||||||
<div class="index-feature-header-title">Contact</div>
|
<div class="index-feature-header-title">Contact</div>
|
||||||
<div class="index-feature-header-more">More</div>
|
<div class="index-feature-header-more">More</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -61,97 +61,6 @@ window.fm = (function() {
|
||||||
hXhr.send();
|
hXhr.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dynloadCurrent = function() {
|
|
||||||
return {
|
|
||||||
components: {
|
|
||||||
header: {
|
|
||||||
title: document.title,
|
|
||||||
is_index: document.body.classList.contains('index'),
|
|
||||||
do_fullscreen_header: document.body.classList.contains('fullscreen-header'),
|
|
||||||
is_now_playing: document.body.classList.contains('now-playing'),
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
onload: this.onload || [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
raw_html: fm.container.innerHTML,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
this.dynloadApply = function(state) {
|
|
||||||
if((state.components || {}).header) {
|
|
||||||
document.title = state.components.header.title || '';
|
|
||||||
document.body.classList[state.components.header.is_index ? 'add' : 'remove']('index');
|
|
||||||
document.body.classList[state.components.header.do_fullscreen_header ? 'add' : 'remove']('fullscreen-header');
|
|
||||||
document.body.classList[state.components.header.is_now_playing ? 'add' : 'remove']('now-playing');
|
|
||||||
}
|
|
||||||
|
|
||||||
if(typeof state.raw_html !== 'undefined')
|
|
||||||
this.container.innerHTML = state.raw_html;
|
|
||||||
|
|
||||||
if((state.components || {}).footer) {
|
|
||||||
this.runFuncs(state.components.footer.onload || []);
|
|
||||||
}
|
|
||||||
|
|
||||||
fm.dynloadInit();
|
|
||||||
fm.setRandomHeaderBackgroundIfNotPlaying();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.dynloadInit = function(initial) {
|
|
||||||
if(initial) {
|
|
||||||
history.replaceState(this.dynloadCurrent(), document.title, location.toString());
|
|
||||||
window.addEventListener('popstate', function(ev) {
|
|
||||||
fm.dynloadApply(ev.state || {});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var dynload = document.querySelectorAll('[data-fm-dynload]');
|
|
||||||
for(var i = 0; i < dynload.length; ++i)
|
|
||||||
(function(dc){
|
|
||||||
var url = new URL(dc.href),
|
|
||||||
hash = url.hash.substring(1);
|
|
||||||
url.hash = '';
|
|
||||||
dc.removeAttribute('data-fm-dynload');
|
|
||||||
dc.addEventListener('click', function(ev) {
|
|
||||||
ev.stopPropagation();
|
|
||||||
ev.preventDefault();
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest;
|
|
||||||
xhr.onload = function() {
|
|
||||||
try {
|
|
||||||
var obj = JSON.parse(xhr.responseText);
|
|
||||||
} catch(ex) {}
|
|
||||||
if(!obj) {
|
|
||||||
location.assign(dc.href);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var title = ((obj.components || {}).header || {}).title || '';
|
|
||||||
history.pushState(obj, title, dc.href);
|
|
||||||
fm.dynloadApply(obj);
|
|
||||||
if(hash) {
|
|
||||||
var targetEl = document.getElementById(hash);
|
|
||||||
if(targetEl) {
|
|
||||||
setTimeout(function() {
|
|
||||||
window.scrollTo({
|
|
||||||
top: targetEl.getBoundingClientRect().top,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.onerror = function(ev) {
|
|
||||||
location.assign(dc.href);
|
|
||||||
};
|
|
||||||
xhr.open('GET', url);
|
|
||||||
xhr.setRequestHeader('Accept', 'application/x-fdynload+json');
|
|
||||||
xhr.send();
|
|
||||||
}, true);
|
|
||||||
})(dynload[i]);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.dynloadInit(true);
|
|
||||||
|
|
||||||
this.selectTextInElement = function(elem) {
|
this.selectTextInElement = function(elem) {
|
||||||
// MSIE
|
// MSIE
|
||||||
if(document.body.createTextRange) {
|
if(document.body.createTextRange) {
|
||||||
|
|
|
||||||
|
|
@ -68,17 +68,7 @@ define('FM_ERRS' , [
|
||||||
],
|
],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
define('FM_DYNLOAD', filter_input(INPUT_SERVER, 'HTTP_ACCEPT') === 'application/x-fdynload+json');
|
|
||||||
|
|
||||||
function fm_component(string $_component_name, array $vars = []): string {
|
function fm_component(string $_component_name, array $vars = []): string {
|
||||||
if(FM_DYNLOAD) {
|
|
||||||
global $fmComponentVars;
|
|
||||||
if(!isset($fmComponentVars))
|
|
||||||
$fmComponentVars = [];
|
|
||||||
$fmComponentVars[$_component_name] = $vars;
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
extract($vars);
|
extract($vars);
|
||||||
|
|
||||||
ob_start();
|
ob_start();
|
||||||
|
|
@ -207,16 +197,8 @@ if($result !== null && !is_bool($result)) {
|
||||||
if(strtolower(substr($result, 0, 14)) === '<!doctype html') {
|
if(strtolower(substr($result, 0, 14)) === '<!doctype html') {
|
||||||
header('Content-Type: text/html; charset=utf-8');
|
header('Content-Type: text/html; charset=utf-8');
|
||||||
echo $result;
|
echo $result;
|
||||||
} else {
|
|
||||||
if(FM_DYNLOAD) {
|
|
||||||
header('Content-Type: application/x-fdynload+json');
|
|
||||||
echo json_encode([
|
|
||||||
'components' => $fmComponentVars ?? [],
|
|
||||||
'raw_html' => $result,
|
|
||||||
]);
|
|
||||||
} else {
|
} else {
|
||||||
echo $result;
|
echo $result;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue