silverstripe-framework/javascript/tiny_mce_improvements.js

ToolbarForm = Class.create();
ToolbarForm.prototype = {
	toggle: function(ed) {
		if(this.style.display == 'block') this.close(ed);
		else this.open(ed);
	},
	close: function(ed) {
		jQuery(this).dialog('close');
	},
	open: function(ed) {
		jQuery(this).dialog('open');
	},
	onsubmit: function() {
		return false;
	}
}

SideFormAction = Class.create();
SideFormAction.prototype = {
	initialize: function() {
		this.parentForm = this.parentNode;
		while(this.parentForm && this.parentForm.tagName.toLowerCase() != 'form') {
			this.parentForm = this.parentForm.parentNode;
		}
	},
	destroy: function() {
		this.parentForm = null;
		this.onclick = null;
		
	},
	onclick: function() {
		if(this.parentForm['handle' + this.name]) {
			try {
				this.parentForm['handle' + this.name]();
			} catch(er) {
				alert("An error occurred.  Please try again, or reload the CMS if the problem persists.\n\nError details: " + er.message);
			}
			jQuery(this).parents('form').dialog('close');
		} else {
			alert("Couldn't find form method handle" + this.name);
		}
		return false;
	}
}

ImageForm = Class.extend('ToolbarForm');
ImageForm.prototype = {
	initialize: function() {
		var __form = this;

		this.elements.AltText.onkeyup =  function() { __form.update_params('AltText'); };
		this.elements.ImageTitle.onkeyup =  function() { __form.update_params('ImageTitle'); };
		this.elements.CaptionText.onkeyup =  function() { __form.update_params('CaptionText'); };
		this.elements.AltText.onchange = function() { __form.update_params('AltText'); };
		this.elements.Width.onchange = function() { __form.update_params('Width'); };
		this.elements.Height.onchange = function() { __form.update_params('Height'); };
	},
	toggle: function(ed) {
		this.ToolbarForm.toggle(ed);
		
		this.resetFields();
	},
	resetFields: function() {
		this.elements.AltText.value = '';
		this.elements.ImageTitle.value = '';
		this.elements.CSSClass.value = 'left';
		this.elements.CaptionText.value = '';
		this.elements.CaptionText.disabled = '';
		this.elements.CSSClass.disabled = '';
	},
	destroy: function() {
		this.ToolbarForm = null;
		this.onsubmit = null;

		this.elements.AltText.onkeyup = null;
		this.elements.ImageTitle.onkeyup = null;
		this.elements.CSSClass.onkeyup = null;
		this.elements.CSSClass.onclick = null;
		this.elements.Width.onchange = null;
		this.elements.Height.onchange = null;
	},
	update_params: function(updatedFieldName) {
		var ed = tinyMCE.activeEditor;
		var imgElement = ed.selection.getNode();
		if (!imgElement || imgElement.tagName != 'IMG') {
			imgElement = this.selectedNode;
		}
		if(imgElement && imgElement.tagName == 'IMG') {
			imgElement.alt = this.elements.AltText.value;
			imgElement.title = this.elements.ImageTitle.value;
			imgElement.className = this.elements.CSSClass.value;

			var captionElement = imgElement.nextSibling;
			if (captionElement && captionElement.tagName == 'P') {
				if (typeof(captionElement.textContent) != 'undefined') {
					captionElement.textContent = this.elements.CaptionText.value;
				} else {
					captionElement.innerText = this.elements.CaptionText.value;
				}
			}
			
			// Proportionate updating of heights
			if(updatedFieldName == 'Width') {
				imgElement.width = this.elements.Width.value;
				imgElement.removeAttribute('height');
				this.elements.Height.value = imgElement.height;
				
			} else if(updatedFieldName == 'Height') {
				imgElement.height = this.elements.Height.value;
				imgElement.removeAttribute('width');
				this.elements.Width.value = imgElement.width;
			}
		} else if (this.selectedImageWidth && this.selectedImageHeight) {
			// Proportionate updating of heights
			var w = this.elements.Width.value, h = this.elements.Height.value;
			var aspect = this.selectedImageHeight / this.selectedImageWidth;
			if(updatedFieldName == 'Width') {
				this.elements.Height.value = Math.floor(w * aspect);
			} else if(updatedFieldName == 'Height') {
				this.elements.Width.value = Math.floor(h / aspect);
			}
		}
	},
	respondToNodeChange: function(ed) {
		var imgElement = ed.selection.getNode();
		if(imgElement && imgElement.tagName == 'IMG') {
			this.selectedNode = imgElement;
			this.elements.AltText.value = imgElement.alt;
			var captionElement = imgElement.nextSibling;
			if (captionElement && captionElement.tagName == 'P') {
				this.elements.CaptionText.value = captionElement.innerText || captionElement.textContent;
			} else {
				this.elements.CaptionText.disabled = 'disabled';
			}
			this.elements.ImageTitle.value = imgElement.title;
			this.elements.CSSClass.value = imgElement.className;
			this.elements.CSSClass.disabled = 'disabled';
			this.elements.Width.value = imgElement.style.width ? parseInt(imgElement.style.width) : imgElement.width;
			this.elements.Height.value = imgElement.style.height ? parseInt(imgElement.style.height) : imgElement.height;
		} else {
			this.selectedNode = null;
		}
	},
	
	selectImage: function(image) {
		if(this.selectedImage) {
			this.selectedImage.setAttribute("class", "");
			this.selectedImage.className = "";
		}
		this.selectedImage = image;
		this.selectedImage.setAttribute("class", "selectedImage");
		this.selectedImage.className = "selectedImage";
		
		try {
			var imgTag = image.getElementsByTagName('img')[0];
			this.selectedImageWidth = $('Form_EditorToolbarImageForm_Width').value = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
			this.selectedImageHeight = $('Form_EditorToolbarImageForm_Height').value = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
		} catch(er) {
		}
	},
	
	handleaction_insertimage: function() {
		if(this.selectedImage) {
			this.selectedImage.insert();
		}
	}
	
}

ImageThumbnail = Class.create();
ImageThumbnail.prototype = {
	destroy: function() {
		this.onclick = null;		
	},
	
	onclick: function(e) {
		$('Form_EditorToolbarImageForm').selectImage(this);
		return false;
	},
	
	insert: function() {
		var formObj = $('Form_EditorToolbarImageForm');
		var altText = formObj.elements.AltText.value;
		var titleText = formObj.elements.ImageTitle.value;
		var cssClass = formObj.elements.CSSClass.value;
		var baseURL = document.getElementsByTagName('base')[0].href;
		var relativeHref = this.href.substr(baseURL.length);
		var captionText = formObj.elements.CaptionText.value;
		
		if(!tinyMCE.selectedInstance) tinyMCE.selectedInstance = tinyMCE.activeEditor;
		if(tinyMCE.selectedInstance.contentWindow.focus) tinyMCE.selectedInstance.contentWindow.focus();
		
		var data = {
			'src' : relativeHref,
			'alt' : altText,
			'width' : $('Form_EditorToolbarImageForm_Width').value,
			'height' : $('Form_EditorToolbarImageForm_Height').value,
			'title' : titleText,
			'class' : cssClass
		};
		this.ssInsertImage(tinyMCE.activeEditor, data, captionText);
		
		jQuery(formObj).trigger('onafterinsert', data);
		
		return false;
	},
	
	/**
	 * Insert an image with the given attributes
	 */
	 ssInsertImage: function(ed, attributes, captionText) {
		el = ed.selection.getNode();
		var html;
		
		if(captionText) {
			html = '<div style="width: ' + attributes.width + 'px;" class="captionImage ' + attributes['class'] + '">';
			html += '<img id="__mce_tmp" />';
			html += '<p class="caption">' + captionText + '</p>';
			html += '</div>';
		} else {
			html = '<img id="__mce_tmp" />';
		}
		
		if(el && el.nodeName == 'IMG') {
			ed.dom.setAttribs(el, attributes);
		} else {
			ed.execCommand('mceInsertContent', false, html, {
				skip_undo : 1
			});
			
			ed.dom.setAttribs('__mce_tmp', attributes);
			ed.dom.setAttrib('__mce_tmp', 'id', '');
			ed.undoManager.add();
		}
	}
	
}

var selectedimage = false;

function reselectImage(transport) {
		if(selectedimage) {
			links = $('Image').getElementsByTagName('a');
			for(i =0; link = links[i]; i++) {
				var quesmark = link.href.lastIndexOf('?');
				image = link.href.substring(0, quesmark);
				if(image == selectedimage) {
					link.className = 'selectedImage';
					$('Form_EditorToolbarImageForm').selectedImage = link;
					break;
				}
			}
		}

		$('Image').reapplyBehaviour();
      this.addToTinyMCE = this.addToTinyMCE.bind(this);
}

FlashForm = Class.extend('ToolbarForm');
FlashForm.prototype = {
	initialize: function() {
	},
	destroy: function() {
		this.ToolbarForm = null;
		this.onsubmit = null;

	},
	update_params: function(event) {
		if(tinyMCE.imgElement) {
		}
	},
	respondToNodeChange: function() {
		if(tinyMCE.imgElement) {
		} else {
		}
	},
	selectFlash: function(flash) {
		if(this.selectedFlash) {
			this.selectedFlash.setAttribute("class", "");
		}
		this.selectedFlash = flash;
		this.selectedFlash.setAttribute("class", "selectedFlash");
	},
	handleaction_insertflash: function() {
		if(this.selectedFlash) {
			this.selectedFlash.insert();
		}
	}
}

FlashThumbnail = Class.create();
FlashThumbnail.prototype = {
	destroy: function() {
		this.onclick = null;		
	},
	
	onclick: function(e) {
		$('Form_EditorToolbarFlashForm').selectFlash(this);
		return false;
	},
	
	insert: function() {
		var formObj = $('Form_EditorToolbarFlashForm');
		var html = '';
		var baseURL = document.getElementsByTagName('base')[0].href;
		var relativeHref = this.href.substr(baseURL.length)
		var width = formObj.elements.Width.value;
		var height = formObj.elements.Height.value;
		
		if(!tinyMCE.selectedInstance) tinyMCE.selectedInstance = tinyMCE.activeEditor;
		if(tinyMCE.selectedInstance.contentWindow.focus) tinyMCE.selectedInstance.contentWindow.focus();

		if (width == "") width = 100;
		if (height == "") height = 100;
		
		html = '';
		html += '<object width="' + width +'" height="' + height +'" type="application/x-shockwave-flash" data="'+ relativeHref +'">';
		html += '<param value="'+ relativeHref +'" name="movie">';
		html += '</object>';
		
		tinyMCE.selectedInstance.execCommand("mceInsertContent", false, html);
		tinyMCE.selectedInstance.execCommand('mceRepaint');
	//	ed.execCommand('mceInsertContent', false, html, {skip_undo : 1}); 
	
		jQuery(formObj).trigger('onafterinsert', {html: html, href: relativeHref, width: width, height: height});
	
		return false;
	}
}

ImageForm.applyTo('#Form_EditorToolbarImageForm');
ImageThumbnail.applyTo('#Form_EditorToolbarImageForm div.thumbnailstrip a');
SideFormAction.applyTo('#Form_EditorToolbarImageForm .Actions input');

FlashForm.applyTo('#Form_EditorToolbarFlashForm');
FlashThumbnail.applyTo('#Form_EditorToolbarFlashForm div.thumbnailstrip a');
SideFormAction.applyTo('#Form_EditorToolbarFlashForm .Actions input');

/**
 * Image resizing
 */
MCEImageResizer = Class.create();
MCEImageResizer.prototype = {
	initialize: function() {
		//TinyMCE.prototype.addEvent(this, 'click', this._onclick);
	},
	_onclick: function() {
		var form = $('Form_EditorToolbarImageForm');
		if(form) {
			form.elements.AltText.value = this.alt;
			form.elements.ImageTitle.value = this.title;
			form.elements.CSSClass.value = this.className;
		}
	},
	onresizestart: function() {
		this.prepareForResize();
		this.heightDiff = 0;
	},
	onresizeend: function() {
		this.resizeTo(this.style.width, this.style.height);
	},
	onmouseup: function() {
		if(this.parentNode.parentNode.className.match(/(^|\b)specialImage($|\b)/)) {
			this.ownerDoc().setActive();
			this.parentNode.parentNode.setActive();
		}
	},
	prepareForResize: function() {
		if(this.aspectRatio == null) {
			this.aspectRatio = this.height / this.width;
		}
	
		this.originalWidth = this.width;
		this.originalHeight = this.height;
	},

	ownerDoc: function() {
		var f =this.parentNode;
		while(f && f.tagName.toLowerCase() != 'body') f = f.parentNode;
		return f;
	},
	
	resizeTo: function(width, height) {
		var newWidth = parseInt(height);
		var newHeight = parseInt(height) - this.heightDiff;
		if(isNaN(newWidth)) newWidth = this.width;
		if(isNaN(newHeight)) newHeight = this.height;
		
		// Constrain to width of the window
		if((this.offsetLeft + this.offsetWidth + 20) > this.ownerDoc().offsetWidth)
			newWidth += (this.ownerDoc().offsetWidth - this.offsetLeft - this.offsetWidth - 20);
	
		if(this.aspectRatio) {
			// Figure out which dimension we have altered more
			var heightChange = this.originalHeight / this.height; 
			if(heightChange < 1) heightChange = 1/heightChange;
			
			var widthChange = this.originalWidth / this.width;
			if(widthChange < 1) widthChange = 1/widthChange;
			
			// Scale by the more constant dimension (so if you edit the height, change width to suit)
			if(widthChange > heightChange)
				newHeight = newWidth * this.aspectRatio;
			else
				newWidth = newHeight / this.aspectRatio;
		}

		this.style.width = newWidth + 'px';
		this.style.height = newHeight + 'px';
		this.width = newWidth;
		this.height = newHeight;	
		
		// Auto-size special image holders
		if(this.parentNode.parentNode.className.match(/(^|\b)specialImage($|\b)/)) {
			this.parentNode.parentNode.style.width = newWidth + 'px';
		}
	}
}

MCEDLResizer = Class.extend('MCEImageResize');
MCEDLResizer.prototype = {
	onresizestart: function() {
		var img = this.getElementsByTagName('img')[0];
		img.prepareForResize();
		img.heightDiff = this.offsetHeight - img.height;
	},
	onresizeend: function() {
		this.getElementsByTagName('img')[0].resizeTo(this.style.width, this.style.height);
	}
}

/**
 * These callback hook it into tinymce.  They need to be referenced in the TinyMCE config.
 */
function sapphiremce_setupcontent(editor_id, body, doc) {
	var allImages = body.getElementsByTagName('img');
	var i,img;
	for(i=0;img=allImages[i];i++) {
		behaveAs(img, MCEImageResizer);
	}

	var allDLs = body.getElementsByTagName('img');
	for(i=0;img=allDLs[i];i++) {
		if(img.className.match(/(^|\b)specialImage($|\b)/)) {
			behaveAs(img, MCEDLResizer);
		}
	}
}

function sapphiremce_cleanup(type, value) {
	if(type == 'get_from_editor') {
		// replace indented text with a <blockquote>
		value = value.replace(/<p [^>]*margin-left[^>]*>([^\n|\n\015|\015\n]*)<\/p>/ig,"<blockquote><p>$1</p></blockquote>");
	
		// replace VML pixel image references with image tags - experimental
		value = value.replace(/<[a-z0-9]+:imagedata[^>]+src="?([^> "]+)"?[^>]*>/ig,"<img src=\"$1\">");
		
		// Word comments
		value = value.replace(new RegExp('<(!--)([^>]*)(--)>', 'g'), ""); 
			
		// kill class=mso??? and on mouse* tags  
		value = value.replace(/([ \f\r\t\n\'\"])class=mso[a-z0-9]+[^ >]+/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"]class=")mso[a-z0-9]+[^ ">]+ /ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])class="mso[a-z0-9]+[^">]+"/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");
		value = value.replace(/ >/ig, ">"); 
	
		// remove everything that's in a closing tag
		value = value.replace(/<(\/[A-Za-z0-9]+)[ \f\r\t\n]+[^>]*>/ig,"<$1>");		
	}

	if(type == 'get_from_editor_dom') {
		var allImages =value.getElementsByTagName('img');
		var i,img;

		for(i=0;img=allImages[i];i++) {
			img.onresizestart = null;
			img.onresizeend = null;
			img.removeAttribute('onresizestart');
			img.removeAttribute('onresizeend');
		}

		var allDLs =value.getElementsByTagName('img');
		for(i=0;img=allDLs[i];i++) {
			if(img.className.match(/(^|\b)specialImage($|\b)/)) {
				img.onresizestart = null;
				img.onresizeend = null;
				img.removeAttribute('onresizestart');
				img.removeAttribute('onresizeend');
			}
		}
		
	}
	return value;
}