WackoWiki: Formatter: Colorbox

https://wackowiki.org/doc     Version: 16 (23.11.2022 16:31)

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   

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   

3. Changelog

0.1 Initial
0.3 added sanitizer
0.4 added template

4. To Do


Referring pages:

  1. Dev/PatchesHacks[link4]