From 5d73281e30765270c223514e67556c6c4bcf0504 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Sven=20Sch=C3=B6ling?= <s.schoeling@linet-services.de>
Date: Tue, 4 Sep 2012 19:26:44 +0200
Subject: [PATCH] =?utf8?q?menu.pl=20aufger=C3=A4umt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

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.
---
 bin/mozilla/menu.pl               | 91 ++++++++++---------------------
 css/lx-office-erp/menu.css        | 28 ++++++----
 templates/webpages/menu/menu.html | 27 +++------
 3 files changed, 55 insertions(+), 91 deletions(-)

diff --git a/bin/mozilla/menu.pl b/bin/mozilla/menu.pl
index fd66bfac0..459ccddc9 100644
--- a/bin/mozilla/menu.pl
+++ b/bin/mozilla/menu.pl
@@ -44,8 +44,6 @@ use URI;
 
 use List::MoreUtils qw(apply);
 
-my $nbsp     = '&nbsp;';
-
 # end of main
 
 sub display {
@@ -83,7 +81,7 @@ sub acc_menu {
   $::form->{title} = $::locale->text('kivitendo');
   $::form->header;
 
-  my $sections = section_menu($menu);
+  my $sections = [ section_menu($menu) ];
 
   print $::form->parse_html_template('menu/menu', {
     framesize => $framesize,
@@ -95,15 +93,17 @@ sub acc_menu {
 
 sub section_menu {
   $::lxdebug->enter_sub;
-  my ($menu, $level) = @_;
+  my ($menu, $level, $id_prefix) = @_;
   my @menuorder = $menu->access_control(\%::myconfig, $level);
   my @items;
 
+  my $id = 0;
+
   for my $item (@menuorder) {
     my $menuitem   = $menu->{$item};
     my $label      = apply { s/.*--// } $item;
     my $ml         = apply { s/--.*// } $item;
-    my $spacer     = "spacer" . (0 + $item =~ s/--/--/g);
+    my $spacer     = "s" . (0 + $item =~ s/--/--/g);
     my $label_icon = $level . "--" . $label . ".png";
 
     next if $level && $item ne "$level--$label";
@@ -126,68 +126,40 @@ sub section_menu {
 
     my $anchor = $menuitem->{href};
 
+    my %common_args = (
+        label   => $label,
+        spacer  => $spacer,
+        target  => $menuitem->{target},
+        item_id => "$id_prefix\_$id",
+        height  => 16,
+    );
+
     if (!$level) { # toplevel
-      push @items, make_item(
+      push @items, { %common_args,
         img      =>  make_image(icon => $item . '.png', size => 24, label => $label),
-        label    => $label,
         height   => 24,
-        class    => 'menu',
-        spacer   => $spacer,
-        subitems => section_menu($menu, $item)
-      );
+        class    => 'm',
+      };
+      push @items, section_menu($menu, $item, "$id_prefix\_$id");
     } elsif ($menuitem->{submenu}) {
-      push @items, make_item(
-        target   => $menuitem->{target},
-        spacer   => $spacer,
+      push @items, { %common_args,
         img      => make_image(submenu => 1),
-        label    => $label,
-        class    => 'submenu',
-        subitems => section_menu($menu, $item),
-      );
+        class    => 'sm',
+      };
+      push @items, section_menu($menu, $item, "$id_prefix\_$id");
     } elsif ($menuitem->{module}) {
-      push @items, make_item(
-        target => $menuitem->{target},
-        img    => make_image(label => $label, icon => $label_icon),
-        href   => $anchor,
-        spacer => $spacer,
-        label  => $label,
-        class  => 'item',
-      );
+      push @items, { %common_args,
+        img     => make_image(label => $label, icon => $label_icon),
+        href    => $anchor,
+        class   => 'i',
+      };
     }
+  } continue {
+    $id++;
   }
-  $::lxdebug->leave_sub;
-  return \@items;
-}
-
-sub make_item {
-  my %params = @_;
-  $params{spacer} ||= '';
-  $params{height} ||= 16;
 
-  return {
-    %params,
-#    chunks => [ multiline($params{label}) ],
-  };
-}
-
-# multi line hack, sschoeling jul06
-# if a label is too long, try to split it at whitespaces, then join it to chunks of less
-# than 20 chars and store it in an array.
-# use this array later instead of the &nbsp;-ed label
-sub multiline {
-  my ($label) = @_;
-  my @chunks;
-  my $l = 20;
-  for (split / /, $label) {
-    $l += length $_;
-    if ($l < 20) {
-      $chunks[-1] .= " $_";
-    } else {
-      $l = length $_;
-      push @chunks, $_;
-    }
-  }
-  return @chunks;
+  $::lxdebug->leave_sub;
+  return @items;
 }
 
 sub make_image {
@@ -199,9 +171,6 @@ sub make_image {
   return unless _show_images();
 
   my $icon_found = $icon && -f _icon_path($icon, $size);
-  my $padding    = $size == 16 && $icon_found ? $nbsp x 2
-                 : $size == 24                ? $nbsp
-                 :                            '';
 
   return  {
     src     => $icon_found ? _icon_path($icon, $size) : "image/unterpunkt.png",
diff --git a/css/lx-office-erp/menu.css b/css/lx-office-erp/menu.css
index 413e36f6c..90cc0c813 100644
--- a/css/lx-office-erp/menu.css
+++ b/css/lx-office-erp/menu.css
@@ -290,22 +290,26 @@ div#menuv4 li li li li:hover ul
 
 /* End of non-anchor hover selectors */
 
-
+/* html menu */
+/* types of lines: m sm i (menu submenu item)
+   each line is a mi (menuitem) and has one mii (menu-item-icon) whcih is ms (menu-spacer)
+   and one mic (menu-item-chunk)
+   indenting is done with the levels s0, s1, s2 */
 #html-menu { float:left; width: 183px; }
-#html-menu div.mi { margin-top: 4px; margin-bottom: 3px; white-space: nowrap; clear:both }
-#html-menu div.submenu { font-weight: bold }
+#html-menu div.mi { margin-top: 4px; margin-bottom: 3px; white-space: nowrap; clear:both; position:relative; }
+#html-menu div.sm { font-weight: bold }
 #html-menu img { vertical-align: top; border: 0; }
 #html-menu a { vertical-align: top }
-#html-menu .item span.ms { float:left; width: 24px }
-#html-menu .menu span.ms { float:left; width: 32px }
-#html-menu div.menu { height: 24px }
-#html-menu div.menu span.mic { color:blue; position: relative; top: 5px; }
-#html-menu div.menu:hover,
-#html-menu div.item:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
+#html-menu .i span.ms { float:left; width: 24px }
+#html-menu .m span.ms { float:left; width: 32px }
+#html-menu div.m { height: 24px }
+#html-menu div.m span.mic { color:blue; position: relative; top: 5px; }
+#html-menu div.m:hover,
+#html-menu div.i:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
 #html-menu span.mic { white-space: normal; display: inline-block; vertical-align: top; line-height: 1.2; }
 #html-menu a.ml span.mic { width: 145px } /* fix deep indents */
-#html-menu div.spacer0 { position:relative; padding-left: 2px }
-#html-menu div.spacer1 { position:relative; padding-left: 8px }
-#html-menu div.spacer2 { position:relative; padding-left: 16px }
+#html-menu div.s0 { padding-left: 2px }
+#html-menu div.s1 { padding-left: 8px }
+#html-menu div.s2 { padding-left: 16px }
 
 
diff --git a/templates/webpages/menu/menu.html b/templates/webpages/menu/menu.html
index fcc032cab..01e2bb454 100644
--- a/templates/webpages/menu/menu.html
+++ b/templates/webpages/menu/menu.html
@@ -2,14 +2,19 @@
 <body class="menu">
 
 <div id='html-menu'>
-  [% PROCESS sections %]
+[%- FOREACH item IN sections %]
+ <div id='mi[% item.item_id %]' class='mi [% item.spacer %] [% item.class %]'>[%- IF item.href %]
+  <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 %]
+  <span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span>[%- END %]
+ </div>
+[%- END %]
 </div>
 <script type='text/javascript'>
   $(function(){
-    $('#html-menu div.item, #html-menu div.submenu').hide();
-    $('#html-menu div.menu').each(function() {
+    $('#html-menu div.i, #html-menu div.sm').hide();
+    $('#html-menu div.m').each(function() {
       $(this).click(function(){
-        $('#html-menu div.mi').not('div.menu').not('[id^=' + $(this).attr('id') + '_]').hide();
+        $('#html-menu div.mi').not('div.m').not('[id^=' + $(this).attr('id') + '_]').hide();
         $('#html-menu div.mi[id^=' + $(this).attr('id') + '_]').toggle();
       });
     });
@@ -17,17 +22,3 @@
 </script>
 </body>
 </html>
-[%- BLOCK sections %]
-[%- FOREACH item IN sections %]
- <div id='mi[% menulevel %]_[% loop.count %]' class='mi [% item.spacer %] [% item.class %]'>
- [%- IF item.href %]
-  <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 %]
-  <span class="mii ms">[% L.img_tag(item.img) %]</span><span class='mic'>[% item.label %]</span>
- [%- END %]
- </div>
- [%- IF item.subitems.size %]
-  [% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %]
- [%- END %]
-[%- END %]
-[%- END  %]
-- 
2.20.1