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
- Mobile Friendly
- User Images
- Collapsable user name list
- Private Messages
- Admin abilities
- Parse on key up Emoticons/PM/Mention
- HTML - bold
- HTML - underline
- HTML - italics
- HTML - links
- HTML - size increase
- HTML - images
- User Settings
- Custom User Levels
- Themes
Usage
- run npm install angular-ui-chat
- include the .min.js and the .min.css file from the dist/ folder in your project.
- Add 'ui-chat' to your angular dependencies
- Add to your html
- In your controller create an optionsObject and a message callback function (DO NOT include parenthesis () in the html!)
$scopeuiChatOptions = //'left' or 'right'; defaults to right usersListSide: 'right' //if set to twa, the cha t will filter for twemoji awesome emoji: 'twa' curseFilter: true //start this will parse items in the input box on key up mentionParse: true emojiParse: true pmParse: true //object to enable html input / false to disable html: italicize: true bold: true underline: true //end input box filters defaultCurseReplacer: '$|^&!' users: arrayOfUsersInChat user: userObject userFeedback: message: 'soandso is typing a message' messages: messagesFromUsersInChat ; $scope{ //process message here whenever message received //you can also alter the message here and return the change return messageObject; }; $scope{ //process is activity here for user is typing... }; $scope{ //process message here whenever a private message is sent from the client user //you can also alter the message here and return the change return messageObject; }; $scope{ //call for when an admin wants to delete a message };
- 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. For security reasons it is not recommended to include user email addresses in calls related to chat functionality, this would leave anyone in the live chat open to having their emails scraped by a bot.
var arrayOfUsersInChat = userObject userObject; arrayOfUsersInChat;
var messagesFromUsersInChat = ; messagesFromUsersInChat;
var userObject = {}; userObject = username: 'what to display' id: 'unique id(optional)' image: 'an image for the user' //if you want to use gravatar you should generate the links server side and pass it into this image field admin: false // or true if they are a chat admin, //use left or right to display which side the users image should be on side: 'left' ;
Tests
npm test
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code. To build use grunt dist. To develop use grunt dev. Use a different branch and send a pull request to contribute.
About
This project is sponsered by ITProTV