create menu for menu tabs which don't fit in one line

fix tooltip.js error when not in pma frame

js/functions.js

@@ -1735,3 +1735,96 @@ $(document).ready(function(){
     }
 });
 
+function menuResize()
+{
+    var cnt = $('#topmenu');
+    var wmax = cnt.width() - 5; // 5 px margin for jumping menu in Chrome
+    var submenu = cnt.find('.submenu');
+    var submenu_w = submenu.outerWidth(true);
+    var submenu_ul = submenu.find('ul');
+    var li = $('#topmenu > li');
+    var li2 = submenu_ul.find('li');
+    var more_shown = li2.length > 0;
+    var w = more_shown ? submenu_w : 0;
+
+    // hide menu items
+    var hide_start = 0;
+    for (var i = 0; i < li.length-1; i++) { // li.length-1: skip .submenu element
+        var el = $(li[i]);
+        var el_width = el.outerWidth(true);
+        el.data('width', el_width);
+        w += el_width;
+        if (w > wmax) {
+            w -= el_width;
+            if (w + submenu_w < wmax) {
+                hide_start = i;
+            } else {
+                hide_start = i-1;
+                w -= $(li[i-1]).data('width');
+            }
+            break;
+        }
+    }
+
+    if (hide_start > 0) {
+        for (var i = hide_start; i < li.length-1; i++) {
+            $(li[i])[more_shown ? 'prependTo' : 'appendTo'](submenu_ul);
+        }
+        submenu.show();
+    } else if (more_shown) {
+        w -= submenu_w;
+        // nothing hidden, maybe something can be restored
+        for (var i = 0; i < li2.length; i++) {
+            //console.log(li2[i], submenu_w);
+            w += $(li2[i]).data('width');
+            if (w+submenu_w < wmax ) {//|| (i == li2.length-1 && w < wmax)
+                $(li2[i]).insertBefore(submenu);
+                if (i == li2.length-1) {
+                    submenu.hide();
+                }
+                continue;
+            }
+            break;
+        }
+    }
+    if (submenu.find('.tabactive').length) {
+        submenu.addClass('active').find('> a').removeClass('tab').addClass('tabactive');
+    } else {
+        submenu.removeClass('active').find('> a').addClass('tab').removeClass('tabactive');
+    }
+}
+
+$(function() {
+    // create submenu container
+    var link = $('<a />')
+        .attr({href: '#', 'class': 'tab'})
+        .text('More')
+        .click(function(e) {
+            e.preventDefault();
+        });
+    var img = $('#topmenucontainer li:first-child').find('img');
+    if (img.length) {
+        img = img.clone();
+        img.attr('src', img.attr('src').replace(/\/[^\/]+$/, '/b_more.png')).prependTo(link);
+    }
+    var submenu = $('<li />')
+        .attr('class', 'submenu')
+        .append(link)
+        .append($('<ul />').append($('#topmenu li.subitem')))
+        .mouseenter(function() {
+            if ($(this).find('ul .tabactive').length == 0) {
+                $(this).addClass('submenuhover').find('> a').addClass('tabactive');
+            }
+        })
+        .mouseleave(function() {
+            if ($(this).find('ul .tabactive').length == 0) {
+                $(this).removeClass('submenuhover').find('> a').removeClass('tabactive');
+            }
+        })
+        .hide();
+    $('#topmenu').append(submenu);
+
+    // populate submenu and register resize event
+    $(window).resize(menuResize);
+    menuResize();
+});

js/tooltip.js

@@ -31,6 +31,9 @@ var myTooltipContainer = null;
  */
 function PMA_TT_init()
 {
+    if (!window.parent.getElementsByClassName) {
+        return;
+    }
     // get all 'light bubbles' on page
     var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup');
     var tooltip_count = tooltip_icons.length;
@@ -48,7 +51,7 @@ function PMA_TT_init()
     document.body.appendChild(myTooltipContainer);
 
     // capture mouse-events
-    for (i = 0; i < tooltip_count; i++) {
+    for (var i = 0; i < tooltip_count; i++) {
         window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove);
         window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip);
         window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip);

themes/darkblue_orange/css/theme_right.css.php

@@ -626,14 +626,44 @@ ul#topmenu li, ul#topmenu2 li {
 }
 
 /* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
     display:            block;
     margin:             0.2em 0.2em 0 0.2em;
     padding:            0.2em 0.2em 0 0.2em;
     white-space:        nowrap;
 }
 
-ul#topmenu2 .tab, ul#topmenu2 .tabactive {
+ul#topmenu ul a {
+    margin:         0;
+    padding-bottom: 0.2em;
+}
+
+ul#topmenu .submenu {
+    position: relative;
+}
+
+ul#topmenu ul {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    right: 0;
+    list-style-type: none;
+    display: none;
+    -moz-box-shadow: 2px 2px 3px #666;
+    -webkit-box-shadow: 2px 2px 3px #666;
+    box-shadow: 2px 2px 3px #666;
+    border: 1px #666 solid;
+}
+
+ul#topmenu li:hover ul, ul#topmenu .submenuhover ul {
+    display: block;
+}
+
+ul#topmenu ul li {
+    width: 100%;
+}
+
+ul#topmenu2 a {
     display:            block;
     margin:             0.1em;
     padding:            0.2em;
@@ -676,29 +706,42 @@ ul#topmenu2 {
     clear: both;
 }
 
-ul#topmenu li {
+ul#topmenu > li {
     border-bottom:      1pt solid black;
 }
 
 /* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
-    background-color:   <?php echo $GLOBALS['cfg']['BgOne']; ?>;
+    background-color: <?php echo $GLOBALS['cfg']['BgOne']; ?>;
-    border:             1pt solid <?php echo $GLOBALS['cfg']['BgTwo']; ?>;
+    border:           0 solid <?php echo $GLOBALS['cfg']['BgTwo']; ?>;
-    border-bottom:      0;
+    border-width:       1pt 1pt 0 1pt;
     -moz-border-radius: 0.4em 0.4em 0 0;
     border-radius:      0.4em 0.4em 0 0;
 }
 
+ul#topmenu ul a {
+    border-width:       1pt 0 0 0;
+    -moz-border-radius: 0;
+    border-radius:      0;
+}
+
+ul#topmenu ul li:first-child a {
+    border-width:       0;
+}
+
 /* enabled hover/active tabs */
-ul#topmenu a.tab:hover,
+ul#topmenu > li > a:hover,
-ul#topmenu a.tabcaution:hover,
+ul#topmenu > li > .tabactive {
-ul#topmenu .tabactive,
-ul#topmenu .tabactive:hover {
     margin:             0;
     padding:            0.2em 0.4em 0.2em 0.4em;
     text-decoration:    none;
 }
 
+ul#topmenu ul a:hover,
+ul#topmenu ul .tabactive {
+    text-decoration:    none;
+}
+
 ul#topmenu a.tab:hover,
 ul#topmenu .tabactive {
     background-color:   <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
@@ -713,7 +756,7 @@ ul#topmenu2 a.tabactive {
 }
 
 /* to be able to cancel the bottom border, use <li class="active"> */
-ul#topmenu li.active {
+ul#topmenu > li.active {
      border-bottom:      1pt solid <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
 }
 

themes/original/css/theme_right.css.php

@@ -601,14 +601,44 @@ ul#topmenu li, ul#topmenu2 li {
 }
 
 /* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
     display:            block;
     margin:             0.2em 0.2em 0 0.2em;
     padding:            0.2em 0.2em 0 0.2em;
     white-space:        nowrap;
 }
 
-ul#topmenu2 .tab, ul#topmenu2 .tabactive {
+ul#topmenu ul a {
+    margin: 0;
+    padding-bottom: 0.2em;
+}
+
+ul#topmenu .submenu {
+    position: relative;
+}
+
+ul#topmenu ul {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    list-style-type: none;
+    display: none;
+    -moz-box-shadow: 2px 2px 3px #666;
+    -webkit-box-shadow: 2px 2px 3px #666;
+    box-shadow: 2px 2px 3px #666;
+    border: 1px #666 solid;
+}
+
+ul#topmenu li:hover ul, ul#topmenu .submenuhover ul {
+    display: block;
+}
+
+ul#topmenu ul li {
+    width: 100%;
+}
+
+ul#topmenu2 a {
     display:            block;
     margin:             0.1em;
     padding:            0.2em;
@@ -651,29 +681,42 @@ ul#topmenu2 {
     clear: both;
 }
 
-ul#topmenu li {
+ul#topmenu > li {
     border-bottom:      1pt solid black;
 }
 
 /* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
     background-color:   <?php echo $GLOBALS['cfg']['BgOne']; ?>;
-    border:             1pt solid <?php echo $GLOBALS['cfg']['BgTwo']; ?>;
+    border:             0 solid <?php echo $GLOBALS['cfg']['BgTwo']; ?>;
-    border-bottom:      0;
+    border-width:       1pt 1pt 0 1pt;
     -moz-border-radius: 0.4em 0.4em 0 0;
     border-radius:      0.4em 0.4em 0 0;
 }
 
+ul#topmenu ul a {
+    border-width:       1pt 0 0 0;
+    -moz-border-radius: 0;
+    border-radius:      0;
+}
+
+ul#topmenu ul li:first-child a {
+    border-width:       0;
+}
+
 /* enabled hover/active tabs */
-ul#topmenu a.tab:hover,
+ul#topmenu > li > a:hover,
-ul#topmenu a.tabcaution:hover,
+ul#topmenu > li > .tabactive {
-ul#topmenu .tabactive,
-ul#topmenu .tabactive:hover {
     margin:             0;
     padding:            0.2em 0.4em 0.2em 0.4em;
     text-decoration:    none;
 }
 
+ul#topmenu ul a:hover,
+ul#topmenu ul .tabactive {
+    text-decoration:    none;
+}
+
 ul#topmenu a.tab:hover,
 ul#topmenu .tabactive {
     background-color:   <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
@@ -688,7 +731,7 @@ ul#topmenu2 a.tabactive {
 }
 
 /* to be able to cancel the bottom border, use <li class="active"> */
-ul#topmenu li.active {
+ul#topmenu > li.active {
      border-bottom:      1pt solid <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
 }