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

added a loading spinner + experimenting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2022-09-02 21:15:22 +03:00
parent a105151f2a
commit a6f7234e36
3 changed files with 88 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pwiki/page.js
View File

@ -1842,6 +1842,20 @@ module.System = {
// page actions...
//
// XXX this does not work as energetic...
// XXX for some reason this is called twice...
time: async function(){
var t = Date.now()
var text = await this.get('../_text').text
var time = Date.now() - t
console.log('RENDER TIME:', time)
return object.doc`
Time to render: ${time}ms <br>
<ht>
${text}`},
// XXX EXPERIMENTAL -- page types...
isAction: async function(){
return await this.get('..').type == 'action' ?
@ -1856,7 +1870,7 @@ module.System = {
// utils...
//
// XXX System/subpaths
// XXX
/*/ XXX
links: function(){
// XXX
return '' },
@ -1866,6 +1880,7 @@ module.System = {
// XXX pages linking to us...
LinksFrom: function(){
return (this.get('..').data || {})['from'] ?? [] },
//*/
// actions...
@ -1961,8 +1976,21 @@ module.Test = {
<br><br>
<macro name="list" src="/Test/*" join=",<br>"/>
`},
Subtree: {
text: object.doc`
This is here to test the performance of macros:<br>
./list <br>
./tree <br>
./**/path <br> ` },
}
// Generate pages...
PAGES=100
for(var i=0; i<PAGES; i++){
Test['Subtree/Page'+i] = {text: 'page: '+i} }
var Settings =
module.Settings = {
Export: {

59
pwiki2.html
View File

@ -36,6 +36,47 @@
opacity: 0.8;
}
/* Spinner... */
.spinner {
position: absolute;
display: flex;
text-align: center;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
white-space: nowrap;
animation: fadein 2s 1;
}
.spinner span {
position: relative;
display: inline-block;
font-size: 2em;
animation: loading 2s infinite ;
animation-delay: calc(0.2s * var(--i));
}
@keyframes fadein {
from {
opacity: 0;
}
50% {
opacity: 0.8;
}
to {
opacity: 1;
}
}
@keyframes loading {
0%, 60% {
transform: rotateY(360deg);
}
}
</style>
<!-- XXX do we need this??? -->
@ -45,6 +86,8 @@
<script src="ext-lib/require.js"></script>
<script>
var DEBUG = true
var makeFallbacks =
function(paths, search=['lib']){
@ -129,7 +172,11 @@ require(['./browser'], function(browser){
: ''))
// NOTE: we are intentionally not awaiting for this -- this
// separates the navigate and load events...
this.refresh() })
var t = Date.now()
this.refresh()
.then(function(){
DEBUG
&& console.log(`## ${pwiki.path} (${Date.now() - t}ms)`) }) })
.onLoad(function(evt){
var that = this
// handle title...
@ -193,7 +240,15 @@ var exportData = async function(){
<body>
<!-- XXX need to add something passive but animated here... -->
<div id="pWiki"><div class="spinner">Loading...</div></div>
<div id="pWiki">
<div class="spinner">
<span style="--i:0">p</span>
<span style="--i:1">W</span>
<span style="--i:2">i</span>
<span style="--i:3">k</span>
<span style="--i:4">i</span>
</div>
</div>
</body>
</html>

2
pwiki2.js
View File

@ -41,6 +41,8 @@
* /some/path/!action
* ..."!" is removed before the <store>.__<name>__(..) calls...
* XXX ENERGETIC revise naming...
* XXX ENERGETIC System/time does not seem to work correctly...
* ...creating a _time alternative does not work...
* XXX OPTIMIZE might be a good idea to make some methods that only access
* the index sync -- this will make the store unusable while indexing
* though...