/**
* plugin.js
*
* Copyright, Moxiecode Systems AB
* Released under LGPL License.
*
* License: http://www.tinymce.com/license
* Contributing: http://www.tinymce.com/contributing
*/
/*global tinymce:true */
tinymce.PluginManager.add('layer', function(editor) {
function getParentLayer(node) {
do {
if (node.className && node.className.indexOf('mceItemLayer') != -1) {
return node;
}
} while ((node = node.parentNode));
}
function visualAid(e) {
var dom = editor.dom;
tinymce.each(dom.select('div,p', e), function(e) {
if (/^(absolute|relative|fixed)$/i.test(e.style.position)) {
if (e.hasVisual) {
dom.addClass(e, 'mceItemVisualAid');
} else {
dom.removeClass(e, 'mceItemVisualAid');
}
dom.addClass(e, 'mceItemLayer');
}
});
}
function move(d) {
var i, z = [], le = getParentLayer(editor.selection.getNode()), ci = -1, fi = -1, nl;
nl = [];
tinymce.walk(editor.getBody(), function(n) {
if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position)) {
nl.push(n);
}
}, 'childNodes');
// Find z-indexes
for (i = 0; i < nl.length; i++) {
z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex, 10) : 0;
if (ci < 0 && nl[i] == le) {
ci = i;
}
}
if (d < 0) {
// Move back
// Try find a lower one
for (i = 0; i < z.length; i++) {
if (z[i] < z[ci]) {
fi = i;
break;
}
}
if (fi > -1) {
nl[ci].style.zIndex = z[fi];
nl[fi].style.zIndex = z[ci];
} else {
if (z[ci] > 0) {
nl[ci].style.zIndex = z[ci] - 1;
}
}
} else {
// Move forward
// Try find a higher one
for (i = 0; i < z.length; i++) {
if (z[i] > z[ci]) {
fi = i;
break;
}
}
if (fi > -1) {
nl[ci].style.zIndex = z[fi];
nl[fi].style.zIndex = z[ci];
} else {
nl[ci].style.zIndex = z[ci] + 1;
}
}
editor.execCommand('mceRepaint');
}
function insertLayer() {
var dom = editor.dom, p = dom.getPos(dom.getParent(editor.selection.getNode(), '*'));
var body = editor.getBody();
editor.dom.add(body, 'div', {
style: {
position: 'absolute',
left: p.x,
top: (p.y > 20 ? p.y : 20),
width: 100,
height: 100
},
'class': 'mceItemVisualAid mceItemLayer'
}, editor.selection.getContent() || editor.getLang('layer.content'));
// Workaround for IE where it messes up the JS engine if you insert a layer on IE 6,7
if (tinymce.Env.ie) {
dom.setHTML(body, body.innerHTML);
}
}
function toggleAbsolute() {
var le = getParentLayer(editor.selection.getNode());
if (!le) {
le = editor.dom.getParent(editor.selection.getNode(), 'DIV,P,IMG');
}
if (le) {
if (le.style.position.toLowerCase() == "absolute") {
editor.dom.setStyles(le, {
position: '',
left: '',
top: '',
width: '',
height: ''
});
editor.dom.removeClass(le, 'mceItemVisualAid');
editor.dom.removeClass(le, 'mceItemLayer');
} else {
if (!le.style.left) {
le.style.left = 20 + 'px';
}
if (!le.style.top) {
le.style.top = 20 + 'px';
}
if (!le.style.width) {
le.style.width = le.width ? (le.width + 'px') : '100px';
}
if (!le.style.height) {
le.style.height = le.height ? (le.height + 'px') : '100px';
}
le.style.position = "absolute";
editor.dom.setAttrib(le, 'data-mce-style', '');
editor.addVisual(editor.getBody());
}
editor.execCommand('mceRepaint');
editor.nodeChanged();
}
}
// Register commands
editor.addCommand('mceInsertLayer', insertLayer);
editor.addCommand('mceMoveForward', function() {
move(1);
});
editor.addCommand('mceMoveBackward', function() {
move(-1);
});
editor.addCommand('mceMakeAbsolute', function() {
toggleAbsolute();
});
// Register buttons
editor.addButton('moveforward', {title: 'layer.forward_desc', cmd: 'mceMoveForward'});
editor.addButton('movebackward', {title: 'layer.backward_desc', cmd: 'mceMoveBackward'});
editor.addButton('absolute', {title: 'layer.absolute_desc', cmd: 'mceMakeAbsolute'});
editor.addButton('insertlayer', {title: 'layer.insertlayer_desc', cmd: 'mceInsertLayer'});
editor.on('init', function() {
if (tinymce.Env.ie) {
editor.getDoc().execCommand('2D-Position', false, true);
}
});
// Remove serialized styles when selecting a layer since it might be changed by a drag operation
editor.on('mouseup', function(e) {
var layer = getParentLayer(e.target);
if (layer) {
editor.dom.setAttrib(layer, 'data-mce-style', '');
}
});
// Fixes edit focus issues with layers on Gecko
// This will enable designMode while inside a layer and disable it when outside
editor.on('mousedown', function(e) {
var node = e.target, doc = editor.getDoc(), parent;
if (tinymce.Env.gecko) {
if (getParentLayer(node)) {
if (doc.designMode !== 'on') {
doc.designMode = 'on';
// Repaint caret
node = doc.body;
parent = node.parentNode;
parent.removeChild(node);
parent.appendChild(node);
}
} else if (doc.designMode == 'on') {
doc.designMode = 'off';
}
}
});
editor.on('NodeChange', visualAid);
});