[dev] menu

[Joel Vandal]

>    With the increase number of modules that appeared lately, menu
> increased a lot. Even with my browser maximized, I don't have horizontal
> space to have all the horde modules in the menu, and there is not an
> horizontal scroll bar to move to the righter modules. I think this
> should be changed, because it starts to not look attractive, in terms of
> interface.

Few month ago, I've make a little "Outlook-like" menu bar. Here is the
source...
don't know if it will work 100% since I don't work on this since a few
month...

--
Joel Vandal

==============================================
File: horde/templates/horde/modules.inc
==============================================
<div style="" id="oeBarContainer" upButton="UpButton"
downbutton="DownButton">
<?= $moduletext ?>
</div>
<div class="scrollButton" id="UpButton" type="up"
for="oeBarContainer">5</div>
<div class="scrollButton" id="DownButton" type="down"
for="oeBarContainer">6</div>

==============================================
File: horde/templates/javascript/oebar.js
==============================================
<script language="JavaScript" type="text/javascript">
<!--

/*
##############################################
#         WebFX Dynamic Webboard 2.0         #
#       By Emil A Eklund (eae@eae.net)       #
#      and Erik Arvidson (erik@eae.net)      #
#           http://webfx.eae.net             #
#              April 13, 1999                #
##############################################
# Feel free to use this script for personal  #
# and non profit web sites, as long as you   #
# are giving us credits for it, in other     #
# words, not removing nor modifying this     #
# notice in any of the files it appears in   #
##############################################
#  For commercial use contact Emil or Erik   #
##############################################
*/


document.onmouseover = oeBarHandleOver;
document.onmouseout = oeBarHandleOut;
document.onmousedown = oeBarHandleDown;
document.onmouseup = oeBarHandleUp;
document.onclick = oeBarHandleClick;

window.onresize = new Function("checkScroll(oeBarContainer)");
window.onload   = initOeBarPrime;

var scrollTimer;
var paddingOrg = 2;
var scrollInterval = 200; // the time between the repeating of the scroll
var scrollAmount = 49; // The amount of pixels to scroll every
scrollInterval ms

function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}

function initOeBarPrime() {
document.body.onselectstart = new Function ("return false");
checkScroll(oeBarContainer);
selectRightItem();
}

function selectRightItem() {
if (!parent.trLoaded || parent.treeframe.document.readyState != "complete")
window.setTimeout("selectRightItem()", 100);
else {
var el;
var gr = parent.treeframe.document.body.group;
var divs = document.all.tags("DIV");

for (var i=0; i<divs.length; i++) {
// alert(divs[i].getAttribute("onclick"));
if (divs[i].getAttribute("onclick") != null &&
divs[i].getAttribute("onclick").toString().indexOf(gr) != -1) {

document.body.selectedItem = divs[i];
oeBarSelect(divs[i]);
break;
}
}

}
}


function loadTree(group) {
if (!parent.trLoaded || !parent.mLoaded || !parent.tLoaded ||
!parent.treeframe.document.body)
window.setTimeout("loadTree('" + group + "')", 100);
else {
var pwd = parent.treeframe.document.body.password;

if (pwd == null)
parent.treeframe.location = cgiFile + "?action=tree&group=" + group;
else
parent.treeframe.location = cgiFile + "?action=admintree&group=" + group +
"&pwd=" + pwd;

var md = parent.messageframe.document;
md.frames[0].location = startMessageURL;
md.all.subject.innerHTML = "&nbsp;";
md.all.email.innerHTML = "&nbsp;";
md.all.date.innerHTML = "&nbsp;";

var td = parent.toolframe.document;
parent.toolframe.disable(td.all.followUpButton);
parent.toolframe.disable(td.all.replyToAuthorButton);
window.clearTimeout(parent.treeframe.currentMessageTimer);
}
}

function oeBarHandleClick() {
el = getReal(window.event.srcElement, "tagName", "DIV");

if (el.className == "oeBarButton") {
if (document.body.selectedItem == null) {
document.body.selectedItem = el;
oeBarSelect(el);
}
else if (document.body.selectedItem != el) {
oeBarUnSelect(document.body.selectedItem);
document.body.selectedItem = el;
oeBarSelect(el);
}
}
}

function oeBarHandleOver() {
var fromEl = getReal(window.event.fromElement, "tagName", "DIV");
var toEl = getReal(window.event.toElement, "tagName", "DIV");
if (fromEl == toEl) return;

el = toEl;

if (el.className == "scrollButton" || el.className == "oeBarButton")
oeBarRaise(el);
}

function oeBarHandleOut() {
var fromEl = getReal(window.event.fromElement, "tagName", "DIV");
var toEl = getReal(window.event.toElement, "tagName", "DIV");
if (fromEl == toEl) return;

el = fromEl;

if (el.className == "scrollButton" || el.className == "oeBarButton") {
oeBarFlat(el);
window.clearTimeout(scrollTimer);
}

}

function oeBarHandleDown() {
el = getReal(window.event.srcElement, "tagName", "DIV");

if (el.className == "scrollButton") {
var type = el.getAttribute("type");
var container = el.getAttribute("for");
oeBarLower(el);
scrollContainer(document.all(container), type);
}

if (el.className == "oeBarButton")
oeBarLower(el);
}

function oeBarHandleUp() {
el = getReal(window.event.srcElement, "tagName", "DIV");

if (el.className == "scrollButton") {
oeBarRaise(el);
window.clearTimeout(scrollTimer);
}

if (el.className == "oeBarButton") {
oeBarRaise(el);

}
}

// the following five functions describes the behavior of the *buttons*
function oeBarRaise(el) {
with (el.style) {
borderWidth = "1px";
borderStyle = "outset";
borderColor = "buttonhighlight";
borderTop = "1px solid threedlightshadow";
borderLeft = "1px solid threedlightshadow";
borderRight = "1px solid threeddarkshadow";
borderBottom = "1px solid threeddarkshadow";
padding = paddingOrg;
}
}

function oeBarLower(el) {
with (el.style) {
borderWidth = "1px";
borderStyle = "inset";
borderTop = "1px solid threeddarkshadow";
borderLeft = "1px solid threeddarkshadow";
borderRight = "1px solid threedlightshadow";
borderBottom = "1px solid threedlightshadow";
paddingLeft = paddingOrg + 1;
paddingTop = paddingOrg + 1;
paddingRight = paddingOrg - 1;
paddingBottom = paddingOrg - 1;
}
}

function oeBarFlat(el) {
with (el.style) {
border = "1px solid buttonshadow";
padding = paddingOrg;
}
}

function oeBarSelect(el) {
el.style.background = "highlight";
el.style.color = "highlighttext";
}

function oeBarUnSelect(el) {
el.style.background = "buttonshadow";
el.style.color = "window";
}

function checkScroll(el) {
var ub = document.all(el.getAttribute("upbutton"));
var db = document.all(el.getAttribute("downbutton"));
var p = el.parentElement;
var top = el.style.pixelTop;
var bottom = el.offsetHeight + top - p.clientHeight;

if (el.offsetHeight > p.clientHeight) {
if (top < 0 && bottom < 0)
setBottom(el,0);

if (ub != null) {
if (top < 0)
ub.style.display = "block";
else
ub.style.display = "none";
}
if (db != null) {
if (bottom > 0)
db.style.display = "block";
else
db.style.display = "none";
}
}
else {
setTop(el, 0);
if (db != null)
db.style.display = "none";
if (ub != null)
ub.style.display = "none";
}

db.style.top = el.parentElement.clientHeight - db.offsetHeight;
}

function setTop(el, y) {
if (y <= 0) {
el.style.pixelTop = y;
el.style.clip = "rect(" + -y + "," +  el.parentElement.clientWidth +
"," + (el.parentElement.clientHeight + -y) + "," + 0 + ")";
}
}

function setBottom(el, y) {
if (y >= 0) {
var ph = el.parentElement.clientHeight;
var top = el.offsetHeight - ph - y;
el.style.pixelTop = -top;
el.style.clip = "rect(" + top + "," + el.parentElement.clientWidth +
"," + (el.offsetHeight) + "," + 0 + ")";
}
}

function scrollContainer(el, type) {
var p = el.parentElement;
var oldTop = el.style.pixelTop;
var top = (type == "down") ? oldTop - scrollAmount : oldTop + scrollAmount;
var bottom = el.offsetHeight + top - p.clientHeight;

if (type=="down" && bottom < 0)
setBottom(el,0);
if (type=="up" && top > 0)
setTop(el,0);
else if ((top < scrollAmount && type=="up") || (type=="down" && bottom
> -scrollAmount)) {
setTop(el, top);
}

checkScroll(el);
window.clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollContainer(document.all('" + el.id +
"'),'" + type + "')", scrollInterval);
}

//-->
</script>

==============================================
File: horde/menu.php
==============================================
<?php

define('HORDE_BASE', dirname(__FILE__));
require_once HORDE_BASE . '/lib/base.php';
require_once HORDE_BASE . '/lib/Menu.php';

$bodyStyle='oeBar';
$bodyScroll='no';

$js_onLoad = null;

require HORDE_TEMPLATES . '/common-header.inc';

$moduletext = '';

foreach ($registry->applications as $service => $params) {
    if ($params['show']) {
$url = Horde::url($params['webroot'] . '/' . (isset($params['initial_page'])
? $params['initial_page'] : '')) ;
$onclick = "javascript:parent.RefreshFrames('$service','$url')" ;

        $moduletext .= Menu::createItem($url, gettext($params['name']),
$params['icon'], '', 'horde_main', $onclick) ;
    }
}

/* Add a logout link */

$moduletext .=
Menu::createItem(Horde::applicationUrl('login.php?reason=logout'), _("Log
out"), 'logout.gif', null, '_parent','javascript:parent.LogOut()');

require HORDE_TEMPLATES . '/javascript/oebar.js';
require HORDE_TEMPLATES . '/horde/modules.inc';
require HORDE_TEMPLATES . '/common-footer.inc';

?>

==============================================
File: horde/config/html.php (Append)
==============================================
$css['.oeBar']['margin'] = '0';
$css['.oeBar']['background'] = 'buttonshadow';
$css['.oeBar']['color'] = 'window';
$css['.oeBar']['overflow'] = 'hidden';
$css['.oeBar']['font'] = 'menu';
$css['.oeBar']['cursor'] = 'default';
$css['.oeBar']['border-width'] = '0px';
$css['.oeBar']['border-style'] = 'inset';

$css['.oeBarButton']['width'] = '100%';
$css['.oeBarButton']['align'] = 'center';
$css['.oeBarButton']['padding'] = '2px';
$css['.oeBarButton']['text-align'] = 'center';
$css['.oeBarButton']['border'] = '1px solid buttonshadow';

$css['#oeBarContainer']['position'] = 'absolute';
$css['#oeBarContainer']['overflow'] = 'hidden';
$css['#oeBarContainer']['top'] = '0';
$css['#oeBarContainer']['left'] = '0';

$css['.scrollButton']['position'] = 'absolute';
$css['.scrollButton']['height'] = '16px';
$css['.scrollButton']['width'] = '100%';
$css['.scrollButton']['overflow'] = 'hidden';
$css['.scrollButton']['font-family'] = 'webdings';
$css['.scrollButton']['font-size'] = '10px';
$css['.scrollButton']['text-align'] = 'center';
$css['.scrollButton']['background'] = 'buttonface';
$css['.scrollButton']['color'] = 'buttontext';
$css['.scrollButton']['display'] = 'none';
$css['.scrollButton']['cursor'] = 'default';
$css['.scrollButton']['border'] = '1px solid buttonface';
$css['.scrollButton']['z-index'] = '2px';

$css['.arrow']['font-family'] = 'webdings';
$css['.arrow']['color'] = 'black';
$css['.arrow']['padding'] = '0';
$css['.arrow']['font-size'] = '10px';
$css['.arrow']['height'] = '11px';
$css['.arrow']['width'] = '10px';
$css['.arrow']['overflow'] = 'hidden';
$css['.arrow']['margin-bottom'] = '2px';
$css['.arrow']['margin-top'] = '-3px';
$css['.arrow']['padding'] = '0';
$css['.arrow']['padding-top'] = '0';
$css['.arrow']['padding-bottom'] = '2px';