[Sommaire] [Imprimer]

   1  /*****************************************************************************
   2   *
   3   * Copyright (c) 2003-2005 Kupu Contributors. All rights reserved.
   4   *
   5   * This software is distributed under the terms of the Kupu
   6   * License. See LICENSE.txt for license text. For a list of Kupu
   7   * Contributors see CREDITS.txt.
   8   *
   9   *****************************************************************************/
  10  
  11  // $Id: kupucontextmenu.js 9879 2005-03-18 12:04:00Z yuppie $
  12  
  13  
  14  //----------------------------------------------------------------------------
  15  // ContextMenu
  16  //----------------------------------------------------------------------------
  17  
  18  function ContextMenu() {
  19      /* the contextmenu */
  20      this.contextmenu = null;
  21      this.seperator = 1;
  22  
  23      this.initialize = function(editor) {
  24          /* set the event handlers and such */
  25          this.editor = editor;
  26          // needs some work since it won't work for more than one editor
  27          addEventHandler(this.editor.getInnerDocument(), "contextmenu", this.createContextMenu, this);
  28          //addEventHandler(editor.getInnerDocument(), "focus", this.hideContextMenu, this);
  29          addEventHandler(document, "focus", this.hideContextMenu, this);
  30          addEventHandler(editor.getInnerDocument(), "mousedown", this.hideContextMenu, this);
  31          addEventHandler(document, "mousedown", this.hideContextMenu, this);
  32      };
  33  
  34      this.createContextMenu = function(event) {
  35          /* Create and show the context menu 
  36          
  37              The method will ask all tools for any (optional) elements they
  38              want to add the menu and when done render it
  39          */
  40          if (event.stopPropagation) {
  41              event.stopPropagation();
  42          };
  43          event.returnValue = false;
  44          if (this.editor.getBrowserName() == 'IE') {
  45              this.editor._saveSelection();
  46          };
  47          // somehow Mozilla on Windows seems to generate the oncontextmenu event
  48          // several times on each rightclick, here's a workaround
  49          if (this.editor.getBrowserName() == 'Mozilla' && this.contextmenu) {
  50              return false;
  51          };
  52          this.hideContextMenu();
  53          var selNode = this.editor.getSelectedNode();
  54          var elements = new Array();
  55          for (var id in this.editor.tools) {
  56              var tool = this.editor.tools[id];
  57              // alas, some people seem to want backward compatibility ;)
  58              if (tool.createContextMenuElements) {
  59                  var els = tool.createContextMenuElements(selNode, event);
  60                  elements = elements.concat(els);
  61              };
  62          };
  63          // remove the last seperator
  64          this._createNewContextMenu(elements, event);
  65          this.last_event = event;
  66          return false;
  67      };
  68  
  69      this.hideContextMenu = function(event) {
  70          /* remove the context menu from view */
  71          if (this.contextmenu) {
  72              try {
  73                  window.document.getElementsByTagName('body')[0].removeChild(this.contextmenu);
  74              } catch (e) {
  75                  // after some commands, the contextmenu will be removed by 
  76                  // the browser, ignore those cases
  77              };
  78              this.contextmenu = null;
  79          };
  80      };
  81  
  82      this._createNewContextMenu = function(elements, event) {
  83          /* add the elements to the contextmenu and show it */
  84          var doc = window.document;
  85          var menu = doc.createElement('div');
  86          menu.contentEditable = false;
  87          menu.designMode = 'Off';
  88          this._setMenuStyle(menu);
  89          for (var i=0; i < elements.length; i++) {
  90              var element = elements[i];
  91              if (element !== this.seperator) {
  92                  var div = doc.createElement('div');
  93                  div.style.width = '100%';
  94                  var label = doc.createTextNode('\u00a0' + element.label);
  95                  div.appendChild(label);
  96                  menu.appendChild(div);
  97                  // set a reference to the div on the element
  98                  element.element = div;
  99                  addEventHandler(div, "mousedown", element.action, element.context);
 100                  addEventHandler(div, "mouseover", element.changeOverStyle, element);
 101                  addEventHandler(div, "mouseout", element.changeNormalStyle, element);
 102                  addEventHandler(div, "mouseup", this.hideContextMenu, this);
 103              } else {
 104                  var hr = doc.createElement('hr');
 105                  menu.appendChild(hr);
 106              };
 107          };
 108          // now move the menu to the right position
 109          var iframe = this.editor.getDocument().getEditable();
 110          var left = event.clientX;
 111          var top = event.clientY;
 112          var currnode = iframe;
 113          if (this.editor.getBrowserName() == 'IE') {
 114              while (currnode) {
 115                  left += currnode.offsetLeft + currnode.clientLeft;
 116                  top += currnode.offsetTop + currnode.clientTop;
 117                  currnode = currnode.offsetParent;
 118              };
 119          } else {
 120              while (currnode) {
 121                  left += currnode.offsetLeft;
 122                  top += currnode.offsetTop;
 123                  currnode = currnode.offsetParent;
 124              };
 125          };
 126          menu.style.left = left + 'px';
 127          menu.style.top = top + 'px';
 128          menu.style.visibility = 'visible';
 129          addEventHandler(menu, 'focus', function() {this.blur}, menu)
 130          doc.getElementsByTagName('body')[0].appendChild(menu);
 131          this.contextmenu = menu;
 132      };
 133      
 134      this._setMenuStyle = function(menu) {
 135          /* set the styles for the menu
 136  
 137              to change the menu style, override this method
 138          */
 139          menu.style.position = 'absolute';
 140          menu.style.backgroundColor = 'white';
 141          menu.style.fontFamily = 'Verdana, Arial, Helvetica, sans-serif';
 142          menu.style.fontSize = '12px';
 143          menu.style.lineHeight = '16px';
 144          menu.style.borderWidth = '1px';
 145          menu.style.borderStyle = 'solid';
 146          menu.style.borderColor = 'black';
 147          menu.style.cursor = 'default';
 148          menu.style.width = "8em";
 149      };
 150  
 151      this._showOriginalMenu = function(event) {
 152          window.document.dispatchEvent(this._last_event);
 153      };
 154  };
 155  
 156  function ContextMenuElement(label, action, context) {
 157      /* context menu element struct
 158      
 159          should be returned (optionally in a list) by the tools' 
 160          createContextMenuElements methods
 161      */
 162      this.label = label; // the text shown in the menu
 163      this.action = action; // a reference to the method that should be called
 164      this.context = context; // a reference to the object on which the method
 165                              //  is defined
 166      this.element = null; // the contextmenu machinery will add a reference 
 167                              // to the element here
 168  
 169      this.changeOverStyle = function(event) {
 170          /* set the background of the element to 'mouseover' style
 171  
 172              override only for the prototype, not for individual elements
 173              so every element looks the same
 174          */
 175          this.element.style.backgroundColor = 'blue';
 176      };
 177  
 178      this.changeNormalStyle = function(event) {
 179          /* set the background of the element back to 'normal' style
 180  
 181              override only for the prototype, not for individual elements
 182              so every element looks the same
 183          */
 184          this.element.style.backgroundColor = 'white';
 185      };
 186  };
 187