webcit/tiny_mce/plugins/layer/editor_plugin_src.js

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