Forked from Mike Hartington's Pen Blank Starter - Nightly.
Forked from Mike Hartington's Pen Blank Starter - Nightly.
A Pen by Captain Anonymous on CodePen.
-
-
Save NeftaliYagua/95738d23fda059c007d1c232a1db7135 to your computer and use it in GitHub Desktop.
Ionic Chat example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Ionic Template</title> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| </head> | |
| <body ng-controller="Messages"> | |
| <ion-pane "class="messaging-view"> | |
| <ion-header-bar class="bar-stable"> | |
| <button class="button button-clear button-assertive ion-navicon"></button> | |
| <h1 class="title">Yet another Magic Clone</h1> | |
| <button class="button button-clear button-assertive ion-camera"></button> | |
| </ion-header-bar> | |
| <ion-content class="content-stable" | |
| on-swipe-left="hideTime = false" | |
| on-swipe-right="hideTime = true"> | |
| <div class ="initMsg"">5 operators online! Chat to begin </div> | |
| <div ng-repeat="message in messages" | |
| ng-class="{other: message.userId != myId}" | |
| class="messages"> | |
| <div class="message" ng-class="{'slide-right': hideTime, '': !hideTime}"> | |
| <span>{{ message.text }}</span> | |
| </div> | |
| <div class="time" ng-class="{'slide-right': hideTime, '': !hideTime}">{{message.time}}</div> | |
| </div> | |
| </ion-content> | |
| <ion-footer-bar keyboard-attach class="bar-stable item-input-inset"> | |
| <label class="item-input-wrapper"> | |
| <input type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" /> | |
| </label> | |
| <button class="button button-clear" ng-click="sendMessage()"> | |
| Send | |
| </button> | |
| </ion-footer-bar> | |
| </ion-pane> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('ionicApp', ['ionic']) | |
| // All this does is allow the message | |
| // to be sent when you tap return | |
| .directive('input', function($timeout) { | |
| return { | |
| restrict: 'E', | |
| scope: { | |
| 'returnClose': '=', | |
| 'onReturn': '&', | |
| 'onFocus': '&', | |
| 'onBlur': '&' | |
| }, | |
| link: function(scope, element, attr) { | |
| element.bind('focus', function(e) { | |
| if (scope.onFocus) { | |
| $timeout(function() { | |
| scope.onFocus(); | |
| }); | |
| } | |
| }); | |
| element.bind('blur', function(e) { | |
| if (scope.onBlur) { | |
| $timeout(function() { | |
| scope.onBlur(); | |
| }); | |
| } | |
| }); | |
| element.bind('keydown', function(e) { | |
| if (e.which == 13) { | |
| if (scope.returnClose) element[0].blur(); | |
| if (scope.onReturn) { | |
| $timeout(function() { | |
| scope.onReturn(); | |
| }); | |
| } | |
| } | |
| }); | |
| } | |
| } | |
| }) | |
| .controller('Messages', function($scope, $timeout, $ionicScrollDelegate) { | |
| $scope.hideTime = true; | |
| var alternate, | |
| isIOS = ionic.Platform.isWebView() && ionic.Platform.isIOS(); | |
| $scope.sendMessage = function() { | |
| alternate = !alternate; | |
| var d = new Date(); | |
| d = d.toLocaleTimeString().replace(/:\d+ /, ' '); | |
| $scope.messages.push({ | |
| userId: alternate ? '12345' : '54321', | |
| text: $scope.data.message, | |
| time: d | |
| }); | |
| delete $scope.data.message; | |
| $ionicScrollDelegate.scrollBottom(true); | |
| }; | |
| $scope.inputUp = function() { | |
| if (isIOS) $scope.data.keyboardHeight = 216; | |
| $timeout(function() { | |
| $ionicScrollDelegate.scrollBottom(true); | |
| }, 300); | |
| }; | |
| $scope.inputDown = function() { | |
| if (isIOS) $scope.data.keyboardHeight = 0; | |
| $ionicScrollDelegate.resize(); | |
| }; | |
| $scope.closeKeyboard = function() { | |
| // cordova.plugins.Keyboard.close(); | |
| }; | |
| $scope.data = {}; | |
| $scope.myId = '12345'; | |
| $scope.messages = []; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $stable: #f8f8f8 !default; | |
| .scroll { | |
| padding: 10px 0 50px !important; | |
| } | |
| .messages { | |
| display: -webkit-box !important; | |
| display: -moz-box !important; | |
| display: -ms-flexbox !important; | |
| display: -webkit-flex !important; | |
| display: flex !important; | |
| -webkit-align-content: center !important; | |
| -ms-flex-line-pack: center !important; | |
| align-content: center !important; | |
| -webkit-box-align: center !important; | |
| -moz-box-align: center !important; | |
| -webkit-align-items: center !important; | |
| -ms-flex-align: center !important; | |
| align-items: center !important; | |
| margin-bottom: 20px !important; | |
| .message { | |
| -webkit-box-flex: 1 !important; | |
| -moz-box-flex: 1 !important; | |
| -webkit-flex: 1 1 auto !important; | |
| -ms-flex: 1 1 auto !important; | |
| flex: 1 1 auto !important; | |
| padding: 10px !important; | |
| -webkit-transition: all 250ms ease-in-out !important; | |
| transition: all 250ms ease-in-out !important; | |
| overflow: hidden !important; | |
| text-align: left !important; | |
| -webkit-transform: translate3d(0, 0, 0) !important; | |
| -moz-transform: translate3d(0, 0, 0) !important; | |
| transform: translate3d(0, 0, 0) !important; | |
| } | |
| } | |
| .time { | |
| -webkit-box-flex: 0 !important; | |
| -moz-box-flex: 0 !important; | |
| -webkit-flex: 0 1 auto !important; | |
| -ms-flex: 0 1 auto !important; | |
| flex: 0 1 auto !important; | |
| -webkit-align-self: auto !important; | |
| -ms-flex-item-align: auto !important; | |
| align-self: auto !important; | |
| width: 120px !important; | |
| text-align: center !important; | |
| padding: 0 0 0 0 !important; | |
| -webkit-transition: all 250ms ease-in-out !important; | |
| transition: all 250ms ease-in-out !important; | |
| -webkit-transform: translate3d(10px, 0, 0) !important; | |
| -moz-transform: translate3d(10px, 0, 0) !important; | |
| transform: translate3d(10px, 0, 0) !important; | |
| &.slide-right { | |
| -webkit-transform: translate3d(130px, 0, 0) !important; | |
| -moz-transform: translate3d(130px, 0, 0) !important; | |
| transform: translate3d(130px, 0, 0) !important; | |
| } | |
| } | |
| //This will change | |
| .messages.other { | |
| .message { | |
| -webkit-transform: translate3d(0, 0, 0) !important; | |
| -moz-transform: translate3d(0, 0, 0) !important; | |
| transform: translate3d(0, 0, 0) !important; | |
| text-align: right !important; | |
| } | |
| .message.slide-right { | |
| -webkit-transform: translate3d(120px, 0, 0) !important; | |
| -moz-transform: translate3d(120px, 0, 0) !important; | |
| transform: translate3d(120px, 0, 0) !important; | |
| } | |
| span { | |
| color: black !important; | |
| background-color: #C7C7CC !important; | |
| } | |
| } | |
| .initMsg{ | |
| text-align:center; | |
| font-size:16px; | |
| } | |
| span { | |
| background: #007AFF !important; | |
| display: inline-block !important; | |
| color: white !important; | |
| padding: 10px !important; | |
| border-radius: 10px !important; | |
| text-align: left !important; | |
| max-width: 240px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment