You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

285 lines
7.4 KiB

---
layout : 'default'
css : 'chatroom'
ignored : true
title : 'Chatroom'
description : 'A chatroom allows users to communicate with each other in real time.'
type : 'UI Module'
---
<link rel="stylesheet" type="text/css" href="/build/uncompressed/modules/chatroom.css">
<script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
<script src="/build/uncompressed/modules/chatroom.js"></script>
<%- @partial('header') %>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Usage</a>
<a class="item">Types</a>
<a class="item">Examples</a>
<a class="item">Settings</a>
</div>
</div>
<h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Initializing a chat room</h3>
<p>Using chatroom requires an account with <a href="http://www.pusher.com" target="_blank">pusher</a>, a company that provides turn-key web socket access.</p>
<div class="code" data-type="javascript" data-demo="true">
// modify these for your api settings received from pusher
$('.ui.chatroom')
.chatroom({
key : 'f812089c851866cc2f3e',
endpoint: {
authentication : '/chat/authentication',
message : '/chat/send'
}
})
;
</div>
<div class="ui chatroom">
<div class="actions">
<div class="message">
<span class="ui mini inline loader"></span>
Joining chat
</div>
<div class="ui secondary mini right floated icon buttons">
<div class="ui button">
<i class="users icon"></i>
</div>
<div class="ui button">
<i class="full resize icon"></i>
</div>
</div>
</div>
<div class="room">
<div class="container">
<div class="user-list">
<div class="ui small text loader">Loading</div>
</div>
</div>
</div>
<div class="talk">
<div class="avatar">
<img src="/images/demo/avatar.jpg">
</div>
<input type="text" maxlength="200">
<div class="ui send button">
<i class="ui icon comment"></i>
Send
</div>
</div>
</div>
<h2 class="ui dividing header">Settings</h2>
<div class="no example">
<h4 class="ui header">Chatroom Settings</h4>
<p>Chatroom settings modify the chatroom's behavior</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>key</td>
<td>false</td>
<td>Pusher API key</td>
</tr>
<tr>
<td>key</td>
<td>presence-chat</td>
<td>Channel to use. Pusher requires chatrooms to use channels beginning with presence-</td>
</tr>
<tr>
<td>scrollArea</td>
<td>9999</td>
<td>If a user is this many pixels away from bottom of the page it will automatically scroll when a message is receieved</td>
</tr>
<tr>
<td>customEvents</td>
<td>{}</td>
<td>An object containing custom events and functions to use with pusher</td>
</tr>
<tr>
<td>endpoint</td>
<td>
<div class="code">
{
message: false,
authentication: false
}
</div>
</td>
<td>Endpoints used to communicate authentication and chat messages</td>
</tr>
<tr>
<td>partingMessages</td>
<td>false</td>
<td>Whether to display messages when a user has joined chat</td>
</tr>
<tr>
<td>userCount</td>
<td>true</td>
<td>Whether to display the current logged in user count</td>
</tr>
</tbody>
</table>
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
<h4 class="ui header">Callbacks</h4>
<p>Callbacks specify a function to occur after a specific behavior.</p>
<table class="ui celled sortable definition table segment">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onJoin(user)</td>
<td>Chatroom</td>
<td>Called after each user joins a chat room</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">DOM Settings</h4>
<p>DOM settings specify how this module should interface with the DOM</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>chatroom</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
selector : {
icon : '.icon'
}
</div>
</td>
</tr>
<tr>
<td>className</td>
<td colspan="2">
<div class="code">
className : {
active : 'active',
hover : 'hover',
loading : 'loading'
},
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Debug Settings</h4>
<p>Debug settings controls debug output to the console</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Chatroom</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides performance output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
selector : {
userCount : '.actions .message',
userListButton : '.actions .list.button',
expandButton : '.actions .expand.button',
room : '.room',
userList : '.room .list',
log : '.room .log',
message : '.room .log .message',
author : '.room log .message .author',
messageInput : '.talk input',
messageButton : '.talk .send.button'
}
</div>
</td>
</tr>
<tr>
<td>className</td>
<td colspan="2">
<div class="code">
className : {
expand : 'expand',
active : 'active',
hover : 'hover',
down : 'down',
loading : 'loading'
}
</div>
</td>
</tr>
<tr>
<td>error</td>
<td colspan="2">
<div class="code">
error: {
method : 'The method you called is not defined',
endpoint : 'Please define a message and authentication endpoint.',
key : 'You must specify a pusher key and channel.',
pusher : 'You must include the Pusher library.'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>