/**\r
- * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $\r
+ * editor_plugin_src.js\r
*\r
- * @author Moxiecode\r
- * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.\r
+ * Copyright 2009, Moxiecode Systems AB\r
+ * Released under LGPL License.\r
+ *\r
+ * License: http://tinymce.moxiecode.com/license\r
+ * Contributing: http://tinymce.moxiecode.com/contributing\r
*/\r
\r
-/* Import plugin specific language pack */\r
-tinyMCE.importPluginLanguagePack('layer');\r
-\r
-var TinyMCE_LayerPlugin = {\r
- getInfo : function() {\r
- return {\r
- longname : 'Layer',\r
- author : 'Moxiecode Systems AB',\r
- authorurl : 'http://tinymce.moxiecode.com',\r
- infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',\r
- version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion\r
- };\r
- },\r
-\r
- initInstance : function(inst) {\r
- if (tinyMCE.isMSIE && !tinyMCE.isOpera)\r
- inst.getDoc().execCommand('2D-Position');\r
- },\r
-\r
- handleEvent : function(e) {\r
- var inst = tinyMCE.selectedInstance;\r
- var w = inst.getWin(), le = inst._lastStyleElm, e;\r
-\r
- if (tinyMCE.isGecko) {\r
- e = this._getParentLayer(inst.getFocusElement());\r
-\r
- if (e) {\r
- if (!inst._lastStyleElm) {\r
- e.style.overflow = 'auto';\r
- inst._lastStyleElm = e;\r
- }\r
- } else if (le) {\r
- le = inst._lastStyleElm;\r
- le.style.width = le.scrollWidth + 'px';\r
- le.style.height = le.scrollHeight + 'px';\r
- le.style.overflow = '';\r
- inst._lastStyleElm = null;\r
- }\r
- }\r
-\r
- return true;\r
- },\r
-\r
- handleVisualAid : function(el, deep, state, inst) {\r
- var nl = inst.getDoc().getElementsByTagName("div"), i;\r
-\r
- for (i=0; i<nl.length; i++) {\r
- if (new RegExp('absolute|relative|static', 'gi').test(nl[i].style.position)) {\r
- if (state)\r
- tinyMCE.addCSSClass(nl[i], 'mceVisualAid');\r
- else\r
- tinyMCE.removeCSSClass(nl[i], 'mceVisualAid'); \r
+(function() {\r
+ tinymce.create('tinymce.plugins.Layer', {\r
+ init : function(ed, url) {\r
+ var t = this;\r
+\r
+ t.editor = ed;\r
+\r
+ // Register commands\r
+ ed.addCommand('mceInsertLayer', t._insertLayer, t);\r
+\r
+ ed.addCommand('mceMoveForward', function() {\r
+ t._move(1);\r
+ });\r
+\r
+ ed.addCommand('mceMoveBackward', function() {\r
+ t._move(-1);\r
+ });\r
+\r
+ ed.addCommand('mceMakeAbsolute', function() {\r
+ t._toggleAbsolute();\r
+ });\r
+\r
+ // Register buttons\r
+ ed.addButton('moveforward', {title : 'layer.forward_desc', cmd : 'mceMoveForward'});\r
+ ed.addButton('movebackward', {title : 'layer.backward_desc', cmd : 'mceMoveBackward'});\r
+ ed.addButton('absolute', {title : 'layer.absolute_desc', cmd : 'mceMakeAbsolute'});\r
+ ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'});\r
+\r
+ ed.onInit.add(function() {\r
+ if (tinymce.isIE)\r
+ ed.getDoc().execCommand('2D-Position', false, true);\r
+ });\r
+\r
+ ed.onNodeChange.add(t._nodeChange, t);\r
+ ed.onVisualAid.add(t._visualAid, t);\r
+ },\r
+\r
+ getInfo : function() {\r
+ return {\r
+ longname : 'Layer',\r
+ author : 'Moxiecode Systems AB',\r
+ authorurl : 'http://tinymce.moxiecode.com',\r
+ infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',\r
+ version : tinymce.majorVersion + "." + tinymce.minorVersion\r
+ };\r
+ },\r
+\r
+ // Private methods\r
+\r
+ _nodeChange : function(ed, cm, n) {\r
+ var le, p;\r
+\r
+ le = this._getParentLayer(n);\r
+ p = ed.dom.getParent(n, 'DIV,P,IMG');\r
+\r
+ if (!p) {\r
+ cm.setDisabled('absolute', 1);\r
+ cm.setDisabled('moveforward', 1);\r
+ cm.setDisabled('movebackward', 1);\r
+ } else {\r
+ cm.setDisabled('absolute', 0);\r
+ cm.setDisabled('moveforward', !le);\r
+ cm.setDisabled('movebackward', !le);\r
+ cm.setActive('absolute', le && le.style.position.toLowerCase() == "absolute");\r
}\r
- }\r
- },\r
-\r
- getControlHTML : function(cn) {\r
- switch (cn) {\r
- case "moveforward":\r
- return tinyMCE.getButtonHTML(cn, 'lang_layer_forward_desc', '{$pluginurl}/images/moveforward.gif', 'mceMoveForward', true);\r
-\r
- case "movebackward":\r
- return tinyMCE.getButtonHTML(cn, 'lang_layer_backward_desc', '{$pluginurl}/images/movebackward.gif', 'mceMoveBackward', true);\r
-\r
- case "absolute":\r
- return tinyMCE.getButtonHTML(cn, 'lang_layer_absolute_desc', '{$pluginurl}/images/absolute.gif', 'mceMakeAbsolute', true);\r
-\r
- case "insertlayer":\r
- return tinyMCE.getButtonHTML(cn, 'lang_layer_insertlayer_desc', '{$pluginurl}/images/insertlayer.gif', 'mceInsertLayer', true);\r
- }\r
-\r
- return "";\r
- },\r
-\r
- execCommand : function(editor_id, element, command, user_interface, value) {\r
- // Handle commands\r
- switch (command) {\r
- case "mceInsertLayer":\r
- this._insertLayer();\r
- return true;\r
-\r
- case "mceMoveForward":\r
- this._move(1);\r
- return true;\r
-\r
- case "mceMoveBackward":\r
- this._move(-1);\r
- return true;\r
-\r
- case "mceMakeAbsolute":\r
- this._toggleAbsolute();\r
- return true;\r
- }\r
+ },\r
\r
- // Pass to next handler in chain\r
- return false;\r
- },\r
+ // Private methods\r
\r
- handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {\r
- var inst = tinyMCE.getInstanceById(editor_id);\r
- var le = this._getParentLayer(inst.getFocusElement());\r
- var p = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');\r
+ _visualAid : function(ed, e, s) {\r
+ var dom = ed.dom;\r
\r
- tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonDisabled');\r
- tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonDisabled');\r
- tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonDisabled');\r
-\r
- if (p)\r
- tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonNormal');\r
-\r
- if (le && le.style.position.toLowerCase() == "absolute") {\r
- tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonSelected');\r
- tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonNormal');\r
- tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonNormal');\r
- }\r
- },\r
+ tinymce.each(dom.select('div,p', e), function(e) {\r
+ if (/^(absolute|relative|static)$/i.test(e.style.position)) {\r
+ if (s)\r
+ dom.addClass(e, 'mceItemVisualAid');\r
+ else\r
+ dom.removeClass(e, 'mceItemVisualAid'); \r
+ }\r
+ });\r
+ },\r
\r
- // Private plugin specific methods\r
+ _move : function(d) {\r
+ var ed = this.editor, i, z = [], le = this._getParentLayer(ed.selection.getNode()), ci = -1, fi = -1, nl;\r
\r
- _move : function(d) {\r
- var inst = tinyMCE.selectedInstance, i, z = new Array();\r
- var le = this._getParentLayer(inst.getFocusElement()), ci = -1, fi = -1;\r
- var nl = tinyMCE.selectNodes(inst.getBody(), function(n) {\r
- return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);\r
- });\r
+ nl = [];\r
+ tinymce.walk(ed.getBody(), function(n) {\r
+ if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position))\r
+ nl.push(n); \r
+ }, 'childNodes');\r
\r
- // Find z-indexes\r
- for (i=0; i<nl.length; i++) {\r
- z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;\r
+ // Find z-indexes\r
+ for (i=0; i<nl.length; i++) {\r
+ z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;\r
\r
- if (ci < 0 && nl[i] == le)\r
- ci = i;\r
- }\r
+ if (ci < 0 && nl[i] == le)\r
+ ci = i;\r
+ }\r
\r
- if (d < 0) {\r
- // Move back\r
+ if (d < 0) {\r
+ // Move back\r
\r
- // Try find a lower one\r
- for (i=0; i<z.length; i++) {\r
- if (z[i] < z[ci]) {\r
- fi = i;\r
- break;\r
+ // Try find a lower one\r
+ for (i=0; i<z.length; i++) {\r
+ if (z[i] < z[ci]) {\r
+ fi = i;\r
+ break;\r
+ }\r
}\r
- }\r
\r
- if (fi > -1) {\r
- nl[ci].style.zIndex = z[fi];\r
- nl[fi].style.zIndex = z[ci];\r
- } else {\r
- if (z[ci] > 0)\r
- nl[ci].style.zIndex = z[ci] - 1;\r
- }\r
- } else {\r
- // Move forward\r
-\r
- // Try find a higher one\r
- for (i=0; i<z.length; i++) {\r
- if (z[i] > z[ci]) {\r
- fi = i;\r
- break;\r
+ if (fi > -1) {\r
+ nl[ci].style.zIndex = z[fi];\r
+ nl[fi].style.zIndex = z[ci];\r
+ } else {\r
+ if (z[ci] > 0)\r
+ nl[ci].style.zIndex = z[ci] - 1;\r
}\r
- }\r
-\r
- if (fi > -1) {\r
- nl[ci].style.zIndex = z[fi];\r
- nl[fi].style.zIndex = z[ci];\r
- } else\r
- nl[ci].style.zIndex = z[ci] + 1;\r
- }\r
-\r
- inst.repaint();\r
- },\r
-\r
- _getParentLayer : function(n) {\r
- return tinyMCE.getParentNode(n, function(n) {\r
- return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);\r
- });\r
- },\r
-\r
- _insertLayer : function() {\r
- var inst = tinyMCE.selectedInstance;\r
- var e = tinyMCE.getParentElement(inst.getFocusElement());\r
- var p = tinyMCE.getAbsPosition(e);\r
- var d = inst.getDoc();\r
- var ne = d.createElement('div');\r
- var h = inst.selection.getSelectedHTML();\r
-\r
- // Move div\r
- ne.style.position = 'absolute';\r
- ne.style.left = p.absLeft + 'px';\r
- ne.style.top = (p.absTop > 20 ? p.absTop : 20) + 'px';\r
- ne.style.width = '100px';\r
- ne.style.height = '100px';\r
- ne.className = 'mceVisualAid';\r
-\r
- if (!h)\r
- h = tinyMCE.getLang('lang_layer_content');\r
-\r
- ne.innerHTML = h;\r
-\r
- // Add it\r
- d.body.appendChild(ne);\r
- },\r
-\r
- _toggleAbsolute : function() {\r
- var inst = tinyMCE.selectedInstance;\r
- var le = this._getParentLayer(inst.getFocusElement());\r
-\r
- if (le == null)\r
- le = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');\r
-\r
- if (le) {\r
- if (le.style.position.toLowerCase() == "absolute") {\r
- le.style.position = "";\r
- le.style.left = "";\r
- le.style.top = "";\r
} else {\r
- le.style.position = "absolute";\r
-\r
- if (le.style.left == "")\r
- le.style.left = 20 + 'px';\r
-\r
- if (le.style.top == "")\r
- le.style.top = 20 + 'px';\r
+ // Move forward\r
+\r
+ // Try find a higher one\r
+ for (i=0; i<z.length; i++) {\r
+ if (z[i] > z[ci]) {\r
+ fi = i;\r
+ break;\r
+ }\r
+ }\r
\r
- if (le.style.width == "")\r
- le.style.width = le.width ? (le.width + 'px') : '100px';\r
+ if (fi > -1) {\r
+ nl[ci].style.zIndex = z[fi];\r
+ nl[fi].style.zIndex = z[ci];\r
+ } else\r
+ nl[ci].style.zIndex = z[ci] + 1;\r
+ }\r
\r
- if (le.style.height == "")\r
- le.style.height = le.height ? (le.height + 'px') : '100px';\r
+ ed.execCommand('mceRepaint');\r
+ },\r
+\r
+ _getParentLayer : function(n) {\r
+ return this.editor.dom.getParent(n, function(n) {\r
+ return n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position);\r
+ });\r
+ },\r
+\r
+ _insertLayer : function() {\r
+ var ed = this.editor, p = ed.dom.getPos(ed.dom.getParent(ed.selection.getNode(), '*'));\r
+\r
+ ed.dom.add(ed.getBody(), 'div', {\r
+ style : {\r
+ position : 'absolute',\r
+ left : p.x,\r
+ top : (p.y > 20 ? p.y : 20),\r
+ width : 100,\r
+ height : 100\r
+ },\r
+ 'class' : 'mceItemVisualAid'\r
+ }, ed.selection.getContent() || ed.getLang('layer.content'));\r
+ },\r
+\r
+ _toggleAbsolute : function() {\r
+ var ed = this.editor, le = this._getParentLayer(ed.selection.getNode());\r
+\r
+ if (!le)\r
+ le = ed.dom.getParent(ed.selection.getNode(), 'DIV,P,IMG');\r
+\r
+ if (le) {\r
+ if (le.style.position.toLowerCase() == "absolute") {\r
+ ed.dom.setStyles(le, {\r
+ position : '',\r
+ left : '',\r
+ top : '',\r
+ width : '',\r
+ height : ''\r
+ });\r
+\r
+ ed.dom.removeClass(le, 'mceItemVisualAid');\r
+ } else {\r
+ if (le.style.left == "")\r
+ le.style.left = 20 + 'px';\r
+\r
+ if (le.style.top == "")\r
+ le.style.top = 20 + 'px';\r
+\r
+ if (le.style.width == "")\r
+ le.style.width = le.width ? (le.width + 'px') : '100px';\r
+\r
+ if (le.style.height == "")\r
+ le.style.height = le.height ? (le.height + 'px') : '100px';\r
+\r
+ le.style.position = "absolute";\r
+\r
+ ed.dom.setAttrib(le, 'data-mce-style', '');\r
+ ed.addVisual(ed.getBody());\r
+ }\r
\r
- tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);\r
+ ed.execCommand('mceRepaint');\r
+ ed.nodeChanged();\r
}\r
-\r
- inst.repaint();\r
- tinyMCE.triggerNodeChange();\r
}\r
- }\r
-};\r
+ });\r
\r
-tinyMCE.addPlugin("layer", TinyMCE_LayerPlugin);\r
+ // Register plugin\r
+ tinymce.PluginManager.add('layer', tinymce.plugins.Layer);\r
+})();
\ No newline at end of file