snappymail/dev/Common/HtmlEditorWrapper.js

/**
 * @constructor
 * @param {Object} oElement
 * @param {Function=} fOnBlur
 * @param {Function=} fOnReady
 */
function HtmlEditorWrapper(oElement, fOnBlur, fOnReady)
{
	var self = this;

	self.editor = null;
	self.bHtml = true;
	self.bPlainDirty = false;
	self.iBlurTimer = 0;
	
	self.fOnBlur = fOnBlur || null;
	self.fOnReady = fOnReady || null;
	
	self.$element = $(oElement);

	self.LANG = {
		'HTML': 'Rich formatting',
		'PLAIN': 'Plain text',
		'FULL': 'Fullscreen'
	};
	
	self.init();
}

HtmlEditorWrapper.prototype.addInputFormatStyle = function ()
{
	if (this.$plain)
	{
		this.$plain.addClass('styled');
	}

	if (this.$html)
	{
		this.$html.addClass('styled');
	}
};

HtmlEditorWrapper.prototype.setupLang = function (sHtml, sPlain, sFullscreen)
{
	this.LANG = {
		'HTML': sHtml || this.LANG.HTML,
		'PLAIN': sPlain || this.LANG.PLAIN,
		'FULL': sFullscreen || this.LANG.FULL
	};

	this.setModeButtonText();
};

HtmlEditorWrapper.prototype.blurTrigger = function ()
{
	if (this.fOnBlur)
	{
		var self = this;
		window.clearTimeout(self.iBlurTimer);
		self.iBlurTimer = window.setTimeout(function () {
			self.fOnBlur();
		}, 200);
	}
};

HtmlEditorWrapper.prototype.focusTrigger = function ()
{
	if (this.fOnBlur)
	{
		window.clearTimeout(this.iBlurTimer);
	}
};

/**
 * @param {string} sHtml
 * @return {string}
 */
HtmlEditorWrapper.prototype.htmlToPlain = function (sHtml)
{
	var
		sText = '',
		sQuoteChar = '> ',

		convertBlockquote = function () {
			if (arguments && 1 < arguments.length)
			{
				var	sText = $.trim(arguments[1])
					.replace(/__bq__start__([\s\S\n\r]*)__bq__end__/gm, convertBlockquote)
				;

				sText = '\n' + sQuoteChar + $.trim(sText).replace(/\n/gm, '\n' + sQuoteChar) + '\n>\n';

				return sText.replace(/\n([> ]+)/gm, function () {
					return (arguments && 1 < arguments.length) ? '\n' + $.trim(arguments[1].replace(/[\s]/, '')) + ' ' : '';
				});
			}

			return '';
		},

		convertDivs = function () {
			if (arguments && 1 < arguments.length)
			{
				var sText = $.trim(arguments[1]);
				if (0 < sText.length)
				{
					sText = sText.replace(/<div[^>]*>([\s\S]*)<\/div>/gmi, convertDivs);
					sText = '\n' + $.trim(sText) + '\n';
				}
				return sText;
			}
			return '';
		},

		convertLinks = function () {
			if (arguments && 1 < arguments.length)
			{
				var
					sName = $.trim(arguments[1])
//					sHref = $.trim(arguments[0].replace(/<a [\s\S]*href[ ]?=[ ]?["']?([^"']+).+<\/a>/gmi, '$1'))
				;

				return sName;
//				sName = (0 === trim(sName).length) ? '' : sName;
//				sHref = ('mailto:' === sHref.substr(0, 7)) ? '' : sHref;
//				sHref = ('http' === sHref.substr(0, 4)) ? sHref : '';
//				sHref = (sName === sHref) ? '' : sHref;
//				sHref = (0 < sHref.length) ? ' (' + sHref + ') ' : '';
//				return (0 < sName.length) ? sName + sHref : sName;
			}
			return '';
		}
	;

	sText = sHtml
		.replace(/[\s]+/gm, ' ')
		.replace(/<br\s?\/?>/gmi, '\n')
		.replace(/<\/h\d>/gi, '\n')
		.replace(/<\/p>/gi, '\n\n')
		.replace(/<\/li>/gi, '\n')
		.replace(/<\/td>/gi, '\n')
		.replace(/<\/tr>/gi, '\n')
		.replace(/<hr[^>]*>/gmi, '\n_______________________________\n\n')
		.replace(/<img [^>]*>/gmi, '')
		.replace(/<div[^>]*>([\s\S]*)<\/div>/gmi, convertDivs)
		.replace(/<blockquote[^>]*>/gmi, '\n__bq__start__\n')
		.replace(/<\/blockquote>/gmi, '\n__bq__end__\n')
		.replace(/<a [^>]*>([\s\S]*?)<\/a>/gmi, convertLinks)
		.replace(/&nbsp;/gi, ' ')
		.replace(/<[^>]*>/gm, '')
		.replace(/&gt;/gi, '>')
		.replace(/&lt;/gi, '<')
		.replace(/&amp;/gi, '&')
		.replace(/&\w{2,6};/gi, '')
	;

	return sText
		.replace(/\n[ \t]+/gm, '\n')
		.replace(/[\n]{3,}/gm, '\n\n')
		.replace(/__bq__start__([\s\S]*)__bq__end__/gm, convertBlockquote)
		.replace(/__bq__start__/gm, '')
		.replace(/__bq__end__/gm, '')
	;
};

/**
 * @param {string} sPlain
 * @return {string}
 */
HtmlEditorWrapper.prototype.plainToHtml = function (sPlain)
{
	return sPlain.toString()
		.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;')
		.replace(/\r/g, '').replace(/\n/g, '<br />');
};

HtmlEditorWrapper.prototype.fullScreenToggle = function ()
{
	$('html').toggleClass('html-editor-wrapper-fullscreen');
	$('body').toggleClass('html-editor-wrapper-fullscreen');

	this.focus();
};

HtmlEditorWrapper.prototype.initToolbar = function ()
{
	var self = this;

//	self.$fullscreen = $('<a tabindex="-1" href="jav' + 'ascript:void(0);">fullscreen</a>')
//		.addClass('html-editor-wrapper-fullscreen-button')
//		.on('click', function () {
//			self.fullScreenToggle();
//		})
//	;

	self.$mode = $('<a tabindex="-1" href="jav' + 'ascript:void(0);">html</a>')
		.addClass('html-editor-wrapper-mode-button')
		.on('click', function () {
			self.modeToggle(true);
		})
	;
	
	self.$toolbar
		.append(self.$mode)
//		.append(self.$fullscreen)
	;
};

/**
 * @return {boolean}
 */
HtmlEditorWrapper.prototype.isHtml = function ()
{
	return this.bHtml;
};

/**
 * @return {boolean}
 */
HtmlEditorWrapper.prototype.checkDirty = function ()
{
	return this.bHtml && this.editor ? this.editor.checkDirty() : this.bPlainDirty;
};

HtmlEditorWrapper.prototype.resetDirty = function ()
{
	if (this.editor)
	{
		this.editor.resetDirty();
	}

	this.bPlainDirty = false;
};

/**
 * @return {string}
 */
HtmlEditorWrapper.prototype.getData = function ()
{
	if (this.bHtml && this.editor)
	{
		return this.editor.getData();
	}
	else
	{
		return this.$plain.val();
	}
};

HtmlEditorWrapper.prototype.setHtml = function (sHtml, bFocus)
{
	if (this.editor)
	{
		if (!this.bHtml)
		{
			this.modeToggle(bFocus);
		}

		this.editor.setData(sHtml);
	}
};

HtmlEditorWrapper.prototype.setPlain = function (sPlain, bFocus)
{
	if (this.bHtml)
	{
		this.modeToggle(bFocus);
	}

	this.$plain.val(sPlain);
};

HtmlEditorWrapper.prototype.init = function ()
{
	if (this.$element && this.$element[0])
	{
		var self = this;

		self.$toolbar = $('<div></div>')
			.addClass('html-editor-wrapper-toolbar')
		;

		self.$plain = $('<textarea></textarea>')
			.addClass('html-editor-wrapper-plain')
			.on('change', function () {
				self.bPlainDirty = true;
			})
			.on('blur', function() {
				self.blurTrigger();
			})
			.on('focus', function() {
				self.focusTrigger();
			})
			.hide()
		;

		self.$html = $('<div></div>')
			.addClass('html-editor-wrapper-html')
			.attr('contenteditable', 'true')
			.on('blur', function() {
				self.blurTrigger();
			})
			.on('focus', function() {
				self.focusTrigger();
			})
			.hide()
		;

		if (self.bHtml) {
			self.$html.show();
		} else {
			self.$plain.show();
		}

		self.$element
			.addClass('html-editor-wrapper')
			.append(self.$toolbar)
			.append(self.$plain)
			.append(self.$html)
		;

		self.editor = window.CKEDITOR.inline(self.$html[0]);
		if (self.fOnReady)
		{
			self.editor.on('instanceReady', function () {
				self.fOnReady();
			});
		}
		
		self.initToolbar();
		self.setModeButtonText();
	}
};

HtmlEditorWrapper.prototype.focus = function ()
{
	if (this.bHtml) {
		this.$html.focus();
	} else {
		this.$plain.focus();
	}
};

HtmlEditorWrapper.prototype.blur = function ()
{
	if (this.bHtml) {
		this.$html.blur();
	} else {
		this.$plain.blur();
	}
};

HtmlEditorWrapper.prototype.setModeButtonText = function ()
{
	this.$mode.text(this.bHtml ? this.LANG.PLAIN : this.LANG.HTML);
};

HtmlEditorWrapper.prototype.clear = function (bFocus)
{
	this.setHtml('', bFocus);
};

HtmlEditorWrapper.prototype.modeToggle = function (bFocus)
{
	bFocus = Utils.isUnd(bFocus) ? true : !!bFocus;
	if (bFocus)
	{
		this.blur();
	}

	if (this.bHtml) {
		this.$html.hide();

		this.$plain
			.val(this.htmlToPlain(this.$html.html()))
			.show()
		;

		this.bHtml = false;
		this.bPlainDirty = true;
	} else {
		this.$plain.hide();

		this.$html
			.html(this.plainToHtml(this.$plain.val()))
			.show()
		;

		this.bHtml = true;
		this.bPlainDirty = true;
	}

	this.setModeButtonText();

	if (bFocus)
	{
		this.focus();
	}
	
	this.blurTrigger();
};