*/\r
\r
(function() {\r
+ function findParentLayer(node) {\r
+ do {\r
+ if (node.className && node.className.indexOf('mceItemLayer') != -1) {\r
+ return node;\r
+ }\r
+ } while (node = node.parentNode);\r
+ };\r
+\r
tinymce.create('tinymce.plugins.Layer', {\r
init : function(ed, url) {\r
var t = this;\r
ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'});\r
\r
ed.onInit.add(function() {\r
+ var dom = ed.dom;\r
+\r
if (tinymce.isIE)\r
ed.getDoc().execCommand('2D-Position', false, true);\r
});\r
\r
+ // Remove serialized styles when selecting a layer since it might be changed by a drag operation\r
+ ed.onMouseUp.add(function(ed, e) {\r
+ var layer = findParentLayer(e.target);\r
+ \r
+ if (layer) {\r
+ ed.dom.setAttrib(layer, 'data-mce-style', '');\r
+ }\r
+ });\r
+\r
+ // Fixes edit focus issues with layers on Gecko\r
+ // This will enable designMode while inside a layer and disable it when outside\r
+ ed.onMouseDown.add(function(ed, e) {\r
+ var node = e.target, doc = ed.getDoc(), parent;\r
+\r
+ if (tinymce.isGecko) {\r
+ if (findParentLayer(node)) {\r
+ if (doc.designMode !== 'on') {\r
+ doc.designMode = 'on';\r
+\r
+ // Repaint caret\r
+ node = doc.body;\r
+ parent = node.parentNode;\r
+ parent.removeChild(node);\r
+ parent.appendChild(node);\r
+ }\r
+ } else if (doc.designMode == 'on') {\r
+ doc.designMode = 'off';\r
+ }\r
+ }\r
+ });\r
+\r
ed.onNodeChange.add(t._nodeChange, t);\r
ed.onVisualAid.add(t._visualAid, t);\r
},\r
var dom = ed.dom;\r
\r
tinymce.each(dom.select('div,p', e), function(e) {\r
- if (/^(absolute|relative|static)$/i.test(e.style.position)) {\r
+ if (/^(absolute|relative|fixed)$/i.test(e.style.position)) {\r
if (s)\r
dom.addClass(e, 'mceItemVisualAid');\r
else\r
- dom.removeClass(e, 'mceItemVisualAid'); \r
+ dom.removeClass(e, 'mceItemVisualAid');\r
+\r
+ dom.addClass(e, 'mceItemLayer');\r
}\r
});\r
},\r
},\r
\r
_insertLayer : function() {\r
- var ed = this.editor, p = ed.dom.getPos(ed.dom.getParent(ed.selection.getNode(), '*'));\r
+ var ed = this.editor, dom = ed.dom, p = dom.getPos(dom.getParent(ed.selection.getNode(), '*')), body = ed.getBody();\r
\r
- ed.dom.add(ed.getBody(), 'div', {\r
+ ed.dom.add(body, 'div', {\r
style : {\r
position : 'absolute',\r
left : p.x,\r
width : 100,\r
height : 100\r
},\r
- 'class' : 'mceItemVisualAid'\r
+ 'class' : 'mceItemVisualAid mceItemLayer'\r
}, ed.selection.getContent() || ed.getLang('layer.content'));\r
+\r
+ // Workaround for IE where it messes up the JS engine if you insert a layer on IE 6,7\r
+ if (tinymce.isIE)\r
+ dom.setHTML(body, body.innerHTML);\r
},\r
\r
_toggleAbsolute : function() {\r
});\r
\r
ed.dom.removeClass(le, 'mceItemVisualAid');\r
+ ed.dom.removeClass(le, 'mceItemLayer');\r
} else {\r
if (le.style.left == "")\r
le.style.left = 20 + 'px';\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