|
JavaXT
|
|
MenuLayout Class
if(!javaxt) var javaxt={};
if(!javaxt.dhtml) javaxt.dhtml={};
//******************************************************************************
//** MenuLayout
//******************************************************************************
/**
* Layout initially intended for mobile applications. Contains a header,
* body, and menu panel. The header includes a menu icon which is used to
* slide open/close a menu panel.
*
******************************************************************************/
javaxt.dhtml.MenuLayout = function(parent, config) {
this.className = "javaxt.dhtml.MenuLayout";
var me = this;
var defaultConfig = {
/** Time to slide open the menu panel, in milliseconds.
*/
animationSteps: 250.0,
/** Transition effect. A "linear" transition is applied by default.
* Additional options are available if an instance of a
* javaxt.dhtml.Effects class is provided in the "fx" config. See
* the javaxt.dhtml.Effects class for complete a list of options.
*/
transitionEffect: "linear",
/** An instance of a javaxt.dhtml.Effects class used to animate
* transitions.
*/
fx: null,
/** Width of the menu panel, in pixels.
*/
menuWidth: 250,
/** Used to set which side to use for the menu panel and corresponding
* icon. Options are "left" or "right".
*/
menuPosition: "left",
/** Text or DOM object to appear in the header area.
*/
title: "",
/** Style for individual elements within this component. Note that you
* can provide CSS class names instead of individual style definitions.
*/
style: {
header: {
height: "35px",
backgroundColor: "#777777",
color: "#FFFFFF"
},
title: {
lineHeight: "35px",
position: "absolute",
width: "100%",
whiteSpace: "nowrap",
fontFamily: "helvetica,arial,verdana,sans-serif",
fontSize: "20px",
color: "white",
textAlign: "center",
cursor: "pointer"
//textTransform: "uppercase"
},
menu: {
backgroundColor: "#4BB5EF"
},
menuIcon: {
//Defaults to createMenuIcon() function
},
body: {
}
}
};
var outerDiv;
var innerDiv;
var headerDiv;
var menuDiv;
var bodyDiv;
var titleDiv;
var title;
var menuWidth, menuPosition;
var menuIcon;
var isMenuVisible = false;
//**************************************************************************
//** Constructor
//**************************************************************************
var init = function(){
if (typeof parent === "string"){
parent = document.getElementById(parent);
}
if (!parent) return;
//Clone the config so we don't modify the original config object
var clone = {};
merge(clone, config);
//Merge clone with default config
defaultConfig.style.menuIcon = createMenuIcon;
merge(clone, defaultConfig);
config = clone;
//Process config
menuWidth = config.menuWidth;
menuPosition = config.menuPosition;
if (menuPosition==="right"){}
else menuPosition = "left";
title = config.title;
var mainDiv = createElement("div", parent, {
width: "100%",
height: "100%",
position: "relative"
});
mainDiv.setAttribute("desc", me.className);
me.el = mainDiv;
//Create outer table (for resize purposes)
var table = createTable(mainDiv);
table.setAttribute("desc", me.className);
var row = table.addRow();
var td = row.addColumn({
width: "100%",
height: "100%",
border: "0px", //"1px solid #969696"
verticalAlign: "top"
});
//Create divs (for overflow purposes)
outerDiv = createElement('div', td, {
width: "100%",
height: "100%",
position: "relative"
});
var overflowDiv = createElement('div', outerDiv, {
width: "100%",
height: "100%",
position: "absolute",
overflow: "hidden"
});
//Create content div with a width = parent width + menu width
innerDiv = createElement('div', overflowDiv, {
width: (outerDiv.offsetWidth+menuWidth)+"px",
height: "100%",
position: "relative",
marginLeft: (menuPosition==="left" ? -menuWidth : 0) +"px"
});
if (config.fx){
config.fx.setTransition(innerDiv, config.transitionEffect, config.animationSteps);
}
//Create table with 2 columns - one for the menu and one for the body
table = createTable(innerDiv);
row = table.addRow();
var leftCol = row.addColumn({
height: "100%",
verticalAlign: "top"
});
if (menuPosition==="right") leftCol.style.width="100%";
var rightCol = row.addColumn({
height: "100%",
verticalAlign: "top"
});
if (menuPosition==="left") rightCol.style.width="100%";
menuDiv = createElement('div', config.style.menu);
menuDiv.style.height = "100%";
menuDiv.style.width = menuWidth + "px";
if (menuPosition==="left") leftCol.appendChild(menuDiv);
else rightCol.appendChild(menuDiv);
//Create table with 2 rows - one for the header and one for the body
table = createTable();
row = table.addRow();
headerDiv = row.addColumn(config.style.header);
headerDiv.style.width="100%";
row = table.addRow();
bodyDiv = row.addColumn(config.style.body);
bodyDiv.style.width="100%";
bodyDiv.style.height="100%";
bodyDiv.style.verticalAlign = "top";
if (menuPosition==="left") rightCol.appendChild(table);
else leftCol.appendChild(table);
onRender(bodyDiv, function(){
//Create header after the table has been added to the document!
headerDiv.appendChild(createHeader());
//Watch for resize events
addResizeListener(outerDiv, function(){
me.resize();
me.onResize();
});
//Hide navbar hack. Might not work for other browsers. More info here:
//https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
window.scrollTo(0,1);
});
};
//**************************************************************************
//** createHeader
//**************************************************************************
var createHeader = function(){
var table = createTable();
var row = table.addRow();
//Create left column
var leftCol = row.addColumn();
//Create title
var centerCol = row.addColumn({
width: "100%",
height: "100%"
});
centerCol.appendChild(createTitle());
//Create right column
var rightCol = row.addColumn();
//Add menu icon
var tgt = (menuPosition==="left") ? leftCol : rightCol;
tgt.onclick = function(){
var margin = parseFloat(innerDiv.style.marginLeft);
if (margin<0){
me.showMenu();
}
else{
me.hideMenu();
}
};
if (typeof config.style.menuIcon === "function") {
menuIcon = config.style.menuIcon();
}
else{
menuIcon = createElement('div', config.style.menuIcon);
}
tgt.appendChild(menuIcon);
return table;
};
//**************************************************************************
//** createMenuIcon
//**************************************************************************
var createMenuIcon = function(){
var h = headerDiv.offsetHeight;
var outerDiv = createElement('div', {
width: h+"px",
height: h+"px",
position: "relative",
cursor: "pointer"
});
var overflowDiv = createElement('div', outerDiv, {
width: "100%",
height: "100%",
position: "absolute",
overflow: "hidden"
});
var barWidth = 22;
var barHeight = 3;
var barSpacing = 3;
for (var i=0; i<3; i++){
createElement('div', overflowDiv, {
width: barWidth+"px",
height: barHeight+"px",
background: "#FFFFFF",
marginBottom: barSpacing+"px"
});
}
overflowDiv.style.marginLeft = ((h-barWidth)/2)+"px";
overflowDiv.style.marginTop = ((h-((barHeight+barSpacing)*3))/2)+"px";
//overflowDiv.style.marginBottom = "-" + div.style.marginTop;
return outerDiv;
};
//**************************************************************************
//** getMenuIcon
//**************************************************************************
/** Returns the DOM element used to render the menu icon.
*/
this.getMenuIcon = function(){
return menuIcon;
};
//**************************************************************************
//** createTitle
//**************************************************************************
var createTitle = function(){
var outerDiv = createElement('div', {
width: "100%",
height: "100%",
position: "relative"
});
var overflowDiv = createElement('div', outerDiv, {
width: "100%",
height: "100%",
position: "absolute",
overflow: "hidden"
});
titleDiv = createElement('div', overflowDiv, config.style.title);
me.setTitle(title);
return outerDiv;
};
//**************************************************************************
//** setTitle
//**************************************************************************
/** Used to update the contents of the header area
* @param obj Text or DOM object to appear in the header area
*/
this.setTitle = function(obj){
title = obj;
if (isElement(title)){
titleDiv.innerHTML = "";
titleDiv.appendChild(title);
}
else{
titleDiv.innerHTML = title;
}
};
//**************************************************************************
//** getTitle
//**************************************************************************
/** Returns the title (e.g. string or DOM object). See setTitle()
*/
this.getTitle = function(){
return title;
};
//**************************************************************************
//** isMenuVisible
//**************************************************************************
/** Returns true if the menu is visible
*/
this.isMenuVisible = function(){
return isMenuVisible;
};
//**************************************************************************
//** showMenu
//**************************************************************************
/** Used to slide open the menu, if it is hidden from view
*/
this.showMenu = function(){
if (isMenuVisible) return;
//console.log("showMenu!");
me.beforeShow();
isMenuVisible = true;
if (config.fx){
setTimeout(function(){
innerDiv.style.marginLeft = "0px";
setTimeout(function(){
me.onShow.apply(me, []);
}, config.animationSteps+50);
}, 50);
}
else{
slideMenu(true, new Date().getTime(), config.animationSteps, me.onShow);
}
};
//**************************************************************************
//** hideMenu
//**************************************************************************
/** Used to hide the menu, if it is visible
*/
this.hideMenu = function(){
if (!isMenuVisible) return;
me.beforeHide();
var callback = function(){
isMenuVisible = false;
me.onHide.apply(me, []);
};
if (config.fx){
setTimeout(function(){
innerDiv.style.marginLeft = -menuWidth+"px";
setTimeout(callback, config.animationSteps+50);
}, 50);
}
else{
slideMenu(false, new Date().getTime(), config.animationSteps, callback);
}
};
//**************************************************************************
//** onShow
//**************************************************************************
/** Called whenever the menu is made visible
*/
this.onShow = function(){};
//**************************************************************************
//** onHide
//**************************************************************************
/** Called whenever the menu is hidden
*/
this.onHide = function(){};
//**************************************************************************
//** beforeShow
//**************************************************************************
/** Called immediately before the menu is made visible
*/
this.beforeShow = function(){};
//**************************************************************************
//** beforeHide
//**************************************************************************
/** Called immediately before the menu is hidden
*/
this.beforeHide = function(){};
//**************************************************************************
//** slideMenu
//**************************************************************************
/** Used to slide the menu panel open or close.
*/
var slideMenu = function(slideOpen, lastTick, timeLeft, callback){
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
//If the animation is complete, ensure that the panel is completely open
if (timeLeft <= elapsedTicks){
innerDiv.style.marginLeft = slideOpen? "0px" : -menuWidth+"px";
if (callback!=null){
callback.apply(me, []);
}
return;
}
timeLeft -= elapsedTicks;
var marginLeft;
if (slideOpen){
marginLeft = Math.round((timeLeft/config.animationSteps) * menuWidth);
}
else{
marginLeft = menuWidth - Math.round((timeLeft/config.animationSteps) * menuWidth);
}
innerDiv.style.marginLeft = -marginLeft + "px";
setTimeout(function(){
slideMenu(slideOpen, curTick, timeLeft, callback);
}, 33);
};
//**************************************************************************
//** resize
//**************************************************************************
/** Used to update the layout of this component
*/
this.resize = function(){
innerDiv.style.width=(outerDiv.offsetWidth+menuWidth)+"px";
};
//**************************************************************************
//** onResize
//**************************************************************************
/** Function called whenever this component is resized
*/
this.onResize = function(){};
//**************************************************************************
//** getMenu
//**************************************************************************
/** Returns the menu panel
*/
this.getMenu = function(){
return menuDiv;
};
//**************************************************************************
//** getBody
//**************************************************************************
/** Returns the body panel
*/
this.getBody = function(){
return bodyDiv;
};
//**************************************************************************
//** Utils
//**************************************************************************
var merge = javaxt.dhtml.utils.merge;
var onRender = javaxt.dhtml.utils.onRender;
var createTable = javaxt.dhtml.utils.createTable;
var createElement = javaxt.dhtml.utils.createElement;
var addResizeListener = javaxt.dhtml.utils.addResizeListener;
var isElement = javaxt.dhtml.utils.isElement;
init();
};
|
|