Package Exports
- angular-ui-chat
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-ui-chat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Angular-UI-Chat
=========
A small library for making a custom chatroom. This addon is purely front-end so how you send data to it is up to you.
Dependencies
Angular 1.x
Installation
npm install angular-ui-chat --save
Feature Roadmap
- Basic functionality (plain text)
- User Message Callback
- Curse Word Filters
- Emoticons
- Gravatars
- Mobile Friendly
- User Settings
- Admin abilities
- Collapsable user name list
- Private Messages
- Custom User Levels
- Themes
- HTML - bold
- HTML - underline
- HTML - links
- HTML - size increase
- HTML - images
Usage
- run npm install angular-ui-chat in the cli
- include the js and the less or css file in your project. Alternately copy the less/css file into your folders and create your own stylings
- Add 'ui-chat' to your angular dependencies
- Add to your html
<ui-chat chatoptions="uiChatOptions" chatmessage="messageCallbackFunction" chattyping="isTypingCallbackFunction"></ui-chat>
- In your controller create an optionsObject and a message callback function (DO NOT include parenthesis () in the html!)
$scope.uiChatOptions = {
//'left' or 'right'; defaults to right
usersListSide: 'right',
//if set to twa, the chat will filter for twemoji awesome
emoji: 'twa',
curseFilter: true,
users: [arrayOfUsersInChat],
user: {userObject}
defaultUserImage: 'default for no user image'
messages: [messagesFromUsersInChat]
};
$scope.messageCallbackFunction = function(message){
//process message here whenever message received
};
$scope.isTypingCallbackFunction = function(lengthOfCharacters){
//process is activity here for user is typing...
};
- Each array is an array of objects, the following should be contained in each. User is an object of the user that is the owner of the chat instance.
var arrayOfUsersInChat = [];
arrayOfUsersInChat.push({
username: 'what to display',
id: 'unique id, maybe from mongodb? this is optional, if its not included the username must be unique'
image: 'an image for the user'
admin: false // or true if they are a chat admin
});
var messagesFromUsersInChat = [];
messagesFromUsersInChat.push({
//the same userobject as listed below.
user: {userObject}
//the message sent
message: 'message sent by user'
});
var userObject = {};
userObject = {
username: 'what to display',
id: 'unique id, maybe from mongodb? this is optional, if its not included the username must be unique'
image: 'an image for the user'
admin: false // or true if they are a chat admin
};
Tests
npm test
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code. To build user grunt browserify.