mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-30 05:19:57 +00:00
Code Issues Releases Wiki Activity

Introduce new MediaQueryTrackerMechanism, and use it for dark mode

Browse Source
This commit is contained in:
Jeremy Ruston 2024-08-27 16:34:58 +01:00
parent fb9459a0dd
commit ba17e342b2
5 changed files with 65 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
core/modules/info/mediaquerytracker.js Normal file
View File

@ -0,0 +1,48 @@
/*\
title: $:/core/modules/info/mediaquerytracker.js
type: application/javascript
module-type: info
Initialise $:/info/ tiddlers derived from media queries via
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
var infoTiddlerFields = [];
if($tw.browser) {
// Get the media query tracker tiddlers
var trackers = $tw.wiki.getTiddlersWithTag("$:/tags/MediaQueryTracker");
$tw.utils.each(trackers,function(title) {
var tiddler = $tw.wiki.getTiddler(title);
if(tiddler) {
var mediaQuery = tiddler.fields["media-query"],
infoTiddler = tiddler.fields["info-tiddler"],
infoTiddlerAlt = tiddler.fields["info-tiddler-alt"];
if(mediaQuery && infoTiddler) {
// Evaluate and track the media query
var mqList = window.matchMedia(mediaQuery);
function getResultTiddlers() {
var value = mqList.matches ? "yes" : "no",
tiddlers = [{title: infoTiddler, text: value}];
if(infoTiddlerAlt) {
tiddlers.push({title: infoTiddlerAlt, text: value})
}
return tiddlers;
};
infoTiddlerFields.push.apply(infoTiddlerFields,getResultTiddlers());
mqList.addListener(function(event) {
updateInfoTiddlersCallback(getResultTiddlers());
});
}
}
});
}
return infoTiddlerFields;
};
})();

7
core/modules/info/platform.js
View File

@ -36,13 +36,6 @@ exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
// Screen size
infoTiddlerFields.push({title: "$:/info/browser/screen/width", text: window.screen.width.toString()});
infoTiddlerFields.push({title: "$:/info/browser/screen/height", text: window.screen.height.toString()});
// Dark mode through event listener on MediaQueryList
var mqList = window.matchMedia("(prefers-color-scheme: dark)"),
getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};};
infoTiddlerFields.push(getDarkModeTiddler());
mqList.addListener(function(event) {
updateInfoTiddlersCallback([getDarkModeTiddler()]);
});
// Language
infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""});
}

5
core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid Normal file
View File

@ -0,0 +1,5 @@
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

7
editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid
View File

@ -4,8 +4,8 @@ tags: Mechanisms
title: InfoMechanism
type: text/vnd.tiddlywiki
\define example(name)
<$transclude tiddler="""$:/info/url/$name$""" mode="inline"/>
\procedure example(name)
<$text text={{{ [[$:/info/url/]addsuffix<name>get[text]] }}} />
\end
System tiddlers in the namespace `$:/info/` are used to expose information about the system (including the current browser) so that WikiText applications can adapt themselves to available features.
@ -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") |
|[[$:/info/darkmode]] |<<.deprecated-since "5.3.6">> Alias for $:/info/browser/darkmode |
|[[$:/info/node]] |Running under [[Node.js]]? ("yes" or "no") |
|[[$:/info/url/full]] |<<.from-version "5.1.14">> Full URL of wiki (eg, ''<<example full>>'') |
|[[$:/info/url/host]] |<<.from-version "5.1.14">> Host portion of URL of wiki (eg, ''<<example host>>'') |
@ -28,4 +30,3 @@ System tiddlers in the namespace `$:/info/` are used to expose information about
|[[$:/info/url/port]] |<<.from-version "5.1.14">> Port portion of URL of wiki (eg, ''<<example port>>'') |
|[[$:/info/url/protocol]] |<<.from-version "5.1.14">> Protocol portion of URL of wiki (eg, ''<<example protocol>>'') |
|[[$:/info/url/search]] |<<.from-version "5.1.14">> Search portion of URL of wiki (eg, ''<<example search>>'') |
|[[$:/info/darkmode]] |<<.from-version "5.1.23">> Is dark mode enabled? ("yes" or "no") |

8
editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid Normal file
View File

@ -0,0 +1,8 @@
title: MediaQueryTrackerMechanism
tags: Mechanisms
The media query tracker mechanism allows you to define [[custom CSS media queries|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries]] to be bound to a specified [[info|InfoMechanism]] tiddler. The info tiddler will be dynamically update to reflect the current state of the media query.
Adding or modifying a tiddler tagged $:/tags/MediaQueryTracker will only take effect when the wiki is reloaded
The media queries are always applied against the main window. This is relevant for viewport related media queries such as `min-width` which will always respect the main window and ignore the sizes of any external windows.