-*
-* If you want to create an object of this class manually, remember to name it "DHTMLSuite.configObj"
-* This object should then be created before any other objects. This is nescessary if you want
-* the other objects to use the values you have put into the object.
-* @version 1.0
-* @version 1.0
-* @author Alf Magne Kalleland(www.dhtmlgoodies.com)
-**/
-DHTMLSuite.config = function()
-{
- var imagePath; // Path to images used by the classes.
- var cssPath; // Path to CSS files used by the DHTML suite.
-}
-
-
-DHTMLSuite.config.prototype = {
- // {{{ init()
- /**
- *
- * @public
- */
- init : function()
- {
- this.imagePath = '../images_dhtmlsuite/'; // Path to images
- this.cssPath = '../css_dhtmlsuite/'; // Path to images
- }
- // }}}
- ,
- // {{{ setCssPath()
- /**
- * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.
- *
- * @param string newCssPath = New path to css files
- * @public
- */
-
- setCssPath : function(newCssPath)
- {
- this.cssPath = newCssPath;
- }
- // }}}
- ,
- // {{{ setImagePath()
- /**
- * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
- *
- * @param string newImagePath = New path to image files
- * @public
- */
- setImagePath : function(newImagePath)
- {
- this.imagePath = newImagePath;
- }
- // }}}
-}
-
-
-
-DHTMLSuite.globalVariableStorage = function()
-{
- var menuBar_highlightedItems; // Array of highlighted menu bar items
- this.menuBar_highlightedItems = new Array();
-
- var arrayOfDhtmlSuiteObjects; // Array of objects of class menuItem.
- this.arrayOfDhtmlSuiteObjects = new Array();
-}
-
-DHTMLSuite.globalVariableStorage.prototype = {
-
-}
-
-
-/************************************************************************************************************
-* A class with general methods used by most of the scripts
-*
-* Created: August, 19th, 2006
-* Purpose of class: A class containing common method used by one or more of the gui classes below,
-* example: loadCSS.
-* An object("DHTMLSuite.commonObj") of this class will always be available to the other classes.
-* Update log:
-*
-************************************************************************************************************/
-
-
-/**
-* @constructor
-* @class A class containing common method used by one or more of the gui classes below, example: loadCSS. An object("DHTMLSuite.commonObj") of this class will always be available to the other classes.
-* @version 1.0
-* @author Alf Magne Kalleland(www.dhtmlgoodies.com)
-**/
-
-DHTMLSuite.common = function()
-{
- var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice.
- var cssCacheStatus; // Css cache status
- var eventElements;
-
- this.cssCacheStatus = true; // Caching of css files = on(Default)
- this.eventElements = new Array();
-}
-
-DHTMLSuite.common.prototype = {
-
- // {{{ init()
- /**
- * This method initializes the DHTMLSuite_common object.
- *
- * @public
- */
-
- init : function()
- {
- this.loadedCSSFiles = new Array();
- }
- // }}}
- ,
- // {{{ loadCSS()
- /**
- * This method loads a CSS file(Cascading Style Sheet) dynamically - i.e. an alternative to tag in the document.
- *
- * @param string cssFileName = New path to image files
- * @public
- */
-
- loadCSS : function(cssFileName)
- {
-
- if(!this.loadedCSSFiles[cssFileName]){
- this.loadedCSSFiles[cssFileName] = true;
- var linkTag = document.createElement('LINK');
- if(!this.cssCacheStatus){
- if(cssFileName.indexOf('?')>=0)cssFileName = cssFileName + '&'; else cssFileName = cssFileName + '?';
- cssFileName = cssFileName + 'rand='+ Math.random(); // To prevent caching
- }
- linkTag.href = DHTMLSuite.configObj.cssPath + cssFileName;
- linkTag.rel = 'stylesheet';
- linkTag.media = 'screen';
- linkTag.type = 'text/css';
- document.getElementsByTagName('HEAD')[0].appendChild(linkTag);
-
- }
- }
- // }}}
- ,
- // {{{ getTopPos()
- /**
- * This method will return the top coordinate(pixel) of an object
- *
- * @param Object inputObj = Reference to HTML element
- * @public
- */
- getTopPos : function(inputObj)
- {
- var returnValue = inputObj.offsetTop;
- while((inputObj = inputObj.offsetParent) != null){
- if(inputObj.tagName!='HTML'){
- returnValue += (inputObj.offsetTop - inputObj.scrollTop);
- if(document.all)returnValue+=inputObj.clientTop;
- }
- }
- return returnValue;
- }
- // }}}
- ,
- // {{{ setCssCacheStatus()
- /**
- * Specify if css files should be cached or not.
- *
- * @param Boolean cssCacheStatus = true = cache on, false = cache off
- *
- * @public
- */
- setCssCacheStatus : function(cssCacheStatus)
- {
- this.cssCacheStatus = cssCacheStatus;
- }
- // }}}
- ,
- // {{{ getLeftPos()
- /**
- * This method will return the left coordinate(pixel) of an object
- *
- * @param Object inputObj = Reference to HTML element
- * @public
- */
- getLeftPos : function(inputObj)
- {
- var returnValue = inputObj.offsetLeft;
- while((inputObj = inputObj.offsetParent) != null){
- if(inputObj.tagName!='HTML'){
- returnValue += inputObj.offsetLeft;
- if(document.all)returnValue+=inputObj.clientLeft;
- }
- }
- return returnValue;
- }
- // }}}
- ,
- // {{{ cancelEvent()
- /**
- *
- * This function only returns false. It is used to cancel selections and drag
- *
- *
- * @public
- */
-
- cancelEvent : function()
- {
- return false;
- }
- // }}}
- ,
- // {{{ addEvent()
- /**
- *
- * This function adds an event listener to an element on the page.
- *
- * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
- * @param String eventType = Which type of event, example "mousemove" or "mouseup"
- * @param functionName = Name of function to execute.
- *
- * @public
- */
- addEvent : function(whichObject,eventType,functionName)
- {
- if(whichObject.attachEvent){
- whichObject['e'+eventType+functionName] = functionName;
- whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
- whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
- } else
- whichObject.addEventListener(eventType,functionName,false);
- this.__addEventElement(whichObject);
- delete(whichObject);
- // whichObject = null;
- }
- // }}}
- ,
- // {{{ removeEvent()
- /**
- *
- * This function removes an event listener from an element on the page.
- *
- * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
- * @param String eventType = Which type of event, example "mousemove" or "mouseup"
- * @param functionName = Name of function to execute.
- *
- * @public
- */
- removeEvent : function(whichObject,eventType,functionName)
- {
- if(whichObject.detachEvent){
- whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]);
- whichObject[eventType+functionName] = null;
- } else
- whichObject.removeEventListener(eventType,functionName,false);
- }
- ,
- // {{{ __clearGarbage()
- /**
- *
- * This function is used for Internet Explorer in order to clear memory when the page unloads.
- *
- *
- * @private
- */
- __clearGarbage : function()
- {
- /* Example of event which causes memory leakage in IE
-
- DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); })
-
- We got a circular reference.
-
- */
-
- if(!DHTMLSuite.clientInfoObj.isMSIE)return;
-
- for(var no in DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects){
- DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[no] = false;
- }
-
- for(var no=0;no=0)?true:false;
- this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
- this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
- this.isSafari = (this.browser.toLowerCase().indexOf('safari')>=0)?true:false;
- this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
- }
- // }}}
-}
-
-/************************************************************************************************************
-* DHTML menu model item class
-*
-* Created: October, 30th, 2006
-* @class Purpose of class: Save data about a menu item.
-*
-*
-*
-* Update log:
-*
-************************************************************************************************************/
-
-DHTMLSuite.menuModelItem = function()
-{
- var id; // id of this menu item.
- var itemText; // Text for this menu item
- var itemIcon; // Icon for this menu item.
- var url; // url when click on this menu item
- var parentId; // id of parent element
- var separator; // is this menu item a separator
- var jsFunction; // Js function to call onclick
- var depth; // Depth of this menu item.
- var hasSubs; // Does this menu item have sub items.
- var type; // Menu item type - possible values: "top" or "sub".
- var helpText; // Help text for this item - appear when you move your mouse over the item.
- var state;
- var submenuWidth; // Width of sub menu items.
- var visible; // Visibility of menu item.
- var frameTarget;
-
- this.state = 'regular';
-}
-
-DHTMLSuite.menuModelItem.prototype = {
-
- setMenuVars : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget)
- {
- this.id = id;
- this.itemText = itemText;
- this.itemIcon = itemIcon;
- this.url = url;
- this.parentId = parentId;
- this.jsFunction = jsFunction;
- this.separator = false;
- this.depth = false;
- this.hasSubs = false;
- this.helpText = helpText;
- this.submenuWidth = submenuWidth;
- this.visible = true;
- this.frameTarget = frameTarget;
- if(!type){
- if(this.parentId)this.type = 'top'; else this.type='sub';
- }else this.type = type;
-
-
- }
- // }}}
- ,
- // {{{ setState()
- /**
- * Update the state attribute of a menu item.
- *
- * @param String newState New state of this item
- * @public
- */
- setAsSeparator : function(id,parentId)
- {
- this.id = id;
- this.parentId = parentId;
- this.separator = true;
- this.visible = true;
- if(this.parentId)this.type = 'top'; else this.type='sub';
- }
- // }}}
- ,
- // {{{ setState()
- /**
- * Update the visible attribute of a menu item.
- *
- * @param Boolean visible true = visible, false = hidden.
- * @public
- */
- setVisibility : function(visible)
- {
- this.visible = visible;
- }
- // }}}
- ,
- // {{{ getState()
- /**
- * Return the state attribute of a menu item.
- *
- * @public
- */
- getState : function()
- {
- return this.state;
- }
- // }}}
- ,
- // {{{ setState()
- /**
- * Update the state attribute of a menu item.
- *
- * @param String newState New state of this item
- * @public
- */
- setState : function(newState)
- {
- this.state = newState;
- }
- // }}}
- ,
- // {{{ setSubMenuWidth()
- /**
- * Specify width of direct subs of this item.
- *
- * @param int newWidth Width of sub menu group(direct sub of this item)
- * @public
- */
- setSubMenuWidth : function(newWidth)
- {
- this.submenuWidth = newWidth;
- }
- // }}}
- ,
- // {{{ setIcon()
- /**
- * Specify new menu icon
- *
- * @param String iconPath Path to new menu icon
- * @public
- */
- setIcon : function(iconPath)
- {
- this.itemIcon = iconPath;
- }
- // }}}
- ,
- // {{{ setText()
- /**
- * Specify new text for the menu item.
- *
- * @param String newText New text for the menu item.
- * @public
- */
- setText : function(newText)
- {
- this.itemText = newText;
- }
-}
-
-/************************************************************************************************************
-* DHTML menu model class
-*
-* Created: October, 30th, 2006
-* @class Purpose of class: Saves menu item data
-*
-*
-* Demos of this class: demo-menu-strip.html
-*
-* Update log:
-*
-************************************************************************************************************/
-
-
-/**
-* @constructor
-* @class Purpose of class: Organize menu items for different menu widgets. demos of menus: (Demo)
-* @version 1.0
-* @author Alf Magne Kalleland(www.dhtmlgoodies.com)
-*/
-
-
-DHTMLSuite.menuModel = function()
-{
- var menuItems; // Array of menuModelItem objects
- var menuItemsOrder; // This array is needed in order to preserve the correct order of the array above. the array above is associative
- // And some browsers will loop through that array in different orders than Firefox and IE.
- var submenuType; // Direction of menu items(one item for each depth)
- var mainMenuGroupWidth; // Width of menu group - useful if the first group of items are listed below each other
- this.menuItems = new Array();
- this.menuItemsOrder = new Array();
- this.submenuType = new Array();
- this.submenuType[1] = 'top';
- for(var no=2;no<20;no++){
- this.submenuType[no] = 'sub';
- }
- if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
-}
-
-DHTMLSuite.menuModel.prototype = {
- // {{{ addItem()
- /**
- * Add separator (special type of menu item)
- *
- *
- *
- * @param int id of menu item
- * @param string itemText = text of menu item
- * @param string itemIcon = file name of menu icon(in front of menu text. Path will be imagePath for the DHTMLSuite + file name)
- * @param string url = Url of menu item
- * @param int parent id of menu item
- * @param String jsFunction Name of javascript function to execute. It will replace the url param. The function with this name will be called and the element triggering the action will be
- * sent as argument. Name of the element which triggered the menu action may also be sent as a second argument. That depends on the widget. The context menu is an example where
- * the element triggering the context menu is sent as second argument to this function.
- *
- * @public
- */
- addItem : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth)
- {
- if(!id)id = this.__getUniqueId(); // id not present - create it dynamically.
- this.menuItems[id] = new DHTMLSuite.menuModelItem();
- this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth);
- this.menuItemsOrder[this.menuItemsOrder.length] = id;
- return this.menuItems[id];
- }
- ,
- // {{{ addItemsFromMarkup()
- /**
- * This method creates all the menuModelItem objects by reading it from existing markup on your page.
- * Example of HTML markup:
- *
- <ul id="menuModel">
- <li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
- <ul width="150">
- <li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
- <li id="500002"><a href="#">Save As</a></li>
- <li id="500004" itemType="separator"></li>
- <li id="500003"><a href="#">Open</a></li>
- </ul>
- </li>
- <li id="50001"><a href="#">View</a>
- <ul width="130">
- <li id="500011"><a href="#">Source</a></li>
- <li id="500012"><a href="#">Debug info</a></li>
- <li id="500013"><a href="#">Layout</a>
- <ul width="150">
- <li id="5000131"><a href="#">CSS</a>
- <li id="5000132"><a href="#">HTML</a>
- <li id="5000133"><a href="#">Javascript</a>
- </ul>
- </li>
-
- </ul>
- </li>
- <li id="50003" itemType="separator"></li>
- <li id="50002"><a href="#">Tools</a></li>
- </ul>
- *
- * @param String ulId = ID of
tag on your page.
- *
- * @public
- */
- addItemsFromMarkup : function(ulId)
- {
- if(!document.getElementById(ulId)){
- alert('
tag with id ' + ulId + ' does not exist');
- return;
- }
- var ulObj = document.getElementById(ulId);
- var liTags = ulObj.getElementsByTagName('LI');
- for(var no=0;no tags in the
tree
-
- var id = liTags[no].id.replace(/[^0-9]/gi,''); // Get id of item.
- if(!id)id = this.__getUniqueId();
- this.menuItems[id] = new DHTMLSuite.menuModelItem(); // Creating new menuModelItem object
- this.menuItemsOrder[this.menuItemsOrder.length] = id;
- // Get the attributes for this new menu item.
-
- var parentId = 0; // Default parent id
- if(liTags[no].parentNode!=ulObj)parentId = liTags[no].parentNode.parentNode.id; // parent node exists, set parentId equal to id of parent
-*
-* @version 1.0
-* @author Alf Magne Kalleland(www.dhtmlgoodies.com)
-*/
-
-DHTMLSuite.menuBar = function()
-{
- var menuItemObj;
- var layoutCSS; // Name of css file
- var menuBarBackgroundImage; // Name of background image
- var menuItem_objects; // Array of menu items - html elements.
- var menuBarObj; // Reference to the main dib
- var menuBarHeight;
- var menuItems; // Reference to objects of class menuModelItem
- var highlightedItems; // Array of currently highlighted menu items.
- var menuBarState; // Menu bar state - true or false - 1 = expand items on mouse over
- var activeSubItemsOnMouseOver; // Activate sub items on mouse over (instead of onclick)
-
-
- var submenuGroups; // Array of div elements for the sub menus
- var submenuIframes; // Array of sub menu iframes used to cover select boxes in old IE browsers.
- var createIframesForOldIeBrowsers; // true if we want the script to create iframes in order to cover select boxes in older ie browsers.
- var targetId; // Id of element where the menu will be inserted.
- var menuItemCssPrefix; // Css prefix of menu items.
- var cssPrefix; // Css prefix for the menu bar
- var menuItemLayoutCss; // Css path for the menu items of this menu bar
- var globalObjectIndex; // Global index of this object - used to refer to the object of this class outside
- this.cssPrefix = 'DHTMLSuite_';
- this.menuItemLayoutCss = false; // false = use default for the menuItem class.
- this.layoutCSS = 'menu-bar.css';
- this.menuBarBackgroundImage = 'menu_strip_bg.jpg';
- this.menuItem_objects = new Array();
- DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
-
- this.menuBarState = false;
-
- this.menuBarObj = false;
- this.menuBarHeight = 26;
- this.submenuGroups = new Array();
- this.submenuIframes = new Array();
- this.targetId = false;
- this.activeSubItemsOnMouseOver = false;
- this.menuItemCssPrefix = false;
- this.createIframesForOldIeBrowsers = false;
- if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
-
-
-}
-
-
-
-
-
-DHTMLSuite.menuBar.prototype = {
-
- // {{{ init()
- /**
- * Initilizes the script
- *
- *
- * @public
- */
- init : function()
- {
-
- DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
- this.__createDivs(); // Create general divs
- this.__createMenuItems(); // Create menu items
- this.__setBasicEvents(); // Set basic events.
- window.refToThismenuBar = this;
- }
- // }}}
- ,
- // {{{ setTarget()
- /**
- * Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar.
- *
- * @param String targetId = Id of element where the menu will be inserted.
- *
- * @public
- */
- setTarget : function(targetId)
- {
- this.targetId = targetId;
-
- }
- // }}}
- ,
- // {{{ setLayoutCss()
- /**
- * Specify the css file for this menu bar
- *
- * @param String layoutCSS = Name of new css file.
- *
- * @public
- */
- setLayoutCss : function(layoutCSS)
- {
- this.layoutCSS = layoutCSS;
-
- }
- // }}}
- ,
- // {{{ setMenuItemLayoutCss()
- /**
- * Specify the css file for the menu items
- *
- * @param String layoutCSS = Name of new css file.
- *
- * @public
- */
- setMenuItemLayoutCss : function(layoutCSS)
- {
- this.menuItemLayoutCss = layoutCSS;
-
- }
- // }}}
- ,
- // {{{ setCreateIframesForOldIeBrowsers()
- /**
- * This method specifies if you want to the script to create iframes behind sub menu groups in order to cover eventual select boxes. This
- * can be needed if you have users with older IE browsers(prior to version 7) and when there's a chance that a sub menu could appear on top
- * of a select box.
- *
- * @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers.
- *
- * @public
- */
- setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers)
- {
- this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers;
-
- }
- // }}}
- ,
- // {{{ addMenuItems()
- /**
- * Add menu items
- *
- * @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data
- *
- * @public
- */
- addMenuItems : function(menuItemObj)
- {
- this.menuItemObj = menuItemObj;
- this.menuItems = menuItemObj.getItems();
- }
- // }}}
- ,
- // {{{ setActiveSubItemsOnMouseOver()
- /**
- * Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
- *
- * @param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
- *
- * @public
- */
- setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver)
- {
- this.activeSubItemsOnMouseOver = activateSubOnMouseOver;
- }
- // }}}
- ,
- // {{{ setMenuItemState()
- /**
- * This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items.
- *
- * @param Number menuItemId - ID of the menu item we want to switch state for
- * @param String state - New state(example: "disabled")
- *
- * @public
- */
- setMenuItemState : function(menuItemId,state)
- {
- this.menuItem_objects[menuItemId].setState(state);
- }
- // }}}
- ,
- // {{{ setMenuItemCssPrefix()
- /**
- * Specify prefix of css classes used for the menu items. Default css prefix is "DHTMLSuite_". If you wish have some custom styling for some of your menus,
- * create a separate css file and replace DHTMLSuite_ for the class names with your new prefix. This is useful if you want to have two menus on the same page
- * with different stylings.
- *
- * @param String newCssPrefix - New css prefix for menu items.
- *
- * @public
- */
- setMenuItemCssPrefix : function(newCssPrefix)
- {
- this.menuItemCssPrefix = newCssPrefix;
- }
- // }}}
- ,
- // {{{ setCssPrefix()
- /**
- * Specify prefix of css classes used for the menu bar. Default css prefix is "DHTMLSuite_" and that's the prefix of all css classes inside menu-bar.css(the default css file).
- * If you want some custom menu bars, create and include your own css files, replace DHTMLSuite_ in the class names with your own prefix and set the new prefix by calling
- * this method. This is useful if you want to have two menus on the same page with different stylings.
- *
- * @param String newCssPrefix - New css prefix for the menu bar classes.
- *
- * @public
- */
- setCssPrefix : function(newCssPrefix)
- {
- this.cssPrefix = newCssPrefix;
- }
- // }}}
- ,
- // {{{ replaceSubMenus()
- /**
- * This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as parentId)
- *
- *
- * @param Number parentId - ID of parent element ( 0 if top node) - if set, all sub elements will be deleted and replaced with the new menu model.
- * @param menuModel newMenuModel - Reference to object of class menuModel
- *
- * @private
- */
- replaceMenuItems : function(parentId,newMenuModel)
- {
- this.hideSubMenus(); // Hide all sub menus
- this.__deleteMenuItems(parentId); // Delete old menu items.
- this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
- this.__clearAllMenuItems();
- this.__createMenuItems();
- }
-
- // }}}
- ,
- // {{{ deleteMenuItems()
- /**
- * This method deletes menu items from the menu dynamically
- *
- * @param Number parentId - Parent id - where to append the new items.
- * @param Boolean includeParent - Should parent element also be deleted, or only sub elements?
- *
- * @public
- */
- deleteMenuItems : function(parentId,includeParent)
- {
- this.hideSubMenus(); // Hide all sub menus
- this.__deleteMenuItems(parentId,includeParent);
- this.__clearAllMenuItems();
- this.__createMenuItems();
- }
- // }}}
- ,
- // {{{ appendMenuItems()
- /**
- * This method appends menu items to the menu dynamically
- *
- * @param Number parentId - Parent id - where to append the new items.
- * @param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined parentId
- *
- * @public
- */
- appendMenuItems : function(parentId,newMenuModel)
- {
- this.hideSubMenus(); // Hide all sub menus
- this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
- this.__clearAllMenuItems();
- this.__createMenuItems();
- }
- // }}}
- ,
- // {{{ hideMenuItem()
- /**
- * This method doesn't delete menu items. it hides them only.
- *
- * @param Number id - Id of the item you want to hide.
- *
- * @public
- */
- hideMenuItem : function(id)
- {
- this.menuItem_objects[id].hide();
-
- }
- // }}}
- ,
- // {{{ showMenuItem()
- /**
- * This method shows a menu item. If the item isn't hidden, nothing is done.
- *
- * @param Number id - Id of the item you want to show
- *
- * @public
- */
- showMenuItem : function(id)
- {
- this.menuItem_objects[id].show();
- }
- // }}}
- ,
- // {{{ setText()
- /**
- * Replace the text for a menu item
- *
- * @param Integer id - Id of menu item.
- * @param String newText - New text for the menu item.
- *
- * @public
- */
- setText : function(id,newText)
- {
- this.menuItem_objects[id].setText(newText);
- }
- // }}}
- ,
- // {{{ setIcon()
- /**
- * Replace menu icon for a menu item.
- *
- * @param Integer id - Id of menu item.
- * @param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item.
- *
- * @public
- */
- setIcon : function(id,newPath)
- {
- this.menuItem_objects[id].setIcon(newPath);
- }
- // }}}
- ,
- // {{{ __clearAllMenuItems()
- /**
- * Delete HTML elements for all menu items.
- *
- * @private
- */
- __clearAllMenuItems : function()
- {
- for(var prop=0;prop=0){
- return;
- }
- }
- for(var no=0;no0){
- this.hideSubMenus(); // First iteration of this function=> Hide other sub menus.
- }
- // What should be the state of this menu item -> If it's the one the mouse is over, state should be "over". If it's a parent element, state should be "active".
- var newState = 'over';
- if(!firstIteration)newState = 'active'; // State should be set to 'over' for the menu item the mouse is currently over.
-
- this.menuItem_objects[numericId].setState(newState); // Switch state of menu item.
- if(this.submenuGroups[numericId]){ // Sub menu group exists. call the __expandGroup method.
- this.__expandGroup(numericId); // Expand sub menu group
- }
- DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId]; // Save this menu item in the array of highlighted elements.
- if(objectRef.menuItems[numericId].parentId){ // A parent element exists. Call this method over again with parent element as input argument.
- this.__activateMenuElements(objectRef.menuItem_objects[objectRef.menuItems[numericId].parentId].divElement,objectRef,false);
- }
- }
- // }}}
- ,
- // {{{ __createMenuItems()
- /**
- * Creates the HTML elements for the menu items.
- *
- *
- * @private
- */
- __createMenuItems : function()
- {
- if(!this.globalObjectIndex)this.globalObjectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;;
- var index = this.globalObjectIndex;
- DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index] = this;
-
- // Find first child of the body element. trying to insert the element before first child instead of appending it to the tag, ref: problems in ie
- var firstChild = false;
- var firstChilds = document.getElementsByTagName('DIV');
- if(firstChilds.length>0)firstChild = firstChilds[0]
-
- for(var no=0;no Create it.
- this.submenuGroups[this.menuItems[indexThis].parentId] = document.createElement('DIV');
- this.submenuGroups[this.menuItems[indexThis].parentId].style.zIndex = 10000;
- this.submenuGroups[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarSubGroup' + this.menuItems[indexThis].parentId;
- this.submenuGroups[this.menuItems[indexThis].parentId].style.visibility = 'hidden'; // Initially hidden.
- if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='sub')this.submenuGroups[this.menuItems[indexThis].parentId].className = this.cssPrefix + 'menuBar_sub';
- if(firstChild){
- firstChild.parentNode.insertBefore(this.submenuGroups[this.menuItems[indexThis].parentId],firstChild);
- }else{
- document.body.appendChild(this.submenuGroups[this.menuItems[indexThis].parentId]);
- }
-
- if(DHTMLSuite.clientInfoObj.isMSIE && this.createIframesForOldIeBrowsers){ // Create iframe object in order to conver select boxes in older IE browsers(windows).
- this.submenuIframes[this.menuItems[indexThis].parentId] = document.createElement('
'; - iconDiv.id = 'menuItemIcon' + this.modelItemRef.id - parentEl.appendChild(iconDiv); - } - if(this.modelItemRef.itemText){ - var div = document.createElement('DIV'); - div.innerHTML = this.modelItemRef.itemText; - div.className = this.cssPrefix + 'menuItem_textContent'; - div.id = 'menuItemText' + this.modelItemRef.id; - parentEl.appendChild(div); - } - /* Create div for the arrow -> Show sub items */ - var div = document.createElement('DIV'); - div.className = this.cssPrefix + 'menuItem_top_arrowShowSub'; - div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id; - parentEl.appendChild(div); - this.expandElement = div; - if(!this.modelItemRef.hasSubs)div.style.display='none'; - - } - // }}} - , - - // {{{ __createMenuElementsOfTypeSub() - /** - * Creates the different parts of a menu item of type "sub". - * - * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj - * @param Object parentEl = Reference to parent element - * - * @private - */ - __createMenuElementsOfTypeSub : function(parentEl){ - if(this.modelItemRef.itemIcon){ - parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')'; - parentEl.style.backgroundRepeat = 'no-repeat'; - parentEl.style.backgroundPosition = 'left center'; - } - if(this.modelItemRef.itemText){ - var div; - if( this.modelItemRef.url ) - { - div = document.createElement('a'); - div.href = this.modelItemRef.url; - div.target = this.modelItemRef.frameTarget; - div.style.display = 'block'; - } - else - div = document.createElement('div'); - - div.className = 'DHTMLSuite_textContent'; - div.innerHTML = this.modelItemRef.itemText; - div.className = this.cssPrefix + 'menuItem_textContent'; - div.id = 'menuItemText' + this.modelItemRef.id; - parentEl.appendChild(div); - } - - /* Create div for the arrow -> Show sub items */ - var div = document.createElement('DIV'); - div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub'; - parentEl.appendChild(div); - div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id; - this.expandElement = div; - - if(!this.modelItemRef.hasSubs){ - div.style.display='none'; - }else{ - div.previousSibling.style.paddingRight = '15px'; - } - } - // }}} - , - // {{{ setCssPrefix() - /** - * Set css prefix for the menu item. default is 'DHTMLSuite_'. This is useful in case you want to have different menus on a page with different layout. - * - * @param String cssPrefix = New css prefix. - * - * @public - */ - setCssPrefix : function(cssPrefix) - { - this.cssPrefix = cssPrefix; - } - // }}} - , - // {{{ setMenuIcon() - /** - * Replace menu icon. - * - * @param String newPath - Path to new icon (false if no icon); - * - * @public - */ - setIcon : function(newPath) - { - this.modelItemRef.setIcon(newPath); - if(this.modelItemRef.type=='top'){ // Menu item is of type "top" - var div = document.getElementById('menuItemIcon' + this.modelItemRef.id); // Get a reference to the div where the icon is located. - var img = div.getElementsByTagName('IMG')[0]; // Find the image - if(!img){ // Image doesn't exists ? - img = document.createElement('IMG'); // Create new image - div.appendChild(img); - } - img.src = newPath; // Set image path - if(!newPath)img.parentNode.removeChild(img); // No newPath defined, remove the image. - } - if(this.modelItemRef.type=='sub'){ // Menu item is of type "sub" - this.divElement.style.backgroundImage = 'url(\'' + newPath + '\')'; // Set backgroundImage for the main div(i.e. menu item div) - } - } - // }}} - , - // {{{ setText() - /** - * Replace the text of a menu item - * - * @param String newText - New text for the menu item. - * - * @public - */ - setText : function(newText) - { - this.modelItemRef.setText(newText); - document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText; - - - } - - // }}} - , - // {{{ __clickMenuItem() - /** - * Effect - click on menu item - * - * - * @private - */ - __clickMenuItem : function() - { - this.className = this.className.replace('_regular','_click'); - this.className = this.className.replace('_over','_click'); - } - // }}} - , - // {{{ __rolloverMenuItem() - /** - * Roll over effect - * - * - * @private - */ - __rolloverMenuItem : function() - { - this.className = this.className.replace('_regular','_over'); - this.className = this.className.replace('_click','_over'); - } - // }}} - , - // {{{ __rolloutMenuItem() - /** - * Roll out effect - * - * - * @private - */ - __rolloutMenuItem : function() - { - this.className = this.className.replace('_over','_regular'); - - } - // }}} - , - // {{{ setState() - /** - * Set state of a menu item. - * - * @param String newState = New state for the menu item - * - * @public - */ - setState : function(newState) - { - this.divElement.className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState; - this.modelItemRef.setState(newState); - } - // }}} - , - // {{{ getState() - /** - * Return state of a menu item. - * - * - * @public - */ - getState : function() - { - var state = this.modelItemRef.getState(); - if(!state){ - if(this.divElement.className.indexOf('_over')>=0)state = 'over'; - if(this.divElement.className.indexOf('_click')>=0)state = 'click'; - this.modelItemRef.setState(state); - } - return state; - } - // }}} - , - // {{{ __setHasSub() - /** - * Update the item, i.e. show/hide the arrow if the element has subs or not. - * - * - * @private - */ - __setHasSub : function(hasSubs) - { - this.modelItemRef.hasSubs = hasSubs; - if(!hasSubs){ - document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none'; - }else{ - document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block'; - } - } - // }}} - , - // {{{ hide() - /** - * Hide the menu item. - * - * - * @public - */ - hide : function() - { - this.modelItemRef.setVisibility(false); - this.divElement.style.display='none'; - } - , - // {{{ show() - /** - * Show the menu item. - * - * - * @public - */ - show : function() - { - this.modelItemRef.setVisibility(true); - this.divElement.style.display='block'; - } - // }}} - , - // {{{ __hideGroup() - /** - * Hide the group the menu item is a part of. Example: if we're dealing with menu item 2.1, hide the group for all sub items of 2 - * - * - * @private - */ - __hideGroup : function() - { - if(this.modelItemRef.parentId){ - this.divElement.parentNode.style.visibility='hidden'; - if(DHTMLSuite.clientInfoObj.isMSIE){ - try{ - var tmpId = this.divElement.parentNode.id.replace(/[^0-9]/gi,''); - document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden'; - }catch(e){ - // IFRAME hasn't been created. - } - } - } - - } - // }}} - , - // {{{ __navigate() - /** - * Navigate after click on a menu item. - * - * - * @private - */ - __navigate : function(e) - { - /* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */ - if(document.all)e = event; - if(e){ - var srcEl = DHTMLSuite.commonObj.getSrcElement(e); - if(srcEl.id.indexOf('arrow')>=0)return; - } - if(this.modelItemRef.state=='disabled')return; - if(this.modelItemRef.url){ - if (this.modelItemRef.frameTarget == 'main_window') - window.main_window.location = this.modelItemRef.url; - else if (this.modelItemRef.frameTarget == '_top') - window.location = this.modelItemRef.url; - else if (this.modelItemRef.frameTarget) - window.open(this.modelItemRef.url); - else - location.href = this.modelItemRef.url; - } - if(this.modelItemRef.jsFunction){ - try{ - eval(this.modelItemRef.jsFunction); - }catch(e){ - alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed'); - } - } - } -} - - -/************************************************************************************************************ -* DHTML menu bar class -* -* Created: October, 21st, 2006 -* @class Purpose of class: Creates a top bar menu -* -* Css files used by this script: menu-bar.css -* -* Demos of this class: demo-menu-bar.html -* -* Update log: -* -************************************************************************************************************/ - - -/** -* @constructor -* @class Purpose of class: Creates a top bar menu strip. Demos: