1 /************************************************************************************************************
\r
3 DHTML Suite for Applications.
\r
4 Copyright (C) 2006 Alf Magne Kalleland(post@dhtmlgoodies.com)<br>
\r
6 This library is free software; you can redistribute it and/or<br>
\r
7 modify it under the terms of the GNU Lesser General Public<br>
\r
8 License as published by the Free Software Foundation; either<br>
\r
9 version 2.1 of the License, or (at your option) any later version.<br>
\r
11 This library is distributed in the hope that it will be useful,<br>
\r
12 but WITHOUT ANY WARRANTY; without even the implied warranty of<br>
\r
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU<br>
\r
14 Lesser General Public License for more details.<br>
\r
16 You should have received a copy of the GNU Lesser General Public<br>
\r
17 License along with this library; if not, write to the Free Software<br>
\r
18 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA<br>
\r
21 www.dhtmlgoodies.com<br>
\r
22 Alf Magne Kalleland<br>
\r
24 ************************************************************************************************************/
\r
29 * @package DHTMLSuite for applications
\r
30 * @copyright Copyright © 2006, www.dhtmlgoodies.com
\r
31 * @author Alf Magne Kalleland <post@dhtmlgoodies.com>
\r
35 /************************************************************************************************************
\r
39 ************************************************************************************************************/
\r
42 // {{{ DHTMLSuite.createStandardObjects()
\r
44 * Create objects used by all scripts
\r
50 var DHTMLSuite = new Object();
\r
52 var standardObjectsCreated = false; // The classes below will check this variable, if it is false, default help objects will be created
\r
53 DHTMLSuite.eventElements = new Array(); // Array of elements that has been assigned to an event handler.
\r
55 DHTMLSuite.createStandardObjects = function()
\r
57 DHTMLSuite.clientInfoObj = new DHTMLSuite.clientInfo(); // Create browser info object
\r
58 DHTMLSuite.clientInfoObj.init();
\r
59 if(!DHTMLSuite.configObj){ // If this object isn't allready created, create it.
\r
60 DHTMLSuite.configObj = new DHTMLSuite.config(); // Create configuration object.
\r
61 DHTMLSuite.configObj.init();
\r
63 DHTMLSuite.commonObj = new DHTMLSuite.common(); // Create configuration object.
\r
64 DHTMLSuite.variableStorage = new DHTMLSuite.globalVariableStorage();; // Create configuration object.
\r
65 DHTMLSuite.commonObj.init();
\r
66 window.onunload = function() { DHTMLSuite.commonObj.__clearGarbage(); }
\r
68 standardObjectsCreated = true;
\r
76 /************************************************************************************************************
\r
77 * Configuration class used by most of the scripts
\r
79 * Created: August, 19th, 2006
\r
82 ************************************************************************************************************/
\r
87 * @class Store global variables/configurations used by the classes below. Example: If you want to
\r
88 * change the path to the images used by the scripts, change it here. An object of this
\r
89 * class will always be available to the other classes. The name of this object is
\r
90 * "DHTMLSuite.configObj". <br><br>
\r
92 * If you want to create an object of this class manually, remember to name it "DHTMLSuite.configObj"
\r
93 * This object should then be created before any other objects. This is nescessary if you want
\r
94 * the other objects to use the values you have put into the object. <br>
\r
97 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
99 DHTMLSuite.config = function()
\r
101 var imagePath; // Path to images used by the classes.
\r
102 var cssPath; // Path to CSS files used by the DHTML suite.
\r
106 DHTMLSuite.config.prototype = {
\r
114 this.imagePath = '../images_dhtmlsuite/'; // Path to images
\r
115 this.cssPath = '../css_dhtmlsuite/'; // Path to images
\r
119 // {{{ setCssPath()
\r
121 * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.
\r
123 * @param string newCssPath = New path to css files
\r
127 setCssPath : function(newCssPath)
\r
129 this.cssPath = newCssPath;
\r
133 // {{{ setImagePath()
\r
135 * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
\r
137 * @param string newImagePath = New path to image files
\r
140 setImagePath : function(newImagePath)
\r
142 this.imagePath = newImagePath;
\r
149 DHTMLSuite.globalVariableStorage = function()
\r
151 var menuBar_highlightedItems; // Array of highlighted menu bar items
\r
152 this.menuBar_highlightedItems = new Array();
\r
154 var arrayOfDhtmlSuiteObjects; // Array of objects of class menuItem.
\r
155 this.arrayOfDhtmlSuiteObjects = new Array();
\r
158 DHTMLSuite.globalVariableStorage.prototype = {
\r
163 /************************************************************************************************************
\r
164 * A class with general methods used by most of the scripts
\r
166 * Created: August, 19th, 2006
\r
167 * Purpose of class: A class containing common method used by one or more of the gui classes below,
\r
168 * example: loadCSS.
\r
169 * An object("DHTMLSuite.commonObj") of this class will always be available to the other classes.
\r
172 ************************************************************************************************************/
\r
177 * @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.
\r
179 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
182 DHTMLSuite.common = function()
\r
184 var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice.
\r
185 var cssCacheStatus; // Css cache status
\r
188 this.cssCacheStatus = true; // Caching of css files = on(Default)
\r
189 this.eventElements = new Array();
\r
192 DHTMLSuite.common.prototype = {
\r
196 * This method initializes the DHTMLSuite_common object.
\r
203 this.loadedCSSFiles = new Array();
\r
209 * This method loads a CSS file(Cascading Style Sheet) dynamically - i.e. an alternative to <link> tag in the document.
\r
211 * @param string cssFileName = New path to image files
\r
215 loadCSS : function(cssFileName)
\r
218 if(!this.loadedCSSFiles[cssFileName]){
\r
219 this.loadedCSSFiles[cssFileName] = true;
\r
220 var linkTag = document.createElement('LINK');
\r
221 if(!this.cssCacheStatus){
\r
222 if(cssFileName.indexOf('?')>=0)cssFileName = cssFileName + '&'; else cssFileName = cssFileName + '?';
\r
223 cssFileName = cssFileName + 'rand='+ Math.random(); // To prevent caching
\r
225 linkTag.href = DHTMLSuite.configObj.cssPath + cssFileName;
\r
226 linkTag.rel = 'stylesheet';
\r
227 linkTag.media = 'screen';
\r
228 linkTag.type = 'text/css';
\r
229 document.getElementsByTagName('HEAD')[0].appendChild(linkTag);
\r
237 * This method will return the top coordinate(pixel) of an object
\r
239 * @param Object inputObj = Reference to HTML element
\r
242 getTopPos : function(inputObj)
\r
244 var returnValue = inputObj.offsetTop;
\r
245 if (returnValue > 700) returnValue = 0;
\r
246 while((inputObj = inputObj.offsetParent) != null){
\r
247 if(inputObj.tagName!='HTML'){
\r
248 returnValue += (inputObj.offsetTop - inputObj.scrollTop);
\r
249 if(document.all)returnValue+=inputObj.clientTop;
\r
252 return returnValue;
\r
256 // {{{ setCssCacheStatus()
\r
258 * Specify if css files should be cached or not.
\r
260 * @param Boolean cssCacheStatus = true = cache on, false = cache off
\r
264 setCssCacheStatus : function(cssCacheStatus)
\r
266 this.cssCacheStatus = cssCacheStatus;
\r
270 // {{{ getLeftPos()
\r
272 * This method will return the left coordinate(pixel) of an object
\r
274 * @param Object inputObj = Reference to HTML element
\r
277 getLeftPos : function(inputObj)
\r
279 var returnValue = inputObj.offsetLeft;
\r
280 while((inputObj = inputObj.offsetParent) != null){
\r
281 if(inputObj.tagName!='HTML'){
\r
282 returnValue += inputObj.offsetLeft;
\r
283 if(document.all)returnValue+=inputObj.clientLeft;
\r
286 return returnValue;
\r
290 // {{{ cancelEvent()
\r
293 * This function only returns false. It is used to cancel selections and drag
\r
299 cancelEvent : function()
\r
308 * This function adds an event listener to an element on the page.
\r
310 * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
\r
311 * @param String eventType = Which type of event, example "mousemove" or "mouseup"
\r
312 * @param functionName = Name of function to execute.
\r
316 addEvent : function(whichObject,eventType,functionName)
\r
318 if(whichObject.attachEvent){
\r
319 whichObject['e'+eventType+functionName] = functionName;
\r
320 whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
\r
321 whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
\r
323 whichObject.addEventListener(eventType,functionName,false);
\r
324 this.__addEventElement(whichObject);
\r
325 delete(whichObject);
\r
326 // whichObject = null;
\r
330 // {{{ removeEvent()
\r
333 * This function removes an event listener from an element on the page.
\r
335 * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
\r
336 * @param String eventType = Which type of event, example "mousemove" or "mouseup"
\r
337 * @param functionName = Name of function to execute.
\r
341 removeEvent : function(whichObject,eventType,functionName)
\r
343 if(whichObject.detachEvent){
\r
344 whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]);
\r
345 whichObject[eventType+functionName] = null;
\r
347 whichObject.removeEventListener(eventType,functionName,false);
\r
350 // {{{ __clearGarbage()
\r
353 * This function is used for Internet Explorer in order to clear memory when the page unloads.
\r
358 __clearGarbage : function()
\r
360 /* Example of event which causes memory leakage in IE
\r
362 DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); })
\r
364 We got a circular reference.
\r
368 if(!DHTMLSuite.clientInfoObj.isMSIE)return;
\r
370 for(var no in DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects){
\r
371 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[no] = false;
\r
374 for(var no=0;no<DHTMLSuite.eventElements.length;no++){
\r
375 DHTMLSuite.eventElements[no].onclick = null;
\r
376 DHTMLSuite.eventElements[no].onmousedown = null;
\r
377 DHTMLSuite.eventElements[no].onmousemove = null;
\r
378 DHTMLSuite.eventElements[no].onmouseout = null;
\r
379 DHTMLSuite.eventElements[no].onmouseover = null;
\r
380 DHTMLSuite.eventElements[no].onmouseup = null;
\r
381 DHTMLSuite.eventElements[no].onfocus = null;
\r
382 DHTMLSuite.eventElements[no].onblur = null;
\r
383 DHTMLSuite.eventElements[no].onkeydown = null;
\r
384 DHTMLSuite.eventElements[no].onkeypress = null;
\r
385 DHTMLSuite.eventElements[no].onkeyup = null;
\r
386 DHTMLSuite.eventElements[no].onselectstart = null;
\r
387 DHTMLSuite.eventElements[no].ondragstart = null;
\r
388 DHTMLSuite.eventElements[no].oncontextmenu = null;
\r
389 DHTMLSuite.eventElements[no].onscroll = null;
\r
392 window.onunload = null;
\r
398 // {{{ __addEventElement()
\r
401 * Add element to garbage collection array. The script will loop through this array and remove event handlers onload in ie.
\r
406 __addEventElement : function(el)
\r
408 DHTMLSuite.eventElements[DHTMLSuite.eventElements.length] = el;
\r
412 // {{{ getSrcElement()
\r
415 * Returns a reference to the element which triggered an event.
\r
416 * @param Event e = Event object
\r
421 getSrcElement : function(e)
\r
424 // Dropped on which element
\r
425 if (e.target) el = e.target;
\r
426 else if (e.srcElement) el = e.srcElement;
\r
427 if (el.nodeType == 3) // defeat Safari bug
\r
428 el = el.parentNode;
\r
435 /************************************************************************************************************
\r
436 * Client info class
\r
438 * Created: August, 18th, 2006
\r
441 ************************************************************************************************************/
\r
445 * @class Purpose of class: Provide browser information to the classes below. Instead of checking for
\r
446 * browser versions and browser types in the classes below, they should check this
\r
447 * easily by referncing properties in the class below. An object("DHTMLSuite.clientInfoObj") of this
\r
448 * class will always be accessible to the other classes. * @version 1.0
\r
449 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
453 DHTMLSuite.clientInfo = function()
\r
455 var browser; // Complete user agent information
\r
457 var isOpera; // Is the browser "Opera"
\r
458 var isMSIE; // Is the browser "Internet Explorer"
\r
459 var isFirefox; // Is the browser "Firefox"
\r
460 var navigatorVersion; // Browser version
\r
463 DHTMLSuite.clientInfo.prototype = {
\r
468 * return value: none;
\r
474 * This method initializes the script
\r
482 this.browser = navigator.userAgent;
\r
483 this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;
\r
484 this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
\r
485 this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
\r
486 this.isSafari = (this.browser.toLowerCase().indexOf('safari')>=0)?true:false;
\r
487 this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
\r
492 /************************************************************************************************************
\r
493 * DHTML menu model item class
\r
495 * Created: October, 30th, 2006
\r
496 * @class Purpose of class: Save data about a menu item.
\r
502 ************************************************************************************************************/
\r
504 DHTMLSuite.menuModelItem = function()
\r
506 var id; // id of this menu item.
\r
507 var itemText; // Text for this menu item
\r
508 var itemIcon; // Icon for this menu item.
\r
509 var url; // url when click on this menu item
\r
510 var parentId; // id of parent element
\r
511 var separator; // is this menu item a separator
\r
512 var jsFunction; // Js function to call onclick
\r
513 var depth; // Depth of this menu item.
\r
514 var hasSubs; // Does this menu item have sub items.
\r
515 var type; // Menu item type - possible values: "top" or "sub".
\r
516 var helpText; // Help text for this item - appear when you move your mouse over the item.
\r
518 var submenuWidth; // Width of sub menu items.
\r
519 var visible; // Visibility of menu item.
\r
522 this.state = 'regular';
\r
525 DHTMLSuite.menuModelItem.prototype = {
\r
527 setMenuVars : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget)
\r
530 this.itemText = itemText;
\r
531 this.itemIcon = itemIcon;
\r
533 this.parentId = parentId;
\r
534 this.jsFunction = jsFunction;
\r
535 this.separator = false;
\r
536 this.depth = false;
\r
537 this.hasSubs = false;
\r
538 this.helpText = helpText;
\r
539 this.submenuWidth = submenuWidth;
\r
540 this.visible = true;
\r
541 this.frameTarget = frameTarget;
\r
543 if(this.parentId)this.type = 'top'; else this.type='sub';
\r
544 }else this.type = type;
\r
552 * Update the state attribute of a menu item.
\r
554 * @param String newState New state of this item
\r
557 setAsSeparator : function(id,parentId)
\r
560 this.parentId = parentId;
\r
561 this.separator = true;
\r
562 this.visible = true;
\r
563 if(this.parentId)this.type = 'top'; else this.type='sub';
\r
569 * Update the visible attribute of a menu item.
\r
571 * @param Boolean visible true = visible, false = hidden.
\r
574 setVisibility : function(visible)
\r
576 this.visible = visible;
\r
582 * Return the state attribute of a menu item.
\r
586 getState : function()
\r
594 * Update the state attribute of a menu item.
\r
596 * @param String newState New state of this item
\r
599 setState : function(newState)
\r
601 this.state = newState;
\r
605 // {{{ setSubMenuWidth()
\r
607 * Specify width of direct subs of this item.
\r
609 * @param int newWidth Width of sub menu group(direct sub of this item)
\r
612 setSubMenuWidth : function(newWidth)
\r
614 this.submenuWidth = newWidth;
\r
620 * Specify new menu icon
\r
622 * @param String iconPath Path to new menu icon
\r
625 setIcon : function(iconPath)
\r
627 this.itemIcon = iconPath;
\r
633 * Specify new text for the menu item.
\r
635 * @param String newText New text for the menu item.
\r
638 setText : function(newText)
\r
640 this.itemText = newText;
\r
644 /************************************************************************************************************
\r
645 * DHTML menu model class
\r
647 * Created: October, 30th, 2006
\r
648 * @class Purpose of class: Saves menu item data
\r
651 * Demos of this class: demo-menu-strip.html
\r
655 ************************************************************************************************************/
\r
660 * @class Purpose of class: Organize menu items for different menu widgets. demos of menus: (<a href="../../demos/demo-menu-strip.html" target="_blank">Demo</a>)
\r
662 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
666 DHTMLSuite.menuModel = function()
\r
668 var menuItems; // Array of menuModelItem objects
\r
669 var menuItemsOrder; // This array is needed in order to preserve the correct order of the array above. the array above is associative
\r
670 // And some browsers will loop through that array in different orders than Firefox and IE.
\r
671 var submenuType; // Direction of menu items(one item for each depth)
\r
672 var mainMenuGroupWidth; // Width of menu group - useful if the first group of items are listed below each other
\r
673 this.menuItems = new Array();
\r
674 this.menuItemsOrder = new Array();
\r
675 this.submenuType = new Array();
\r
676 this.submenuType[1] = 'top';
\r
677 for(var no=2;no<20;no++){
\r
678 this.submenuType[no] = 'sub';
\r
680 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
683 DHTMLSuite.menuModel.prototype = {
\r
686 * Add separator (special type of menu item)
\r
690 * @param int id of menu item
\r
691 * @param string itemText = text of menu item
\r
692 * @param string itemIcon = file name of menu icon(in front of menu text. Path will be imagePath for the DHTMLSuite + file name)
\r
693 * @param string url = Url of menu item
\r
694 * @param int parent id of menu item
\r
695 * @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
\r
696 * 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
\r
697 * the element triggering the context menu is sent as second argument to this function.
\r
701 addItem : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth)
\r
703 if(!id)id = this.__getUniqueId(); // id not present - create it dynamically.
\r
704 this.menuItems[id] = new DHTMLSuite.menuModelItem();
\r
705 this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth);
\r
706 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
707 return this.menuItems[id];
\r
710 // {{{ addItemsFromMarkup()
\r
712 * This method creates all the menuModelItem objects by reading it from existing markup on your page.
\r
713 * Example of HTML markup:
\r
715 <ul id="menuModel">
\r
716 <br> <li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
\r
717 <br> <ul width="150">
\r
718 <br> <li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
\r
719 <br> <li id="500002"><a href="#">Save As</a></li>
\r
720 <br> <li id="500004" itemType="separator"></li>
\r
721 <br> <li id="500003"><a href="#">Open</a></li>
\r
722 <br> </ul>
\r
723 <br> </li>
\r
724 <br> <li id="50001"><a href="#">View</a>
\r
725 <br> <ul width="130">
\r
726 <br> <li id="500011"><a href="#">Source</a></li>
\r
727 <br> <li id="500012"><a href="#">Debug info</a></li>
\r
728 <br> <li id="500013"><a href="#">Layout</a>
\r
729 <br> <ul width="150">
\r
730 <br> <li id="5000131"><a href="#">CSS</a>
\r
731 <br> <li id="5000132"><a href="#">HTML</a>
\r
732 <br> <li id="5000133"><a href="#">Javascript</a>
\r
733 <br> </ul>
\r
734 <br> </li>
\r
735 <br>
\r
736 <br> </ul>
\r
737 <br> </li>
\r
738 <br> <li id="50003" itemType="separator"></li>
\r
739 <br> <li id="50002"><a href="#">Tools</a></li>
\r
740 <br> </ul>
\r
742 * @param String ulId = ID of <UL> tag on your page.
\r
746 addItemsFromMarkup : function(ulId)
\r
748 if(!document.getElementById(ulId)){
\r
749 alert('<UL> tag with id ' + ulId + ' does not exist');
\r
752 var ulObj = document.getElementById(ulId);
\r
753 var liTags = ulObj.getElementsByTagName('LI');
\r
754 for(var no=0;no<liTags.length;no++){ // Walking through all <li> tags in the <ul> tree
\r
756 var id = liTags[no].id.replace(/[^0-9]/gi,''); // Get id of item.
\r
757 if(!id)id = this.__getUniqueId();
\r
758 this.menuItems[id] = new DHTMLSuite.menuModelItem(); // Creating new menuModelItem object
\r
759 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
760 // Get the attributes for this new menu item.
\r
762 var parentId = 0; // Default parent id
\r
763 if(liTags[no].parentNode!=ulObj)parentId = liTags[no].parentNode.parentNode.id; // parent node exists, set parentId equal to id of parent <li>.
\r
765 /* Checking type */
\r
766 var type = liTags[no].getAttribute('itemType');
\r
767 if(!type)type = liTags[no].itemType;
\r
768 if(type=='separator'){ // Menu item of type "separator"
\r
769 this.menuItems[id].setAsSeparator(id,parentId);
\r
772 if(parentId)type='sub'; else type = 'top';
\r
774 var aTag = liTags[no].getElementsByTagName('A')[0]; // Get a reference to sub <a> tag
\r
778 if(aTag)var itemText = aTag.innerHTML; // Item text is set to the innerHTML of the <a> tag.
\r
779 var itemIcon = liTags[no].getAttribute('itemIcon'); // Item icon is set from the itemIcon attribute of the <li> tag.
\r
780 var url = aTag.href; // url is set to the href attribute of the <a> tag
\r
781 if(url=='#' || url.substr(url.length-1,1)=='#')url=''; // # = empty url.
\r
782 var frameTarget = aTag.target;
\r
784 var jsFunction = liTags[no].getAttribute('jsFunction'); // jsFunction is set from the jsFunction attribute of the <li> tag.
\r
786 var submenuWidth = false; // Not set from the <li> tag.
\r
787 var helpText = aTag.getAttribute('title');
\r
788 if(!helpText)helpText = aTag.title;
\r
790 this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget);
\r
792 var subUls = ulObj.getElementsByTagName('UL');
\r
793 for(var no=0;no<subUls.length;no++){
\r
794 var width = subUls[no].getAttribute('width');
\r
795 if(!width)width = subUls[no].width;
\r
797 var id = subUls[no].parentNode.id.replace(/[^0-9]/gi,'');
\r
798 this.setSubMenuWidth(id,width);
\r
801 ulObj.style.display='none';
\r
806 // {{{ setSubMenuWidth()
\r
808 * This method specifies the width of a sub menu group. This is a useful method in order to get a correct width in IE6 and prior.
\r
810 * @param int id = ID of parent menu item
\r
811 * @param String newWidth = Width of sub menu items.
\r
814 setSubMenuWidth : function(id,newWidth)
\r
816 this.menuItems[id].setSubMenuWidth(newWidth);
\r
819 // {{{ setMainMenuGroupWidth()
\r
821 * Add separator (special type of menu item)
\r
823 * @param String newWidth = Size of a menu group
\r
824 * @param int parent id of menu item
\r
827 setMainMenuGroupWidth : function(newWidth)
\r
829 this.mainMenuGroupWidth = newWidth;
\r
832 // {{{ addSeparator()
\r
834 * Add separator (special type of menu item)
\r
836 * @param int parent id of menu item
\r
839 addSeparator : function(parentId)
\r
841 id = this.__getUniqueId(); // Get unique id
\r
842 if(!parentId)parentId = 0;
\r
843 this.menuItems[id] = new DHTMLSuite.menuModelItem();
\r
844 this.menuItems[id].setAsSeparator(id,parentId);
\r
845 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
846 return this.menuItems[id];
\r
851 * Initilizes the menu model. This method should be called when all items has been added to the model.
\r
858 this.__getDepths();
\r
859 this.__setHasSubs();
\r
864 // {{{ setMenuItemVisibility()
\r
866 * Save visibility of a menu item.
\r
868 * @param int id = Id of menu item..
\r
869 * @param Boolean visible = Visibility of menu item.
\r
873 setMenuItemVisibility : function(id,visible)
\r
875 this.menuItems[id].setVisibility(visible);
\r
879 // {{{ setSubMenuType()
\r
881 * Set menu type for a specific menu depth.
\r
883 * @param int depth = 1 = Top menu, 2 = Sub level 1...
\r
884 * @param String newType = New menu type(possible values: "top" or "sub")
\r
888 setSubMenuType : function(depth,newType)
\r
890 this.submenuType[depth] = newType;
\r
895 // {{{ __getDepths()
\r
897 * Create variable for the depth of each menu item.
\r
902 getItems : function(parentId,returnArray)
\r
904 if(!parentId)return this.menuItems;
\r
905 if(!returnArray)returnArray = new Array();
\r
906 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
907 var id = this.menuItemsOrder[no];
\r
909 if(this.menuItems[id].parentId==parentId){
\r
910 returnArray[returnArray.length] = this.menuItems[id];
\r
911 if(this.menuItems[id].hasSubs)return this.getItems(this.menuItems[id].id,returnArray);
\r
914 return returnArray;
\r
919 // {{{ __getUniqueId()
\r
921 * Returns a unique id for a menu item. This method is used by the addSeparator function in case an id isn't sent to the method.
\r
926 __getUniqueId : function()
\r
928 var num = Math.random() + '';
\r
929 num = num.replace('.','');
\r
932 while(this.menuItems[num]){
\r
933 num = Math.random() + '';
\r
934 num = num.replace('.','');
\r
941 // {{{ __getDepths()
\r
943 * Create variable for the depth of each menu item.
\r
948 __getDepths : function()
\r
950 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
951 var id = this.menuItemsOrder[no];
\r
953 this.menuItems[id].depth = 1;
\r
954 if(this.menuItems[id].parentId){
\r
955 this.menuItems[id].depth = this.menuItems[this.menuItems[id].parentId].depth+1;
\r
958 this.menuItems[id].type = this.submenuType[this.menuItems[id].depth]; // Save menu direction for this menu item.
\r
963 // {{{ __setHasSubs()
\r
965 * Create variable for the depth of each menu item.
\r
970 __setHasSubs : function()
\r
972 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
973 var id = this.menuItemsOrder[no];
\r
975 if(this.menuItems[id].parentId){
\r
976 this.menuItems[this.menuItems[id].parentId].hasSubs = 1;
\r
985 * Does a menu item have sub elements ?
\r
991 __hasSubs : function(id)
\r
993 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
994 var id = this.menuItemsOrder[no];
\r
996 if(this.menuItems[id].parentId==id)return true;
\r
1002 // {{{ __deleteChildNodes()
\r
1004 * Deleting child nodes of a specific parent id
\r
1006 * @param int parentId
\r
1011 __deleteChildNodes : function(parentId,recursive)
\r
1013 var itemsToDeleteFromOrderArray = new Array();
\r
1014 for(var prop=0;prop<this.menuItemsOrder.length;prop++){
\r
1015 var id = this.menuItemsOrder[prop];
\r
1018 if(this.menuItems[id].parentId==parentId && parentId){
\r
1019 this.menuItems[id] = false;
\r
1020 itemsToDeleteFromOrderArray[itemsToDeleteFromOrderArray.length] = id;
\r
1021 this.__deleteChildNodes(id,true); // Recursive call.
\r
1026 for(var prop=0;prop<itemsToDeleteFromOrderArray;prop++){
\r
1027 if(!itemsToDeleteFromOrderArray[prop])continue;
\r
1028 this.__deleteItemFromItemOrderArray(itemsToDeleteFromOrderArray[prop]);
\r
1031 this.__setHasSubs();
\r
1035 // {{{ __deleteANode()
\r
1037 * Deleting a specific node from the menu model
\r
1039 * @param int id = Id of node to delete.
\r
1044 __deleteANode : function(id)
\r
1046 this.menuItems[id] = false;
\r
1047 this.__deleteItemFromItemOrderArray(id);
\r
1050 // {{{ __deleteItemFromItemOrderArray()
\r
1052 * Deleting a specific node from the menuItemsOrder array(The array controlling the order of the menu items).
\r
1054 * @param int id = Id of node to delete.
\r
1059 __deleteItemFromItemOrderArray : function(id)
\r
1061 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
1062 var tmpId = this.menuItemsOrder[no];
\r
1063 if(!tmpId)continue;
\r
1064 if(this.menuItemsOrder[no]==id){
\r
1065 this.menuItemsOrder.splice(no,1);
\r
1073 // {{{ __appendMenuModel()
\r
1075 * Replace the sub items of a menu item with items from a new menuModel.
\r
1077 * @param menuModel newModel = An object of class menuModel - the items of this menu model will be appended to the existing menu items.
\r
1078 * @param Int parentId = Id of parent element of the appended items.
\r
1083 __appendMenuModel : function(newModel,parentId)
\r
1085 if(!newModel)return;
\r
1086 var items = newModel.getItems();
\r
1087 for(var no=0;no<newModel.menuItemsOrder.length;no++){
\r
1088 var id = newModel.menuItemsOrder[no];
\r
1090 if(!items[id].parentId)items[id].parentId = parentId;
\r
1091 this.menuItems[id] = items[id];
\r
1092 for(var no2=0;no2<this.menuItemsOrder.length;no2++){ // Check to see if this item allready exists in the menuItemsOrder array, if it does, remove it.
\r
1093 if(!this.menuItemsOrder[no2])continue;
\r
1094 if(this.menuItemsOrder[no2]==items[id].id){
\r
1095 this.menuItemsOrder.splice(no2,1);
\r
1098 this.menuItemsOrder[this.menuItemsOrder.length] = items[id].id;
\r
1100 this.__getDepths();
\r
1101 this.__setHasSubs();
\r
1106 /* Class for menu items - a view */
\r
1108 /************************************************************************************************************
\r
1109 * DHTML menu item class
\r
1111 * Created: October, 21st, 2006
\r
1112 * @class Purpose of class: Creates the HTML for a single menu item.
\r
1114 * Css files used by this script: menu-item.css
\r
1116 * Demos of this class: demo-menu-strip.html
\r
1120 ************************************************************************************************************/
\r
1124 * @class Purpose of class: Creates the div(s) for a menu item. This class is used by the menuBar class. You can
\r
1125 * also create a menu item and add it where you want on your page. the createItem() method will return the div
\r
1126 * for the item. You can use the appendChild() method to add it to your page.
\r
1129 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
1133 DHTMLSuite.menuItem = function()
\r
1136 var divElement; // the <div> element created for this menu item
\r
1137 var expandElement; // Reference to the arrow div (expand sub items)
\r
1138 var cssPrefix; // Css prefix for the menu items.
\r
1139 var modelItemRef; // Reference to menuModelItem
\r
1141 // this.layoutCSS = 'menu-item.css';
\r
1142 this.cssPrefix = 'DHTMLSuite_';
\r
1144 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
1148 this.objectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;
\r
1153 DHTMLSuite.menuItem.prototype =
\r
1157 * Create a menu item.
\r
1159 * @param menuModelItem menuModelItemObj = An object of class menuModelItem
\r
1161 createItem : function(menuModelItemObj)
\r
1163 // DHTMLSuite.commonObj.loadCSS(this.layoutCSS); // Load css
\r
1165 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[this.objectIndex] = this;
\r
1167 this.modelItemRef = menuModelItemObj;
\r
1168 this.divElement = document.createElement('DIV'); // Create main div
\r
1169 this.divElement.id = 'DHTMLSuite_menuItem' + menuModelItemObj.id; // Giving this menu item it's unque id
\r
1170 this.divElement.className = this.cssPrefix + 'menuItem_' + menuModelItemObj.type + '_regular';
\r
1171 this.divElement.onselectstart = function() { return DHTMLSuite.commonObj.cancelEvent(false,this) };
\r
1172 if(menuModelItemObj.helpText){ // Add "title" attribute to the div tag if helpText is defined
\r
1173 this.divElement.title = menuModelItemObj.helpText;
\r
1176 // Menu item of type "top"
\r
1177 if(menuModelItemObj.type=='top'){
\r
1178 this.__createMenuElementsOfTypeTop(this.divElement);
\r
1181 if(menuModelItemObj.type=='sub'){
\r
1182 this.__createMenuElementsOfTypeSub(this.divElement);
\r
1185 if(menuModelItemObj.separator){
\r
1186 this.divElement.className = this.cssPrefix + 'menuItem_separator_' + menuModelItemObj.type;
\r
1187 this.divElement.innerHTML = '<span></span>';
\r
1190 var tmpVar = this.objectIndex/1;
\r
1191 //this.divElement.onclick = function(e) { DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[tmpVar].__navigate(e); }
\r
1192 this.divElement.onmousedown = this.__clickMenuItem; // on mouse down effect
\r
1193 this.divElement.onmouseup = this.__rolloverMenuItem; // on mouse up effect
\r
1194 this.divElement.onmouseover = this.__rolloverMenuItem; // mouse over effect
\r
1195 this.divElement.onmouseout = this.__rolloutMenuItem; // mouse out effect.
\r
1196 DHTMLSuite.commonObj.__addEventElement(this.divElement);
\r
1198 return this.divElement;
\r
1202 // {{{ setLayoutCss()
\r
1204 * Creates the different parts of a menu item of type "top".
\r
1206 * @param String newLayoutCss = Name of css file used for the menu items.
\r
1210 setLayoutCss : function(newLayoutCss)
\r
1212 this.layoutCSS = newLayoutCss;
\r
1217 // {{{ __createMenuElementsOfTypeTop()
\r
1219 * Creates the different parts of a menu item of type "top".
\r
1221 * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
\r
1222 * @param Object parentEl = Reference to parent element
\r
1226 __createMenuElementsOfTypeTop : function(parentEl){
\r
1227 if(this.modelItemRef.itemIcon){
\r
1228 var iconDiv = document.createElement('DIV');
\r
1229 iconDiv.innerHTML = '<img src="' + this.modelItemRef.itemIcon + '">';
\r
1230 iconDiv.id = 'menuItemIcon' + this.modelItemRef.id
\r
1231 parentEl.appendChild(iconDiv);
\r
1233 if(this.modelItemRef.itemText){
\r
1234 var div = document.createElement('DIV');
\r
1235 div.innerHTML = this.modelItemRef.itemText;
\r
1236 div.className = this.cssPrefix + 'menuItem_textContent';
\r
1237 div.id = 'menuItemText' + this.modelItemRef.id;
\r
1238 parentEl.appendChild(div);
\r
1240 /* Create div for the arrow -> Show sub items */
\r
1241 var div = document.createElement('DIV');
\r
1242 div.className = this.cssPrefix + 'menuItem_top_arrowShowSub';
\r
1243 div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
\r
1244 parentEl.appendChild(div);
\r
1245 this.expandElement = div;
\r
1246 if(!this.modelItemRef.hasSubs)div.style.display='none';
\r
1252 // {{{ __createMenuElementsOfTypeSub()
\r
1254 * Creates the different parts of a menu item of type "sub".
\r
1256 * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
\r
1257 * @param Object parentEl = Reference to parent element
\r
1261 __createMenuElementsOfTypeSub : function(parentEl){
\r
1262 if(this.modelItemRef.itemIcon){
\r
1263 parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')';
\r
1264 parentEl.style.backgroundRepeat = 'no-repeat';
\r
1265 parentEl.style.backgroundPosition = 'left center';
\r
1267 if(this.modelItemRef.itemText){
\r
1269 if( this.modelItemRef.url )
\r
1271 div = document.createElement('a');
\r
1272 div.href = this.modelItemRef.url;
\r
1273 div.target = this.modelItemRef.frameTarget;
\r
1274 div.style.display = 'block';
\r
1277 div = document.createElement('div');
\r
1279 div.className = 'DHTMLSuite_textContent';
\r
1280 div.innerHTML = this.modelItemRef.itemText;
\r
1281 div.className = this.cssPrefix + 'menuItem_textContent';
\r
1282 div.id = 'menuItemText' + this.modelItemRef.id;
\r
1283 parentEl.appendChild(div);
\r
1286 /* Create div for the arrow -> Show sub items */
\r
1287 var div = document.createElement('DIV');
\r
1288 div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub';
\r
1289 parentEl.appendChild(div);
\r
1290 div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
\r
1291 this.expandElement = div;
\r
1293 if(!this.modelItemRef.hasSubs){
\r
1294 div.style.display='none';
\r
1296 div.previousSibling.style.paddingRight = '15px';
\r
1301 // {{{ setCssPrefix()
\r
1303 * 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.
\r
1305 * @param String cssPrefix = New css prefix.
\r
1309 setCssPrefix : function(cssPrefix)
\r
1311 this.cssPrefix = cssPrefix;
\r
1315 // {{{ setMenuIcon()
\r
1317 * Replace menu icon.
\r
1319 * @param String newPath - Path to new icon (false if no icon);
\r
1323 setIcon : function(newPath)
\r
1325 this.modelItemRef.setIcon(newPath);
\r
1326 if(this.modelItemRef.type=='top'){ // Menu item is of type "top"
\r
1327 var div = document.getElementById('menuItemIcon' + this.modelItemRef.id); // Get a reference to the div where the icon is located.
\r
1328 var img = div.getElementsByTagName('IMG')[0]; // Find the image
\r
1329 if(!img){ // Image doesn't exists ?
\r
1330 img = document.createElement('IMG'); // Create new image
\r
1331 div.appendChild(img);
\r
1333 img.src = newPath; // Set image path
\r
1334 if(!newPath)img.parentNode.removeChild(img); // No newPath defined, remove the image.
\r
1336 if(this.modelItemRef.type=='sub'){ // Menu item is of type "sub"
\r
1337 this.divElement.style.backgroundImage = 'url(\'' + newPath + '\')'; // Set backgroundImage for the main div(i.e. menu item div)
\r
1344 * Replace the text of a menu item
\r
1346 * @param String newText - New text for the menu item.
\r
1350 setText : function(newText)
\r
1352 this.modelItemRef.setText(newText);
\r
1353 document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText;
\r
1360 // {{{ __clickMenuItem()
\r
1362 * Effect - click on menu item
\r
1367 __clickMenuItem : function()
\r
1369 this.className = this.className.replace('_regular','_click');
\r
1370 this.className = this.className.replace('_over','_click');
\r
1374 // {{{ __rolloverMenuItem()
\r
1376 * Roll over effect
\r
1381 __rolloverMenuItem : function()
\r
1383 this.className = this.className.replace('_regular','_over');
\r
1384 this.className = this.className.replace('_click','_over');
\r
1388 // {{{ __rolloutMenuItem()
\r
1395 __rolloutMenuItem : function()
\r
1397 this.className = this.className.replace('_over','_regular');
\r
1404 * Set state of a menu item.
\r
1406 * @param String newState = New state for the menu item
\r
1410 setState : function(newState)
\r
1412 this.divElement.className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState;
\r
1413 this.modelItemRef.setState(newState);
\r
1419 * Return state of a menu item.
\r
1424 getState : function()
\r
1426 var state = this.modelItemRef.getState();
\r
1428 if(this.divElement.className.indexOf('_over')>=0)state = 'over';
\r
1429 if(this.divElement.className.indexOf('_click')>=0)state = 'click';
\r
1430 this.modelItemRef.setState(state);
\r
1436 // {{{ __setHasSub()
\r
1438 * Update the item, i.e. show/hide the arrow if the element has subs or not.
\r
1443 __setHasSub : function(hasSubs)
\r
1445 this.modelItemRef.hasSubs = hasSubs;
\r
1447 document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none';
\r
1449 document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block';
\r
1456 * Hide the menu item.
\r
1463 this.modelItemRef.setVisibility(false);
\r
1464 this.divElement.style.display='none';
\r
1469 * Show the menu item.
\r
1476 this.modelItemRef.setVisibility(true);
\r
1477 this.divElement.style.display='block';
\r
1481 // {{{ __hideGroup()
\r
1483 * 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
\r
1488 __hideGroup : function()
\r
1490 if(this.modelItemRef.parentId){
\r
1491 this.divElement.parentNode.style.visibility='hidden';
\r
1492 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
1494 var tmpId = this.divElement.parentNode.id.replace(/[^0-9]/gi,'');
\r
1495 document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden';
\r
1497 // IFRAME hasn't been created.
\r
1505 // {{{ __navigate()
\r
1507 * Navigate after click on a menu item.
\r
1512 __navigate : function(e)
\r
1514 /* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */
\r
1515 if(document.all)e = event;
\r
1517 var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
\r
1518 if(srcEl.id.indexOf('arrow')>=0)return;
\r
1520 if(this.modelItemRef.state=='disabled')return;
\r
1521 if(this.modelItemRef.url){
\r
1522 if (this.modelItemRef.frameTarget == 'main_window')
\r
1523 window.main_window.location = this.modelItemRef.url;
\r
1524 else if (this.modelItemRef.frameTarget == '_top')
\r
1525 window.location = this.modelItemRef.url;
\r
1526 else if (this.modelItemRef.frameTarget)
\r
1527 window.open(this.modelItemRef.url);
\r
1529 location.href = this.modelItemRef.url;
\r
1531 if(this.modelItemRef.jsFunction){
\r
1533 eval(this.modelItemRef.jsFunction);
\r
1535 alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed');
\r
1542 /************************************************************************************************************
\r
1543 * DHTML menu bar class
\r
1545 * Created: October, 21st, 2006
\r
1546 * @class Purpose of class: Creates a top bar menu
\r
1548 * Css files used by this script: menu-bar.css
\r
1550 * Demos of this class: demo-menu-bar.html
\r
1554 ************************************************************************************************************/
\r
1559 * @class Purpose of class: Creates a top bar menu strip. Demos: <br>
\r
1561 * <li>(<a href="../../demos/demo-menu-bar-2.html" target="_blank">A menu with a detailed description on how it is created</a>)</li>
\r
1562 * <li>(<a href="../../demos/demo-menu-bar.html" target="_blank">Demo with lots of menus on the same page</a>)</li>
\r
1563 * <li>(<a href="../../demos/demo-menu-bar-custom-css.html" target="_blank">Two menus with different layout</a>)</li>
\r
1564 * <li>(<a href="../../demos/demo-menu-bar-custom-css-file.html" target="_blank">One menu with custom layout/css.</a>)</li>
\r
1567 * <a href="../images/menu-bar-1.gif" target="_blank">Image describing the classes</a> <br><br>
\r
1570 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
1573 DHTMLSuite.menuBar = function()
\r
1576 var layoutCSS; // Name of css file
\r
1577 var menuBarBackgroundImage; // Name of background image
\r
1578 var menuItem_objects; // Array of menu items - html elements.
\r
1579 var menuBarObj; // Reference to the main dib
\r
1580 var menuBarHeight;
\r
1581 var menuItems; // Reference to objects of class menuModelItem
\r
1582 var highlightedItems; // Array of currently highlighted menu items.
\r
1583 var menuBarState; // Menu bar state - true or false - 1 = expand items on mouse over
\r
1584 var activeSubItemsOnMouseOver; // Activate sub items on mouse over (instead of onclick)
\r
1587 var submenuGroups; // Array of div elements for the sub menus
\r
1588 var submenuIframes; // Array of sub menu iframes used to cover select boxes in old IE browsers.
\r
1589 var createIframesForOldIeBrowsers; // true if we want the script to create iframes in order to cover select boxes in older ie browsers.
\r
1590 var targetId; // Id of element where the menu will be inserted.
\r
1591 var menuItemCssPrefix; // Css prefix of menu items.
\r
1592 var cssPrefix; // Css prefix for the menu bar
\r
1593 var menuItemLayoutCss; // Css path for the menu items of this menu bar
\r
1594 var globalObjectIndex; // Global index of this object - used to refer to the object of this class outside
\r
1595 this.cssPrefix = 'DHTMLSuite_';
\r
1596 this.menuItemLayoutCss = false; // false = use default for the menuItem class.
\r
1597 // this.layoutCSS = 'menu-bar.css';
\r
1598 this.menuBarBackgroundImage = 'menu_strip_bg.jpg';
\r
1599 this.menuItem_objects = new Array();
\r
1600 DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
\r
1602 this.menuBarState = false;
\r
1604 this.menuBarObj = false;
\r
1605 this.menuBarHeight = 26;
\r
1606 this.submenuGroups = new Array();
\r
1607 this.submenuIframes = new Array();
\r
1608 this.targetId = false;
\r
1609 this.activeSubItemsOnMouseOver = false;
\r
1610 this.menuItemCssPrefix = false;
\r
1611 this.createIframesForOldIeBrowsers = false;
\r
1612 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
1621 DHTMLSuite.menuBar.prototype = {
\r
1625 * Initilizes the script
\r
1633 // DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
\r
1634 this.__createDivs(); // Create general divs
\r
1635 this.__createMenuItems(); // Create menu items
\r
1636 this.__setBasicEvents(); // Set basic events.
\r
1637 window.refToThismenuBar = this;
\r
1641 // {{{ setTarget()
\r
1643 * Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar.
\r
1645 * @param String targetId = Id of element where the menu will be inserted.
\r
1649 setTarget : function(targetId)
\r
1651 this.targetId = targetId;
\r
1656 // {{{ setLayoutCss()
\r
1658 * Specify the css file for this menu bar
\r
1660 * @param String layoutCSS = Name of new css file.
\r
1664 setLayoutCss : function(layoutCSS)
\r
1666 this.layoutCSS = layoutCSS;
\r
1671 // {{{ setMenuItemLayoutCss()
\r
1673 * Specify the css file for the menu items
\r
1675 * @param String layoutCSS = Name of new css file.
\r
1679 setMenuItemLayoutCss : function(layoutCSS)
\r
1681 this.menuItemLayoutCss = layoutCSS;
\r
1686 // {{{ setCreateIframesForOldIeBrowsers()
\r
1688 * This method specifies if you want to the script to create iframes behind sub menu groups in order to cover eventual select boxes. This
\r
1689 * 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
\r
1690 * of a select box.
\r
1692 * @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers.
\r
1696 setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers)
\r
1698 this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers;
\r
1703 // {{{ addMenuItems()
\r
1707 * @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data
\r
1711 addMenuItems : function(menuItemObj)
\r
1713 this.menuItemObj = menuItemObj;
\r
1714 this.menuItems = menuItemObj.getItems();
\r
1718 // {{{ setActiveSubItemsOnMouseOver()
\r
1720 * Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
\r
1722 * @param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
\r
1726 setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver)
\r
1728 this.activeSubItemsOnMouseOver = activateSubOnMouseOver;
\r
1732 // {{{ setMenuItemState()
\r
1734 * 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.
\r
1736 * @param Number menuItemId - ID of the menu item we want to switch state for
\r
1737 * @param String state - New state(example: "disabled")
\r
1741 setMenuItemState : function(menuItemId,state)
\r
1743 this.menuItem_objects[menuItemId].setState(state);
\r
1747 // {{{ setMenuItemCssPrefix()
\r
1749 * 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,
\r
1750 * 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
\r
1751 * with different stylings.
\r
1753 * @param String newCssPrefix - New css prefix for menu items.
\r
1757 setMenuItemCssPrefix : function(newCssPrefix)
\r
1759 this.menuItemCssPrefix = newCssPrefix;
\r
1763 // {{{ setCssPrefix()
\r
1765 * 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).
\r
1766 * 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
\r
1767 * this method. This is useful if you want to have two menus on the same page with different stylings.
\r
1769 * @param String newCssPrefix - New css prefix for the menu bar classes.
\r
1773 setCssPrefix : function(newCssPrefix)
\r
1775 this.cssPrefix = newCssPrefix;
\r
1779 // {{{ replaceSubMenus()
\r
1781 * This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as parentId)
\r
1784 * @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.
\r
1785 * @param menuModel newMenuModel - Reference to object of class menuModel
\r
1789 replaceMenuItems : function(parentId,newMenuModel)
\r
1791 this.hideSubMenus(); // Hide all sub menus
\r
1792 this.__deleteMenuItems(parentId); // Delete old menu items.
\r
1793 this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
\r
1794 this.__clearAllMenuItems();
\r
1795 this.__createMenuItems();
\r
1800 // {{{ deleteMenuItems()
\r
1802 * This method deletes menu items from the menu dynamically
\r
1804 * @param Number parentId - Parent id - where to append the new items.
\r
1805 * @param Boolean includeParent - Should parent element also be deleted, or only sub elements?
\r
1809 deleteMenuItems : function(parentId,includeParent)
\r
1811 this.hideSubMenus(); // Hide all sub menus
\r
1812 this.__deleteMenuItems(parentId,includeParent);
\r
1813 this.__clearAllMenuItems();
\r
1814 this.__createMenuItems();
\r
1818 // {{{ appendMenuItems()
\r
1820 * This method appends menu items to the menu dynamically
\r
1822 * @param Number parentId - Parent id - where to append the new items.
\r
1823 * @param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined parentId
\r
1827 appendMenuItems : function(parentId,newMenuModel)
\r
1829 this.hideSubMenus(); // Hide all sub menus
\r
1830 this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
\r
1831 this.__clearAllMenuItems();
\r
1832 this.__createMenuItems();
\r
1836 // {{{ hideMenuItem()
\r
1838 * This method doesn't delete menu items. it hides them only.
\r
1840 * @param Number id - Id of the item you want to hide.
\r
1844 hideMenuItem : function(id)
\r
1846 this.menuItem_objects[id].hide();
\r
1851 // {{{ showMenuItem()
\r
1853 * This method shows a menu item. If the item isn't hidden, nothing is done.
\r
1855 * @param Number id - Id of the item you want to show
\r
1859 showMenuItem : function(id)
\r
1861 this.menuItem_objects[id].show();
\r
1867 * Replace the text for a menu item
\r
1869 * @param Integer id - Id of menu item.
\r
1870 * @param String newText - New text for the menu item.
\r
1874 setText : function(id,newText)
\r
1876 this.menuItem_objects[id].setText(newText);
\r
1882 * Replace menu icon for a menu item.
\r
1884 * @param Integer id - Id of menu item.
\r
1885 * @param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item.
\r
1889 setIcon : function(id,newPath)
\r
1891 this.menuItem_objects[id].setIcon(newPath);
\r
1895 // {{{ __clearAllMenuItems()
\r
1897 * Delete HTML elements for all menu items.
\r
1901 __clearAllMenuItems : function()
\r
1903 for(var prop=0;prop<this.menuItemObj.menuItemsOrder.length;prop++){
\r
1904 var id = this.menuItemObj.menuItemsOrder[prop];
\r
1905 if(this.submenuGroups[id]){
\r
1906 this.submenuGroups[id].parentNode.removeChild(this.submenuGroups[id]);
\r
1907 this.submenuGroups[id] = false;
\r
1909 if(this.submenuIframes[id]){
\r
1910 this.submenuIframes[id].parentNode.removeChild(this.submenuIframes[id]);
\r
1911 this.submenuIframes[id] = false;
\r
1914 this.menuBarObj.innerHTML = '';
\r
1918 // {{{ __deleteMenuItems()
\r
1920 * This method deletes menu items from the menu, i.e. menu model and the div elements for these items.
\r
1922 * @param Number parentId - Parent id - where to start the delete process.
\r
1926 __deleteMenuItems : function(parentId,includeParent)
\r
1928 if(includeParent)this.menuItemObj.__deleteANode(parentId);
\r
1929 if(!this.submenuGroups[parentId])return; // No sub items exists.
\r
1930 this.menuItem_objects[parentId].__setHasSub(false); // Delete existing sub menu divs.
\r
1931 this.menuItemObj.__deleteChildNodes(parentId); // Delete existing child nodes from menu model
\r
1932 var groupBox = this.submenuGroups[parentId];
\r
1933 groupBox.parentNode.removeChild(groupBox); // Delete sub menu group box.
\r
1934 if(this.submenuIframes[parentId]){
\r
1935 this.submenuIframes[parentId].parentNode.removeChild(this.submenuIframes[parentId]);
\r
1937 this.submenuGroups.splice(parentId,1);
\r
1938 this.submenuIframes.splice(parentId,1);
\r
1942 // {{{ __changeMenuBarState()
\r
1944 * 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.
\r
1946 * @param Object obj - Reference to element triggering the action
\r
1950 __changeMenuBarState : function(){
\r
1951 var objectIndex = this.getAttribute('objectRef');
\r
1952 var obj = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[objectIndex];
\r
1953 var parentId = this.id.replace(/[^0-9]/gi,'');
\r
1954 var state = obj.menuItem_objects[parentId].getState();
\r
1955 if(state=='disabled')return;
\r
1956 obj.menuBarState = !obj.menuBarState;
\r
1957 if(!obj.menuBarState)obj.hideSubMenus();else{
\r
1958 obj.hideSubMenus();
\r
1959 obj.__expandGroup(parentId);
\r
1965 // {{{ __createDivs()
\r
1967 * Create the main HTML elements for this menu dynamically
\r
1972 __createDivs : function()
\r
1974 window.refTomenuBar = this; // Reference to menu strip object
\r
1976 this.menuBarObj = document.createElement('DIV');
\r
1977 this.menuBarObj.className = this.cssPrefix + 'menuBar_' + this.menuItemObj.submenuType[1];
\r
1979 if(!document.getElementById(this.targetId)){
\r
1980 alert('No target defined for the menu object');
\r
1983 // Appending menu bar object as a sub of defined target element.
\r
1984 var target = document.getElementById(this.targetId);
\r
1985 target.appendChild(this.menuBarObj);
\r
1988 // {{{ hideSubMenus()
\r
1990 * Deactivate all sub menus ( collapse and set state back to regular )
\r
1991 * In case you have a menu inside a scrollable container, call this method in an onscroll event for that element
\r
1992 * example document.getElementById('textContent').onscroll = menuBar.__hideSubMenus;
\r
1994 * @param Event e - this variable is present if this method is called from an event.
\r
1998 hideSubMenus : function(e)
\r
2000 if(this && this.tagName){ /* Method called from event */
\r
2001 if(document.all)e = event;
\r
2002 var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
\r
2003 if(srcEl.tagName.toLowerCase()=='img')srcEl = srcEl.parentNode;
\r
2004 if(srcEl.className && srcEl.className.indexOf('arrow')>=0){
\r
2008 for(var no=0;no<DHTMLSuite.variableStorage.menuBar_highlightedItems.length;no++){
\r
2009 DHTMLSuite.variableStorage.menuBar_highlightedItems[no].setState('regular'); // Set state back to regular
\r
2010 DHTMLSuite.variableStorage.menuBar_highlightedItems[no].__hideGroup(); // Hide eventual sub menus
\r
2012 DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
\r
2016 // {{{ __expandGroup()
\r
2018 * Expand a group of sub items.
\r
2019 * @param parentId - Id of parent element
\r
2023 __expandGroup : function(parentId)
\r
2026 var groupRef = this.submenuGroups[parentId];
\r
2027 var subDiv = groupRef.getElementsByTagName('DIV')[0];
\r
2029 var numericId = subDiv.id.replace(/[^0-9]/g,'');
\r
2031 groupRef.style.visibility='visible'; // Show menu group.
\r
2032 if(this.submenuIframes[parentId])this.submenuIframes[parentId].style.visibility = 'visible'; // Show iframe if it exists.
\r
2033 DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId];
\r
2034 this.__positionSubMenu(parentId);
\r
2036 if(DHTMLSuite.clientInfoObj.isOpera){ /* Opera fix in order to get correct height of sub menu group */
\r
2037 var subDiv = groupRef.getElementsByTagName('DIV')[0]; /* Find first menu item */
\r
2038 subDiv.className = subDiv.className.replace('_over','_over'); /* By "touching" the class of the menu item, we are able to fix a layout problem in Opera */
\r
2043 // {{{ __activateMenuElements()
\r
2045 * Traverse up the menu items and highlight them.
\r
2050 __activateMenuElements : function(inputObj,objectRef,firstIteration)
\r
2052 if(!this.menuBarState && !this.activeSubItemsOnMouseOver)return; // Menu is not activated and it shouldn't be activated on mouse over.
\r
2053 var numericId = inputObj.id.replace(/[^0-9]/g,''); // Get a numeric reference to current menu item.
\r
2055 var state = this.menuItem_objects[numericId].getState(); // Get state of this menu item.
\r
2056 if(state=='disabled')return; // This menu item is disabled - return from function without doing anything.
\r
2058 if(firstIteration && DHTMLSuite.variableStorage.menuBar_highlightedItems.length>0){
\r
2059 this.hideSubMenus(); // First iteration of this function=> Hide other sub menus.
\r
2061 // 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".
\r
2062 var newState = 'over';
\r
2063 if(!firstIteration)newState = 'active'; // State should be set to 'over' for the menu item the mouse is currently over.
\r
2065 this.menuItem_objects[numericId].setState(newState); // Switch state of menu item.
\r
2066 if(this.submenuGroups[numericId]){ // Sub menu group exists. call the __expandGroup method.
\r
2067 this.__expandGroup(numericId); // Expand sub menu group
\r
2069 DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId]; // Save this menu item in the array of highlighted elements.
\r
2070 if(objectRef.menuItems[numericId].parentId){ // A parent element exists. Call this method over again with parent element as input argument.
\r
2071 this.__activateMenuElements(objectRef.menuItem_objects[objectRef.menuItems[numericId].parentId].divElement,objectRef,false);
\r
2076 // {{{ __createMenuItems()
\r
2078 * Creates the HTML elements for the menu items.
\r
2083 __createMenuItems : function()
\r
2085 if(!this.globalObjectIndex)this.globalObjectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;;
\r
2086 var index = this.globalObjectIndex;
\r
2087 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index] = this;
\r
2089 // Find first child of the body element. trying to insert the element before first child instead of appending it to the <body> tag, ref: problems in ie
\r
2090 var firstChild = false;
\r
2091 var firstChilds = document.getElementsByTagName('DIV');
\r
2092 if(firstChilds.length>0)firstChild = firstChilds[0]
\r
2094 for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){ // Looping through menu items
\r
2095 var indexThis = this.menuItemObj.menuItemsOrder[no];
\r
2096 if(!this.menuItems[indexThis].id)continue;
\r
2097 this.menuItem_objects[this.menuItems[indexThis].id] = new DHTMLSuite.menuItem();
\r
2098 if(this.menuItemCssPrefix)this.menuItem_objects[this.menuItems[indexThis].id].setCssPrefix(this.menuItemCssPrefix); // Custom css prefix set
\r
2099 if(this.menuItemLayoutCss)this.menuItem_objects[this.menuItems[indexThis].id].setLayoutCss(this.menuItemLayoutCss); // Custom css file name
\r
2101 var ref = this.menuItem_objects[this.menuItems[indexThis].id].createItem(this.menuItems[indexThis]); // Create div for this menu item.
\r
2103 // Actiave sub elements when someone moves the mouse over the menu item - exception: not on separators.
\r
2104 if(!this.menuItems[indexThis].separator)DHTMLSuite.commonObj.addEvent(ref,"mouseover",function(){ DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].__activateMenuElements(this,DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index],true); });
\r
2106 if(this.menuItem_objects[this.menuItems[indexThis].id].expandElement){ /* Small arrow at the right of the menu item exists - expand subs */
\r
2107 var expandRef = this.menuItem_objects[this.menuItems[indexThis].id].expandElement; /* Creating reference to expand div/arrow div */
\r
2108 var parentId = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].menuItems[indexThis].parentId + ''; // Get parent id.
\r
2109 var tmpId = expandRef.id.replace(/[^0-9]/gi,'');
\r
2110 expandRef.setAttribute('objectRef',index); /* saving the index of this object in the DHTMLSuite.variableStorage array as a property of the tag - We need to do this in order to avoid circular references and thus memory leakage in IE */
\r
2111 expandRef.objectRef = index;
\r
2112 expandRef.onclick = this.__changeMenuBarState;
\r
2114 var target = this.menuBarObj; // Temporary variable - target of newly created menu item. target can be the main menu object or a sub menu group(see below where target is updated).
\r
2116 if(this.menuItems[indexThis].depth==1 && this.menuItemObj.submenuType[this.menuItems[indexThis].depth]!='top' && this.menuItemObj.mainMenuGroupWidth){ /* Main menu item group width set */
\r
2117 var tmpWidth = this.menuItemObj.mainMenuGroupWidth + '';
\r
2118 if(tmpWidth.indexOf('%')==-1)tmpWidth = tmpWidth + 'px';
\r
2119 target.style.width = tmpWidth;
\r
2122 if(this.menuItems[indexThis].depth=='1'){ /* Top level item */
\r
2123 if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='top'){ /* Type = "top" - menu items side by side */
\r
2124 ref.style.styleFloat = 'left';
\r
2125 ref.style.cssText = 'float:left';
\r
2128 if(!this.menuItems[indexThis].depth){
\r
2129 alert('Error in menu model(depth not defined for a menu item). Remember to call the init() method for the menuModel object.');
\r
2132 if(!this.submenuGroups[this.menuItems[indexThis].parentId]){ // Sub menu div doesn't exist - > Create it.
\r
2133 this.submenuGroups[this.menuItems[indexThis].parentId] = document.createElement('DIV');
\r
2134 this.submenuGroups[this.menuItems[indexThis].parentId].style.zIndex = 10000;
\r
2135 this.submenuGroups[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarSubGroup' + this.menuItems[indexThis].parentId;
\r
2136 this.submenuGroups[this.menuItems[indexThis].parentId].style.visibility = 'hidden'; // Initially hidden.
\r
2137 if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='sub')this.submenuGroups[this.menuItems[indexThis].parentId].className = this.cssPrefix + 'menuBar_sub';
\r
2139 firstChild.parentNode.insertBefore(this.submenuGroups[this.menuItems[indexThis].parentId],firstChild);
\r
2141 document.body.appendChild(this.submenuGroups[this.menuItems[indexThis].parentId]);
\r
2144 if(DHTMLSuite.clientInfoObj.isMSIE && this.createIframesForOldIeBrowsers){ // Create iframe object in order to conver select boxes in older IE browsers(windows).
\r
2145 this.submenuIframes[this.menuItems[indexThis].parentId] = document.createElement('<IFRAME src="about:blank" frameborder=0>');
\r
2146 this.submenuIframes[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarIframe_' + this.menuItems[indexThis].parentId;
\r
2147 this.submenuIframes[this.menuItems[indexThis].parentId].style.position = 'absolute';
\r
2148 this.submenuIframes[this.menuItems[indexThis].parentId].style.zIndex = 9000;
\r
2149 this.submenuIframes[this.menuItems[indexThis].parentId].style.visibility = 'hidden';
\r
2151 firstChild.parentNode.insertBefore(this.submenuIframes[this.menuItems[indexThis].parentId],firstChild);
\r
2153 document.body.appendChild(this.submenuIframes[this.menuItems[indexThis].parentId]);
\r
2157 target = this.submenuGroups[this.menuItems[indexThis].parentId]; // Change target of newly created menu item. It should be appended to the sub menu div("A group box").
\r
2159 target.appendChild(ref); // Append menu item to the document.
\r
2161 if(this.menuItems[indexThis].visible == false)this.hideMenuItem(this.menuItems[indexThis].id); // Menu item hidden, call the hideMenuItem method.
\r
2162 if(this.menuItems[indexThis].state != 'regular')this.menuItem_objects[this.menuItems[indexThis].id].setState(this.menuItems[indexThis].state); // Menu item hidden, call the hideMenuItem method.
\r
2167 this.__setSizeOfAllSubMenus(); // Set size of all sub menu groups
\r
2168 this.__positionAllSubMenus(); // Position all sub menu groups.
\r
2169 if(DHTMLSuite.clientInfoObj.isOpera)this.__fixLayoutOpera(); // Call a function which fixes some layout issues in Opera.
\r
2173 // {{{ __fixLayoutOpera()
\r
2175 * A method used to fix the menu layout in Opera.
\r
2180 __fixLayoutOpera : function()
\r
2182 for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){
\r
2183 var id = this.menuItemObj.menuItemsOrder[no];
\r
2185 this.menuItem_objects[id].divElement.className = this.menuItem_objects[id].divElement.className.replace('_regular','_regular'); // Nothing is done but by "touching" the class of the menu items in Opera, we make them appear correctly
\r
2191 // {{{ __setSizeOfAllSubMenus()
\r
2193 * * Walk through all sub menu groups and call the positioning method for each one of them.
\r
2198 __setSizeOfAllSubMenus : function()
\r
2200 for(var prop in this.submenuGroups){
\r
2201 this.__setSizeOfSubMenus(prop);
\r
2206 // {{{ __positionAllSubMenus()
\r
2208 * Walk through all sub menu groups and call the positioning method for each one of them.
\r
2213 __positionAllSubMenus : function()
\r
2215 for(var prop in this.submenuGroups){
\r
2216 this.__positionSubMenu(prop);
\r
2222 // {{{ __positionSubMenu(parentId)
\r
2224 * Position a sub menu group
\r
2226 * @param parentId
\r
2230 __positionSubMenu : function(parentId)
\r
2233 var shortRef = this.submenuGroups[parentId];
\r
2235 if( shortRef.style.visible == 'hidden' )
\r
2237 shortRef.style.display = 'none';
\r
2241 shortRef.style.display = 'block';
\r
2243 var depth = this.menuItems[parentId].depth;
\r
2244 var dir = this.menuItemObj.submenuType[depth];
\r
2246 shortRef.style.left = DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + 'px';
\r
2247 shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetHeight) + 'px';
\r
2249 var too_large = DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement)
\r
2250 + this.menuItem_objects[parentId].divElement.offsetWidth
\r
2251 + shortRef.offsetWidth
\r
2252 > $('#main_menu_div').width();
\r
2254 shortRef.style.left = (DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) - shortRef.offsetWidth) + 'px';
\r
2256 shortRef.style.left = (DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetWidth) + 'px';
\r
2257 shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement)) + 'px';
\r
2260 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
2261 var iframeRef = this.submenuIframes[parentId]
\r
2262 iframeRef.style.left = shortRef.style.left;
\r
2263 iframeRef.style.top = shortRef.style.top;
\r
2264 iframeRef.style.width = shortRef.clientWidth + 'px';
\r
2265 iframeRef.style.height = shortRef.clientHeight + 'px';
\r
2274 // {{{ __setSizeOfSubMenus(parentId)
\r
2276 * Set size of a sub menu group
\r
2278 * @param parentId
\r
2282 __setSizeOfSubMenus : function(parentId)
\r
2285 var shortRef = this.submenuGroups[parentId];
\r
2286 var subWidth = Math.max(shortRef.offsetWidth,this.menuItem_objects[parentId].divElement.offsetWidth);
\r
2287 if(this.menuItems[parentId].submenuWidth)subWidth = this.menuItems[parentId].submenuWidth;
\r
2288 subWidth = subWidth + '';
\r
2289 if(subWidth.indexOf('%')==-1)subWidth = subWidth + 'px';
\r
2290 shortRef.style.width = subWidth;
\r
2292 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
2293 this.submenuIframes[parentId].style.width = shortRef.style.width;
\r
2294 this.submenuIFrames[parentId].style.height = shortRef.style.height;
\r
2303 // {{{ __repositionMenu()
\r
2305 * Position menu items.
\r
2310 __repositionMenu : function(inputObj)
\r
2312 // self.status = this;
\r
2313 inputObj.menuBarObj.style.top = document.documentElement.scrollTop + 'px';
\r
2319 // {{{ __menuItemRollOver()
\r
2321 * Position menu items.
\r
2326 __menuItemRollOver : function(inputObj)
\r
2328 var numericId = inputObj.id.replace(/[^0-9]/g,'');
\r
2329 inputObj.className = 'DHTMLSuite_menuBar_menuItem_over_' + this.menuItems[numericId]['depth'];
\r
2333 // {{{ __menuItemRollOut()
\r
2335 * Position menu items.
\r
2340 __menuItemRollOut : function(inputObj)
\r
2342 var numericId = inputObj.id.replace(/[^0-9]/g,'');
\r
2343 inputObj.className = 'DHTMLSuite_menuBar_menuItem_' + this.menuItems[numericId]['depth'];
\r
2347 // {{{ __menuNavigate()
\r
2349 * Navigate by click on a menu item
\r
2354 __menuNavigate : function(inputObj)
\r
2356 var numericIndex = inputObj.id.replace(/[^0-9]/g,'');
\r
2357 var url = this.menuItems[numericIndex]['url'];
\r
2359 alert(this.menuItems[numericIndex]['url']);
\r
2364 unsetMenuBarState : function() { this.menuBarState = false },
\r
2365 changeMenuBarState: function (target) {
\r
2366 var parentId = target.id.replace(/[^0-9]/gi,'');
\r
2367 this.menuBarState = !this.menuBarState;
\r
2368 this.hideSubMenus();
\r
2369 if(this.menuBarState) {
\r
2370 this.__expandGroup(parentId);
\r
2373 // {{{ __setBasicEvents()
\r
2375 * Set basic events for the menu widget.
\r
2380 __setBasicEvents : function()
\r
2383 $('div.DHTMLSuite_menuBar_sub').click(function() { menu.hideSubMenus(); menu.unsetMenuBarState() });
\r
2384 $('div.DHTMLSuite_menuBar_top > div > div[objectref!="0"]').click(function() { menu.changeMenuBarState(this) });
\r
2385 $('div.DHTMLSuite_menuBar_top').click(function(e) {
\r
2386 if ($(e.target).attr('class') == 'DHTMLSuite_menuBar_top') { menu.hideSubMenus(); menu.unsetMenuBarState() }
\r
2388 $('#content').mousedown(function(){
\r
2389 menu.hideSubMenus();
\r
2390 menu.menuBarState = false;
\r
projects / kivitendo-erp.git / blob