Formatter: Colorbox

Compatible with: R6.x
Current version: 0.4
Credits: WikiAdmin^[link1]

visualize color sets as boxes, not thought as infoboxes

1. Action

{{colorbox}}

/action/colorbox.php

PHP

<?php

if (!defined('IN_WACKO'))
{
	exit;
}

/*

visualize color sets as boxes

{{colorbox bg_color="#FDFEB8" border_color="#FFBB00"}}
	$bg_color		- background color
	$border_color		- border color
	$text				- description
	$text_color			- text color
	$border_width		- border width
	$width				- width
	$spec				- show color values
*/

// set defaults
$text				??= null;
$border_width		??= '1px';
$bg_color		??= '#ffa';
$border_color		??= '#000000';
$text_color			??= '#000000';
$width				??= '200px';
$spec				??= 1;

$sanitize = function($value, $filter)
{
	switch ($filter)
	{
		case 'color':
			if (preg_match('/^(
				(\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))|		# color value
				(rgb\(([0-9]{1,3}%?,){2}[0-9]{1,3}%?\))		# rgb triplet
				)$/x', $value))
			{
				return $value;
			}
			break;
		case 'width':
			if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $value))
			{
				return $value;
			}
		case 'class':
			if (preg_match('/[^A-Za-z0-9_-]/', $value))
			{
				return $value;
			}
			break;
	}
};

$bgcolor			=
$tpl->s_bgcolor		= $sanitize($bg_color, 'color');
$tpl->s_bdwidth		= $sanitize($border_width, 'width');
$bdcolor			=
$tpl->s_bdcolor		= $sanitize($border_color, 'color');
$tpl->s_width		= $sanitize($width, 'width');
$color				=
$tpl->s_color		= $sanitize($text_color, 'color');
$tpl->text			= $this->format($text);

if ($spec)
{
	$tpl->spec_xbgcolor		= $bgcolor;
	$tpl->spec_xbdcolor		= $bdcolor;
	$tpl->spec_xcolor		= $color;
}

/action/template/colorbox.tpl

[ === main === ]
	<div style="[ ' s style ' ]">
	[ ' text ' ]
	[= spec _ =
		<br>
		background: [ ' xbgcolor ' ]<br>
		border: 	[ ' xbdcolor ' ]<br>
		color: 		[ ' xcolor ' ]
	=]
	</div>

[ === style === ]
background-color: [ ' bgcolor ' ];
border: [ ' bdwidth ' ] solid [ ' bdcolor ' ];
width: [ ' width ' ];
clear: both;
margin: 10px 0;
padding: 10px;
color: [ ' color ' ];
float: left;

1.1. local usage of repository

Symlink the formatter from community folder in the src/action folder and the corresponding template in the src/action/template folder in your repo.

ln -s ../../community/action/colorbox.php colorbox.php
ln -s ../../../community/action/template/colorbox.tpl colorbox.tpl

1.2. Example

info
background: #FFFFE0
border: #E6DB55
color: #000000

success
background: #C3FF88
border: #8DFF1C
color: #000000

ok
background: #FFEC8B
border: #FFCC00
color: #000000

error
background: #FFB78C
border: #FF853C
color: #000000

error
background: #FFA0A0
border: #F04040
color: #000000

info
background: #FFFBCC
border: #E6DB55
color: #000000

message
background: #DDFFDD
border: #BBFFBB
color: #000000

info
background: #DDEEFF
border: #99CCFF
color: #000000

warning
background: #FDFEB8
border: #FFBB00
color: #000000

error
background: #FFDDDD
border: #FFBBBB
color: #000000

2. Formatter

%%(colorbox) %%

formatter/highlight/colorbox.php^[link2]

PHP

<?php

if (!defined('IN_WACKO'))
{
	exit;
}

/*

visualize color sets as boxes

%%(colorbox bg_color="#FDFEB8" border_color="#FFBB00") %%
	bg_color			- background color
	border_color		- border color
	text				- description
	text_color			- text color
	border_width		- border width
	width				- width
	spec				- show color values
*/

// set defaults
$text						??= null;
$options['border_width']	??= '1px';
$options['bg_color']		??= '#ffa';
$options['border_color']	??= '#000000';
$options['text_color']		??= '#000000';
$options['width']			??= '200px';
$options['spec']			??= 1;

$sanitize = function($value, $filter)
{
	switch ($filter)
	{
		case 'color':
			if (preg_match('/^(
				(\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))|		# color value
				(rgb\(([0-9]{1,3}%?,){2}[0-9]{1,3}%?\))		# rgb triplet
				)$/x', $value))
			{
				return $value;
			}
			break;
		case 'width':
			if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $value))
			{
				return $value;
			}
		case 'class':
			if (preg_match('/[^A-Za-z0-9_-]/', $value))
			{
				return $value;
			}
			break;
	}
};

$bgcolor			=
$tpl->s_bgcolor		= $sanitize($options['bg_color'], 'color');
$tpl->s_bdwidth		= $sanitize($options['border_width'], 'width');
$bdcolor			=
$tpl->s_bdcolor		= $sanitize($options['border_color'], 'color');
$tpl->s_width		= $sanitize($options['width'], 'width');
$color				=
$tpl->s_color		= $sanitize($options['text_color'], 'color');
$tpl->text			= $this->format($text);

if ($options['spec'])
{
	$css['background']	= $bgcolor;
	$css['border']		= $bdcolor;
	$css['color']		= $color;

	foreach ($css as $style => $value)
	{
		$tpl->spec_n_style		= $style;
		$tpl->spec_n_value		= $value;
	}
}

formatter/highlight/template/colorbox.tpl^[link3]

[ === main === ]
<ignore>
<!--notypo-->
	<div style="[ ' s css ' ]">
	[ ' text ' ]
	[= spec _ =
		<table class="usertable">
			[= n _ =
				<tr>
					<th>[ ' style ' ]:</th>
					<td><code>[ ' value ' ]</code></td>
					<td style="background-color: [ ' value ' ]">&nbsp;&nbsp;</td>
				</tr>
			=]
		</table>
	=]
	</div>
<!--/notypo-->
</ignore>

[ === css === ]
background-color: [ ' bgcolor ' ];
border: [ ' bdwidth ' ] solid [ ' bdcolor ' ];
width: [ ' width ' ];
clear: both;
margin: 10px 0;
padding: 10px;
color: [ ' color ' ];
float: left;

2.1. local usage of repository

Symlink the formatter from community folder in the src/action folder and the corresponding template in the src/action/template folder in your repo.

ln -s ../../../community/formatter/highlight/colorbox.php colorbox.php
ln -s ../../../../community/formatter/highlight/template/colorbox.tpl colorbox.tpl

2.2. Example

Formatter highlight/colorbox not found

3. Changelog

0.1 Initial
0.3 added sanitizer
0.4 added template

4. To Do

actually this is more a example for a formatter, there are currently no dynamic elements in it
modify the action (formatter) for your purpose

Referring pages:

Dev/PatchesHacks^[link4]

Links

[link1] https://wackowiki.org/doc/Users?profile=WikiAdmin
[link2] https://codeberg.org/WackoWiki/wackowiki/src/branch/master/community/formatter/highlight/colorbox.php
[link3] https://codeberg.org/WackoWiki/wackowiki/src/branch/master/community/formatter/highlight/template/colorbox.tpl
[link4] https://wackowiki.org/doc/Dev/PatchesHacks#a-1448