Skip to content

Instantly share code, notes, and snippets.

@mygzi

mygzi/app.css

Last active October 7, 2015 22:01
Show Gist options
  • Save mygzi/8fcdd543f2177fb31b69 to your computer and use it in GitHub Desktop.
Save mygzi/8fcdd543f2177fb31b69 to your computer and use it in GitHub Desktop.
Download ZIP
Performant Angular Chat
Raw
app.css
[ng-cloak]
{
display: none !important;
}
.flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.page {
height: 100vh;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.page-scroller {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
min-height: 0px;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; /* IE hide internal scroll bar */
}
.page-flex-end {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
}
Raw
app.js
var chatApp = angular.module('chatApp', [
'fng',
'chatApp.services',
'chatApp.controllers'
]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['chatApp']);
});
Raw
controllers.js
angular.module('chatApp.services', []).
factory('ChatStorageService', function() {
var Service = {chats:[{mine:true, message:'hello'}, {mine:false, message:'world'}]};
return Service;
})
angular.module('chatApp.controllers', []).
controller('ChatCtrl', function ChatCtrl($scope, ChatStorageService) {
$scope.chats = ChatStorageService.chats;
}).
controller('FormCtrl', function FormCtrl($scope, ChatStorageService) {
var autosizing = false;
var chatarea = document.querySelector('#chatarea');
chatarea.value = '';
var autosizeInit = function() {
autosize(chatarea);
autosizing = true;
};
$scope.keyup = function(event) {
if (!autosizing)
autosizeInit();
if (!event.shiftKey && event.keyCode === 13) {
$scope.submitChatMessage(event);
console.log('submit');
}
else {
//$scope.typing();
// do our own dirty checking to avoid double digest on each keystroke
if ($scope.hasChat !== chatarea.value.trim().length > 0)
$scope.hasChat = chatarea.value.trim().length > 0;
}
};
var submitChatInner = function(submitText) {
if (submitText.length) {
ChatStorageService.chats.push({mine:true, message:submitText});
}
};
$scope.submitChatMessage = function(event) {
if (chatarea.value) {
var submitText = chatarea.value.trim();
submitChatInner(submitText);
chatarea.value = '';
autosize.update(chatarea);
$scope.hasChat = false;
}
};
});
Raw
index.html
<!DOCTYPE html>
<head profile="http://www.w3.org/2005/10/profile">
<html lang="en" class="no-js">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="app.css">
<script type="text/javascript">
[
"//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.18/angular.min.js",
"//rawgit.com/jackmoore/autosize/master/dist/autosize.js",
"//rawgit.com/AdamCraven/angular-fng/master/angular-fng.js",
"app.js",
"controllers.js"
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
</script>
</head>
<body>
<div class="flex page">
<div ng-controller="ChatCtrl" class="container page-scroller page-flex-end" not-ng-cloak>
<div class="row" style="min-height:0">
<div class="col-md-10" ng-repeat="chat in chats">
<span ng-class="::chat.mine ? 'pull-right' : 'pull-left'">
<span class="btn chat-text chat-selectable" ng-class="chat.mine && !chat.pending ? 'btn-info' : 'btn-default'">
{{chat.message}}
</span>
</span>
</div>
</div>
</div>
<nav class="navbar navbar-default" not-ng-cloak>
<div class="container-fluid" ng-controller="FormCtrl">
<form class="row" role="form" ng-submit="submitChatMessage($event)">
<div class="input-group">
<textarea class="form-control"
style="resize:none;border-radius:4px;margin-top:2px;max-height:35vh" id="chatarea"
ng-style="{'min-height':isIE?'56px':'0px'}"
minlength="1" maxlength="1024" placeholder="Enter chat text"
fng-focus="focus()" fng-blur="blur()" fng-keyup="keyup($event)">
</textarea>
<span class="input-group-btn">
<button class="navbar-btn btn btn-link" ng-show="active && hasChat" ng-click="submitChatMessage()">
<i class="fa fa-paper-plane-o fa-fw" ng-class="::isMobileOS?'fa-lg':'fa-2x'" style="color: #5bc0de"></i>
</button>
</span>
</div>
</form>
</div>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment