I am looking for a way to have a WhatsApp Web like content editable div which expands upwards when pressing SHIFT+ENTER and also minimizes the div above it accordingly (See purple area in the attached screenshots).
What would be the best way to implement this?
Thanks a lot.
Edit: I use vuejs along with vuetify.
I am using variables in css to clac the height of .converstion div :https://www.w3schools.com/css/css3_variables.asp
I am using Jquery but you can do it using Vue JS
See JSFiddle:https://jsfiddle.net/8feswyau/
$('textarea').on({input: function(){
var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).css({'height':totalHeight});
$('.conversation').get(0).style.setProperty("--number",totalHeight+'px')
}
}); textarea{
width:243px;
}
.warp{
height:300px;
width:250px;
}
.conversation{
height: calc(100% - var(--number));
position: relative;
background: #efe7dd url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg) repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warp">
<div class="conversation" style="--number: 12px"></div>
<textarea></textarea>
</div>
This can be done pretty easily with <v-text-field textarea auto-grow> and some basic flexbox: https://codepen.io/anon/pen/jKaVZO
I recently had to make a floating button to send messages to a certain number using the whatsapp api. I created a chat box that simulates whatsapp chat.
Basically it was made with vue and the incredible components of vuetify
Add quick whatsapp floating button with message box to connect with your users. If you click on that button, the chat box will open with prefilled message.
JS
new Vue({
el: '#app',
data: () => ({
fab: false,
fav: true,
menu: false,
message: false,
hints: true,
phone: '5521997642382',
text: "",
apilink: ""
}),
watch: {
text(val) {
this.apilink = 'http://';
this.apilink += this.isMobile() ? 'api' : 'web';
this.apilink += '.whatsapp.com/send?phone=' + this.phone + '&text=' + encodeURI(this.text);
}
},
created: function () {
this.apilink = 'http://';
this.apilink += this.isMobile() ? 'api' : 'web';
this.apilink += '.whatsapp.com/send?phone=' + this.phone + '&text=' + encodeURI("Hello!");
},
methods: {
isMobile() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
}
})
CSS
.my-input.v-input .v-input__slot {
border-radius: 100px;
}
.chat-background {
background-color: #ECE5DD !important
}
.chat-header {
background-color: #075E54 !important
}
.chip-chat {
background-color: #DCF8C6 !important
}
html
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-menu
min-width = 300
top
v-model="menu"
:close-on-click="false"
:close-on-content-click="false"
:nudge-top="60"
offset-x
>
<template v-slot:activator="{ on }">
<v-fab-transition>
<v-btn
v-model="fab"
v-on="on"
color='green darken-1'
@click="fab = !fab; menu = false"
dark
fixed
bottom
right
fab
>
<v-icon>comment</v-icon>
<v-icon>close</v-icon>
</v-btn>
</v-fab-transition>
</template>
<v-card>
<v-list dark class="chat-header">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>Contact me</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn
icon
@click="fab = !fab; menu = false"
>
<v-icon>cancel</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-container class="chat-background">
<v-layout row wrap >
<v-flex class="text-xs-right" xs12 mb-4>
<v-chip class="chip-chat ">
Hello, how can we help you? <v-icon right>done_all</v-icon>
</v-chip>
</v-flex>
<v-flex xs10>
<v-text-field
single-line
color="teal"
class="my-input"
v-model="text"
outline
></v-text-field>
</v-flex>
<v-flex xs2>
<v-btn
large
class="teal--text"
icon
@click="fab = !fab; menu = false"
:href="apilink"
target="_blank"
>
<v-icon large>send</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-menu>
</div>
</v-app>
</div>
Image example
