ONO::Lib::UI::Check
package ONO::Lib::UI::Check;
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
use ONO::IO;
#: ONO_Lib_UI_Check offers replacements for HTML checkboxes and other on/off
#: elements. Whhile the checkbox function is a direct replacement for the
#: HTML checkbox element, you will nevertheless use the switch function in
#: most cases.
#:
#: Note that most functions are scriptable via ONO/JS.
###############################################################################
# box
###############################################################################
sub box {
#: Check box with rounded edges.
#:
#: Switches:
#:
#: -C display check symbol
my (
$self,
$id,
$text,
$sel,
$switches,
) = @_;
my $color = "paper";
if ($sel) {
$color = "green";
}
my $CONTENT = $text;
if ($switches =~ /C/) {
my $TRANS;
if ($sel < 1) {
$TRANS = " trans30";
}
$CONTENT = qq~<img id="ono_onoff_box_$id\_check" class="block16 mr5 mt2 fl$TRANS" src="/ono/osr/images/icons/crystal/16x16/actions/ok.png" alt="">$text~;
}
return qq~<div id="ono_onoff_box_$id\_box" class="box_$color pad10_2 fl mr5 mb5 cursorlink noselect" onclick="onojs_onoff_box_toggle('$id');">$CONTENT</div>
<input type="hidden" id="ono_onoff_box_$id\_id" name="ono_onoff_box_$id" value="$sel">
<input type="hidden" name="ono_onoff_box_$id\_text" value="$text">
~;
}
###############################################################################
# checkbox
###############################################################################
sub checkbox {
#: ONO checkbox. Also see switch(), which looks better and offers many more
#: options.
#:
#: Switches:
#:
#: -C counter mode - uses 'ono_ui_checkbox_counter_$option' instead of
#: '${id}_id' as ID, which may render mutli-selection easier on some
#: occasions
#: -d disable
#: -G green checkbox (on)
#: -R red checkbox (off)
my (
$self,
$id,
$checked,
$switches,
$option,
) = @_;
my @hide = ('',' hide');
if ($checked) {
@hide = (' hide','');
}
my $ID = "${id}_id";
if ($switches =~ /C/) {
$ID = "ono_ui_checkbox_counter_$option";
}
my $COLOR0 = "dark";
my $COLOR1 = "blue";
my ($ONCLICK1,$ONCLICK2);
if ($switches !~ /d/) {
$ONCLICK1 = "onojs_ui_checkbox_enable('${ID}');";
$ONCLICK2 = "onojs_ui_checkbox_disable('${ID}');";
}
if ($switches =~ /R/) {
$COLOR0 = "red";
}
if ($switches =~ /G/) {
$COLOR1 = "green";
}
my $CHK = qq~<div id="ono_ui_checkbox_${ID}_off" class="button_$COLOR0 p0 bo block16 radius10 trans20$hide[0]" onclick="$ONCLICK1">
<div class="bg_paper block10 radius5 auto" style="width:6px;height:6px;margin-top:5px"></div>
</div>
<div id="ono_ui_checkbox_${ID}_on" class="button_$COLOR1 p0 bo block16 radius10$hide[1]" onclick="$ONCLICK2">
<div class="bg_paper block10 radius5 auto" style="width:6px;height:6px;margin-top:5px"></div>
</div>
<input type="hidden" id="$ID" name="$id" value="$checked">
~;
return $CHK;
}
###############################################################################
# switch(es)
###############################################################################
sub switches {
#: Generate a number of usable switches, while offering 2 select options:
#:
#: 1) check if $vars{$id} is set
#: 2) check if $id is 'id:somevalue'
#:
#: switches_switches can be used to transmit switches settings
my (
$self,
$vars_ref,
@ids,
) = @_;
my (%CHK,%vars);
if ($vars_ref) {
%vars = %$vars_ref;
}
foreach my $id (@ids) {
my $selected;
if ($vars{$id}) {
$selected++;
}
# 1-9 is important here, don't use 0-9, as 0 = OFF
if ($id =~ s~:(.*)$~~) {
if ($1 =~ /[A-Za-z1-9]/) {
$selected++;
}
}
$CHK{$id} = &switch("",$id,$selected,$vars{'switches_switches'});
}
return %CHK;
}
sub switch {
#: ONO switch. Also see switches() and checkbox().
#:
#: Switches:
#:
#: -b border 2px
#: -B all Blue mode (opaque = on / transparent = off)
#: -c center
#: -C javascript: use $js as onChange
#: -d disabled (not clickable)
#: -D disabled, but not transparent
#: -G all Green mode (opaque = on / transparent = off)
#: -i invert (1 = off, 0 = on)
#: -I inline mode (make html wrap correctly)
#: -J javascript: use $js on click ON, $js2 on click OFF
#: -l left
#: -L use link instead of JS ($script_url required)
#: -m mini, also see -y
#: -M margin right 5px
#: -o use (NULL,on) instead of (0,1)
#: -O on/off style, looks a bit like a radio button
#: -r right
#: -R all Red mode (opaque = on / transparent = off)
#: -s make scriptable - adds js that allows to control the switch including $js and $js2 support,
#: you may also simply use onojs_ui_switch_on/off/toggle(id,opt) if $js and $js2 are not required, in this case -s is not required
#: -S adjust size by content + center content
#: -t margin top 2px (can be combined with -T)
#: -T margin top 5px (can be combined with -t)
#: -v vertical
#: -V use $string as value
#: -X display result as text input instead of hidden input (nice for debugging, devstation only)
#: -y micro, even smaller than -m
my (
$self,
$id,
$selected,
$switches,
$string,
$js,
$js2,
) = @_;
my ($ONCLICK1,$ONCLICK2,$CLASS,$SCRIPT,$ONCHANGE,$ON_ON,$ON_OFF);
my ($CLASS_ON,$CLASS_OFF) = ('button_green','button_red');
my @opts = (0,1);
if ($switches =~ /o/) {
@opts = ('','on');
}
if ($switches =~ /V/) {
@opts = ('',$string);
$string = "";
}
if ($switches =~ /i/) {
if ($selected) {
$selected = 0;
} else {
$selected = 1;
}
@opts = ($opts[1],$opts[0]);
}
my ($hide_on,$hide_off) = (" hide","");
if ($selected =~ /[A-Za-z1-9]/) {
$selected = $opts[1];
($hide_on,$hide_off) = (""," hide");
} else {
$selected = $opts[0];
}
my @size = (12,2,10);
my @margin = ('mr10','ml10');
if ($switches =~ /y/) {
@margin = ('mr5','ml5');
}
if ($string) {
@size = (16,0,10);
if ($switches !~ /S/) {
$string = qq~<div class="rel block16 center" style="top:-1px;left:-1px">$string</div>~;
}
}
if ($switches =~ /m/) {
@size = (8,0,5);
}
if ($switches =~ /O/) {
@size = (5,5,5);
@margin = ('','');
$CLASS_OFF = "button_dark trans30";
}
if ($switches =~ /v/) {
@margin = ('mb10','mt10');
if ($switches =~ /y/) {
@margin = ('mb5','mt5');
}
}
if ($switches =~ /d/i) {
if ($switches !~ /D/) {
$CLASS = " trans50";
}
} else {
if ($switches =~ /C/) {
$ONCHANGE = $js;
}
if ($switches =~ /J/) {
$ON_ON = $js;
$ON_OFF = $js2;
}
($ONCLICK1,$ONCLICK2) = (
qq~onclick = "onojs_hide('${id}_opt_on');onojs_inline('${id}_opt_off');document.getElementById('${id}_id').value='$opts[0]';$ONCHANGE$ON_OFF"~,
qq~onclick = "onojs_inline('${id}_opt_on');onojs_hide('${id}_opt_off');document.getElementById('${id}_id').value='$opts[1]';$ONCHANGE$ON_ON"~,
);
}
if ($switches =~ /B/) {
($CLASS_ON,$CLASS_OFF) = ('button_blue','button_blue trans50');
}
if ($switches =~ /G/) {
($CLASS_ON,$CLASS_OFF) = ('button_green','button_green trans50');
}
if ($switches =~ /R/) {
($CLASS_ON,$CLASS_OFF) = ('button_red','button_red trans50');
}
if ($switches =~ /s/) {
my $id2 = $id;
$id2 =~ s~(\/|\.)~__~g;
$SCRIPT = qq~<script>
function ono_ui_switch_${id2}_on() {
onojs_inline('${id}_opt_on');onojs_hide('${id}_opt_off');
document.getElementById('${id}_id').value='$opts[1]';
$js;
}
function ono_ui_switch_${id2}_off() {
onojs_hide('${id}_opt_on');onojs_inline('${id}_opt_off');
document.getElementById('${id}_id').value='$opts[0]';
$js2;
}
function ono_ui_switch_${id2}_toggle() {
if (onojs_getvalue('${id}_id') == '$opts[1]') {
ono_ui_switch_${id2}_off();
} else {
ono_ui_switch_${id2}_on()
}
}
</script>
~;
}
my ($STYLE1,$STYLE2,$STYLE3,$CENTER);
if ($switches =~ /b/) {
$STYLE1 = ";border:2px solid #339933";
$STYLE2 = ";border:2px solid #993333";
$size[0] = 5;
}
if ($switches =~ /S/) {
my $wi1 = 15+(length $string)*10;
my $wi2 = $wi1 - 10;
$STYLE1 .= qq~width:${wi1}px~;
$STYLE2 .= qq~width:${wi1}px~;
$STYLE3 = qq~ style="width:${wi2}px;text-align:center"~;
}
my $HIDDEN = "hidden";
if ($switches =~ /X/ && ONO::IO->devstation) {
$HIDDEN = "text";
$SCRIPT .= qq~<div class="small col9 italic">${id}_id</div>~;
}
my $WEB = qq~<div id="${id}_opt_on" class="rel noselect p0 bo radius$size[2] $CLASS_ON$hide_on$CLASS" style="margin:0px$STYLE1" $ONCLICK1>
<div class="p$size[1]"><div class="block$size[0] bo radius$size[2] bg_paper $margin[0] col3"$STYLE3>$string</div></div>
</div>
<div id="${id}_opt_off" class="rel noselect p0 bo radius$size[2] $CLASS_OFF$hide_off$CLASS" style="margin:0px$STYLE2" $ONCLICK2>
<div class="p$size[1]"><div class="block$size[0] bo radius$size[2] bg_paper $margin[1] lightred"$STYLE3>$string</div></div>
</div>
<input type="$HIDDEN" id="${id}_id" name="$id" value="$selected">
$SCRIPT
~;
if ($switches =~ /t/) {
$WEB = qq~<div class="mt2">$WEB</div>~;
}
if ($switches =~ /T/) {
$WEB = qq~<div class="mt5">$WEB</div>~;
}
if ($switches =~ /M/) {
$WEB = qq~<div class="mr5">$WEB</div>~;
}
if ($switches =~ /r/) {
$WEB = qq~<div class="fr">$WEB</div>~;
}
if ($switches =~ /I/) {
$WEB = qq~<div class="inline">$WEB</div>~;
}
if ($switches =~ /c/) {
$WEB = qq~<div class="inline auto">$WEB</div>~;
}
return $WEB;
}
###############################################################################
# end of script
###############################################################################
1;
__END__
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
use ONO::IO;
#: ONO_Lib_UI_Check offers replacements for HTML checkboxes and other on/off
#: elements. Whhile the checkbox function is a direct replacement for the
#: HTML checkbox element, you will nevertheless use the switch function in
#: most cases.
#:
#: Note that most functions are scriptable via ONO/JS.
###############################################################################
# box
###############################################################################
sub box {
#: Check box with rounded edges.
#:
#: Switches:
#:
#: -C display check symbol
my (
$self,
$id,
$text,
$sel,
$switches,
) = @_;
my $color = "paper";
if ($sel) {
$color = "green";
}
my $CONTENT = $text;
if ($switches =~ /C/) {
my $TRANS;
if ($sel < 1) {
$TRANS = " trans30";
}
$CONTENT = qq~<img id="ono_onoff_box_$id\_check" class="block16 mr5 mt2 fl$TRANS" src="/ono/osr/images/icons/crystal/16x16/actions/ok.png" alt="">$text~;
}
return qq~<div id="ono_onoff_box_$id\_box" class="box_$color pad10_2 fl mr5 mb5 cursorlink noselect" onclick="onojs_onoff_box_toggle('$id');">$CONTENT</div>
<input type="hidden" id="ono_onoff_box_$id\_id" name="ono_onoff_box_$id" value="$sel">
<input type="hidden" name="ono_onoff_box_$id\_text" value="$text">
~;
}
###############################################################################
# checkbox
###############################################################################
sub checkbox {
#: ONO checkbox. Also see switch(), which looks better and offers many more
#: options.
#:
#: Switches:
#:
#: -C counter mode - uses 'ono_ui_checkbox_counter_$option' instead of
#: '${id}_id' as ID, which may render mutli-selection easier on some
#: occasions
#: -d disable
#: -G green checkbox (on)
#: -R red checkbox (off)
my (
$self,
$id,
$checked,
$switches,
$option,
) = @_;
my @hide = ('',' hide');
if ($checked) {
@hide = (' hide','');
}
my $ID = "${id}_id";
if ($switches =~ /C/) {
$ID = "ono_ui_checkbox_counter_$option";
}
my $COLOR0 = "dark";
my $COLOR1 = "blue";
my ($ONCLICK1,$ONCLICK2);
if ($switches !~ /d/) {
$ONCLICK1 = "onojs_ui_checkbox_enable('${ID}');";
$ONCLICK2 = "onojs_ui_checkbox_disable('${ID}');";
}
if ($switches =~ /R/) {
$COLOR0 = "red";
}
if ($switches =~ /G/) {
$COLOR1 = "green";
}
my $CHK = qq~<div id="ono_ui_checkbox_${ID}_off" class="button_$COLOR0 p0 bo block16 radius10 trans20$hide[0]" onclick="$ONCLICK1">
<div class="bg_paper block10 radius5 auto" style="width:6px;height:6px;margin-top:5px"></div>
</div>
<div id="ono_ui_checkbox_${ID}_on" class="button_$COLOR1 p0 bo block16 radius10$hide[1]" onclick="$ONCLICK2">
<div class="bg_paper block10 radius5 auto" style="width:6px;height:6px;margin-top:5px"></div>
</div>
<input type="hidden" id="$ID" name="$id" value="$checked">
~;
return $CHK;
}
###############################################################################
# switch(es)
###############################################################################
sub switches {
#: Generate a number of usable switches, while offering 2 select options:
#:
#: 1) check if $vars{$id} is set
#: 2) check if $id is 'id:somevalue'
#:
#: switches_switches can be used to transmit switches settings
my (
$self,
$vars_ref,
@ids,
) = @_;
my (%CHK,%vars);
if ($vars_ref) {
%vars = %$vars_ref;
}
foreach my $id (@ids) {
my $selected;
if ($vars{$id}) {
$selected++;
}
# 1-9 is important here, don't use 0-9, as 0 = OFF
if ($id =~ s~:(.*)$~~) {
if ($1 =~ /[A-Za-z1-9]/) {
$selected++;
}
}
$CHK{$id} = &switch("",$id,$selected,$vars{'switches_switches'});
}
return %CHK;
}
sub switch {
#: ONO switch. Also see switches() and checkbox().
#:
#: Switches:
#:
#: -b border 2px
#: -B all Blue mode (opaque = on / transparent = off)
#: -c center
#: -C javascript: use $js as onChange
#: -d disabled (not clickable)
#: -D disabled, but not transparent
#: -G all Green mode (opaque = on / transparent = off)
#: -i invert (1 = off, 0 = on)
#: -I inline mode (make html wrap correctly)
#: -J javascript: use $js on click ON, $js2 on click OFF
#: -l left
#: -L use link instead of JS ($script_url required)
#: -m mini, also see -y
#: -M margin right 5px
#: -o use (NULL,on) instead of (0,1)
#: -O on/off style, looks a bit like a radio button
#: -r right
#: -R all Red mode (opaque = on / transparent = off)
#: -s make scriptable - adds js that allows to control the switch including $js and $js2 support,
#: you may also simply use onojs_ui_switch_on/off/toggle(id,opt) if $js and $js2 are not required, in this case -s is not required
#: -S adjust size by content + center content
#: -t margin top 2px (can be combined with -T)
#: -T margin top 5px (can be combined with -t)
#: -v vertical
#: -V use $string as value
#: -X display result as text input instead of hidden input (nice for debugging, devstation only)
#: -y micro, even smaller than -m
my (
$self,
$id,
$selected,
$switches,
$string,
$js,
$js2,
) = @_;
my ($ONCLICK1,$ONCLICK2,$CLASS,$SCRIPT,$ONCHANGE,$ON_ON,$ON_OFF);
my ($CLASS_ON,$CLASS_OFF) = ('button_green','button_red');
my @opts = (0,1);
if ($switches =~ /o/) {
@opts = ('','on');
}
if ($switches =~ /V/) {
@opts = ('',$string);
$string = "";
}
if ($switches =~ /i/) {
if ($selected) {
$selected = 0;
} else {
$selected = 1;
}
@opts = ($opts[1],$opts[0]);
}
my ($hide_on,$hide_off) = (" hide","");
if ($selected =~ /[A-Za-z1-9]/) {
$selected = $opts[1];
($hide_on,$hide_off) = (""," hide");
} else {
$selected = $opts[0];
}
my @size = (12,2,10);
my @margin = ('mr10','ml10');
if ($switches =~ /y/) {
@margin = ('mr5','ml5');
}
if ($string) {
@size = (16,0,10);
if ($switches !~ /S/) {
$string = qq~<div class="rel block16 center" style="top:-1px;left:-1px">$string</div>~;
}
}
if ($switches =~ /m/) {
@size = (8,0,5);
}
if ($switches =~ /O/) {
@size = (5,5,5);
@margin = ('','');
$CLASS_OFF = "button_dark trans30";
}
if ($switches =~ /v/) {
@margin = ('mb10','mt10');
if ($switches =~ /y/) {
@margin = ('mb5','mt5');
}
}
if ($switches =~ /d/i) {
if ($switches !~ /D/) {
$CLASS = " trans50";
}
} else {
if ($switches =~ /C/) {
$ONCHANGE = $js;
}
if ($switches =~ /J/) {
$ON_ON = $js;
$ON_OFF = $js2;
}
($ONCLICK1,$ONCLICK2) = (
qq~onclick = "onojs_hide('${id}_opt_on');onojs_inline('${id}_opt_off');document.getElementById('${id}_id').value='$opts[0]';$ONCHANGE$ON_OFF"~,
qq~onclick = "onojs_inline('${id}_opt_on');onojs_hide('${id}_opt_off');document.getElementById('${id}_id').value='$opts[1]';$ONCHANGE$ON_ON"~,
);
}
if ($switches =~ /B/) {
($CLASS_ON,$CLASS_OFF) = ('button_blue','button_blue trans50');
}
if ($switches =~ /G/) {
($CLASS_ON,$CLASS_OFF) = ('button_green','button_green trans50');
}
if ($switches =~ /R/) {
($CLASS_ON,$CLASS_OFF) = ('button_red','button_red trans50');
}
if ($switches =~ /s/) {
my $id2 = $id;
$id2 =~ s~(\/|\.)~__~g;
$SCRIPT = qq~<script>
function ono_ui_switch_${id2}_on() {
onojs_inline('${id}_opt_on');onojs_hide('${id}_opt_off');
document.getElementById('${id}_id').value='$opts[1]';
$js;
}
function ono_ui_switch_${id2}_off() {
onojs_hide('${id}_opt_on');onojs_inline('${id}_opt_off');
document.getElementById('${id}_id').value='$opts[0]';
$js2;
}
function ono_ui_switch_${id2}_toggle() {
if (onojs_getvalue('${id}_id') == '$opts[1]') {
ono_ui_switch_${id2}_off();
} else {
ono_ui_switch_${id2}_on()
}
}
</script>
~;
}
my ($STYLE1,$STYLE2,$STYLE3,$CENTER);
if ($switches =~ /b/) {
$STYLE1 = ";border:2px solid #339933";
$STYLE2 = ";border:2px solid #993333";
$size[0] = 5;
}
if ($switches =~ /S/) {
my $wi1 = 15+(length $string)*10;
my $wi2 = $wi1 - 10;
$STYLE1 .= qq~width:${wi1}px~;
$STYLE2 .= qq~width:${wi1}px~;
$STYLE3 = qq~ style="width:${wi2}px;text-align:center"~;
}
my $HIDDEN = "hidden";
if ($switches =~ /X/ && ONO::IO->devstation) {
$HIDDEN = "text";
$SCRIPT .= qq~<div class="small col9 italic">${id}_id</div>~;
}
my $WEB = qq~<div id="${id}_opt_on" class="rel noselect p0 bo radius$size[2] $CLASS_ON$hide_on$CLASS" style="margin:0px$STYLE1" $ONCLICK1>
<div class="p$size[1]"><div class="block$size[0] bo radius$size[2] bg_paper $margin[0] col3"$STYLE3>$string</div></div>
</div>
<div id="${id}_opt_off" class="rel noselect p0 bo radius$size[2] $CLASS_OFF$hide_off$CLASS" style="margin:0px$STYLE2" $ONCLICK2>
<div class="p$size[1]"><div class="block$size[0] bo radius$size[2] bg_paper $margin[1] lightred"$STYLE3>$string</div></div>
</div>
<input type="$HIDDEN" id="${id}_id" name="$id" value="$selected">
$SCRIPT
~;
if ($switches =~ /t/) {
$WEB = qq~<div class="mt2">$WEB</div>~;
}
if ($switches =~ /T/) {
$WEB = qq~<div class="mt5">$WEB</div>~;
}
if ($switches =~ /M/) {
$WEB = qq~<div class="mr5">$WEB</div>~;
}
if ($switches =~ /r/) {
$WEB = qq~<div class="fr">$WEB</div>~;
}
if ($switches =~ /I/) {
$WEB = qq~<div class="inline">$WEB</div>~;
}
if ($switches =~ /c/) {
$WEB = qq~<div class="inline auto">$WEB</div>~;
}
return $WEB;
}
###############################################################################
# end of script
###############################################################################
1;
__END__