Select2 replaced by inputosaurus + ui-autocomplete

+ a lot of small fixes.

rainloop/v/0.0.0/static/css/less.css

@@ -3449,61 +3449,56 @@ html.no-rgba .modal {
 .picker.picker-dialog {
   z-index: 2001 !important;
 }
-.select2-container-multi .select2-choices {
-  background-image: none;
-  border: 1px solid #cccccc;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.select2-container-multi .select2-choices .select2-search-choice {
-  line-height: 15px;
-  font-size: 16px;
-}
-.select2-container-multi.select2-container-active .select2-choices {
-  border: 1px solid #999999;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.select2-drop {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.select2-drop .select2-subname {
-  color: #777;
-}
-.select2-drop .select2-highlighted .select2-subname {
-  color: #eee;
-}
-.select2-results {
-  margin: 0;
-  padding: 0;
-  max-height: 400px;
-}
-.select2-results .select2-searching {
-  padding: 1px 4px;
-}
-.select2-icon {
+.inputosaurus-container {
+  width: 99%;
   line-height: 20px;
-  padding: 0 0 0 7px;
+  padding: 2px;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border linear .2s, box-shadow linear .2s;
+  -moz-transition: border linear .2s, box-shadow linear .2s;
+  -o-transition: border linear .2s, box-shadow linear .2s;
+  transition: border linear .2s, box-shadow linear .2s;
 }
-.select2-icon-result {
-  line-height: 40px;
+.inputosaurus-container li {
+  max-width: 500px;
+  background-color: #eee;
+  border: 1px solid #aaa;
+  line-height: 18px;
+  padding: 2px 4px;
+  margin: 2px 2px 2px;
+  color: #555;
 }
-.select2-result-label {
-  margin: 0px !important;
-  padding: 5px !important;
-  font-size: 16px;
-  height: 40px;
-  line-height: 40px;
+.inputosaurus-container li a {
+  color: #999;
+  float: right;
+  font-size: 14px;
 }
-.select2-result-label .select2-user-pic {
-  display: inline-block;
-  height: 40px;
-  width: 40px;
-  margin-right: 10px;
+.inputosaurus-container li a:hover {
+  color: #666;
+}
+.inputosaurus-container li.inputosaurus-selected {
+  background-color: #ddd;
+}
+.inputosaurus-container .inputosaurus-fake-span {
+  position: absolute;
+  top: 0;
+  left: -5000px;
+}
+.inputosaurus-container .inputosaurus-input {
+  margin: 2px 10px 2px 0px;
+  height: 22px;
+}
+.inputosaurus-container .inputosaurus-input input {
+  border: 0px;
+  height: 21px;
+  padding-left: 0;
+}
+.ui-autocomplete {
+  z-index: 2000;
 }
 .g-ui-user-select-none {
   -webkit-user-select: none;
@@ -5206,10 +5201,6 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-compose .b-header .e-row {
   line-height: 30px;
 }
-.b-compose .b-header .e-delimiter-row {
-  line-height: 2px;
-  height: 5px;
-}
 .b-compose .b-header .e-label {
   text-align: right;
   width: 1%;
@@ -5226,9 +5217,6 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-compose .b-header .e-value textarea {
   height: 40px;
 }
-.b-compose .b-header .e-value .select2-container {
-  width: 100%;
-}
 .b-compose .b-header .error-desc {
   color: red;
 }

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

@@ -2524,167 +2524,55 @@ ko.bindingHandlers.saveTrigger = {
 	}
 };
 
-ko.bindingHandlers.select2 = {
+ko.bindingHandlers.emailsTags = {
     'init': function(oElement, fValueAccessor) {
-
 		var
-			iTimer = 0,
-			iTimeout = 100,
-			oMatch = null,
-			oReg = new window.RegExp(/[a-zA-Z0-9\.\-_]+@[a-zA-Z0-9\.\-_]+/),
-			oReg2 = new window.RegExp(/(.+) [<]?([^\s<@]+@[a-zA-Z0-9\.\-_]+)[>]?/),
-			sEmptyTranslateFunction = function () {
-				return '';
-			},
-			/**
-			 * @param {{term:string, callback:Function, matcher:Function}} oCall
-			 */
-			fLazyAutocomplete = function (oCall) {
+			$oEl = $(oElement),
+			fValue = fValueAccessor()
+		;
 
-				RL.getAutocomplete(oCall['term'], oCall['page'], function (aData, bMore) {
-					oCall.callback({
-						'more': !!bMore,
-						'results': _.map(aData, function (oEmailItem) {
-							var sName = oEmailItem.toLine(false);
-							return {
-								'id': sName,
-								'text': sName,
-								'c': oEmailItem
-							};
-						})
-					});
+		$oEl.inputosaurus({
+			'parseOnBlur': true,
+			'inputDelimiters': [',', ';'],
+			'autoCompleteSource': function (oData, fResponse) {
+				RL.getAutocomplete(oData.term, function (aData) {
+					fResponse(_.map(aData, function (oEmailItem) {
+						return oEmailItem.toLine(false);
+					}));
 				});
-			}
-		;
-
-		$(oElement).addClass('ko-select2').select2({
-
-			/**
-			 * @param {{term:string, callback:Function, matcher:Function}} oCall
-			 */
-			'query': function (oCall) {
-				if (!oCall)
-				{
-					return;
-				}
-				
-//				if (RL.isLocalAutocomplete && false)
-//				{
-//					fLazyAutocomplete(oCall);
-//				}
-//				else
-//				{
-					if (0 === iTimer)
+			},
+			'parseHook': function (aInput) {
+				return _.map(aInput, function (sInputValue) {
+					
+					var sValue = Utils.trim(sInputValue), oEmail = null;
+					if ('' !== sValue)
 					{
-						fLazyAutocomplete(oCall);
-						iTimer = window.setTimeout(Utils.emptyFunction, iTimeout);
+						oEmail = new EmailModel();
+						oEmail.mailsoParse(sValue);
+						oEmail.clearDuplicateName();
+
+//						sValue = oEmail.toLine(false);
+//						return sValue;
+						return [oEmail.toLine(false), oEmail];
 					}
-					else
-					{
-						window.clearInterval(iTimer);
-						iTimer = window.setTimeout(function () {
-							fLazyAutocomplete(oCall);
-						}, iTimeout);
-					}
-//				}
+
+					return [sValue, null];
+
+				});
 			},
-			'formatSelection': function (oItem, oContainer) {
-				var sR = oItem && oItem.c ? oItem.c.select2Selection(oContainer) : oItem.text;
-				if (null !== sR)
-				{
-					return sR;
-				}
-			},
-			'formatResult': function (oItem, oContainer, oQuery, fEscapeMarkup) {
-				var sR = oItem && oItem.c ? oItem.c.select2Result(oContainer) : '';
-				return '' === sR ? fEscapeMarkup(oItem.text) : sR;
-			},
-			'createSearchChoice': function (sTerm, aList) {
-				return 0 === aList.length && oReg.test(sTerm) ?  {
-					'id': sTerm,
-					'text': sTerm
-				} : null;
-			},
-			'formatNoMatches': sEmptyTranslateFunction,
-			'formatSearching': function () {
-				return Utils.i18n('SUGGESTIONS/SEARCHING_DESC');
-			},
-			'formatInputTooShort': sEmptyTranslateFunction,
-			'formatSelectionTooBig': sEmptyTranslateFunction,
-			'multiple': true,
-			'tokenSeparators': [',', ';'],
-			'minimumInputLength': 2,
-			'selectOnBlur': false,
-			'closeOnSelect': true,
-			'openOnEnter': false
+			'change': _.bind(function (oEvent) {
+				$oEl.data('EmailsTagsValue', oEvent.target.value);
+				fValue(oEvent.target.value);
+			}, this)
 		});
 
-		ko.utils.domNodeDisposal.addDisposeCallback(oElement, function() {
-			$(oElement).select2('destroy');
-		});
-
-		$(oElement).on('change', function () {
-
-			var
-				aTags = $(this).select2('data'),
-				iIndex = 0,
-				iLen = aTags.length,
-				oItem = null,
-				aResult = []
-			;
-
-			for (; iIndex < iLen; iIndex++)
+		fValue.subscribe(function (sValue) {
+			if ($oEl.data('EmailsTagsValue') !== sValue)
 			{
-				oItem = aTags[iIndex];
-				if (oItem && oItem.id)
-				{
-					if (!oItem.c)
-					{
-						oItem.c = new EmailModel();
-						oMatch = oReg2.exec(Utils.trim(oItem.id));
-						if (oMatch && !Utils.isUnd(oMatch[2]))
-						{
-							oItem.c.name = oMatch[1];
-							oItem.c.email = oMatch[2];
-						}
-						else
-						{
-							oItem.c.email = oItem.id;
-						}
-					}
-
-					aResult.push(oItem.c);
-				}
+				$oEl.val(sValue);
+				$oEl.inputosaurus('refresh');
 			}
-
-			fValueAccessor()(aResult);
 		});
-    },
-
-	'update': function (oElement, fValueAccessor) {
-
-		var
-			aTags = ko.utils.unwrapObservable(fValueAccessor()),
-			iIndex = 0,
-			iLen = aTags.length,
-			oItem = null,
-			sName = '',
-			aResult = []
-		;
-
-		for (; iIndex < iLen; iIndex++)
-		{
-			oItem = aTags[iIndex];
-			sName = oItem.toLine(false);
-
-			aResult.push({
-				'id': sName,
-				'text': sName,
-				'c': oItem
-			});
-		}
-
-		$(oElement).select2('data', aResult);
 	}
 };
 
@@ -3696,10 +3584,6 @@ Knoin.prototype.hideScreenPopup = function (ViewModelClassToHide)
 		ViewModelClassToHide.__vm.modalVisibility(false);
 		this.delegateRun(ViewModelClassToHide.__vm, 'onHide');
 		this.popupVisibility(false);
-
-		_.defer(function () {
-			ViewModelClassToHide.__dom.find('.ko-select2').select2('close');
-		});
 	}
 };
 
@@ -3961,6 +3845,13 @@ EmailModel.prototype.email = '';
  */
 EmailModel.prototype.privateType = null;
 
+EmailModel.prototype.clear = function ()
+{
+	this.email = '';
+	this.name = '';
+	this.privateType = null;
+};
+
 /**
  * @returns {boolean}
  */
@@ -4021,6 +3912,8 @@ EmailModel.prototype.search = function (sQuery)
  */
 EmailModel.prototype.parse = function (sString)
 {
+	this.clear();
+
 	sString = Utils.trim(sString);
 
 	var
@@ -4064,18 +3957,22 @@ EmailModel.prototype.initByJson = function (oJsonEmail)
 /**
  * @param {boolean} bFriendlyView
  * @param {boolean=} bWrapWithLink = false
+ * @param {boolean=} bEncodeHtml = false
  * @return {string}
  */
-EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink)
+EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink, bEncodeHtml)
 {
 	var sResult = '';
 	if ('' !== this.email)
 	{
 		bWrapWithLink = Utils.isUnd(bWrapWithLink) ? false : !!bWrapWithLink;
+		bEncodeHtml = Utils.isUnd(bEncodeHtml) ? false : !!bEncodeHtml;
+		
 		if (bFriendlyView && '' !== this.name)
 		{
 			sResult = bWrapWithLink ? '<a href="mailto:' + Utils.encodeHtml('"' + this.name + '" <' + this.email + '>') +
-				'" target="_blank" tabindex="-1">' + Utils.encodeHtml(this.name) + '</a>' : this.name;
+				'" target="_blank" tabindex="-1">' + Utils.encodeHtml(this.name) + '</a>' : 
+					(bEncodeHtml ? Utils.encodeHtml(this.name) : this.name);
 		}
 		else
 		{
@@ -4090,6 +3987,10 @@ EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink)
 				else
 				{
 					sResult = '"' + this.name + '" <' + sResult + '>';
+					if (bEncodeHtml)
+					{
+						sResult = Utils.encodeHtml(sResult);
+					}
 				}
 			}
 			else if (bWrapWithLink)
@@ -4158,6 +4059,172 @@ EmailModel.prototype.select2Selection = function (oContainer)
 
 	return sResult;
 };
+
+
+/**
+ * @param {string} $sEmailAddress
+ * @return {boolean}
+ */
+EmailModel.prototype.mailsoParse = function ($sEmailAddress)
+{
+	$sEmailAddress = Utils.trim($sEmailAddress);
+	if ('' === $sEmailAddress)
+	{
+		return false;
+	}
+
+	var
+		substr = function (str, start, len) {
+			str += '';
+			var	end = str.length;
+
+			if (start < 0) {
+				start += end;
+			}
+			
+			end = typeof len === 'undefined' ? end : (len < 0 ? len + end : len + start);
+			
+			return start >= str.length || start < 0 || start > end ? false : str.slice(start, end);
+		},
+				
+		substr_replace = function (str, replace, start, length) {
+			if (start < 0) {
+				start = start + str.length;
+			}
+			length = length !== undefined ? length : str.length;
+			if (length < 0) {
+				length = length + str.length - start;
+			}
+			return str.slice(0, start) + replace.substr(0, length) + replace.slice(length) + str.slice(start + length);
+		},
+		
+		$sName = '',
+		$sEmail = '',
+		$sComment = '',
+
+		$bInName = false,
+		$bInAddress = false,
+		$bInComment = false,
+
+		$aRegs = null,
+
+		$iStartIndex = 0,
+		$iEndIndex = 0,
+		$iCurrentIndex = 0
+	;
+
+	while ($iCurrentIndex < $sEmailAddress.length)
+	{
+		switch ($sEmailAddress.substr($iCurrentIndex, 1))
+		{
+			case '"':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					$bInName = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				else if ((!$bInAddress) && (!$bInComment))
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sName = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInName = false;
+				}
+				break;
+			case '<':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					if ($iCurrentIndex > 0 && $sName.length === 0)
+					{
+						$sName = substr($sEmailAddress, 0, $iCurrentIndex);
+					}
+
+					$bInAddress = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				break;
+			case '>':
+				if ($bInAddress)
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sEmail = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInAddress = false;
+				}
+				break;
+			case '(':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					$bInComment = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				break;
+			case ')':
+				if ($bInComment)
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sComment = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInComment = false;
+				}
+				break;
+			case '\\':
+				$iCurrentIndex++;
+				break;
+		}
+
+		$iCurrentIndex++;
+	}
+
+	if ($sEmail.length === 0)
+	{
+		$aRegs = $sEmailAddress.match(/[^@\s]+@\S+/i);
+		if ($aRegs && $aRegs[0])
+		{
+			$sEmail = $aRegs[0];
+		}
+		else
+		{
+			$sName = $sEmailAddress;
+		}
+	}
+
+	if ($sEmail.length > 0 && $sName.length === 0 && $sComment.length === 0)
+	{
+		$sName = $sEmailAddress.replace($sEmail, '');
+	}
+
+	$sEmail = Utils.trim($sEmail).replace(/^[<]+/, '').replace(/[>]+$/, '');
+	$sName = Utils.trim($sName).replace(/^["']+/, '').replace(/["']+$/, '');
+	$sComment = Utils.trim($sComment).replace(/^[(]+/, '').replace(/[)]+$/, '');
+
+	// Remove backslash
+	$sName = $sName.replace(/\\\\(.)/, '$1');
+	$sComment = $sComment.replace(/\\\\(.)/, '$1');
+
+	this.name = $sName;
+	this.email = $sEmail;
+
+	this.clearDuplicateName();
+	return true;
+};
+
+/**
+ * @return {string}
+ */
+EmailModel.prototype.inputoTagLine = function ()
+{
+	return 0 < this.name.length ? this.name + ' (' + this.email + ')' : this.email;
+};
 
 /**
  * @constructor
@@ -5032,7 +5099,6 @@ AdminDomains.prototype.onDomainListChangeRequest = function ()
 function AdminSecurity()
 {
 	this.csrfProtection = ko.observable(!!RL.settingsGet('UseTokenProtection'));
-	this.usageStatistics = ko.observable(!!RL.settingsGet('UsageStatistics'));
 
 	this.adminLogin = ko.observable(RL.settingsGet('AdminLogin'));
 	this.adminPassword = ko.observable('');
@@ -5092,12 +5158,6 @@ AdminSecurity.prototype.onBuild = function ()
 			'TokenProtection': bValue ? '1' : '0'
 		});
 	});
-
-	this.usageStatistics.subscribe(function (bValue) {
-		RL.remote().saveAdminConfig(Utils.emptyFunction, {
-			'UsageStatistics': bValue ? '1' : '0'
-		});
-	});
 };
 
 AdminSecurity.prototype.onHide = function ()
@@ -5828,6 +5888,17 @@ AbstractAjaxRemoteStorage.prototype.jsInfo = function (fCallback, sType, mData,
 		'IsError': (Utils.isUnd(bIsError) ? false : !!bIsError) ? '1' : '0'
 	});
 };
+
+/**
+ * @param {?Function} fCallback
+ * @param {string} sVersion
+ */
+AbstractAjaxRemoteStorage.prototype.jsVersion = function (fCallback, sVersion)
+{
+	this.defaultRequest(fCallback, 'Version', {
+		'Version': sVersion
+	});
+};
 
 /**
  * @constructor
@@ -6557,10 +6628,9 @@ AbstractApp.prototype.loginAndLogoutReload = function (bLogout, bClose)
 
 /**
  * @param {string} sQuery
- * @param {number} iPage
  * @param {Function} fCallback
  */
-AbstractApp.prototype.getAutocomplete = function (sQuery, iPage, fCallback)
+AbstractApp.prototype.getAutocomplete = function (sQuery, fCallback)
 {
 	fCallback([], sQuery);
 };

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

@@ -2524,167 +2524,55 @@ ko.bindingHandlers.saveTrigger = {
 	}
 };
 
-ko.bindingHandlers.select2 = {
+ko.bindingHandlers.emailsTags = {
     'init': function(oElement, fValueAccessor) {
-
 		var
-			iTimer = 0,
-			iTimeout = 100,
-			oMatch = null,
-			oReg = new window.RegExp(/[a-zA-Z0-9\.\-_]+@[a-zA-Z0-9\.\-_]+/),
-			oReg2 = new window.RegExp(/(.+) [<]?([^\s<@]+@[a-zA-Z0-9\.\-_]+)[>]?/),
-			sEmptyTranslateFunction = function () {
-				return '';
-			},
-			/**
-			 * @param {{term:string, callback:Function, matcher:Function}} oCall
-			 */
-			fLazyAutocomplete = function (oCall) {
+			$oEl = $(oElement),
+			fValue = fValueAccessor()
+		;
 
-				RL.getAutocomplete(oCall['term'], oCall['page'], function (aData, bMore) {
-					oCall.callback({
-						'more': !!bMore,
-						'results': _.map(aData, function (oEmailItem) {
-							var sName = oEmailItem.toLine(false);
-							return {
-								'id': sName,
-								'text': sName,
-								'c': oEmailItem
-							};
-						})
-					});
+		$oEl.inputosaurus({
+			'parseOnBlur': true,
+			'inputDelimiters': [',', ';'],
+			'autoCompleteSource': function (oData, fResponse) {
+				RL.getAutocomplete(oData.term, function (aData) {
+					fResponse(_.map(aData, function (oEmailItem) {
+						return oEmailItem.toLine(false);
+					}));
 				});
-			}
-		;
-
-		$(oElement).addClass('ko-select2').select2({
-
-			/**
-			 * @param {{term:string, callback:Function, matcher:Function}} oCall
-			 */
-			'query': function (oCall) {
-				if (!oCall)
-				{
-					return;
-				}
-				
-//				if (RL.isLocalAutocomplete && false)
-//				{
-//					fLazyAutocomplete(oCall);
-//				}
-//				else
-//				{
-					if (0 === iTimer)
+			},
+			'parseHook': function (aInput) {
+				return _.map(aInput, function (sInputValue) {
+					
+					var sValue = Utils.trim(sInputValue), oEmail = null;
+					if ('' !== sValue)
 					{
-						fLazyAutocomplete(oCall);
-						iTimer = window.setTimeout(Utils.emptyFunction, iTimeout);
+						oEmail = new EmailModel();
+						oEmail.mailsoParse(sValue);
+						oEmail.clearDuplicateName();
+
+//						sValue = oEmail.toLine(false);
+//						return sValue;
+						return [oEmail.toLine(false), oEmail];
 					}
-					else
-					{
-						window.clearInterval(iTimer);
-						iTimer = window.setTimeout(function () {
-							fLazyAutocomplete(oCall);
-						}, iTimeout);
-					}
-//				}
+
+					return [sValue, null];
+
+				});
 			},
-			'formatSelection': function (oItem, oContainer) {
-				var sR = oItem && oItem.c ? oItem.c.select2Selection(oContainer) : oItem.text;
-				if (null !== sR)
-				{
-					return sR;
-				}
-			},
-			'formatResult': function (oItem, oContainer, oQuery, fEscapeMarkup) {
-				var sR = oItem && oItem.c ? oItem.c.select2Result(oContainer) : '';
-				return '' === sR ? fEscapeMarkup(oItem.text) : sR;
-			},
-			'createSearchChoice': function (sTerm, aList) {
-				return 0 === aList.length && oReg.test(sTerm) ?  {
-					'id': sTerm,
-					'text': sTerm
-				} : null;
-			},
-			'formatNoMatches': sEmptyTranslateFunction,
-			'formatSearching': function () {
-				return Utils.i18n('SUGGESTIONS/SEARCHING_DESC');
-			},
-			'formatInputTooShort': sEmptyTranslateFunction,
-			'formatSelectionTooBig': sEmptyTranslateFunction,
-			'multiple': true,
-			'tokenSeparators': [',', ';'],
-			'minimumInputLength': 2,
-			'selectOnBlur': false,
-			'closeOnSelect': true,
-			'openOnEnter': false
+			'change': _.bind(function (oEvent) {
+				$oEl.data('EmailsTagsValue', oEvent.target.value);
+				fValue(oEvent.target.value);
+			}, this)
 		});
 
-		ko.utils.domNodeDisposal.addDisposeCallback(oElement, function() {
-			$(oElement).select2('destroy');
-		});
-
-		$(oElement).on('change', function () {
-
-			var
-				aTags = $(this).select2('data'),
-				iIndex = 0,
-				iLen = aTags.length,
-				oItem = null,
-				aResult = []
-			;
-
-			for (; iIndex < iLen; iIndex++)
+		fValue.subscribe(function (sValue) {
+			if ($oEl.data('EmailsTagsValue') !== sValue)
 			{
-				oItem = aTags[iIndex];
-				if (oItem && oItem.id)
-				{
-					if (!oItem.c)
-					{
-						oItem.c = new EmailModel();
-						oMatch = oReg2.exec(Utils.trim(oItem.id));
-						if (oMatch && !Utils.isUnd(oMatch[2]))
-						{
-							oItem.c.name = oMatch[1];
-							oItem.c.email = oMatch[2];
-						}
-						else
-						{
-							oItem.c.email = oItem.id;
-						}
-					}
-
-					aResult.push(oItem.c);
-				}
+				$oEl.val(sValue);
+				$oEl.inputosaurus('refresh');
 			}
-
-			fValueAccessor()(aResult);
 		});
-    },
-
-	'update': function (oElement, fValueAccessor) {
-
-		var
-			aTags = ko.utils.unwrapObservable(fValueAccessor()),
-			iIndex = 0,
-			iLen = aTags.length,
-			oItem = null,
-			sName = '',
-			aResult = []
-		;
-
-		for (; iIndex < iLen; iIndex++)
-		{
-			oItem = aTags[iIndex];
-			sName = oItem.toLine(false);
-
-			aResult.push({
-				'id': sName,
-				'text': sName,
-				'c': oItem
-			});
-		}
-
-		$(oElement).select2('data', aResult);
 	}
 };
 
@@ -5116,10 +5004,6 @@ Knoin.prototype.hideScreenPopup = function (ViewModelClassToHide)
 		ViewModelClassToHide.__vm.modalVisibility(false);
 		this.delegateRun(ViewModelClassToHide.__vm, 'onHide');
 		this.popupVisibility(false);
-
-		_.defer(function () {
-			ViewModelClassToHide.__dom.find('.ko-select2').select2('close');
-		});
 	}
 };
 
@@ -5381,6 +5265,13 @@ EmailModel.prototype.email = '';
  */
 EmailModel.prototype.privateType = null;
 
+EmailModel.prototype.clear = function ()
+{
+	this.email = '';
+	this.name = '';
+	this.privateType = null;
+};
+
 /**
  * @returns {boolean}
  */
@@ -5441,6 +5332,8 @@ EmailModel.prototype.search = function (sQuery)
  */
 EmailModel.prototype.parse = function (sString)
 {
+	this.clear();
+
 	sString = Utils.trim(sString);
 
 	var
@@ -5484,18 +5377,22 @@ EmailModel.prototype.initByJson = function (oJsonEmail)
 /**
  * @param {boolean} bFriendlyView
  * @param {boolean=} bWrapWithLink = false
+ * @param {boolean=} bEncodeHtml = false
  * @return {string}
  */
-EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink)
+EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink, bEncodeHtml)
 {
 	var sResult = '';
 	if ('' !== this.email)
 	{
 		bWrapWithLink = Utils.isUnd(bWrapWithLink) ? false : !!bWrapWithLink;
+		bEncodeHtml = Utils.isUnd(bEncodeHtml) ? false : !!bEncodeHtml;
+		
 		if (bFriendlyView && '' !== this.name)
 		{
 			sResult = bWrapWithLink ? '<a href="mailto:' + Utils.encodeHtml('"' + this.name + '" <' + this.email + '>') +
-				'" target="_blank" tabindex="-1">' + Utils.encodeHtml(this.name) + '</a>' : this.name;
+				'" target="_blank" tabindex="-1">' + Utils.encodeHtml(this.name) + '</a>' : 
+					(bEncodeHtml ? Utils.encodeHtml(this.name) : this.name);
 		}
 		else
 		{
@@ -5510,6 +5407,10 @@ EmailModel.prototype.toLine = function (bFriendlyView, bWrapWithLink)
 				else
 				{
 					sResult = '"' + this.name + '" <' + sResult + '>';
+					if (bEncodeHtml)
+					{
+						sResult = Utils.encodeHtml(sResult);
+					}
 				}
 			}
 			else if (bWrapWithLink)
@@ -5578,6 +5479,172 @@ EmailModel.prototype.select2Selection = function (oContainer)
 
 	return sResult;
 };
+
+
+/**
+ * @param {string} $sEmailAddress
+ * @return {boolean}
+ */
+EmailModel.prototype.mailsoParse = function ($sEmailAddress)
+{
+	$sEmailAddress = Utils.trim($sEmailAddress);
+	if ('' === $sEmailAddress)
+	{
+		return false;
+	}
+
+	var
+		substr = function (str, start, len) {
+			str += '';
+			var	end = str.length;
+
+			if (start < 0) {
+				start += end;
+			}
+			
+			end = typeof len === 'undefined' ? end : (len < 0 ? len + end : len + start);
+			
+			return start >= str.length || start < 0 || start > end ? false : str.slice(start, end);
+		},
+				
+		substr_replace = function (str, replace, start, length) {
+			if (start < 0) {
+				start = start + str.length;
+			}
+			length = length !== undefined ? length : str.length;
+			if (length < 0) {
+				length = length + str.length - start;
+			}
+			return str.slice(0, start) + replace.substr(0, length) + replace.slice(length) + str.slice(start + length);
+		},
+		
+		$sName = '',
+		$sEmail = '',
+		$sComment = '',
+
+		$bInName = false,
+		$bInAddress = false,
+		$bInComment = false,
+
+		$aRegs = null,
+
+		$iStartIndex = 0,
+		$iEndIndex = 0,
+		$iCurrentIndex = 0
+	;
+
+	while ($iCurrentIndex < $sEmailAddress.length)
+	{
+		switch ($sEmailAddress.substr($iCurrentIndex, 1))
+		{
+			case '"':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					$bInName = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				else if ((!$bInAddress) && (!$bInComment))
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sName = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInName = false;
+				}
+				break;
+			case '<':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					if ($iCurrentIndex > 0 && $sName.length === 0)
+					{
+						$sName = substr($sEmailAddress, 0, $iCurrentIndex);
+					}
+
+					$bInAddress = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				break;
+			case '>':
+				if ($bInAddress)
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sEmail = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInAddress = false;
+				}
+				break;
+			case '(':
+				if ((!$bInName) && (!$bInAddress) && (!$bInComment))
+				{
+					$bInComment = true;
+					$iStartIndex = $iCurrentIndex;
+				}
+				break;
+			case ')':
+				if ($bInComment)
+				{
+					$iEndIndex = $iCurrentIndex;
+					$sComment = substr($sEmailAddress, $iStartIndex + 1, $iEndIndex - $iStartIndex - 1);
+					$sEmailAddress = substr_replace($sEmailAddress, '', $iStartIndex, $iEndIndex - $iStartIndex + 1);
+					$iEndIndex = 0;
+					$iCurrentIndex = 0;
+					$iStartIndex = 0;
+					$bInComment = false;
+				}
+				break;
+			case '\\':
+				$iCurrentIndex++;
+				break;
+		}
+
+		$iCurrentIndex++;
+	}
+
+	if ($sEmail.length === 0)
+	{
+		$aRegs = $sEmailAddress.match(/[^@\s]+@\S+/i);
+		if ($aRegs && $aRegs[0])
+		{
+			$sEmail = $aRegs[0];
+		}
+		else
+		{
+			$sName = $sEmailAddress;
+		}
+	}
+
+	if ($sEmail.length > 0 && $sName.length === 0 && $sComment.length === 0)
+	{
+		$sName = $sEmailAddress.replace($sEmail, '');
+	}
+
+	$sEmail = Utils.trim($sEmail).replace(/^[<]+/, '').replace(/[>]+$/, '');
+	$sName = Utils.trim($sName).replace(/^["']+/, '').replace(/["']+$/, '');
+	$sComment = Utils.trim($sComment).replace(/^[(]+/, '').replace(/[)]+$/, '');
+
+	// Remove backslash
+	$sName = $sName.replace(/\\\\(.)/, '$1');
+	$sComment = $sComment.replace(/\\\\(.)/, '$1');
+
+	this.name = $sName;
+	this.email = $sEmail;
+
+	this.clearDuplicateName();
+	return true;
+};
+
+/**
+ * @return {string}
+ */
+EmailModel.prototype.inputoTagLine = function ()
+{
+	return 0 < this.name.length ? this.name + ' (' + this.email + ')' : this.email;
+};
 
 /**
  * @constructor
@@ -7516,22 +7583,6 @@ function PopupsComposeViewModel()
 	var
 		self = this,
 		oRainLoopData = RL.data(),
-		fEmailArrayToStringLineHelper = function (aList) {
-
-			var
-				iIndex = 0,
-				iLen = aList.length,
-				aResult = []
-			;
-
-			for (; iIndex < iLen; iIndex++)
-			{
-				aResult.push(aList[iIndex].toLine(false));
-			}
-
-			return aResult.join(', ');
-		},
-
 		fCcAndBccCheckHelper = function (aValue) {
 			if (false === this.showCcAndBcc() && 0 < aValue.length)
 			{
@@ -7542,9 +7593,9 @@ function PopupsComposeViewModel()
 
 	this.resizer = ko.observable(false).extend({'throttle': 50});
 
-	this.to = ko.observableArray([]);
-	this.cc = ko.observableArray([]);
-	this.bcc = ko.observableArray([]);
+	this.to = ko.observable('');
+	this.cc = ko.observable('');
+	this.bcc = ko.observable('');
 
 	this.replyTo = ko.observable('');
 	this.subject = ko.observable('');
@@ -7729,12 +7780,12 @@ function PopupsComposeViewModel()
 
 	this.sendCommand = Utils.createCommand(this, function () {
 		var
-			aTo = this.to(),
+			sTo = this.to(),
 			sSentFolder = RL.data().sentFolder(),
 			aFlagsCache = []
 		;
 
-		if (0 === aTo.length)
+		if (0 === sTo.length)
 		{
 			this.emptyToError(true);
 		}
@@ -7789,9 +7840,9 @@ function PopupsComposeViewModel()
 					this.draftID(),
 					sSentFolder,
 					this.currentIdentityResultEmail(),
-					fEmailArrayToStringLineHelper(aTo),
-					fEmailArrayToStringLineHelper(this.cc()),
-					fEmailArrayToStringLineHelper(this.bcc()),
+					sTo,
+					this.cc(),
+					this.bcc(),
 					this.subject(),
 					this.oEditor.isHtml(),
 					this.oEditor.getTextForRequest(),
@@ -7825,9 +7876,9 @@ function PopupsComposeViewModel()
 				this.draftID(),
 				RL.data().draftFolder(),
 				this.currentIdentityResultEmail(),
-				fEmailArrayToStringLineHelper(this.to()),
-				fEmailArrayToStringLineHelper(this.cc()),
-				fEmailArrayToStringLineHelper(this.bcc()),
+				this.to(),
+				this.cc(),
+				this.bcc(),
 				this.subject(),
 				this.oEditor.isHtml(),
 				this.oEditor.getTextForRequest(),
@@ -7947,7 +7998,7 @@ PopupsComposeViewModel.prototype.findIdentityIdByMessage = function (sComposeTyp
 		case Enums.ComposeType.ReplyAll:
 		case Enums.ComposeType.Forward:
 		case Enums.ComposeType.ForwardAsAttachment:
-			_.find(_.union(oMessage.to, oMessage.сс, oMessage.bсс), fFindHelper);
+			_.find(_.union(oMessage.to, oMessage.cc, oMessage.bcc), fFindHelper);
 			break;
 		case Enums.ComposeType.Draft:
 			_.find(_.union(oMessage.from, oMessage.replyTo), fFindHelper);
@@ -8098,7 +8149,22 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 		aDraftInfo = null,
 		oMessage = null,
 		bFocusOnBody = false,
-		sComposeType = sType || Enums.ComposeType.Empty
+		sComposeType = sType || Enums.ComposeType.Empty,
+		fEmailArrayToStringLineHelper = function (aList) {
+
+			var
+				iIndex = 0,
+				iLen = aList.length,
+				aResult = []
+			;
+
+			for (; iIndex < iLen; iIndex++)
+			{
+				aResult.push(aList[iIndex].toLine(false));
+			}
+
+			return aResult.join(', ');
+		}
 	;
 
 	oMessageOrArray = oMessageOrArray || null;
@@ -8118,7 +8184,7 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 
 	if (Utils.isNonEmptyArray(aToEmails))
 	{
-		this.to(aToEmails);
+		this.to(fEmailArrayToStringLineHelper(aToEmails));
 	}
 
 	if ('' !== sComposeType && oMessage)
@@ -8136,7 +8202,7 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 			case Enums.ComposeType.Empty:
 				break;
 			case Enums.ComposeType.Reply:
-				this.to(oMessage.replyEmails(oExcludeEmail));
+				this.to(fEmailArrayToStringLineHelper(oMessage.replyEmails(oExcludeEmail)));
 				this.subject(Utils.replySubjectAdd('Re', sSubject));
 				this.prepearMessageAttachments(oMessage, sComposeType);
 				this.aDraftInfo = ['reply', oMessage.uid, oMessage.folderFullNameRaw];
@@ -8147,8 +8213,8 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 
 			case Enums.ComposeType.ReplyAll:
 				aResplyAllParts = oMessage.replyAllEmails(oExcludeEmail);
-				this.to(aResplyAllParts[0]);
-				this.cc(aResplyAllParts[1]);
+				this.to(fEmailArrayToStringLineHelper(aResplyAllParts[0]));
+				this.cc(fEmailArrayToStringLineHelper(aResplyAllParts[1]));
 				this.subject(Utils.replySubjectAdd('Re', sSubject));
 				this.prepearMessageAttachments(oMessage, sComposeType);
 				this.aDraftInfo = ['reply', oMessage.uid, oMessage.folderFullNameRaw];
@@ -8174,9 +8240,9 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 				break;
 
 			case Enums.ComposeType.Draft:
-				this.to(oMessage.to);
-				this.cc(oMessage.cc);
-				this.bcc(oMessage.bcc);
+				this.to(fEmailArrayToStringLineHelper(oMessage.to));
+				this.cc(fEmailArrayToStringLineHelper(oMessage.cc));
+				this.bcc(fEmailArrayToStringLineHelper(oMessage.bcc));
 
 				this.bFromDraft = true;
 
@@ -8240,7 +8306,7 @@ PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToE
 			self.addMessageAsAttachment(oMessage);
 		});
 	}
-
+	
 	aDownloads = this.getAttachmentsDownloadsForUpload();
 	if (Utils.isNonEmptyArray(aDownloads))
 	{
@@ -8818,9 +8884,10 @@ PopupsComposeViewModel.prototype.isEmptyForm = function (bIncludeAttachmentInPro
 
 PopupsComposeViewModel.prototype.reset = function ()
 {
-	this.to([]);
-	this.cc([]);
-	this.bcc([]);
+	this.to('');
+	this.cc('');
+	this.bcc('');
+	this.replyTo('');
 	this.subject('');
 
 	this.aDraftInfo = null;
@@ -13600,6 +13667,17 @@ AbstractAjaxRemoteStorage.prototype.jsInfo = function (fCallback, sType, mData,
 		'IsError': (Utils.isUnd(bIsError) ? false : !!bIsError) ? '1' : '0'
 	});
 };
+
+/**
+ * @param {?Function} fCallback
+ * @param {string} sVersion
+ */
+AbstractAjaxRemoteStorage.prototype.jsVersion = function (fCallback, sVersion)
+{
+	this.defaultRequest(fCallback, 'Version', {
+		'Version': sVersion
+	});
+};
 
 /**
  * @constructor
@@ -15231,10 +15309,9 @@ AbstractApp.prototype.loginAndLogoutReload = function (bLogout, bClose)
 
 /**
  * @param {string} sQuery
- * @param {number} iPage
  * @param {Function} fCallback
  */
-AbstractApp.prototype.getAutocomplete = function (sQuery, iPage, fCallback)
+AbstractApp.prototype.getAutocomplete = function (sQuery, fCallback)
 {
 	fCallback([], sQuery);
 };
@@ -15267,11 +15344,20 @@ function RainLoopApp()
 
 	this.quotaDebounce = _.debounce(this.quota, 1000 * 30);
 
-	$.wakeUp(function (iSleepTime) {
-		RL.remote().jsInfo(Utils.emptyFunction, {
-			'Version': RL.settingsGet('Version'),
-			'WakeUpTime': Math.round(iSleepTime / 1000)
-		}, true);
+	$.wakeUp(function () {
+		RL.remote().jsVersion(function (sResult, oData) {
+			if (Enums.StorageResultType.Success === sResult && oData && !oData.Result)
+			{
+				if (window.parent && !!RL.settingsGet('InIframe'))
+				{
+					window.parent.location.reload();
+				}
+				else
+				{
+					window.location.reload();
+				}
+			}
+		}, RL.settingsGet('Version'));
 	}, {}, 60 * 60 * 1000);
 }
 
@@ -15771,10 +15857,9 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
 
 /**
  * @param {string} sQuery
- * @param {number} iPage
  * @param {Function} fCallback
  */
-RainLoopApp.prototype.getAutocomplete = function (sQuery, iPage, fCallback)
+RainLoopApp.prototype.getAutocomplete = function (sQuery, fCallback)
 {
 	var
 		aData = []
@@ -15787,13 +15872,13 @@ RainLoopApp.prototype.getAutocomplete = function (sQuery, iPage, fCallback)
 				return aItem && aItem[0] ? new EmailModel(aItem[0], aItem[1]) : null;
 			});
 
-			fCallback(_.compact(aData), !!oData.Result.More);
+			fCallback(_.compact(aData));
 		}
 		else if (Enums.StorageResultType.Abort !== sResult)
 		{
-			fCallback([], false);
+			fCallback([]);
 		}
-	}, sQuery, iPage);
+	}, sQuery);
 };
 
 RainLoopApp.prototype.emailsPicsHashes = function ()