html editor optimizations

dev/Common/Globals.js

@@ -102,8 +102,10 @@ Globals.oHtmlEditorDefaultConfig = {
 	'allowedContent': false,
 	'autoParagraph': false,
 
-	'enterMode': window.CKEDITOR.ENTER_BR,
+//	'enterMode': window.CKEDITOR.ENTER_BR,
-	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+//	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+	'enterMode': window.CKEDITOR.ENTER_DIV,
+	'shiftEnterMode': window.CKEDITOR.ENTER_BR,
 //	'floatSpaceDockedOffsetY': 1,
 
 	'font_defaultLabel': 'Arial',

dev/Common/HtmlEditorWrapper.js

@@ -10,6 +10,7 @@ function HtmlEditorWrapper(oElement, fOnBlur, fOnReady)
 	var self = this;
 
 	self.editor = null;
+	
 	self.bHtml = true;
 	self.bPlainDirty = false;
 	self.iBlurTimer = 0;
@@ -193,26 +194,11 @@ HtmlEditorWrapper.prototype.plainToHtml = function (sPlain)
 		.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>')
+	self.$mode = $('<a tabindex="-1" href="jav' + 'ascript:v' + 'oid(0);"></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);
@@ -221,7 +207,6 @@ HtmlEditorWrapper.prototype.initToolbar = function ()
 	
 	self.$toolbar
 		.append(self.$mode)
-//		.append(self.$fullscreen)
 	;
 };
 
@@ -318,15 +303,20 @@ HtmlEditorWrapper.prototype.init = function ()
 			.hide()
 		;
 
+//		self.$html = $('<div></div>')
+//			.addClass('html-editor-wrapper-html')
+//			.attr('contenteditable', '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()
 		;
 
@@ -350,7 +340,15 @@ HtmlEditorWrapper.prototype.init = function ()
 		}
 
 		oConfig.language = Globals.oHtmlEditorLangsMap[sLanguage] || 'en';
+//		self.editor = window.CKEDITOR.appendTo(self.$html[0], oConfig);
 		self.editor = window.CKEDITOR.inline(self.$html[0], oConfig);
+		self.editor.on('blur', function() {
+			self.blurTrigger();
+		});
+
+		self.editor.on('focus', function() {
+			self.focusTrigger();
+		});
 
 		if (self.fOnReady)
 		{
@@ -364,10 +362,25 @@ HtmlEditorWrapper.prototype.init = function ()
 	}
 };
 
+HtmlEditorWrapper.prototype.toolbarReposition = function ()
+{
+	if (this.bHtml && this.editor && this.editor.focusManager.hasFocus)
+	{
+		var oEd = this.editor;
+		
+		oEd.focusManager.blur(true);
+		_.delay(function () {
+			oEd.focusManager.focus();
+		}, 1);
+	}
+};
+
 HtmlEditorWrapper.prototype.focus = function ()
 {
 	if (this.bHtml) {
-		this.$html.focus();
+		if (this.editor) {
+			this.editor.focusManager.focus();
+		}
 	} else {
 		this.$plain.focus();
 	}
@@ -376,7 +389,9 @@ HtmlEditorWrapper.prototype.focus = function ()
 HtmlEditorWrapper.prototype.blur = function ()
 {
 	if (this.bHtml) {
-		this.$html.blur();
+		if (this.editor) {
+			this.editor.focusManager.blur(true);
+		}
 	} else {
 		this.$plain.blur();
 	}
@@ -400,27 +415,29 @@ HtmlEditorWrapper.prototype.modeToggle = function (bFocus)
 		this.blur();
 	}
 
-	if (this.bHtml) {
+	if (this.editor)
+	{
+		if (this.bHtml)
+		{
 			this.$html.hide();
+			this.$plain.show();
 
-		this.$plain
+			this.$plain.val(this.htmlToPlain(this.editor.getData()));
-			.val(this.htmlToPlain(this.$html.html()))
-			.show()
-		;
 
 			this.bHtml = false;
 			this.bPlainDirty = true;
-	} else {
+		}
+		else
+		{
 			this.$plain.hide();
+			this.$html.show();
 
-		this.$html
+			this.editor.setData(this.plainToHtml(this.$plain.val()));
-			.html(this.plainToHtml(this.$plain.val()))
-			.show()
-		;
 
 			this.bHtml = true;
 			this.bPlainDirty = true;
 		}
+	}
 
 	this.setModeButtonText();
 

dev/Settings/Identities.js

@@ -7,6 +7,8 @@ function SettingsIdentities()
 {
 	var oData = RL.data();
 	
+	this.editor = null;
+	
 	this.displayName = oData.displayName;
 	this.signature = oData.signature;
 	this.signatureToAll = oData.signatureToAll;

dev/Settings/Identity.js

@@ -7,6 +7,8 @@ function SettingsIdentity()
 {
 	var oData = RL.data();
 
+	this.editor = null;
+	
 	this.displayName = oData.displayName;
 	this.signature = oData.signature;
 	this.signatureToAll = oData.signatureToAll;

dev/Styles/HtmlEditorWrapper.less

@@ -77,7 +77,9 @@ html.html-editor-wrapper-fullscreen .html-editor-wrapper-html.styled, html.html-
 	border-radius: 0;
 }
 
-.html-editor-wrapper-html.styled:focus, .html-editor-wrapper-plain.styled:focus {
+.html-editor-wrapper-html.styled:focus, .html-editor-wrapper-plain.styled:focus,
+.html-editor-wrapper-html.styled.focused, .html-editor-wrapper-plain.styled.focused
+{
 	border: 1px solid #999999;
 	
 	-webkit-box-shadow: none;
@@ -108,13 +110,17 @@ html.html-editor-wrapper-fullscreen .html-editor-wrapper-html.styled, html.html-
 
 .html-editor-wrapper-mode-button, .html-editor-wrapper-fullscreen-button {
 	position: absolute;
-	top: 5px;
+	bottom: 5px;
 	right: 25px;
 	z-index: 100;
 	color: #555;
 	text-decoration: underline;
 	font-family: Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
 	font-size: 12px;
+
+	background-color: #fff;
+	/*background-color: rgba(255, 255, 255, 0.8);*/
+	padding: 1px 3px;
 }
 
 .html-editor-wrapper-mode-button:hover, .html-editor-wrapper-fullscreen-button:hover {

dev/ViewModels/PopupsComposeViewModel.js

@@ -156,6 +156,13 @@ function PopupsComposeViewModel()
 		}
 	}, this);
 
+	this.emptyToError.subscribe(function (bValue) {
+		if (this.oEditor && bValue)
+		{
+			this.oEditor.toolbarReposition();
+		}
+	}, this);
+
 	this.canBeSended = ko.computed(function () {
 		return !this.sending() &&
 			!this.saving() &&

rainloop/v/0.0.0/static/css/app.css

@@ -8628,7 +8628,9 @@ html.html-editor-wrapper-fullscreen .html-editor-wrapper-plain.styled {
   border-radius: 0;
 }
 .html-editor-wrapper-html.styled:focus,
-.html-editor-wrapper-plain.styled:focus {
+.html-editor-wrapper-plain.styled:focus,
+.html-editor-wrapper-html.styled.focused,
+.html-editor-wrapper-plain.styled.focused {
   border: 1px solid #999999;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -8655,13 +8657,17 @@ html.html-editor-wrapper-fullscreen .html-editor-wrapper-plain.styled {
 .html-editor-wrapper-mode-button,
 .html-editor-wrapper-fullscreen-button {
   position: absolute;
-  top: 5px;
+  bottom: 5px;
   right: 25px;
   z-index: 100;
   color: #555;
   text-decoration: underline;
   font-family: Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
   font-size: 12px;
+  background-color: #fff;
+  /*background-color: rgba(255, 255, 255, 0.8);*/
+
+  padding: 1px 3px;
 }
 .html-editor-wrapper-mode-button:hover,
 .html-editor-wrapper-fullscreen-button:hover {

rainloop/v/0.0.0/static/js/admin.js

@@ -180,8 +180,10 @@ Globals.oHtmlEditorDefaultConfig = {
 	'allowedContent': false,
 	'autoParagraph': false,
 
-	'enterMode': window.CKEDITOR.ENTER_BR,
+//	'enterMode': window.CKEDITOR.ENTER_BR,
-	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+//	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+	'enterMode': window.CKEDITOR.ENTER_DIV,
+	'shiftEnterMode': window.CKEDITOR.ENTER_BR,
 //	'floatSpaceDockedOffsetY': 1,
 
 	'font_defaultLabel': 'Arial',

rainloop/v/0.0.0/static/js/app.js

@@ -180,8 +180,10 @@ Globals.oHtmlEditorDefaultConfig = {
 	'allowedContent': false,
 	'autoParagraph': false,
 
-	'enterMode': window.CKEDITOR.ENTER_BR,
+//	'enterMode': window.CKEDITOR.ENTER_BR,
-	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+//	'shiftEnterMode': window.CKEDITOR.ENTER_P,
+	'enterMode': window.CKEDITOR.ENTER_DIV,
+	'shiftEnterMode': window.CKEDITOR.ENTER_BR,
 //	'floatSpaceDockedOffsetY': 1,
 
 	'font_defaultLabel': 'Arial',
@@ -3445,6 +3447,7 @@ function HtmlEditorWrapper(oElement, fOnBlur, fOnReady)
 	var self = this;
 
 	self.editor = null;
+	
 	self.bHtml = true;
 	self.bPlainDirty = false;
 	self.iBlurTimer = 0;
@@ -3628,26 +3631,11 @@ HtmlEditorWrapper.prototype.plainToHtml = function (sPlain)
 		.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>')
+	self.$mode = $('<a tabindex="-1" href="jav' + 'ascript:v' + 'oid(0);"></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);
@@ -3656,7 +3644,6 @@ HtmlEditorWrapper.prototype.initToolbar = function ()
 	
 	self.$toolbar
 		.append(self.$mode)
-//		.append(self.$fullscreen)
 	;
 };
 
@@ -3753,15 +3740,20 @@ HtmlEditorWrapper.prototype.init = function ()
 			.hide()
 		;
 
+//		self.$html = $('<div></div>')
+//			.addClass('html-editor-wrapper-html')
+//			.attr('contenteditable', '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()
 		;
 
@@ -3785,7 +3777,15 @@ HtmlEditorWrapper.prototype.init = function ()
 		}
 
 		oConfig.language = Globals.oHtmlEditorLangsMap[sLanguage] || 'en';
+//		self.editor = window.CKEDITOR.appendTo(self.$html[0], oConfig);
 		self.editor = window.CKEDITOR.inline(self.$html[0], oConfig);
+		self.editor.on('blur', function() {
+			self.blurTrigger();
+		});
+
+		self.editor.on('focus', function() {
+			self.focusTrigger();
+		});
 
 		if (self.fOnReady)
 		{
@@ -3799,10 +3799,25 @@ HtmlEditorWrapper.prototype.init = function ()
 	}
 };
 
+HtmlEditorWrapper.prototype.toolbarReposition = function ()
+{
+	if (this.bHtml && this.editor && this.editor.focusManager.hasFocus)
+	{
+		var oEd = this.editor;
+		
+		oEd.focusManager.blur(true);
+		_.delay(function () {
+			oEd.focusManager.focus();
+		}, 1);
+	}
+};
+
 HtmlEditorWrapper.prototype.focus = function ()
 {
 	if (this.bHtml) {
-		this.$html.focus();
+		if (this.editor) {
+			this.editor.focusManager.focus();
+		}
 	} else {
 		this.$plain.focus();
 	}
@@ -3811,7 +3826,9 @@ HtmlEditorWrapper.prototype.focus = function ()
 HtmlEditorWrapper.prototype.blur = function ()
 {
 	if (this.bHtml) {
-		this.$html.blur();
+		if (this.editor) {
+			this.editor.focusManager.blur(true);
+		}
 	} else {
 		this.$plain.blur();
 	}
@@ -3835,27 +3852,29 @@ HtmlEditorWrapper.prototype.modeToggle = function (bFocus)
 		this.blur();
 	}
 
-	if (this.bHtml) {
+	if (this.editor)
+	{
+		if (this.bHtml)
+		{
 			this.$html.hide();
+			this.$plain.show();
 
-		this.$plain
+			this.$plain.val(this.htmlToPlain(this.editor.getData()));
-			.val(this.htmlToPlain(this.$html.html()))
-			.show()
-		;
 
 			this.bHtml = false;
 			this.bPlainDirty = true;
-	} else {
+		}
+		else
+		{
 			this.$plain.hide();
+			this.$html.show();
 
-		this.$html
+			this.editor.setData(this.plainToHtml(this.$plain.val()));
-			.html(this.plainToHtml(this.$plain.val()))
-			.show()
-		;
 
 			this.bHtml = true;
 			this.bPlainDirty = true;
 		}
+	}
 
 	this.setModeButtonText();
 
@@ -7818,6 +7837,13 @@ function PopupsComposeViewModel()
 		}
 	}, this);
 
+	this.emptyToError.subscribe(function (bValue) {
+		if (this.oEditor && bValue)
+		{
+			this.oEditor.toolbarReposition();
+		}
+	}, this);
+
 	this.canBeSended = ko.computed(function () {
 		return !this.sending() &&
 			!this.saving() &&
@@ -12613,6 +12639,8 @@ function SettingsIdentity()
 {
 	var oData = RL.data();
 
+	this.editor = null;
+	
 	this.displayName = oData.displayName;
 	this.signature = oData.signature;
 	this.signatureToAll = oData.signatureToAll;
@@ -12716,6 +12744,8 @@ function SettingsIdentities()
 {
 	var oData = RL.data();
 	
+	this.editor = null;
+	
 	this.displayName = oData.displayName;
 	this.signature = oData.signature;
 	this.signatureToAll = oData.signatureToAll;