Introduce background actions and media query tracker mechanisms #8555

Jermolene · 2024-08-27T15:40:53Z

This PR introduces two new general purpose mechanisms for end users:

The CSS media query tracker allows a media query to be bound to an info tiddler so that the current state of the query is reflected in the value of the tiddler. The value is updated dynamically
The new background actions mechanism allows action strings to be invoked automatically in the background whenever the results of a filter change

Both these mechanisms are based on a new "filter tracker" JavaScript class that is also intended to have other applications (eg tracking keyboard shortcuts).

The use of the info mechanism for the CSS media query tracker means that these tiddlers are dynamically created as shadow tiddlers within the $:/temp/info plugin, and so do not appear in tiddler lists.

The mechanism is used to implement the existing dark mode tiddler with the following configuration:

title: $:/core/wiki/config/MediaQueryTrackers/DarkLightSwitch
tags: $:/tags/MediaQueryTracker
media-query: (prefers-color-scheme: dark)
info-tiddler: $:/info/browser/darkmode
info-tiddler-alt: $:/info/darkmode

Note the use of info-tiddler-alt to specify a redundant secondary info tiddler. This is used by the dark mode tracker to maintain compatibility while changing the info tiddler title for consistency.

This PR also includes a rudimentary background action that is invoked when the operating system dark mode setting is changed. It is only included for demonstration purposes, and shows how the media query tracker can be used in association with background actions.

This PR was prompted by @pmario's work on dark mode switching in #7830 and is intended to allow us to implement actions for dark/light mode changes in a more extensible and generic way.

github-actions · 2024-08-27T15:41:11Z

Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md)

pmario · 2024-08-27T15:52:07Z

core/modules/info/mediaquerytracker.js

+						return tiddlers;
+					};
+					infoTiddlerFields.push.apply(infoTiddlerFields,getResultTiddlers());
+					mqList.addListener(function(event) {


IMO .addListener() was deprecated. See: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener. It should be mqList.addEventListener("change", function(event){ now

pmario · 2024-08-27T15:57:41Z

core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid

@@ -0,0 +1,5 @@
+title: $:/core/wiki/config/MediaQueryTrackers/DarkLightSwitch


IMO the name should be DarkModePreferred instead of switch. The state itself does not switch anything. It only tells us about the browser or os preferred setting

pmario · 2024-08-27T16:00:02Z

editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid

@@ -19,6 +19,8 @@ System tiddlers in the namespace `$:/info/` are used to expose information about
 |[[$:/info/browser/language]] |<<.from-version "5.1.20">> Language as reported by browser (note that some browsers report two character codes such as `en` while others report full codes such as `en-GB`) |
 |[[$:/info/browser/screen/width]] |Screen width in pixels |
 |[[$:/info/browser/screen/height]] |Screen height in pixels |
+|[[$:/info/browser/darkmode]] |<<.from-version "5.3.6">> Is dark mode enabled? ("yes" or "no") |


IMO it may be Is dark mode preferred

netlify · 2025-01-04T14:27:04Z

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	`365b734`
🔍 Latest deploy log	https://app.netlify.com/sites/tiddlywiki-previews/deploys/678fcca4311143000827e6c7
😎 Deploy Preview	https://deploy-preview-8555--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

The new filter tracker is a generic JS mechanism for tracking changes to the results of filters and changes to the tiddlers identified by those results. The rationale for the new mechanism is that it is a generalisation of code that is already present in the keyboard manager. The intention is to refactor the keyboard manager to use the filter tracker in due course

pmario · 2025-01-05T18:17:57Z

core/modules/filter-tracker.js

+		filterString: filterString,
+		fnEnter: fnEnter,
+		fnLeave: fnLeave,
+		fnChange: fnChange,


I am not 100% sure, but there seem to be no tests if the fn* parameters are undefined of if they actually are function()

1. Pass params as an options object 2. Add fnProcess which is called during processing after enter, leave and change have been called

Background actions are invoked when the results of a filter change. The sample background action is just for demo purposes to show how an automatic dark/light mode feature would be powered

Jermolene · 2025-01-07T15:15:46Z

I've updated this PR to incorporate the functionality that I had been exploring in #7999. See the updated OP for more details.

pmario · 2025-01-07T15:36:14Z

There seems to be a problem with then "dirty" flag

Jermolene · 2025-01-07T15:40:38Z

There seems to be a problem with then "dirty" flag

Yes, the sample background action that is included in the PR changes the value of $:/palette, which sets the wiki dirty. As we've discussed in #7830 I don't think this approach is usable in production; the sample background action is a temporary demo.

saqimtiaz · 2025-01-22T11:29:53Z

core/modules/filter-tracker.js

+};
+
+/*
+Add a tracker to the filter tracker. Returns null if any of the parameters are invalid, or a tracker id if the tracker was added successfully. Options include:


This method currently always returns a tracker id regardless of the validity of the parameters.

saqimtiaz · 2025-01-22T11:31:08Z

core/modules/background-actions.js

+			if(self.hasChanged) {
+				self.hasChanged = false;
+				self.wiki.invokeActionString(
+					self.actions,


We should provide access to global variables.

saqimtiaz · 2025-01-22T11:37:39Z

core/modules/background-actions.js

+		fnProcess: function(changes) {
+			if(self.hasChanged) {
+				self.hasChanged = false;
+				self.wiki.invokeActionString(


Should we process all tracked filters before we start invoking the corresponding actions? Otherwise the actions invoked by the first filter can trigger subsequent filters in the same cycle, as opposed to being deferred to the next refresh cycle.

Introduce new MediaQueryTrackerMechanism, and use it for dark mode

ba17e34

pmario reviewed Aug 27, 2024

View reviewed changes

Fixes suggested by @pmario

7f9b8bf

Leilei332 mentioned this pull request Nov 6, 2024

[IDEA] A Toggle Button for Simple Switching Dark/Light Theme for Tiddlywiki 5.1.23 #5023

Open

Leilei332 mentioned this pull request Nov 24, 2024

PRs for consideration after v5.3.6 release #8745

Closed

Merge branch 'master' into media-query-tracker

ea2426e

pmario reviewed Jan 5, 2025

View reviewed changes

Jermolene added 5 commits January 6, 2025 11:37

Add untrack method to filter tracker

964ced3

Be more defensive about missing parameters

ed2c7c9

Remove duplicates from filter tracker results

806960a

Refactor filter tracker

508c74f

1. Pass params as an options object 2. Add fnProcess which is called during processing after enter, leave and change have been called

Introduce background actions

818a997

Background actions are invoked when the results of a filter change. The sample background action is just for demo purposes to show how an automatic dark/light mode feature would be powered

Jermolene mentioned this pull request Jan 7, 2025

Introduce global "Filtered Actions" that are invoked when a filter evaluates to a non-empty result #7999

Closed

2 tasks

Jermolene changed the title ~~Introduce new MediaQueryTrackerMechanism, and use it for dark mode~~ Introduce background actions and media query tracker mechanisms Jan 7, 2025

Add another background action demo

365b734

saqimtiaz reviewed Jan 22, 2025

View reviewed changes

pmario mentioned this pull request Jan 22, 2025

[BUG] Updating info tiddlers using the callback sets the dirty flag #8902

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce background actions and media query tracker mechanisms #8555

Introduce background actions and media query tracker mechanisms #8555

Jermolene commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024

pmario Aug 27, 2024

pmario Aug 27, 2024

pmario Aug 27, 2024

netlify bot commented Jan 4, 2025 •

edited

Loading

pmario Jan 5, 2025 •

edited

Loading

Jermolene commented Jan 7, 2025

pmario commented Jan 7, 2025

Jermolene commented Jan 7, 2025

saqimtiaz Jan 22, 2025

saqimtiaz Jan 22, 2025

saqimtiaz Jan 22, 2025

		@@ -0,0 +1,5 @@
		title: $:/core/wiki/config/MediaQueryTrackers/DarkLightSwitch

Introduce background actions and media query tracker mechanisms #8555

Are you sure you want to change the base?

Introduce background actions and media query tracker mechanisms #8555

Conversation

Jermolene commented Aug 27, 2024 • edited Loading

github-actions bot commented Aug 27, 2024

pmario Aug 27, 2024

Choose a reason for hiding this comment

pmario Aug 27, 2024

Choose a reason for hiding this comment

pmario Aug 27, 2024

Choose a reason for hiding this comment

netlify bot commented Jan 4, 2025 • edited Loading

✅ Deploy Preview for tiddlywiki-previews ready!

pmario Jan 5, 2025 • edited Loading

Choose a reason for hiding this comment

Jermolene commented Jan 7, 2025

pmario commented Jan 7, 2025

Jermolene commented Jan 7, 2025

saqimtiaz Jan 22, 2025

Choose a reason for hiding this comment

saqimtiaz Jan 22, 2025

Choose a reason for hiding this comment

saqimtiaz Jan 22, 2025

Choose a reason for hiding this comment

Jermolene commented Aug 27, 2024 •

edited

Loading

netlify bot commented Jan 4, 2025 •

edited

Loading

pmario Jan 5, 2025 •

edited

Loading