1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

Share plugin: Add warning prompt

This commit is contained in:
Jeremy Ruston 2020-02-14 15:01:45 +00:00
parent 04c28ba5f2
commit 07c2c21dbf
6 changed files with 216 additions and 5 deletions

View File

@ -19,7 +19,7 @@ if(rawHash.charAt(0) === "#") {
try{
hash = decodeURIComponent(rawHash.substring(1));
} catch(ex) {
console.log("Error decoding location hash",ex);
console.log("Share plugin: Error decoding location hash",ex);
}
// Try to parse the hash as JSON
if(hash) {
@ -27,17 +27,88 @@ if(rawHash.charAt(0) === "#") {
try {
tiddlers= JSON.parse(hash);
} catch(ex) {
console.log("Error parsing JSON from location hash",ex);
console.log("Share plugin: Error parsing JSON from location hash",ex);
}
if(tiddlers) {
// Need to initialise these because we run before bootprefix.js and boot.js
window.$tw = window.$tw || {};
$tw.boot = $tw.boot || {};
$tw.preloadTiddlers = $tw.preloadTiddlers || [];
// Load our tiddlers
$tw.preloadTiddlers = $tw.preloadTiddlers.concat(tiddlers);
}
// Prevent TiddlyWiki from booting
$tw.boot.suppressBoot = true;
// Load our styles
var stylesWrapper = document.createElement("style");
stylesWrapper.innerHTML = tiddlywikiSharePluginStartupWarningCss;
document.documentElement.appendChild(stylesWrapper);
// Display the warning banner
var warningWrapper = document.createElement("div");
warningWrapper.innerHTML = tiddlywikiSharePluginStartupWarningHtml;
document.documentElement.appendChild(warningWrapper);
// Add our event handlers
document.getElementById("startup-warning-proceed").addEventListener("click",actionProceed,false);
document.getElementById("startup-warning-cancel").addEventListener("click",actionCancel,false);
// Sort the incoming tiddlers by title
tiddlers = tiddlers.sort(function(a,b) {
if(a.title < b.title) {
return -1;
} else if(a.title > b.title) {
return +1;
} else {
return 0;
}
});
// Load the tiddler preview
var previewWrapper = document.getElementById("startup-warning-preview");
for(var index=0; index < tiddlers.length; index++) {
var tiddler = tiddlers[index],
tiddlerWrapper = document.createElement("li"),
titleTextWrapper = document.createElement("span"),
titleText = document.createTextNode(tiddler.title),
fieldsTable = document.createElement("table"),
fieldsTableBody = document.createElement("tbody");
titleTextWrapper.appendChild(titleText);
titleTextWrapper.className = "tiddler-title";
tiddlerWrapper.appendChild(titleTextWrapper);
fieldsTable.appendChild(fieldsTableBody);
var fields = Object.keys(tiddler).sort();
for(var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
var fieldName = fields[fieldIndex],
fieldValue = tiddler[fieldName];
if(fieldName !== "title") {
var fieldRow = document.createElement("tr"),
fieldRowHeader = document.createElement("th"),
fieldRowValue = document.createElement("td");
fieldRowHeader.appendChild(document.createTextNode(fieldName));
fieldRowValue.appendChild(document.createTextNode(fieldValue));
fieldRow.appendChild(fieldRowHeader);
fieldRow.appendChild(fieldRowValue);
fieldsTableBody.appendChild(fieldRow);
}
}
tiddlerWrapper.appendChild(fieldsTable);
previewWrapper.appendChild(tiddlerWrapper);
}
}
}
}
function actionProceed() {
// Remove the banner, load our tiddlers, and boot TiddlyWiki
removeWarningBanner();
$tw.preloadTiddlers = $tw.preloadTiddlers.concat(tiddlers);
$tw.boot.boot();
}
function actionCancel() {
// Remove the banner, clear the location hash, and boot TiddlyWiki
removeWarningBanner();
document.location.hash = "#";
$tw.boot.boot();
}
function removeWarningBanner() {
warningWrapper.parentNode.removeChild(warningWrapper);
stylesWrapper.parentNode.removeChild(stylesWrapper);
}
})();

View File

@ -2,5 +2,7 @@ title: $:/plugins/tiddlywiki/share/rawmarkup
tags: $:/tags/RawMarkupWikified
`<script>`
`var tiddlywikiSharePluginStartupWarningHtml = "`<$view tiddler="$:/plugins/tiddlywiki/share/startup-warning.html" format="jsencoded"/>`";`
`var tiddlywikiSharePluginStartupWarningCss = "`<$view tiddler="$:/plugins/tiddlywiki/share/startup-warning.css" format="jsencoded"/>`";`
{{$:/plugins/tiddlywiki/share/rawmarkup.js}}
`</script>`

View File

@ -0,0 +1,87 @@
.startup-warning-wrapper {
font-family: sans-serif;
line-height: 1.4;
width: 50%;
margin: 1em auto 0 auto;
padding: 0 1em;
border: 6px solid transparent;
border-radius: 8px;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 25%, transparent 0, transparent 50%) 0 / .6em .6em;
animation: marching-ants 20s linear infinite;
}
@media (max-width: 600px) {
.startup-warning-wrapper {
width: 85%;
}
}
#startup-warning-preview {
list-style-type: none;
padding-left: 0;
}
#startup-warning-preview .tiddler-title {
font-weight: bold;
font-size: 1.2em;
}
#startup-warning-preview table {
margin-left: 1em;
}
#startup-warning-preview th {
vertical-align: top;
font-weight: normal;
}
#startup-warning-preview td {
font-family: monospace;
white-space: pre-wrap;
background: #f8f8f8;
}
.startup-warning-wrapper button {
padding: 0.3em;
border-radius: 4px;
font-size: 1.5em;
}
#startup-warning-cancel {
background: #DB2828;
color: #fff;
}
#startup-warning-cancel:hover {
background: #E75C60;
color: #fff;
}
#startup-warning-cancel:active {
background: #ec8d8d;
color: #fff;
}
#startup-warning-proceed {
background: #24BA4C;
color: #fff;
}
#startup-warning-proceed:hover {
background: #59e27e;
color: #fff;
}
#startup-warning-proceed:active {
background: #ABF5BD;
color: #fff;
}
.startup-warning-wrapper h1,
.startup-warning-wrapper h2 {
font-weight: bold;
}
@keyframes marching-ants { to { background-position: 100% 100% } }

View File

@ -0,0 +1,2 @@
title: $:/plugins/tiddlywiki/share/startup-warning.css
type: text/css

View File

@ -0,0 +1,47 @@
<div class="startup-warning-wrapper">
<h1>
Warning: This site is designed to share untrusted content
</h1>
<h2>
Please do not proceed unless you are certain you understand the warnings below
</h2>
<p>
This is a special site that allows users to share content for <a href="https://tiddlywiki.com/" target="_blank" rel="noopener noreferrer">TiddlyWiki</a> without needing conventional hosting. Instead, the content is encoded in the URL used to access the site. This means that there are no controls or protections on the content that is shared, and as such it may contain malicious links or any kind of content.
</p>
<p>
Viewing links to this site in the browser is generally safe because web pages are designed to run in a sandbox that prevents them from accessing or harming your data. However, please exercise caution before downloading content to your own computer, or importing content into your own TiddlyWiki.
</p>
<details>
<summary>
Click here to see the tiddlers that are being shared
</summary>
<ul id="startup-warning-preview">
</ul>
</details>
<p>
<strong><em>Only continue if you understand the risks</em></strong>
</p>
<p>
<button id="startup-warning-proceed">
Proceed
</button>
<button id="startup-warning-cancel">
Cancel
</button>
</p>
<h2>
Technical details
</h2>
<p>
This web page is a <a href="https://tiddlywiki.com/" target="_blank" rel="noopener noreferrer">TiddlyWiki</a> loaded with the <a href="https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/share" target="_blank" rel="noopener noreferrer">Share plugin</a>. It has the special capability that at startup it can load raw tiddlers from a block of JSON encoded into the location hash part of the URL (ie the part after the # character).
</p>
<p>
This is useful because it enables people to share working examples of TiddlyWikis without needing to arrange special hosting. The only restriction is that browsers and other Internet infrastructure frequently limit the length of URLs to a few tens of kilobytes.
</p>
</div>

View File

@ -0,0 +1,2 @@
title: $:/plugins/tiddlywiki/share/startup-warning.html
type: text/html