What is it: Fortis is a windowing environment that runs in a single
dynamic IE DHTML page. It can be used by itself or with
other page components as it is minimally intrusive. It boasts
a window bar (like in MS Windows 9x), global menu and status
bar, and windows that can contain other (arbitrary) web pages.
It can be used for easily creating web applications, either
by generating API calls and windows content on the fly from a
server, for static client-server applicatins, or for
client-only solutions. For more information and documentation
visit www.esaurito.com/fortis.
Requirements: Microsoft Internet Explorer 5 or later.
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
Installation: add these elements to your page anywhere within your BODY
tag and before your code.
var MAXWIN = 100;
for(var i = 0; i < MAXWIN; i++)
document.write('<DIV ID="FORTIS_W'+ i +'" STYLE="position: absolute"></DIV>');
The value of MAXWIN determines the maximum number of windows that
can be created. Change it at will, but a very large number will slow
down page loading.
You may want to adjust the URL for the modules if they reside in a
different directory than your page.
// FORTIS CLASS SINGLETON
// !!NOT CODE-ENFORCED!! This is the ONLY instance of the environment, DO NOT change the
// variable name because plenty of code relies on it.
window.fortis = new FortisEnvironment();
// You should leave this here as well
fortis.init();
// Fortis Environment class
// The environment. Contains and handles windows and settings.
//
// Params: none (the constructor is called above for you)
//
// Properties/Objects for public use:
// statusbar: a status bar at the bottom of the window
//
// Exported classes for publis use:
// Window: for window creation and handling
// WinStyle: for window styling
//
// Exported constants: see Constants section in constructor
//
// Methods for public use:
// setStyle: sets default style for new windows
// setMenu: sets system menu
// setBackground: sets background image
// showAll: shows all windows
// hideAll: hides all winodws
// minimizeAll: minimizes all open windows
// restoreAll: restores all minimized winodws
// endModal: comes out of any modal windows state
// function FortisEnvironment()
{
// Containers and counters: this.winArray = []; // Holds all window objects created this.divCount = 0; // Keeps count of layers with id's created
// (to generate unique id's) this.winCount = 0; // Holds position of last DIV that was
// a window; this.zidx = 1; // Z-index tracker this.shadowDivs = []; // Holds ID's of divs used in dragging
this.maxiwin = []; // Holds all maximized windows
this.topUsed = 0; // Pixels used on the top of the page by system windows this.botUsed = 0; // Pixels used on the bottom of the page by system windows
// Constants
// Window Style masks this.WS_IFRAME = 1; // prepares an IFRAME as the contnent of the window this.WS_TITLE = 2; // adds a draggable title bar this.WS_CLOSE = 4; // adds a close button* this.WS_MAX = 8; // adds a maximize button* this.WS_MIN = 16; // adds a minimize button* this.WS_SIZE_NS = 32; // allows the window to be resized North-South** this.WS_SIZE_EW = 64; // allows the window to be resized East-West** this.WS_WORKS = 127; // IFRAME, close, minimize, maximize, both size (DEFAULT) this.WS_BLANK = 128; // Blank window
//* : if selected, title bar is also created
//** : if selected, IFRAME is also created
// Environment classes
// -- Window class --
// Manages windows.
//
// Params:
// title: the title of the window
// src: the URL of the page this window will contain
// left: the position in pixels from the left margin (or 'center')
// top: the position in pixels from the top margin (or 'center')
// width: the width of the window in pixels
// height: the width of the window in pixels
// style: the style of the window (a fortis.WinStyle object)
// - default: use Environment settings.
//
// Properties for public use:
// winN: the position in the array of of DIV's of the page.
// div: reference to the DIV object in the DOM. Can be used
// to manipulate the window arbitrarly.
// winId: the string that, using fortis.winArray, can be evaluated
// anywhere to return a reference to the Window object. Used
// to refer to the window in generic event programming.
// title: the HTML contained in the title bar.
// style: the style of the class (a fortis.WinStyle object)
//
// Methods for public use:
// (see at the top of each declaration for details)
//
// addComponent: adds a component to the window
// setStyle: sets the window style
// applyStyle: applies the style to the window
// hide: hides the window
// show: show the window
// refresh: refreshes the IFRAME and focuses
// lock: does not allow window closing
// unlock: inverts lock effect
// moveTo: moves the window to a coordinate or position
// moveBy: moves the window by some amount
// setSize: sets the size of the window
// min: minimizes the window
// maxrestore: maximizes or restores the maximized window
// goModal: makes the window modal
// addButton: adds a custom button to the window
function Window(title, src, left, top, width, height, style)
{
// Finds the next DIV to take over
var d = document.all.tags('DIV'); this.winN = fortis.winCount++; this.div = d['FORTIS_W' + this.winN];
// Registers in the winArray
var winPos = fortis.winArray.length;
fortis.winArray[winPos] = this; this.winId = "fortis.winArray[" + winPos + "]";
// function Window.prototype.startDrag
// This function is meant to be called by an event handler and
// enables window dragging. It is not meant to be called by itself.
// function Window.prototype.startResize
// This function is meant to be called by an event handler and
// enables window resiziong. It is not meant to be called by itself.
// -- Window method: lock --
// Does not allow a window to be closed and executes some other
// code instead
//
// Params: code: JScript code to be executed instead of closing
//
// Returns: undefined
function Window.prototype.lock(code)
{ this.isLocked = true; this.lockedCode = code;
}
// -- Window method: show --
// Shows the window and adds it to the window bar
// or brings it to focus if it is already visible.
//
// Params: none
//
// Returns: undefined
// -- Window method: refresh --
// Refreshes the IFRAME of the window with the specified title
// (if it exists) with the specified URL. The window must already
// contain IFRAME capabilities in its style.
//
// Params: url: URL to set the IFRAME's SRC at
//
// Returns: undefined
// -- Window method: moveTo --
// Moves the window to the indicated client co-ordinates
//
// Params: x, y: position to move to. Each can be
// - a positive number : pixel coordinates
// - 'center': centered in the browser window on
// the corresponding axis. Position is not enforced
// after this function call.
//
// Returns: undefined
// -- Window method: moveBy --
// Moves the window by the indicated pixel amounts
//
// Params: x, y: pixel amounts to move by
//
// Returns: undefined
function Window.prototype.moveBy(x,y)
{
var newX = this.div.style.pixelLeft + (+ x); // Signs to insure proper casting
var newY = this.div.style.pixelTop + (+ y); // (CSS values are strings)
this.moveTo(newX, newY);
}
// -- Window method: setSize --
// Changes the window size to the indicated pixel amounts
// and refreshes the style and IFRAME
//
// Params: w, h: new width and height of the window
//
// Returns: undefined
// -- Window method: goModal --
// Gives modal state to the window. The window cannot be moved,
// resized, or closed, and no other object can be activated
// until fortis.endModal() is called.
//
// Params: none
//
// Returns: undefined function Window.prototype.goModal()
{
fortis.endModal();
// -- Window method: addButton --
// Adds an DIV with CSS properties that works and looks like a button.
// Used to create buttons on the title bar;
//
// Params: inner: HTML content of the button (text, images...)
// x, y, w, h: position and size of button
// handler: JScript to call when button pressed
// bgc, fgc: backround and foreground color of the button
//
// Returns: reference to button
// END OF WINDOW CLASS this.Window = Window; // Set as environment property
// -- WinStyle Sructure --
// Holds window attributes. It's passed to the Window
// constructor optionally.
//
// Params:
// style: the style of the window created. As supported by Window.setStyle();
// - default: fortis.WS_WORKS
// bgcolor: the background color of the window
// - default: white
// fgcolor: the foregorund color of the window
// - default: black
// font: the fontlist for the window
// - default: sans-serif
// fsize: the font size (in points)
// - default: 11
// icon: an icon to be placed at the corner of the window (URL)
// - default: none
// barimg: a background image for the title bar (URL)
// - default: none
// over: the overflow mode of the window as in CSS
// - default: hidden
//
// Properties: same as Params
// END OF WINSTYLE CLASS this.WinStyle = WinStyle; // Sets as environment property
// -- WinBar class --
// The bar with buttons in the environment to access windows
//
// Params:
// -none
//
// Properties for public use:
// -none
//
// Methods for public use:
// (see at the top of each declaration for details)
// -> This class is handled by the environment and should not
// be handled manually.
//
// update: refreshes the bar
// add: adds a window
// remove: removes a window
function WinBar()
{ this.wins = []; this.isLocked = false;
var clw = document.body.clientWidth;
var clh = document.body.clientHeight;
// -- WinBar method: update --
// Updates the bar and resizes buttons accordingly
//
// Params: none
//
// Returns: undefined
function WinBar.prototype.update()
{
var titles = []; // The real windows to show this.wnd.div.style.visibility = 'visible'; for(var i = 0; i < this.wins.length; i++) if(this.wins[i])
titles[titles.length] = this.wins[i];
// Outer frame
var out = '<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="' +
fortis.syscolor + '"><TR>';
var clw = document.body.clientWidth; if (titles.length > 4)
{
var lpc = 100/titles.length;
var lpc2 = 0;
var tn = titles.length;
} else
{
var lpc = 20;
var lpc2 = lpc;
var tn = 5;
}
// Each button for(var i = 0; i < titles.length; i++)
{ if(titles[i].title.length < clw/(tn * 11))
var ttl = titles[i].title; else
var ttl = titles[i].title.slice(0, clw/(tn * 11) ) + '...';
if(titles[i].style.icon)
var icn = '<IMG SRC="' + titles[i].style.icon + '" WIDTH="16" HEIGHT="16">'; else
var icn = '';
// -- WinBar method: add --
// Adds a window and refreshes the bar
//
// Params: win: a valid fortis.Window class instance
//
// Returns: undefined
function WinBar.prototype.add(win)
{ this.wnd.div.innerHTML = '';
var wincount = this.wins.length; this.wins[wincount] = win;
this.update();
}
// -- WinBar method: remove --
// Removes a window from the bar and refreshes it
//
// Params: win: a valid fortis.Window instance added before
//
// Returns: undefined function WinBar.prototype.remove(win)
{ this.wnd.div.innerHTML = '';
// END OF WINBAR CLASS this.WinBar = WinBar; // Sets as environment property
// -- StatusBar class --
// Easy to use global status bar
//
// Params:
// -none
//
// Properties for public use:
// -none
//
// Methods for public use:
// (see at the top of each declaration for details)
//
// on: displays the bar
// off: hides the bar
// addMsg: adds a message
// delMsg: removes a message function StatusBar()
{
var clw = document.body.clientWidth;
var clh = document.body.clientHeight;
this.wnd = new Window('', 0, 0, clh-this.size-fortis.botUsed, clw, this.size, new fortis.WinStyle(fortis.WS_BLANK)); this.wnd.div.style.visibility = 'hidden'; this.wnd.div.style.overflow = 'auto'; this.wnd.div.style.borderStyle = 'inset'; this.wnd.div.style.borderColor = fortis.style.bgcolor; this.wnd.div.style.backgroundColor = fortis.style.bgcolor; this.tcolor = fortis.style.fgcolor; this.wnd.div.style.zIndex = Number.MAX_VALUE - 9999; // On top this.wnd.sysW = true;
this.oldBU = fortis.botUsed;
}
// -- StatusBar method: on --
// Shows the bar and locates it properly within the environment
//
// Params: size: the height of the bar in pixles
// - default: previous or default value is retained
//
// Returns: undefined
function StatusBar.prototype.on(size)
{ this.isOn = true; if(size) this.size = size;
var clw = document.body.clientWidth;
var clh = document.body.clientHeight;
// Adds messages to the top, to add them to the bottom
// use this line instead:
// for(var i = 0; i < this.msgs.length; i++) for(var i = this.msgs.length-1; i >= 0; i--) if(this.msgs[i])
out += this.msgs[i].out;
this.wnd.div.innerHTML = out;
fortis.winRefresh();
}
// -- StatusBar method: off --
// Hides the bar rearranges the environment properly
//
// Params: none
//
// Returns: undefined
function StatusBar.prototype.off()
{ this.isOn = false;
// -- StatusBar method: addMsg --
// Adds a message to the bar.
// -> The message is added ON TOP the others, see on method code to change
// the behavior to add it to the bottom
//
// Params: id: message id string, used to remove the message later
// - optional: if omitted, message cannot be removed
// type: type of message (only for look of side):
// 'i' : information (green)
// 'w' : warning (orange)
// 'e' : error (red)
// other : unspecified (white)
// text: text of the message (HTML)
//
// Returns: undefined
function StatusBar.prototype.addMsg(id, type, text)
{
var col = '';
var ico = '';
switch(type)
{ case 'i' : col = 'green'; ico = ''; break; case 'w' : col = 'orange'; ico = ''; break; case 'e' : col = 'red'; ico = ''; break; default: out += 'white';
}
var out = '<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="' + this.tcolor +
'" CELLSPACING="0" CELLPADDING="1"><TR><TD BGCOLOR="' +
col + '" VALIGN="TOP" ALIGN="CENTER" WIDTH=20>' + ico +
'</TD><TD><FONT FACE="sans-serif" COLOR="' + this.tcolor +
'" SIZE="-2">' + text + '</FONT></TD></TR></TABlE>';
this.wnd.div.innerHTML = out + this.wnd.div.innerHTML;
var mr = new Object;
mr.id = id;
mr.out = out;
this.msgs[this.msgs.length] = mr;
}
// -- StatusBar method: delMsg --
// Remove a message from the bar by id.
//
// Params: id: message id string
//
// Returns: undefined
function StatusBar.prototype.delMsg(id)
{
var out = '';
for(var i = this.msgs.length-1; i >= 0; i--) if(this.msgs[i]) if(this.msgs[i].id == id) this.msgs[i] = 0; else
out += this.msgs[i].out;
this.wnd.div.innerHTML = out;
}
// END OF STATUSBAR CLASS this.StatusBar = StatusBar; // Sets as environment property
// -- FortisEnvironment method: init --
// Initializes environment. Called for you earlier on.
//
// Params: none
//
// Returns: undefined
function FortisEnvironment.prototype.init()
{
// Desktop objects: you can comment out the ones you don't need,
// but otherwise keep at most one copy (and with the same name) of each.
// Wallpaper - off until inizialized this.wp_wnd = new fortis.Window('', 0, 0, 0, 0, 0, new fortis.WinStyle(fortis.WS_BLANK)); this.wp_wnd.div.style.borderStyle = 'none'; this.wp_wnd.div.style.overflow = 'visible'; this.wp_wnd.div.style.zIndex = 0; this.wp_wnd.div.style.visibility = 'visible'; this.wp_wnd.sysW = true;
// Windows button bar - on by default. Not creating one does not allow creation of
// minimize buttons, but the rest works the same. this.winbar = new fortis.WinBar();
// Status bar - invisible (but working) by defualt. Use its methods to show or hide. this.statusbar = new fortis.StatusBar();
}
// -- FortisEnvironment method: setStyle --
// Sets the default style for all new windows created
//
// Params: a valid fortis.WinStyle structure instance
//
// Returns: undefined function FortisEnvironment.prototype.setStyle(style)
{ this.style = style;
}
// -- FortisEnvironment method: setMenu --
// Initializes environment. Called for you earlier on.
//
// Params: menu: a valid FMS_Menu (or compatible) class instance
//
// Returns: undefined function FortisEnvironment.prototype.setMenu(menu)
{ if(!this.menu_wnd) // Creates containing window once
{ this.menu_wnd = new fortis.Window('', 0, fortis.topUsed, 0, 0, 0, new fortis.WinStyle(fortis.WS_BLANK)); this.menu_wnd.div.style.borderStyle = 'none'; this.menu_wnd.div.style.overflow = 'visible'; this.menu_wnd.div.style.visibility = 'visible'; this.menu_wnd.div.style.zIndex = Number.MAX_VALUE - 9999; this.menu_wnd.sysW = true;
}
// -- FortisEnvironment method: showAll --
// Shows all created windows in the environment
//
// Params: none
//
// Returns: undefined function FortisEnvironment.prototype.showAll()
{ for(var i = 0; i < this.winArray.length; i++) if(!this.winArray[i].sysW) this.winArray[i].show();
}
// -- FortisEnvironment method: hideAll --
// Hides all windows in the environment, except system ones.
//
// Params: none
//
// Returns: undefined function FortisEnvironment.prototype.hideAll()
{ for(var i = 0; i < this.winArray.length; i++) if(!this.winArray[i].sysW) this.winArray[i].hide();
}
// -- FortisEnvironment method: minimizeAll --
// Minimizes all open windows in the environment
//
// Params: none
//
// Returns: undefined function FortisEnvironment.prototype.minimizeAll()
{ for(var i = 0; i < this.winArray.length; i++) if(!this.winArray[i].sysW && this.winArray[i].div.style.visibility == 'visible') this.winArray[i].min();
}
// -- FortisEnvironment method: restoreAll --
// Restores all minimized windows in the environment.
//
// Params: none
//
// Returns: undefined function FortisEnvironment.prototype.restoreAll()
{ for(var i = 0; i < this.winArray.length; i++) if(!this.winArray[i].sysW && this.winArray[i].isMinimized) this.winArray[i].show();
}
// -- FortisEnvironment method: winRefresh --
// Refreshes various parts of the environnment. Associate with broswer
// window resize event, but also called manually when necessary.
//
// Params: none
//
// Returns: undefined
function FortisEnvironment.prototype.winRefresh()
{
var clw = document.body.clientWidth;
var clh = document.body.clientHeight;
// Positions menu if(fortis.menu_wnd)
fortis.menu_wnd.div.style.pixelWidth = clw;
// Positions windows bar if(fortis.winbar)
{
fortis.winbar.wnd.moveTo(0, clh-fortis.botUsed);
fortis.winbar.wnd.div.style.pixelWidth = clw; if(fortis.syscolor)
fortis.winbar.wnd.div.style.backgroundColor = fortis.syscolor;
fortis.winbar.update();
}
// Position status bar if(fortis.statusbar && fortis.statusbar.isOn)
{
fortis.statusbar.wnd.moveTo(0, clh-fortis.botUsed+fortis.statusbar.oldBU); if(fortis.syscolor)
{
fortis.statusbar.wnd.div.style.backgroundColor = fortis.syscolor;
fortis.statusbar.wnd.div.style.borderColor = fortis.syscolor;
}
fortis.statusbar.wnd.div.style.pixelWidth = clw;
}
// Restores all maximized windows
// (they are not resized with window for efficency reasons) if(fortis.maxiwin)
{ for(w in fortis.maxiwin)
{ if(fortis.maxiwin[w])
{
fortis.maxiwin[w].maxrestore();
fortis.maxiwin[w] = 0;
}
}
}
}
// Ensures calls of function on resize
window.onresize = fortis.winRefresh;
// -- FortisEnvironment method: setBackground --
// Sets the background image of the environment
//
// Params:
// URL: the URL of the image
// x: the width in pixels of the image
// y: the height in pixels of the image
// opts: the display mode of the image
// - supported modes:
// - 'center': the image is centered and left unchanged
// - 'tile': the image is tiled (uses standard HTML)
// - 'none': any image is removed
// - 'stretch': the image is stretched to fit the window
// - 'fit': the image fits the window but keeps its proportions
// - default: 'fit'
//
// Returns: undefined
function FortisEnvironment.prototype.setBackground(url, x, y, mode)
{
// -- FortisEnvironment method: doDrag --
// This method is meant to be called by an event handler and
// enables window dragging. It is not meant to be called by itself.
function FortisEnvironment.prototype.doDrag()
{
fortis.dw.div.style.pixelLeft = event.x +
document.body.scrollLeft - fortis.dw.dragStartX;
// -- FortisEnvironment method: endDrag --
// This method is meant to be called by an event handler and
// enables window dragging. It is not meant to be called by itself.
function FortisEnvironment.prototype.endDrag()
{
document.onmousemove = null;
document.onmouseup = null;
if (window.FMS_menuCount && !fortis.modwin)
{
window.FMS_menuLock = false;
}
event.returnValue = false;
}
// -- FortisEnvironment method: doResize --
// This method is meant to be called by an event handler and
// enables window resizing. It is not meant to be called by itself.
// -- FortisEnvironment method: endResize --
// This method is meant to be called by an event handler and
// enables window resizing. It is not meant to be called by itself.
function FortisEnvironment.prototype.endResize()
{
document.onmousemove = null;
document.onmouseup = null;
//EOF: fortis.js
</SCRIPT>
<!-- fms.js -->
<SCRIPT LANGUAGE="JavaScript">
/*
Fortis Menu System (FMS) version 0.22 (Alpha)
Copyright (C) 2001 Daniele Pagano
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
Requirements: Microsoft Internet Explorer 4 or later.
Info: with FortisMS you can easily create complex menus that
use the power of Dynamic HTML to contain any text, image, or
other HTML and execute any JavaScript code when clicked.
Also available from the same author is Fortis, a fully
dynamic windowing environment which includes this menu
system as a subset.
Website: for more information, latest versions, and code examples
for FortisMS and Fortis, visit www.esaurito.com/fortis.
Use: To create a menu, just create a FMS_Menu object with the
default or a custom FMS_MenuStyle, and populate it with FMS_SubMenu
and FMS_MenuEntry objects. You can either pass the constructor an
array with these elements or add them one by one. Then use one
of the installation techniques as follows to deploy and use the
menu. You can then enable and disable menu entries (as long as every
submenu has a different name), and perform other operations during the
menu life. For more information on how to create FMS_Menu, FMS_MenuStyle,
FMS_SubMenu, and FMS_MenuEntry objects, and all the available options,
refer to the code documentation later in this file.
Installation: there are different ways to deploy FortisMS:
1) Dynamic: menus are created on-the-fly by the client browser from your code.
All the code is visible, and it's processed after the page and the code
are loaded. To deploy follow these steps:
a) add this file (or paste the code) to your page anywhere
before your code, i.e.
b) add code to create the menus, then use something like
document.write(menu_name) to output them anywhere in your page, or
use a dynamic environment like Fortis to insert the menu in another
component.
2) Static: menus are created beforehand and their HTML is manually
inserted into the page. This hides all the generating code, and requires
minimal post-load processing. If you want to use multiple menus on
one page, you can do so as long as they are created from the same run of
your code (to keep the id's unique); you can then scatter the menus on
the page as you wish. You cannot use static deployment in an page that
renders the code available to the browser after the page is parsed (i.e. in
response to an event: that's the typical use of the other option), since
the SCRIPT tags required for the static menus to work are then ignored.
To deploy follow these steps:
a) use the steps for case 1 on a test page, and output the text somewhere
you can copy from (i.e. create an HTML text area and assign its value to
the created menu).
b) put the HTML from step (a) anywhere you want it on your actual page.
*/
// GLOBALS:
window.FMS_menuCount = 0; // To generate unique menu id's.
// Copyright and warranty disclaimer to appear in every menu HTML
window.FMS_notice = "Created with FortisMS 0.22 (Alpha), Copyright (C) 2001-02 Daniele Pagano.\n" +
"FortisMS comes with ABSOLUTELY NO WARRANTY. It is also free software,\n" +
"and you are welcome to redistribute it under certain conditions; for\n" +
"details on these conditions and on the warranty, see fms.js or\n" +
"visit www.esaurito.com/fortis.\n";
/* -- CODE FOR BETTER COMPATIBILITY WITH DYNAMIC ENVIRONMENTS --
Since some dynamic environments (like Fortis) include the menus within
other dynamic page components, the SCRIPT tags outputted by the toString
functions are ignored, since they are created after the page is parsed.
For these cases, you need code that enables that JavaScript in a dynamic manner.
In such environments you will obviously want to use dynamic deployment anyway. This
code does not affect the output for static deployment. If you find yourself in a
situation where the SCRIPT tags do not work and you can only use static deployment,
you can paste this code before your menu to avoid errors, but you will not be able
to use these functions because there would be no way to register the menus in the
arrays (you can try at most pasting the SCRIPT tags somewhere else before your menu).
*/
// Assocative arrays for dynamic menu enabling/disabling.
window.FMS_disabledMenus = new Array(); // Disabled submenus register a true on the value associated
// with their id.
window.FMS_menuIds = new Array(); // Associated submenu title with menu id's. If two submenus
// have the same title, only the last one register will be
// accessible. Hint: if you need submenus with the same name
// displayed, use HTML witespace (like spaces) since it's
// ignored in HTML rendering but is recorded as a different
// entry in the arrays. Just keep track of what is what.
window.FMS_menuColsD = new Array(); // Associates submenu titles with their disabled entry color.
window.FMS_menuColsE = new Array(); // Associates submenu titles with their enabled entry color.
// Arrays use to unlock and close menus
window.FMS_lockedMenus = new Array(); // Locked submenus (HTML entries) register here.
window.FMS_closerArray = new Array(); // Every menu registers its closing Java Script
// code in this. For mass closing.
// Total menu lock
window.FMS_menuLock = false; // When true, no menu can be opened
// FMS_closeMenus()
// Closes all open menus and submenus in the page. Use to unlock HTML that
// contain items like forms that remain open but are closed on command.
//
// Parameters: none.
function FMS_closeMenus()
{
window.FMS_lockedMenus = new Array(); for(m in window.FMS_closerArray)
eval(window.FMS_closerArray[m]);
}
// FMS_disable()
// Disables a submenu entry. Call this after the menu is rendered.
//
// Parameters:
// menu: the name of the menu in which the entry to disable is.
// entry: the position of the entry from the top of the menu (starting from 1)
// FMS_enable()
// Enables a previously disabled submenu entry. Call this after the menu is rendered.
//
// Parameters:
// menu: the name of the menu in which the entry to enable is.
// entry: the position of the entry from the top of the menu (starting from 1)
function window.FMS_enable(menu, entry)
{
var sid = window.FMS_menuIds[menu] + '_' + (entry - 1); if(eval('document.all.' + sid))
{
eval('window.FMS_disabledMenus[\'' + sid + '\'] = 0');
eval('document.all.' + sid + '.style.color = \'' + window.FMS_menuColsE[menu] + '\';');
}
}
// -- END OF CODE FOR BETTER COMPATIBILITY WITH DYNAMIC ENVIRONMENTS --
/* -- FMS_MenuStyle --
This function generates an object that can be passed to one or more FMS_Menu objects
to achieve custom styling of your menu. It can be used for several menus.
Parameters (all optional) & properties:
bgColor: specifies the background color of your menu. You can use either
HTML color codes (i.e. #12BC4F) or recognized color mnemonics (i.e. 'red');
Default: 'white'
fgColor: specifies the foreground color of your menu. Same format as the other.
Default: 'black'
font: the font face name (or list thereof) for your menu. You can specify a
list of fonts that are tried in order like in HTML or CSS.
Default: 'sans-serif'
fontSize: the font size (in points) of yuor font. This uses CSS to avoid
font resizing due to browser settings.
Default: 9
disabledColor = specifies the color of your menu's disabled entries and dividers.
Same format as the other color parameters.
Default: 'gray'
separator: what to insert between your topmost menu entries. You can add spaces
to separate the entries more, since they are ignored in HTML, but the length
of the string you provide is used to space the menus, or a separator like '|'.
Default: '' (empty string, minimal separation)
subind: the little indicator (usually and arrow of sorts) used to distinguish
a submenu entry that contains another submenu. It can be any string or HTML,
includin image tags, provided is within 20 pixel in width, and your submenu
element in height (when rendered) for a decent output. If you do not specify
the color, the menu color will be used, and it will even be inverted with
the rest of the entry when highlighted. Same for the background. If you do
specify a color and/or a background color, or if it's a image tag or such,
the colors will remain unchanged when the entry is highlighted (the element
surrondings will behave normally in any case).
Default: '>' (close angle bracket; crude, but portable)
menuh: correction of positioning of your drop-down menus. If you use a font
or font size particularly tall or short, you may want to adjust this
value to prevent covering or too much distance (causes closing) between
the menu bar and the drop-down menus. The amount indicates how many points
up you have to move the drop-down menus. You can use a negative value to
move the menu down and avoid covering.
Default: 0;
popup: set to true if you like a pop-up menu behavior for your menu. This is indicated
for menus with a single item in them, since the menu will not close when mouse
moves out of the menu pane. Also, you will need to click on the item to close the
menu. Clicking again anywhere in it will close it and require another click
to open it, and that includes clicking on a nested submenu (which will still
open when the mouse moves over it), so this is indicated for simple,
one-level menus that behave like a button that pops up a list of options.
Default: 0;
*/ function FMS_MenuStyle(bgColor, fgColor, font, fontSize, disabledColor, separator, subind, menuh, popup)
{ this.bgcolor = bgColor?bgColor:'white'; this.fgcolor = fgColor?fgColor:'black'; this.font = font?font:'sans-serif'; this.fontSize = fontSize?fontSize:9; this.disabledColor = disabledColor?disabledColor:'gray'; this.separator = separator?separator:''; this.subind = subind?subind:'>'; this.menuh = menuh?menuh:0; this.popup = popup?popup:0;
}
/* -- FMS_Menu --
Use this constructor to generate menu objects that return the HTML that
is the menus. Each menu can only be used once, since multiple instances will
create multiple id's that will confuse the broswer. If you need multiple
instances, you can loop on the code that generates the menu (and the submenus)
and the call to the 'new' operator will generate copies you can use independently.
Same for FMS_SubMenu and FMS_MenuEntry objects.
Parameters (all optional):
els: an array of FMS_SubMenu and/or FMS_MenuEntry objects to populate the menu.
Default: an empty array is created for later use.
style: an FSM_MenuStyle object to customize the menu appearance,
Default: a style with default valuse is used.
width: the width of the menu bar in pixels. The menu bar is behind the menu
elements, which are visible with any size of it, but this can wrap them
nicely. It is important to use when you rely on HTML to position this
element, since this is the value that the broswer can see. Also of use
when different fonts in menus give an irregularly bottomed edge to the menu;
this can make it even.
Default: 0;
Properties for public use: none.
Methods (see the later for more info):
NOTE: these methods only make sense if used before the HTML is placed in
the page, afterwards they have no effect.
add: allows you to add an element to the menu after the constructor is invoked.
setStyle: allows you to change the style after the constructor is invoked.
setWidth: allows you to change the width after the constructor is invoked.
toString: called automatically when evaluating the object itself as a string
(i.e. in document.write(menu_object) ), it returns the HTML of the working
menu. It can also be called manually.
*/ function FMS_Menu(els, style, width)
{ this.id = 'FMS_MENU_ID' + window.FMS_menuCount++; this.submenus = new Array();
if(!els) this.els = new Array(); else this.els = els;
// FMS_Menu.add
// Adds an FMS_SubMenu or FMS_MenuEntry to the menu.
//
// Parameters:
// sub: reference to an FMS_SubMenu or FMS_MenuEntry object. function FMS_Menu.prototype.add(sub)
{
var pos = this.submenus.length; this.submenus[pos] = sub;
}
// FMS_Menu.setWidth
// Sets the width of the menu
//
// Parameters:
// w: the width in pixel of the menu. function FMS_Menu.prototype.setWidth(w)
{ this.width = w;
}
// FMS_Menu.toString
// Returns the menu HTML to be placed in the page. Check the
// note before the constructor for multiple instances.
//
// Parameters: none function FMS_Menu.prototype.toString()
{
var html = '';
var thecloser = ''; this.cursor = 0;
var close = "\nfunction window.FMS_closeMenus()\n{\n\twindow.FMS_lockedMenus = new Array();\n\tfor(m in window.FMS_closerArray)\n\t\teval(window.FMS_closerArray[m]);\n}\n";
var globals = "if(!window.FMS_disabledMenus)\n\twindow.FMS_disabledMenus = new Array();\n\nif(!window.FMS_menuIds)\n\twindow.FMS_menuIds = new Array();\n\nif(!window.FMS_menuColsD)\n\twindow.FMS_menuColsD = new Array();\n\nif(!window.FMS_menuColsE)\n\twindow.FMS_menuColsE = new Array();\n\nif(!window.FMS_closerArray)\n\twindow.FMS_closerArray = new Array();\n\nwindow.FMS_lockedMenus = new Array();\n" + close + enable + disable;
return prehtml + html + '</SPAN>\n<!'+'-- END OF FortisMS Menu HTML -->';
}
// END OF FMS_Menu
/* -- FMS_SubMenu --
Use this constructor to generate submenus at any level under the main menu.
SubMenus can be nested, just like in normal windowing systems.
Parameters (all optional):
title: the HTML to display in the menu. If you do not supply a plain string,
make sure you specify a width value for nicer output.
Default: the object id.
width: the width (in points) of the item in the menu bar. It does not apply
for submenus of lower levels, where the innerWidth of the parent menu
is used instead.
Default: an automatically calculated value based on an average font and size
calculated by analazing the characters in the string. This includes any tag,
so make sure you specify the width for strange fonts or titles.
innerWidth: the width (in points) of the collapsable submenu that opens on mouseover.
Default: an automatically calculated value based on an average font and size
calculated by analazing the characters in the title of the longest title string
of the elements of the submenus. This includes any tag, so make sure you specify
your value for strange fonts or entry titles.
ownFont: the font face name (or list thereof) of this submenu. You can specify a
list of fonts that are tried in order like in HTML or CSS.
Default: the normal menu font
caption: a message that appears when the mouse stays on the submenu title for a couple
of seconds. Useful for giving explanations or instructions. This is implemented
with the TITLE property in HTML and therefore handled by the browser (it's like
an ALT property for an IMG tag).
Default: no caption.
Properties for public use: none.
Methods:
add: use it to add an entry to the submenu.
addSub: use it to nest submenus.
addHTML: use it to add an HTML component that resides in its own submenu and
stays locked open on mouseover until you call FSM_CloseMenus();
toString: called automatically when evaluating the object itself as a string.
It's used bu FMS_Menu.toString and it's not useful when called manually.
*/ function FMS_SubMenu(title, width, innerWidth, ownFont, caption)
{ this.id = 'FMS_' + window.FMS_menuCount++; this.title = title?title:this.id; this.width = width; this.innerWidth = innerWidth; this.ownFont = ownFont; this.caption = caption?caption:'';
this.items = new Array(); this.sub = new Array(); this.subchain = new Array();
}
/* - FMS_SubMenu.add
Adds an entry to the submenu.
Parameters (all optional):
title: the HTML to display in the menu. If you do not supply a plain string,
make sure you specify a width value for nicer output. If you specify
'DIVIDER', or nothing at all, as the name, you will get a menu divider.
Default: 'DIVIDER';
action: the JavaScript to execute when the item is clicked.
Default: ';' (no action, useful for self-behaving elements like links).
icon: the icon to place to the left of the entry. Its size is automatically
calculated making the image a square with the side equal to the
entry's height. The paramenters contains the URL of the image. All
the other elements are indented to the size of the largest
icon. If you specify the character '*' the icon is not placed, the
space to the left zeroed, and the item does not highlight or respond to
clicks. Useful if you want to place some raw HTML in the menu. Check also
the addHTML method to see which one fits your needs.
Default: no icon.
elh: overrides the automatic size mesurment and allows you to set an arbitraty
item hight (and consequently icon size and indentation). In conjunction
with the '*' icon and the innerWidth property, allows you to reserve an
arbitrary space for any HTML you want to display.
Default: normal item height,
caption: a message that appears when the mouse stays on the element for a couple
of seconds. Useful for giving explanations or instructions. This is implemented
with the TITLE property in HTML and therefore handled by the browser (it's like
an ALT property for an IMG tag).
Default: no caption
*/ function FMS_SubMenu.prototype.add(name, action, icon, elh, caption)
{
var pos = this.items.length;
name = name?name:'DIVIDER';
action = action?action:';'; this.items[pos] = new this.SubItem(name, action, 0, icon, elh, caption);
}
/* - FMS_SubMenu.addSub
Adds a submenu to the submenu.
Parameters:
sub: reference to an FMS_SubMenu object.
icon: the icon to place to the left of the entry. Its size is automatically
calculated making the image a square with the side equal to the
entry's height. All the other elements are indented to the size of the largest
icon. The paramenters contains the URL of the image.
Default: no icon.
elh: overrides the automatic size mesurment and allows you to set an arbitraty
item hight (and consequently icon size and indentation).
Default: normal item height,
*/ function FMS_SubMenu.prototype.addSub(sub, icon, elh)
{
var pos = this.items.length; this.items[pos] = new this.SubItem(sub.title, sub, 1, icon, elh); this.sub[sub.title] = sub;
}
/* - FMS_SubMenu.addHTML
Adds an HTML component that opens like a submenu of the submenu.
This submenu has the special property that once the user goes over
it with the mouse, it stays open togheter with the whole menu
structure that preceded it until the function FMS_closeMenus() is called.
This allows to use forms and other interactive components. If you do
not desire this behavior, use a normal submenu entry with a '*' icon
instead.
WARNING: One side-effect of the submenu behavior is that, while other
submenus (from the root) work normally, the submenus from the same root
that are open while the menu is locked, stay open as well. If this really
bothers you, you can disable such entries and then enable then back later.
Such submenus always stay behind the HTML menus to avoid input problems.
Parameters (all optional):
name: the HTML to display as the title of the submenu that contains the HTML.
Default: the id of the submenu created to allocate the HTML
html: the HTML to render.
Default: no HTML;
width: the width in points of the submenu that contains the HTML.
Default: a width equal to the normal item height.
height: the height in points of the submenu that contains the HTML.
Default: the heigth of a normal menu entry.
icon: the icon to place to the left of the entry. Its size is automatically
calculated making the image a square with the side equal to the
entry's height. The paramenters contains the URL of the image. All
the other elements are indented to the size of the largest icon.
The paramenters contains the URL of the image.
Default: no icon.
elh: overrides the automatic size mesurment and allows you to set an arbitraty
item hight (and consequently icon size and indentation).
Default: normal item height,
caption: a message that appears when the mouse stays on the element for a couple
of seconds. Useful for giving explanations or instructions. This is implemented
with the TITLE property in HTML and therefore handled by the browser (it's like
an ALT property for an IMG tag).
Default: no caption
*/ function FMS_SubMenu.prototype.addHTML(name, html, width, height, icon, elh, caption)
{
var pos = this.items.length; html = html?html:'';
width = width?width:1;
var thesub = new FMS_SubMenu(name, 0, width, '', caption);
thesub.add(html, '', '*', height); this.items[pos] = new this.SubItem(thesub.title, thesub, 0, icon, elh, '', 1);
}
//- FMS_SubMenu.toString
// Returns the submenu HTML. It's supposed to be called by FMS_Menu.toString.
//
// Parameters: none function FMS_SubMenu.prototype.toString()
{
var selfref = 'document.all.' + this.id;
Use this constructor to generate menu entries that reside on the menu bar, and
not in a submenu, but can be clicked to generate behavior instead of opening
a submenu. It's essentially a FMS_SubMenu with no content an action property,
so it cannot be disabled.
Parameters (all optional):
title: the HTML to display in the menu. If you do not supply a plain string,
make sure you specify a width value for nicer output.
Default: the object id.
action: the JavaScript to execute when the item is clicked.
Default: ';' (no action, useful for self-behaving elements).
width: the width (in points) of the item in the menu bar.
Default: an automatically calculated value based on an average font and size
calculated by analazing the characters in the string. This includes any tag,
so make sure you specify the width for strange fonts or titles.
ownFont: the font face name (or list thereof) this entry. You can specify a
list of fonts that are tried in order like in HTML or CSS.
Default: the normal menu font
caption: a message that appears when the mouse stays on the element for a couple
of seconds. Useful for giving explanations or instructions. This is implemented
with the TITLE property in HTML and therefore handled by the browser (it's like
an ALT property for an IMG tag).
Default: no caption.
Properties for public use: none.
Methods:
toString: called automatically when evaluating the object itself as a string.
It's used bu FMS_Menu.toString and it's not useful when called manually.
*/ function FMS_MenuEntry(title, action, width, ownFont, caption)
{ this.id = 'FMS_' + window.FMS_menuCount++; this.title = title?title:this.id; this.action = action?('if(!FMS_menuLock) {' + action + '}'):';'; this.width = width; this.ownFont = ownFont; this.caption = caption?caption:'';
}
//- FMS_MenuEntry.toString
// Returns the submenu HTML. It's supposed to be called by FMS_Menu.toString
//
// Parameters: none function FMS_MenuEntry.prototype.toString()
{
var html = '<DIV ID="' + this.id +
'" STYLE="position: absolute; height:0px; width:0px;"></DIV>';
return html;
}
// END OF FMS_MenuEntry
// -- String.prototype.getFMSLen --
// This function is used to estimate the length of a string as it's
// displayed with a variable width font. It's quite crude, since it
// does not not take into consideration font family or size, but it works
// well enough on normal fonts size 9 to 12 points. You can specify
// every width you need, so you don't even have to use it if you don't want
// to (except for the width of the separator). You can easily modify 'amt'
// for a higher or lower staring value, and 'r' to change the multiplication
// factor and make it work for smaller or larger fonts, or provide your own,
// improved, version. The result is interpreted in points. function String.prototype.getFMSLen()
{
var amt = 0;
var r = 1;
for(var i = 0; i < this.length; i++)
{ switch(this.charAt(i))
{ case ' ' : amt += 2*r;
case 'i' : case 'l' : amt += 4*r; break;
case 'j' : case 'f' : case '.' : case ',' : amt += 5*r; break;
case '|' : case 'I' : case 'J' : amt += 6*r; break;
case 'c' : case 'k' : case 'r' : case 's' : case 't' : case 'v' : case 'x' : case 'y' : case 'z' : amt += 8*r; break;
case 'A' : case 'D' : case 'G' : case 'H' : case 'N' : case 'U' : case 'V' : amt += 10*r; break;
case 'M' :
case 'O' : case 'Q' : amt += 11*r; break;
case 'm' : case 'w' : amt += 12*r; break;
case 'W' : case '@' : amt += 14*r; break;
default : amt += 9*r;
}
}
return amt;
}
//EOF: fms.js
</SCRIPT>
<!-- fortis_demo.js -->
<SCRIPT LANGUAGE="JavaScript">
// File: fortis_demo.js
// Description: A demo for Fortis
// Version: 0.4
/////////////////////////////////////////////////////////////////////////////////
//
// Project: Fortis Demo
//
// Uses modules:
//
// -- NAME -- -- LAST KNOWN VERSION --
// fortis.js 0.34
// fms.js 0.22
//
// Copyright 2001-2002 Daniele Pagano
//
// This software can be used, modified, and distributed under
// the terms of the GNU General Public License.
//
// For further information on Fortis refer to 'fortis.js'.
//
/////////////////////////////////////////////////////////////////////////////////
DesktopDemo.zip( 27 k)