cross
New Foswiki release 2.1.6 is available with important security fixes.
Sourceforge foswiki email lists being discontinued. Subscribe to the new Foswiki announce and discuss lists at MailingLists
TIP JQAutoColorContrib is not installed on Foswiki.org.

JQAutoColorContrib

Assign colors automatically based on text properties

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

Colored text box

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.

Colored circles

example1.png

Color icons

Certificate

Check

Camera

Color boxes

example2.png

Syntax

This is a pure javascript extension. So you need to use 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.

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

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 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]

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

None

Change History

28 Mar 2018 initial release

Topic revision: r1 - 28 Mar 2018, MichaelDaum - This page was cached on 09 Jul 2018 - 21:07.

The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy