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

This commit is contained in:
xdrm-brackets 2018-03-23 08:41:17 +01:00
parent 328473a390
commit 46b2143589
4 changed files with 36 additions and 14 deletions

View File

@ -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);
}
} }

View File

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

View File

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

View File

@ -22,7 +22,7 @@
</section> </section>
<section class='message-input'> <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> </section>
</div> </div>