CTextBox: Keep size between postbacks when resized.

VAR.Focus.Web/Controls/CTextBox.cs

@@ -1,13 +1,20 @@
 using System;
+using System.Collections.Generic;
+using System.Text;
 using System.Web.UI;
 using System.Web.UI.WebControls;
+using VAR.Json;
 
 namespace VAR.Focus.Web.Controls
 {
-    public class CTextBox : TextBox, IValidableControl
+    public class CTextBox : Control, INamingContainer, IValidableControl
     {
         #region Declarations
 
+        private TextBox _txtContent = new TextBox();
+
+        private HiddenField _hidSize = null;
+
         private const string CssClassBase = "textbox";
         private string _cssClassExtra = "";
 
@@ -19,6 +26,8 @@ namespace VAR.Focus.Web.Controls
 
         private Control _nextFocusOnEnter = null;
 
+        private bool _keepSize = false;
+
         #endregion Declarations
 
         #region Properties
@@ -53,44 +62,93 @@ namespace VAR.Focus.Web.Controls
             set { _nextFocusOnEnter = value; }
         }
 
+        public bool KeepSize
+        {
+            get { return _keepSize; }
+            set { _keepSize = value; }
+        }
+
+        public string Text
+        {
+            get { return _txtContent.Text; }
+            set { _txtContent.Text = value; }
+        }
+
+        public TextBoxMode TextMode
+        {
+            get { return _txtContent.TextMode; }
+            set { _txtContent.TextMode = value; }
+        }
+
         #endregion Properties
 
         #region Control life cycle
 
         public CTextBox()
         {
+            Init += CTextBox_Init;
             PreRender += CTextbox_PreRender;
         }
 
+        private void CTextBox_Init(object sender, EventArgs e)
+        {
+            Controls.Add(_txtContent);
+
+            if (TextMode == TextBoxMode.MultiLine)
+            {
+                if (_keepSize)
+                {
+                    _hidSize = new HiddenField();
+                    Controls.Add(_hidSize);
+                }
+
+                string strCfgName = string.Format("{0}_cfg", this.ClientID);
+                Dictionary<string, object> cfg = new Dictionary<string, object>
+                {
+                    {"txtContent", _txtContent.ClientID},
+                    {"hidSize", _hidSize.ClientID},
+                    {"keepSize", _keepSize },
+                };
+                JsonWriter jsonWriter = new JsonWriter();
+                StringBuilder sbCfg = new StringBuilder();
+                sbCfg.AppendFormat("<script>\n");
+                sbCfg.AppendFormat("var {0} = {1};\n", strCfgName, jsonWriter.Write(cfg));
+                sbCfg.AppendFormat("CTextBox_Multiline_Init({0});\n", strCfgName);
+                sbCfg.AppendFormat("</script>\n");
+                LiteralControl liScript = new LiteralControl(sbCfg.ToString());
+                Controls.Add(liScript);
+            }
+        }
+
         private void CTextbox_PreRender(object sender, EventArgs e)
         {
-            CssClass = CssClassBase;
+            _txtContent.CssClass = CssClassBase;
             if (string.IsNullOrEmpty(_cssClassExtra) == false)
             {
-                CssClass = string.Format("{0} {1}", CssClassBase, _cssClassExtra);
+                _txtContent.CssClass = string.Format("{0} {1}", CssClassBase, _cssClassExtra);
             }
             if (Page.IsPostBack && (_allowEmpty == false && IsEmpty()) || _markedInvalid)
             {
-                CssClass += " textboxInvalid";
+                _txtContent.CssClass += " textboxInvalid";
             }
-            Attributes.Add("onchange", "ElementRemoveClass(this, 'textboxInvalid');");
+            _txtContent.Attributes.Add("onchange", "ElementRemoveClass(this, 'textboxInvalid');");
 
             if (string.IsNullOrEmpty(_placeHolder) == false)
             {
-                Attributes.Add("placeholder", _placeHolder);
+                _txtContent.Attributes.Add("placeholder", _placeHolder);
             }
 
             if (_nextFocusOnEnter != null)
             {
-                this.Attributes.Add("onkeydown", string.Format(
+                _txtContent.Attributes.Add("onkeydown", string.Format(
                     "if(event.keyCode==13){{document.getElementById('{0}').focus(); return false;}}",
                     _nextFocusOnEnter.ClientID));
             }
 
             // FIX: The framework deletes textbox values on password mode
-            if (TextMode == TextBoxMode.Password)
+            if (_txtContent.TextMode == TextBoxMode.Password)
             {
-                Attributes["value"] = Text;
+                _txtContent.Attributes["value"] = _txtContent.Text;
             }
         }
 
@@ -100,12 +158,12 @@ namespace VAR.Focus.Web.Controls
 
         public bool IsEmpty()
         {
-            return string.IsNullOrEmpty(Text);
+            return string.IsNullOrEmpty(_txtContent.Text);
         }
 
         public bool IsValid()
         {
-            return _allowEmpty || (string.IsNullOrEmpty(Text) == false);
+            return _allowEmpty || (string.IsNullOrEmpty(_txtContent.Text) == false);
         }
 
         #endregion Public methods

VAR.Focus.Web/Pages/FrmBoard.cs

@@ -15,8 +15,8 @@ namespace VAR.Focus.Web.Pages
 
         private int _idBoard = 0;
 
-        private CTextBox _txtTitle = new CTextBox { ID = "txtTitle", CssClassExtra = "width100pc", AllowEmpty = false };
+        private CTextBox _txtTitle = new CTextBox { ID = "txtTitle", CssClassExtra = "width100pc", AllowEmpty = false, };
-        private CTextBox _txtDescription = new CTextBox { ID = "txtDescription", CssClassExtra = "width100pc", TextMode = TextBoxMode.MultiLine };
+        private CTextBox _txtDescription = new CTextBox { ID = "txtDescription", CssClassExtra = "width100pc", TextMode = TextBoxMode.MultiLine, KeepSize = true, };
 
         #endregion Declarations
 

VAR.Focus.Web/Pages/FrmBoardEdit.cs

@@ -15,7 +15,7 @@ namespace VAR.Focus.Web.Pages
         private int _idBoard = 0;
 
         private CTextBox _txtTitle = new CTextBox { ID = "txtTitle", CssClassExtra = "width100pc", AllowEmpty = false };
-        private CTextBox _txtDescription = new CTextBox { ID = "txtDescription", CssClassExtra = "width100pc", TextMode = TextBoxMode.MultiLine };
+        private CTextBox _txtDescription = new CTextBox { ID = "txtDescription", CssClassExtra = "width100pc", TextMode = TextBoxMode.MultiLine, KeepSize = true, };
         private CButton _btnSave = new CButton { ID = "btnSave" };
         private CButton _btnExit = new CButton { ID = "btnExit" };
 

VAR.Focus.Web/Pages/FrmRegister.cs

@@ -13,8 +13,8 @@ namespace VAR.Focus.Web.Pages
         private Panel _pnlRegister = new Panel { ID = "pnlRegister" };
         private CTextBox _txtName = new CTextBox { ID = "txtName", CssClassExtra = "width150px", AllowEmpty = false };
         private CTextBox _txtEmail = new CTextBox { ID = "txtEmail", CssClassExtra = "width150px", AllowEmpty = false };
-        private CTextBox _txtPassword1 = new CTextBox { ID = "txtPassword1", CssClass = "width150px", AllowEmpty = false, TextMode = TextBoxMode.Password };
+        private CTextBox _txtPassword1 = new CTextBox { ID = "txtPassword1", CssClassExtra = "width150px", AllowEmpty = false, TextMode = TextBoxMode.Password };
-        private CTextBox _txtPassword2 = new CTextBox { ID = "txtPassword2", CssClass = "width150px", AllowEmpty = false, TextMode = TextBoxMode.Password };
+        private CTextBox _txtPassword2 = new CTextBox { ID = "txtPassword2", CssClassExtra = "width150px", AllowEmpty = false, TextMode = TextBoxMode.Password };
         private CButton _btnRegister = new CButton { ID = "btnRegister" };
         private CButton _btnExit = new CButton { ID = "btnExit" };
         private Panel _pnlSuccess = new Panel { ID = "pnlSuccess" };

VAR.Focus.Web/Scripts/03. Controls.js

@@ -0,0 +1,79 @@
+
+////////////////////////
+//  CTextBox_Multilin_SetText
+//
+var CTextBox_SetText = function (id, text) {
+    var element = document.getElementById(id);
+    element.value = text;
+}
+
+////////////////////////
+//  CTextBox_Multiline_KeyDown
+//
+var CTextBox_Multiline_KeyDown = function (e) {
+    if (e.keyCode == 9 || e.which == 9) {
+        e.preventDefault();
+        var s = this.selectionStart;
+        this.value = this.value.substring(0, this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
+        this.selectionEnd = s + 1;
+    }
+};
+
+////////////////////////
+//  CTextBox_Multiline_SaveSizeData
+//
+var CTextBox_Multiline_SaveSizeData = function (textArea) {
+    var hidSizeData = document.getElementById(textArea.cfg.hidSize);
+    hidSizeData.value = JSON.stringify(textArea.cfg.size);
+}
+
+////////////////////////
+//  CTextBox_Multiline_RestoreSizeData
+//
+var CTextBox_Multiline_RestoreSizeData = function (textArea) {
+    var hidSizeData = document.getElementById(textArea.cfg.hidSize);
+
+    if (hidSizeData.value !== "") {
+        textArea.cfg.size = JSON.parse(hidSizeData.value);;
+        textArea.style.width = textArea.cfg.size.width + "px";
+        textArea.style.height = textArea.cfg.size.height + "px";
+        textArea.scrollTop = textArea.cfg.size.scrollTop;
+    }
+    textArea.cfg.size = { height: textArea.offsetHeight, scrollTop: textArea.scrollTop };
+}
+
+////////////////////////
+//  CTextBox_Multiline_MouseUp
+//
+var CTextBox_Multiline_MouseUp = function (e) {
+    var textArea = e.target;
+    var newSize = { height: textArea.offsetHeight, width: textArea.offsetWidth, scrollTop: textArea.scrollTop };
+    if (textArea.cfg.size.height != newSize.height) {
+        textArea.cfg.size = newSize;
+        CTextBox_Multiline_SaveSizeData(textArea);
+    }
+}
+
+////////////////////////
+//  CTextBox_Multiline_Scrolled
+//
+var CTextBox_Multiline_Scrolled = function (e) {
+    var textArea = e.target;
+    textArea.cfg.size = { height: textArea.offsetHeight, scrollTop: textArea.scrollTop };
+    CTextBox_Multiline_SaveSizeData(textArea);
+}
+
+////////////////////////
+//  CTextBox_Multiline_Init
+//
+var CTextBox_Multiline_Init = function (cfg) {
+    var textArea = document.getElementById(cfg.txtContent);
+    textArea.cfg = cfg;
+
+    textArea.onkeydown = CTextBox_Multiline_KeyDown;
+    if (cfg.keepSize) {
+        CTextBox_Multiline_RestoreSizeData(textArea);
+        textArea.onmouseup = CTextBox_Multiline_MouseUp;
+        textArea.onscroll = CTextBox_Multiline_Scrolled;
+    }
+}

VAR.Focus.Web/VAR.Focus.Web.csproj

@@ -66,6 +66,7 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="Scripts\02. Ajax.js" />
+    <Content Include="Scripts\03. Controls.js" />
     <Content Include="Scripts\05. Cards.js" />
     <Content Include="Scripts\10. Chat.js" />
     <Content Include="Styles\00. Reset.css" />