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 while((inputObj = inputObj.offsetParent) != null){
\r
246 if(inputObj.tagName!='HTML'){
\r
247 returnValue += (inputObj.offsetTop - inputObj.scrollTop);
\r
248 if(document.all)returnValue+=inputObj.clientTop;
\r
251 return returnValue;
\r
255 // {{{ setCssCacheStatus()
\r
257 * Specify if css files should be cached or not.
\r
259 * @param Boolean cssCacheStatus = true = cache on, false = cache off
\r
263 setCssCacheStatus : function(cssCacheStatus)
\r
265 this.cssCacheStatus = cssCacheStatus;
\r
269 // {{{ getLeftPos()
\r
271 * This method will return the left coordinate(pixel) of an object
\r
273 * @param Object inputObj = Reference to HTML element
\r
276 getLeftPos : function(inputObj)
\r
278 var returnValue = inputObj.offsetLeft;
\r
279 while((inputObj = inputObj.offsetParent) != null){
\r
280 if(inputObj.tagName!='HTML'){
\r
281 returnValue += inputObj.offsetLeft;
\r
282 if(document.all)returnValue+=inputObj.clientLeft;
\r
285 return returnValue;
\r
289 // {{{ cancelEvent()
\r
292 * This function only returns false. It is used to cancel selections and drag
\r
298 cancelEvent : function()
\r
307 * This function adds an event listener to an element on the page.
\r
309 * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
\r
310 * @param String eventType = Which type of event, example "mousemove" or "mouseup"
\r
311 * @param functionName = Name of function to execute.
\r
315 addEvent : function(whichObject,eventType,functionName)
\r
317 if(whichObject.attachEvent){
\r
318 whichObject['e'+eventType+functionName] = functionName;
\r
319 whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
\r
320 whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
\r
322 whichObject.addEventListener(eventType,functionName,false);
\r
323 this.__addEventElement(whichObject);
\r
324 delete(whichObject);
\r
325 // whichObject = null;
\r
329 // {{{ removeEvent()
\r
332 * This function removes an event listener from an element on the page.
\r
334 * @param Object whichObject = Reference to HTML element(Which object to assigne the event)
\r
335 * @param String eventType = Which type of event, example "mousemove" or "mouseup"
\r
336 * @param functionName = Name of function to execute.
\r
340 removeEvent : function(whichObject,eventType,functionName)
\r
342 if(whichObject.detachEvent){
\r
343 whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]);
\r
344 whichObject[eventType+functionName] = null;
\r
346 whichObject.removeEventListener(eventType,functionName,false);
\r
349 // {{{ __clearGarbage()
\r
352 * This function is used for Internet Explorer in order to clear memory when the page unloads.
\r
357 __clearGarbage : function()
\r
359 /* Example of event which causes memory leakage in IE
\r
361 DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); })
\r
363 We got a circular reference.
\r
367 if(!DHTMLSuite.clientInfoObj.isMSIE)return;
\r
369 for(var no in DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects){
\r
370 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[no] = false;
\r
373 for(var no=0;no<DHTMLSuite.eventElements.length;no++){
\r
374 DHTMLSuite.eventElements[no].onclick = null;
\r
375 DHTMLSuite.eventElements[no].onmousedown = null;
\r
376 DHTMLSuite.eventElements[no].onmousemove = null;
\r
377 DHTMLSuite.eventElements[no].onmouseout = null;
\r
378 DHTMLSuite.eventElements[no].onmouseover = null;
\r
379 DHTMLSuite.eventElements[no].onmouseup = null;
\r
380 DHTMLSuite.eventElements[no].onfocus = null;
\r
381 DHTMLSuite.eventElements[no].onblur = null;
\r
382 DHTMLSuite.eventElements[no].onkeydown = null;
\r
383 DHTMLSuite.eventElements[no].onkeypress = null;
\r
384 DHTMLSuite.eventElements[no].onkeyup = null;
\r
385 DHTMLSuite.eventElements[no].onselectstart = null;
\r
386 DHTMLSuite.eventElements[no].ondragstart = null;
\r
387 DHTMLSuite.eventElements[no].oncontextmenu = null;
\r
388 DHTMLSuite.eventElements[no].onscroll = null;
\r
391 window.onunload = null;
\r
397 // {{{ __addEventElement()
\r
400 * Add element to garbage collection array. The script will loop through this array and remove event handlers onload in ie.
\r
405 __addEventElement : function(el)
\r
407 DHTMLSuite.eventElements[DHTMLSuite.eventElements.length] = el;
\r
411 // {{{ getSrcElement()
\r
414 * Returns a reference to the element which triggered an event.
\r
415 * @param Event e = Event object
\r
420 getSrcElement : function(e)
\r
423 // Dropped on which element
\r
424 if (e.target) el = e.target;
\r
425 else if (e.srcElement) el = e.srcElement;
\r
426 if (el.nodeType == 3) // defeat Safari bug
\r
427 el = el.parentNode;
\r
434 /************************************************************************************************************
\r
435 * Client info class
\r
437 * Created: August, 18th, 2006
\r
440 ************************************************************************************************************/
\r
444 * @class Purpose of class: Provide browser information to the classes below. Instead of checking for
\r
445 * browser versions and browser types in the classes below, they should check this
\r
446 * easily by referncing properties in the class below. An object("DHTMLSuite.clientInfoObj") of this
\r
447 * class will always be accessible to the other classes. * @version 1.0
\r
448 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
452 DHTMLSuite.clientInfo = function()
\r
454 var browser; // Complete user agent information
\r
456 var isOpera; // Is the browser "Opera"
\r
457 var isMSIE; // Is the browser "Internet Explorer"
\r
458 var isFirefox; // Is the browser "Firefox"
\r
459 var navigatorVersion; // Browser version
\r
462 DHTMLSuite.clientInfo.prototype = {
\r
467 * return value: none;
\r
473 * This method initializes the script
\r
481 this.browser = navigator.userAgent;
\r
482 this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;
\r
483 this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
\r
484 this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
\r
485 this.isSafari = (this.browser.toLowerCase().indexOf('safari')>=0)?true:false;
\r
486 this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
\r
491 /************************************************************************************************************
\r
492 * DHTML menu model item class
\r
494 * Created: October, 30th, 2006
\r
495 * @class Purpose of class: Save data about a menu item.
\r
501 ************************************************************************************************************/
\r
503 DHTMLSuite.menuModelItem = function()
\r
505 var id; // id of this menu item.
\r
506 var itemText; // Text for this menu item
\r
507 var itemIcon; // Icon for this menu item.
\r
508 var url; // url when click on this menu item
\r
509 var parentId; // id of parent element
\r
510 var separator; // is this menu item a separator
\r
511 var jsFunction; // Js function to call onclick
\r
512 var depth; // Depth of this menu item.
\r
513 var hasSubs; // Does this menu item have sub items.
\r
514 var type; // Menu item type - possible values: "top" or "sub".
\r
515 var helpText; // Help text for this item - appear when you move your mouse over the item.
\r
517 var submenuWidth; // Width of sub menu items.
\r
518 var visible; // Visibility of menu item.
\r
521 this.state = 'regular';
\r
524 DHTMLSuite.menuModelItem.prototype = {
\r
526 setMenuVars : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget)
\r
529 this.itemText = itemText;
\r
530 this.itemIcon = itemIcon;
\r
532 this.parentId = parentId;
\r
533 this.jsFunction = jsFunction;
\r
534 this.separator = false;
\r
535 this.depth = false;
\r
536 this.hasSubs = false;
\r
537 this.helpText = helpText;
\r
538 this.submenuWidth = submenuWidth;
\r
539 this.visible = true;
\r
540 this.frameTarget = frameTarget;
\r
542 if(this.parentId)this.type = 'top'; else this.type='sub';
\r
543 }else this.type = type;
\r
551 * Update the state attribute of a menu item.
\r
553 * @param String newState New state of this item
\r
556 setAsSeparator : function(id,parentId)
\r
559 this.parentId = parentId;
\r
560 this.separator = true;
\r
561 this.visible = true;
\r
562 if(this.parentId)this.type = 'top'; else this.type='sub';
\r
568 * Update the visible attribute of a menu item.
\r
570 * @param Boolean visible true = visible, false = hidden.
\r
573 setVisibility : function(visible)
\r
575 this.visible = visible;
\r
581 * Return the state attribute of a menu item.
\r
585 getState : function()
\r
593 * Update the state attribute of a menu item.
\r
595 * @param String newState New state of this item
\r
598 setState : function(newState)
\r
600 this.state = newState;
\r
604 // {{{ setSubMenuWidth()
\r
606 * Specify width of direct subs of this item.
\r
608 * @param int newWidth Width of sub menu group(direct sub of this item)
\r
611 setSubMenuWidth : function(newWidth)
\r
613 this.submenuWidth = newWidth;
\r
619 * Specify new menu icon
\r
621 * @param String iconPath Path to new menu icon
\r
624 setIcon : function(iconPath)
\r
626 this.itemIcon = iconPath;
\r
632 * Specify new text for the menu item.
\r
634 * @param String newText New text for the menu item.
\r
637 setText : function(newText)
\r
639 this.itemText = newText;
\r
643 /************************************************************************************************************
\r
644 * DHTML menu model class
\r
646 * Created: October, 30th, 2006
\r
647 * @class Purpose of class: Saves menu item data
\r
650 * Demos of this class: demo-menu-strip.html
\r
654 ************************************************************************************************************/
\r
659 * @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
661 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
665 DHTMLSuite.menuModel = function()
\r
667 var menuItems; // Array of menuModelItem objects
\r
668 var menuItemsOrder; // This array is needed in order to preserve the correct order of the array above. the array above is associative
\r
669 // And some browsers will loop through that array in different orders than Firefox and IE.
\r
670 var submenuType; // Direction of menu items(one item for each depth)
\r
671 var mainMenuGroupWidth; // Width of menu group - useful if the first group of items are listed below each other
\r
672 this.menuItems = new Array();
\r
673 this.menuItemsOrder = new Array();
\r
674 this.submenuType = new Array();
\r
675 this.submenuType[1] = 'top';
\r
676 for(var no=2;no<20;no++){
\r
677 this.submenuType[no] = 'sub';
\r
679 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
682 DHTMLSuite.menuModel.prototype = {
\r
685 * Add separator (special type of menu item)
\r
689 * @param int id of menu item
\r
690 * @param string itemText = text of menu item
\r
691 * @param string itemIcon = file name of menu icon(in front of menu text. Path will be imagePath for the DHTMLSuite + file name)
\r
692 * @param string url = Url of menu item
\r
693 * @param int parent id of menu item
\r
694 * @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
695 * 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
696 * the element triggering the context menu is sent as second argument to this function.
\r
700 addItem : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth)
\r
702 if(!id)id = this.__getUniqueId(); // id not present - create it dynamically.
\r
703 this.menuItems[id] = new DHTMLSuite.menuModelItem();
\r
704 this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth);
\r
705 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
706 return this.menuItems[id];
\r
709 // {{{ addItemsFromMarkup()
\r
711 * This method creates all the menuModelItem objects by reading it from existing markup on your page.
\r
712 * Example of HTML markup:
\r
714 <ul id="menuModel">
\r
715 <br> <li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
\r
716 <br> <ul width="150">
\r
717 <br> <li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
\r
718 <br> <li id="500002"><a href="#">Save As</a></li>
\r
719 <br> <li id="500004" itemType="separator"></li>
\r
720 <br> <li id="500003"><a href="#">Open</a></li>
\r
721 <br> </ul>
\r
722 <br> </li>
\r
723 <br> <li id="50001"><a href="#">View</a>
\r
724 <br> <ul width="130">
\r
725 <br> <li id="500011"><a href="#">Source</a></li>
\r
726 <br> <li id="500012"><a href="#">Debug info</a></li>
\r
727 <br> <li id="500013"><a href="#">Layout</a>
\r
728 <br> <ul width="150">
\r
729 <br> <li id="5000131"><a href="#">CSS</a>
\r
730 <br> <li id="5000132"><a href="#">HTML</a>
\r
731 <br> <li id="5000133"><a href="#">Javascript</a>
\r
732 <br> </ul>
\r
733 <br> </li>
\r
734 <br>
\r
735 <br> </ul>
\r
736 <br> </li>
\r
737 <br> <li id="50003" itemType="separator"></li>
\r
738 <br> <li id="50002"><a href="#">Tools</a></li>
\r
739 <br> </ul>
\r
741 * @param String ulId = ID of <UL> tag on your page.
\r
745 addItemsFromMarkup : function(ulId)
\r
747 if(!document.getElementById(ulId)){
\r
748 alert('<UL> tag with id ' + ulId + ' does not exist');
\r
751 var ulObj = document.getElementById(ulId);
\r
752 var liTags = ulObj.getElementsByTagName('LI');
\r
753 for(var no=0;no<liTags.length;no++){ // Walking through all <li> tags in the <ul> tree
\r
755 var id = liTags[no].id.replace(/[^0-9]/gi,''); // Get id of item.
\r
756 if(!id)id = this.__getUniqueId();
\r
757 this.menuItems[id] = new DHTMLSuite.menuModelItem(); // Creating new menuModelItem object
\r
758 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
759 // Get the attributes for this new menu item.
\r
761 var parentId = 0; // Default parent id
\r
762 if(liTags[no].parentNode!=ulObj)parentId = liTags[no].parentNode.parentNode.id; // parent node exists, set parentId equal to id of parent <li>.
\r
764 /* Checking type */
\r
765 var type = liTags[no].getAttribute('itemType');
\r
766 if(!type)type = liTags[no].itemType;
\r
767 if(type=='separator'){ // Menu item of type "separator"
\r
768 this.menuItems[id].setAsSeparator(id,parentId);
\r
771 if(parentId)type='sub'; else type = 'top';
\r
773 var aTag = liTags[no].getElementsByTagName('A')[0]; // Get a reference to sub <a> tag
\r
777 if(aTag)var itemText = aTag.innerHTML; // Item text is set to the innerHTML of the <a> tag.
\r
778 var itemIcon = liTags[no].getAttribute('itemIcon'); // Item icon is set from the itemIcon attribute of the <li> tag.
\r
779 var url = aTag.href; // url is set to the href attribute of the <a> tag
\r
780 if(url=='#' || url.substr(url.length-1,1)=='#')url=''; // # = empty url.
\r
781 var frameTarget = aTag.target;
\r
783 var jsFunction = liTags[no].getAttribute('jsFunction'); // jsFunction is set from the jsFunction attribute of the <li> tag.
\r
785 var submenuWidth = false; // Not set from the <li> tag.
\r
786 var helpText = aTag.getAttribute('title');
\r
787 if(!helpText)helpText = aTag.title;
\r
789 this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget);
\r
791 var subUls = ulObj.getElementsByTagName('UL');
\r
792 for(var no=0;no<subUls.length;no++){
\r
793 var width = subUls[no].getAttribute('width');
\r
794 if(!width)width = subUls[no].width;
\r
796 var id = subUls[no].parentNode.id.replace(/[^0-9]/gi,'');
\r
797 this.setSubMenuWidth(id,width);
\r
800 ulObj.style.display='none';
\r
805 // {{{ setSubMenuWidth()
\r
807 * 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
809 * @param int id = ID of parent menu item
\r
810 * @param String newWidth = Width of sub menu items.
\r
813 setSubMenuWidth : function(id,newWidth)
\r
815 this.menuItems[id].setSubMenuWidth(newWidth);
\r
818 // {{{ setMainMenuGroupWidth()
\r
820 * Add separator (special type of menu item)
\r
822 * @param String newWidth = Size of a menu group
\r
823 * @param int parent id of menu item
\r
826 setMainMenuGroupWidth : function(newWidth)
\r
828 this.mainMenuGroupWidth = newWidth;
\r
831 // {{{ addSeparator()
\r
833 * Add separator (special type of menu item)
\r
835 * @param int parent id of menu item
\r
838 addSeparator : function(parentId)
\r
840 id = this.__getUniqueId(); // Get unique id
\r
841 if(!parentId)parentId = 0;
\r
842 this.menuItems[id] = new DHTMLSuite.menuModelItem();
\r
843 this.menuItems[id].setAsSeparator(id,parentId);
\r
844 this.menuItemsOrder[this.menuItemsOrder.length] = id;
\r
845 return this.menuItems[id];
\r
850 * Initilizes the menu model. This method should be called when all items has been added to the model.
\r
857 this.__getDepths();
\r
858 this.__setHasSubs();
\r
863 // {{{ setMenuItemVisibility()
\r
865 * Save visibility of a menu item.
\r
867 * @param int id = Id of menu item..
\r
868 * @param Boolean visible = Visibility of menu item.
\r
872 setMenuItemVisibility : function(id,visible)
\r
874 this.menuItems[id].setVisibility(visible);
\r
878 // {{{ setSubMenuType()
\r
880 * Set menu type for a specific menu depth.
\r
882 * @param int depth = 1 = Top menu, 2 = Sub level 1...
\r
883 * @param String newType = New menu type(possible values: "top" or "sub")
\r
887 setSubMenuType : function(depth,newType)
\r
889 this.submenuType[depth] = newType;
\r
894 // {{{ __getDepths()
\r
896 * Create variable for the depth of each menu item.
\r
901 getItems : function(parentId,returnArray)
\r
903 if(!parentId)return this.menuItems;
\r
904 if(!returnArray)returnArray = new Array();
\r
905 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
906 var id = this.menuItemsOrder[no];
\r
908 if(this.menuItems[id].parentId==parentId){
\r
909 returnArray[returnArray.length] = this.menuItems[id];
\r
910 if(this.menuItems[id].hasSubs)return this.getItems(this.menuItems[id].id,returnArray);
\r
913 return returnArray;
\r
918 // {{{ __getUniqueId()
\r
920 * 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
925 __getUniqueId : function()
\r
927 var num = Math.random() + '';
\r
928 num = num.replace('.','');
\r
931 while(this.menuItems[num]){
\r
932 num = Math.random() + '';
\r
933 num = num.replace('.','');
\r
940 // {{{ __getDepths()
\r
942 * Create variable for the depth of each menu item.
\r
947 __getDepths : function()
\r
949 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
950 var id = this.menuItemsOrder[no];
\r
952 this.menuItems[id].depth = 1;
\r
953 if(this.menuItems[id].parentId){
\r
954 this.menuItems[id].depth = this.menuItems[this.menuItems[id].parentId].depth+1;
\r
957 this.menuItems[id].type = this.submenuType[this.menuItems[id].depth]; // Save menu direction for this menu item.
\r
962 // {{{ __setHasSubs()
\r
964 * Create variable for the depth of each menu item.
\r
969 __setHasSubs : function()
\r
971 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
972 var id = this.menuItemsOrder[no];
\r
974 if(this.menuItems[id].parentId){
\r
975 this.menuItems[this.menuItems[id].parentId].hasSubs = 1;
\r
984 * Does a menu item have sub elements ?
\r
990 __hasSubs : function(id)
\r
992 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
993 var id = this.menuItemsOrder[no];
\r
995 if(this.menuItems[id].parentId==id)return true;
\r
1001 // {{{ __deleteChildNodes()
\r
1003 * Deleting child nodes of a specific parent id
\r
1005 * @param int parentId
\r
1010 __deleteChildNodes : function(parentId,recursive)
\r
1012 var itemsToDeleteFromOrderArray = new Array();
\r
1013 for(var prop=0;prop<this.menuItemsOrder.length;prop++){
\r
1014 var id = this.menuItemsOrder[prop];
\r
1017 if(this.menuItems[id].parentId==parentId && parentId){
\r
1018 this.menuItems[id] = false;
\r
1019 itemsToDeleteFromOrderArray[itemsToDeleteFromOrderArray.length] = id;
\r
1020 this.__deleteChildNodes(id,true); // Recursive call.
\r
1025 for(var prop=0;prop<itemsToDeleteFromOrderArray;prop++){
\r
1026 if(!itemsToDeleteFromOrderArray[prop])continue;
\r
1027 this.__deleteItemFromItemOrderArray(itemsToDeleteFromOrderArray[prop]);
\r
1030 this.__setHasSubs();
\r
1034 // {{{ __deleteANode()
\r
1036 * Deleting a specific node from the menu model
\r
1038 * @param int id = Id of node to delete.
\r
1043 __deleteANode : function(id)
\r
1045 this.menuItems[id] = false;
\r
1046 this.__deleteItemFromItemOrderArray(id);
\r
1049 // {{{ __deleteItemFromItemOrderArray()
\r
1051 * Deleting a specific node from the menuItemsOrder array(The array controlling the order of the menu items).
\r
1053 * @param int id = Id of node to delete.
\r
1058 __deleteItemFromItemOrderArray : function(id)
\r
1060 for(var no=0;no<this.menuItemsOrder.length;no++){
\r
1061 var tmpId = this.menuItemsOrder[no];
\r
1062 if(!tmpId)continue;
\r
1063 if(this.menuItemsOrder[no]==id){
\r
1064 this.menuItemsOrder.splice(no,1);
\r
1072 // {{{ __appendMenuModel()
\r
1074 * Replace the sub items of a menu item with items from a new menuModel.
\r
1076 * @param menuModel newModel = An object of class menuModel - the items of this menu model will be appended to the existing menu items.
\r
1077 * @param Int parentId = Id of parent element of the appended items.
\r
1082 __appendMenuModel : function(newModel,parentId)
\r
1084 if(!newModel)return;
\r
1085 var items = newModel.getItems();
\r
1086 for(var no=0;no<newModel.menuItemsOrder.length;no++){
\r
1087 var id = newModel.menuItemsOrder[no];
\r
1089 if(!items[id].parentId)items[id].parentId = parentId;
\r
1090 this.menuItems[id] = items[id];
\r
1091 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
1092 if(!this.menuItemsOrder[no2])continue;
\r
1093 if(this.menuItemsOrder[no2]==items[id].id){
\r
1094 this.menuItemsOrder.splice(no2,1);
\r
1097 this.menuItemsOrder[this.menuItemsOrder.length] = items[id].id;
\r
1099 this.__getDepths();
\r
1100 this.__setHasSubs();
\r
1105 /* Class for menu items - a view */
\r
1107 /************************************************************************************************************
\r
1108 * DHTML menu item class
\r
1110 * Created: October, 21st, 2006
\r
1111 * @class Purpose of class: Creates the HTML for a single menu item.
\r
1113 * Css files used by this script: menu-item.css
\r
1115 * Demos of this class: demo-menu-strip.html
\r
1119 ************************************************************************************************************/
\r
1123 * @class Purpose of class: Creates the div(s) for a menu item. This class is used by the menuBar class. You can
\r
1124 * also create a menu item and add it where you want on your page. the createItem() method will return the div
\r
1125 * for the item. You can use the appendChild() method to add it to your page.
\r
1128 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
1132 DHTMLSuite.menuItem = function()
\r
1135 var divElement; // the <div> element created for this menu item
\r
1136 var expandElement; // Reference to the arrow div (expand sub items)
\r
1137 var cssPrefix; // Css prefix for the menu items.
\r
1138 var modelItemRef; // Reference to menuModelItem
\r
1140 this.layoutCSS = 'menu-item.css';
\r
1141 this.cssPrefix = 'DHTMLSuite_';
\r
1143 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
1147 this.objectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;
\r
1152 DHTMLSuite.menuItem.prototype =
\r
1156 * Create a menu item.
\r
1158 * @param menuModelItem menuModelItemObj = An object of class menuModelItem
\r
1160 createItem : function(menuModelItemObj)
\r
1162 DHTMLSuite.commonObj.loadCSS(this.layoutCSS); // Load css
\r
1164 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[this.objectIndex] = this;
\r
1166 this.modelItemRef = menuModelItemObj;
\r
1167 this.divElement = document.createElement('DIV'); // Create main div
\r
1168 this.divElement.id = 'DHTMLSuite_menuItem' + menuModelItemObj.id; // Giving this menu item it's unque id
\r
1169 this.divElement.className = this.cssPrefix + 'menuItem_' + menuModelItemObj.type + '_regular';
\r
1170 this.divElement.onselectstart = function() { return DHTMLSuite.commonObj.cancelEvent(false,this) };
\r
1171 if(menuModelItemObj.helpText){ // Add "title" attribute to the div tag if helpText is defined
\r
1172 this.divElement.title = menuModelItemObj.helpText;
\r
1175 // Menu item of type "top"
\r
1176 if(menuModelItemObj.type=='top'){
\r
1177 this.__createMenuElementsOfTypeTop(this.divElement);
\r
1180 if(menuModelItemObj.type=='sub'){
\r
1181 this.__createMenuElementsOfTypeSub(this.divElement);
\r
1184 if(menuModelItemObj.separator){
\r
1185 this.divElement.className = this.cssPrefix + 'menuItem_separator_' + menuModelItemObj.type;
\r
1186 this.divElement.innerHTML = '<span></span>';
\r
1189 var tmpVar = this.objectIndex/1;
\r
1190 //this.divElement.onclick = function(e) { DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[tmpVar].__navigate(e); }
\r
1191 this.divElement.onmousedown = this.__clickMenuItem; // on mouse down effect
\r
1192 this.divElement.onmouseup = this.__rolloverMenuItem; // on mouse up effect
\r
1193 this.divElement.onmouseover = this.__rolloverMenuItem; // mouse over effect
\r
1194 this.divElement.onmouseout = this.__rolloutMenuItem; // mouse out effect.
\r
1195 DHTMLSuite.commonObj.__addEventElement(this.divElement);
\r
1197 return this.divElement;
\r
1201 // {{{ setLayoutCss()
\r
1203 * Creates the different parts of a menu item of type "top".
\r
1205 * @param String newLayoutCss = Name of css file used for the menu items.
\r
1209 setLayoutCss : function(newLayoutCss)
\r
1211 this.layoutCSS = newLayoutCss;
\r
1216 // {{{ __createMenuElementsOfTypeTop()
\r
1218 * Creates the different parts of a menu item of type "top".
\r
1220 * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
\r
1221 * @param Object parentEl = Reference to parent element
\r
1225 __createMenuElementsOfTypeTop : function(parentEl){
\r
1226 if(this.modelItemRef.itemIcon){
\r
1227 var iconDiv = document.createElement('DIV');
\r
1228 iconDiv.innerHTML = '<img src="' + this.modelItemRef.itemIcon + '">';
\r
1229 iconDiv.id = 'menuItemIcon' + this.modelItemRef.id
\r
1230 parentEl.appendChild(iconDiv);
\r
1232 if(this.modelItemRef.itemText){
\r
1233 var div = document.createElement('DIV');
\r
1234 div.innerHTML = this.modelItemRef.itemText;
\r
1235 div.className = this.cssPrefix + 'menuItem_textContent';
\r
1236 div.id = 'menuItemText' + this.modelItemRef.id;
\r
1237 parentEl.appendChild(div);
\r
1239 /* Create div for the arrow -> Show sub items */
\r
1240 var div = document.createElement('DIV');
\r
1241 div.className = this.cssPrefix + 'menuItem_top_arrowShowSub';
\r
1242 div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
\r
1243 parentEl.appendChild(div);
\r
1244 this.expandElement = div;
\r
1245 if(!this.modelItemRef.hasSubs)div.style.display='none';
\r
1251 // {{{ __createMenuElementsOfTypeSub()
\r
1253 * Creates the different parts of a menu item of type "sub".
\r
1255 * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
\r
1256 * @param Object parentEl = Reference to parent element
\r
1260 __createMenuElementsOfTypeSub : function(parentEl){
\r
1261 if(this.modelItemRef.itemIcon){
\r
1262 parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')';
\r
1263 parentEl.style.backgroundRepeat = 'no-repeat';
\r
1264 parentEl.style.backgroundPosition = 'left center';
\r
1266 if(this.modelItemRef.itemText){
\r
1268 if( this.modelItemRef.url )
\r
1270 div = document.createElement('a');
\r
1271 div.href = this.modelItemRef.url;
\r
1272 div.target = this.modelItemRef.frameTarget;
\r
1273 div.style.display = 'block';
\r
1276 div = document.createElement('div');
\r
1278 div.className = 'DHTMLSuite_textContent';
\r
1279 div.innerHTML = this.modelItemRef.itemText;
\r
1280 div.className = this.cssPrefix + 'menuItem_textContent';
\r
1281 div.id = 'menuItemText' + this.modelItemRef.id;
\r
1282 parentEl.appendChild(div);
\r
1285 /* Create div for the arrow -> Show sub items */
\r
1286 var div = document.createElement('DIV');
\r
1287 div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub';
\r
1288 parentEl.appendChild(div);
\r
1289 div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
\r
1290 this.expandElement = div;
\r
1292 if(!this.modelItemRef.hasSubs){
\r
1293 div.style.display='none';
\r
1295 div.previousSibling.style.paddingRight = '15px';
\r
1300 // {{{ setCssPrefix()
\r
1302 * 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
1304 * @param String cssPrefix = New css prefix.
\r
1308 setCssPrefix : function(cssPrefix)
\r
1310 this.cssPrefix = cssPrefix;
\r
1314 // {{{ setMenuIcon()
\r
1316 * Replace menu icon.
\r
1318 * @param String newPath - Path to new icon (false if no icon);
\r
1322 setIcon : function(newPath)
\r
1324 this.modelItemRef.setIcon(newPath);
\r
1325 if(this.modelItemRef.type=='top'){ // Menu item is of type "top"
\r
1326 var div = document.getElementById('menuItemIcon' + this.modelItemRef.id); // Get a reference to the div where the icon is located.
\r
1327 var img = div.getElementsByTagName('IMG')[0]; // Find the image
\r
1328 if(!img){ // Image doesn't exists ?
\r
1329 img = document.createElement('IMG'); // Create new image
\r
1330 div.appendChild(img);
\r
1332 img.src = newPath; // Set image path
\r
1333 if(!newPath)img.parentNode.removeChild(img); // No newPath defined, remove the image.
\r
1335 if(this.modelItemRef.type=='sub'){ // Menu item is of type "sub"
\r
1336 this.divElement.style.backgroundImage = 'url(\'' + newPath + '\')'; // Set backgroundImage for the main div(i.e. menu item div)
\r
1343 * Replace the text of a menu item
\r
1345 * @param String newText - New text for the menu item.
\r
1349 setText : function(newText)
\r
1351 this.modelItemRef.setText(newText);
\r
1352 document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText;
\r
1359 // {{{ __clickMenuItem()
\r
1361 * Effect - click on menu item
\r
1366 __clickMenuItem : function()
\r
1368 this.className = this.className.replace('_regular','_click');
\r
1369 this.className = this.className.replace('_over','_click');
\r
1373 // {{{ __rolloverMenuItem()
\r
1375 * Roll over effect
\r
1380 __rolloverMenuItem : function()
\r
1382 this.className = this.className.replace('_regular','_over');
\r
1383 this.className = this.className.replace('_click','_over');
\r
1387 // {{{ __rolloutMenuItem()
\r
1394 __rolloutMenuItem : function()
\r
1396 this.className = this.className.replace('_over','_regular');
\r
1403 * Set state of a menu item.
\r
1405 * @param String newState = New state for the menu item
\r
1409 setState : function(newState)
\r
1411 this.divElement.className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState;
\r
1412 this.modelItemRef.setState(newState);
\r
1418 * Return state of a menu item.
\r
1423 getState : function()
\r
1425 var state = this.modelItemRef.getState();
\r
1427 if(this.divElement.className.indexOf('_over')>=0)state = 'over';
\r
1428 if(this.divElement.className.indexOf('_click')>=0)state = 'click';
\r
1429 this.modelItemRef.setState(state);
\r
1435 // {{{ __setHasSub()
\r
1437 * Update the item, i.e. show/hide the arrow if the element has subs or not.
\r
1442 __setHasSub : function(hasSubs)
\r
1444 this.modelItemRef.hasSubs = hasSubs;
\r
1446 document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none';
\r
1448 document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block';
\r
1455 * Hide the menu item.
\r
1462 this.modelItemRef.setVisibility(false);
\r
1463 this.divElement.style.display='none';
\r
1468 * Show the menu item.
\r
1475 this.modelItemRef.setVisibility(true);
\r
1476 this.divElement.style.display='block';
\r
1480 // {{{ __hideGroup()
\r
1482 * 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
1487 __hideGroup : function()
\r
1489 if(this.modelItemRef.parentId){
\r
1490 this.divElement.parentNode.style.visibility='hidden';
\r
1491 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
1493 var tmpId = this.divElement.parentNode.id.replace(/[^0-9]/gi,'');
\r
1494 document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden';
\r
1496 // IFRAME hasn't been created.
\r
1504 // {{{ __navigate()
\r
1506 * Navigate after click on a menu item.
\r
1511 __navigate : function(e)
\r
1513 /* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */
\r
1514 if(document.all)e = event;
\r
1516 var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
\r
1517 if(srcEl.id.indexOf('arrow')>=0)return;
\r
1519 if(this.modelItemRef.state=='disabled')return;
\r
1520 if(this.modelItemRef.url){
\r
1521 if (this.modelItemRef.frameTarget == 'main_window')
\r
1522 window.main_window.location = this.modelItemRef.url;
\r
1523 else if (this.modelItemRef.frameTarget == '_top')
\r
1524 window.location = this.modelItemRef.url;
\r
1525 else if (this.modelItemRef.frameTarget)
\r
1526 window.open(this.modelItemRef.url);
\r
1528 location.href = this.modelItemRef.url;
\r
1530 if(this.modelItemRef.jsFunction){
\r
1532 eval(this.modelItemRef.jsFunction);
\r
1534 alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed');
\r
1541 /************************************************************************************************************
\r
1542 * DHTML menu bar class
\r
1544 * Created: October, 21st, 2006
\r
1545 * @class Purpose of class: Creates a top bar menu
\r
1547 * Css files used by this script: menu-bar.css
\r
1549 * Demos of this class: demo-menu-bar.html
\r
1553 ************************************************************************************************************/
\r
1558 * @class Purpose of class: Creates a top bar menu strip. Demos: <br>
\r
1560 * <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
1561 * <li>(<a href="../../demos/demo-menu-bar.html" target="_blank">Demo with lots of menus on the same page</a>)</li>
\r
1562 * <li>(<a href="../../demos/demo-menu-bar-custom-css.html" target="_blank">Two menus with different layout</a>)</li>
\r
1563 * <li>(<a href="../../demos/demo-menu-bar-custom-css-file.html" target="_blank">One menu with custom layout/css.</a>)</li>
\r
1566 * <a href="../images/menu-bar-1.gif" target="_blank">Image describing the classes</a> <br><br>
\r
1569 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
\r
1572 DHTMLSuite.menuBar = function()
\r
1575 var layoutCSS; // Name of css file
\r
1576 var menuBarBackgroundImage; // Name of background image
\r
1577 var menuItem_objects; // Array of menu items - html elements.
\r
1578 var menuBarObj; // Reference to the main dib
\r
1579 var menuBarHeight;
\r
1580 var menuItems; // Reference to objects of class menuModelItem
\r
1581 var highlightedItems; // Array of currently highlighted menu items.
\r
1582 var menuBarState; // Menu bar state - true or false - 1 = expand items on mouse over
\r
1583 var activeSubItemsOnMouseOver; // Activate sub items on mouse over (instead of onclick)
\r
1586 var submenuGroups; // Array of div elements for the sub menus
\r
1587 var submenuIframes; // Array of sub menu iframes used to cover select boxes in old IE browsers.
\r
1588 var createIframesForOldIeBrowsers; // true if we want the script to create iframes in order to cover select boxes in older ie browsers.
\r
1589 var targetId; // Id of element where the menu will be inserted.
\r
1590 var menuItemCssPrefix; // Css prefix of menu items.
\r
1591 var cssPrefix; // Css prefix for the menu bar
\r
1592 var menuItemLayoutCss; // Css path for the menu items of this menu bar
\r
1593 var globalObjectIndex; // Global index of this object - used to refer to the object of this class outside
\r
1594 this.cssPrefix = 'DHTMLSuite_';
\r
1595 this.menuItemLayoutCss = false; // false = use default for the menuItem class.
\r
1596 this.layoutCSS = 'menu-bar.css';
\r
1597 this.menuBarBackgroundImage = 'menu_strip_bg.jpg';
\r
1598 this.menuItem_objects = new Array();
\r
1599 DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
\r
1601 this.menuBarState = false;
\r
1603 this.menuBarObj = false;
\r
1604 this.menuBarHeight = 26;
\r
1605 this.submenuGroups = new Array();
\r
1606 this.submenuIframes = new Array();
\r
1607 this.targetId = false;
\r
1608 this.activeSubItemsOnMouseOver = false;
\r
1609 this.menuItemCssPrefix = false;
\r
1610 this.createIframesForOldIeBrowsers = false;
\r
1611 if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
\r
1620 DHTMLSuite.menuBar.prototype = {
\r
1624 * Initilizes the script
\r
1632 DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
\r
1633 this.__createDivs(); // Create general divs
\r
1634 this.__createMenuItems(); // Create menu items
\r
1635 this.__setBasicEvents(); // Set basic events.
\r
1636 window.refToThismenuBar = this;
\r
1640 // {{{ setTarget()
\r
1642 * Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar.
\r
1644 * @param String targetId = Id of element where the menu will be inserted.
\r
1648 setTarget : function(targetId)
\r
1650 this.targetId = targetId;
\r
1655 // {{{ setLayoutCss()
\r
1657 * Specify the css file for this menu bar
\r
1659 * @param String layoutCSS = Name of new css file.
\r
1663 setLayoutCss : function(layoutCSS)
\r
1665 this.layoutCSS = layoutCSS;
\r
1670 // {{{ setMenuItemLayoutCss()
\r
1672 * Specify the css file for the menu items
\r
1674 * @param String layoutCSS = Name of new css file.
\r
1678 setMenuItemLayoutCss : function(layoutCSS)
\r
1680 this.menuItemLayoutCss = layoutCSS;
\r
1685 // {{{ setCreateIframesForOldIeBrowsers()
\r
1687 * 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
1688 * 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
1689 * of a select box.
\r
1691 * @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers.
\r
1695 setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers)
\r
1697 this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers;
\r
1702 // {{{ addMenuItems()
\r
1706 * @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data
\r
1710 addMenuItems : function(menuItemObj)
\r
1712 this.menuItemObj = menuItemObj;
\r
1713 this.menuItems = menuItemObj.getItems();
\r
1717 // {{{ setActiveSubItemsOnMouseOver()
\r
1719 * Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
\r
1721 * @param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
\r
1725 setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver)
\r
1727 this.activeSubItemsOnMouseOver = activateSubOnMouseOver;
\r
1731 // {{{ setMenuItemState()
\r
1733 * 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
1735 * @param Number menuItemId - ID of the menu item we want to switch state for
\r
1736 * @param String state - New state(example: "disabled")
\r
1740 setMenuItemState : function(menuItemId,state)
\r
1742 this.menuItem_objects[menuItemId].setState(state);
\r
1746 // {{{ setMenuItemCssPrefix()
\r
1748 * 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
1749 * 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
1750 * with different stylings.
\r
1752 * @param String newCssPrefix - New css prefix for menu items.
\r
1756 setMenuItemCssPrefix : function(newCssPrefix)
\r
1758 this.menuItemCssPrefix = newCssPrefix;
\r
1762 // {{{ setCssPrefix()
\r
1764 * 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
1765 * 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
1766 * this method. This is useful if you want to have two menus on the same page with different stylings.
\r
1768 * @param String newCssPrefix - New css prefix for the menu bar classes.
\r
1772 setCssPrefix : function(newCssPrefix)
\r
1774 this.cssPrefix = newCssPrefix;
\r
1778 // {{{ replaceSubMenus()
\r
1780 * This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as parentId)
\r
1783 * @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
1784 * @param menuModel newMenuModel - Reference to object of class menuModel
\r
1788 replaceMenuItems : function(parentId,newMenuModel)
\r
1790 this.hideSubMenus(); // Hide all sub menus
\r
1791 this.__deleteMenuItems(parentId); // Delete old menu items.
\r
1792 this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
\r
1793 this.__clearAllMenuItems();
\r
1794 this.__createMenuItems();
\r
1799 // {{{ deleteMenuItems()
\r
1801 * This method deletes menu items from the menu dynamically
\r
1803 * @param Number parentId - Parent id - where to append the new items.
\r
1804 * @param Boolean includeParent - Should parent element also be deleted, or only sub elements?
\r
1808 deleteMenuItems : function(parentId,includeParent)
\r
1810 this.hideSubMenus(); // Hide all sub menus
\r
1811 this.__deleteMenuItems(parentId,includeParent);
\r
1812 this.__clearAllMenuItems();
\r
1813 this.__createMenuItems();
\r
1817 // {{{ appendMenuItems()
\r
1819 * This method appends menu items to the menu dynamically
\r
1821 * @param Number parentId - Parent id - where to append the new items.
\r
1822 * @param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined parentId
\r
1826 appendMenuItems : function(parentId,newMenuModel)
\r
1828 this.hideSubMenus(); // Hide all sub menus
\r
1829 this.menuItemObj.__appendMenuModel(newMenuModel,parentId); // Appending new menu items to the menu model.
\r
1830 this.__clearAllMenuItems();
\r
1831 this.__createMenuItems();
\r
1835 // {{{ hideMenuItem()
\r
1837 * This method doesn't delete menu items. it hides them only.
\r
1839 * @param Number id - Id of the item you want to hide.
\r
1843 hideMenuItem : function(id)
\r
1845 this.menuItem_objects[id].hide();
\r
1850 // {{{ showMenuItem()
\r
1852 * This method shows a menu item. If the item isn't hidden, nothing is done.
\r
1854 * @param Number id - Id of the item you want to show
\r
1858 showMenuItem : function(id)
\r
1860 this.menuItem_objects[id].show();
\r
1866 * Replace the text for a menu item
\r
1868 * @param Integer id - Id of menu item.
\r
1869 * @param String newText - New text for the menu item.
\r
1873 setText : function(id,newText)
\r
1875 this.menuItem_objects[id].setText(newText);
\r
1881 * Replace menu icon for a menu item.
\r
1883 * @param Integer id - Id of menu item.
\r
1884 * @param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item.
\r
1888 setIcon : function(id,newPath)
\r
1890 this.menuItem_objects[id].setIcon(newPath);
\r
1894 // {{{ __clearAllMenuItems()
\r
1896 * Delete HTML elements for all menu items.
\r
1900 __clearAllMenuItems : function()
\r
1902 for(var prop=0;prop<this.menuItemObj.menuItemsOrder.length;prop++){
\r
1903 var id = this.menuItemObj.menuItemsOrder[prop];
\r
1904 if(this.submenuGroups[id]){
\r
1905 this.submenuGroups[id].parentNode.removeChild(this.submenuGroups[id]);
\r
1906 this.submenuGroups[id] = false;
\r
1908 if(this.submenuIframes[id]){
\r
1909 this.submenuIframes[id].parentNode.removeChild(this.submenuIframes[id]);
\r
1910 this.submenuIframes[id] = false;
\r
1913 this.menuBarObj.innerHTML = '';
\r
1917 // {{{ __deleteMenuItems()
\r
1919 * This method deletes menu items from the menu, i.e. menu model and the div elements for these items.
\r
1921 * @param Number parentId - Parent id - where to start the delete process.
\r
1925 __deleteMenuItems : function(parentId,includeParent)
\r
1927 if(includeParent)this.menuItemObj.__deleteANode(parentId);
\r
1928 if(!this.submenuGroups[parentId])return; // No sub items exists.
\r
1929 this.menuItem_objects[parentId].__setHasSub(false); // Delete existing sub menu divs.
\r
1930 this.menuItemObj.__deleteChildNodes(parentId); // Delete existing child nodes from menu model
\r
1931 var groupBox = this.submenuGroups[parentId];
\r
1932 groupBox.parentNode.removeChild(groupBox); // Delete sub menu group box.
\r
1933 if(this.submenuIframes[parentId]){
\r
1934 this.submenuIframes[parentId].parentNode.removeChild(this.submenuIframes[parentId]);
\r
1936 this.submenuGroups.splice(parentId,1);
\r
1937 this.submenuIframes.splice(parentId,1);
\r
1941 // {{{ __changeMenuBarState()
\r
1943 * 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
1945 * @param Object obj - Reference to element triggering the action
\r
1949 __changeMenuBarState : function(){
\r
1950 var objectIndex = this.getAttribute('objectRef');
\r
1951 var obj = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[objectIndex];
\r
1952 var parentId = this.id.replace(/[^0-9]/gi,'');
\r
1953 var state = obj.menuItem_objects[parentId].getState();
\r
1954 if(state=='disabled')return;
\r
1955 obj.menuBarState = !obj.menuBarState;
\r
1956 if(!obj.menuBarState)obj.hideSubMenus();else{
\r
1957 obj.hideSubMenus();
\r
1958 obj.__expandGroup(parentId);
\r
1964 // {{{ __createDivs()
\r
1966 * Create the main HTML elements for this menu dynamically
\r
1971 __createDivs : function()
\r
1973 window.refTomenuBar = this; // Reference to menu strip object
\r
1975 this.menuBarObj = document.createElement('DIV');
\r
1976 this.menuBarObj.className = this.cssPrefix + 'menuBar_' + this.menuItemObj.submenuType[1];
\r
1978 if(!document.getElementById(this.targetId)){
\r
1979 alert('No target defined for the menu object');
\r
1982 // Appending menu bar object as a sub of defined target element.
\r
1983 var target = document.getElementById(this.targetId);
\r
1984 target.appendChild(this.menuBarObj);
\r
1987 // {{{ hideSubMenus()
\r
1989 * Deactivate all sub menus ( collapse and set state back to regular )
\r
1990 * In case you have a menu inside a scrollable container, call this method in an onscroll event for that element
\r
1991 * example document.getElementById('textContent').onscroll = menuBar.__hideSubMenus;
\r
1993 * @param Event e - this variable is present if this method is called from an event.
\r
1997 hideSubMenus : function(e)
\r
1999 if(this && this.tagName){ /* Method called from event */
\r
2000 if(document.all)e = event;
\r
2001 var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
\r
2002 if(srcEl.tagName.toLowerCase()=='img')srcEl = srcEl.parentNode;
\r
2003 if(srcEl.className && srcEl.className.indexOf('arrow')>=0){
\r
2007 for(var no=0;no<DHTMLSuite.variableStorage.menuBar_highlightedItems.length;no++){
\r
2008 DHTMLSuite.variableStorage.menuBar_highlightedItems[no].setState('regular'); // Set state back to regular
\r
2009 DHTMLSuite.variableStorage.menuBar_highlightedItems[no].__hideGroup(); // Hide eventual sub menus
\r
2011 DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
\r
2015 // {{{ __expandGroup()
\r
2017 * Expand a group of sub items.
\r
2018 * @param parentId - Id of parent element
\r
2022 __expandGroup : function(parentId)
\r
2025 var groupRef = this.submenuGroups[parentId];
\r
2026 var subDiv = groupRef.getElementsByTagName('DIV')[0];
\r
2028 var numericId = subDiv.id.replace(/[^0-9]/g,'');
\r
2030 groupRef.style.visibility='visible'; // Show menu group.
\r
2031 if(this.submenuIframes[parentId])this.submenuIframes[parentId].style.visibility = 'visible'; // Show iframe if it exists.
\r
2032 DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId];
\r
2033 this.__positionSubMenu(parentId);
\r
2035 if(DHTMLSuite.clientInfoObj.isOpera){ /* Opera fix in order to get correct height of sub menu group */
\r
2036 var subDiv = groupRef.getElementsByTagName('DIV')[0]; /* Find first menu item */
\r
2037 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
2042 // {{{ __activateMenuElements()
\r
2044 * Traverse up the menu items and highlight them.
\r
2049 __activateMenuElements : function(inputObj,objectRef,firstIteration)
\r
2051 if(!this.menuBarState && !this.activeSubItemsOnMouseOver)return; // Menu is not activated and it shouldn't be activated on mouse over.
\r
2052 var numericId = inputObj.id.replace(/[^0-9]/g,''); // Get a numeric reference to current menu item.
\r
2054 var state = this.menuItem_objects[numericId].getState(); // Get state of this menu item.
\r
2055 if(state=='disabled')return; // This menu item is disabled - return from function without doing anything.
\r
2057 if(firstIteration && DHTMLSuite.variableStorage.menuBar_highlightedItems.length>0){
\r
2058 this.hideSubMenus(); // First iteration of this function=> Hide other sub menus.
\r
2060 // 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
2061 var newState = 'over';
\r
2062 if(!firstIteration)newState = 'active'; // State should be set to 'over' for the menu item the mouse is currently over.
\r
2064 this.menuItem_objects[numericId].setState(newState); // Switch state of menu item.
\r
2065 if(this.submenuGroups[numericId]){ // Sub menu group exists. call the __expandGroup method.
\r
2066 this.__expandGroup(numericId); // Expand sub menu group
\r
2068 DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId]; // Save this menu item in the array of highlighted elements.
\r
2069 if(objectRef.menuItems[numericId].parentId){ // A parent element exists. Call this method over again with parent element as input argument.
\r
2070 this.__activateMenuElements(objectRef.menuItem_objects[objectRef.menuItems[numericId].parentId].divElement,objectRef,false);
\r
2075 // {{{ __createMenuItems()
\r
2077 * Creates the HTML elements for the menu items.
\r
2082 __createMenuItems : function()
\r
2084 if(!this.globalObjectIndex)this.globalObjectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;;
\r
2085 var index = this.globalObjectIndex;
\r
2086 DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index] = this;
\r
2088 // 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
2089 var firstChild = false;
\r
2090 var firstChilds = document.getElementsByTagName('DIV');
\r
2091 if(firstChilds.length>0)firstChild = firstChilds[0]
\r
2093 for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){ // Looping through menu items
\r
2094 var indexThis = this.menuItemObj.menuItemsOrder[no];
\r
2095 if(!this.menuItems[indexThis].id)continue;
\r
2096 this.menuItem_objects[this.menuItems[indexThis].id] = new DHTMLSuite.menuItem();
\r
2097 if(this.menuItemCssPrefix)this.menuItem_objects[this.menuItems[indexThis].id].setCssPrefix(this.menuItemCssPrefix); // Custom css prefix set
\r
2098 if(this.menuItemLayoutCss)this.menuItem_objects[this.menuItems[indexThis].id].setLayoutCss(this.menuItemLayoutCss); // Custom css file name
\r
2100 var ref = this.menuItem_objects[this.menuItems[indexThis].id].createItem(this.menuItems[indexThis]); // Create div for this menu item.
\r
2102 // Actiave sub elements when someone moves the mouse over the menu item - exception: not on separators.
\r
2103 if(!this.menuItems[indexThis].separator)DHTMLSuite.commonObj.addEvent(ref,"mouseover",function(){ DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].__activateMenuElements(this,DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index],true); });
\r
2105 if(this.menuItem_objects[this.menuItems[indexThis].id].expandElement){ /* Small arrow at the right of the menu item exists - expand subs */
\r
2106 var expandRef = this.menuItem_objects[this.menuItems[indexThis].id].expandElement; /* Creating reference to expand div/arrow div */
\r
2107 var parentId = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].menuItems[indexThis].parentId + ''; // Get parent id.
\r
2108 var tmpId = expandRef.id.replace(/[^0-9]/gi,'');
\r
2109 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
2110 expandRef.objectRef = index;
\r
2111 expandRef.onclick = this.__changeMenuBarState;
\r
2113 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
2115 if(this.menuItems[indexThis].depth==1 && this.menuItemObj.submenuType[this.menuItems[indexThis].depth]!='top' && this.menuItemObj.mainMenuGroupWidth){ /* Main menu item group width set */
\r
2116 var tmpWidth = this.menuItemObj.mainMenuGroupWidth + '';
\r
2117 if(tmpWidth.indexOf('%')==-1)tmpWidth = tmpWidth + 'px';
\r
2118 target.style.width = tmpWidth;
\r
2121 if(this.menuItems[indexThis].depth=='1'){ /* Top level item */
\r
2122 if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='top'){ /* Type = "top" - menu items side by side */
\r
2123 ref.style.styleFloat = 'left';
\r
2124 ref.style.cssText = 'float:left';
\r
2127 if(!this.menuItems[indexThis].depth){
\r
2128 alert('Error in menu model(depth not defined for a menu item). Remember to call the init() method for the menuModel object.');
\r
2131 if(!this.submenuGroups[this.menuItems[indexThis].parentId]){ // Sub menu div doesn't exist - > Create it.
\r
2132 this.submenuGroups[this.menuItems[indexThis].parentId] = document.createElement('DIV');
\r
2133 this.submenuGroups[this.menuItems[indexThis].parentId].style.zIndex = 10000;
\r
2134 this.submenuGroups[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarSubGroup' + this.menuItems[indexThis].parentId;
\r
2135 this.submenuGroups[this.menuItems[indexThis].parentId].style.visibility = 'hidden'; // Initially hidden.
\r
2136 if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='sub')this.submenuGroups[this.menuItems[indexThis].parentId].className = this.cssPrefix + 'menuBar_sub';
\r
2138 firstChild.parentNode.insertBefore(this.submenuGroups[this.menuItems[indexThis].parentId],firstChild);
\r
2140 document.body.appendChild(this.submenuGroups[this.menuItems[indexThis].parentId]);
\r
2143 if(DHTMLSuite.clientInfoObj.isMSIE && this.createIframesForOldIeBrowsers){ // Create iframe object in order to conver select boxes in older IE browsers(windows).
\r
2144 this.submenuIframes[this.menuItems[indexThis].parentId] = document.createElement('<IFRAME src="about:blank" frameborder=0>');
\r
2145 this.submenuIframes[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarIframe_' + this.menuItems[indexThis].parentId;
\r
2146 this.submenuIframes[this.menuItems[indexThis].parentId].style.position = 'absolute';
\r
2147 this.submenuIframes[this.menuItems[indexThis].parentId].style.zIndex = 9000;
\r
2148 this.submenuIframes[this.menuItems[indexThis].parentId].style.visibility = 'hidden';
\r
2150 firstChild.parentNode.insertBefore(this.submenuIframes[this.menuItems[indexThis].parentId],firstChild);
\r
2152 document.body.appendChild(this.submenuIframes[this.menuItems[indexThis].parentId]);
\r
2156 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
2158 target.appendChild(ref); // Append menu item to the document.
\r
2160 if(this.menuItems[indexThis].visible == false)this.hideMenuItem(this.menuItems[indexThis].id); // Menu item hidden, call the hideMenuItem method.
\r
2161 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
2166 this.__setSizeOfAllSubMenus(); // Set size of all sub menu groups
\r
2167 this.__positionAllSubMenus(); // Position all sub menu groups.
\r
2168 if(DHTMLSuite.clientInfoObj.isOpera)this.__fixLayoutOpera(); // Call a function which fixes some layout issues in Opera.
\r
2172 // {{{ __fixLayoutOpera()
\r
2174 * A method used to fix the menu layout in Opera.
\r
2179 __fixLayoutOpera : function()
\r
2181 for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){
\r
2182 var id = this.menuItemObj.menuItemsOrder[no];
\r
2184 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
2190 // {{{ __setSizeOfAllSubMenus()
\r
2192 * * Walk through all sub menu groups and call the positioning method for each one of them.
\r
2197 __setSizeOfAllSubMenus : function()
\r
2199 for(var prop in this.submenuGroups){
\r
2200 this.__setSizeOfSubMenus(prop);
\r
2205 // {{{ __positionAllSubMenus()
\r
2207 * Walk through all sub menu groups and call the positioning method for each one of them.
\r
2212 __positionAllSubMenus : function()
\r
2214 for(var prop in this.submenuGroups){
\r
2215 this.__positionSubMenu(prop);
\r
2221 // {{{ __positionSubMenu(parentId)
\r
2223 * Position a sub menu group
\r
2225 * @param parentId
\r
2229 __positionSubMenu : function(parentId)
\r
2232 var shortRef = this.submenuGroups[parentId];
\r
2234 var depth = this.menuItems[parentId].depth;
\r
2235 var dir = this.menuItemObj.submenuType[depth];
\r
2237 shortRef.style.left = DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + 'px';
\r
2238 shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetHeight) + 'px';
\r
2240 var too_large = DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement)
\r
2241 + this.menuItem_objects[parentId].divElement.offsetWidth
\r
2242 + shortRef.offsetWidth
\r
2243 > $('#main_menu_div').width();
\r
2245 shortRef.style.left = (DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) - shortRef.offsetWidth) + 'px';
\r
2247 shortRef.style.left = (DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetWidth) + 'px';
\r
2248 shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement)) + 'px';
\r
2251 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
2252 var iframeRef = this.submenuIframes[parentId]
\r
2253 iframeRef.style.left = shortRef.style.left;
\r
2254 iframeRef.style.top = shortRef.style.top;
\r
2255 iframeRef.style.width = shortRef.clientWidth + 'px';
\r
2256 iframeRef.style.height = shortRef.clientHeight + 'px';
\r
2265 // {{{ __setSizeOfSubMenus(parentId)
\r
2267 * Set size of a sub menu group
\r
2269 * @param parentId
\r
2273 __setSizeOfSubMenus : function(parentId)
\r
2276 var shortRef = this.submenuGroups[parentId];
\r
2277 var subWidth = Math.max(shortRef.offsetWidth,this.menuItem_objects[parentId].divElement.offsetWidth);
\r
2278 if(this.menuItems[parentId].submenuWidth)subWidth = this.menuItems[parentId].submenuWidth;
\r
2279 subWidth = subWidth + '';
\r
2280 if(subWidth.indexOf('%')==-1)subWidth = subWidth + 'px';
\r
2281 shortRef.style.width = subWidth;
\r
2283 if(DHTMLSuite.clientInfoObj.isMSIE){
\r
2284 this.submenuIframes[parentId].style.width = shortRef.style.width;
\r
2285 this.submenuIFrames[parentId].style.height = shortRef.style.height;
\r
2294 // {{{ __repositionMenu()
\r
2296 * Position menu items.
\r
2301 __repositionMenu : function(inputObj)
\r
2303 // self.status = this;
\r
2304 inputObj.menuBarObj.style.top = document.documentElement.scrollTop + 'px';
\r
2310 // {{{ __menuItemRollOver()
\r
2312 * Position menu items.
\r
2317 __menuItemRollOver : function(inputObj)
\r
2319 var numericId = inputObj.id.replace(/[^0-9]/g,'');
\r
2320 inputObj.className = 'DHTMLSuite_menuBar_menuItem_over_' + this.menuItems[numericId]['depth'];
\r
2324 // {{{ __menuItemRollOut()
\r
2326 * Position menu items.
\r
2331 __menuItemRollOut : function(inputObj)
\r
2333 var numericId = inputObj.id.replace(/[^0-9]/g,'');
\r
2334 inputObj.className = 'DHTMLSuite_menuBar_menuItem_' + this.menuItems[numericId]['depth'];
\r
2338 // {{{ __menuNavigate()
\r
2340 * Navigate by click on a menu item
\r
2345 __menuNavigate : function(inputObj)
\r
2347 var numericIndex = inputObj.id.replace(/[^0-9]/g,'');
\r
2348 var url = this.menuItems[numericIndex]['url'];
\r
2350 alert(this.menuItems[numericIndex]['url']);
\r
2355 unsetMenuBarState : function() { this.menuBarState = false },
\r
2356 changeMenuBarState: function (target) {
\r
2357 var parentId = target.id.replace(/[^0-9]/gi,'');
\r
2358 this.menuBarState = !this.menuBarState;
\r
2359 this.hideSubMenus();
\r
2360 if(this.menuBarState) {
\r
2361 this.__expandGroup(parentId);
\r
2364 // {{{ __setBasicEvents()
\r
2366 * Set basic events for the menu widget.
\r
2371 __setBasicEvents : function()
\r
2374 $('div.DHTMLSuite_menuBar_sub').click(function() { menu.hideSubMenus(); menu.unsetMenuBarState() });
\r
2375 $('div.DHTMLSuite_menuBar_top > div > div[objectref!="0"]').click(function() { menu.changeMenuBarState(this) });
\r
2376 $('div.DHTMLSuite_menuBar_top').click(function(e) {
\r
2377 if ($(e.target).attr('class') == 'DHTMLSuite_menuBar_top') { menu.hideSubMenus(); menu.unsetMenuBarState() }
\r
2379 $('#win1').load(function(){
\r
2380 $('#win1').contents().mousedown(function(){
\r
2381 menu.hideSubMenus();
\r
2382 menu.menuBarState = false;
\r
projects / kivitendo-erp.git / blob