[Sommaire] [Imprimer]

   1  /**

   2   * $Id: editor_plugin_src.js 126 2006-10-22 16:19:55Z spocke $

   3   *

   4   * @author Moxiecode

   5   * @copyright Copyright © 2004-2006, Moxiecode Systems AB, All rights reserved.

   6   */
   7  
   8  /* Import plugin specific language pack */

   9  tinyMCE.importPluginLanguagePack('layer');
  10  
  11  var TinyMCE_LayerPlugin = {
  12      getInfo : function() {
  13          return {
  14              longname : 'Layer',
  15              author : 'Moxiecode Systems AB',
  16              authorurl : 'http://tinymce.moxiecode.com',
  17              infourl : 'http://tinymce.moxiecode.com/tinymce/docs/plugin_layer.html',
  18              version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
  19          };
  20      },
  21  
  22      initInstance : function(inst) {
  23          if (tinyMCE.isMSIE && !tinyMCE.isOpera)
  24              inst.getDoc().execCommand('2D-Position');
  25      },
  26  
  27      handleEvent : function(e) {
  28          var inst = tinyMCE.selectedInstance;
  29          var w = inst.getWin(), le = inst._lastStyleElm, e;
  30  
  31          if (tinyMCE.isGecko) {
  32              e = this._getParentLayer(inst.getFocusElement());
  33  
  34              if (e) {
  35                  if (!inst._lastStyleElm) {
  36                      e.style.overflow = 'auto';
  37                      inst._lastStyleElm = e;
  38                  }
  39              } else if (le) {
  40                  le = inst._lastStyleElm;
  41                  le.style.width = le.scrollWidth + 'px';
  42                  le.style.height = le.scrollHeight + 'px';
  43                  le.style.overflow = '';
  44                  inst._lastStyleElm = null;
  45              }
  46          }
  47  
  48          return true;
  49      },
  50  
  51      handleVisualAid : function(el, deep, state, inst) {
  52          var nl = inst.getDoc().getElementsByTagName("div"), i;
  53  
  54          for (i=0; i<nl.length; i++) {
  55              if (new RegExp('absolute|relative|static', 'gi').test(nl[i].style.position)) {
  56                  if (state)
  57                      tinyMCE.addCSSClass(nl[i], 'mceVisualAid');
  58                  else
  59                      tinyMCE.removeCSSClass(nl[i], 'mceVisualAid');                    
  60              }
  61          }
  62      },
  63  
  64      getControlHTML : function(cn) {
  65          switch (cn) {
  66              case "moveforward":
  67                  return tinyMCE.getButtonHTML(cn, 'lang_layer_forward_desc', '{$pluginurl}/images/moveforward.gif', 'mceMoveForward', true);
  68  
  69              case "movebackward":
  70                  return tinyMCE.getButtonHTML(cn, 'lang_layer_backward_desc', '{$pluginurl}/images/movebackward.gif', 'mceMoveBackward', true);
  71  
  72              case "absolute":
  73                  return tinyMCE.getButtonHTML(cn, 'lang_layer_absolute_desc', '{$pluginurl}/images/absolute.gif', 'mceMakeAbsolute', true);
  74  
  75              case "insertlayer":
  76                  return tinyMCE.getButtonHTML(cn, 'lang_layer_insertlayer_desc', '{$pluginurl}/images/insertlayer.gif', 'mceInsertLayer', true);
  77          }
  78  
  79          return "";
  80      },
  81  
  82      execCommand : function(editor_id, element, command, user_interface, value) {
  83          // Handle commands

  84          switch (command) {
  85              case "mceInsertLayer":
  86                  this._insertLayer();
  87                  return true;
  88  
  89              case "mceMoveForward":
  90                  this._move(1);
  91                  return true;
  92  
  93              case "mceMoveBackward":
  94                  this._move(-1);
  95                  return true;
  96  
  97              case "mceMakeAbsolute":
  98                  this._toggleAbsolute();
  99                  return true;
 100          }
 101  
 102          // Pass to next handler in chain

 103          return false;
 104      },
 105  
 106      handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
 107          var inst = tinyMCE.getInstanceById(editor_id);
 108          var le = this._getParentLayer(inst.getFocusElement());
 109          var p = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
 110  
 111          tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonDisabled');
 112          tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonDisabled');
 113          tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonDisabled');
 114  
 115          if (p)
 116              tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonNormal');
 117  
 118          if (le && le.style.position.toLowerCase() == "absolute") {
 119              tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonSelected');
 120              tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonNormal');
 121              tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonNormal');
 122          }
 123      },
 124  
 125      // Private plugin specific methods

 126  
 127      _move : function(d) {
 128          var inst = tinyMCE.selectedInstance, i, z = new Array();
 129          var le = this._getParentLayer(inst.getFocusElement()), ci = -1, fi = -1;
 130          var nl = tinyMCE.selectNodes(inst.getBody(), function(n) {
 131              return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
 132          });
 133  
 134          // Find z-indexes

 135          for (i=0; i<nl.length; i++) {
 136              z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;
 137  
 138              if (ci < 0 && nl[i] == le)
 139                  ci = i;
 140          }
 141  
 142          if (d < 0) {
 143              // Move back

 144  
 145              // Try find a lower one

 146              for (i=0; i<z.length; i++) {
 147                  if (z[i] < z[ci]) {
 148                      fi = i;
 149                      break;
 150                  }
 151              }
 152  
 153              if (fi > -1) {
 154                  nl[ci].style.zIndex = z[fi];
 155                  nl[fi].style.zIndex = z[ci];
 156              } else {
 157                  if (z[ci] > 0)
 158                      nl[ci].style.zIndex = z[ci] - 1;
 159              }
 160          } else {
 161              // Move forward

 162  
 163              // Try find a higher one

 164              for (i=0; i<z.length; i++) {
 165                  if (z[i] > z[ci]) {
 166                      fi = i;
 167                      break;
 168                  }
 169              }
 170  
 171              if (fi > -1) {
 172                  nl[ci].style.zIndex = z[fi];
 173                  nl[fi].style.zIndex = z[ci];
 174              } else
 175                  nl[ci].style.zIndex = z[ci] + 1;
 176          }
 177  
 178          inst.repaint();
 179      },
 180  
 181      _getParentLayer : function(n) {
 182          return tinyMCE.getParentNode(n, function(n) {
 183              return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
 184          });
 185      },
 186  
 187      _insertLayer : function() {
 188          var inst = tinyMCE.selectedInstance;
 189          var e = tinyMCE.getParentElement(inst.getFocusElement());
 190          var p = tinyMCE.getAbsPosition(e);
 191          var d = inst.getDoc();
 192          var ne = d.createElement('div');
 193          var h = inst.selection.getSelectedHTML();
 194  
 195          // Move div

 196          ne.style.position = 'absolute';
 197          ne.style.left = p.absLeft + 'px';
 198          ne.style.top = (p.absTop > 20 ? p.absTop : 20) + 'px';
 199          ne.style.width = '100px';
 200          ne.style.height = '100px';
 201          ne.className = 'mceVisualAid';
 202  
 203          if (!h)
 204              h = tinyMCE.getLang('lang_layer_content');
 205  
 206          ne.innerHTML = h;
 207  
 208          // Add it

 209          d.body.appendChild(ne);
 210      },
 211  
 212      _toggleAbsolute : function() {
 213          var inst = tinyMCE.selectedInstance;
 214          var le = this._getParentLayer(inst.getFocusElement());
 215  
 216          if (le == null)
 217              le = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
 218  
 219          if (le) {
 220              if (le.style.position.toLowerCase() == "absolute") {
 221                  le.style.position = "";
 222                  le.style.left = "";
 223                  le.style.top = "";
 224              } else {
 225                  le.style.position = "absolute";
 226  
 227                  if (le.style.left == "")
 228                      le.style.left = 20 + 'px';
 229  
 230                  if (le.style.top == "")
 231                      le.style.top = 20 + 'px';
 232  
 233                  if (le.style.width == "")
 234                      le.style.width = le.width ? (le.width + 'px') : '100px';
 235  
 236                  if (le.style.height == "")
 237                      le.style.height = le.height ? (le.height + 'px') : '100px';
 238  
 239                  tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
 240              }
 241  
 242              inst.repaint();
 243              tinyMCE.triggerNodeChange();
 244          }
 245      }
 246  };
 247  
 248  tinyMCE.addPlugin("layer", TinyMCE_LayerPlugin);