1 /************************************************************************************************************
3 Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
5 This library is free software; you can redistribute it and/or
6 modify it under the terms of the GNU Lesser General Public
7 License as published by the Free Software Foundation; either
8 version 2.1 of the License, or (at your option) any later version.
10 This library is distributed in the hope that it will be useful,
11 but WITHOUT ANY WARRANTY; without even the implied warranty of
12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
13 Lesser General Public License for more details.
15 You should have received a copy of the GNU Lesser General Public
16 License along with this library; if not, write to the Free Software
17 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
19 Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
20 written by Alf Magne Kalleland.
22 Alf Magne Kalleland, 2006
23 Owner of DHTMLgoodies.com
26 ************************************************************************************************************/
28 DHTMLGoodies_menuModel = function()
31 this.menuItems = new Array();
36 /************************************************************************************************************
37 * DHTML menu model class
39 * Created: October, 30th, 2006
40 * @class Purpose of class: Saves menu item data
43 * Demos of this class: demo-menu-strip.html
47 ************************************************************************************************************/
52 * @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>)
54 * @author Alf Magne Kalleland(www.dhtmlgoodies.com)
58 DHTMLGoodies_menuModel.prototype = {
61 * Add separator (special type of menu item)
63 * @param int id of menu item
64 * @param string itemText = text of menu item
65 * @param string itemIcon = file name of menu icon(in front of menu text. Path will be imagePath for the DHTMLSuite + file name)
66 * @param string url = Url of menu item
67 * @param int parent id of menu item
68 * @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
69 * 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
70 * the element triggering the context menu is sent as second argument to this function.
74 addItem : function(id,itemText,itemIcon,url,parentId,jsFunction)
76 this.menuItems[id] = new Array();
77 this.menuItems[id]['id'] = id;
78 this.menuItems[id]['itemText'] = itemText;
79 this.menuItems[id]['itemIcon'] = itemIcon;
80 this.menuItems[id]['url'] = url;
81 this.menuItems[id]['parentId'] = parentId;
82 this.menuItems[id]['separator'] = false;
83 this.menuItems[id]['jsFunction'] = jsFunction;
89 * Add separator (special type of menu item)
91 * @param int id of menu item
92 * @param int parent id of menu item
95 addSeparator : function(id,parentId)
97 this.menuItems[id] = new Array();
98 this.menuItems[id]['parentId'] = parentId;
99 this.menuItems[id]['separator'] = true;
104 * Initilizes the menu model. This method should be called when all items has been added to the model.
118 * Create variable for the depth of each menu item.
123 getItems : function()
125 return this.menuItems;
131 * Create variable for the depth of each menu item.
136 __getDepths : function()
138 for(var no in this.menuItems){
139 this.menuItems[no]['depth'] = 1;
140 if(this.menuItems[no]['parentId']){
141 this.menuItems[no]['depth'] = this.menuItems[this.menuItems[no]['parentId']]['depth']+1;
148 * Does a menu item have sub elements ?
154 __hasSubs : function(id)
156 for(var no in this.menuItems){ // Looping through menu items
157 if(this.menuItems[no]['parentId']==id)return true;
167 var referenceToDHTMLSuiteContextMenu;
170 DHTMLGoodies_contextMenu = function()
174 var menuObject; // Reference to context menu div
176 var menuUls; // Array of <ul> elements
177 var width; // Width of context menu
178 var srcElement; // Reference to the element which triggered the context menu, i.e. the element which caused the context menu to be displayed.
179 var indexCurrentlyDisplayedMenuModel; // Index of currently displayed menu model.
182 this.menuModels = new Array();
183 this.menuObject = false;
184 this.menuUls = new Array();
186 this.srcElement = false;
187 this.indexCurrentlyDisplayedMenuModel = false;
188 this.imagePath = imgFolder+'tree/';
192 DHTMLGoodies_contextMenu.prototype =
195 setWidth : function(newWidth)
197 this.width = newWidth;
201 // {{{ setLayoutCss()
205 * @param String cssFileName Name of css file
209 setLayoutCss : function(cssFileName)
211 this.layoutCSS = cssFileName;
215 // {{{ attachToElement()
219 * @param Object HTML Element = Reference to html element
220 * @param String elementId = String id of element(optional). An alternative to HTML Element
224 attachToElement : function(element,elementId,menuModel)
226 window.refToThisContextMenu = this;
227 if(!element && elementId)element = document.getElementById(elementId);
229 element.id = 'context_menu' + Math.random();
230 element.id = element.id.replace('.','');
232 this.menuModels[element.id] = menuModel;
233 element.oncontextmenu = this.__displayContextMenu;
234 //element.onmousedown = function() { window.refToThisContextMenu.__setReference(window.refToThisContextMenu); };
235 document.documentElement.onclick = this.__hideContextMenu;
240 // {{{ __setReference()
242 * Creates a reference to current context menu object. (Note: This method should be deprecated as only one context menu object is needed)
244 * @param Object context menu object = Reference to context menu object
248 __setReference : function(obj)
250 referenceToDHTMLSuiteContextMenu = obj;
253 // {{{ __displayContextMenu()
255 * Displays the context menu
261 __displayContextMenu : function(e)
263 if(document.all)e = event;
264 var ref = referenceToDHTMLSuiteContextMenu;
265 ref.srcElement = ref.getSrcElement(e);
267 if(!ref.indexCurrentlyDisplayedMenuModel || ref.indexCurrentlyDisplayedMenuModel!=this.id){
268 if(ref.indexCurrentlyDisplayedMenuModel){
269 ref.menuObject.innerHTML = '';
273 ref.menuItems = ref.menuModels[this.id].getItems();
274 ref.__createMenuItems();
276 ref.indexCurrentlyDisplayedMenuModel=this.id;
278 ref.menuObject.style.left = (e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px';
279 ref.menuObject.style.top = (e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px';
280 ref.menuObject.style.display='block';
286 // {{{ __displayContextMenu()
294 __hideContextMenu : function()
296 var ref = referenceToDHTMLSuiteContextMenu;
297 if(ref.menuObject)ref.menuObject.style.display = 'none';
303 // {{{ __createDivs()
305 * Creates general divs for the menu
310 __createDivs : function()
312 this.menuObject = document.createElement('DIV');
313 this.menuObject.className = 'DHTMLSuite_contextMenu';
314 this.menuObject.style.backgroundImage = 'url(\'' + this.imagePath + 'context-menu-gradient.gif' + '\')';
315 this.menuObject.style.backgroundRepeat = 'repeat-y';
316 if(this.width)this.menuObject.style.width = this.width + 'px';
317 document.body.appendChild(this.menuObject);
324 * Display mouse over effect when moving the mouse over a menu item
329 __mouseOver : function()
331 this.className = 'DHTMLSuite_item_mouseover';
333 this.style.backgroundPosition = 'left center';
341 * Remove mouse over effect when moving the mouse away from a menu item
346 __mouseOut : function()
350 this.style.backgroundPosition = '1px center';
355 // {{{ __createMenuItems()
362 __evalUrl : function()
364 var js = this.getAttribute('jsFunction');
365 if(!js)js = this.jsFunction;
371 // {{{ __createMenuItems()
378 __createMenuItems : function()
380 window.refToContextMenu = this; // Reference to menu strip object
381 this.menuUls = new Array();
382 for(var no in this.menuItems){ // Looping through menu items
383 if(!this.menuUls[0]){ // Create main ul element
384 this.menuUls[0] = document.createElement('UL');
385 this.menuObject.appendChild(this.menuUls[0]);
388 if(this.menuItems[no]['depth']==1){
390 if(this.menuItems[no]['separator']){
391 var li = document.createElement('DIV');
392 li.className = 'DHTMLSuite_contextMenu_separator';
394 var li = document.createElement('LI');
395 if(this.menuItems[no]['jsFunction']){
396 this.menuItems[no]['url'] = this.menuItems[no]['jsFunction'] + '(this,referenceToDHTMLSuiteContextMenu.srcElement)';
398 if(this.menuItems[no]['itemIcon']){
399 li.style.backgroundImage = 'url(\'' + this.menuItems[no]['itemIcon'] + '\')';
400 if(!document.all)li.style.backgroundPosition = '1px center';
404 if(this.menuItems[no]['url']){
405 var url = this.menuItems[no]['url'] + '';
406 var tmpUrl = url + '';
407 li.setAttribute('jsFunction',url);
409 li.onclick = this.__evalUrl;
413 li.innerHTML = '<a href="#" onclick="return false">' + this.menuItems[no]['itemText'] + '</a>';
414 li.onmouseover = this.__mouseOver;
415 li.onmouseout = this.__mouseOut;
417 this.menuUls[0].appendChild(li);
424 // {{{ getSrcElement()
427 * Returns a reference to the element which triggered an event.
428 * @param Event e = Event object
433 getSrcElement : function(e)
436 // Dropped on which element
437 if (e.target) el = e.target;
438 else if (e.srcElement) el = e.srcElement;
439 if (el.nodeType == 3) // defeat Safari bug