Revision 5d73281e
Von Sven Schöling vor etwa 12 Jahren hinzugefügt
| bin/mozilla/menu.pl | ||
|---|---|---|
| 44 | 44 |
|
| 45 | 45 |
use List::MoreUtils qw(apply); |
| 46 | 46 |
|
| 47 |
my $nbsp = ' '; |
|
| 48 |
|
|
| 49 | 47 |
# end of main |
| 50 | 48 |
|
| 51 | 49 |
sub display {
|
| ... | ... | |
| 83 | 81 |
$::form->{title} = $::locale->text('kivitendo');
|
| 84 | 82 |
$::form->header; |
| 85 | 83 |
|
| 86 |
my $sections = section_menu($menu);
|
|
| 84 |
my $sections = [ section_menu($menu) ];
|
|
| 87 | 85 |
|
| 88 | 86 |
print $::form->parse_html_template('menu/menu', {
|
| 89 | 87 |
framesize => $framesize, |
| ... | ... | |
| 95 | 93 |
|
| 96 | 94 |
sub section_menu {
|
| 97 | 95 |
$::lxdebug->enter_sub; |
| 98 |
my ($menu, $level) = @_; |
|
| 96 |
my ($menu, $level, $id_prefix) = @_;
|
|
| 99 | 97 |
my @menuorder = $menu->access_control(\%::myconfig, $level); |
| 100 | 98 |
my @items; |
| 101 | 99 |
|
| 100 |
my $id = 0; |
|
| 101 |
|
|
| 102 | 102 |
for my $item (@menuorder) {
|
| 103 | 103 |
my $menuitem = $menu->{$item};
|
| 104 | 104 |
my $label = apply { s/.*--// } $item;
|
| 105 | 105 |
my $ml = apply { s/--.*// } $item;
|
| 106 |
my $spacer = "spacer" . (0 + $item =~ s/--/--/g);
|
|
| 106 |
my $spacer = "s" . (0 + $item =~ s/--/--/g); |
|
| 107 | 107 |
my $label_icon = $level . "--" . $label . ".png"; |
| 108 | 108 |
|
| 109 | 109 |
next if $level && $item ne "$level--$label"; |
| ... | ... | |
| 126 | 126 |
|
| 127 | 127 |
my $anchor = $menuitem->{href};
|
| 128 | 128 |
|
| 129 |
my %common_args = ( |
|
| 130 |
label => $label, |
|
| 131 |
spacer => $spacer, |
|
| 132 |
target => $menuitem->{target},
|
|
| 133 |
item_id => "$id_prefix\_$id", |
|
| 134 |
height => 16, |
|
| 135 |
); |
|
| 136 |
|
|
| 129 | 137 |
if (!$level) { # toplevel
|
| 130 |
push @items, make_item(
|
|
| 138 |
push @items, { %common_args,
|
|
| 131 | 139 |
img => make_image(icon => $item . '.png', size => 24, label => $label), |
| 132 |
label => $label, |
|
| 133 | 140 |
height => 24, |
| 134 |
class => 'menu', |
|
| 135 |
spacer => $spacer, |
|
| 136 |
subitems => section_menu($menu, $item) |
|
| 137 |
); |
|
| 141 |
class => 'm', |
|
| 142 |
}; |
|
| 143 |
push @items, section_menu($menu, $item, "$id_prefix\_$id"); |
|
| 138 | 144 |
} elsif ($menuitem->{submenu}) {
|
| 139 |
push @items, make_item( |
|
| 140 |
target => $menuitem->{target},
|
|
| 141 |
spacer => $spacer, |
|
| 145 |
push @items, { %common_args,
|
|
| 142 | 146 |
img => make_image(submenu => 1), |
| 143 |
label => $label, |
|
| 144 |
class => 'submenu', |
|
| 145 |
subitems => section_menu($menu, $item), |
|
| 146 |
); |
|
| 147 |
class => 'sm', |
|
| 148 |
}; |
|
| 149 |
push @items, section_menu($menu, $item, "$id_prefix\_$id"); |
|
| 147 | 150 |
} elsif ($menuitem->{module}) {
|
| 148 |
push @items, make_item( |
|
| 149 |
target => $menuitem->{target},
|
|
| 150 |
img => make_image(label => $label, icon => $label_icon), |
|
| 151 |
href => $anchor, |
|
| 152 |
spacer => $spacer, |
|
| 153 |
label => $label, |
|
| 154 |
class => 'item', |
|
| 155 |
); |
|
| 151 |
push @items, { %common_args,
|
|
| 152 |
img => make_image(label => $label, icon => $label_icon), |
|
| 153 |
href => $anchor, |
|
| 154 |
class => 'i', |
|
| 155 |
}; |
|
| 156 | 156 |
} |
| 157 |
} continue {
|
|
| 158 |
$id++; |
|
| 157 | 159 |
} |
| 158 |
$::lxdebug->leave_sub; |
|
| 159 |
return \@items; |
|
| 160 |
} |
|
| 161 |
|
|
| 162 |
sub make_item {
|
|
| 163 |
my %params = @_; |
|
| 164 |
$params{spacer} ||= '';
|
|
| 165 |
$params{height} ||= 16;
|
|
| 166 | 160 |
|
| 167 |
return {
|
|
| 168 |
%params, |
|
| 169 |
# chunks => [ multiline($params{label}) ],
|
|
| 170 |
}; |
|
| 171 |
} |
|
| 172 |
|
|
| 173 |
# multi line hack, sschoeling jul06 |
|
| 174 |
# if a label is too long, try to split it at whitespaces, then join it to chunks of less |
|
| 175 |
# than 20 chars and store it in an array. |
|
| 176 |
# use this array later instead of the -ed label |
|
| 177 |
sub multiline {
|
|
| 178 |
my ($label) = @_; |
|
| 179 |
my @chunks; |
|
| 180 |
my $l = 20; |
|
| 181 |
for (split / /, $label) {
|
|
| 182 |
$l += length $_; |
|
| 183 |
if ($l < 20) {
|
|
| 184 |
$chunks[-1] .= " $_"; |
|
| 185 |
} else {
|
|
| 186 |
$l = length $_; |
|
| 187 |
push @chunks, $_; |
|
| 188 |
} |
|
| 189 |
} |
|
| 190 |
return @chunks; |
|
| 161 |
$::lxdebug->leave_sub; |
|
| 162 |
return @items; |
|
| 191 | 163 |
} |
| 192 | 164 |
|
| 193 | 165 |
sub make_image {
|
| ... | ... | |
| 199 | 171 |
return unless _show_images(); |
| 200 | 172 |
|
| 201 | 173 |
my $icon_found = $icon && -f _icon_path($icon, $size); |
| 202 |
my $padding = $size == 16 && $icon_found ? $nbsp x 2 |
|
| 203 |
: $size == 24 ? $nbsp |
|
| 204 |
: ''; |
|
| 205 | 174 |
|
| 206 | 175 |
return {
|
| 207 | 176 |
src => $icon_found ? _icon_path($icon, $size) : "image/unterpunkt.png", |
| css/lx-office-erp/menu.css | ||
|---|---|---|
| 290 | 290 |
|
| 291 | 291 |
/* End of non-anchor hover selectors */ |
| 292 | 292 |
|
| 293 |
|
|
| 293 |
/* html menu */ |
|
| 294 |
/* types of lines: m sm i (menu submenu item) |
|
| 295 |
each line is a mi (menuitem) and has one mii (menu-item-icon) whcih is ms (menu-spacer) |
|
| 296 |
and one mic (menu-item-chunk) |
|
| 297 |
indenting is done with the levels s0, s1, s2 */ |
|
| 294 | 298 |
#html-menu { float:left; width: 183px; }
|
| 295 |
#html-menu div.mi { margin-top: 4px; margin-bottom: 3px; white-space: nowrap; clear:both }
|
|
| 296 |
#html-menu div.submenu { font-weight: bold }
|
|
| 299 |
#html-menu div.mi { margin-top: 4px; margin-bottom: 3px; white-space: nowrap; clear:both; position:relative; }
|
|
| 300 |
#html-menu div.sm { font-weight: bold }
|
|
| 297 | 301 |
#html-menu img { vertical-align: top; border: 0; }
|
| 298 | 302 |
#html-menu a { vertical-align: top }
|
| 299 |
#html-menu .item span.ms { float:left; width: 24px }
|
|
| 300 |
#html-menu .menu span.ms { float:left; width: 32px }
|
|
| 301 |
#html-menu div.menu { height: 24px }
|
|
| 302 |
#html-menu div.menu span.mic { color:blue; position: relative; top: 5px; }
|
|
| 303 |
#html-menu div.menu:hover,
|
|
| 304 |
#html-menu div.item:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
|
|
| 303 |
#html-menu .i span.ms { float:left; width: 24px }
|
|
| 304 |
#html-menu .m span.ms { float:left; width: 32px }
|
|
| 305 |
#html-menu div.m { height: 24px }
|
|
| 306 |
#html-menu div.m span.mic { color:blue; position: relative; top: 5px; }
|
|
| 307 |
#html-menu div.m:hover, |
|
| 308 |
#html-menu div.i:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
|
|
| 305 | 309 |
#html-menu span.mic { white-space: normal; display: inline-block; vertical-align: top; line-height: 1.2; }
|
| 306 | 310 |
#html-menu a.ml span.mic { width: 145px } /* fix deep indents */
|
| 307 |
#html-menu div.spacer0 { position:relative; padding-left: 2px }
|
|
| 308 |
#html-menu div.spacer1 { position:relative; padding-left: 8px }
|
|
| 309 |
#html-menu div.spacer2 { position:relative; padding-left: 16px }
|
|
| 311 |
#html-menu div.s0 { padding-left: 2px }
|
|
| 312 |
#html-menu div.s1 { padding-left: 8px }
|
|
| 313 |
#html-menu div.s2 { padding-left: 16px }
|
|
| 310 | 314 |
|
| 311 | 315 |
|
| templates/webpages/menu/menu.html | ||
|---|---|---|
| 2 | 2 |
<body class="menu"> |
| 3 | 3 |
|
| 4 | 4 |
<div id='html-menu'> |
| 5 |
[% PROCESS sections %] |
|
| 5 |
[%- FOREACH item IN sections %] |
|
| 6 |
<div id='mi[% item.item_id %]' class='mi [% item.spacer %] [% item.class %]'>[%- IF item.href %] |
|
| 7 |
<a href="[% item.href | html %]" class='ml' target='[% item.target %]'><span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span></a>[%- ELSE %] |
|
| 8 |
<span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span>[%- END %] |
|
| 9 |
</div> |
|
| 10 |
[%- END %] |
|
| 6 | 11 |
</div> |
| 7 | 12 |
<script type='text/javascript'> |
| 8 | 13 |
$(function(){
|
| 9 |
$('#html-menu div.item, #html-menu div.submenu').hide();
|
|
| 10 |
$('#html-menu div.menu').each(function() {
|
|
| 14 |
$('#html-menu div.i, #html-menu div.sm').hide();
|
|
| 15 |
$('#html-menu div.m').each(function() {
|
|
| 11 | 16 |
$(this).click(function(){
|
| 12 |
$('#html-menu div.mi').not('div.menu').not('[id^=' + $(this).attr('id') + '_]').hide();
|
|
| 17 |
$('#html-menu div.mi').not('div.m').not('[id^=' + $(this).attr('id') + '_]').hide();
|
|
| 13 | 18 |
$('#html-menu div.mi[id^=' + $(this).attr('id') + '_]').toggle();
|
| 14 | 19 |
}); |
| 15 | 20 |
}); |
| ... | ... | |
| 17 | 22 |
</script> |
| 18 | 23 |
</body> |
| 19 | 24 |
</html> |
| 20 |
[%- BLOCK sections %] |
|
| 21 |
[%- FOREACH item IN sections %] |
|
| 22 |
<div id='mi[% menulevel %]_[% loop.count %]' class='mi [% item.spacer %] [% item.class %]'> |
|
| 23 |
[%- IF item.href %] |
|
| 24 |
<a href="[% item.href | html %]" class='ml' target='[% item.target %]'><span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span></a> |
|
| 25 |
[%- ELSE %] |
|
| 26 |
<span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span> |
|
| 27 |
[%- END %] |
|
| 28 |
</div> |
|
| 29 |
[%- IF item.subitems.size %] |
|
| 30 |
[% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %] |
|
| 31 |
[%- END %] |
|
| 32 |
[%- END %] |
|
| 33 |
[%- END %] |
|
Auch abrufbar als: Unified diff
menu.pl aufgeräumt
request ist jetzt auf netto 20ms zum herstellen des menüs und nochmal ein 30ms
zum rendern. bei letzterem hoffe ich dass das beim einbinden in ein template
beschleunigt wird.