<div id="chat-container" class="container bg-info pt-3 text-white mt-5 rounded shadow">
<div class="row px-4">
<div class="col-8 p-0">
<h2><i class="fas fa-comment-dots"></i> Bootstrap Chat</h2>
</div>
<div class="col text-right pr-0">
<i class="close-button far fa-times-circle"></i>
</div>
<hr class="col-12 mb-0">
</div>
<!-- CHAT WRAPPER -->
<div id="chat-wrapper" class="row px-4 pb-4 d-flex flex-column-reverse flex-nowrap">
<input disabled class="col-8 message offset-4 mt-3 rounded rounded-pill rounded-lg border shadow bg-info text-white p-3 pl-4" value="Type map:japan and press enter">
<input disabled class="chat-left message col-8 mt-3 rounded rounded-pill rounded-lg border-0 shadow bg-white text-dark p-3 pl-4" value="Hello, what's up?">
</div>
<!-- INPUT & CREDS -->
<div class="row px-4 pt-4 rounded-bottom">
<input id="interface" type="text" class="col rounded rounded-pill bg-light p-3 text-left border-0" placeholder=" Write your message...">
<small class="col-12 py-3 text-right text-white-50">Made with <i class="fas fa-heart" style="color:tomato;"></i> by <a href="https://twitter.com/kostas_mns" target="_blank" class="text-white font-weight-bold">KostasX</a></small>
<!-- Chat Bubble Template -->
<input style="display:none;" class="chat-right message col-8 offset-4 mt-3 rounded rounded-pill rounded-lg border shadow bg-info text-white p-3 pl-4" value="Hello, what's up?">
</div>
</div>
body {
background: lightgray;
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 540px;
}
#chat-wrapper {
min-height: 400px;
max-height: 400px;
overflow: auto;
}
input {
outline: none;
}
.close-button {
opacity: 0.4;
transition: opacity 600ms ease;
cursor: pointer;
}
.close-button:hover {
opacity: 1;
}
#chat-container {
position: fixed;
bottom: 40px;
right: 40px;
display: none;
}
.ol-viewport {
border-radius: 40px;
}
/* SCROLLBAR::width */
::-webkit-scrollbar {
width: 10px;
}
/* SCROLLBAR::Track */
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.25);
}
/* SCROLLBAR::Handle */
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.5);
}
/* SCROLLBAR::Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.65);
}
.funky {
border: 2px solid orange !important;
}
function handleKeyDown( event ){
if ( event.keyCode === 13 ){
// Handle MAP command
if ( this.value.trim().indexOf("map:") === 0 ){
let country = this.value.split( "map:")[1].trim();
$.ajax({
url: "https://restcountries.com/v3.1/name/" + country,
success: function( data ){
console.log( data );
$(".chat-left")
.clone( true )
.removeClass( "chat-left" )
.val("Map of " + country + " coming up!")
.attr("disabled",true)
.prependTo("#chat-wrapper")
.show('slow');
$("<div id='map' class='col-12 my-4'></div>")
.prependTo( $("#chat-wrapper") );
openMap({ lon: data[0].latlng[1], lat: data[0].latlng[0] });
}
});
} else {
$(".chat-right")
.clone( true )
.removeClass( "chat-right" )
.val( this.value )
.attr("disabled",true)
.prependTo("#chat-wrapper")
.show('fast');
}
$("#interface").val(" ");
}
}
// Show our Chat Interface:
$("#chat-container").slideToggle("slow");
// Listen on the user's input:
$("#interface").on("keydown", handleKeyDown );
// Close the Chat Interface:
$(".close-button").click(function(){
$("#chat-container").fadeOut();
});
// MAP
function openMap( options ){
if ( options.zoom === undefined ){
options.zoom = 4;
}
if ( options.target === undefined ){
options.target = "map";
}
let map = new ol.Map({
target: options.target,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([ options.lon, options.lat ]),
zoom: options.zoom
})
});
}
