Mambo API

[Summary view] [Print] [Text view]

   1  /**

   2   * $Id: editor_plugin_src.js 520 2008-01-07 16:30:32Z spocke $

   3   *

   4   * @author Moxiecode

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

   6   */
   7  
   8  (function() {
   9      tinymce.create('tinymce.plugins.Layer', {
  10          init : function(ed, url) {
  11              var t = this;
  12  
  13              t.editor = ed;
  14  
  15              // Register commands

  16              ed.addCommand('mceInsertLayer', t._insertLayer, t);
  17  
  18              ed.addCommand('mceMoveForward', function() {
  19                  t._move(1);
  20              });
  21  
  22              ed.addCommand('mceMoveBackward', function() {
  23                  t._move(-1);
  24              });
  25  
  26              ed.addCommand('mceMakeAbsolute', function() {
  27                  t._toggleAbsolute();
  28              });
  29  
  30              // Register buttons

  31              ed.addButton('moveforward', {title : 'layer.forward_desc', cmd : 'mceMoveForward'});
  32              ed.addButton('movebackward', {title : 'layer.backward_desc', cmd : 'mceMoveBackward'});
  33              ed.addButton('absolute', {title : 'layer.absolute_desc', cmd : 'mceMakeAbsolute'});
  34              ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'});
  35  
  36              ed.onInit.add(function() {
  37                  if (tinymce.isIE)
  38                      ed.execCommand('2D-Position');
  39              });
  40  
  41              ed.onNodeChange.add(t._nodeChange, t);
  42              ed.onVisualAid.add(t._visualAid, t);
  43          },
  44  
  45          getInfo : function() {
  46              return {
  47                  longname : 'Layer',
  48                  author : 'Moxiecode Systems AB',
  49                  authorurl : 'http://tinymce.moxiecode.com',
  50                  infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',
  51                  version : tinymce.majorVersion + "." + tinymce.minorVersion
  52              };
  53          },
  54  
  55          // Private methods

  56  
  57          _nodeChange : function(ed, cm, n) {
  58              var le, p;
  59  
  60              le = this._getParentLayer(n);
  61              p = ed.dom.getParent(n, 'DIV,P,IMG');
  62  
  63              if (!p) {
  64                  cm.setDisabled('absolute', 1);
  65                  cm.setDisabled('moveforward', 1);
  66                  cm.setDisabled('movebackward', 1);
  67              } else {
  68                  cm.setDisabled('absolute', 0);
  69                  cm.setDisabled('moveforward', !le);
  70                  cm.setDisabled('movebackward', !le);
  71                  cm.setActive('absolute', le && le.style.position.toLowerCase() == "absolute");
  72              }
  73          },
  74  
  75          // Private methods

  76  
  77          _visualAid : function(ed, e, s) {
  78              var dom = ed.dom;
  79  
  80              tinymce.each(dom.select('div,p', e), function(e) {
  81                  if (/^(absolute|relative|static)$/i.test(e.style.position)) {
  82                      if (s)
  83                          dom.addClass(e, 'mceVisualAid');
  84                      else
  85                          dom.removeClass(e, 'mceVisualAid');    
  86                  }
  87              });
  88          },
  89  
  90          _move : function(d) {
  91              var ed = this.editor, i, z = [], le = this._getParentLayer(ed.selection.getNode()), ci = -1, fi = -1, nl;
  92  
  93              nl = [];
  94              tinymce.walk(ed.getBody(), function(n) {
  95                  if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position))
  96                      nl.push(n); 
  97              }, 'childNodes');
  98  
  99              // Find z-indexes

 100              for (i=0; i<nl.length; i++) {
 101                  z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;
 102  
 103                  if (ci < 0 && nl[i] == le)
 104                      ci = i;
 105              }
 106  
 107              if (d < 0) {
 108                  // Move back

 109  
 110                  // Try find a lower one

 111                  for (i=0; i<z.length; i++) {
 112                      if (z[i] < z[ci]) {
 113                          fi = i;
 114                          break;
 115                      }
 116                  }
 117  
 118                  if (fi > -1) {
 119                      nl[ci].style.zIndex = z[fi];
 120                      nl[fi].style.zIndex = z[ci];
 121                  } else {
 122                      if (z[ci] > 0)
 123                          nl[ci].style.zIndex = z[ci] - 1;
 124                  }
 125              } else {
 126                  // Move forward

 127  
 128                  // Try find a higher one

 129                  for (i=0; i<z.length; i++) {
 130                      if (z[i] > z[ci]) {
 131                          fi = i;
 132                          break;
 133                      }
 134                  }
 135  
 136                  if (fi > -1) {
 137                      nl[ci].style.zIndex = z[fi];
 138                      nl[fi].style.zIndex = z[ci];
 139                  } else
 140                      nl[ci].style.zIndex = z[ci] + 1;
 141              }
 142  
 143              ed.execCommand('mceRepaint');
 144          },
 145  
 146          _getParentLayer : function(n) {
 147              return this.editor.dom.getParent(n, function(n) {
 148                  return n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position);
 149              });
 150          },
 151  
 152          _insertLayer : function() {
 153              var ed = this.editor, p = ed.dom.getPos(ed.dom.getParent(ed.selection.getNode(), '*'));
 154  
 155              ed.dom.add(ed.getBody(), 'div', {
 156                  style : {
 157                      position : 'absolute',
 158                      left : p.x,
 159                      top : (p.y > 20 ? p.y : 20),
 160                      width : 100,
 161                      height : 100
 162                  },
 163                  'class' : 'mceVisualAid'
 164              }, ed.selection.getContent() || ed.getLang('layer.content'));
 165          },
 166  
 167          _toggleAbsolute : function() {
 168              var ed = this.editor, le = this._getParentLayer(ed.selection.getNode());
 169  
 170              if (!le)
 171                  le = ed.dom.getParent(ed.selection.getNode(), 'DIV,P,IMG');
 172  
 173              if (le) {
 174                  if (le.style.position.toLowerCase() == "absolute") {
 175                      ed.dom.setStyles(le, {
 176                          position : '',
 177                          left : '',
 178                          top : '',
 179                          width : '',
 180                          height : ''
 181                      });
 182  
 183                      ed.dom.removeClass(le, 'mceVisualAid');
 184                  } else {
 185                      if (le.style.left == "")
 186                          le.style.left = 20 + 'px';
 187  
 188                      if (le.style.top == "")
 189                          le.style.top = 20 + 'px';
 190  
 191                      if (le.style.width == "")
 192                          le.style.width = le.width ? (le.width + 'px') : '100px';
 193  
 194                      if (le.style.height == "")
 195                          le.style.height = le.height ? (le.height + 'px') : '100px';
 196  
 197                      le.style.position = "absolute";
 198                      ed.addVisual(ed.getBody());
 199                  }
 200  
 201                  ed.execCommand('mceRepaint');
 202                  ed.nodeChanged();
 203              }
 204          }
 205      });
 206  
 207      // Register plugin

 208      tinymce.PluginManager.add('layer', tinymce.plugins.Layer);
 209  })();