JQAutoColorContrib.txt

%META:TOPICINFO{author="ProjectContributor" comment="" date="1574081930" format="1.1"  version="1"}%
---+!! %TOPIC%
%FORMFIELD{"Description"}%

%TOC%

---++ Description

Sometimes assigning colors manually is a tendious task. How about assigning colors to various elements on a web page automatically based on the text content?
This is exactly what this javascript plugin does: you select an element and a source of text, which will then be mapped onto a color that is assigned to a
css property of the target element. The kind of color may be parametrized using a range of saturations, lightness and hues. The source text is then hashed
and mapped to a matching color.

---++ Examples

%JQREQUIRE{"autocolor" warn="off"}%

---+++ Colored text box
<div class='jqAutoColor paragraph' data-lightness='95'>
%IF{"context LoremIpsumPluginEnabled"
   then="$percntLOREM$percnt"
   else="Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima? Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi."
}%
</div>

---+++ Colored circles
%IF{"context AutoColorRegistered"
   then="<div style='width:460px'>
            $percntFORMAT{
               \"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,0,1,2,3,4,5,6,7,8,9,\"
               format=\"<div class='jqAutoColor circles'>$dollaritem</div>\"
               type=\"string\"
            }$percnt
         </div>"
   else="<img src='%ATTACHURLPATH%/example1.png' />"
}%
%CLEAR%

---+++ Color icons
<h4 class="jqAutoColor" data-property="color" data-source=".label" 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">
%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">
%JQICON{"fa-camera"}% <span class="label">Camera</span>
</h4>

---+++ Color boxes
<!--
   * Set SEED = abc
-->
%IF{"not context AutoColorRegistered"
   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%">
   <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%">
   <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%">
   <h3 class="jqAutoColor" data-lightness="85" data-seed="%SEED%">Tools & Services</h3>
   * <a>Articles</a>
   * <a>Blogs</a>
   * <a>Contacts</a>
   * <a>Manuals</a>
</div>
</div>

---+++ Gradient

<div class="jqAutoColor" data-soure="p" data-lightness="40" data-property="radial-gradient" style="padding:2em 2em 2em 5em">
<p class="foswikiLarge">Radial Me</p>
</div>

<literal>
<style>
.paragraph {
   padding:1em;
   background:rgb(232, 252, 245);
}
.circles {
   border-radius:50%;
   text-transform:uppercase;
   width:15px;
   line-height:15px;
   text-align:center;
   float:left;
   padding:15px;
   margin:0 5px 5px 0;
}
.container {
   display:flex;
   flex-wrap:wrap;
   margin-right:-15px;
}
.container .box {
   width:31%;
   margin:0 15px 15px 0;
   box-sizing:border-box; 
   padding:20px 20px 0 20px; 
   border:0; 
   background-color:#f4f4f4; 
}
.container .box h3 {
   margin:-20px -20px 0 !important;
   padding:15px 15px 10px;
}
.container .box ul {
   margin:15px 0 15px; 
   padding:0 0 0 25px;
}
</style>
</literal>
---++ Syntax

This is a pure javascript extension. So you need to use [[%SYSTEMWEB%.VarJQREQUIRE][JQREQUIRE]] to load the library to a page where you want to use it. Then add the css class =jqAutoColor= to an HTML element, e.g.

<verbatim class="html">
<div class="jqAutoColor" data-saturation='...' data-lightness='...' ... >
...
</div>
</verbatim>

Use HTML5 data parameters to specify parameters to the autoColor plugin. All parameters are optional.

| *Parameter* | *Description* | *Default* |
| source  | jQuery selector of an element to extract text data from | current element |
| target | jQuery selector of the element to colorize | current element |
| text | string to derive a color from | text content of the target element |
| seed | additional string to be appended to the source text to seed the hash process when computing a color hue | 0 |
| property | css property to apply the generated color to; \
             if left undefined the background color will be changed while also setting the forground color to a matching value: =dark= or =light= based on the darkness of the background tint; \
             if set to =radial-gradient= generate a two-color background gradient using the =shift-color= parameter to compute the second color | background |
| dark | whill be used to select a matching foreground color when the css property is left undefined | #222 |
| light | whill be used to select a matching foreground color when the css property is left undefined | #fff |
| hue-from | hue range start which to select colors from | 0 |
| hue-to | hue range end which to select colors from | 359 |
| saturation | string or array of saturation values  | [50,65,80] |
| lightness | string or array of lightness values | [50,65,80] |
| shift-color | array of rgb values to create a secondary color based on the first in gradient backgrounds | [-10,-10,-20] |

---++ Installation Instructions

%$INSTALL_INSTRUCTIONS%

---++ Dependencies

%$DEPENDENCIES%

---++ Change History

%TABLE{columnwidths="7em" tablewidth="100%"}%
|  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 |
|  28 Mar 2018 | initial release |

%META:FORM{name="PackageForm"}%
%META:FIELD{name="Author" title="Author" value="Michael Daum"}%
%META:FIELD{name="Version" title="Version" value="%25$VERSION%25"}%
%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="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"}%
%META:FILEATTACHMENT{name="example1.png" attachment="examples.png" attr="" comment="" date="1574081930" size="41482" user="ProjectContributor" version="1"}%
%META:FILEATTACHMENT{name="example2.png" attachment="example2.png" attr="" comment="" date="1574081930" size="30362" user="ProjectContributor" version="1"}%