template.js.tinymce.plugins.layer.plugin.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of struts2-jquery-richtext-plugin Show documentation
There is a newer version: 5.0.6
Show newest version
/**
 * plugin.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * 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);
});