created textarea 2.0 object

README.md

@@ -15,3 +15,4 @@ ComunicWeb would not exists without the following technologies developped by the
 - Select2 4.0
 - bootstrap-notify
 - Twitter Emoji (https://github.com/twitter/twemoji)
+- jQuery Textarea AutoSize plugin (by Javier Julio)

assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.js

@@ -0,0 +1,54 @@
+/*!
+ * jQuery Textarea AutoSize plugin
+ * Author: Javier Julio
+ * Licensed under the MIT license
+ */
+;(function ($, window, document, undefined) {
+
+  var pluginName = "textareaAutoSize";
+  var pluginDataName = "plugin_" + pluginName;
+
+  var containsText = function (value) {
+    return (value.replace(/\s/g, '').length > 0);
+  };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.$element = $(element);
+    this.init();
+  }
+
+  Plugin.prototype = {
+    init: function() {
+      var height = this.$element.outerHeight();
+      var diff = parseInt(this.$element.css('paddingBottom')) +
+                 parseInt(this.$element.css('paddingTop')) || 0;
+
+      if (containsText(this.element.value)) {
+        this.$element.height(this.element.scrollHeight - diff);
+      }
+
+      // keyup is required for IE to properly reset height when deleting text
+      this.$element.on('input keyup', function(event) {
+        var $window = $(window);
+        var currentScrollPosition = $window.scrollTop();
+
+        $(this)
+          .height(0)
+          .height(this.scrollHeight - diff);
+
+        $window.scrollTop(currentScrollPosition);
+      });
+    }
+  };
+
+  $.fn[pluginName] = function (options) {
+    this.each(function() {
+      if (!$.data(this, pluginDataName)) {
+        $.data(this, pluginDataName, new Plugin(this, options));
+      }
+    });
+    return this;
+  };
+
+})(jQuery, window, document);

assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.min.js

@@ -0,0 +1 @@
+!function(t,e,i,n){function s(e,i){this.element=e,this.$element=t(e),this.init()}var h="textareaAutoSize",o="plugin_"+h,r=function(t){return t.replace(/\s/g,"").length>0};s.prototype={init:function(){var i=parseInt(this.$element.css("paddingBottom"))+parseInt(this.$element.css("paddingTop"))+parseInt(this.$element.css("borderTopWidth"))+parseInt(this.$element.css("borderBottomWidth"))||0;r(this.element.value)&&this.$element.height(this.element.scrollHeight-i),this.$element.on("input keyup",function(n){var s=t(e),h=s.scrollTop();t(this).height(0).height(this.scrollHeight-i),s.scrollTop(h)})}},t.fn[h]=function(e){return this.each(function(){t.data(this,o)||t.data(this,o,new s(this,e))}),this}}(jQuery,window,document);

assets/js/common/functionsSchema.js

@@ -602,6 +602,13 @@ var ComunicWeb = {
 			},
 			
 		},
+
+		/**
+		 * Modern textarea handler
+		 */
+		textarea: {
+
+		},
 	},
 
 	/**

assets/js/common/utils.js

@@ -27,14 +27,15 @@ function createElem(nodeType, appendTo){
  * @param {Object} infos Informations about the HTML node to create
  * @info {String} type The type of the new node
  * @info {HTMLElement} appendTo HTML Element that will receive the new node
- * @info {HTMLElement} insertBefore Insert before specified HTML element
- * @info {HTMLElement} class The class of the new element
- * @info {HTMLElement} id The ID of the new element
- * @info {HTMLElement} title The title of the new element
- * @info {HTMLElement} src The src attribute of the new element
- * @info {HTMLElement} type The type of the new element
- * @info {HTMLElement} value The value of the new element
- * @info {HTMLElement} innerHTML Specify the html content of the newly created element
+ * @info {String} insertBefore Insert before specified HTML element
+ * @info {String} class The class of the new element
+ * @info {String} id The ID of the new element
+ * @info {String} title The title of the new element
+ * @info {String} src The src attribute of the new element
+ * @info {String} type The type of the new element
+ * @info {String} value The value of the new element
+ * @info {String} placeholder The placeholder of the new element
+ * @info {String} innerHTML Specify the html content of the newly created element
  * @return {HTMLElement} The newly created element
  */
 function createElem2(infos){
@@ -73,6 +74,10 @@ function createElem2(infos){
 	if(infos.value)
 		newElem.value = infos.value;
 
+	//Specify element placeholder
+	if(infos.placeholder)
+		newElem.placeholder = infos.placeholder;
+
 	//Specify node content
 	if(infos.innerHTML)
 		newElem.innerHTML = infos.innerHTML;
@@ -214,6 +219,23 @@ function createFormGroup(infos){
 		if(infos.placeholder) //Placeholder if required
 			input.setAttribute("data-placeholder", infos.placeholder);
 
+	}
+	//In case of textarea
+	else if(infos.type = "textarea"){
+		//Fill label value
+		if(infos.label)
+			labelElem.innerHTML = infos.label;
+		else
+			labelElem.remove(); //Remove useless label element
+		
+		//Create textarea element
+		var input = createElem2({
+			appendTo: formGroup,
+			type: "textarea",
+			class: "form-control",
+			placeholder: infos.placeholder,
+		});
+
 	}
 	else {
 		//Else continue the function as a normal input type

assets/js/components/textarea.js

@@ -0,0 +1,43 @@
+/**
+ * Modern textarea handler
+ * 
+ * @author Pierre HUBERT
+ */
+
+/**
+ * Create a modern textarea element object
+ */
+var textArea2 = function(infos){
+	//Nothing now
+};
+
+/**
+ * Initializate textarea 2.0 element
+ * 
+ * @param {Object} infos Informations about the textarea to enable
+ * @info {HTMLElement} element The element to make modern
+ */
+textArea2.prototype.init = function(infos){
+	
+	//Save Textarea element
+	this.element = infos.element;
+
+	//Adapt textarea style
+	this.element.style.overflow = "hidden";
+
+	//Initializate textarea auto-size
+	$(this.element).textareaAutoSize();
+
+};
+
+/**
+ * Get the textarea value
+ * 
+ * @return {String} Textarea value
+ */
+textArea2.prototype.getValue = function(){
+	return this.element.innerText;
+};
+
+//Save the function in the system
+ComunicWeb.components.textarea = textArea2;

assets/js/pages/home/home.js

@@ -28,6 +28,8 @@ ComunicWeb.pages.home.home = {
             loginButton.innerHTML="Logout";
             targetElement.appendChild(loginButton);
 
+
+
             //Dev feature emojies
             var emojiesArea = createElem2({
                 appendTo: targetElement,
@@ -40,6 +42,23 @@ ComunicWeb.pages.home.home = {
             ComunicWeb.components.emoji.parser.parse({
                 element: emojiesArea,
             });
+
+            //Create textarea element
+            var textarea = createFormGroup({
+                target: targetElement,
+                type: "textarea",
+                label: "Textarea",
+                placeholder: "New message",
+            });
+            textarea.style.width = "200px";
+
+            //Initializate textarea
+            var textarea2 = new ComunicWeb.components.textarea();
+            textarea2.init({
+                element: textarea
+            });
+
+            console.log(textarea2);
         }
         else{
             //Display landing page

corePage/config/dev.config.php

@@ -77,6 +77,9 @@ $config['JSfiles'] = array(
 		//Twitter emojies
 		"%PATH_ASSETS%3rdparty/twemoji/2/twemoji.min.js",
 
+		//Textarea auto-size
+		"%PATH_ASSETS%3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.min.js",
+
 	//Utilities
 	"%PATH_ASSETS%js/common/utils.js",
 
@@ -139,6 +142,9 @@ $config['JSfiles'] = array(
 		"%PATH_ASSETS%js/components/emoji/parser.js",
 		"%PATH_ASSETS%js/components/emoji/list.js",
 
+		//Modern textarea handler
+		"%PATH_ASSETS%js/components/textarea.js",
+
 	//User scripts
 	"%PATH_ASSETS%js/user/loginTokens.js",
 	"%PATH_ASSETS%js/user/userLogin.js",