Code refactoring

dev/Common/HtmlEditor.js

@@ -0,0 +1,275 @@
+/* RainLoop Webmail (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
+
+(function (module, require) {
+
+	'use strict';
+
+	var
+		window = require('window'),
+		_ = require('_'),
+		Globals = require('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();
+		}
+	};
+
+	/**
+	 * @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')
+					;
+
+					if (bSource && oConfig.toolbarGroups && !oConfig.toolbarGroups.__SourceInited)
+					{
+						oConfig.toolbarGroups.__SourceInited = true;
+						oConfig.toolbarGroups.push({name: 'document', groups: ['mode', 'document', 'doctools']});
+					}
+
+					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.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;
+
+}(module, require));