ONO::Lib::UI::MenuBar
package ONO::Lib::UI::MenuBar;
################################################################################
# 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::UI::Form;
use ONO::Lib::Code::RandomID;
use ONO::FW::User::Init;
###############################################################################
# menu bar
###############################################################################
sub bar {
my (
$self,
$LINK,
$switches,
$tabs_ref,
$BLK_ref,
$vars_ref,
$setup_ref,
$short_urls_ref,
) = @_;
#: Display a menubar.
#: parts : 0 url
#: 1 text
#: 2 color
#: 3 icon
#: 4 alt langs (:en=example^de=beispiel^fr=exemple^...:)
#: -A automatically select the first item in the menubar
#: -b ignore base url
#: -B no border
#: -c center
#: -C custom main var
#: -e editor
#: -f filter mode
#: -F display flags (uses $vars{'menubar_flags'} + $vars{'menubar_flags_selected'})
#: -G signup (on the right, requires $setup{'login_page'}, see also -L)
#: -H hover mode
#: -i icon view
#: -I icon view: only icons, omit text
#: -l list view
#: -L login (on the right, requires $setup{'signup_page'}, see also -G)
#: -m modern style (additionally use -O switch for 2017 style)
#: -M modern style sub (additionally use -O switch for 2017 style)
#: -N narrow (useful to make modern style sub fit well under a modern menu)
#: -o bookmark
#: -O ONO style (in conjunction with -m and -M)
#: -p phone mode active (automatically switch to phone view if required)
#: -P phone mode displays current page title
#: -Q phone mode: inject code below selected item
#: -r use responsive mode -> NOW ALWAYS ACTIVE, UNLESS -v !!!
#: -s selected
#: -S submenu
#: -w wide
#: -W white selected tab
#: -t tab mode (not implemented yet)
#: -T tab mode (alternative)
#: -v vertical mode (warning: not all features may be supported in this mode)
#: -V white triangle indicates selected tab
#:
#: special links:
#:
#: * centered title
if ($switches =~ /v/) {
$switches =~ s/r//g;
} else {
$switches .= "r";
}
my @tabs = @$tabs_ref;
my $tabs_num = @tabs;
my %BLK = %$BLK_ref;
my %vars = %$vars_ref;
my (%setup,%short_urls);
if ($setup_ref) {
%setup = %$setup_ref;
}
if ($short_urls_ref) {
%short_urls = %$short_urls_ref;
}
my ($RETURN_SEL,$PHONE,$PHONE_TITLE,$VERTICAL,$SEARCH,$CLASS,$CLASS_PHONE,$CLASS_PHONE2,$BORDER_L,$BORDER_V);
my $rand = 10000+int(rand(9999));
my $ELINK = $LINK;
if ($setup{'editor_url'}) {
$ELINK = $setup{'editor_url'};
}
my $table = "default";
if ($switches =~ /w/) {
$table = "wide";
}
my $bar_white = "/ono/osr/images/bars/white.jpg";
my $bar_grey = "/ono/osr/images/bars/grey.jpg";
my $bar_color = "d0d0d0";
if ($setup{'style'} eq "button") {
$bar_white = "/ono/osr/images/buttons/default/grey.png";
$bar_grey = "/ono/osr/images/buttons/default/dark.png";
$bar_color = "dedede";
}
if ($switches =~ /m/) {
$bar_white = "/ono/osr/images/buttons/default/grey.png";
$bar_grey = "/ono/osr/images/buttons/default/dark.png";
}
if ($switches =~ /O/) {
$bar_white = "";
$bar_grey = "";
$bar_color = "ffffff";
}
my $MAIN_VAR = "menubar_section";
if ($switches =~ /C/ && $vars{'main_var'}) {
$MAIN_VAR = $vars{'main_var'};
}
my $BG = "background-color:#$bar_color;background-image:url('$bar_white');background-repeat:repeat-x";
if ($setup{'layout_color_menu'}) {
$BG = "background-color:#$setup{'layout_color_menu'}";
}
my $PADDING = "5px 15px 5px 15px";
my $BORDER = "border-left:1px solid #999999;border-right:1px solid #999999;";
my $BORDER_R = qq~ style="border-right:1px solid #999999"~;
if ($switches =~ /S/) {
$BG = "background-color:#f6f6f6";
$PADDING = "1px 10px 1px 10px";
$CLASS = " small";
$BORDER = "border-left:1px solid #cccccc;border-right:1px solid #cccccc;";
$BORDER_R = qq~ style="border-right:1px solid #cccccc"~;
}
if ($switches =~ /T/) {
$BG = "background-color:#f6f6f6";
$PADDING = "4px";
$CLASS = " small";
$BORDER = "";
$BORDER_L = qq~;border-left:1px solid #cccccc~;
}
if ($switches =~ /O/) {
$BG = "";
$BORDER = "border-left:1px solid #cccccc;border-right:1px solid #cccccc;";
$BORDER_R = qq~ style="border-right:1px solid #cccccc"~;
}
if ($switches =~ /(B|v)/) {
$BORDER = "";
$BORDER_R = "";
$BORDER_L = "";
}
if ($switches =~ /v/) {
$BORDER_V = qq~ bt bb~;
}
if ($switches =~ /f/) {
$MAIN_VAR = "filter";
}
if ($switches =~ /M/ && $switches !~ /O/) {
$BG = "background-color:#eeeeee;background-image:url('$bar_white')";
}
if ($setup{'padding'}) {
$PADDING = "$setup{'padding'}px";
}
if ($setup{'padding_h'} && $setup{'padding_v'}) {
$PADDING = "$setup{'padding_v'}px $setup{'padding_h'}px $setup{'padding_v'}px $setup{'padding_h'}px";
}
if ($vars{'menubar_option'} =~ s/^delete_//) {
$vars{$MAIN_VAR} = $vars{'menubar_option'};
}
if ($switches =~ /v/) {
$VERTICAL = qq~</tr><tr class="$BORDER_V" style="$BG$BORDER_L">~;
}
my $STYLE_E;
if ($switches !~ /O/) {
$STYLE_E = qq~ style="background-color:#eeeeee"~;
}
my $MENU .= qq~<table class="${table}_table$setup{'table_class'}"$STYLE_E>
<tr class="vtop$BORDER_V" style="$BG$BORDER_L">
~;
if ($switches =~ /w/ && $switches =~ /c/ && $switches !~ /r/) {
$MENU .= qq~ <td class="w50"></td>~;
}
if ($switches =~ /r/) {
$MENU .= qq~<td class="w100 p0" style="overflow:hidden">~;
}
my $menubar_query = "menubar_query";
if ($setup{'menubar_query'}) {
$menubar_query = $setup{'menubar_query'};
}
my $counter;
foreach my $tab (@tabs) {
if ($tab =~ /:/ && $tab !~ /^#/) {
$tab =~ s~(\n|\r|\t)~~g;
my @tp = split(/:/,$tab);
$counter++;
my $SUB;
if ($switches =~ /S/ && $vars{'menubar_parent'}) {
$SUB = "$vars{'menubar_parent'}_";
}
my $DELKEY = lc $tp[1];
$DELKEY =~ s~[^a-z0-9]~~g;
my $HREF = qq~$LINK&$MAIN_VAR=$SUB$tp[0]~;
my $TARGET;
if ($vars{'menubar_view'}) {
$HREF .= "&menubar_view=$vars{'menubar_view'}";
}
if ($vars{'menubar_lang'}) {
$HREF .= "&menubar_lang=$vars{'menubar_lang'}";
}
my @trans = split(/;/,"$setup{'transmit'};");
foreach my $transmit (@trans) {
if ($transmit =~ /[A-Za-z0-9]/ && $vars{$transmit}) {
$HREF .= qq~&$transmit=$vars{$transmit}~;
}
}
if ($vars{'render_base_url'} && $switches !~ /b/ && !$vars{'publisher_action'}) {
$HREF = "$vars{'render_base_url'}$SUB$tp[0]/";
if ($short_urls{$tp[0]}) {
$HREF = "/-$short_urls{$tp[0]}";
}
if ($short_urls{$tp[0]} eq "/") {
$HREF = "/";
}
}
my $ONCLICK = qq~window.location='$HREF';~;
my $STYLE = qq~color:#333333;~;
my $COLOR = qq~ col3~;
my ($COLOR_STYLE,$CLASS_PHONE);
my $CLASS_PHONE2 = "col3";
if ($setup{'layout_color_menu_text'}) {
$STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
$COLOR = "";
$COLOR_STYLE = qq~;color:#$setup{'layout_color_menu_text'};~;
}
my ($DIV_ON,$DIV_OFF);
if ($switches =~ /T/) {
$DIV_ON = qq~<div class="" style="padding:0px 8px 0px 8px;line-height:150%">~;
$DIV_OFF = qq~</div>~;
}
my $is_selected;
if ($vars{'mode'} eq $tp[0] || $vars{$MAIN_VAR} eq $tp[0] || $vars{$MAIN_VAR} =~ /^$tp[0]_/ || $vars{'menubar_select_number'} == $counter ||
$vars{$MAIN_VAR} eq "$vars{'menubar_parent'}_$tp[0]" || ($setup{'menubar_pathselect'} =~ /:$tp[0]:/ && $short_urls{$tp[0]} ne "/") || $vars{'menubar_subsection'} eq $tp[0] ||
($switches =~ /A/ && $counter == 1)) {
$is_selected++;
$RETURN_SEL = "<!-- menu_selection:$tp[0]:$tp[1] -->";
$PHONE_TITLE = $tp[1];
if ($setup{'menubar_phone_title_pre'}) {
$PHONE_TITLE = "$setup{'menubar_phone_title_pre'}$tp[1]";
}
($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2) = &_selected_style("",$bar_grey,$counter,\%setup,$switches);
}
if ($tp[0] =~ /\./ && $tp[0] !~ /^URL;/) {
$ONCLICK = qq~$tp[0];~;
$HREF = qq~#~;
}
if ($tp[0] =~ /^\//) {
$ONCLICK = qq~window.location='$tp[0]'~;
$HREF = $tp[0];
}
if ($tp[0] =~ /^URL;(.*?);(.*?);(.*?)$/) {
my $dat1 = $1;
my $dat2 = $2;
my $dat3 = $3;
if ($switches =~ /e/ && !$vars{'publisher_action'}) {
$HREF .= "&menubar_ext=URL&menubar_ext_id=$dat1";
$ONCLICK = qq~window.location='$HREF'~;
} else {
$HREF = "$dat2://$dat3";
$ONCLICK = qq~window.open='$HREF'~;
$TARGET = qq~ target="_blank"~;
}
}
if ($tp[0] =~ /onojs_/) {
$HREF = "javascript:void(0);";
$ONCLICK = "$tp[0]";
}
if ($tp[2]) {
$STYLE = qq~background-image:url('/ono/osr/images/bars/$tp[2].jpg')~;
if ($tp[2] !~ /^light/) {
$COLOR = qq~ cole~;
}
}
my ($ONMOUSE,$ONMOUSE1,$ONMOUSE2,$DEL);
if ($switches =~ /e/) {
$ONCLICK = "";
my $opt;
if ($switches =~ /S/) {
$opt = "_submenu";
}
my $TP = $tp[0];
$TP =~ s~;~\%3B~g;
$ONMOUSE1 .= "onojs_block('menu_del_$DELKEY$SUB$tp[0]');";
$ONMOUSE2 .= "onojs_hide('menu_del_$DELKEY$SUB$tp[0]');";
$DEL = qq~<div id="menu_del_$DELKEY$SUB$tp[0]" class="abs hide">
<div class="rel" style="right:14px;bottom:7px">
<a href="$ELINK&menubar_parent=$vars{'menubar_parent'}&menubar_option=delete${opt}_${TP}_$DELKEY">
<img class="block16" src="/ono/osr/images/icons/ono/32x32/delete.png" alt="delete">
</a>
</div>
</div>
~;
}
if ($switches =~ /H/ && !$is_selected) {
my $col = $setup{'layout_color_menu_sel'};
if ($setup{"layout_color_menu_tab_$counter"}) {
$col = $setup{"layout_color_menu_tab_$counter"};
}
$ONMOUSE1 .= "document.getElementById('menubar_tabdiv_$SUB$tp[0]').style.backgroundColor='#$col';
document.getElementById('menubar_tablink_$SUB$tp[0]').style.color='#$setup{'layout_color_menu_text_sel'}';";
$ONMOUSE2 .= "document.getElementById('menubar_tabdiv_$SUB$tp[0]').style.backgroundColor='#$setup{'layout_color_menu'}';
document.getElementById('menubar_tablink_$SUB$tp[0]').style.color='#$setup{'layout_color_menu_text'}';";
}
if ($ONMOUSE1) {
$ONMOUSE .= qq~ onmouseover="$ONMOUSE1" ~;
}
if ($ONMOUSE2) {
$ONMOUSE .= qq~ onmouseout="$ONMOUSE2" ~;
}
my $ICON;
if ($tp[3]) {
my $size = 16;
if ($switches =~ /I/) {
$size = 32;
}
$ICON = qq~<img class="inline${size} mr5 rel" src="/ono/osr/images/icons/crystal/${size}x${size}/$tp[3].png" style="top:2px" alt="">~;
}
if ($vars{'menubar_lang'} && $tp[4] =~ /[a-z]/) {
$tp[4] = "\^$tp[4]\^";
foreach my $tp4 (split(/\^/,$tp[4])) {
if ($tp4 =~ m~^$vars{'menubar_lang'}=(.*?)$~) {
my $alt = $1;
if ($alt =~ /[A-Za-z0-9]/) {
$tp[1] = $alt;
}
}
}
}
if ($switches =~ /I/) {
$tp[1] = "";
}
if ($switches =~ /s/) {
$STYLE .= qq~min-height:26px;~;
$tp[1] = qq~<div style="padding:2px 0px 2px 0px">$tp[1]</div>~;
}
if ($switches =~ /V/ && $is_selected) {
$MENU .= qq~ <div id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left" onclick="$ONCLICK"$ONMOUSE>
<div class="rel">
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
<div class="auto" style="width:20px">
<div class="rel" style="right:2px">
<img class="block16 abs" src="/ono/osr/images/arrows/nuvola/white/nav_up.png" style="bottom:-14px;width:24px" alt="">
</div>
</div>
</div>
</div>
~;
} else {
if ($vars{'menubar_responsive_text_small'}) {
$tp[1] = qq~<span class="hide$vars{'menubar_responsive_text_small'}">$tp[1]</span><span class="small hide inline$vars{'menubar_responsive_text_small'}">$tp[1]</span>~;
}
if ($vars{'menubar_responsive_text_hide'} && $ICON) {
$tp[1] = qq~<span class="hide$vars{'menubar_responsive_text_hide'}">$tp[1]</span>~;
}
if ($switches =~ /r/) {
$MENU .= qq~ <div id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left" onclick="$ONCLICK"$ONMOUSE>
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
</div>
~;
} else {
$MENU .= qq~ <td id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER" onclick="$ONCLICK"$ONMOUSE>
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
</td>
~;
}
}
if ($counter < $tabs_num) {
$MENU .= $VERTICAL;
}
if ($switches =~ /p/) {
my $STYLE;
if ($setup{'layout_color_menu_mobile_text'}) {
$STYLE = qq~ style="color:#$setup{'layout_color_menu_mobile_text'}"~;
}
$PHONE .= qq~<tr onclick="$ONCLICK" class="$CLASS_PHONE"><td class="large bb" style="padding:0px 30px 0px 30px;height:48px"><a href="$HREF"$TARGET class="$CLASS_PHONE2"$STYLE>$tp[1]</a></td></tr>~;
if (($switches =~ /Q/ && $is_selected) || $tp[0] eq $setup{'menubar_phone_menu_inject'}) {
$PHONE .= qq~<tr class="$CLASS_PHONE"><td class="p5"><div class="box_paper flat_all p5 noshadow">###_PHONE_MENU_INJECT_###</div></td></tr>~;
}
}
}
}
if ($switches =~ /r/) {
$MENU .= qq~</td>~;
}
if ($switches =~ /e/) {
my ($opt,$section);
if ($switches =~ /S/) {
$opt = "_submenu";
$section = "&$MAIN_VAR=$vars{$MAIN_VAR}";
}
$MENU .= qq~ <td>
<a href="$ELINK&menubar_option=add$opt&menubar_parent=$vars{'menubar_parent'}$section">
<img class="block16 ml10" src="/ono/osr/images/icons/ono/32x32/add.png" alt="add">
</a>
</td>
<td>
<a href="$ELINK&menubar_option=sort$opt&menubar_parent=$vars{'menubar_parent'}">
<img class="block16 ml5 mr10" src="/ono/osr/images/icons/ono/32x32/move.png" alt="move">
</a>
</td>
~;
}
if ($switches =~ /w/ && $switches !~ /v/) {
if ($switches =~ /c/) {
$MENU .= qq~ <td class="w50"></td>~;
} else {
$MENU .= qq~ <td class="w100"></td>~;
}
}
if ($switches =~ /o/ && $vars{'menubar_bookmark'}) {
$MENU .= qq~ <td><a href="$vars{'menubar_bookmark'}"><img class="block24" src="/ono/osr/images/icons/crystal/32x32/ono/bookmark.png" alt="bookmark"></a></td>~;
}
if ($switches =~ /F/ && $vars{'menubar_flags'} =~ /:/) {
$MENU .= qq~<td><table class="default_table mr10"><tr>~;
foreach my $flag (split(/:/,$vars{'menubar_flags'})) {
if (length $flag == 2) {
if (!$vars{'menubar_flags_selected'} && !$vars{'menubar_lang'}) {
$vars{'menubar_flags_selected'} = $flag;
}
my $STYLE;
if ($flag eq $vars{'menubar_flags_selected'} || $flag eq $vars{'menubar_lang'}) {
$STYLE = qq~ style="width:24px;height:18px"~;
}
my $FLINK = $LINK;
if ($vars{'publisher_page'}) {
$FLINK .= "&publisher_page=$vars{'publisher_page'}";
}
$FLINK =~ s~\&\;menubar_lang=(.*?)\&\;~\&\;~;
$FLINK =~ s~\&\;menubar_lang=(.*)$~~;
$FLINK = "$FLINK&menubar_lang=$flag";
# default:
# not implemented yet
# this makes websites compatible with oli.education.lu:
if ($ENV{'REQUEST_URI'} =~ m~/(.*?)/(.*?)/(web|schoolweb)/-/(.*?)/(.*?)/~) {
$FLINK = "/$1/$flag/$3/-/$4/$5/";
} else {
if ($ENV{'REQUEST_URI'} =~ m~/(.*?)/(.*?)/(web|schoolweb)/-/(.*?)/~) {
$FLINK = "/$1/$flag/$3/-/$4/";
}
}
$MENU .= qq~<td style="padding-left:4px">
<div class="shadow"><a href="$FLINK"><img class="flag" src="/ono/osr/images/flags/countries_large_tld/$flag.jpg"$STYLE alt="language"></a></div>
</td>
~;
}
}
$MENU .= qq~</tr></table></td>~;
}
if ($switches =~ /L/ && $setup{'login_page'}) {
my $LOGIN_STYLE = qq~color:#333333;~;
if ($setup{'layout_color_menu_text'}) {
$LOGIN_STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
}
my $LOGIN = $BLK{'Login'};
my $LOGIN_PAGE = $setup{'login_page'};
if ($setup{'login_page'} =~ /custom-login-ext/ && $vars{'ono_web_login_ext'}) {
$LOGIN_PAGE = $vars{'ono_web_login_ext'};
}
# both username AND sid required here !!!
if ($vars{'username'} && $vars{'sid'} && !$vars{'publisher_action'}) {
$LOGIN = $vars{'username'};
$LOGIN_PAGE = "$setup{'login_page'}&menubar_option=user_details";
}
my ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON);
if ($ENV{'REQUEST_URI'} =~ m~$setup{'login_page'}~) {
($STYLE,$COLOR,$LOGIN_STYLE,$DIV_ON) = &_selected_style("",$bar_grey,0,\%setup,$switches);
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
if ($vars{'username'}) {
my $PROIMG = ONO::FW::User::Init->profileimage($vars{'username'},24);
$MENU .= qq~<td>$PROIMG</td>~;
}
if ($vars{'username'} && $vars{'sid'} && ($setup{'login_page'} =~ /custom-login/ || $vars{'ono_web_loginlogout'})) {
# custom-login (and logout, required for oli.education.lu)
$MENU .= qq~<td class="p0">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<span class="bold $COLOR" style="$LOGIN_STYLE">$vars{'username'}</span>
</div>
</td>
<td class="p0" onclick="window.location='$vars{'ono_web_logout_url'}';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$vars{'ono_web_logout_url'}" class="$COLOR" style="$LOGIN_STYLE;text-decoration:none">$BLK{'Logout'}</a>
</div>
</td>
~;
} else {
$MENU .= qq~<td class="p0" onclick="window.location='$LOGIN_PAGE';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$LOGIN_PAGE" class="$COLOR" style="$LOGIN_STYLE;text-decoration:none">$LOGIN</a>
</div>
</td>
~;
}
}
if ($switches =~ /G/ && $setup{'signup_page'}) {
my $SIGNUP_STYLE = qq~color:#333333;~;
if ($setup{'layout_color_menu_text'}) {
$SIGNUP_STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
}
my $SIGNUP = $BLK{'Signup'};
my $SIGNUP_PAGE = $setup{'signup_page'};
# both username AND sid required here !!!
if ($vars{'username'} && $vars{'sid'} && !$vars{'publisher_action'}) {
$SIGNUP = $BLK{'Logout'};
$SIGNUP_PAGE = "$setup{'signup_page'}&menubar_option=user_logout";
}
my ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON);
if ($ENV{'REQUEST_URI'} =~ m~$setup{'signup_page'}~) {
($STYLE,$COLOR,$SIGNUP_STYLE,$DIV_ON) = &_selected_style("",$bar_grey,0,\%setup,$switches);
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
$MENU .= qq~<td class="p0" onclick="window.location='$SIGNUP_PAGE';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$SIGNUP_PAGE" class="$COLOR" style="$SIGNUP_STYLE;text-decoration:none">$SIGNUP</a>
</div>
</td>
~;
}
if ($switches =~ /s/) {
$SEARCH = ONO::Lib::UI::Form->search($menubar_query,$vars{"$menubar_query"},$BLK{'search'},160,"dark");
my $HIDE;
if ($vars{'menubar_responsive_search_hide'}) {
$HIDE = qq~ class="hide$vars{'menubar_responsive_search_hide'}"~;
}
$MENU .= qq~ <td$HIDE>$SEARCH</td>~;
}
if ($switches =~ /(i|l)/) {
$MENU .= qq~<td></td>~;
my ($opti,$optl,$lighti,$lightl);
if (!$vars{'menubar_view'} || $vars{'menubar_view'} eq "icons") {
$opti .= "_dark button_pressed";
$lighti .= "_light";
}
if ($vars{'menubar_view'} eq "list") {
$optl .= "_dark button_pressed";
$lightl .= "_light";
}
if ($switches =~ /i/ && $switches =~ /l/) {
$opti .= " button_left";
$optl .= " button_right";
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
if ($switches =~ /i/) {
$MENU .= qq~<td style="padding:2px 0px 0px 0px">
<a href="$LINK&menubar_subsection=$vars{'menubar_subsection'}&$MAIN_VAR=$vars{$MAIN_VAR}" class="button$opti" style="height:16px">
<img class="block16" src="/ono/osr/images/icons/crystal/16x16/ono/view_icons$lighti.png" alt="icons">
</a>
</td>
~;
}
if ($switches =~ /l/) {
$MENU .= qq~<td style="padding:2px 0px 0px 0px">
<a href="$LINK&menubar_subsection=$vars{'menubar_subsection'}&$MAIN_VAR=$vars{$MAIN_VAR}&menubar_view=list" class="button$optl" style="height:16px">
<img class="block16" src="/ono/osr/images/icons/crystal/16x16/ono/view_list$lightl.png" alt="list">
</a>
</td>
~;
}
}
$MENU .= qq~ <td$BORDER_R></td>
</tr>
</table>
$RETURN_SEL
~;
$MENU =~ s~\&\;menubar_view\=\"~\"~g;
$MENU =~ s~\&\;menubar_view\=\'~\'~g;
if ($switches =~ /m/i) {
my $border = "border:1px solid #777777";
my $bottom;
if ($switches =~ /M/) {
$border = "border-bottom:1px solid #777777;border-left:1px solid #777777;border-right:1px solid #777777";
$bottom = "bot";
}
my $SHADOW = " shadow";
if ($switches =~ /O/) {
$border = "background-color:#ffffff;border:1px solid #cccccc";
$SHADOW = "";
}
$MENU = qq~<div class="radius5$bottom$SHADOW" style="padding:0px 5px 0px 5px;background-image:url('$bar_white');$border">$MENU</div>~;
}
if ($switches =~ /v/) {
$MENU =~ s~<td></td>~~g;
}
if ($switches =~ /N/) {
$MENU = qq~<div style="padding:0px 5px 0px 5px">$MENU</div>~;
}
if ($switches =~ /p/) {
my ($DISPLAY,$SEARCH,$lang,$hide1,$hide2);
if ($switches =~ /P/ && $PHONE_TITLE) {
my $size = "xlarge";
if (length $PHONE_TITLE > 15) {
$size = "large";
if (length $PHONE_TITLE > 20) {
$size = "small";
}
}
if ($switches =~ /s/) {
if (!$vars{"${menubar_query}_phone"}) {
$hide1 = " hide";
} else {
$hide2 = "hide";
}
$SEARCH = ONO::Lib::UI::Form->search("${menubar_query}_phone",$vars{"${menubar_query}_phone"},$BLK{'search'},200,"dark");
$SEARCH = qq~<div class="abs" style="top:0px;right:-5px">
<div id="menubar_phone_search_ico" onclick="onojs_block('menubar_phone_search');onojs_hide('menubar_phone_search_ico');" class="$hide2">
<img class="block32 mr5" src="/ono/osr/images/icons/crystal/32x32/actions/mail_find.png" alt="search">
</div>
<div id="menubar_phone_search" class="abs$hide1" style="top:0px;right:0px">
$SEARCH
</div>
</div>
~;
}
$DISPLAY = qq~<div class="rel">
<div class="$size col9 rel" style="max-width:95%;overflow:hidden;height:32px;top:5px">
<div class="nowrap" style="max-width:240px">$PHONE_TITLE</div>
</div>
$SEARCH
</div>
~;
}
my $NAV = &phone(
"",
$PHONE,
$DISPLAY,
"",
$lang,
"",
"web",
"",
$setup_ref,
$counter,
);
$MENU = qq~<div class="hide800">$MENU</div>
<div class="rel hide inline800">$NAV</div>
~;
}
return $MENU;
}
sub _selected_style {
#: Menubar style internal subroutine.
my (
$self,
$bar_grey,
$counter,
$setup_ref,
$switches,
) = @_;
my %setup = %$setup_ref;
my $STYLE = qq~background-color:#333333;background-image:url('$bar_grey');color:#eeeeee;~;
$STYLE .= qq~box-shadow:inset 0 0 5px #000000;-moz-box-shadow:inset 0 0 5px #000000;-webkit-box-shadow:inset 0 0 5px #000000~;
my $COLOR = qq~ cole~;
my ($COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2);
if ($switches =~ /S/) {
$STYLE = qq~background-color:#dddddd;color:#333333~;
$COLOR = qq~ col3~;
}
if ($switches =~ /T/) {
$STYLE = qq~~;
$COLOR = qq~ cole~;
$DIV_ON = qq~<div class="shadow_inset_black radius10" style="background-color:#333333;background-image:url('$bar_grey');padding:0px 10px 0px 10px;line-height:150%">~;
}
if ($switches =~ /W/) {
$STYLE = qq~background-color:#ffffff;border-top:1px solid #999999~;
$COLOR = qq~ col3~;
}
if ($switches =~ /V/) {
$STYLE = "";
$COLOR = " col3";
}
if ($setup{'layout_color_menu_sel'}) {
$STYLE = qq~background-color:#$setup{'layout_color_menu_sel'};~;
if ($setup{"layout_color_menu_tab_$counter"}) {
$STYLE = qq~background-color:#$setup{"layout_color_menu_tab_$counter"};~;
}
$COLOR = "";
$COLOR_STYLE = ";color:#$setup{'layout_color_menu_text_sel'}";
}
if ($setup{'layout_menu_selected_bold'}) {
$COLOR .= " bold";
}
$CLASS_PHONE = "bg_black cole";
$CLASS_PHONE2 = "cole";
return ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2);
}
sub phone {
my (
$self,
$NAV,
$DISPLAY,
$FLAGS,
$lang_local,
$flag_style,
$CSS,
$BASE,
$setup_ref,
$counter,
) = @_;
#: Phone / mobile device menubar alternative.
my $ID = ONO::Lib::Code::RandomID->make;
my ($ICON,%setup);
if ($setup_ref) {
%setup = %$setup_ref;
}
if ($FLAGS) {
$FLAGS = qq~<td id="menu_td_flags2" class="nowrap ${CSS}_menu p0" onclick = "onojs_block('menu_tab_flags2');">
<img class="flag" src="$BASE/ono/osr/images/flags/languages/$lang_local.png" style="$flag_style" alt="language $lang_local">
$FLAGS
</td>
~;
}
if (!$setup{'layout_color_menu_mobile_background'}) {
$setup{'layout_color_menu_mobile_background'} = "ffffff";
}
if (!$setup{'layout_color_menu_mobile_text'}) {
$setup{'layout_color_menu_mobile_text'} = "333333";
}
if ($counter > 1) {
$ICON = qq~<div class="trans80 auto w80" style="width:40px">
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
<div style="padding:3px"></div>
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
<div style="padding:3px"></div>
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
</div>
~;
}
if ($setup{'phone_menu_icon'}) {
$ICON = $setup{'phone_menu_icon'};
}
return qq~<input type="hidden" id="phone_nav_toggle_$ID" name="phone_nav_toggle_$ID" value="">
<table class="wide_table ${CSS}_nav bb" style="z-index:99;background-color:#$setup{'layout_color_menu_mobile_background'}">
<tr>
<td class="${CSS}_menu p10 cursorlink" onclick="onojs_phone_nav_toggle('$ID');">
$ICON
<div id="phone_nav_$ID" class="shadow abs hide" style="z-index:99;top:0px;margin-left:50px;background-color:#$setup{'layout_color_menu_mobile_background'}">
<table class="default_table">$NAV</table>
</div>
</td>
<td class="${CSS}_menu w100">$DISPLAY</td>
<td class="${CSS}_menu p0"><img class="block" src="$BASE/ono/osr/images/spacer/trans.gif" style="width:1px;height:48px" alt=""></td>
$FLAGS
<td class="${CSS}_menu p5"></td>
</tr>
</table>
~;
}
sub vertical_menu {
#: Vertical menu.
my (
$self,
$script_url,
$menu_ref,
$selected,
) = @_;
my @menus = @$menu_ref;
my $MENU;
foreach my $menu (@menus) {
my @sp = split(/:/,$menu);
my ($SEL1,$SEL2);
if ($sp[0] eq $selected) {
$SEL1 = " bg_fabric";
$SEL2 = " bold";
}
$MENU .= qq~<tr class="bt bb row$SEL1" onclick="window.location='$script_url=$sp[0]';">
<td class="p5">
<div class="pad10_2"><a href="$script_url=$sp[0]" class="col3$SEL2">$sp[1]</a></div>
</td>
</tr>
~;
}
return qq~<table class="wide_table bt bb">$MENU</table>~;
}
###############################################################################
# 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::UI::Form;
use ONO::Lib::Code::RandomID;
use ONO::FW::User::Init;
###############################################################################
# menu bar
###############################################################################
sub bar {
my (
$self,
$LINK,
$switches,
$tabs_ref,
$BLK_ref,
$vars_ref,
$setup_ref,
$short_urls_ref,
) = @_;
#: Display a menubar.
#: parts : 0 url
#: 1 text
#: 2 color
#: 3 icon
#: 4 alt langs (:en=example^de=beispiel^fr=exemple^...:)
#: -A automatically select the first item in the menubar
#: -b ignore base url
#: -B no border
#: -c center
#: -C custom main var
#: -e editor
#: -f filter mode
#: -F display flags (uses $vars{'menubar_flags'} + $vars{'menubar_flags_selected'})
#: -G signup (on the right, requires $setup{'login_page'}, see also -L)
#: -H hover mode
#: -i icon view
#: -I icon view: only icons, omit text
#: -l list view
#: -L login (on the right, requires $setup{'signup_page'}, see also -G)
#: -m modern style (additionally use -O switch for 2017 style)
#: -M modern style sub (additionally use -O switch for 2017 style)
#: -N narrow (useful to make modern style sub fit well under a modern menu)
#: -o bookmark
#: -O ONO style (in conjunction with -m and -M)
#: -p phone mode active (automatically switch to phone view if required)
#: -P phone mode displays current page title
#: -Q phone mode: inject code below selected item
#: -r use responsive mode -> NOW ALWAYS ACTIVE, UNLESS -v !!!
#: -s selected
#: -S submenu
#: -w wide
#: -W white selected tab
#: -t tab mode (not implemented yet)
#: -T tab mode (alternative)
#: -v vertical mode (warning: not all features may be supported in this mode)
#: -V white triangle indicates selected tab
#:
#: special links:
#:
#: * centered title
if ($switches =~ /v/) {
$switches =~ s/r//g;
} else {
$switches .= "r";
}
my @tabs = @$tabs_ref;
my $tabs_num = @tabs;
my %BLK = %$BLK_ref;
my %vars = %$vars_ref;
my (%setup,%short_urls);
if ($setup_ref) {
%setup = %$setup_ref;
}
if ($short_urls_ref) {
%short_urls = %$short_urls_ref;
}
my ($RETURN_SEL,$PHONE,$PHONE_TITLE,$VERTICAL,$SEARCH,$CLASS,$CLASS_PHONE,$CLASS_PHONE2,$BORDER_L,$BORDER_V);
my $rand = 10000+int(rand(9999));
my $ELINK = $LINK;
if ($setup{'editor_url'}) {
$ELINK = $setup{'editor_url'};
}
my $table = "default";
if ($switches =~ /w/) {
$table = "wide";
}
my $bar_white = "/ono/osr/images/bars/white.jpg";
my $bar_grey = "/ono/osr/images/bars/grey.jpg";
my $bar_color = "d0d0d0";
if ($setup{'style'} eq "button") {
$bar_white = "/ono/osr/images/buttons/default/grey.png";
$bar_grey = "/ono/osr/images/buttons/default/dark.png";
$bar_color = "dedede";
}
if ($switches =~ /m/) {
$bar_white = "/ono/osr/images/buttons/default/grey.png";
$bar_grey = "/ono/osr/images/buttons/default/dark.png";
}
if ($switches =~ /O/) {
$bar_white = "";
$bar_grey = "";
$bar_color = "ffffff";
}
my $MAIN_VAR = "menubar_section";
if ($switches =~ /C/ && $vars{'main_var'}) {
$MAIN_VAR = $vars{'main_var'};
}
my $BG = "background-color:#$bar_color;background-image:url('$bar_white');background-repeat:repeat-x";
if ($setup{'layout_color_menu'}) {
$BG = "background-color:#$setup{'layout_color_menu'}";
}
my $PADDING = "5px 15px 5px 15px";
my $BORDER = "border-left:1px solid #999999;border-right:1px solid #999999;";
my $BORDER_R = qq~ style="border-right:1px solid #999999"~;
if ($switches =~ /S/) {
$BG = "background-color:#f6f6f6";
$PADDING = "1px 10px 1px 10px";
$CLASS = " small";
$BORDER = "border-left:1px solid #cccccc;border-right:1px solid #cccccc;";
$BORDER_R = qq~ style="border-right:1px solid #cccccc"~;
}
if ($switches =~ /T/) {
$BG = "background-color:#f6f6f6";
$PADDING = "4px";
$CLASS = " small";
$BORDER = "";
$BORDER_L = qq~;border-left:1px solid #cccccc~;
}
if ($switches =~ /O/) {
$BG = "";
$BORDER = "border-left:1px solid #cccccc;border-right:1px solid #cccccc;";
$BORDER_R = qq~ style="border-right:1px solid #cccccc"~;
}
if ($switches =~ /(B|v)/) {
$BORDER = "";
$BORDER_R = "";
$BORDER_L = "";
}
if ($switches =~ /v/) {
$BORDER_V = qq~ bt bb~;
}
if ($switches =~ /f/) {
$MAIN_VAR = "filter";
}
if ($switches =~ /M/ && $switches !~ /O/) {
$BG = "background-color:#eeeeee;background-image:url('$bar_white')";
}
if ($setup{'padding'}) {
$PADDING = "$setup{'padding'}px";
}
if ($setup{'padding_h'} && $setup{'padding_v'}) {
$PADDING = "$setup{'padding_v'}px $setup{'padding_h'}px $setup{'padding_v'}px $setup{'padding_h'}px";
}
if ($vars{'menubar_option'} =~ s/^delete_//) {
$vars{$MAIN_VAR} = $vars{'menubar_option'};
}
if ($switches =~ /v/) {
$VERTICAL = qq~</tr><tr class="$BORDER_V" style="$BG$BORDER_L">~;
}
my $STYLE_E;
if ($switches !~ /O/) {
$STYLE_E = qq~ style="background-color:#eeeeee"~;
}
my $MENU .= qq~<table class="${table}_table$setup{'table_class'}"$STYLE_E>
<tr class="vtop$BORDER_V" style="$BG$BORDER_L">
~;
if ($switches =~ /w/ && $switches =~ /c/ && $switches !~ /r/) {
$MENU .= qq~ <td class="w50"></td>~;
}
if ($switches =~ /r/) {
$MENU .= qq~<td class="w100 p0" style="overflow:hidden">~;
}
my $menubar_query = "menubar_query";
if ($setup{'menubar_query'}) {
$menubar_query = $setup{'menubar_query'};
}
my $counter;
foreach my $tab (@tabs) {
if ($tab =~ /:/ && $tab !~ /^#/) {
$tab =~ s~(\n|\r|\t)~~g;
my @tp = split(/:/,$tab);
$counter++;
my $SUB;
if ($switches =~ /S/ && $vars{'menubar_parent'}) {
$SUB = "$vars{'menubar_parent'}_";
}
my $DELKEY = lc $tp[1];
$DELKEY =~ s~[^a-z0-9]~~g;
my $HREF = qq~$LINK&$MAIN_VAR=$SUB$tp[0]~;
my $TARGET;
if ($vars{'menubar_view'}) {
$HREF .= "&menubar_view=$vars{'menubar_view'}";
}
if ($vars{'menubar_lang'}) {
$HREF .= "&menubar_lang=$vars{'menubar_lang'}";
}
my @trans = split(/;/,"$setup{'transmit'};");
foreach my $transmit (@trans) {
if ($transmit =~ /[A-Za-z0-9]/ && $vars{$transmit}) {
$HREF .= qq~&$transmit=$vars{$transmit}~;
}
}
if ($vars{'render_base_url'} && $switches !~ /b/ && !$vars{'publisher_action'}) {
$HREF = "$vars{'render_base_url'}$SUB$tp[0]/";
if ($short_urls{$tp[0]}) {
$HREF = "/-$short_urls{$tp[0]}";
}
if ($short_urls{$tp[0]} eq "/") {
$HREF = "/";
}
}
my $ONCLICK = qq~window.location='$HREF';~;
my $STYLE = qq~color:#333333;~;
my $COLOR = qq~ col3~;
my ($COLOR_STYLE,$CLASS_PHONE);
my $CLASS_PHONE2 = "col3";
if ($setup{'layout_color_menu_text'}) {
$STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
$COLOR = "";
$COLOR_STYLE = qq~;color:#$setup{'layout_color_menu_text'};~;
}
my ($DIV_ON,$DIV_OFF);
if ($switches =~ /T/) {
$DIV_ON = qq~<div class="" style="padding:0px 8px 0px 8px;line-height:150%">~;
$DIV_OFF = qq~</div>~;
}
my $is_selected;
if ($vars{'mode'} eq $tp[0] || $vars{$MAIN_VAR} eq $tp[0] || $vars{$MAIN_VAR} =~ /^$tp[0]_/ || $vars{'menubar_select_number'} == $counter ||
$vars{$MAIN_VAR} eq "$vars{'menubar_parent'}_$tp[0]" || ($setup{'menubar_pathselect'} =~ /:$tp[0]:/ && $short_urls{$tp[0]} ne "/") || $vars{'menubar_subsection'} eq $tp[0] ||
($switches =~ /A/ && $counter == 1)) {
$is_selected++;
$RETURN_SEL = "<!-- menu_selection:$tp[0]:$tp[1] -->";
$PHONE_TITLE = $tp[1];
if ($setup{'menubar_phone_title_pre'}) {
$PHONE_TITLE = "$setup{'menubar_phone_title_pre'}$tp[1]";
}
($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2) = &_selected_style("",$bar_grey,$counter,\%setup,$switches);
}
if ($tp[0] =~ /\./ && $tp[0] !~ /^URL;/) {
$ONCLICK = qq~$tp[0];~;
$HREF = qq~#~;
}
if ($tp[0] =~ /^\//) {
$ONCLICK = qq~window.location='$tp[0]'~;
$HREF = $tp[0];
}
if ($tp[0] =~ /^URL;(.*?);(.*?);(.*?)$/) {
my $dat1 = $1;
my $dat2 = $2;
my $dat3 = $3;
if ($switches =~ /e/ && !$vars{'publisher_action'}) {
$HREF .= "&menubar_ext=URL&menubar_ext_id=$dat1";
$ONCLICK = qq~window.location='$HREF'~;
} else {
$HREF = "$dat2://$dat3";
$ONCLICK = qq~window.open='$HREF'~;
$TARGET = qq~ target="_blank"~;
}
}
if ($tp[0] =~ /onojs_/) {
$HREF = "javascript:void(0);";
$ONCLICK = "$tp[0]";
}
if ($tp[2]) {
$STYLE = qq~background-image:url('/ono/osr/images/bars/$tp[2].jpg')~;
if ($tp[2] !~ /^light/) {
$COLOR = qq~ cole~;
}
}
my ($ONMOUSE,$ONMOUSE1,$ONMOUSE2,$DEL);
if ($switches =~ /e/) {
$ONCLICK = "";
my $opt;
if ($switches =~ /S/) {
$opt = "_submenu";
}
my $TP = $tp[0];
$TP =~ s~;~\%3B~g;
$ONMOUSE1 .= "onojs_block('menu_del_$DELKEY$SUB$tp[0]');";
$ONMOUSE2 .= "onojs_hide('menu_del_$DELKEY$SUB$tp[0]');";
$DEL = qq~<div id="menu_del_$DELKEY$SUB$tp[0]" class="abs hide">
<div class="rel" style="right:14px;bottom:7px">
<a href="$ELINK&menubar_parent=$vars{'menubar_parent'}&menubar_option=delete${opt}_${TP}_$DELKEY">
<img class="block16" src="/ono/osr/images/icons/ono/32x32/delete.png" alt="delete">
</a>
</div>
</div>
~;
}
if ($switches =~ /H/ && !$is_selected) {
my $col = $setup{'layout_color_menu_sel'};
if ($setup{"layout_color_menu_tab_$counter"}) {
$col = $setup{"layout_color_menu_tab_$counter"};
}
$ONMOUSE1 .= "document.getElementById('menubar_tabdiv_$SUB$tp[0]').style.backgroundColor='#$col';
document.getElementById('menubar_tablink_$SUB$tp[0]').style.color='#$setup{'layout_color_menu_text_sel'}';";
$ONMOUSE2 .= "document.getElementById('menubar_tabdiv_$SUB$tp[0]').style.backgroundColor='#$setup{'layout_color_menu'}';
document.getElementById('menubar_tablink_$SUB$tp[0]').style.color='#$setup{'layout_color_menu_text'}';";
}
if ($ONMOUSE1) {
$ONMOUSE .= qq~ onmouseover="$ONMOUSE1" ~;
}
if ($ONMOUSE2) {
$ONMOUSE .= qq~ onmouseout="$ONMOUSE2" ~;
}
my $ICON;
if ($tp[3]) {
my $size = 16;
if ($switches =~ /I/) {
$size = 32;
}
$ICON = qq~<img class="inline${size} mr5 rel" src="/ono/osr/images/icons/crystal/${size}x${size}/$tp[3].png" style="top:2px" alt="">~;
}
if ($vars{'menubar_lang'} && $tp[4] =~ /[a-z]/) {
$tp[4] = "\^$tp[4]\^";
foreach my $tp4 (split(/\^/,$tp[4])) {
if ($tp4 =~ m~^$vars{'menubar_lang'}=(.*?)$~) {
my $alt = $1;
if ($alt =~ /[A-Za-z0-9]/) {
$tp[1] = $alt;
}
}
}
}
if ($switches =~ /I/) {
$tp[1] = "";
}
if ($switches =~ /s/) {
$STYLE .= qq~min-height:26px;~;
$tp[1] = qq~<div style="padding:2px 0px 2px 0px">$tp[1]</div>~;
}
if ($switches =~ /V/ && $is_selected) {
$MENU .= qq~ <div id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left" onclick="$ONCLICK"$ONMOUSE>
<div class="rel">
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
<div class="auto" style="width:20px">
<div class="rel" style="right:2px">
<img class="block16 abs" src="/ono/osr/images/arrows/nuvola/white/nav_up.png" style="bottom:-14px;width:24px" alt="">
</div>
</div>
</div>
</div>
~;
} else {
if ($vars{'menubar_responsive_text_small'}) {
$tp[1] = qq~<span class="hide$vars{'menubar_responsive_text_small'}">$tp[1]</span><span class="small hide inline$vars{'menubar_responsive_text_small'}">$tp[1]</span>~;
}
if ($vars{'menubar_responsive_text_hide'} && $ICON) {
$tp[1] = qq~<span class="hide$vars{'menubar_responsive_text_hide'}">$tp[1]</span>~;
}
if ($switches =~ /r/) {
$MENU .= qq~ <div id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left" onclick="$ONCLICK"$ONMOUSE>
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
</div>
~;
} else {
$MENU .= qq~ <td id="menubar_tabdiv_$SUB$tp[0]" class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER" onclick="$ONCLICK"$ONMOUSE>
$DEL<a id="menubar_tablink_$SUB$tp[0]" href="$HREF"$TARGET class="nowrap$COLOR" style="text-decoration:none$COLOR_STYLE">$DIV_ON$ICON$tp[1]$DIV_OFF</a>
</td>
~;
}
}
if ($counter < $tabs_num) {
$MENU .= $VERTICAL;
}
if ($switches =~ /p/) {
my $STYLE;
if ($setup{'layout_color_menu_mobile_text'}) {
$STYLE = qq~ style="color:#$setup{'layout_color_menu_mobile_text'}"~;
}
$PHONE .= qq~<tr onclick="$ONCLICK" class="$CLASS_PHONE"><td class="large bb" style="padding:0px 30px 0px 30px;height:48px"><a href="$HREF"$TARGET class="$CLASS_PHONE2"$STYLE>$tp[1]</a></td></tr>~;
if (($switches =~ /Q/ && $is_selected) || $tp[0] eq $setup{'menubar_phone_menu_inject'}) {
$PHONE .= qq~<tr class="$CLASS_PHONE"><td class="p5"><div class="box_paper flat_all p5 noshadow">###_PHONE_MENU_INJECT_###</div></td></tr>~;
}
}
}
}
if ($switches =~ /r/) {
$MENU .= qq~</td>~;
}
if ($switches =~ /e/) {
my ($opt,$section);
if ($switches =~ /S/) {
$opt = "_submenu";
$section = "&$MAIN_VAR=$vars{$MAIN_VAR}";
}
$MENU .= qq~ <td>
<a href="$ELINK&menubar_option=add$opt&menubar_parent=$vars{'menubar_parent'}$section">
<img class="block16 ml10" src="/ono/osr/images/icons/ono/32x32/add.png" alt="add">
</a>
</td>
<td>
<a href="$ELINK&menubar_option=sort$opt&menubar_parent=$vars{'menubar_parent'}">
<img class="block16 ml5 mr10" src="/ono/osr/images/icons/ono/32x32/move.png" alt="move">
</a>
</td>
~;
}
if ($switches =~ /w/ && $switches !~ /v/) {
if ($switches =~ /c/) {
$MENU .= qq~ <td class="w50"></td>~;
} else {
$MENU .= qq~ <td class="w100"></td>~;
}
}
if ($switches =~ /o/ && $vars{'menubar_bookmark'}) {
$MENU .= qq~ <td><a href="$vars{'menubar_bookmark'}"><img class="block24" src="/ono/osr/images/icons/crystal/32x32/ono/bookmark.png" alt="bookmark"></a></td>~;
}
if ($switches =~ /F/ && $vars{'menubar_flags'} =~ /:/) {
$MENU .= qq~<td><table class="default_table mr10"><tr>~;
foreach my $flag (split(/:/,$vars{'menubar_flags'})) {
if (length $flag == 2) {
if (!$vars{'menubar_flags_selected'} && !$vars{'menubar_lang'}) {
$vars{'menubar_flags_selected'} = $flag;
}
my $STYLE;
if ($flag eq $vars{'menubar_flags_selected'} || $flag eq $vars{'menubar_lang'}) {
$STYLE = qq~ style="width:24px;height:18px"~;
}
my $FLINK = $LINK;
if ($vars{'publisher_page'}) {
$FLINK .= "&publisher_page=$vars{'publisher_page'}";
}
$FLINK =~ s~\&\;menubar_lang=(.*?)\&\;~\&\;~;
$FLINK =~ s~\&\;menubar_lang=(.*)$~~;
$FLINK = "$FLINK&menubar_lang=$flag";
# default:
# not implemented yet
# this makes websites compatible with oli.education.lu:
if ($ENV{'REQUEST_URI'} =~ m~/(.*?)/(.*?)/(web|schoolweb)/-/(.*?)/(.*?)/~) {
$FLINK = "/$1/$flag/$3/-/$4/$5/";
} else {
if ($ENV{'REQUEST_URI'} =~ m~/(.*?)/(.*?)/(web|schoolweb)/-/(.*?)/~) {
$FLINK = "/$1/$flag/$3/-/$4/";
}
}
$MENU .= qq~<td style="padding-left:4px">
<div class="shadow"><a href="$FLINK"><img class="flag" src="/ono/osr/images/flags/countries_large_tld/$flag.jpg"$STYLE alt="language"></a></div>
</td>
~;
}
}
$MENU .= qq~</tr></table></td>~;
}
if ($switches =~ /L/ && $setup{'login_page'}) {
my $LOGIN_STYLE = qq~color:#333333;~;
if ($setup{'layout_color_menu_text'}) {
$LOGIN_STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
}
my $LOGIN = $BLK{'Login'};
my $LOGIN_PAGE = $setup{'login_page'};
if ($setup{'login_page'} =~ /custom-login-ext/ && $vars{'ono_web_login_ext'}) {
$LOGIN_PAGE = $vars{'ono_web_login_ext'};
}
# both username AND sid required here !!!
if ($vars{'username'} && $vars{'sid'} && !$vars{'publisher_action'}) {
$LOGIN = $vars{'username'};
$LOGIN_PAGE = "$setup{'login_page'}&menubar_option=user_details";
}
my ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON);
if ($ENV{'REQUEST_URI'} =~ m~$setup{'login_page'}~) {
($STYLE,$COLOR,$LOGIN_STYLE,$DIV_ON) = &_selected_style("",$bar_grey,0,\%setup,$switches);
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
if ($vars{'username'}) {
my $PROIMG = ONO::FW::User::Init->profileimage($vars{'username'},24);
$MENU .= qq~<td>$PROIMG</td>~;
}
if ($vars{'username'} && $vars{'sid'} && ($setup{'login_page'} =~ /custom-login/ || $vars{'ono_web_loginlogout'})) {
# custom-login (and logout, required for oli.education.lu)
$MENU .= qq~<td class="p0">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<span class="bold $COLOR" style="$LOGIN_STYLE">$vars{'username'}</span>
</div>
</td>
<td class="p0" onclick="window.location='$vars{'ono_web_logout_url'}';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$vars{'ono_web_logout_url'}" class="$COLOR" style="$LOGIN_STYLE;text-decoration:none">$BLK{'Logout'}</a>
</div>
</td>
~;
} else {
$MENU .= qq~<td class="p0" onclick="window.location='$LOGIN_PAGE';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$LOGIN_PAGE" class="$COLOR" style="$LOGIN_STYLE;text-decoration:none">$LOGIN</a>
</div>
</td>
~;
}
}
if ($switches =~ /G/ && $setup{'signup_page'}) {
my $SIGNUP_STYLE = qq~color:#333333;~;
if ($setup{'layout_color_menu_text'}) {
$SIGNUP_STYLE = qq~color:#$setup{'layout_color_menu_text'};~;
}
my $SIGNUP = $BLK{'Signup'};
my $SIGNUP_PAGE = $setup{'signup_page'};
# both username AND sid required here !!!
if ($vars{'username'} && $vars{'sid'} && !$vars{'publisher_action'}) {
$SIGNUP = $BLK{'Logout'};
$SIGNUP_PAGE = "$setup{'signup_page'}&menubar_option=user_logout";
}
my ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON);
if ($ENV{'REQUEST_URI'} =~ m~$setup{'signup_page'}~) {
($STYLE,$COLOR,$SIGNUP_STYLE,$DIV_ON) = &_selected_style("",$bar_grey,0,\%setup,$switches);
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
$MENU .= qq~<td class="p0" onclick="window.location='$SIGNUP_PAGE';">
<div class="cursorlink $CLASS" style="padding:$PADDING;$STYLE;$BORDER;float:left">
<a href="$SIGNUP_PAGE" class="$COLOR" style="$SIGNUP_STYLE;text-decoration:none">$SIGNUP</a>
</div>
</td>
~;
}
if ($switches =~ /s/) {
$SEARCH = ONO::Lib::UI::Form->search($menubar_query,$vars{"$menubar_query"},$BLK{'search'},160,"dark");
my $HIDE;
if ($vars{'menubar_responsive_search_hide'}) {
$HIDE = qq~ class="hide$vars{'menubar_responsive_search_hide'}"~;
}
$MENU .= qq~ <td$HIDE>$SEARCH</td>~;
}
if ($switches =~ /(i|l)/) {
$MENU .= qq~<td></td>~;
my ($opti,$optl,$lighti,$lightl);
if (!$vars{'menubar_view'} || $vars{'menubar_view'} eq "icons") {
$opti .= "_dark button_pressed";
$lighti .= "_light";
}
if ($vars{'menubar_view'} eq "list") {
$optl .= "_dark button_pressed";
$lightl .= "_light";
}
if ($switches =~ /i/ && $switches =~ /l/) {
$opti .= " button_left";
$optl .= " button_right";
}
if ($switches =~ /v/) {
$MENU .= $VERTICAL;
}
if ($switches =~ /i/) {
$MENU .= qq~<td style="padding:2px 0px 0px 0px">
<a href="$LINK&menubar_subsection=$vars{'menubar_subsection'}&$MAIN_VAR=$vars{$MAIN_VAR}" class="button$opti" style="height:16px">
<img class="block16" src="/ono/osr/images/icons/crystal/16x16/ono/view_icons$lighti.png" alt="icons">
</a>
</td>
~;
}
if ($switches =~ /l/) {
$MENU .= qq~<td style="padding:2px 0px 0px 0px">
<a href="$LINK&menubar_subsection=$vars{'menubar_subsection'}&$MAIN_VAR=$vars{$MAIN_VAR}&menubar_view=list" class="button$optl" style="height:16px">
<img class="block16" src="/ono/osr/images/icons/crystal/16x16/ono/view_list$lightl.png" alt="list">
</a>
</td>
~;
}
}
$MENU .= qq~ <td$BORDER_R></td>
</tr>
</table>
$RETURN_SEL
~;
$MENU =~ s~\&\;menubar_view\=\"~\"~g;
$MENU =~ s~\&\;menubar_view\=\'~\'~g;
if ($switches =~ /m/i) {
my $border = "border:1px solid #777777";
my $bottom;
if ($switches =~ /M/) {
$border = "border-bottom:1px solid #777777;border-left:1px solid #777777;border-right:1px solid #777777";
$bottom = "bot";
}
my $SHADOW = " shadow";
if ($switches =~ /O/) {
$border = "background-color:#ffffff;border:1px solid #cccccc";
$SHADOW = "";
}
$MENU = qq~<div class="radius5$bottom$SHADOW" style="padding:0px 5px 0px 5px;background-image:url('$bar_white');$border">$MENU</div>~;
}
if ($switches =~ /v/) {
$MENU =~ s~<td></td>~~g;
}
if ($switches =~ /N/) {
$MENU = qq~<div style="padding:0px 5px 0px 5px">$MENU</div>~;
}
if ($switches =~ /p/) {
my ($DISPLAY,$SEARCH,$lang,$hide1,$hide2);
if ($switches =~ /P/ && $PHONE_TITLE) {
my $size = "xlarge";
if (length $PHONE_TITLE > 15) {
$size = "large";
if (length $PHONE_TITLE > 20) {
$size = "small";
}
}
if ($switches =~ /s/) {
if (!$vars{"${menubar_query}_phone"}) {
$hide1 = " hide";
} else {
$hide2 = "hide";
}
$SEARCH = ONO::Lib::UI::Form->search("${menubar_query}_phone",$vars{"${menubar_query}_phone"},$BLK{'search'},200,"dark");
$SEARCH = qq~<div class="abs" style="top:0px;right:-5px">
<div id="menubar_phone_search_ico" onclick="onojs_block('menubar_phone_search');onojs_hide('menubar_phone_search_ico');" class="$hide2">
<img class="block32 mr5" src="/ono/osr/images/icons/crystal/32x32/actions/mail_find.png" alt="search">
</div>
<div id="menubar_phone_search" class="abs$hide1" style="top:0px;right:0px">
$SEARCH
</div>
</div>
~;
}
$DISPLAY = qq~<div class="rel">
<div class="$size col9 rel" style="max-width:95%;overflow:hidden;height:32px;top:5px">
<div class="nowrap" style="max-width:240px">$PHONE_TITLE</div>
</div>
$SEARCH
</div>
~;
}
my $NAV = &phone(
"",
$PHONE,
$DISPLAY,
"",
$lang,
"",
"web",
"",
$setup_ref,
$counter,
);
$MENU = qq~<div class="hide800">$MENU</div>
<div class="rel hide inline800">$NAV</div>
~;
}
return $MENU;
}
sub _selected_style {
#: Menubar style internal subroutine.
my (
$self,
$bar_grey,
$counter,
$setup_ref,
$switches,
) = @_;
my %setup = %$setup_ref;
my $STYLE = qq~background-color:#333333;background-image:url('$bar_grey');color:#eeeeee;~;
$STYLE .= qq~box-shadow:inset 0 0 5px #000000;-moz-box-shadow:inset 0 0 5px #000000;-webkit-box-shadow:inset 0 0 5px #000000~;
my $COLOR = qq~ cole~;
my ($COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2);
if ($switches =~ /S/) {
$STYLE = qq~background-color:#dddddd;color:#333333~;
$COLOR = qq~ col3~;
}
if ($switches =~ /T/) {
$STYLE = qq~~;
$COLOR = qq~ cole~;
$DIV_ON = qq~<div class="shadow_inset_black radius10" style="background-color:#333333;background-image:url('$bar_grey');padding:0px 10px 0px 10px;line-height:150%">~;
}
if ($switches =~ /W/) {
$STYLE = qq~background-color:#ffffff;border-top:1px solid #999999~;
$COLOR = qq~ col3~;
}
if ($switches =~ /V/) {
$STYLE = "";
$COLOR = " col3";
}
if ($setup{'layout_color_menu_sel'}) {
$STYLE = qq~background-color:#$setup{'layout_color_menu_sel'};~;
if ($setup{"layout_color_menu_tab_$counter"}) {
$STYLE = qq~background-color:#$setup{"layout_color_menu_tab_$counter"};~;
}
$COLOR = "";
$COLOR_STYLE = ";color:#$setup{'layout_color_menu_text_sel'}";
}
if ($setup{'layout_menu_selected_bold'}) {
$COLOR .= " bold";
}
$CLASS_PHONE = "bg_black cole";
$CLASS_PHONE2 = "cole";
return ($STYLE,$COLOR,$COLOR_STYLE,$DIV_ON,$CLASS_PHONE,$CLASS_PHONE2);
}
sub phone {
my (
$self,
$NAV,
$DISPLAY,
$FLAGS,
$lang_local,
$flag_style,
$CSS,
$BASE,
$setup_ref,
$counter,
) = @_;
#: Phone / mobile device menubar alternative.
my $ID = ONO::Lib::Code::RandomID->make;
my ($ICON,%setup);
if ($setup_ref) {
%setup = %$setup_ref;
}
if ($FLAGS) {
$FLAGS = qq~<td id="menu_td_flags2" class="nowrap ${CSS}_menu p0" onclick = "onojs_block('menu_tab_flags2');">
<img class="flag" src="$BASE/ono/osr/images/flags/languages/$lang_local.png" style="$flag_style" alt="language $lang_local">
$FLAGS
</td>
~;
}
if (!$setup{'layout_color_menu_mobile_background'}) {
$setup{'layout_color_menu_mobile_background'} = "ffffff";
}
if (!$setup{'layout_color_menu_mobile_text'}) {
$setup{'layout_color_menu_mobile_text'} = "333333";
}
if ($counter > 1) {
$ICON = qq~<div class="trans80 auto w80" style="width:40px">
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
<div style="padding:3px"></div>
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
<div style="padding:3px"></div>
<div class="p2" style="background-color:#$setup{'layout_color_menu_mobile_text'}"></div>
</div>
~;
}
if ($setup{'phone_menu_icon'}) {
$ICON = $setup{'phone_menu_icon'};
}
return qq~<input type="hidden" id="phone_nav_toggle_$ID" name="phone_nav_toggle_$ID" value="">
<table class="wide_table ${CSS}_nav bb" style="z-index:99;background-color:#$setup{'layout_color_menu_mobile_background'}">
<tr>
<td class="${CSS}_menu p10 cursorlink" onclick="onojs_phone_nav_toggle('$ID');">
$ICON
<div id="phone_nav_$ID" class="shadow abs hide" style="z-index:99;top:0px;margin-left:50px;background-color:#$setup{'layout_color_menu_mobile_background'}">
<table class="default_table">$NAV</table>
</div>
</td>
<td class="${CSS}_menu w100">$DISPLAY</td>
<td class="${CSS}_menu p0"><img class="block" src="$BASE/ono/osr/images/spacer/trans.gif" style="width:1px;height:48px" alt=""></td>
$FLAGS
<td class="${CSS}_menu p5"></td>
</tr>
</table>
~;
}
sub vertical_menu {
#: Vertical menu.
my (
$self,
$script_url,
$menu_ref,
$selected,
) = @_;
my @menus = @$menu_ref;
my $MENU;
foreach my $menu (@menus) {
my @sp = split(/:/,$menu);
my ($SEL1,$SEL2);
if ($sp[0] eq $selected) {
$SEL1 = " bg_fabric";
$SEL2 = " bold";
}
$MENU .= qq~<tr class="bt bb row$SEL1" onclick="window.location='$script_url=$sp[0]';">
<td class="p5">
<div class="pad10_2"><a href="$script_url=$sp[0]" class="col3$SEL2">$sp[1]</a></div>
</td>
</tr>
~;
}
return qq~<table class="wide_table bt bb">$MENU</table>~;
}
###############################################################################
# end of script
###############################################################################
1;
__END__