---
layout      : 'default'
css         : 'chatroom'

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 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>Callback settings specify a function to occur after a specific behavior.</p>

  <table class="ui celled 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 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 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>
</body>

</html>