snappymail/dev/Common/HtmlEditor.js

(function () {

	'use strict';

	var
		window = require('window'),
		_ = require('_'),

		Globals = require('Common/Globals'),

		Settings = require('Storage/Settings')
	;

	/**
	 * @constructor
	 * @param {Object} oElement
	 * @param {Function=} fOnBlur
	 * @param {Function=} fOnReady
	 * @param {Function=} fOnModeChange
	 */
	function HtmlEditor(oElement, fOnBlur, fOnReady, fOnModeChange)
	{
		this.editor = null;
		this.iBlurTimer = 0;
		this.fOnBlur = fOnBlur || null;
		this.fOnReady = fOnReady || null;
		this.fOnModeChange = fOnModeChange || null;

		this.$element = $(oElement);

		this.resize = _.throttle(_.bind(this.resize, this), 100);

		this.init();
	}

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

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

	/**
	 * @return {boolean}
	 */
	HtmlEditor.prototype.isHtml = function ()
	{
		return this.editor ? 'wysiwyg' === this.editor.mode : false;
	};

	/**
	 * @return {boolean}
	 */
	HtmlEditor.prototype.checkDirty = function ()
	{
		return this.editor ? this.editor.checkDirty() : false;
	};

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

	/**
	 * @param {boolean=} bWrapIsHtml = false
	 * @return {string}
	 */
	HtmlEditor.prototype.getData = function (bWrapIsHtml)
	{
		if (this.editor)
		{
			if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain)
			{
				return this.editor.__plain.getRawData();
			}

			return bWrapIsHtml ?
				'<div data-html-editor-font-wrapper="true" style="font-family: arial, sans-serif; font-size: 13px;">' +
					this.editor.getData() + '</div>' : this.editor.getData();
		}

		return '';
	};

	HtmlEditor.prototype.modeToggle = function (bPlain)
	{
		if (this.editor)
		{
			if (bPlain)
			{
				if ('plain' === this.editor.mode)
				{
					this.editor.setMode('wysiwyg');
				}
			}
			else
			{
				if ('wysiwyg' === this.editor.mode)
				{
					this.editor.setMode('plain');
				}
			}

			this.resize();
		}
	};

	HtmlEditor.prototype.setHtml = function (sHtml, bFocus)
	{
		if (this.editor)
		{
			this.modeToggle(true);
			this.editor.setData(sHtml);

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

	HtmlEditor.prototype.setPlain = function (sPlain, bFocus)
	{
		if (this.editor)
		{
			this.modeToggle(false);
			if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain)
			{
				return this.editor.__plain.setRawData(sPlain);
			}
			else
			{
				this.editor.setData(sPlain);
			}

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

	HtmlEditor.prototype.init = function ()
	{
		if (this.$element && this.$element[0])
		{
			var
				self = this,
				fInit = function () {

					var
						oConfig = Globals.oHtmlEditorDefaultConfig,
						sLanguage = Settings.settingsGet('Language'),
						bSource = !!Settings.settingsGet('AllowHtmlEditorSourceButton'),
						bBiti = !!Settings.settingsGet('AllowHtmlEditorBitiButtons')
					;

					if ((bSource || bBiti) && !oConfig.toolbarGroups.__SourceInited)
					{
						oConfig.toolbarGroups.__SourceInited = true;

						if (bSource)
						{
							oConfig.removeButtons = oConfig.removeButtons.replace(',Source', '');
						}

						if (bBiti)
						{
							oConfig.extraPlugins += (oConfig.extraPlugins ? ',' : '')  + 'bidi';
						}
					}

					oConfig.enterMode = window.CKEDITOR.ENTER_BR;
					oConfig.shiftEnterMode = window.CKEDITOR.ENTER_BR;

					oConfig.language = Globals.oHtmlEditorLangsMap[sLanguage] || 'en';
					if (window.CKEDITOR.env)
					{
						window.CKEDITOR.env.isCompatible = true;
					}

					self.editor = window.CKEDITOR.appendTo(self.$element[0], oConfig);

					self.editor.on('key', function(oEvent) {
						if (oEvent && oEvent.data && 9 /* Tab */ === oEvent.data.keyCode)
						{
							return false;
						}
					});

					self.editor.on('blur', function() {
						self.blurTrigger();
					});

					self.editor.on('mode', function() {

						self.blurTrigger();

						if (self.fOnModeChange)
						{
							self.fOnModeChange('plain' !== self.editor.mode);
						}
					});

					self.editor.on('focus', function() {
						self.focusTrigger();
					});

					if (self.fOnReady)
					{
						self.editor.on('instanceReady', function () {

							self.editor.setKeystroke(window.CKEDITOR.CTRL + 65 /* A */, 'selectAll');
							self.editor.editable().addClass('cke_enable_context_menu');

							self.fOnReady();
							self.__resizable = true;
							self.resize();
						});
					}
				}
			;

			if (window.CKEDITOR)
			{
				fInit();
			}
			else
			{
				window.__initEditor = fInit;
			}
		}
	};

	HtmlEditor.prototype.focus = function ()
	{
		if (this.editor)
		{
			this.editor.focus();
		}
	};

	HtmlEditor.prototype.blur = function ()
	{
		if (this.editor)
		{
			this.editor.focusManager.blur(true);
		}
	};

	HtmlEditor.prototype.resize = function ()
	{
		if (this.editor && this.__resizable)
		{
			try
			{
				this.editor.resize(this.$element.width(), this.$element.innerHeight());
			}
			catch (e) {}
		}
	};

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


	module.exports = HtmlEditor;

}());