flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2026-01-04 09:01:07 +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; margin-left: -50px;
white-space: nowrap; white-space: nowrap;
background: transparent;
pointer-events: none;
animation: fadein 2s 1; animation: fadein 2s 1;
} }
.spinner span { .spinner span {
@ -70,6 +73,18 @@ a:hover {
animation: loading 2s infinite ; animation: loading 2s infinite ;
animation-delay: calc(0.2s * var(--i)); 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 { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;
@ -169,7 +184,10 @@ require(['./browser'], function(browser){
path = /^\.\.?([\\\/].*)?$/.test(path) ? path = /^\.\.?([\\\/].*)?$/.test(path) ?
path path
: '/'+path : '/'+path
pwiki.location = [path, hash] }) startSpinner()
// NOTE: setTimeout(..) to allow the spinner to start...
setTimeout(function(){
pwiki.location = [path, hash] }, 0) })
pwiki pwiki
.onBeforeNavigate(function(){ .onBeforeNavigate(function(){
saveNow() }) saveNow() })
@ -192,6 +210,8 @@ require(['./browser'], function(browser){
&& console.log(`## ${pwiki.path} (${Date.now() - t}ms)`) }) }) && console.log(`## ${pwiki.path} (${Date.now() - t}ms)`) }) })
.onLoad(function(evt){ .onLoad(function(evt){
var that = this var that = this
// stop spinner...
stopSpinner()
// handle title... // handle title...
document.querySelector('title').innerHTML = this.path document.querySelector('title').innerHTML = this.path
// scroll to anchor element... // scroll to anchor element...
@ -208,11 +228,8 @@ require(['./browser'], function(browser){
// wait for stuff to finish... // wait for stuff to finish...
browser.setup.then(function(){ browser.setup.then(function(){
// show current page... // 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... // 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 }) } pwiki.get(path).raw = text }) }
setInterval(saveNow, 5000) setInterval(saveNow, 5000)
// loading spinner...
window.startSpinner = function(){
document.body.classList.add('loading') }
window.stopSpinner = function(){
document.body.classList.remove('loading') }
// XXX // XXX
var exportData = async function(){ var exportData = async function(){
@ -267,6 +290,19 @@ var exportData = async function(){
</div> </div>
</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> </body>
</html> </html>