Skip to content

Commit

Permalink
Item15262: fixed matching foreground color
Browse files Browse the repository at this point in the history
  • Loading branch information
@MichaelDaum
MichaelDaum committed Jan 22, 2024
1 parent eb321a3 commit e085d6b
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 28 deletions.
15 changes: 8 additions & 7 deletions data/System/JQAutoColorContrib.txt
View file
Expand Up @@ -37,13 +37,13 @@ and mapped to a matching color.
%CLEAR%

---+++ Color icons
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-target=".jqIcon" data-lightness="50" data-seed="123">
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-source-context="this" data-target=".jqIcon" data-lightness="50" data-seed="123">
%JQICON{"fa-certificate"}% <span class="label">Certificate</span>
</h4>
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-target=".jqIcon" data-lightness="50" data-seed="123">
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-source-context="this" data-target=".jqIcon" data-lightness="50" data-seed="123">
%JQICON{"fa-check-circle"}% <span class="label">Check</span>
</h4>
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-target=".jqIcon" data-lightness="50" data-seed="123">
<h4 class="jqAutoColor" data-property="color" data-source=".label" data-source-context="this" data-target=".jqIcon" data-lightness="50" data-seed="123">
%JQICON{"fa-camera"}% <span class="label">Camera</span>
</h4>

Expand All @@ -55,21 +55,21 @@ and mapped to a matching color.
then="<img src='%ATTACHURLPATH%/example2.png' />"
}%
<div class="%IF{"not context AutoColorRegistered" then="foswikiHidden" else="container"}%">
<div class="jqAutoColor box" data-source="h3" data-lightness="90" data-seed="%SEED%">
<div class="jqAutoColor box" data-source="h3" data-source-context="this" data-lightness="90" data-seed="%SEED%">
<h3 class="jqAutoColor" data-lightness="85" data-seed="%SEED%">Corporate</h3>
* <a>Business Structure</a>
* <a>Customers</a>
* <a>Employee Directory</a>
* <a>Our Company</a>
</div>
<div class="jqAutoColor box" data-source="h3" data-lightness="90" data-seed="%SEED%">
<div class="jqAutoColor box" data-source="h3" data-source-context="this" data-lightness="90" data-seed="%SEED%">
<h3 class="jqAutoColor" data-lightness="85" data-seed="%SEED%">Departments</h3>
* <a>Finance & Planning</a>
* <a>Human Resources</a>
* <a>IT</a>
* <a>Legal</a>
</div>
<div class="jqAutoColor box" data-source="h3" data-lightness="90" data-seed="%SEED%">
<div class="jqAutoColor box" data-source="h3" data-source-context="this" data-lightness="90" data-seed="%SEED%">
<h3 class="jqAutoColor" data-lightness="85" data-seed="%SEED%">Tools & Services</h3>
* <a>Articles</a>
* <a>Blogs</a>
Expand Down Expand Up @@ -162,6 +162,7 @@ Use HTML5 data parameters to specify parameters to the autoColor plugin. All par
---++ Change History

%TABLE{columnwidths="7em" tablewidth="100%"}%
| 31 Aug 2022 | fixed computation of matching foreground color |
| 04 May 2022 | fix setting properties other than the background |
| 18 Nov 2019 | implement auto-generated gradient backgrounds |
| 01 Jul 2019 | skip auto-color if text is empty |
Expand All @@ -173,7 +174,7 @@ Use HTML5 data parameters to specify parameters to the autoColor plugin. All par
%META:FIELD{name="Release" title="Release" value="%25$RELEASE%25"}%
%META:FIELD{name="Description" title="Description" value="%25$SHORTDESCRIPTION%25"}%
%META:FIELD{name="Repository" title="Repository" value="https://github.com/foswiki/JQAutoColorContrib"}%
%META:FIELD{name="Copyright" title="Copyright" value="2018-2022, Michael Daum, All Rights Reserved"}%
%META:FIELD{name="Copyright" title="Copyright" value="2018-2024, Michael Daum, All Rights Reserved"}%
%META:FIELD{name="License" title="License" value="GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]])"}%
%META:FIELD{name="Home" title="Home" value="https://foswiki.org/Extensions/JQAutoColorContrib"}%
%META:FIELD{name="Support" title="Support" value="https://foswiki.org/Support/JQAutoColorContrib"}%
Expand Down
9 changes: 4 additions & 5 deletions lib/Foswiki/Contrib/JQAutoColorContrib.pm
View file
@@ -1,6 +1,6 @@
# Extension for Foswiki - The Free and Open Source Wiki, http://foswiki.org/
#
# JQAutoColorContrib is Copyright (C) 2018-2022 Michael Daum http://michaeldaumconsulting.com
# JQAutoColorContrib is Copyright (C) 2018-2024 Michael Daum http://michaeldaumconsulting.com
#
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
Expand All @@ -18,11 +18,10 @@ package Foswiki::Contrib::JQAutoColorContrib;
use strict;
use warnings;

use Foswiki::Func ();

our $VERSION = '2.01';
our $RELEASE = '04 May 2022';
our $VERSION = '3.10';
our $RELEASE = '%$RELEASE%';
our $SHORTDESCRIPTION = 'Assign colors automatically based on text properties';
our $LICENSECODE = '%$LICENSECODE%';
our $NO_PREFS_IN_TOPIC = 1;

1;
2 changes: 1 addition & 1 deletion lib/Foswiki/Contrib/JQAutoColorContrib/Core.pm
View file
@@ -1,6 +1,6 @@
# Extension for Foswiki - The Free and Open Source Wiki, http://foswiki.org/
#
# JQAutoColorContrib is Copyright (C) 2018-2022 Michael Daum http://michaeldaumconsulting.com
# JQAutoColorContrib is Copyright (C) 2018-2024 Michael Daum http://michaeldaumconsulting.com
#
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
Expand Down
2 changes: 1 addition & 1 deletion pub/System/JQAutoColorContrib/src/autocolor.uncompressed.css
View file
@@ -1,3 +1,3 @@
.jqAutoColor > a {
.jqAutoColor a {
color:inherit;
}
98 changes: 84 additions & 14 deletions pub/System/JQAutoColorContrib/src/autocolor.uncompressed.js
View file
@@ -1,7 +1,7 @@
/*
* jQuery auto-color plugin 2.00
* jQuery auto-color plugin 3.20
*
* Copyright (c) 2018-2022 Michael Daum http://michaeldaumconsulting.com
* Copyright (c) 2018-2024 Michael Daum http://michaeldaumconsulting.com
*
* Licensed under the GPL license http://www.gnu.org/licenses/gpl.html
*
Expand All @@ -15,6 +15,7 @@
var defaults = {
text: undefined,
source: undefined,
sourceContext: undefined,
target: undefined,
property: undefined,
saturation: [50,65,80],
Expand All @@ -36,11 +37,19 @@
// gather opts by merging global defaults, plugin defaults and element defaults
self.opts = $.extend({}, defaults, self.elem.data(), opts);

if (typeof(self.opts.text) === 'undefined') {
if (typeof(self.opts.text) === 'undefined' || self.opts.text === "") {
if (typeof(self.opts.source) === 'undefined') {
self.sourceElem = self.elem;
} else {
self.sourceElem = self.elem.find(self.opts.source);
if (typeof(self.opts.sourceContext) === 'undefined') {
self.sourceElem = $(self.opts.source);
} else {
if (self.opts.sourceContext === 'this') {
self.sourceElem = self.elem.find(self.opts.source);
} else {
self.sourceElem = $(self.opts.sourceContext).find(self.opts.source);
}
}
}
self.sourceElem.on("input", function() {
self.init();
Expand All @@ -60,15 +69,20 @@
AutoColor.prototype.init = function () {
var self = this, text, hsl;

if (typeof(self.opts.text) !== 'undefined') {
if (typeof(self.opts.text) === 'string' && self.opts.text !== "") {
text = self.opts.text;

} else {
text = $.map(self.sourceElem, function(elem) {
var $elem = $(elem);
var $elem = $(elem), text;
if ($elem.is("input")) {
return $elem.val();
text = $elem.val();
} else {
return $elem.text();
text = $elem.text();
}
text = text.trim()
if (text !== '') {
return text;
}
}).join(" ");
}
Expand All @@ -84,6 +98,7 @@
text = text.replace(/^\s*|\s*$/g, "");

if (!text.length) {
console.warn("no text found to auto-color");
return;
}

Expand All @@ -104,9 +119,8 @@
}
} else {
self.target
.addClass("jqAutoColor")
.css("background", self.formatHSL(hsl))
.css("color", self.getMatchingForeground());
.css("color", self.getMatchingForeground(hsl));
}
};

Expand Down Expand Up @@ -179,12 +193,18 @@
return "hsl("+hsl[0]+","+hsl[1]+"%,"+hsl[2]+"%)";
};

AutoColor.prototype.getMatchingForeground = function(rgb) {
var self = this;
AutoColor.prototype.getMatchingForeground = function(hsl) {
var self = this,
rgb;

if (typeof(rgb) !== 'object') {
rgb = rgb || self.target.css("background-color");
if (typeof(hsl) === 'undefined') {
rgb = self.target.css("background-color");
rgb = rgb.match(/\d+/g);
} else {
if (typeof(hsl) !== 'object') {
hsl = rgb.match(/\d+/g);
}
rgb = self.hslToRgb(hsl);
}

return self.isLight(rgb) ? self.opts.dark: self.opts.light;
Expand All @@ -197,6 +217,56 @@
return yiq > 128;
};

AutoColor.prototype.hslToRgb = function(hsl) {
var self = this,
t1, t2,
r, g, b,
hue, sat, light;

hue = hsl[0] / 60;;
sat = hsl[1] > 1 ? hsl[1] / 100 : hsl[1];
light = hsl[2] > 1 ? hsl[2] / 100 : hsl[2];

if ( light <= 0.5 ) {
t2 = light * (sat + 1);
} else {
t2 = light + sat - (light * sat);
}

t1 = light * 2 - t2;
r = self.hueToRgb(t1, t2, hue + 2) * 255;
g = self.hueToRgb(t1, t2, hue) * 255;
b = self.hueToRgb(t1, t2, hue - 2) * 255;

return [r, g, b];
};

AutoColor.prototype.hueToRgb = function(t1, t2, hue) {
self = this;

if (hue < 0) {
hue += 6;
}

if (hue >= 6) {
hue -= 6;
}

if (hue < 1) {
return (t2 - t1) * hue + t1;
}

if (hue < 3) {
return t2;
}

if (hue < 4) {
return (t2 - t1) * (4 - hue) + t1;
}

return t1;
};

// A plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn.autoColor = function (opts) {
Expand Down

0 comments on commit e085d6b

Please sign in to comment.