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.

284 lines
7.4 KiB

  1. ---
  2. layout : 'default'
  3. css : 'chatroom'
  4. ignored : true
  5. title : 'Chatroom'
  6. description : 'A chatroom allows users to communicate with each other in real time.'
  7. type : 'UI Module'
  8. ---
  9. <link rel="stylesheet" type="text/css" href="/build/uncompressed/modules/chatroom.css">
  10. <script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
  11. <script src="/build/uncompressed/modules/chatroom.js"></script>
  12. <%- @partial('header') %>
  13. <div class="main container">
  14. <div class="peek">
  15. <div class="ui vertical pointing secondary menu">
  16. <a class="active item">Usage</a>
  17. <a class="item">Types</a>
  18. <a class="item">Examples</a>
  19. <a class="item">Settings</a>
  20. </div>
  21. </div>
  22. <h2 class="ui dividing header">Usage</h2>
  23. <h3 class="ui header">Initializing a chat room</h3>
  24. <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>
  25. <div class="code" data-type="javascript" data-demo="true">
  26. // modify these for your api settings received from pusher
  27. $('.ui.chatroom')
  28. .chatroom({
  29. key : 'f812089c851866cc2f3e',
  30. endpoint: {
  31. authentication : '/chat/authentication',
  32. message : '/chat/send'
  33. }
  34. })
  35. ;
  36. </div>
  37. <div class="ui chatroom">
  38. <div class="actions">
  39. <div class="message">
  40. <span class="ui mini inline loader"></span>
  41. Joining chat
  42. </div>
  43. <div class="ui secondary mini right floated icon buttons">
  44. <div class="ui button">
  45. <i class="users icon"></i>
  46. </div>
  47. <div class="ui button">
  48. <i class="full resize icon"></i>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="room">
  53. <div class="container">
  54. <div class="user-list">
  55. <div class="ui small text loader">Loading</div>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="talk">
  60. <div class="avatar">
  61. <img src="/images/demo/avatar.jpg">
  62. </div>
  63. <input type="text" maxlength="200">
  64. <div class="ui send button">
  65. <i class="ui icon comment"></i>
  66. Send
  67. </div>
  68. </div>
  69. </div>
  70. <h2 class="ui dividing header">Settings</h2>
  71. <div class="no example">
  72. <h4 class="ui header">Chatroom Settings</h4>
  73. <p>Chatroom settings modify the chatroom's behavior</p>
  74. <table class="ui celled sortable definition table segment">
  75. <thead>
  76. <th>Setting</th>
  77. <th class="four wide">Default</th>
  78. <th>Description</th>
  79. </thead>
  80. <tbody>
  81. <tr>
  82. <td>key</td>
  83. <td>false</td>
  84. <td>Pusher API key</td>
  85. </tr>
  86. <tr>
  87. <td>key</td>
  88. <td>presence-chat</td>
  89. <td>Channel to use. Pusher requires chatrooms to use channels beginning with presence-</td>
  90. </tr>
  91. <tr>
  92. <td>scrollArea</td>
  93. <td>9999</td>
  94. <td>If a user is this many pixels away from bottom of the page it will automatically scroll when a message is receieved</td>
  95. </tr>
  96. <tr>
  97. <td>customEvents</td>
  98. <td>{}</td>
  99. <td>An object containing custom events and functions to use with pusher</td>
  100. </tr>
  101. <tr>
  102. <td>endpoint</td>
  103. <td>
  104. <div class="code">
  105. {
  106. message: false,
  107. authentication: false
  108. }
  109. </div>
  110. </td>
  111. <td>Endpoints used to communicate authentication and chat messages</td>
  112. </tr>
  113. <tr>
  114. <td>partingMessages</td>
  115. <td>false</td>
  116. <td>Whether to display messages when a user has joined chat</td>
  117. </tr>
  118. <tr>
  119. <td>userCount</td>
  120. <td>true</td>
  121. <td>Whether to display the current logged in user count</td>
  122. </tr>
  123. </tbody>
  124. </table>
  125. <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
  126. <h4 class="ui header">Callbacks</h4>
  127. <p>Callbacks specify a function to occur after a specific behavior.</p>
  128. <table class="ui celled sortable definition table segment">
  129. <thead>
  130. <th class="four wide">Setting</th>
  131. <th>Context</th>
  132. <th>Description</th>
  133. </thead>
  134. <tbody>
  135. <tr>
  136. <td>onJoin(user)</td>
  137. <td>Chatroom</td>
  138. <td>Called after each user joins a chat room</td>
  139. </tr>
  140. </tbody>
  141. </table>
  142. </div>
  143. <div class="no example">
  144. <h4 class="ui header">DOM Settings</h4>
  145. <p>DOM settings specify how this module should interface with the DOM</p>
  146. <table class="ui celled sortable definition table segment">
  147. <thead>
  148. <th>Setting</th>
  149. <th class="four wide">Default</th>
  150. <th>Description</th>
  151. </thead>
  152. <tbody>
  153. <tr>
  154. <td>namespace</td>
  155. <td>chatroom</td>
  156. <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
  157. </tr>
  158. <tr>
  159. <td>selector</td>
  160. <td colspan="2">
  161. <div class="code">
  162. selector : {
  163. icon : '.icon'
  164. }
  165. </div>
  166. </td>
  167. </tr>
  168. <tr>
  169. <td>className</td>
  170. <td colspan="2">
  171. <div class="code">
  172. className : {
  173. active : 'active',
  174. hover : 'hover',
  175. loading : 'loading'
  176. },
  177. </div>
  178. </td>
  179. </tr>
  180. </tbody>
  181. </table>
  182. </div>
  183. <div class="no example">
  184. <h4 class="ui header">Debug Settings</h4>
  185. <p>Debug settings controls debug output to the console</p>
  186. <table class="ui celled sortable definition table segment">
  187. <thead>
  188. <th>Setting</th>
  189. <th class="four wide">Default</th>
  190. <th>Description</th>
  191. </thead>
  192. <tbody>
  193. <tr>
  194. <td>name</td>
  195. <td>Chatroom</td>
  196. <td>Name used in debug logs</td>
  197. </tr>
  198. <tr>
  199. <td>debug</td>
  200. <td>True</td>
  201. <td>Provides standard debug output to console</td>
  202. </tr>
  203. <tr>
  204. <td>performance</td>
  205. <td>True</td>
  206. <td>Provides performance output to console</td>
  207. </tr>
  208. <tr>
  209. <td>verbose</td>
  210. <td>True</td>
  211. <td>Provides ancillary debug output to console</td>
  212. </tr>
  213. <tr>
  214. <td>selector</td>
  215. <td colspan="2">
  216. <div class="code">
  217. selector : {
  218. userCount : '.actions .message',
  219. userListButton : '.actions .list.button',
  220. expandButton : '.actions .expand.button',
  221. room : '.room',
  222. userList : '.room .list',
  223. log : '.room .log',
  224. message : '.room .log .message',
  225. author : '.room log .message .author',
  226. messageInput : '.talk input',
  227. messageButton : '.talk .send.button'
  228. }
  229. </div>
  230. </td>
  231. </tr>
  232. <tr>
  233. <td>className</td>
  234. <td colspan="2">
  235. <div class="code">
  236. className : {
  237. expand : 'expand',
  238. active : 'active',
  239. hover : 'hover',
  240. down : 'down',
  241. loading : 'loading'
  242. }
  243. </div>
  244. </td>
  245. </tr>
  246. <tr>
  247. <td>error</td>
  248. <td colspan="2">
  249. <div class="code">
  250. error: {
  251. method : 'The method you called is not defined',
  252. endpoint : 'Please define a message and authentication endpoint.',
  253. key : 'You must specify a pusher key and channel.',
  254. pusher : 'You must include the Pusher library.'
  255. }
  256. </div>
  257. </td>
  258. </tr>
  259. </tbody>
  260. </table>
  261. </div>
  262. </div>