diff --git a/core/modules/info/mediaquerytracker.js b/core/modules/info/mediaquerytracker.js new file mode 100644 index 000000000..3750b6c33 --- /dev/null +++ b/core/modules/info/mediaquerytracker.js @@ -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; +}; + +})(); diff --git a/core/modules/info/platform.js b/core/modules/info/platform.js index 0eb0b9ea8..5021610f4 100644 --- a/core/modules/info/platform.js +++ b/core/modules/info/platform.js @@ -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 || ""}); } diff --git a/core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid b/core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid new file mode 100644 index 000000000..bc3cfa3e1 --- /dev/null +++ b/core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid @@ -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 diff --git a/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid b/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid index 040dd7bd2..ffd3377a9 100644 --- a/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid +++ b/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid @@ -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/]addsuffixget[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, ''<>'') | |[[$:/info/url/host]] |<<.from-version "5.1.14">> Host portion of URL of wiki (eg, ''<>'') | @@ -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, ''<>'') | |[[$:/info/url/protocol]] |<<.from-version "5.1.14">> Protocol portion of URL of wiki (eg, ''<>'') | |[[$:/info/url/search]] |<<.from-version "5.1.14">> Search portion of URL of wiki (eg, ''<>'') | -|[[$:/info/darkmode]] |<<.from-version "5.1.23">> Is dark mode enabled? ("yes" or "no") | diff --git a/editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid b/editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid new file mode 100644 index 000000000..e33a129b9 --- /dev/null +++ b/editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid @@ -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.