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

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

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

info

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

success

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

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`

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://bitbucket.org/wackowiki/wackowiki/src/master/community/formatter/highlight/colorbox.php
[link3] https://bitbucket.org/wackowiki/wackowiki/src/master/community/formatter/highlight/template/colorbox.tpl
[link4] https://wackowiki.org/doc/Dev/PatchesHacks#a-1448