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

Update contrastcolour macro to use color.js

Browse Source
This commit is contained in:
Jeremy Ruston 2024-11-16 14:37:14 +00:00
parent 809465b6e2
commit cfabc92945
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
core/modules/macros/contrastcolour.js
View File

@ -29,27 +29,28 @@ exports.params = [
Run the macro Run the macro
*/ */
exports.run = function(target,fallbackTarget,colourA,colourB) { exports.run = function(target,fallbackTarget,colourA,colourB) {
var rgbTarget = $tw.utils.parseCSSColor(target) || $tw.utils.parseCSSColor(fallbackTarget); var rgbTarget = $tw.utils.parseCSSColorObject(target) || $tw.utils.parseCSSColorObject(fallbackTarget);
if(!rgbTarget) { if(!rgbTarget) {
return colourA; return colourA;
} }
var rgbColourA = $tw.utils.parseCSSColor(colourA), var rgbColourA = $tw.utils.parseCSSColorObject(colourA),
rgbColourB = $tw.utils.parseCSSColor(colourB); rgbColourB = $tw.utils.parseCSSColorObject(colourB);
if(rgbColourA && !rgbColourB) { if(rgbColourA && !rgbColourB) {
return rgbColourA; return colourA;
} }
if(rgbColourB && !rgbColourA) { if(rgbColourB && !rgbColourA) {
return rgbColourB; return colourB;
} }
if(!rgbColourA && !rgbColourB) { if(!rgbColourA && !rgbColourB) {
// If neither colour is readable, return a crude inverse of the target // If neither colour is readable, return a crude inverse of the target
return [255 - rgbTarget[0],255 - rgbTarget[1],255 - rgbTarget[2],rgbTarget[3]]; rgbTarget.srgb.r = 1 - rgbTarget.srgb.r;
rgbTarget.srgb.g = 1 - rgbTarget.srgb.g;
rgbTarget.srgb.b = 1 - rgbTarget.srgb.b;
return rgbTarget.display();
} }
// Colour brightness formula derived from http://www.w3.org/WAI/ER/WD-AERT/#color-contrast var aContrast = rgbColourA.contrast(rgbTarget,"DeltaPhi"),
var brightnessTarget = rgbTarget[0] * 0.299 + rgbTarget[1] * 0.587 + rgbTarget[2] * 0.114, bContrast = rgbColourB.contrast(rgbTarget,"DeltaPhi");
brightnessA = rgbColourA[0] * 0.299 + rgbColourA[1] * 0.587 + rgbColourA[2] * 0.114, return aContrast > bContrast ? colourA : colourB;
brightnessB = rgbColourB[0] * 0.299 + rgbColourB[1] * 0.587 + rgbColourB[2] * 0.114;
return Math.abs(brightnessTarget - brightnessA) > Math.abs(brightnessTarget - brightnessB) ? colourA : colourB;
}; };
})(); })();

3
core/modules/utils/dom/color-utils.js
View File

@ -32,8 +32,7 @@ exports.parseCSSColor = function(colourString) {
Preferred way to parse a Color.js colour Preferred way to parse a Color.js colour
*/ */
exports.parseCSSColorObject = function(colourString) { exports.parseCSSColorObject = function(colourString) {
var Color = require("$:/core/modules/utils/dom/color.js").Color, var c = null;
c = null;
try { try {
c = new Color(colourString); c = new Color(colourString);
} catch(e) { } catch(e) {

12
editions/test/tiddlers/tests/data/macros/contrastcolour/ContrastColourBasic.tid Normal file
View File

@ -0,0 +1,12 @@
title: Macros/ContrastColour/ContrastColourBasic
description: Basic usage of contrastcolour macro
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
Colour: <<contrastcolour target:#1e90ff fallbackTarget:#eecc66 colourA:#333333 colourB:#ffffff>>
+
title: ExpectedResult
<p>Colour: #ffffff</p>