A couple of weeks ago I came across this awesome angular-elastic directive. I decided to integrate it into an app I am currently creating (coming out soon!). It works great with Ionic and adds that native feel to messaging similar to iMessage/Tinder. I’ve read that iMessage uses HTML/JS but I’m not sure on this though.
I want to share my experience with using it as there a couple of hacks needed to get it to play nice. I’m going to try and summarize what is needed to get it to work with Ionic below.
CSS
/* allows the bar-footer to be elastic /*
/* optionally set a max-height */
/* maxlength on the textarea will prevent /*
/* it from getting too large also */
.bar-footer {
overflow: visible !important;
}
.bar-footer textarea {
resize: none;
height: 25px;
}
JavaScript
// I emit this event from the monospaced.elastic directive, read line 480 in the Codepen JS
$scope.$on('taResize', function(e, ta) {
console.log('taResize');
if (!ta) return;
var taHeight = ta[0].offsetHeight;
console.log('taHeight: ' + taHeight);
if (!footerBar) return;
var newFooterHeight = taHeight + 10;
newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;
footerBar.style.height = newFooterHeight + 'px';
// for iOS you will need to add the keyboardHeight to the scroller.style.bottom
if (device.platform.toLowerCase() === 'ios') {
scroller.style.bottom = newFooterHeight + keyboardHeight + 'px';
} else {
scroller.style.bottom = newFooterHeight + 'px';
}
});
You will notice that I grab the footer bar element in the $ionicView.enter
event.
This codepen has a lot of of extra jazz in it also. I have integrated angular moment
for displaying the relative time for messages. There is also autolinker.js
integrated and I’m sharing a custom directive I made for it to work with Ionic/Cordova (URL links work in the message text and you can see how to open them with the in-app browser plugin in the autolinker directive
I made). You can hold a message to show an $ionicActionSheet
to delete the message or copy the text. CordovaClipboard is a nifty plugin that can copy text to a device’s clipboard.
This is using the Ionic beta 14.
I <3 Ionic.
Happy hacking