tiddlywiki 5.3.3 → 5.3.5

package/plugins/tiddlywiki/confetti/readme.tid

@@ -0,0 +1,65 @@
+title: $:/plugins/tiddlywiki/confetti/readme
+
+\define show-example(name)
+<$let title={{{ [[$:/plugins/tiddlywiki/confetti/examples/]addsuffix<__name__>] }}}>
+
+For example:
+
+<$macrocall $name="copy-to-clipboard-above-right" src=<<__src__>>/>
+
+<$codeblock code={{{ [<title>get[text]] }}}/>
+
+Renders as:
+
+<$transclude tiddler=<<title>> mode="block"/>
+
+</$let>
+\end
+
+! Introduction
+
+This plugin adds a programmable confetti cannon to your TiddlyWiki. It is based on https://www.kirilv.com/canvas-confetti/ by Kiril Vatev.
+
+! Usage
+
+The confetti cannon can be controlled using messages or via the `<$confetti>` widget. Use the message approach when triggering confetti in response to an action (such as clicking a button). Use the widget approach when confetti is to be triggered by a condition (such as a target number of words being reached).
+
+!! Messages: tm-confetti-launch and tm-confetti-reset
+
+The `tm-confetti-launch` message launches the confetti cannon. See below for the available parameters.
+
+The `tm-confetti-reset` message cancels any confetti that is in progress.
+
+<<show-example staggered>>
+
+!! Widget: `<$confetti>`
+
+The `<$confetti>` widget launches the confetti cannon when it is first rendered. See below for the available attributes.
+
+Typically it is used in conjunction with a `<$list>` or `<$reveal>` widget that shows the widget when the conditions required to trigger the confetti are satisfied.
+
+In this example, the confetti will be launched when the word "launch" in typed into the box.
+
+<<show-example typing-trigger>>
+
+!! Confetti Launch parameters
+
+The following options are supported:
+
+|!Name |!Description |!Default |
+|''delay'' |Number of milliseconds to delay the launch |0 |
+|''particleCount'' |The number of confetti to launch |50 |
+|''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 |
+|''spread'' |How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees |45 |
+|''startVelocity'' |How fast the confetti will start going, in pixels |45 |
+|''decay'' |How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed |0.9 |
+|''gravity'' |How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc. |1 |
+|''drift'' |How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right |0 |
+|''ticks'' |How many times the confetti will move (this is an abstract quantity; the designed recommends playing with it if the confetti disappears too quickly for you) |200 |
+|''originX'' |The `x` position on the page, with `0` being the left edge and `1` being the right edge |0.5 |
+|''originY'' |The `y` position on the page, with `0` being the top edge and `1` being the bottom edge |0.5 |
+|''colors'' |A space separated list of color strings in hex format (eg `#bada55` or `#ce5`) | |
+|''shapes'' |A space separated list of shapes for the confetti. The possible values are `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the list, such as `star`. You can also change the mix by providing a value such as `circle circle square` to use two third circles and one third squares | |
+|''scalar'' |Scale factor for each confetti particle. Use decimals to make the confetti smaller |1 |
+|''zIndex'' |Z-index of confetti. Increase the value if the confetti is appearing behind other on-screen elements|100 |
+|''disableForReducedMotion'' |Set to `yes` to entirely disable confetti for users that [[prefer reduced motion|https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion]] |`no` |

package/plugins/tiddlywiki/confetti/startup.js

@@ -0,0 +1,63 @@
+/*\
+title: $:/plugins/tiddlywiki/confetti/startup.js
+type: application/javascript
+module-type: startup
+
+Setup the root widget event handlers
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+// Export name and synchronous status
+exports.name = "confetti";
+exports.platforms = ["browser"];
+exports.after = ["startup"];
+exports.synchronous = true;
+
+// Install the root widget event handlers
+exports.startup = function() {
+	$tw.confettiManager = new $tw.ConfettiManager();
+	$tw.rootWidget.addEventListener("tm-confetti-launch",function(event) {
+		var paramObject = event.paramObject || {},
+			options = {},
+			extractNumericParameter = function(name) {
+				if(paramObject[name]) {
+					options[name] = $tw.utils.parseNumber(paramObject[name]);
+				}
+			},
+			extractListParameter = function(name) {
+				if(paramObject[name]) {
+					options[name] = $tw.utils.parseStringArray(paramObject[name]);
+				}
+			},
+			extractBooleanParameter = function(name) {
+				if(paramObject[name]) {
+					options[name] = paramObject[name] === "yes";
+				}
+			};
+		$tw.utils.each("particleCount angle spread startVelocity decay gravity drift ticks scalar zIndex".split(" "),function(name) {
+			extractNumericParameter(name);
+		});
+		$tw.utils.each("colors shapes".split(" "),function(name) {
+			extractListParameter(name);
+		});
+		if(paramObject.originX && paramObject.originY) {
+			options.origin = {
+				x: paramObject.originX && $tw.utils.parseNumber(paramObject.originX),
+				y: paramObject.originY && $tw.utils.parseNumber(paramObject.originY)
+			};
+		}
+		extractBooleanParameter("disableForReducedMotion");
+		var delay = paramObject.delay ? $tw.utils.parseNumber(paramObject.delay) : 0;
+		$tw.confettiManager.launch(delay,options);
+	});
+	$tw.rootWidget.addEventListener("tm-confetti-reset",function(event) {
+		$tw.confettiManager.reset();
+	});
+};
+
+})();

package/plugins/tiddlywiki/consent-banner/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/consent-banner",
 	"name": "Consent Banner",
 	"description": "Consent banner for GDPR etc",
-	"list": "readme docs youtube config"
+	"list": "readme docs youtube config",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/d3/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/d3",
 	"name": "D3",
 	"description": "D3 data visualisation demo",
-	"list": "readme"
+	"list": "readme",
+	"stability": "STABILITY_0_DEPRECATED"
 }

package/plugins/tiddlywiki/dynannotate/docs/readme.tid

@@ -5,6 +5,7 @@ The ''Dynannotate'' plugin allows annotations on textual content to be created a
 * The dynannotate widget draws clickable textual annotations, search highlights and search snippets as overlays over the top of the content that it contains
 * The selection tracker keeps track of changes to the selected text in the main browser window. It triggers an action string when the selection changes, passing it the details of the selection. It can be used to display a popup menu
 ** The original legacy selection tracker is also provided for backwards compatibility. It is much more limited, and not recommended for new projects
+* The element spotlight highlights on screen elements using a spotlight animation
 
 !! Dynannotate Widget
 
@@ -172,3 +173,12 @@ Notes:
 
 * The selection popup will disappear if the selection is cancelled; this will happen if the user clicks on any other element apart than a button. Thus it is not possible to have any interactive controls within the popup apart from buttons
 
+!! Element Spotlight
+
+The `tm-spotlight-element` message causes a spotlight effect to briefly appear to highlight a specified element. The message accepts the following parameters:
+
+|!Parameter |!Description |
+|`selector` |CSS selector of the element to highlight |
+|{//Any parameter names starting with `selector-`}// |Fallback CSS selectors to be used if the primary selector does not resolve to an element |
+
+The fallback CSS selectors are case-insensitively sorted by title before use, with uppercase letters sorting before lower case letters. The usual convention is to use numeric suffixes: `selector-00`, `selector-01` etc.

package/plugins/tiddlywiki/dynannotate/examples/spotlight.tid

@@ -0,0 +1,71 @@
+title: $:/plugins/tiddlywiki/dynannotate/examples/spotlight
+tags: $:/tags/dynannotateExamples
+caption: Spotlight
+
+\define show-example(example)
+<$codeblock code=<<__example__>>/>
+
+//''Displays as:''//
+
+$example$
+\end
+
+<div class="tc-dynannotation-example-info">
+
+!! Spotlighting an Image
+
+</div>
+
+<<show-example """
+<$button>
+<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-image-example"/>
+Spotlight this image
+</$button>
+<div class="tc-dynannotate-spotlight-image-example" style="display:inline-block;">
+{{$:/core/images/globe}}
+</div>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Spotlighting a Button
+
+</div>
+
+<<show-example """
+<$button class="tc-dynannotate-spotlight-button-example">
+<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-button-example"/>
+Spotlight this button
+</$button>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Spotlighting a Text Area
+
+</div>
+
+<<show-example """
+<$button>
+<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-textarea-example"/>
+Spotlight this text area
+</$button>
+
+<$edit-text class="tc-dynannotate-spotlight-textarea-example" tag="textarea" tiddler="$:/temp/dynannotate/spotlight/demo/text"/>
+
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Spotlighting the Sidebar Search Input
+
+This button will spotlight the sidebar search, but if the sidebar is hidden then it will spotlight the button for showing the sidebar.
+
+</div>
+
+<<show-example """
+<$button>
+<$action-sendmessage $message="tm-spotlight-element" selector=".tc-sidebar-search .tc-popup-handle" selector-fallback=".tc-menubar .tc-show-sidebar-btn"/>
+Spotlight the sidebar search input
+</$button>
+""">>

package/plugins/tiddlywiki/dynannotate/modules/element-spotlight.js

@@ -0,0 +1,136 @@
+/*\
+title: $:/plugins/tiddlywiki/dynannotate/element-spotlight.js
+type: application/javascript
+module-type: library
+
+Manages the element spotlight effect
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function ElementSpotlight() {
+	this.animationStartTime; // Undefined if no animation is in  progress
+	// Create DOM nodes
+	this.spotlightElement = $tw.utils.domMaker("div",{
+		"class": "tc-dynannotate-spotlight"
+	});
+	this.spotlightWrapper = $tw.utils.domMaker("div",{
+		"class": "tc-dynannotate-spotlight-wrapper",
+		children: [
+			this.spotlightElement
+		]
+	});
+	document.body.appendChild(this.spotlightWrapper);
+}
+
+/*
+Return the first visible element that matches a selector
+*/
+ElementSpotlight.prototype.querySelectorSafe = function(selector) {
+	var targetNodes;
+	// Get the matching elements
+	try {
+		targetNodes = document.querySelectorAll(selector);
+	} catch(e) {
+		console.log("Error with selector: " + selector);
+	}
+	if(!targetNodes) {
+		return undefined;
+	}
+	// Remove any elements from the start of the list that are hidden, or have hidden ancestors
+	var didRemoveFirstEntry;
+	do {
+		didRemoveFirstEntry = false;
+		var hasHiddenAncestor = false,
+			n = targetNodes[0];
+		while(n) {
+			if(n.hidden || (n instanceof Element && window.getComputedStyle(n).display === "none")) {
+				hasHiddenAncestor = true;
+				break;
+			}
+			n = n.parentNode;
+		}
+		if(hasHiddenAncestor) {
+			// Remove first entry from targetNodes array
+			targetNodes = [].slice.call(targetNodes, 1); 
+			didRemoveFirstEntry = true;
+		}
+	} while(didRemoveFirstEntry)
+	// Return the first result
+	return targetNodes[0];
+};
+
+ElementSpotlight.prototype.positionSpotlight = function(x,y,innerRadius,outerRadius,opacity) {
+	this.spotlightElement.style.display = "block";
+	this.spotlightElement.style.backgroundImage = "radial-gradient(circle at " + (x / document.documentElement.clientWidth * 100) + "% " + (y / document.documentElement.clientHeight * 100) + "%, transparent " + innerRadius + "px, rgba(0, 0, 0, " + opacity + ") " + outerRadius + "px)";
+};
+
+ElementSpotlight.prototype.easeInOut = function(v) {
+	return (Math.sin((v - 0.5) * Math.PI) + 1) / 2;
+};
+
+/*
+Shine a spotlight on the first element that matches an array of selectors
+*/
+ElementSpotlight.prototype.shineSpotlight = function(selectors) {
+	var self = this;
+	function animationLoop(selectors) {
+		// Calculate how far through the animation we are
+		// 0...1 = zoom in
+		// 1...2 = hold
+		// 2...3 = fade out
+		var now = new Date(),
+			t = (now - self.animationStartTime) / ($tw.utils.getAnimationDuration() * 2);
+		t = t >= 3 ? 3 : t;
+		// Query the selector for the target element
+		var targetNode, selectorIndex = 0;
+		while(!targetNode && selectorIndex < selectors.length) {
+			targetNode = self.querySelectorSafe(selectors[selectorIndex]);
+			selectorIndex += 1;
+		}
+		// Position the spotlight if we've got the target
+		if(targetNode) {
+			var rect = targetNode.getBoundingClientRect();
+			var innerRadius, outerRadius, opacity;
+			if(t <= 1) {
+				t = self.easeInOut(t);
+				innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
+				outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
+				opacity = 0.2 + t / 4;
+			} else if(t <= 2) {
+				innerRadius = rect.width / 2;
+				outerRadius = rect.width;
+				opacity = 0.45;
+			} else {
+				t = self.easeInOut(3 - t);
+				innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
+				outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
+				opacity = t / 3;
+			}
+			self.positionSpotlight((rect.left + rect.right) / 2,(rect.top + rect.bottom) / 2,innerRadius,outerRadius,opacity);
+		} else {
+			self.spotlightElement.style.display = "none";
+		}
+		// Call the next frame unless we're at the end
+		if(t <= 3) {
+			window.requestAnimationFrame(function () {
+				animationLoop(selectors);
+			});
+		} else {
+			// End the animation if we've exceeded the time limit
+			self.animationStartTime = undefined;
+		}
+	}
+	this.animationStartTime = new Date();
+	window.requestAnimationFrame(function () {
+		animationLoop(selectors);
+	});
+};
+
+exports.ElementSpotlight = ElementSpotlight;
+
+})();

package/plugins/tiddlywiki/dynannotate/modules/startup.js

@@ -1,3 +1,5 @@
+const { ElementSpotlight } = require("./element-spotlight");
+
 /*\
 title: $:/plugins/tiddlywiki/dynannotate/startup.js
 type: application/javascript
@@ -22,18 +24,39 @@ var CONFIG_SELECTION_TRACKER_TITLE = "$:/config/Dynannotate/SelectionTracker/Ena
 	CONFIG_LEGACY_SELECTION_TRACKER_TITLE = "$:/config/Dynannotate/LegacySelectionTracker/Enable";
 
 var SelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/selection-tracker.js").SelectionTracker,
-	LegacySelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/legacy-selection-tracker.js").LegacySelectionTracker;
+	LegacySelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/legacy-selection-tracker.js").LegacySelectionTracker,
+	ElementSpotlight = require("$:/plugins/tiddlywiki/dynannotate/element-spotlight.js").ElementSpotlight;
 
 exports.startup = function() {
 	$tw.dynannotate = {};
+	// Setup selection tracker
 	if($tw.wiki.getTiddlerText(CONFIG_SELECTION_TRACKER_TITLE,"yes") === "yes") {
 		$tw.dynannotate.selectionTracker = new SelectionTracker($tw.wiki);
 	}
+	// Setup legacy selection tracker
 	if($tw.wiki.getTiddlerText(CONFIG_LEGACY_SELECTION_TRACKER_TITLE,"yes") === "yes") {
 		$tw.dynannotate.legacySelectionTracker = new LegacySelectionTracker($tw.wiki,{
 			allowBlankSelectionPopup: true
 		});
 	}
+	// Set up the element spotlight
+	$tw.dynannotate.elementSpotlight = new ElementSpotlight();
+	$tw.rootWidget.addEventListener("tm-spotlight-element",function(event) {
+		var selectors = [];
+		if(event.paramObject.selector) {
+			selectors.push(event.paramObject.selector);
+		}
+		$tw.utils.each(Object.keys(event.paramObject).sort(),function(name) {
+			var SELECTOR_PROPERTY_PREFIX = "selector-";
+			if($tw.utils.startsWith(name,SELECTOR_PROPERTY_PREFIX)) {
+				selectors.push(event.paramObject[name]);
+			}
+		});
+		if(event.paramObject["selector-fallback"]) {
+			selectors.push(event.paramObject["selector-fallback"]);
+		}
+		$tw.dynannotate.elementSpotlight.shineSpotlight(selectors);
+	});
 };
 
 })();

package/plugins/tiddlywiki/dynannotate/plugin.info

@@ -5,5 +5,6 @@
 	"author": "JeremyRuston",
 	"core-version": ">=5.0.0",
 	"list": "readme examples",
-	"dependents": ["$:/plugins/tiddlywiki/dynaview"]
+	"dependents": ["$:/plugins/tiddlywiki/dynaview"],
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/dynannotate/styles.tid

@@ -52,3 +52,20 @@ tags: [[$:/tags/Stylesheet]]
 	background: #ffa;
 	padding: 1em;
 }
+
+.tc-dynannotate-spotlight-wrapper {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 1000;
+	pointer-events: none;
+}
+
+.tc-dynannotate-spotlight {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	display: none;
+}

package/plugins/tiddlywiki/dynaview/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/dynaview",
 	"name": "Dynaview",
 	"description": "Dynamic scrolling and zooming effects",
-	"list": "readme docs examples config"
+	"list": "readme docs examples config",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/evernote/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/evernote",
 	"name": "Evernote",
 	"description": "Evernote migration tools",
-	"list": "readme docs"
+	"list": "readme docs",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/external-attachments/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/external-attachments",
 	"name": "External Attachments",
 	"description": "External attachments for TiddlyDesktop",
-	"list": "readme settings"
+	"list": "readme settings",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/filesystem/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/filesystem",
 	"name": "Filesystem",
 	"description": "Synchronize changes from the node.js server to the local filesystem",
-	"list": "readme"
+	"list": "readme",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/freelinks/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/freelinks",
 	"name": "Freelinks",
 	"description": "Freelinking of tiddler titles",
-	"list": "readme settings"
+	"list": "readme settings",
+	"stability": "STABILITY_2_STABLE"
 }

package/plugins/tiddlywiki/geospatial/baselayers/TagsGeoBaseLayer.tid

@@ -0,0 +1,2 @@
+title: $:/tags/GeoBaseLayer
+list: $:/plugins/tiddlywiki/geospatial/baselayers/openstreetmap $:/plugins/tiddlywiki/geospatial/baselayers/esri-world-imagery $:/plugins/tiddlywiki/geospatial/baselayers/opentopomap $:/plugins/tiddlywiki/geospatial/baselayers/stamen-terrain $:/plugins/tiddlywiki/geospatial/baselayers/stamen-watercolor

package/plugins/tiddlywiki/geospatial/baselayers/esri-world-imagery.tid

@@ -0,0 +1,7 @@
+title: $:/plugins/tiddlywiki/geospatial/baselayers/esri-world-imagery
+caption: ESRI World Imagery
+tags: $:/tags/GeoBaseLayer
+tiles-url: https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
+max-zoom: 18
+
+Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community

package/plugins/tiddlywiki/geospatial/baselayers/openstreetmap.tid

@@ -0,0 +1,7 @@
+title: $:/plugins/tiddlywiki/geospatial/baselayers/openstreetmap
+caption: OpenStreetMap
+tags: $:/tags/GeoBaseLayer
+tiles-url: https://tile.openstreetmap.org/{z}/{x}/{y}.png
+max-zoom: 19
+
+&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>

package/plugins/tiddlywiki/geospatial/baselayers/opentopomap.tid

@@ -0,0 +1,7 @@
+title: $:/plugins/tiddlywiki/geospatial/baselayers/opentopomap
+caption: OpenTopoMap
+tags: $:/tags/GeoBaseLayer
+tiles-url: https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png
+max-zoom: 17
+
+Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)