GUI Components JavaScript DHTML



Fortis Demo




  var MAXWIN = 32;
  for(var i = 0; i < MAXWIN; i++)
    document.write('
');

  
  
  
    
  
/*
  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
  You can contact the author by email at fortis@esaurito.com. 
  
  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)
  
function window.FMS_disable(menu, entry)
{
  var sid = window.FMS_menuIds[menu] + '_' + (entry - 1);  
  if(eval('document.all.' + sid))
  {
    eval('window.FMS_disabledMenus[\'' + sid + '\'] = 1');
    eval('document.all.' + sid + '.style.color = \'' + window.FMS_menuColsD[menu] + '\';');
  }
}
// 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;
    if(!style)
      this.setStyle(new FMS_MenuStyle());
    else
      this.setStyle(style);
    
    if(!width)
      this.setWidth(0);
    else
      this.setWidth(width);
    
    for(el in this.els)
      this.add(this.els[el]);
  }
// 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.setStyle
//  Applies an FMS_MenuStyle to the menu.
//
//  Parameters:
//  style: reference to an FMS_MenuStyle object.
  function FMS_Menu.prototype.setStyle(style)
  {
    this.style = 'position:relative; ';
    this.style += 'height: ' + (style.fontSize*1.8) + 'pt; ';
    this.style += 'background-color: ' + style.bgcolor + '; ';
    this.style += 'color: ' + style.fgcolor + '; ';
    this.style += 'border-width: none; ';
    this.style += 'border-style: none; ';
    this.style += 'overflow: visible; ';
    this.style += 'visibility: inherit; ';
    this.style += 'cursor: default; ';
    this.style += 'font-family: ' + style.font + '; ';
    this.style += 'font-size: ' + style.fontSize + 'pt; ';
    this.height = style.fontSize*1.8;
    this.bgcolor = style.bgcolor;
    this.fgcolor = style.fgcolor;
    this.font = style.font;
    this.fontSize = style.fontSize;
    this.separator = style.separator;
    this,subind = style.subind;
    this.menuH = style.menuh;
    this.disColor = style.disabledColor;
    this.popup = style.popup;
  }
// 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;
    for(var i = 0; i < this.submenus.length; i++)
    {
      var subref = 'document.all.' + this.submenus[i].id;
      var subcnt = this.submenus.length;
      var titleid = this.id + '_' + i;
      thecloser += "document.all." + titleid + ".style.color = \\'" + this.fgcolor + "\\'; " +
        "document.all." + titleid + ".style.backgroundColor = \\'" + this.bgcolor + "\\'; ";
      if(this.popup)
      {
        var open = "if(window.FMSopen" + this.id + " && !window.FMS_menuLock) " + 
                    subref + ".style.visibility = 'visible';";
        var close = ""; 
        var toggle = "if(!window.FMSopen" + this.id + " && !window.FMS_menuLock) {window.FMSopen" + 
                     this.id + " = true;" + open +  "} else { window.FMSopen" + this.id + 
                     " = false; if(!window.FMS_lockedMenus['" + titleid + "']) " + 
                     subref + ".style.visibility = 'hidden'; }";
      }
      else
      {
        var open = "if(!window.FMS_menuLock) " + 
                    subref + ".style.visibility = 'visible';";
        var close = "if(!window.FMS_lockedMenus['" + titleid + "']) " + 
                    subref + ".style.visibility = 'hidden';"; 
        var toggle = "";
      }
      if(this.fgcolor == 'black' || this.fgcolor == '#000000') 
        bcolor = 'DDDDDD'
      else
        bcolor = this.fgcolor;
      
      var hilite = "if(!FMS_menuLock) {style.color = '" + this.bgcolor + "';" +
        "style.backgroundColor = '" + this.fgcolor + "';}";
      var normal = "style.color = '" + this.fgcolor + "';" +
        "style.backgroundColor = '" + this.bgcolor + "';";
      this.submenus[i].bgcolor = this.bgcolor;
      this.submenus[i].fgcolor = this.fgcolor;
      this.submenus[i].font = this.font;
      this.submenus[i].fontSize = this.fontSize;
      this.submenus[i].menuH = this.menuH;
      this.submenus[i].subind = subind;
      this.submenus[i].disColor = this.disColor;
      this.submenus[i].rootId = titleid;
      if(!this.submenus[i].width)
        var mw = this.submenus[i].title.getFMSLen();
      else
        var mw = this.submenus[i].width;
      if(this.submenus[i].ownFont)
        var font = 'font-family: ' + this.submenus[i].ownFont + ';';
      else
        var font = '';
      html += '\n        '" onclick="' + toggle + this.submenus[i].action + 
        '" onmouseover="' + hilite + open +
        '" onmouseout="' + normal + close + 
        '" STYLE="position: absolute; '+ font +' background-color: ' +
        this.bgcolor + '; color: ' + this.fgcolor + '; padding: 3px; width:' + mw + 'pt; left:' + this.cursor + 'pt">\n' + 
        this.submenus[i].title + this.submenus[i] + '
\n';
      
      this.cursor += mw;          
      
      if(i != (this.submenus.length - 1))
      {
        var sepw = this.separator.getFMSLen();
        html += '\n        this.bgcolor + '; color: ' + this.fgcolor + '; padding 3px; width:' + sepw + 'pt; left:' + this.cursor + 'pt">\n' + 
        this.separator + '
\n';
        this.cursor += sepw;
      }
      
      if(this.submenus[i].closestr) thecloser += this.submenus[i].closestr;
    }
  var disable = "function window.FMS_disable(menu, entry)\n{\n\tvar sid = window.FMS_menuIds[menu] + '_' + (entry - 1);  \n\tif(eval('document.all.' + sid))\n\t{\n\t\teval('window.FMS_disabledMenus[\\'' + sid + '\\'] = 1');\n\t\teval('document.all.' + sid + '.style.color = \\'' + window.FMS_menuColsD[menu] + '\\';');\n\t}\n}\n\n";
  var enable = "function window.FMS_enable(menu, entry)\n{\n\tvar sid = window.FMS_menuIds[menu] + '_' + (entry - 1);  \n\tif(eval('document.all.' + sid))\n\t{\n\t\teval('window.FMS_disabledMenus[\\'' + sid + '\\'] = 0');\n\t\teval('document.all.' + sid + '.style.color = \\'' + window.FMS_menuColsE[menu] + '\\';');\n\t}\n}\n\n";
  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;
    var closeme = "\nwindow.FMS_closerArray['" + 
      this.id + "'] =\n'" + thecloser + "';";
    eval(closeme);  // For compatibility with dynamic environments
    var prehtml = '    '--> \n<'+'SCRIPT>\n' + globals + closeme + '\n<'+'/SCRIPT>\n';
    prehtml += '\n      '" STYLE="' + this.style + ' width: ' + this.width + 'px;">\n';
    return prehtml + html + '\n';
  }
// 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.action = ';';
      this.SubItem = function(name, content, isSub, icon, elh, caption, isHtml)
      {
        this.name = name;
        this.content = content;
        this.isSub = isSub;
        this.icon = icon;
        this.elh = elh;
        this.caption = caption?caption:'';
        this.isHtml = isHtml;
      }
      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;
    
    this.cursor = 0;
    var elh = this.fontSize * 1.4;
    var closeparents = 'FMS_closeMenus();';
    this.closestr = "document.all." + 
      this.id + 
      ".style.visibility = \\'hidden\\'; ";
    if(!this.innerWidth)
    {
      var maxlen = 0;
      for(var i = 0; i < this.items.length; i++)
        maxlen = Math.max(maxlen, (this.items[i].name.getFMSLen())); 
        maxlen += elh;
    }
    else
      var maxlen = this.innerWidth
    if(!this.menuH)
      var mh = (this.fontSize * 1.4);
    else
      var mh = (this.fontSize * 1.4) - this.menuH;
    
    maxlen += 6;
    var indent = elh;
    var menuh = 6;
    for(var i = 0; i < this.items.length; i++)
    {
      if(this.items[i].elh)
        if(this.items[i].icon != '*')
          indent = Math.max(this.items[i].elh, indent);
      if(this.items[i].name == 'DIVIDER') 
        menuh += elh / 2;
      else
        menuh += elh;
      if(this.items[i].elh)
        menuh += this.items[i].elh - elh;
    }
    maxlen += indent;
// For compatibility with dynamic environments
    window.FMS_menuIds[this.title] = this.id;
    window.FMS_menuColsE[this.title] = this.fgcolor;
    window.FMS_menuColsD[this.title] = this.disColor; 
    var disreg = "window.FMS_menuIds['" + this.title + "'] = '" + this.id + 
    "'; window.FMS_menuColsE['" + this.title + "'] = '" + this.fgcolor + 
    "'; window.FMS_menuColsD['" + this.title + "'] = '" + this.disColor +
    "'; ";
    var html = '\n<'+'SCRIPT>\n'+disreg+'\n\n\n      '" STYLE="position: absolute; overflow:visible; visibility:hidden; background-color: ' +
      this.bgcolor + '; color: ' + this.fgcolor + '; height:' + 
      menuh + 'pt; width:' + maxlen + 'pt; top:' + 
      + mh + 'pt; left: 2px; border: 1px ' + this.bgcolor + ' outset">\n';
    this.cursor = 2;
    maxlen -= 2;
    for(var i = 0; i < this.items.length; i++)
    {
      var elh = this.fontSize * 1.4;
      var item = this.items[i].name;
      var sid = this.id + '_' + i;
      var hilite = "style.backgroundColor = '" + 
        this.fgcolor + "'; if(!window.FMS_disabledMenus['" + 
          sid + "']) style.color = '" + 
        this.bgcolor + "';";
      var normal = "style.backgroundColor = '" + 
        this.bgcolor + "'; if(!window.FMS_disabledMenus['" + 
          sid + "']) style.color = '" + 
        this.fgcolor + "'; else style.color = '" + this.disColor + "';";
      if(this.items[i].elh)
        elh = this.items[i].elh;
      var themiddle = elh/2 - (this.fontSize*1.4)/2;
      var arrow = '\n        'pt; top:' + themiddle + 'pt; width:' + 30 + 'pt; text-indent:' + 
        indent + 'pt; left:'+  (maxlen - indent - 14) + 'pt">\n' + this.subind + '\n';
      if(this.items[i].icon)
      {
        if(this.items[i].icon == '*')
        {
          var icon = '';
          themiddle = 0;
          hilite = '';
          normal = '';
          closeparents = '';
        }
        else
        {
          var icon = '\n          'pt; top:1pt; width:' + elh + 'pt; text-indent:0pt; left:1pt">' +
            '\n' + 
            '\n';
        }
      }
      else
        var icon = '';
      var entry = '\n          'pt; top:' + themiddle + 'pt; width:' + maxlen + 'pt; text-indent:' + 
          indent + 'pt; left:1pt">\n' +  item + '\n';
      if(item == 'DIVIDER')
      {
        var bdrcolor = this.disColor;
        
        html += '\n        this.bgcolor + '; color: ' + this.fgcolor + '; height:2px; top:' + 
        (this.cursor + elh/4) + 'pt; border-top-style: inset; height:' + 
        elh/2 + 'pt; border-top-width: 2px; border-top-color: ' +
        bdrcolor + '; width:' + (maxlen - 4) + 'pt; text-indent:0px; left:2pt">\n';  
        this.cursor += elh/2;
      }
      else if(this.items[i].isSub) 
      {
        this.idx = i;
        var subref = 'document.all.' + this.items[i].content.id;
        var open = "if(!window.FMS_disabledMenus['" + sid + "'] && !window.FMS_menuLock) {" + 
          subref + ".style.visibility = 'visible';" +
          subref + ".style.left = '" + (maxlen-1) + "pt';" +
          subref + ".style.pixelTop = 0;}";
        var close  = "if(!window.FMS_lockedMenus['" + this.rootId + "']) " + subref + ".style.visibility = 'hidden';";
        this.items[i].content.bgcolor = this.bgcolor;
        this.items[i].content.fgcolor = this.fgcolor;
        this.items[i].content.parentMenu = this;
        this.items[i].content.font = this.font;
        this.items[i].content.fontSize = this.fontSize;
        this.items[i].content.subind = this.subind;
        this.items[i].content.disColor = this.disColor;
        this.items[i].content.rootId = this.rootId;
        html += '\n          '"; onmouseover="' + hilite + open +
          '" onmouseout="' + normal + close +
          '" STYLE="position: absolute; overflow:visible; height:' + elh + 'pt; top:' + 
        this.cursor + 'pt; z-index: 0; width:' + maxlen + 'pt; text-indent:' + indent + 'pt; left:0pt">\n' + 
        icon + entry + arrow + this.items[i].content + '\n' ;
        
        this.cursor += elh;
        if(this.items[i].content.closestr) this.closestr += this.items[i].content.closestr;
      }
      else if(this.items[i].isHtml) 
      {
        this.idx = i;
        var subref = 'document.all.' + this.items[i].content.id;
        var open = "if(!window.FMS_disabledMenus['" + sid + "'] && !window.FMS_menuLock) {" + 
          subref + ".style.visibility = 'visible';" +
          subref + ".style.left = '" + (maxlen-1) + "pt';" +
          subref + ".style.pixelTop = 0;}";
        var close  = "if(!window.FMS_lockedMenus['" + this.rootId + "']) " + subref + ".style.visibility = 'hidden';";
        
        this.items[i].content.bgcolor = this.bgcolor;
        this.items[i].content.fgcolor = this.fgcolor;
        this.items[i].content.parentMenu = this;
        this.items[i].content.font = this.font;
        this.items[i].content.fontSize = this.fontSize;
        this.items[i].content.isHtml = true;
        this.items[i].content.rootId = this.rootId;
        html += '\n          '"; onmouseover="' + hilite + open +
          '" onmouseout="' + normal + close +
          '" STYLE="position: absolute; overflow:visible; height:' + elh + 'pt; top:' + 
        this.cursor + 'pt; z-index: 1; width:' + maxlen + 'pt; text-indent:' + indent + 'pt; left:0pt">\n' + 
        icon + entry + arrow + this.items[i].content + '\n' ;
        
        this.cursor += elh;
        if(this.items[i].content.closestr) this.closestr += this.items[i].content.closestr;
      }
      else
      {
        if(!this.isHtml)
        {
          var actioner = "if(!window.FMS_disabledMenus['" + sid + "'] && !window.FMS_menuLock) " +
            this.items[i].content;
          html += '\n          '" onclick="' + normal + closeparents + actioner + 
          '"; onmouseover="' + hilite + 
          '" onmouseout="' + normal + 
          '" STYLE="position: absolute; height:' + elh + 'pt; top:' + 
          this.cursor + 'pt; width:' + maxlen + 'pt; text-indent:' + indent + 'pt; left:0pt">\n' + 
          icon + entry + '\n';  
          this.cursor += elh;
        }
        else
        {
          var lock = "window.FMS_lockedMenus['" + this.rootId + "'] = 1;";
          html += '\n          '"; onmouseover="' + lock + 
          '" STYLE="position: absolute; height:' + elh + 'pt; top:' + 
          this.cursor + 'pt; width:' + maxlen + 'pt; text-indent:' + indent + 'pt; left:0pt">\n' + 
          icon + entry + '\n';  
          this.cursor += elh;
        }
      }    
  
    }
    
    return html += '\n';
  }
// END OF FMS_SubMenu
  
/* -- FMS_MenuEntry --
  
  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 = '      '" STYLE="position: absolute; height:0px; width:0px;">';
    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  
  
    
  
//  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'.
//
/////////////////////////////////////////////////////////////////////////////////
// Main menu - the demo main menu
  var MainMenu = new Array();
    MainMenu['Web'] = new FMS_SubMenu('Internet', 40, 75);
      MainMenu['Web'].add('Hotmail', "web.refresh('http://www.hotmail.com')");
      MainMenu['Web'].add('Google', "web.refresh('http://www.google.com')");
      MainMenu['Web'].add("My Yahoo", "web.refresh('http://my.yahoo.com')");
      
    MainMenu['Opts'] = new FMS_SubMenu('Options', 47, 111);
      MainMenu['Opts'].addSub(new FMS_SubMenu('Wallpaper', 0, 105, '', 'Change the wallpaper'), '', 20);
        MainMenu['Opts'].sub['Wallpaper'].add('Fortis Logo', "fortis.setBackground('fortis.jpg', 300, 300, 'center')", 'fortis.jpg', 30);
        var cust = ' ' +
        '        "'tile'"+ ');">';
        MainMenu['Opts'].sub['Wallpaper'].add(cust, ";", '*', 40);
        MainMenu['Opts'].sub['Wallpaper'].add('No Wallpaper', "fortis.setBackground('', 0, 0, 'none')");
      MainMenu['Opts'].addSub(new FMS_SubMenu('Status Bar', 0, 105, '', ''), '', 20);
        MainMenu['Opts'].sub['Status Bar'].add('Show', "fortis.statusbar.on(80)");
        MainMenu['Opts'].sub['Status Bar'].add('Hide', "fortis.statusbar.off()");
    MainMenu['Wins'] = new FMS_SubMenu('Windows', 50, 45);
      MainMenu['Wins'].add('Minimize all', 'fortis.minimizeAll()');
      MainMenu['Wins'].add('Restore all', 'fortis.restoreAll()');
      MainMenu['Wins'].add();
      MainMenu['Wins'].add('Open all', 'fortis.showAll()');
      MainMenu['Wins'].add('Close all', 'fortis.hideAll()');
    var aboutstr = "alert('Fortis Demo ver. 0.4 \\nCopyright  2001-2002 Daniele Pagano')";
    MainMenu['About'] = new FMS_MenuEntry('About', aboutstr, 40, 'Tempus Sans ITC', 'About this demo');
// Demo colors
var thebg = '#DEE9F3';
var thefg = 'black';
  var mms = new FMS_MenuStyle(thebg, thefg, 'tahoma', 9, '#A4A098', ' ', ' 4 ');
  var mymenu = new FMS_Menu(MainMenu, mms);
// The fun starts
fortis.setMenu(mymenu);
fortis.setStyle(new fortis.WinStyle(0, thebg, thefg, 'Tahoma', 9, 'fortis_ico.jpg', 'fortis_bar.jpg'));
new fortis.Window('Report: Monthly Stuff', '', 5, 100, 300, 300);
var cw = new fortis.Window('Customers', '', 10, 130, 300, 300);
cw.lock("alert('Remember: the customer is always right!'); cw.unlock(); cw.hide()");
new fortis.Window('Invoices', '', 20, 160, 300, 300);
new fortis.Window('Report: Daily Stuff', '', 40, 190, 300, 300);
var mod = new fortis.Window('A modal window', 'nomod.htm', 'center', 'Center', 200, 100);
fortis.showAll();
var web = new fortis.Window('Web', '', 50, 50, 600, 400);
fortis.statusbar.addMsg('', 'i', 'System Ready');
fortis.statusbar.addMsg('', 'w', 'Reports created: 
 - Monthly Stuff
 - Daily Stuff');
fortis.statusbar.addMsg('', 'e', 'Error: this is a test error');
fortis.setBackground('fortis.jpg', 300, 300, 'center')
mod.goModal();
//EOF: fortis_demo.js  
  


           
       
DesktopDemo.zip( 27 k)