ONO::Lib::UI::Tabs
package ONO::Lib::UI::Tabs;
################################################################################
# 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;
###############################################################################
# tabs
###############################################################################
sub tabs {
my (
$self,
$script_url,
$selected,
$tabs_ref,
$search,
$switches,
) = @_;
#: Display tabs.
#:
#: -B not Bold
#: -d down 1px (prevent thick border at bottom of menu if box below)
#: -f flat (no bottom border)
#: -F only first tab is active, all others inactive / transparent
#: -i info text as boxes along with tabs
#: -I always display first tab info text (if available) - DOES NOT WORK YET
#: -l larger text
#: -L larger images
#: -m margin top
#: -M margin bottom
#: -p selected uses paper background (box_paper)
#: -s smaller text (selected tab remains big)
#: -S smaller (collapse at 800 instead of 720)
my @tabs = @$tabs_ref;
my $num = @tabs;
my ($counter,$SUBS,$first_id,$bb);
my $hide_size = 720;
if ($switches =~ /S/) {
$hide_size = 900;
}
if ($switches !~ /f/) {
$bb = "bb";
}
my $STYLE_DEFAULT = "padding:5px 10px 5px 10px";
if ($num > 4 && ONO::IO->device("phone")) {
$STYLE_DEFAULT = "padding:5px";
}
my $TABS = qq~<table class="wide_table">
<tr class="vbot">
<td class="p0">
<div class="$bb p5"></div>
</td>
~;
foreach my $tab (@tabs) {
$counter++;
my @tp = split(/:/,$tab);
my ($LINK_VARS,$disabled);
if ($tp[0] !~ /onojs_/ && $tp[0] =~ s~;(.*)$~~) {
$LINK_VARS = "&$1";
}
if ($counter == 1) {
$first_id = $tp[0];
}
my $CLASS = "box_fabric nowrap fl";
my $CLASS2 = "bold";
my $STYLE = $STYLE_DEFAULT;;
if ($counter == 1) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($counter == $num) {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($switches =~ /s/ && $tp[0] ne $selected) {
$CLASS2 .= " small";
}
if ($tp[0] eq $selected) {
$CLASS = "box_white rel nowrap fl";
if ($switches =~ /p/) {
$CLASS = "box_paper rel nowrap fl";
}
$STYLE = "top:1px;border-bottom:1px solid #ffffff;border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px;border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
} else {
if ($switches =~ /B/) {
$CLASS2 = "";
}
}
if ($tabs[$counter-2] eq "-") {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($tabs[$counter] eq "-") {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($switches =~ /F/ && $counter > 1) {
$disabled++;
}
if ($switches =~ /l/) {
$CLASS2 .= " large";
}
my $IMG;
my $IMG_SIZE = 24;
if ($switches =~ /L/) {
$IMG_SIZE = 32;
}
if ($tp[2]) {
$IMG = qq~<td><img class="block$IMG_SIZE" src="$tp[2]" alt=""></td>~;
} else {
my $SHORT = uc $tp[1];
$SHORT = substr($SHORT,0,3);
$IMG = qq~<td class="hide inline$hide_size">$SHORT</td>~;
}
if ($disabled || $tab eq "-") {
if ($disabled) {
$TABS .= qq~ <td class="p0">
<div class="$CLASS trans50" style="$STYLE">
<table class="default_table">
<tr>
$IMG
<td class="hide$hide_size"><div class="$CLASS2">$tp[1]</div></td>
</tr>
</table>
</div>
</td>
~;
}
if ($tab eq "-") {
if ($num > 8) {
$TABS .= qq~ <td class="p0"><div class="$bb p5 hide720"></div><div class="$bb p2 hide block720"></div></td>~;
} else {
$TABS .= qq~ <td class="p0"><div class="$bb p5"></div></td>~;
}
}
} else {
my $LINK = "${script_url}$tp[0]$LINK_VARS";
if ($tp[0] =~ m~^/~) {
$LINK = $tp[0];
}
if ($tp[0] =~ /onojs_/) {
$LINK = qq~javascript:void(0);" onclick="$tp[0]~;
}
my ($INFO,$OVER);
if ($tp[3]) {
my ($hide1,$hide2);
if ($switches =~ /i/) {
$INFO = qq~<div id="ono_tabs_info_$tp[0]" class="box_paper radius10 col6 abs hide fl" style="top:24px;left:-24px;z-index:99;width:240px;white-space:pre-line;">$tp[3]</div>~;
} else {
# if ($switches =~ /I/ && $counter != 1) {
# $hide1 = "onojs_block('ono_tabs_info_$first_id');";
$hide2 = " hide";
# }
$SUBS .= qq~<div id="ono_tabs_info_$tp[0]" class="pad10_2$hide2">$tp[3]</div>~;
}
$OVER = qq~ onmouseover="onojs_block('ono_tabs_info_$tp[0]');" onmouseout="onojs_hide('ono_tabs_info_$tp[0]');$hide1"~;
}
my $FLAT = "flat_all";
if ($tp[0] eq $selected) {
$FLAT = "flat_bottom";
}
$TABS .= qq~ <td class="p0"$OVER>
<a href="$LINK">
<div class="$CLASS $FLAT" style="$STYLE">
<table class="default_table">
<tr>
$IMG
<td class="hide$hide_size"><div class="rel"><div class="$CLASS2">$tp[1]</div>$INFO</div></td>
</tr>
</table>
</div>
</a>
</td>
~;
}
}
$TABS .= qq~ <td class="p0 w100">
<div class="$bb"><div class="inline w100">$search</div></div>
</td>
</tr>
</table>
~;
if ($SUBS) {
$TABS .= qq~<table class="wide_table mt5"><tr><td><div class="col6">$SUBS</div></td><td><div class="p2"> </div></td></tr></table>~;
}
if ($switches =~ /m/) {
$TABS = qq~<div class="mt10">$TABS</div>~;
}
if ($switches =~ /M/) {
$TABS = qq~<div class="mb10">$TABS</div>~;
}
if ($switches =~ /d/) {
$TABS = qq~<div class="rel" style="top:1px">$TABS</div>~;
}
return $TABS;
}
sub box {
my ($self,$tabs_ref,$tabname_ref,$content_ref,$selected,$vars_ref,$switches) = @_;
#: Display tab box.
#:
my @tabs = @$tabs_ref;
my @tabnames = @$tabname_ref;
my @contents = @$content_ref;
$switches = ":$switches:";
my $box_id = int(rand(999999));
my $box_id_pre = "_$box_id";
my $box_id_aft = "${box_id}_";
if ($switches =~ /:no_id:/) {
$box_id = "";
$box_id_pre = "";
$box_id_aft = "";
}
my $padding = "10px";
my $border;
if ($switches =~ /:fullscreen:/) {
$padding = "0px";
} else {
$border = "bo";
}
my ($textstyle,$textsel);
if ($switches =~ /:small_menu:/) {
$textstyle .= "font-size:small;";
}
my %vars;
if ($vars_ref) {
%vars = %$vars_ref;
}
# counter must be initially set to ZERO to make the tab switching work properly
my $num = @tabs;
my $counter = 0;
my $size = 24;
my ($tabcode,$contentcode,$hidedivs,$disabletabs);
foreach my $tab (@tabs) {
my $nbsp;
if ($tabnames[$counter] =~ /\.(png|gif|jpg)$/ || $tabnames[$counter] =~ /\.(png|gif|jpg):(.*?)$/) {
my $text;
if ($tabnames[$counter] =~ s/:(.*?)$//) {
$text = $1;
}
if ($tabnames[$counter] =~ m~^/~) {
$tabnames[$counter] = qq~<img class="block auto" src="$tabnames[$counter]" style="width:${size}px;height:${size}px" alt="">~;
} else {
$tabnames[$counter] = qq~<img class="block auto" src="/ono/osr/images/icons/crystal/32x32/$tabnames[$counter]" style="width:${size}px;height:${size}px" alt="">~;
}
if ($text) {
$tabnames[$counter] = qq~<table class="default_table auto"><tr><td style="padding:2px 0px 2px 0px">$tabnames[$counter]</td><td class="hide1000 nowrap pad5_2">$text</td></tr></table>~;
} else {
$tabnames[$counter] = qq~<table class="default_table auto">
<tr>
<td class="hide800" style="padding:2px 0px 2px 0px"> </td>
<td style="padding:2px 0px 2px 0px">$tabnames[$counter]</td>
<td class="hide800" style="padding:2px 0px 2px 0px"> </td>
</tr>
</table>
~;
}
}
else {
$nbsp = " ";
$tabnames[$counter] =~ s/ / /g;
}
my $LINK = qq~switchtab$box_id_pre('$tab','$counter')~;
if ($tab =~ m~^/~) {
$LINK = qq~$tab~;
}
my $CLASS = "box_fabric rel bold nowrap fl";
my $STYLE = "padding:5px 10px 5px 10px";
if ($counter == 0) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($counter == $num-1) {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($tabnames[$counter]) {
$disabletabs .= qq~onojs_class('${box_id_aft}tab_$tab','$CLASS flat_all');\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.padding = '5px 10px 5px 10px';\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.top = '0px';\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.borderBottom = '';\n~;
}
if ($counter == $selected) {
$CLASS = "box_white radius10top flat_bottom rel nowrap fl";
$STYLE = "top:1px;border-bottom:1px solid #ffffff";
if ($counter == 0) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
$contentcode.=qq~<div id="${box_id_aft}content_$tab">$contents[$counter]</div>~;
} else {
$contentcode.= qq~<div id="${box_id_aft}content_$tab" class="hide">$contents[$counter]</div>~;
}
if ($tabnames[$counter]) {
my $flat = "all";
if ($counter == $selected) {
$flat = "bottom";
}
$tabcode .= qq~<td class="p0" onclick="$LINK">
<div id="${box_id_aft}tab_$tab" class="$CLASS flat_$flat" style="$STYLE">
<a href="javascript:void(0);" onclick="$LINK" class="col6" style="$textstyle$textsel">$tabnames[$counter]</a>
</div>
</td>
~;
$hidedivs .= qq~onojs_hide('${box_id_aft}content_$tab');\n~;
}
$counter++;
}
my $BOX = qq~<table class="wide_table">
<tr>
<td class="p0">
<table class="wide_table rel" style="top:1px">
<tr class="vbot">
<td class="p5"></td>
$tabcode
<td class="p5"></td>
<td class="w100"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="p0">
<div class="radius10 bg_white $border" style="padding:$padding"><div class="inline w100">$contentcode</div></div>
</td>
</tr>
</table>
<input type="hidden" id="${box_id_aft}transmit" name="box_transmit" value="$selected">
<script>
function switchtab$box_id_pre(tab,counter) {
$disabletabs
$hidedivs
onojs_block('${box_id_aft}content_' + tab);
onojs_class('${box_id_aft}tab_' + tab,'box_white radius10top flat_bottom rel bold nowrap fl');
document.getElementById('${box_id_aft}tab_' + tab).style.padding = '10px';
document.getElementById('${box_id_aft}tab_' + tab).style.top = '1px';
document.getElementById('${box_id_aft}tab_' + tab).style.borderBottom = '1px solid #ffffff';
document.getElementById('${box_id_aft}transmit').value = counter;
}
</script>
~;
return $BOX;
}
sub icon {
my (
$self,
$data,
$LINK,
$cols,
$color,
$switches,
$max_width,
) = @_;
#: Display icon.
#:
#: -h undocumented (?)
my @dp = split(/:/,$data);
if (!$cols) {
$cols = 4;
}
my $col_width = "w25";
if ($cols =~ /^(2|3|4|5)$/) {
$col_width = "w".int(100/$cols);
}
my $color2;
if (!$color) {
$color = "black";
$color2 = "_dark";
}
if (!$dp[1] || !$dp[2]) {
return qq~<td class="$col_width p0" style="padding:$dp[5]"></td>$dp[6]~;
} else {
my $IMG = "/ono/osr/images/icons/crystal/128x128/$dp[1].png";
if ($dp[1] =~ /^\//) {
$IMG = $dp[1];
}
my $WEB = qq~<div class="rel" style="top:10px"><a href="$LINK"><img class="block64 auto" src="$IMG" alt=""></a></div>
<a href="$LINK"><h4 class="mb0 mt10 noshadow" style="color:#$dp[4]">$dp[2]</h4></a>
<a href="$LINK"><div class="col9">$dp[3]</div></a>
~;
if ($switches =~ /h/) {
$WEB = qq~<table class="default_table auto">
<tr class="vtop">
<td><a href="$LINK"><img class="block64" src="$IMG" alt=""></a></td>
<td>
<a href="$LINK"><h4 class="mb0 mt10 noshadow" style="color:#$dp[4]">$dp[2]</h4></a>
<a href="$LINK"><div class="col9">$dp[3]</div></a>
</td>
</tr>
</table>
~;
}
my $STYLE;
if ($max_width) {
$STYLE = "max-width:${max_width}px";
}
return qq~<td class="$col_width p0 center" style="padding:$dp[5]">
<div id="icon_tab_$dp[0]" class="box_paper mb10" style="$STYLE" onclick="window.location='$LINK';"
onmouseover="onojs_class('icon_tab_$dp[0]','box_$color box_inside$color2 mb10');"
onmouseout="onojs_class('icon_tab_$dp[0]','box_paper mb10');">
$WEB
</div>
</td>$dp[6]
~;
}
}
###############################################################################
# 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;
###############################################################################
# tabs
###############################################################################
sub tabs {
my (
$self,
$script_url,
$selected,
$tabs_ref,
$search,
$switches,
) = @_;
#: Display tabs.
#:
#: -B not Bold
#: -d down 1px (prevent thick border at bottom of menu if box below)
#: -f flat (no bottom border)
#: -F only first tab is active, all others inactive / transparent
#: -i info text as boxes along with tabs
#: -I always display first tab info text (if available) - DOES NOT WORK YET
#: -l larger text
#: -L larger images
#: -m margin top
#: -M margin bottom
#: -p selected uses paper background (box_paper)
#: -s smaller text (selected tab remains big)
#: -S smaller (collapse at 800 instead of 720)
my @tabs = @$tabs_ref;
my $num = @tabs;
my ($counter,$SUBS,$first_id,$bb);
my $hide_size = 720;
if ($switches =~ /S/) {
$hide_size = 900;
}
if ($switches !~ /f/) {
$bb = "bb";
}
my $STYLE_DEFAULT = "padding:5px 10px 5px 10px";
if ($num > 4 && ONO::IO->device("phone")) {
$STYLE_DEFAULT = "padding:5px";
}
my $TABS = qq~<table class="wide_table">
<tr class="vbot">
<td class="p0">
<div class="$bb p5"></div>
</td>
~;
foreach my $tab (@tabs) {
$counter++;
my @tp = split(/:/,$tab);
my ($LINK_VARS,$disabled);
if ($tp[0] !~ /onojs_/ && $tp[0] =~ s~;(.*)$~~) {
$LINK_VARS = "&$1";
}
if ($counter == 1) {
$first_id = $tp[0];
}
my $CLASS = "box_fabric nowrap fl";
my $CLASS2 = "bold";
my $STYLE = $STYLE_DEFAULT;;
if ($counter == 1) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($counter == $num) {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($switches =~ /s/ && $tp[0] ne $selected) {
$CLASS2 .= " small";
}
if ($tp[0] eq $selected) {
$CLASS = "box_white rel nowrap fl";
if ($switches =~ /p/) {
$CLASS = "box_paper rel nowrap fl";
}
$STYLE = "top:1px;border-bottom:1px solid #ffffff;border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px;border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
} else {
if ($switches =~ /B/) {
$CLASS2 = "";
}
}
if ($tabs[$counter-2] eq "-") {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($tabs[$counter] eq "-") {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($switches =~ /F/ && $counter > 1) {
$disabled++;
}
if ($switches =~ /l/) {
$CLASS2 .= " large";
}
my $IMG;
my $IMG_SIZE = 24;
if ($switches =~ /L/) {
$IMG_SIZE = 32;
}
if ($tp[2]) {
$IMG = qq~<td><img class="block$IMG_SIZE" src="$tp[2]" alt=""></td>~;
} else {
my $SHORT = uc $tp[1];
$SHORT = substr($SHORT,0,3);
$IMG = qq~<td class="hide inline$hide_size">$SHORT</td>~;
}
if ($disabled || $tab eq "-") {
if ($disabled) {
$TABS .= qq~ <td class="p0">
<div class="$CLASS trans50" style="$STYLE">
<table class="default_table">
<tr>
$IMG
<td class="hide$hide_size"><div class="$CLASS2">$tp[1]</div></td>
</tr>
</table>
</div>
</td>
~;
}
if ($tab eq "-") {
if ($num > 8) {
$TABS .= qq~ <td class="p0"><div class="$bb p5 hide720"></div><div class="$bb p2 hide block720"></div></td>~;
} else {
$TABS .= qq~ <td class="p0"><div class="$bb p5"></div></td>~;
}
}
} else {
my $LINK = "${script_url}$tp[0]$LINK_VARS";
if ($tp[0] =~ m~^/~) {
$LINK = $tp[0];
}
if ($tp[0] =~ /onojs_/) {
$LINK = qq~javascript:void(0);" onclick="$tp[0]~;
}
my ($INFO,$OVER);
if ($tp[3]) {
my ($hide1,$hide2);
if ($switches =~ /i/) {
$INFO = qq~<div id="ono_tabs_info_$tp[0]" class="box_paper radius10 col6 abs hide fl" style="top:24px;left:-24px;z-index:99;width:240px;white-space:pre-line;">$tp[3]</div>~;
} else {
# if ($switches =~ /I/ && $counter != 1) {
# $hide1 = "onojs_block('ono_tabs_info_$first_id');";
$hide2 = " hide";
# }
$SUBS .= qq~<div id="ono_tabs_info_$tp[0]" class="pad10_2$hide2">$tp[3]</div>~;
}
$OVER = qq~ onmouseover="onojs_block('ono_tabs_info_$tp[0]');" onmouseout="onojs_hide('ono_tabs_info_$tp[0]');$hide1"~;
}
my $FLAT = "flat_all";
if ($tp[0] eq $selected) {
$FLAT = "flat_bottom";
}
$TABS .= qq~ <td class="p0"$OVER>
<a href="$LINK">
<div class="$CLASS $FLAT" style="$STYLE">
<table class="default_table">
<tr>
$IMG
<td class="hide$hide_size"><div class="rel"><div class="$CLASS2">$tp[1]</div>$INFO</div></td>
</tr>
</table>
</div>
</a>
</td>
~;
}
}
$TABS .= qq~ <td class="p0 w100">
<div class="$bb"><div class="inline w100">$search</div></div>
</td>
</tr>
</table>
~;
if ($SUBS) {
$TABS .= qq~<table class="wide_table mt5"><tr><td><div class="col6">$SUBS</div></td><td><div class="p2"> </div></td></tr></table>~;
}
if ($switches =~ /m/) {
$TABS = qq~<div class="mt10">$TABS</div>~;
}
if ($switches =~ /M/) {
$TABS = qq~<div class="mb10">$TABS</div>~;
}
if ($switches =~ /d/) {
$TABS = qq~<div class="rel" style="top:1px">$TABS</div>~;
}
return $TABS;
}
sub box {
my ($self,$tabs_ref,$tabname_ref,$content_ref,$selected,$vars_ref,$switches) = @_;
#: Display tab box.
#:
my @tabs = @$tabs_ref;
my @tabnames = @$tabname_ref;
my @contents = @$content_ref;
$switches = ":$switches:";
my $box_id = int(rand(999999));
my $box_id_pre = "_$box_id";
my $box_id_aft = "${box_id}_";
if ($switches =~ /:no_id:/) {
$box_id = "";
$box_id_pre = "";
$box_id_aft = "";
}
my $padding = "10px";
my $border;
if ($switches =~ /:fullscreen:/) {
$padding = "0px";
} else {
$border = "bo";
}
my ($textstyle,$textsel);
if ($switches =~ /:small_menu:/) {
$textstyle .= "font-size:small;";
}
my %vars;
if ($vars_ref) {
%vars = %$vars_ref;
}
# counter must be initially set to ZERO to make the tab switching work properly
my $num = @tabs;
my $counter = 0;
my $size = 24;
my ($tabcode,$contentcode,$hidedivs,$disabletabs);
foreach my $tab (@tabs) {
my $nbsp;
if ($tabnames[$counter] =~ /\.(png|gif|jpg)$/ || $tabnames[$counter] =~ /\.(png|gif|jpg):(.*?)$/) {
my $text;
if ($tabnames[$counter] =~ s/:(.*?)$//) {
$text = $1;
}
if ($tabnames[$counter] =~ m~^/~) {
$tabnames[$counter] = qq~<img class="block auto" src="$tabnames[$counter]" style="width:${size}px;height:${size}px" alt="">~;
} else {
$tabnames[$counter] = qq~<img class="block auto" src="/ono/osr/images/icons/crystal/32x32/$tabnames[$counter]" style="width:${size}px;height:${size}px" alt="">~;
}
if ($text) {
$tabnames[$counter] = qq~<table class="default_table auto"><tr><td style="padding:2px 0px 2px 0px">$tabnames[$counter]</td><td class="hide1000 nowrap pad5_2">$text</td></tr></table>~;
} else {
$tabnames[$counter] = qq~<table class="default_table auto">
<tr>
<td class="hide800" style="padding:2px 0px 2px 0px"> </td>
<td style="padding:2px 0px 2px 0px">$tabnames[$counter]</td>
<td class="hide800" style="padding:2px 0px 2px 0px"> </td>
</tr>
</table>
~;
}
}
else {
$nbsp = " ";
$tabnames[$counter] =~ s/ / /g;
}
my $LINK = qq~switchtab$box_id_pre('$tab','$counter')~;
if ($tab =~ m~^/~) {
$LINK = qq~$tab~;
}
my $CLASS = "box_fabric rel bold nowrap fl";
my $STYLE = "padding:5px 10px 5px 10px";
if ($counter == 0) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
if ($counter == $num-1) {
$STYLE .= ";border-top-right-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-right-radius:10px";
}
if ($tabnames[$counter]) {
$disabletabs .= qq~onojs_class('${box_id_aft}tab_$tab','$CLASS flat_all');\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.padding = '5px 10px 5px 10px';\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.top = '0px';\n~;
$disabletabs .= qq~document.getElementById('${box_id_aft}tab_$tab').style.borderBottom = '';\n~;
}
if ($counter == $selected) {
$CLASS = "box_white radius10top flat_bottom rel nowrap fl";
$STYLE = "top:1px;border-bottom:1px solid #ffffff";
if ($counter == 0) {
$STYLE .= ";border-top-left-radius:10px;-moz-border-top-left-radius:10px;-webkit-border-top-left-radius:10px";
}
$contentcode.=qq~<div id="${box_id_aft}content_$tab">$contents[$counter]</div>~;
} else {
$contentcode.= qq~<div id="${box_id_aft}content_$tab" class="hide">$contents[$counter]</div>~;
}
if ($tabnames[$counter]) {
my $flat = "all";
if ($counter == $selected) {
$flat = "bottom";
}
$tabcode .= qq~<td class="p0" onclick="$LINK">
<div id="${box_id_aft}tab_$tab" class="$CLASS flat_$flat" style="$STYLE">
<a href="javascript:void(0);" onclick="$LINK" class="col6" style="$textstyle$textsel">$tabnames[$counter]</a>
</div>
</td>
~;
$hidedivs .= qq~onojs_hide('${box_id_aft}content_$tab');\n~;
}
$counter++;
}
my $BOX = qq~<table class="wide_table">
<tr>
<td class="p0">
<table class="wide_table rel" style="top:1px">
<tr class="vbot">
<td class="p5"></td>
$tabcode
<td class="p5"></td>
<td class="w100"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="p0">
<div class="radius10 bg_white $border" style="padding:$padding"><div class="inline w100">$contentcode</div></div>
</td>
</tr>
</table>
<input type="hidden" id="${box_id_aft}transmit" name="box_transmit" value="$selected">
<script>
function switchtab$box_id_pre(tab,counter) {
$disabletabs
$hidedivs
onojs_block('${box_id_aft}content_' + tab);
onojs_class('${box_id_aft}tab_' + tab,'box_white radius10top flat_bottom rel bold nowrap fl');
document.getElementById('${box_id_aft}tab_' + tab).style.padding = '10px';
document.getElementById('${box_id_aft}tab_' + tab).style.top = '1px';
document.getElementById('${box_id_aft}tab_' + tab).style.borderBottom = '1px solid #ffffff';
document.getElementById('${box_id_aft}transmit').value = counter;
}
</script>
~;
return $BOX;
}
sub icon {
my (
$self,
$data,
$LINK,
$cols,
$color,
$switches,
$max_width,
) = @_;
#: Display icon.
#:
#: -h undocumented (?)
my @dp = split(/:/,$data);
if (!$cols) {
$cols = 4;
}
my $col_width = "w25";
if ($cols =~ /^(2|3|4|5)$/) {
$col_width = "w".int(100/$cols);
}
my $color2;
if (!$color) {
$color = "black";
$color2 = "_dark";
}
if (!$dp[1] || !$dp[2]) {
return qq~<td class="$col_width p0" style="padding:$dp[5]"></td>$dp[6]~;
} else {
my $IMG = "/ono/osr/images/icons/crystal/128x128/$dp[1].png";
if ($dp[1] =~ /^\//) {
$IMG = $dp[1];
}
my $WEB = qq~<div class="rel" style="top:10px"><a href="$LINK"><img class="block64 auto" src="$IMG" alt=""></a></div>
<a href="$LINK"><h4 class="mb0 mt10 noshadow" style="color:#$dp[4]">$dp[2]</h4></a>
<a href="$LINK"><div class="col9">$dp[3]</div></a>
~;
if ($switches =~ /h/) {
$WEB = qq~<table class="default_table auto">
<tr class="vtop">
<td><a href="$LINK"><img class="block64" src="$IMG" alt=""></a></td>
<td>
<a href="$LINK"><h4 class="mb0 mt10 noshadow" style="color:#$dp[4]">$dp[2]</h4></a>
<a href="$LINK"><div class="col9">$dp[3]</div></a>
</td>
</tr>
</table>
~;
}
my $STYLE;
if ($max_width) {
$STYLE = "max-width:${max_width}px";
}
return qq~<td class="$col_width p0 center" style="padding:$dp[5]">
<div id="icon_tab_$dp[0]" class="box_paper mb10" style="$STYLE" onclick="window.location='$LINK';"
onmouseover="onojs_class('icon_tab_$dp[0]','box_$color box_inside$color2 mb10');"
onmouseout="onojs_class('icon_tab_$dp[0]','box_paper mb10');">
$WEB
</div>
</td>$dp[6]
~;
}
}
###############################################################################
# end of script
###############################################################################
1;
__END__