From 836127d08ffba18e900fa2e11c7f3d62fc425ae7 Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 21 Jun 2017 12:10:22 +0200 Subject: [PATCH] created textarea 2.0 object --- README.md | 3 +- .../jquery.textarea_autosize.js | 54 +++++++++++++++++++ .../jquery.textarea_autosize.min.js | 1 + assets/js/common/functionsSchema.js | 7 +++ assets/js/common/utils.js | 38 ++++++++++--- assets/js/components/textarea.js | 43 +++++++++++++++ assets/js/pages/home/home.js | 19 +++++++ corePage/config/dev.config.php | 6 +++ 8 files changed, 162 insertions(+), 9 deletions(-) create mode 100755 assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.js create mode 100755 assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.min.js create mode 100644 assets/js/components/textarea.js diff --git a/README.md b/README.md index e816ed9f..ea859948 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,5 @@ ComunicWeb would not exists without the following technologies developped by the - iCheck - Select2 4.0 - bootstrap-notify -- Twitter Emoji (https://github.com/twitter/twemoji) \ No newline at end of file +- Twitter Emoji (https://github.com/twitter/twemoji) +- jQuery Textarea AutoSize plugin (by Javier Julio) \ No newline at end of file diff --git a/assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.js b/assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.js new file mode 100755 index 00000000..2801b379 --- /dev/null +++ b/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); diff --git a/assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.min.js b/assets/3rdparty/jquery.textarea_autosize/jquery.textarea_autosize.min.js new file mode 100755 index 00000000..bdd03950 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index d56ab1ef..a5c3032f 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -602,6 +602,13 @@ var ComunicWeb = { }, }, + + /** + * Modern textarea handler + */ + textarea: { + + }, }, /** diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index a7b66dfa..0aa07281 100644 --- a/assets/js/common/utils.js +++ b/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 diff --git a/assets/js/components/textarea.js b/assets/js/components/textarea.js new file mode 100644 index 00000000..8843083f --- /dev/null +++ b/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; diff --git a/assets/js/pages/home/home.js b/assets/js/pages/home/home.js index eddac137..8d92169b 100644 --- a/assets/js/pages/home/home.js +++ b/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 diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php index f4284c19..67cc5a83 100644 --- a/corePage/config/dev.config.php +++ b/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",