Permalink
Browse files

Add support for splash screens during loading

Fixes #3417

Addresses some of the requirements discussed in #2254
  • Loading branch information...
Jermolene committed Sep 27, 2018
1 parent 806df86 commit cfb2d7c9c8d899729b67864070d1958b35cc0ca2
@@ -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
@@ -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

This comment has been minimized.

@pmario

pmario Sep 27, 2018

Contributor

IMO MIT text below is a bit of a bloat. The 3 lines above should be enough. @tobiasahlin What do you think?


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.

0 comments on commit cfb2d7c

Please sign in to comment.