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
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/definitions/modules/chatroom.css">
|
|
|
|
<script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
|
|
<script src="/build/uncompressed/definitions/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>
|