mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
Add support for splash screens during loading
Fixes #3417 Addresses some of the requirements discussed in #2254
This commit is contained in:
Jermolene
parent
806df86434
commit
cfb2d7c9c8
@ -59,6 +59,13 @@ exports.startup = function() {
|
||||
$tw.pageWidgetNode.render($tw.pageContainer,null);
|
||||
$tw.hooks.invokeHook("th-page-refreshed");
|
||||
})();
|
||||
// Remove any splash screen elements
|
||||
var removeList = document.querySelectorAll(".tc-remove-when-wiki-loaded");
|
||||
$tw.utils.each(removeList,function(removeItem) {
|
||||
if(removeItem.parentNode) {
|
||||
removeItem.parentNode.removeChild(removeItem);
|
||||
}
|
||||
});
|
||||
// Prepare refresh mechanism
|
||||
var deferredChanges = Object.create(null),
|
||||
timerId;
|
||||
|
||||
@ -4,8 +4,10 @@ title: $:/core/templates/tiddlywiki5.html
|
||||
<!doctype html>
|
||||
{{$:/core/templates/MOTW.html}}<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<!--~~ Raw markup for the top of the head section ~~-->
|
||||
{{{ [all[shadows+tiddlers]tag[$:/tags/RawMarkupWikified/TopHead]] ||$:/core/templates/raw-static-tiddler}}}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
||||
<meta name="application-name" content="TiddlyWiki" />
|
||||
<meta name="generator" content="TiddlyWiki" />
|
||||
<meta name="tiddlywiki-version" content="{{$:/core/templates/version}}" />
|
||||
@ -24,6 +26,8 @@ title: $:/core/templates/tiddlywiki5.html
|
||||
{{{ [all[shadows+tiddlers]tag[$:/tags/RawMarkupWikified]] ||$:/core/templates/raw-static-tiddler}}}
|
||||
</head>
|
||||
<body class="tc-body">
|
||||
<!--~~ Raw markup for the top of the body section ~~-->
|
||||
{{{ [all[shadows+tiddlers]tag[$:/tags/RawMarkupWikified/TopBody]] ||$:/core/templates/raw-static-tiddler}}}
|
||||
<!--~~ Static styles ~~-->
|
||||
<div id="styleArea">
|
||||
{{$:/boot/boot.css||$:/core/templates/css-tiddler}}
|
||||
@ -48,5 +52,7 @@ title: $:/core/templates/tiddlywiki5.html
|
||||
<div id="bootKernel" style="display:none;">
|
||||
{{ $:/boot/boot.js ||$:/core/templates/javascript-tiddler}}
|
||||
</div>
|
||||
<!--~~ Raw markup for the bottom of the body section ~~-->
|
||||
{{{ [all[shadows+tiddlers]tag[$:/tags/RawMarkupWikified/BottomBody]] ||$:/core/templates/raw-static-tiddler}}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
created: 20130822080600000
|
||||
modified: 20180926172010999
|
||||
tags: Concepts
|
||||
modified: 20180927080631239
|
||||
tags: Reference Concepts
|
||||
title: SystemTags
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
created: 20180927081216605
|
||||
modified: 20180927084436111
|
||||
tags: [[Customise TiddlyWiki]]
|
||||
title: Creating a splash screen
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
By default, TiddlyWiki displays a blank screen while it is loading. If you prefer you can add a special "splash screen" that is displayed while the wiki loads.
|
||||
|
||||
In order for the splash screen to be displayed before TiddlyWiki is initialised it is embedded as static HTML/CSS within the TiddlyWiki HTML file. This is done with the [[SystemTag: $:/tags/RawMarkupWikified/TopBody]].
|
||||
|
||||
The other to remove the splash screen when the wiki has finished loading, the HTML should be wrapped in a container with the special class `tc-remove-when-wiki-loaded`. Any DOM elements with this class are automatically deleted by the core once the wiki has loaded.
|
||||
|
||||
Here's an example of a simple splash screen that just displays the text //Loading//. To use it, copy the text into a new tiddler, give it the type "text/plain" and the tag "$:/tags/RawMarkupWikified/TopBody":
|
||||
|
||||
```
|
||||
<div class="tc-remove-when-wiki-loaded">
|
||||
Loading...
|
||||
</div>
|
||||
```
|
||||
|
||||
If the tiddler is given the WikiText type `text/vnd.tiddlywiki` then the contents are wikified as the file is saved, allowing transclusion etc. For example, here's an example that quotes the site title in the loading message. To use it, copy the text into a new tiddler, give it the type "text/vnd.tiddlywiki" and the tag "$:/tags/RawMarkupWikified/TopBody":
|
||||
|
||||
```
|
||||
\rules only filteredtranscludeinline transcludeinline
|
||||
<div class="tc-remove-when-wiki-loaded">
|
||||
Please wait while {{$:/SiteTitle}} is loading
|
||||
</div>
|
||||
```
|
||||
|
||||
The `\rules` directive is used to limit the wikitext syntax that is recognised to the two forms of inline transclusion. This avoids accidental wikification of tiddler content.
|
||||
|
||||
There is a more complex example splash screen using CSS animations and images configured in this wiki: see $:/SplashScreen
|
||||
@ -1,6 +1,6 @@
|
||||
created: 20140910212931897
|
||||
list: Concepts Definitions WikiText Macros Variables Widgets Filters Messages Commands Mechanisms Developers
|
||||
modified: 20160710150825305
|
||||
list: Concepts Definitions WikiText Macros Variables SystemTags Widgets Filters Messages Commands Mechanisms Developers
|
||||
modified: 20180927080640647
|
||||
tags: TableOfContents
|
||||
title: Reference
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
116
editions/tw5.com/tiddlers/system/$__SplashScreen.tid
Normal file
116
editions/tw5.com/tiddlers/system/$__SplashScreen.tid
Normal file
@ -0,0 +1,116 @@
|
||||
created: 20180927082601825
|
||||
modified: 20180927083036494
|
||||
tags: $:/tags/RawMarkupWikified/TopBody
|
||||
title: $:/SplashScreen
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrocallinline
|
||||
<div class="tc-remove-when-wiki-loaded">
|
||||
<style scoped>
|
||||
|
||||
.tc-splash-text {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 20px auto 0;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
color: <<colour foreground>>;
|
||||
fill: <<colour foreground>>;
|
||||
}
|
||||
|
||||
html body.tc-body {
|
||||
background: <<colour page-background>>;
|
||||
}
|
||||
|
||||
/*
|
||||
Spinner from https://github.com/tobiasahlin/SpinKit/ by Tobias Ahlin
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Tobias Ahlin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
.tc-splash-spinner {
|
||||
margin: 20px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tc-splash-spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
background-color: #f88;
|
||||
}
|
||||
|
||||
.tc-splash-spinner .tc-splash-bounce-1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
background-color: #8f8;
|
||||
}
|
||||
|
||||
.tc-splash-spinner .tc-splash-bounce-2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
background-color: #88f;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="tc-splash-text">
|
||||
Please wait while {{$:/SiteTitle}} is loading
|
||||
</div>
|
||||
|
||||
<div class="tc-splash-spinner">
|
||||
<div class="tc-splash-bounce-1"></div>
|
||||
<div class="tc-splash-bounce-2"></div>
|
||||
<div class="tc-splash-bounce-3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Demonstrating how to embed a wikitext SVG graphic -->
|
||||
<div class="tc-splash-text">
|
||||
{{$:/core/images/home-button||$:/core/templates/plain-text-tiddler}}
|
||||
</div>
|
||||
|
||||
<!-- Demonstrating how to embed a bitmap graphic -->
|
||||
<div class="tc-splash-text">
|
||||
<img src="data:image/jpeg;base64,{{Motovun Jack.jpg||$:/core/templates/plain-text-tiddler}}" width="100"/>
|
||||
</div>
|
||||
@ -1,9 +1,11 @@
|
||||
caption: $:/tags/RawMarkup
|
||||
created: 20180926170345251
|
||||
description: marks plain text tiddlers to be included as raw markup at the bottom of the `<head>` section in the generated HTML file
|
||||
modified: 20180926171456471
|
||||
description: marks tiddlers included as raw text at the bottom of `<head>`
|
||||
modified: 20180927084346820
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/RawMarkup
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkup` marks plain text tiddlers to be included as raw markup at the bottom of the `<head>` section in the generated HTML file
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkup` marks plain text tiddlers to be included as raw markup at the bottom of the `<head>` section in the generated HTML file.
|
||||
|
||||
Note that the wiki must be saved and reloaded in order for a raw markup tiddler to take effect.
|
||||
@ -1,9 +1,11 @@
|
||||
caption: $:/tags/RawMarkupWikified
|
||||
created: 20180926170345251
|
||||
description: marks wikified tiddlers to be included at the bottom of the `<head>` section in the generated HTML file
|
||||
modified: 20180926171456470
|
||||
description: marks tiddlers included as wikified text at the bottom of `<head>`
|
||||
modified: 20180927084332243
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/RawMarkupWikified
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkupWikified` marks wikified tiddlers to be included as raw markup at the bottom of the `<head>` section in the generated HTML file
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkupWikified` marks wikified tiddlers to be included as raw markup at the bottom of the `<head>` section in the generated HTML file.
|
||||
|
||||
Note that the wiki must be saved and reloaded in order for a raw markup tiddler to take effect. Also note that global macros are not available by default within raw markup tiddlers; you can use the ImportVariablesWidget to explicitly import them.
|
||||
@ -0,0 +1,11 @@
|
||||
caption: $:/tags/RawMarkupWikified/BottomBody
|
||||
created: 20180926170345251
|
||||
description: marks tiddlers included as wikified text at the bottom of `<body>`
|
||||
modified: 20180927084336737
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/RawMarkupWikified/BottomBody
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkupWikified/BottomBody` marks wikified tiddlers to be included as raw markup at the bottom of the `<body>` section in the generated HTML file.
|
||||
|
||||
Note that the wiki must be saved and reloaded in order for a raw markup tiddler to take effect. Also note that global macros are not available by default within raw markup tiddlers; you can use the ImportVariablesWidget to explicitly import them.
|
||||
@ -0,0 +1,11 @@
|
||||
caption: $:/tags/RawMarkupWikified/TopBody
|
||||
created: 20180926170345251
|
||||
description: marks tiddlers included as wikified text at the top of `<body>`
|
||||
modified: 20180927084353235
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/RawMarkupWikified/TopBody
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkupWikified/TopBody` marks wikified tiddlers to be included as raw markup at the top of the `<body>` section in the generated HTML file.
|
||||
|
||||
Note that the wiki must be saved and reloaded in order for a raw markup tiddler to take effect. Also note that global macros are not available by default within raw markup tiddlers; you can use the ImportVariablesWidget to explicitly import them.
|
||||
@ -0,0 +1,11 @@
|
||||
caption: $:/tags/RawMarkupWikified/TopHead
|
||||
created: 20180926170345251
|
||||
description: marks tiddlers included as wikified text at the top of `<head>`
|
||||
modified: 20180927084358475
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/RawMarkupWikified/TopHead
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/RawMarkupWikified/TopHead` marks wikified tiddlers to be included as raw markup at the top of the `<head>` section in the generated HTML file.
|
||||
|
||||
Note that the wiki must be saved and reloaded in order for a raw markup tiddler to take effect. Also note that global macros are not available by default within raw markup tiddlers; you can use the ImportVariablesWidget to explicitly import them.
|
||||
Loading…
Reference in New Issue
Block a user