flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-11-01 19:40:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

added loading spinner...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2022-09-10 04:11:00 +03:00
parent f42fb181f1
commit 8d03762b7e
1 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
pwiki2.html
View File

@ -60,6 +60,9 @@ a:hover {
margin-left: -50px;
white-space: nowrap;
background: transparent;
pointer-events: none;
animation: fadein 2s 1;
}
.spinner span {
@ -70,6 +73,18 @@ a:hover {
animation: loading 2s infinite ;
animation-delay: calc(0.2s * var(--i));
}
body:not(.loading) .page.spinner {
display: none;
}
body.loading .page.spinner {
opacity: 0.9;
animation: fadein 1s 1;
}
body.loading .page.spinner span {
font-size: 1.5em;
animation: loading 3s infinite ;
animation-delay: calc(0.2s * var(--i));
}
@keyframes fadein {
from {
opacity: 0;
@ -169,7 +184,10 @@ require(['./browser'], function(browser){
path = /^\.\.?([\\\/].*)?$/.test(path) ?
path
: '/'+path
pwiki.location = [path, hash] })
startSpinner()
// NOTE: setTimeout(..) to allow the spinner to start...
setTimeout(function(){
pwiki.location = [path, hash] }, 0) })
pwiki
.onBeforeNavigate(function(){
saveNow() })
@ -192,6 +210,8 @@ require(['./browser'], function(browser){
&& console.log(`## ${pwiki.path} (${Date.now() - t}ms)`) }) })
.onLoad(function(evt){
var that = this
// stop spinner...
stopSpinner()
// handle title...
document.querySelector('title').innerHTML = this.path
// scroll to anchor element...
@ -208,11 +228,8 @@ require(['./browser'], function(browser){
// wait for stuff to finish...
browser.setup.then(function(){
// show current page...
pwiki.location = decodeURI(location.hash).slice(1)
}) })
pwiki.location = decodeURI(location.hash).slice(1) }) })
// XXX make this a 2 stage save -- first cache and then save to store...
@ -234,6 +251,12 @@ var saveNow =
pwiki.get(path).raw = text }) }
setInterval(saveNow, 5000)
// loading spinner...
window.startSpinner = function(){
document.body.classList.add('loading') }
window.stopSpinner = function(){
document.body.classList.remove('loading') }
// XXX
var exportData = async function(){
@ -267,6 +290,19 @@ var exportData = async function(){
</div>
</div>
<div class="page spinner">
<span style="--i:0">l</span>
<span style="--i:1">o</span>
<span style="--i:2">a</span>
<span style="--i:3">d</span>
<span style="--i:4">i</span>
<span style="--i:5">n</span>
<span style="--i:6">g</span>
<span style="--i:7">.</span>
<span style="--i:8">.</span>
<span style="--i:9">.</span>
</div>
</body>
</html>