include/javascript/tiny_mce/plugins/layer/editor_plugin_src.js

   1 /**
   2  * editor_plugin_src.js
   3  *
   4  * Copyright 2009, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://tinymce.moxiecode.com/license
   8  * Contributing: http://tinymce.moxiecode.com/contributing
   9  */
  10
  11 (function() {
  12         tinymce.create('tinymce.plugins.Layer', {
  13                 init : function(ed, url) {
  14                         var t = this;
  15
  16                         t.editor = ed;
  17
  18                         // Register commands
  19                         ed.addCommand('mceInsertLayer', t._insertLayer, t);
  20
  21                         ed.addCommand('mceMoveForward', function() {
  22                                 t._move(1);
  23                         });
  24
  25                         ed.addCommand('mceMoveBackward', function() {
  26                                 t._move(-1);
  27                         });
  28
  29                         ed.addCommand('mceMakeAbsolute', function() {
  30                                 t._toggleAbsolute();
  31                         });
  32
  33                         // Register buttons
  34                         ed.addButton('moveforward', {title : 'layer.forward_desc', cmd : 'mceMoveForward'});
  35                         ed.addButton('movebackward', {title : 'layer.backward_desc', cmd : 'mceMoveBackward'});
  36                         ed.addButton('absolute', {title : 'layer.absolute_desc', cmd : 'mceMakeAbsolute'});
  37                         ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'});
  38
  39                         ed.onInit.add(function() {
  40                                 if (tinymce.isIE)
  41                                         ed.getDoc().execCommand('2D-Position', false, true);
  42                         });
  43
  44                         ed.onNodeChange.add(t._nodeChange, t);
  45                         ed.onVisualAid.add(t._visualAid, t);
  46                 },
  47
  48                 getInfo : function() {
  49                         return {
  50                                 longname : 'Layer',
  51                                 author : 'Moxiecode Systems AB',
  52                                 authorurl : 'http://tinymce.moxiecode.com',
  53                                 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',
  54                                 version : tinymce.majorVersion + "." + tinymce.minorVersion
  55                         };
  56                 },
  57
  58                 // Private methods
  59
  60                 _nodeChange : function(ed, cm, n) {
  61                         var le, p;
  62
  63                         le = this._getParentLayer(n);
  64                         p = ed.dom.getParent(n, 'DIV,P,IMG');
  65
  66                         if (!p) {
  67                                 cm.setDisabled('absolute', 1);
  68                                 cm.setDisabled('moveforward', 1);
  69                                 cm.setDisabled('movebackward', 1);
  70                         } else {
  71                                 cm.setDisabled('absolute', 0);
  72                                 cm.setDisabled('moveforward', !le);
  73                                 cm.setDisabled('movebackward', !le);
  74                                 cm.setActive('absolute', le && le.style.position.toLowerCase() == "absolute");
  75                         }
  76                 },
  77
  78                 // Private methods
  79
  80                 _visualAid : function(ed, e, s) {
  81                         var dom = ed.dom;
  82
  83                         tinymce.each(dom.select('div,p', e), function(e) {
  84                                 if (/^(absolute|relative|static)$/i.test(e.style.position)) {
  85                                         if (s)
  86                                                 dom.addClass(e, 'mceItemVisualAid');
  87                                         else
  88                                                 dom.removeClass(e, 'mceItemVisualAid');
  89                                 }
  90                         });
  91                 },
  92
  93                 _move : function(d) {
  94                         var ed = this.editor, i, z = [], le = this._getParentLayer(ed.selection.getNode()), ci = -1, fi = -1, nl;
  95
  96                         nl = [];
  97                         tinymce.walk(ed.getBody(), function(n) {
  98                                 if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position))
  99                                         nl.push(n);
 100                         }, 'childNodes');
 101
 102                         // Find z-indexes
 103                         for (i=0; i<nl.length; i++) {
 104                                 z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;
 105
 106                                 if (ci < 0 && nl[i] == le)
 107                                         ci = i;
 108                         }
 109
 110                         if (d < 0) {
 111                                 // Move back
 112
 113                                 // Try find a lower one
 114                                 for (i=0; i<z.length; i++) {
 115                                         if (z[i] < z[ci]) {
 116                                                 fi = i;
 117                                                 break;
 118                                         }
 119                                 }
 120
 121                                 if (fi > -1) {
 122                                         nl[ci].style.zIndex = z[fi];
 123                                         nl[fi].style.zIndex = z[ci];
 124                                 } else {
 125                                         if (z[ci] > 0)
 126                                                 nl[ci].style.zIndex = z[ci] - 1;
 127                                 }
 128                         } else {
 129                                 // Move forward
 130
 131                                 // Try find a higher one
 132                                 for (i=0; i<z.length; i++) {
 133                                         if (z[i] > z[ci]) {
 134                                                 fi = i;
 135                                                 break;
 136                                         }
 137                                 }
 138
 139                                 if (fi > -1) {
 140                                         nl[ci].style.zIndex = z[fi];
 141                                         nl[fi].style.zIndex = z[ci];
 142                                 } else
 143                                         nl[ci].style.zIndex = z[ci] + 1;
 144                         }
 145
 146                         ed.execCommand('mceRepaint');
 147                 },
 148
 149                 _getParentLayer : function(n) {
 150                         return this.editor.dom.getParent(n, function(n) {
 151                                 return n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position);
 152                         });
 153                 },
 154
 155                 _insertLayer : function() {
 156                         var ed = this.editor, p = ed.dom.getPos(ed.dom.getParent(ed.selection.getNode(), '*'));
 157
 158                         ed.dom.add(ed.getBody(), 'div', {
 159                                 style : {
 160                                         position : 'absolute',
 161                                         left : p.x,
 162                                         top : (p.y > 20 ? p.y : 20),
 163                                         width : 100,
 164                                         height : 100
 165                                 },
 166                                 'class' : 'mceItemVisualAid'
 167                         }, ed.selection.getContent() || ed.getLang('layer.content'));
 168                 },
 169
 170                 _toggleAbsolute : function() {
 171                         var ed = this.editor, le = this._getParentLayer(ed.selection.getNode());
 172
 173                         if (!le)
 174                                 le = ed.dom.getParent(ed.selection.getNode(), 'DIV,P,IMG');
 175
 176                         if (le) {
 177                                 if (le.style.position.toLowerCase() == "absolute") {
 178                                         ed.dom.setStyles(le, {
 179                                                 position : '',
 180                                                 left : '',
 181                                                 top : '',
 182                                                 width : '',
 183                                                 height : ''
 184                                         });
 185
 186                                         ed.dom.removeClass(le, 'mceItemVisualAid');
 187                                 } else {
 188                                         if (le.style.left == "")
 189                                                 le.style.left = 20 + 'px';
 190
 191                                         if (le.style.top == "")
 192                                                 le.style.top = 20 + 'px';
 193
 194                                         if (le.style.width == "")
 195                                                 le.style.width = le.width ? (le.width + 'px') : '100px';
 196
 197                                         if (le.style.height == "")
 198                                                 le.style.height = le.height ? (le.height + 'px') : '100px';
 199
 200                                         le.style.position = "absolute";
 201
 202                                         ed.dom.setAttrib(le, 'data-mce-style', '');
 203                                         ed.addVisual(ed.getBody());
 204                                 }
 205
 206                                 ed.execCommand('mceRepaint');
 207                                 ed.nodeChanged();
 208                         }
 209                 }
 210         });
 211
 212         // Register plugin
 213         tinymce.PluginManager.add('layer', tinymce.plugins.Layer);
 214 })();