/*
sMenu - Stylish Javascript Menu v1.0
http://code.google.com/p/smenu-stylish-javascript-menu
Document : core.js
Created on : Mar 5, 2011
Author : Michael D. Arps Jr.
Copyright © 2011 Michael D. Arps Jr. All rights reserved.
Licensed under the GNU General Public License (GPL) Version 2.
All images included with the program are released under the
GNU General Public License (GPL) Version 2.
See the license file (LICENSE.txt) included with the program or
http://www.gnu.org/licenses/gpl-2.0.txt for the license definition.
*/
SMenu =
{
idPrefix: "s", /* the prefix for the ids of the dom elements */
fadeInterval: 250, /* the time interval for the fading in/out of the header
hilite and menu */
headerSelFadeInterval: 200, /* controls the speed at which the selection
for a header fades in */
hiddenOffset: "-999999px", /* used for displaying the menu items initially
so we can set the width of the menu */
innerMenuOffset: 10, /* this is to help size the menus' width
to match the width of the menuHeader if
the menu doesn't contain any items
larger than the menuHeader */
menuContainerDiff: 32,
menuContainerOffset: 50, /* menuHeaderHiL, menuHeaderHiR widths */
menuItemFadeInInterval: 275, /* the time interval for the fading in of the
menu item hilite */
menuItemFadeOutInterval: 50, /* the time interval for the fading out of the
menu item hilite */
menuItemHiliteOffset: 10, /* menuItemHiTLCorner, menuItemHiTRCorner widths */
menuItemsOffset: 40, /* menuLM, menuRM widths */
selectedOffset: 10, /* selectedMenuHeaderBLCorner,
selectedMenuHeaderBRCorner widths */
/* used to identify how the menus' width correlates with the
* menu header width. this value is used when calculating the width of the menu
* and the items in the menu.
*/
MenuWidthType:
{
LessThan: 0,
EqualTo: 1,
GreaterThan: 2
},
/*
--------------
menuCfg format
--------------
menuCfg =
[
{
menuHeader:
{
text: "Home",
url: "/home.html"
}
},
{
menuHeader:
{
text: "Products",
url: "/products.html"
},
menuItems:
[
{
text: "Pizza",
url: "/pizza.html"
},
{
text: "Buffalo Wings",
url: "/buffaloWings.html"
},
{
text: "Breadsticks",
url: "/breadsticks.html"
}
]
},
{
menuHeader:
{
text: "About",
url: "/about.html"
},
menuItems:
[
{
text: "Company",
url: "/company.html"
},
{
text: "History",
url: "/history.html"
}
]
}
]
*/
buildMenu: function (menuItemsCfg, menuCfg)
{
if (!menuItemsCfg)
return;
$.extend(this, menuCfg);
this.createDom(menuItemsCfg);
this.sizeMenu();
this.initEvents();
},
createDom: function (menuCfg)
{
var hiddenCls = "sMenu-hidden";
var menuData;
var menuOuterContainer = $(".sMenu-menuOuterContainer");
var domStringArray = [];
var menuItems;
var menuDataRoot;
for (var i = 0; i < menuCfg.length; i++)
{
menuData = menuCfg[i];
menuItems = menuData.menuItems;
menuDataRoot = menuData.menuHeader;
this.createMenuHeaderDom(menuDataRoot, i, domStringArray);
this.createMenuHeaderSelectedDom(menuDataRoot, i, menuItems, domStringArray);
this.createMenuHeaderHiliteDom(domStringArray, i);
this.createMenuItemsDom(domStringArray, i, menuItems);
this.finishMenuContainer(domStringArray, i + 1);
}
this.finishMenu(menuOuterContainer, domStringArray);
menuOuterContainer.removeClass(hiddenCls);
},
createMenuHeaderDom: function (menuDataRoot, i, domStringArray)
{
var menuHeaderTextArray = [];
var menuItemRootText = menuDataRoot.text;
var menuItemRootUrl = menuDataRoot.url;
if (i === 0)
domStringArray.push("");
domStringArray.push(""); // end menuContainer
domStringArray.push("");
},
getId: function (className, i)
{
var className = className.charAt(0).toUpperCase() +
className.substring(1);
return this.idPrefix + className + (i + 1);
},
getMenuContentItemId: function (menuContentItemClassName, i, j)
{
return this.getId("menuContent", i) + "_" + this.getId(menuContentItemClassName, j);
},
getInnerMenuItemWidth: function (context)
{
var lessThanAmt;
var innerMenuItemWidth;
var menuItems = context.MenuItems;
var menuItemsWidth = context.MenuItemsWidth;
var innerMenuOffset = this.innerMenuOffset;
var menuItemsOffset = this.menuItemsOffset;
var MenuWidthType = this.MenuWidthType;
var currentWidthType = MenuWidthType.LessThan;
var menuHeight = 0;
menuItems.each(function ()
{
var menuItemWidth = 0;
var menuItem = $(this);
lessThanAmt = 0;
menuHeight += menuItem.outerHeight(true);
if (menuItem.outerWidth() > menuItemWidth)
menuItemWidth = menuItem.outerWidth();
var currentMenuItemWidth = menuItemWidth + menuItemsOffset;
if (currentMenuItemWidth > menuItemsWidth)
{
if (currentWidthType < MenuWidthType.GreaterThan)
currentWidthType = MenuWidthType.GreaterThan;
if (currentMenuItemWidth > menuItemsWidth)
menuItemsWidth = menuItemWidth;
}
else if (currentMenuItemWidth === menuItemsWidth)
{
if (currentWidthType < MenuWidthType.EqualTo)
currentWidthType = MenuWidthType.EqualTo;
}
else
{
if (!currentWidthType)
{
currentWidthType = MenuWidthType.LessThan;
lessThanAmt = menuItemsWidth -
(menuItemWidth + menuItemsOffset);
}
}
if (currentWidthType === MenuWidthType.GreaterThan)
{
if (innerMenuItemWidth !== (menuItemsWidth - menuItemsOffset))
{
menuItemsWidth += menuItemsOffset;
innerMenuItemWidth = menuItemsWidth - menuItemsOffset;
}
}
else
{
innerMenuItemWidth = menuItemsWidth - menuItemsOffset;
if (lessThanAmt > innerMenuOffset)
innerMenuItemWidth -= innerMenuOffset;
}
});
context.MenuItemsWidth = menuItemsWidth;
context.InnerMenuItemWidth = innerMenuItemWidth;
context.LessThanAmt = lessThanAmt;
context.CurrentWidthType = currentWidthType;
context.MenuItems = menuItems;
context.MenuHeight = menuHeight;
},
initEvents: function ()
{
var self = this;
$(".sMenu-menuContainer").each(function(i)
{
var menuContainer = $(this);
if (self.isIE())
self.fadeInterval = 0;
menuContainer.bind("mouseenter",
{
context:
{
scope: self,
menuContainer: menuContainer
}
},
self.onMenuContainerMouseEnter);
menuContainer.bind("mouseleave",
{
context:
{
scope: self,
menuContainer: menuContainer
}
},
self.onMenuContainerMouseLeave);
var menuContent = menuContainer.find(".sMenu-menuItems")
.find(".sMenu-menuMiddleRow")
.find(".sMenu-menuContent");
menuContent.find(".sMenu-menuItem").each(function (i)
{
var menuItem = $(this);
var menuItemHilite;
var i = 0;
menuItem.next(".sMenu-menuItemHilite").each(function ()
{
if (i > 0)
return false;
++i;
menuItemHilite = $(this);
});
menuItem.bind("mouseenter",
{
context:
{
scope: self,
menuItemHilite: menuItemHilite
}
},
self.onMenuItemMouseEnter);
menuItem.bind("mouseleave",
{
context:
{
scope: self,
menuItemHilite: menuItemHilite
}
},
self.onMenuItemMouseLeave);
});
});
},
isIE: function ()
{
var body = $("body");
var isIE = false;
if (body.hasClass("ie6") || body.hasClass("ie7") ||
body.hasClass("ie8") || body.hasClass("ie9"))
{
isIE = true;
}
return isIE;
},
onMenuContainerMouseEnter: function (ev)
{
var context = ev.data.context;
var fadeInterval = context.scope.fadeInterval;
var menuContainer = context.menuContainer;
menuContainer.find(".sMenu-menuHeaderHilite").stop(true, true).fadeIn(fadeInterval);
menuContainer.find(".sMenu-menuItems").stop(true, true).fadeIn(fadeInterval);
},
onMenuContainerMouseLeave: function (ev)
{
var context = ev.data.context;
var fadeInterval = context.scope.fadeInterval;
var menuContainer = context.menuContainer;
menuContainer.find(".sMenu-menuHeaderHilite").stop(true, true).fadeOut(fadeInterval);
menuContainer.find(".sMenu-menuItems").stop(true, true).fadeOut(fadeInterval);
},
onMenuItemMouseEnter: function (ev)
{
var context = ev.data.context;
var scope = context.scope;
var menuItemHilite = context.menuItemHilite;
if (!scope.isIE())
menuItemHilite.stop(true, true).fadeIn(scope.menuItemFadeInInterval);
else
menuItemHilite.stop(true, true).show();
},
onMenuItemMouseLeave: function (ev)
{
var context = ev.data.context;
var scope = context.scope;
var menuItemHilite = context.menuItemHilite;
menuItemHilite.stop(true, true).fadeOut(scope.menuItemFadeOutInterval);
},
setHeaderSelection: function (context)
{
var selectedMenuHeaderWidth = context.MenuContainerWidth - this.menuContainerDiff;
selectedMenuHeader = context.MenuHeader.siblings(".sMenu-selectedMenuHeader");
selectedMenuHeader.find(".sMenu-selectedMenuHeaderBottomRow")
.find(".sMenu-selectedMenuHeaderBM")
.width(selectedMenuHeaderWidth - this.selectedOffset);
selectedMenuHeader.width(selectedMenuHeaderWidth);
selectedMenuHeader.css("display", "none");
if (!this.isIE())
selectedMenuHeader.stop(true, true).fadeIn(this.headerSelFadeInterval);
else
selectedMenuHeader.stop(true, true).show();
},
setMenuItemSize: function (context)
{
var menuItems = context.MenuItems;
var menuItemsWidth = context.MenuItemsWidth;
var innerMenuItemWidth = context.InnerMenuItemWidth;
var lessThanAmt = context.LessThanAmt;
var currentWidthType = context.CurrentWidthType;
var menuHeight = context.MenuHeight;
var menuMiddleRow;
var menuLM;
var menuRM;
var menuContent;
var menuItemHiliteOffset = this.menuItemHiliteOffset;
var tbarMenuItem;
var menuItemsContainer = context.MenuItemsContainer;
tbarMenuItem = menuItemsContainer;
menuMiddleRow = tbarMenuItem.find(".sMenu-menuMiddleRow");
menuLM = tbarMenuItem.find(".sMenu-menuMiddleRow").find(".sMenu-menuLM");
menuRM = tbarMenuItem.find(".sMenu-menuMiddleRow").find(".sMenu-menuRM");
tbarMenuItem.find(".sMenu-menuTopRow").find(".sMenu-menuTM").width(innerMenuItemWidth);
menuMiddleRow.find(".sMenu-menuContent").width(innerMenuItemWidth);
tbarMenuItem.find(".sMenu-menuBottomRow").find(".sMenu-menuBM").width(innerMenuItemWidth);
menuContent = tbarMenuItem.find(".sMenu-menuMiddleRow").find(".sMenu-menuContent");
var menuContentWidth = menuContent.width();
var menuItem = menuContent.find(".sMenu-menuItem");
var menuItemSpacer = menuContent.find(".sMenu-menuItemSpacer");
var menuItemWidth = menuItem.width();
// we add to the innerMenuItemWidth here to account for the corners of
// the hilite. this is to ensure the hiding and showing of a hilite also
// occurs when the user mouses over the corners of the hilite.
menuItem.width(innerMenuItemWidth +
Math.round(menuItemHiliteOffset / 2));
var menuItemHiliteHeight = 0;
menuContent.find(".sMenu-menuItemHilite").each(function ()
{
var menuItemHilite = $(this);
var hiliteWidth = innerMenuItemWidth + menuItemHiliteOffset;
menuItemHilite.width(hiliteWidth);
menuItemHilite.find(".sMenu-menuItemHiTM").width(innerMenuItemWidth);
menuItemHilite.find(".sMenu-menuItemHiM").width(hiliteWidth);
menuItemHilite.find(".sMenu-menuItemHiBM").width(innerMenuItemWidth);
menuItemHiliteHeight = menuItemHilite.outerHeight();
});
menuItem.find("a").each(function ()
{
var anchor = $(this);
anchor.height(menuItemHiliteHeight);
});
var menuTRCorner = tbarMenuItem.find(".sMenu-menuTopRow")
.find(".sMenu-menuTRCorner");
if (currentWidthType < this.MenuWidthType.GreaterThan &&
lessThanAmt > this.innerMenuOffset)
{
menuTRCorner.removeClass("sMenu-menuTRCorner");
menuTRCorner.addClass("sMenu-menuTRCornerBlock");
}
tbarMenuItem.width(menuItemsWidth);
tbarMenuItem.height(menuHeight);
menuMiddleRow.height(menuHeight);
menuLM.height(menuHeight);
menuContent.height(menuHeight);
menuRM.height(menuHeight);
menuItemsContainer.css("display", "none");
menuItemsContainer.css("position", "");
menuItemsContainer.css("left", "");
},
setMenuWidth: function (context)
{
var menuHeader = context.MenuHeader;
menuHeaderTextWidth = context.MenuHeaderText.outerWidth();
var menuContainerWidth = menuHeaderTextWidth + this.menuContainerOffset;
context.MenuItemsWidth = menuContainerWidth;
context.MenuContainerWidth = menuContainerWidth;
menuHeader.width(menuContainerWidth).parent().width(menuContainerWidth);
var menuHeaderHilite = menuHeader.siblings(".sMenu-menuHeaderHilite").width(menuContainerWidth);
menuHeaderHilite.find(".sMenu-menuHeaderHiT").width(menuHeaderTextWidth);
menuHeaderHilite.find(".sMenu-menuHeaderContent").width(menuHeaderTextWidth);
},
setTopContainerWidth: function (menuOuterContainer)
{
var menuOuterContainerWidth = 0;
var menuBarShadow = $(".sMenu-menuBarShadow");
var cssMenuContainerWidth = menuOuterContainer.css("width") || 0;
var cssMenuBarShadowWidth = menuBarShadow.css("width") || 0;
if (!cssMenuContainerWidth)
{
menuOuterContainer.children().each(function ()
{
menuOuterContainerWidth += $(this).outerWidth();
});
menuOuterContainer.width(menuOuterContainerWidth);
}
if (!cssMenuBarShadowWidth)
$(".sMenu-menuBarShadow").width(menuOuterContainerWidth || cssMenuContainerWidth);
},
setZoneWidth: function ()
{
var menuOuterContainerMiddleZoneWidth = 0;
var menuOuterContainer = $(".sMenu-menuOuterContainer");
var menuOuterContainerMiddleZone = menuOuterContainer.find(".sMenu-menuOuterContainerMiddleZone");
menuOuterContainerMiddleZone.children().each(function ()
{
menuOuterContainerMiddleZoneWidth += $(this).outerWidth();
});
menuOuterContainerMiddleZone.width(menuOuterContainerMiddleZoneWidth);
},
sizeMenu: function ()
{
var self = this;
var menuOuterContainer = $(".sMenu-menuOuterContainer");
$(".sMenu-menuHeaderText").each(function (i)
{
var menuHeaderText = $(this);
var menuHeader = menuHeaderText.parent();
var context =
{
MenuHeaderText: menuHeaderText,
MenuHeader: menuHeader
};
var selectedMenuHeader;
self.setMenuWidth(context);
self.setHeaderSelection(context);
var menuItems;
menuHeaderText.parent().parent().find(".sMenu-menuItems").each(function (i)
{
var tbarMenuItem = $(this);
tbarMenuItem.css("position", "relative");
tbarMenuItem.css("left", self.hiddenOffset);
tbarMenuItem.css("display", "inline-block");
menuItems = tbarMenuItem.find(".sMenu-menuMiddleRow")
.find(".sMenu-menuContent")
.find(".sMenu-menuItem");
context.MenuItems = menuItems;
context.MenuItemsContainer = tbarMenuItem;
self.getInnerMenuItemWidth(context);
self.setMenuItemSize(context);
});
});
self.setZoneWidth();
self.setTopContainerWidth(menuOuterContainer);
}
};