vid/src/main/webapp/static/fusion/raptor/js/tree/context-menu.js

   1 /************************************************************************************************************
   2 Context menu
   3 Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland
   4
   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.
   9
  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.
  14
  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
  18
  19 Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
  20 written by Alf Magne Kalleland.
  21
  22 Alf Magne Kalleland, 2006
  23 Owner of DHTMLgoodies.com
  24
  25
  26 ************************************************************************************************************/
  27
  28 DHTMLGoodies_menuModel = function()
  29 {
  30         var menuItems;
  31         this.menuItems = new Array();
  32
  33
  34 }
  35
  36 /************************************************************************************************************
  37 *       DHTML menu model class
  38 *
  39 *       Created:                                                October, 30th, 2006
  40 *       @class Purpose of class:                Saves menu item data
  41 *
  42 *
  43 *       Demos of this class:                    demo-menu-strip.html
  44 *
  45 *       Update log:
  46 *
  47 ************************************************************************************************************/
  48
  49
  50 /**
  51 * @constructor
  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>)
  53 * @version 1.0
  54 * @author       Alf Magne Kalleland(www.dhtmlgoodies.com)
  55 */
  56
  57
  58 DHTMLGoodies_menuModel.prototype = {
  59         // {{{ addItem()
  60     /**
  61      *  Add separator (special type of menu item)
  62      *
  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.
  71      *
  72      * @public
  73      */
  74         addItem : function(id,itemText,itemIcon,url,parentId,jsFunction)
  75         {
  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;
  84
  85         }
  86         ,
  87         // {{{ addSeparator()
  88     /**
  89      *  Add separator (special type of menu item)
  90      *
  91      *  @param int id of menu item
  92      *  @param int parent id of menu item
  93      * @public
  94      */
  95         addSeparator : function(id,parentId)
  96         {
  97                 this.menuItems[id] = new Array();
  98                 this.menuItems[id]['parentId'] = parentId;
  99                 this.menuItems[id]['separator'] = true;
 100         }
 101         ,
 102         // {{{ init()
 103     /**
 104      *  Initilizes the menu model. This method should be called when all items has been added to the model.
 105      *
 106      *
 107      * @public
 108      */
 109         init : function()
 110         {
 111                 this.__getDepths();
 112
 113         }
 114         // }}}
 115         ,
 116         // {{{ __getDepths()
 117     /**
 118      *  Create variable for the depth of each menu item.
 119      *
 120      *
 121      * @private
 122      */
 123         getItems : function()
 124         {
 125                 return this.menuItems;
 126         }
 127
 128         ,
 129         // {{{ __getDepths()
 130     /**
 131      *  Create variable for the depth of each menu item.
 132      *
 133      *
 134      * @private
 135      */
 136     __getDepths : function()
 137     {
 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;
 142                 }
 143         }
 144     }
 145     ,
 146         // {{{ __hasSubs()
 147     /**
 148      *  Does a menu item have sub elements ?
 149      *
 150      *
 151      * @private
 152      */
 153         // }}}
 154         __hasSubs : function(id)
 155         {
 156                 for(var no in this.menuItems){  // Looping through menu items
 157                         if(this.menuItems[no]['parentId']==id)return true;
 158                 }
 159                 return false;
 160         }
 161
 162
 163 }
 164
 165
 166
 167 var referenceToDHTMLSuiteContextMenu;
 168
 169
 170 DHTMLGoodies_contextMenu = function()
 171 {
 172         var menuModels;
 173         var menuItems;
 174         var menuObject;                 // Reference to context menu div
 175         var layoutCSS;
 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.
 180         var imagePath;
 181
 182         this.menuModels = new Array();
 183         this.menuObject = false;
 184         this.menuUls = new Array();
 185         this.width = 100;
 186         this.srcElement = false;
 187         this.indexCurrentlyDisplayedMenuModel = false;
 188         this.imagePath = imgFolder+'tree/';
 189
 190 }
 191
 192 DHTMLGoodies_contextMenu.prototype =
 193 {
 194
 195         setWidth : function(newWidth)
 196         {
 197                 this.width = newWidth;
 198         }
 199         // }}}
 200         ,
 201         // {{{ setLayoutCss()
 202     /**
 203      *  Add menu items
 204      *
 205      *  @param String cssFileName Name of css file
 206      *
 207      * @public
 208      */
 209         setLayoutCss : function(cssFileName)
 210         {
 211                 this.layoutCSS = cssFileName;
 212         }
 213         // }}}
 214         ,
 215         // {{{ attachToElement()
 216     /**
 217      *  Add menu items
 218      *
 219      *  @param Object HTML Element = Reference to html element
 220      *  @param String elementId = String id of element(optional). An alternative to HTML Element
 221      *
 222      * @public
 223      */
 224         attachToElement : function(element,elementId,menuModel)
 225         {
 226                 window.refToThisContextMenu = this;
 227                 if(!element && elementId)element = document.getElementById(elementId);
 228                 if(!element.id){
 229                         element.id = 'context_menu' + Math.random();
 230                         element.id = element.id.replace('.','');
 231                 }
 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;
 236
 237         }
 238         // }}}
 239         ,
 240         // {{{ __setReference()
 241     /**
 242      *  Creates a reference to current context menu object. (Note: This method should be deprecated as only one context menu object is needed)
 243      *
 244      *  @param Object context menu object = Reference to context menu object
 245      *
 246      * @private
 247      */
 248         __setReference : function(obj)
 249         {
 250                 referenceToDHTMLSuiteContextMenu = obj;
 251         }
 252         ,
 253         // {{{ __displayContextMenu()
 254     /**
 255      *  Displays the context menu
 256      *
 257      *  @param Event e
 258      *
 259      * @private
 260      */
 261         __displayContextMenu : function(e)
 262         {
 263                 if(document.all)e = event;
 264                 var ref = referenceToDHTMLSuiteContextMenu;
 265                 ref.srcElement = ref.getSrcElement(e);
 266
 267                 if(!ref.indexCurrentlyDisplayedMenuModel || ref.indexCurrentlyDisplayedMenuModel!=this.id){
 268                         if(ref.indexCurrentlyDisplayedMenuModel){
 269                                 ref.menuObject.innerHTML = '';
 270                         }else{
 271                                 ref.__createDivs();
 272                         }
 273                         ref.menuItems = ref.menuModels[this.id].getItems();
 274                         ref.__createMenuItems();
 275                 }
 276                 ref.indexCurrentlyDisplayedMenuModel=this.id;
 277
 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';
 281                 return false;
 282
 283         }
 284         // }}}
 285         ,
 286         // {{{ __displayContextMenu()
 287     /**
 288      *  Add menu items
 289      *
 290      *  @param Event e
 291      *
 292      * @private
 293      */
 294         __hideContextMenu : function()
 295         {
 296                 var ref = referenceToDHTMLSuiteContextMenu;
 297                 if(ref.menuObject)ref.menuObject.style.display = 'none';
 298
 299
 300         }
 301         // }}}
 302         ,
 303         // {{{ __createDivs()
 304     /**
 305      *  Creates general divs for the menu
 306      *
 307      *
 308      * @private
 309      */
 310         __createDivs : function()
 311         {
 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);
 318         }
 319         // }}}
 320         ,
 321
 322         // {{{ __mouseOver()
 323     /**
 324      *  Display mouse over effect when moving the mouse over a menu item
 325      *
 326      *
 327      * @private
 328      */
 329         __mouseOver : function()
 330         {
 331                 this.className = 'DHTMLSuite_item_mouseover';
 332                 if(!document.all){
 333                         this.style.backgroundPosition = 'left center';
 334                 }
 335
 336         }
 337         // }}}
 338         ,
 339         // {{{ __mouseOut()
 340     /**
 341      *  Remove mouse over effect when moving the mouse away from a menu item
 342      *
 343      *
 344      * @private
 345      */
 346         __mouseOut : function()
 347         {
 348                 this.className = '';
 349                 if(!document.all){
 350                         this.style.backgroundPosition = '1px center';
 351                 }
 352         }
 353         // }}}
 354         ,
 355         // {{{ __createMenuItems()
 356     /**
 357      *  Create menu items
 358      *
 359      *
 360      * @private
 361      */
 362         __evalUrl : function()
 363         {
 364                 var js = this.getAttribute('jsFunction');
 365                 if(!js)js = this.jsFunction;
 366                 if(js)eval(js);
 367
 368         }
 369         // }}}
 370         ,
 371         // {{{ __createMenuItems()
 372     /**
 373      *  Create menu items
 374      *
 375      *
 376      * @private
 377      */
 378         __createMenuItems : function()
 379         {
 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]);
 386                         }
 387
 388                         if(this.menuItems[no]['depth']==1){
 389
 390                                 if(this.menuItems[no]['separator']){
 391                                         var li = document.createElement('DIV');
 392                                         li.className = 'DHTMLSuite_contextMenu_separator';
 393                                 }else{
 394                                         var li = document.createElement('LI');
 395                                         if(this.menuItems[no]['jsFunction']){
 396                                                 this.menuItems[no]['url'] = this.menuItems[no]['jsFunction'] + '(this,referenceToDHTMLSuiteContextMenu.srcElement)';
 397                                         }
 398                                         if(this.menuItems[no]['itemIcon']){
 399                                                 li.style.backgroundImage = 'url(\'' + this.menuItems[no]['itemIcon'] + '\')';
 400                                                 if(!document.all)li.style.backgroundPosition = '1px center';
 401
 402                                         }
 403
 404                                         if(this.menuItems[no]['url']){
 405                                                 var url = this.menuItems[no]['url'] + '';
 406                                                 var tmpUrl = url + '';
 407                                                 li.setAttribute('jsFunction',url);
 408                                                 li.jsFunction = url;
 409                                                 li.onclick = this.__evalUrl;
 410
 411                                         }
 412
 413                                         li.innerHTML = '<a href="#" onclick="return false">' + this.menuItems[no]['itemText'] + '</a>';
 414                                         li.onmouseover = this.__mouseOver;
 415                                         li.onmouseout = this.__mouseOut;
 416                                 }
 417                                 this.menuUls[0].appendChild(li);
 418                         }
 419                 }
 420         }
 421
 422         ,
 423
 424         // {{{ getSrcElement()
 425     /**
 426      *
 427      *  Returns a reference to the element which triggered an event.
 428      *  @param Event e = Event object
 429      *
 430      *
 431      * @private
 432      */
 433     getSrcElement : function(e)
 434     {
 435         var el;
 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
 440                                 el = el.parentNode;
 441                 return el;
 442     }
 443
 444 }