[lib.content-controller] textarea auto_grow() [scss.container] textarea layout for auto_grow() [channel.vue] texarea auto_grow()

webpack/lib/content-controller.js

@@ -75,4 +75,19 @@ export class ContentController{
 	}
 
 
+	/* (6) Textarea auto_grow
+	*
+	* @e<Event>						Textarea event
+	*
+	---------------------------------------------------------*/
+	auto_grow(e){
+
+		setTimeout(() => {
+			e.target.style.height = '0';
+			e.target.style.height = `calc( ${e.target.scrollHeight}px )`;
+		}, 1);
+	}
+
+
+
 }

webpack/lib/room-controller.js

@@ -28,7 +28,7 @@ export class RoomController{
 		let room = this.get(type, id);
 
 		/* (2) Manage invalid room */
-		if( room == null )
+		if( Object.keys(room).length == 0 )
 			return false;
 
 		/* (3) Close last room */
@@ -111,7 +111,7 @@ export class RoomController{
 
 		/* (1) Manage invalid @type */
 		if( typeof type !== 'string' || this[type] == null )
-			return null;
+			return {};
 
 		/* (1) Get @current room: if id is null
 		---------------------------------------------------------*/
@@ -142,7 +142,7 @@ export class RoomController{
 
 		/* (2) Return default: if ID not found */
 		this[type].current = null;
-		return null;
+		return {};
 
 	}
 

webpack/scss/container.scss

@@ -187,10 +187,10 @@
 
 		section.message-input{
 
-			display: block;
+			display: flex;
 			position: relative;
 				min-height: calc( #{$input-height} - 2*1em );
-				// height: 6em;
+				height: auto;
 
 			margin: 1em 1.2em;
 
@@ -198,17 +198,26 @@
 
 			background-color: #484b52;
 
+			flex-direction:  row;
+			justify-content: stretch;
+			align-items:     center;
+			flex-wrap:       nowrap;
+
+			overflow: hidden;
+
 			& > textarea{
 
 				display: block;
 				position: relative;
-					left: 1.5em;
+					min-height: calc( 1em + 1.5em );
-					width: calc( 100% - 2*1.5em - 2*1.5em - 1em );
+					height:     calc( 1em + 1.5em );
-					height: calc( 100% - 2*.4em - 2*1em );
+					max-height: calc( 5em + .4em );
 
-				margin: 1em 1.5em;
+				flex: 1 1 0;
-				padding: .4em 0;
+
-				padding-left: 1em;
+				margin: 1.5em 3em;
+
+				padding: .4em 1em;
 
 				color: #ddd;
 				font-family: inherit;
@@ -216,8 +225,6 @@
 				border: none;
 				border-left: 1px solid #666;
 
-				box-sizing: content-box;
-
 				// reset
 				-moz-appearance:    none;
 				-webkit-appearance: none;

webpack/vue/channel.vue

@@ -22,7 +22,7 @@
 			</section>
 
 			<section class='message-input'>
-				<textarea :placeholder='`Message #${gs.room.get("text").name}`'></textarea>
+				<textarea :placeholder='`Message #${gs.room.get("text").name}`' @keydown='gs.content.auto_grow'></textarea>
 			</section>
 
 		</div>