ONO::Lib::UI::Box
package ONO::Lib::UI::Box;
################################################################################
# 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;
use ONO::Lib::Basic;
use ONO::Render::Compress;
#: Box elements
###############################################################################
# floating box
###############################################################################
sub float {
#: Displays a floating box, consisting of 2 columns separated by a colon.
my (
$self,
$LABEL,
$CONTENT,
$switches,
) = @_;
my $BOX = qq~<div class="fl mr10 mb5">
<table class="default_table"><tr><td>$LABEL:</td><td>$CONTENT</td></tr></table>
</div>
~;
return $BOX;
}
###############################################################################
# floating box
###############################################################################
sub infobox_v2 {
#: Displays a alternative infobox.
my (
$self,
$site,
$id,
$title,
$date,
$text,
$linkdata,
) = @_;
if ($date) {
$date =~ s~-~ — ~g;
$date = qq~<h3 class="col9 m0 ml20">$date</h3>~;
}
my ($TXT,$IMG1,$IMG2);
if (ONO::IO->exists("/sitedata/$site/images/$id.jpg")) {
$IMG1 = qq~<div class="box_black w33 fr p0 overhide ml20 mb10 hide1000"><img class="block fr" src="/sitedata/$site/images/$id.jpg" style="width:100%;height:auto" alt="$title"></div>~;
$IMG2 = qq~<div class="mt10"><div class="box_black w90 auto p0 overhide hide block1000"><img class="block fr" src="/sitedata/$site/images/$id.jpg" style="width:100%;height:auto" alt="$title"></div></div>~;
}
if ($text) {
$text =~ s~\<br\>~</div><div class="mt10">~g;
$TXT .= qq~<div class="mt10">$text</div>~;
}
if ($linkdata) {
my $LINK;
foreach my $link (split(/\:/,":$linkdata:")) {
if ($link =~ /[a-z]/) {
my $linkname = ONO::Lib::Basic->pathbreaks($link);
my $icon = "ono/arrow_blue_next";
my ($target,$rel);
if ($link =~ /\./ && $link !~ /^\//) {
$icon = "devices/network";
$link = "http://$link";
$target = qq~ target="_blank"~;
if ($link =~ /olefa/) {
$rel = qq~ rel="nofollow"~;
}
}
my $HREF = qq~<a href="$link"$target$rel>$linkname</a>~;
if ($linkname =~ s/^!//) {
$HREF = qq~<span class="col9">$linkname</span>~;
}
$LINK .= qq~<table class="default_table">
<tr class="vtop">
<td class="p0"><img class="block24 mt2 mr5" src="/ono/osr/images/icons/crystal/32x32/$icon.png" alt="$title"></td>
<td class="p0">$HREF</td>
</tr>
</table>
~;
}
}
$TXT .= qq~<div class="mt10">$LINK</div>~;
}
return qq~<div class="box_paper mb20 p20 p10_1000">
<div class="inline w100">
$IMG1
<h2 class="m0">$title</h2>$date
$IMG2
<div class="ml10 ml20">$TXT</div>
</div>
</div>
~;
}
###############################################################################
# file
###############################################################################
#
#: Generates an infobox using data stored in a file stored inside
#: cgi-bin/local/perl/$community/infoboxes/.
#: $id is the ID of the file to load (${id}_$lang.txt).
#:
#: In standard mode this function will render a single infobox.
#:
#: Use "string:$id" to return a string that can be used by the 'infoboxes'
#: function to render a series of boxes.
#
sub infobox_file {
my (
$self,
$community,
$id,
$lang,
$default_lang,
$link,
$button,
$site,
$domain,
$subdom,
) = @_;
my $mode;
if ($id =~ s~^(string)\:~~) {
$mode = $1;
}
my $server_name = $ENV{'SERVER_NAME'};
$server_name =~ s~^(.*)\.(.*?)\.(.*?)$~$2.$3~;
if (!$site) {
$site = $server_name;
}
if (!$domain) {
$domain = $server_name;
}
if (!ONO::IO->exists("cgi-bin/local/perl/$community/infoboxes/${id}_$lang.txt")) {
$lang = $default_lang;
}
my $text = ONO::IO->load("cgi-bin/local/perl/$community/infoboxes/${id}_$lang.txt");
$text =~ s~\n~:~g;
$text =~ s~###SITE###~$site~g;
$text =~ s~###DOMAIN###~$domain~g;
$text =~ s~###SUBDOMAIN###~$subdom~g;
if (!$text) {
$text = "Error!:${id}_$lang.txt could not be found:please fix me ;):";
}
my @tp = split(/:/,$text);
if ($id !~ s/^#//) {
if (!$mode) {
return &infobox("","/images/infoboxes/$id.jpg",$tp[0],$tp[1],$tp[2],$button,$link);
}
if ($mode eq "string") {
return "/images/infoboxes/$id.jpg:$tp[0]:$tp[1]:$tp[2]:$button:$link";
}
}
}
###############################################################################
# infobox
###############################################################################
#: Display an infobox element.
#:
#: $style allows to use custom CSS classes
#:
#: default radius is "radius5", you may also specify "radius0" or "radius10"
#:
#: "center" will center the entire content
#:
#: "title_top" will display the title above the image
sub infobox {
my (
$self,
$image,
$title,
$text1,
$text2,
$button,
$link,
$alt_button,
$style,
) = @_;
if ($alt_button) {
$button = $alt_button;
}
my $IMAGE = qq~<img class="block auto" src="$image" style="width:100%;max-width:300px;height:auto" alt="$title">~;
$style = " $style ";
my $BUTTON;
if ($button && $link) {
$IMAGE = qq~<a href="$link">$IMAGE</a>~;
my ($c,$ml20);
if ($style =~ / center /) {
$c = "c";
} else {
$ml20 = " ml20";
}
$BUTTON = qq~<${c}block><a href="$link" class="button_green mt10 ml20">$button</a></${c}block>~;
}
my $CLASS = "box_white";
my $STYLE;
if ($style =~ /[a-z]/ && $style !~ /\;/) {
$CLASS = $style;
} else {
$STYLE .= $style;
}
$title =~ s~ \& ~ \&\; ~g;
$text1 =~ s~ \& ~ \&\; ~g;
$text2 =~ s~ \& ~ \&\; ~g;
my $TEXT = qq~<div class="mb5 col6 large">$text1</div><div class="mb5 col9 large">$text2</div>~;
my $CONTENT = qq~$IMAGE
<div class="rel" style="padding:0px 10px 0px 10px;bottom:10px">
<h2>$title</h2>
$TEXT
$BUTTON
</div>
~;
if ($CLASS =~ s/ title_top / /) {
$CONTENT = qq~<h2>$title</h2>
$IMAGE
<div class="rel" style="padding:0px 10px 0px 10px;bottom:10px">
$TEXT
$BUTTON
</div>
~;
}
my $BOX = qq~<div class="$CLASS auto" style="padding-top:10px;margin-bottom:20px;$STYLE">
<div class="inline w100">
$CONTENT
</div>
</div>
~;
return ONO::Render::Compress->compress($BOX);
}
###############################################################################
# show multiple infoboxes
###############################################################################
#
#: Display multiple infoboxes.
#:
#: Requires an array reference as input, containing the infobox data.
#:
#: You may use "HTML:..." as string to inject pure HTML code.
sub infoboxes {
my (
$self,
$boxes_ref,
$cols,
) = @_;
my @boxes = @$boxes_ref;
if ($cols < 1) {
$cols = 3;
}
my $SPACE = 33;
if ($cols == 1) {
$SPACE = 100;
}
if ($cols == 2) {
$SPACE = 50;
}
my $BOXES = qq~<div class="inline w100">~;
my ($WIDTH,$counter);
if ($cols > 1) {
$WIDTH = int(100/$cols);
$WIDTH = qq~ style="width:${WIDTH}%"~;
}
foreach my $box (@boxes) {
if ($box !~ /^#/) {
$counter++;
my @bp = split(/:/,$box);
$bp[7] .= "width:90%;max-width:360px";
if ($box =~ s~^HTML:~~) {
$BOXES .= qq~<div class="auto" style="width:300px">$box</div>~;
} else {
$BOXES .= qq~<div class="w${SPACE}_1000i fl fn1000">~;
$BOXES .= &infobox("",$bp[0],$bp[1],$bp[2],$bp[3],$bp[4],$bp[5],$bp[6],$bp[7]);
$BOXES .= qq~</div>~;
}
if ($counter%$cols == 0) {
$BOXES .= qq~</div><div class="inline w100">~;
}
}
}
$BOXES .= qq~</div>~;
return $BOXES;
}
###############################################################################
# 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;
use ONO::Lib::Basic;
use ONO::Render::Compress;
#: Box elements
###############################################################################
# floating box
###############################################################################
sub float {
#: Displays a floating box, consisting of 2 columns separated by a colon.
my (
$self,
$LABEL,
$CONTENT,
$switches,
) = @_;
my $BOX = qq~<div class="fl mr10 mb5">
<table class="default_table"><tr><td>$LABEL:</td><td>$CONTENT</td></tr></table>
</div>
~;
return $BOX;
}
###############################################################################
# floating box
###############################################################################
sub infobox_v2 {
#: Displays a alternative infobox.
my (
$self,
$site,
$id,
$title,
$date,
$text,
$linkdata,
) = @_;
if ($date) {
$date =~ s~-~ — ~g;
$date = qq~<h3 class="col9 m0 ml20">$date</h3>~;
}
my ($TXT,$IMG1,$IMG2);
if (ONO::IO->exists("/sitedata/$site/images/$id.jpg")) {
$IMG1 = qq~<div class="box_black w33 fr p0 overhide ml20 mb10 hide1000"><img class="block fr" src="/sitedata/$site/images/$id.jpg" style="width:100%;height:auto" alt="$title"></div>~;
$IMG2 = qq~<div class="mt10"><div class="box_black w90 auto p0 overhide hide block1000"><img class="block fr" src="/sitedata/$site/images/$id.jpg" style="width:100%;height:auto" alt="$title"></div></div>~;
}
if ($text) {
$text =~ s~\<br\>~</div><div class="mt10">~g;
$TXT .= qq~<div class="mt10">$text</div>~;
}
if ($linkdata) {
my $LINK;
foreach my $link (split(/\:/,":$linkdata:")) {
if ($link =~ /[a-z]/) {
my $linkname = ONO::Lib::Basic->pathbreaks($link);
my $icon = "ono/arrow_blue_next";
my ($target,$rel);
if ($link =~ /\./ && $link !~ /^\//) {
$icon = "devices/network";
$link = "http://$link";
$target = qq~ target="_blank"~;
if ($link =~ /olefa/) {
$rel = qq~ rel="nofollow"~;
}
}
my $HREF = qq~<a href="$link"$target$rel>$linkname</a>~;
if ($linkname =~ s/^!//) {
$HREF = qq~<span class="col9">$linkname</span>~;
}
$LINK .= qq~<table class="default_table">
<tr class="vtop">
<td class="p0"><img class="block24 mt2 mr5" src="/ono/osr/images/icons/crystal/32x32/$icon.png" alt="$title"></td>
<td class="p0">$HREF</td>
</tr>
</table>
~;
}
}
$TXT .= qq~<div class="mt10">$LINK</div>~;
}
return qq~<div class="box_paper mb20 p20 p10_1000">
<div class="inline w100">
$IMG1
<h2 class="m0">$title</h2>$date
$IMG2
<div class="ml10 ml20">$TXT</div>
</div>
</div>
~;
}
###############################################################################
# file
###############################################################################
#
#: Generates an infobox using data stored in a file stored inside
#: cgi-bin/local/perl/$community/infoboxes/.
#: $id is the ID of the file to load (${id}_$lang.txt).
#:
#: In standard mode this function will render a single infobox.
#:
#: Use "string:$id" to return a string that can be used by the 'infoboxes'
#: function to render a series of boxes.
#
sub infobox_file {
my (
$self,
$community,
$id,
$lang,
$default_lang,
$link,
$button,
$site,
$domain,
$subdom,
) = @_;
my $mode;
if ($id =~ s~^(string)\:~~) {
$mode = $1;
}
my $server_name = $ENV{'SERVER_NAME'};
$server_name =~ s~^(.*)\.(.*?)\.(.*?)$~$2.$3~;
if (!$site) {
$site = $server_name;
}
if (!$domain) {
$domain = $server_name;
}
if (!ONO::IO->exists("cgi-bin/local/perl/$community/infoboxes/${id}_$lang.txt")) {
$lang = $default_lang;
}
my $text = ONO::IO->load("cgi-bin/local/perl/$community/infoboxes/${id}_$lang.txt");
$text =~ s~\n~:~g;
$text =~ s~###SITE###~$site~g;
$text =~ s~###DOMAIN###~$domain~g;
$text =~ s~###SUBDOMAIN###~$subdom~g;
if (!$text) {
$text = "Error!:${id}_$lang.txt could not be found:please fix me ;):";
}
my @tp = split(/:/,$text);
if ($id !~ s/^#//) {
if (!$mode) {
return &infobox("","/images/infoboxes/$id.jpg",$tp[0],$tp[1],$tp[2],$button,$link);
}
if ($mode eq "string") {
return "/images/infoboxes/$id.jpg:$tp[0]:$tp[1]:$tp[2]:$button:$link";
}
}
}
###############################################################################
# infobox
###############################################################################
#: Display an infobox element.
#:
#: $style allows to use custom CSS classes
#:
#: default radius is "radius5", you may also specify "radius0" or "radius10"
#:
#: "center" will center the entire content
#:
#: "title_top" will display the title above the image
sub infobox {
my (
$self,
$image,
$title,
$text1,
$text2,
$button,
$link,
$alt_button,
$style,
) = @_;
if ($alt_button) {
$button = $alt_button;
}
my $IMAGE = qq~<img class="block auto" src="$image" style="width:100%;max-width:300px;height:auto" alt="$title">~;
$style = " $style ";
my $BUTTON;
if ($button && $link) {
$IMAGE = qq~<a href="$link">$IMAGE</a>~;
my ($c,$ml20);
if ($style =~ / center /) {
$c = "c";
} else {
$ml20 = " ml20";
}
$BUTTON = qq~<${c}block><a href="$link" class="button_green mt10 ml20">$button</a></${c}block>~;
}
my $CLASS = "box_white";
my $STYLE;
if ($style =~ /[a-z]/ && $style !~ /\;/) {
$CLASS = $style;
} else {
$STYLE .= $style;
}
$title =~ s~ \& ~ \&\; ~g;
$text1 =~ s~ \& ~ \&\; ~g;
$text2 =~ s~ \& ~ \&\; ~g;
my $TEXT = qq~<div class="mb5 col6 large">$text1</div><div class="mb5 col9 large">$text2</div>~;
my $CONTENT = qq~$IMAGE
<div class="rel" style="padding:0px 10px 0px 10px;bottom:10px">
<h2>$title</h2>
$TEXT
$BUTTON
</div>
~;
if ($CLASS =~ s/ title_top / /) {
$CONTENT = qq~<h2>$title</h2>
$IMAGE
<div class="rel" style="padding:0px 10px 0px 10px;bottom:10px">
$TEXT
$BUTTON
</div>
~;
}
my $BOX = qq~<div class="$CLASS auto" style="padding-top:10px;margin-bottom:20px;$STYLE">
<div class="inline w100">
$CONTENT
</div>
</div>
~;
return ONO::Render::Compress->compress($BOX);
}
###############################################################################
# show multiple infoboxes
###############################################################################
#
#: Display multiple infoboxes.
#:
#: Requires an array reference as input, containing the infobox data.
#:
#: You may use "HTML:..." as string to inject pure HTML code.
sub infoboxes {
my (
$self,
$boxes_ref,
$cols,
) = @_;
my @boxes = @$boxes_ref;
if ($cols < 1) {
$cols = 3;
}
my $SPACE = 33;
if ($cols == 1) {
$SPACE = 100;
}
if ($cols == 2) {
$SPACE = 50;
}
my $BOXES = qq~<div class="inline w100">~;
my ($WIDTH,$counter);
if ($cols > 1) {
$WIDTH = int(100/$cols);
$WIDTH = qq~ style="width:${WIDTH}%"~;
}
foreach my $box (@boxes) {
if ($box !~ /^#/) {
$counter++;
my @bp = split(/:/,$box);
$bp[7] .= "width:90%;max-width:360px";
if ($box =~ s~^HTML:~~) {
$BOXES .= qq~<div class="auto" style="width:300px">$box</div>~;
} else {
$BOXES .= qq~<div class="w${SPACE}_1000i fl fn1000">~;
$BOXES .= &infobox("",$bp[0],$bp[1],$bp[2],$bp[3],$bp[4],$bp[5],$bp[6],$bp[7]);
$BOXES .= qq~</div>~;
}
if ($counter%$cols == 0) {
$BOXES .= qq~</div><div class="inline w100">~;
}
}
}
$BOXES .= qq~</div>~;
return $BOXES;
}
###############################################################################
# end of script
###############################################################################
1;
__END__