development.rst 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. .. _development:
  2. ===========
  3. Development
  4. ===========
  5. .. contents:: Table of Contents
  6. :depth: 2
  7. :local:
  8. If you want to work with the non-minified Javascript and CSS files you'll soon
  9. notice that there are references to a missing *components* folder. Please
  10. follow the instructions below to create this folder and fetch Converse's
  11. 3rd-party dependencies.
  12. .. note::
  13. Windows environment: We recommend installing the required tools using `Chocolatey <https://chocolatey.org/>`_
  14. You will need Node.js (nodejs.install), Git (git.install) and optionally to build using Makefile, GNU Make (make)
  15. If you have trouble setting up a development environment on Windows,
  16. please read `this post <http://librelist.com/browser//conversejs/2014/11/5/openfire-converse-and-visual-studio-questions/#b28387e7f8f126693b11598a8acbe810>`_
  17. in the mailing list.:
  18. Install the development and front-end dependencies
  19. ==================================================
  20. We use development tools (`Grunt <http://gruntjs.com>`_ and `Bower <http://bower.io>`_)
  21. which depend on Node.js and npm (the Node package manager).
  22. If you don't have Node.js installed, you can download and install the latest
  23. version `here <https://nodejs.org/download>`_.
  24. Also make sure you have ``Git`` installed. `Details <http://git-scm.com/book/en/Getting-Started-Installing-Git>`_.
  25. .. note::
  26. Windows users should use Chocolatey as recommended above.:
  27. Once you have *Node.js* and *git* installed, run the following command inside the Converse.js
  28. directory:
  29. ::
  30. make dev
  31. On Windows you need to specify Makefile.win to be used by running: ::
  32. make -f Makefile.win dev
  33. Or alternatively, if you don't have GNU Make:
  34. ::
  35. npm install
  36. bower update
  37. This will first install the Node.js development tools (like Grunt and Bower)
  38. and then use Bower to install all of Converse.js's front-end dependencies.
  39. The front-end dependencies are those javascript files on which
  40. Converse.js directly depends and which will be loaded in the browser.
  41. If you are curious to know what the different dependencies are:
  42. * Development dependencies:
  43. Take a look at whats under the *devDependencies* key in
  44. `package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`_.
  45. * Front-end dependencies:
  46. See *dependencies* in
  47. `bower.json <https://github.com/jcbrand/converse.js/blob/master/bower.json>`_.
  48. .. note::
  49. After running ```make dev```, you should now have a new directory *components*,
  50. which contains all the front-end dependencies of Converse.js.
  51. If this directory does NOT exist, something must have gone wrong.
  52. Double-check the output of ```make dev``` to see if there are any errors
  53. listed. For support, you can write to the mailing list: conversejs@librelist.com
  54. With AMD and require.js (recommended)
  55. =====================================
  56. Converse.js uses `require.js <http://requirejs.org>`_ to asynchronously load dependencies.
  57. If you want to develop or customize converse.js, you'll want to load the
  58. non-minified javascript files.
  59. Add the following two lines to the *<head>* section of your webpage:
  60. .. code-block:: html
  61. <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
  62. <script data-main="main" src="components/requirejs/require.js"></script>
  63. require.js will then let the main.js file be parsed (because of the *data-main*
  64. attribute on the *script* tag), which will in turn cause converse.js to be
  65. parsed.
  66. Without AMD and require.js
  67. ==========================
  68. Converse.js can also be used without require.js. If you for some reason prefer
  69. to use it this way, please refer to
  70. `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
  71. for an example of how and in what order all the Javascript files that converse.js
  72. depends on need to be loaded.
  73. Before submitting a pull request
  74. ================================
  75. Add tests for your bugfix or feature
  76. ------------------------------------
  77. Add a test for any bug fixed or feature added. We use Jasmine
  78. for testing.
  79. Take a look at ``tests.html`` and ``spec/MainSpec.js`` to see how
  80. the tests are implemented.
  81. If you are unsure how to write tests, please
  82. `contact me <http://opkode.com/contact>`_ and I'll be happy to help.
  83. Check that the tests pass
  84. -------------------------
  85. Check that the Jasmine tests complete sucessfully. Open
  86. `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  87. in your browser, and the tests will run automatically.
  88. On the command line you can run:
  89. ::
  90. grunt test
  91. Check your code for errors or bad habits by running JSHint
  92. ----------------------------------------------------------
  93. `JSHint <http://jshint.com>`_ will do a static analysis of your code and hightlight potential errors
  94. and/or bad habits.
  95. ::
  96. grunt jshint
  97. You can run both the tests and jshint in one go by calling:
  98. ::
  99. grunt check
  100. Developer API
  101. =============
  102. .. note:: The API documented here is available in Converse.js 0.8.4 and higher.
  103. Earlier versions of Converse.js might have different API methods or none at all.
  104. In the Converse.js API, you traverse towards a logical grouping, from
  105. which you can then call certain standardised accessors and mutators, like::
  106. .get
  107. .set
  108. .add
  109. .remove
  110. This is done to increase readability and to allow intuitive method chaining.
  111. For example, to get a contact, you would do the following::
  112. converse.contacts.get('jid@example.com');
  113. To get multiple contacts, just pass in an array of jids::
  114. converse.contacts.get(['jid1@example.com', 'jid2@example.com']);
  115. To get all contacts, simply call ``get`` without any jids::
  116. converse.contacts.get();
  117. **Here follows now a breakdown of all API groupings and methods**:
  118. initialize
  119. ----------
  120. .. note:: This method is the one exception of a method which is not logically grouped
  121. as explained above.
  122. Initializes converse.js. This method must always be called when using
  123. converse.js.
  124. The `initialize` method takes a map (also called a hash or dictionary) of
  125. :ref:`configuration-variables`.
  126. Example:
  127. .. code-block:: javascript
  128. converse.initialize({
  129. allow_otr: true,
  130. auto_list_rooms: false,
  131. auto_subscribe: false,
  132. bosh_service_url: 'https://bind.example.com',
  133. hide_muc_server: false,
  134. i18n: locales['en'],
  135. keepalive: true,
  136. play_sounds: true,
  137. prebind: false,
  138. show_controlbox_by_default: true,
  139. debug: false,
  140. roster_groups: true
  141. });
  142. "contacts" grouping
  143. -------------------
  144. get
  145. ~~~
  146. This method is used to retrieve roster contacts.
  147. To get a single roster contact, call the method with the contact's JID (Jabber ID):
  148. converse.contacts.get('buddy@example.com')
  149. To get multiple contacts, pass in an array of JIDs::
  150. converse.contacts.get(['buddy1@example.com', 'buddy2@example.com'])
  151. To return all contacts, simply call ``get`` without any parameters::
  152. converse.contacts.get()
  153. The returned roster contact objects have these attributes:
  154. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  155. | Attribute | |
  156. +================+======================================================================================================================================+
  157. | ask | If ask === 'subscribe', then we have asked this person to be our chat buddy. |
  158. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  159. | fullname | The person's full name. |
  160. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  161. | jid | The person's Jabber/XMPP username. |
  162. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  163. | requesting | If true, then this person is asking to be our chat buddy. |
  164. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  165. | subscription | The subscription state between the current user and this chat buddy. Can be `none`, `to`, `from` or `both`. |
  166. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  167. | id | A unique id, same as the jid. |
  168. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  169. | chat_status | The person's chat status. Can be `online`, `offline`, `busy`, `xa` (extended away) or `away`. |
  170. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  171. | user_id | The user id part of the JID (the part before the `@`). |
  172. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  173. | resources | The known resources for this chat buddy. Each resource denotes a separate and connected chat client. |
  174. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  175. | groups | The roster groups in which this chat buddy was placed. |
  176. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  177. | status | Their human readable custom status message. |
  178. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  179. | image_type | The image's file type. |
  180. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  181. | image | The Base64 encoded image data. |
  182. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  183. | url | The buddy's website URL, as specified in their VCard data. |
  184. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  185. | vcard_updated | When last the buddy's VCard was updated. |
  186. +----------------+--------------------------------------------------------------------------------------------------------------------------------------+
  187. add
  188. ~~~
  189. Add a contact.
  190. Provide the JID of the contact you want to add::
  191. converse.chats.add('buddy@example.com')
  192. You may also provide the fullname. If not present, we use the jid as fullname.
  193. converse.chats.add('buddy@example.com', 'Buddy')
  194. "chats" grouping
  195. ----------------
  196. get
  197. ~~~
  198. Returns an object representing a chat box.
  199. To return a single chat box, provide the JID of the contact you're chatting
  200. with in that chat box::
  201. converse.chats.get('buddy@example.com')
  202. To return an array of chat boxes, provide an array of JIDs::
  203. converse.chats.get(['buddy1@example.com', 'buddy2@example.com'])
  204. To return all open chat boxes, call the method without any JIDs::
  205. converse.chats.get()
  206. open
  207. ~~~~
  208. Opens a chat box and returns an object representing a chat box.
  209. To open a single chat box, provide the JID of the contact::
  210. converse.chats.open('buddy@example.com')
  211. To return an array of chat boxes, provide an array of JIDs::
  212. converse.chats.open(['buddy1@example.com', 'buddy2@example.com'])
  213. *The returned chat box object contains the following methods:*
  214. +-------------+------------------------------------------+
  215. | Method | Description |
  216. +=============+==========================================+
  217. | endOTR | End an OTR (Off-the-record) session. |
  218. +-------------+------------------------------------------+
  219. | get | Get an attribute (i.e. accessor). |
  220. +-------------+------------------------------------------+
  221. | initiateOTR | Start an OTR (off-the-record) session. |
  222. +-------------+------------------------------------------+
  223. | maximize | Minimize the chat box. |
  224. +-------------+------------------------------------------+
  225. | minimize | Maximize the chat box. |
  226. +-------------+------------------------------------------+
  227. | set | Set an attribute (i.e. mutator). |
  228. +-------------+------------------------------------------+
  229. | close | Close the chat box. |
  230. +-------------+------------------------------------------+
  231. | open | Opens the chat box. |
  232. +-------------+------------------------------------------+
  233. *The get and set methods can be used to retrieve and change the following attributes:*
  234. +-------------+-----------------------------------------------------+
  235. | Attribute | Description |
  236. +=============+=====================================================+
  237. | height | The height of the chat box. |
  238. +-------------+-----------------------------------------------------+
  239. | url | The URL of the chat box heading. |
  240. +-------------+-----------------------------------------------------+
  241. "settings" grouping
  242. -------------------
  243. This grouping allows you to get or set the configuration settings of converse.js.
  244. get(key)
  245. ~~~~~~~~
  246. Returns the value of a configuration settings. For example::
  247. converse.settings.get("play_sounds"); // default value returned would be false;
  248. set(key, value) or set(object)
  249. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  250. Set one or many configuration settings. For example::
  251. converse.settings.set("play_sounds", true);
  252. or ::
  253. converse.settings.set({
  254. "play_sounds", true,
  255. "hide_offline_users" true
  256. });
  257. Note, this is not an alternative to calling ``converse.initialize``, which still needs
  258. to be called. Generally, you'd use this method after converse.js is already
  259. running and you want to change the configuration on-the-fly.
  260. "tokens" grouping
  261. -----------------
  262. get
  263. ~~~
  264. Returns a token, either the RID or SID token depending on what's asked for.
  265. Example::
  266. converse.tokens.get('rid')
  267. "listen" grouping
  268. -----------------
  269. Converse.js emits events to which you can subscribe from your own Javascript.
  270. Concerning events, the following methods are available under the "listen"
  271. grouping:
  272. * **on(eventName, callback)**:
  273. Calling the ``on`` method allows you to subscribe to an event.
  274. Every time the event fires, the callback method specified by ``callback`` will be
  275. called.
  276. Parameters:
  277. * ``eventName`` is the event name as a string.
  278. * ``callback`` is the callback method to be called when the event is emitted.
  279. For example::
  280. converse.listen.on('message', function (event, messageXML) { ... });
  281. * **once(eventName, callback)**:
  282. Calling the ``once`` method allows you to listen to an event
  283. exactly once.
  284. Parameters:
  285. * ``eventName`` is the event name as a string.
  286. * ``callback`` is the callback method to be called when the event is emitted.
  287. For example::
  288. converse.listen.once('message', function (event, messageXML) { ... });
  289. * **not(eventName, callback)**
  290. To stop listening to an event, you can use the ``not`` method.
  291. Parameters:
  292. * ``eventName`` is the event name as a string.
  293. * ``callback`` refers to the function that is to be no longer executed.
  294. For example::
  295. converse.listen.not('message', function (event, messageXML) { ... });
  296. Events
  297. ======
  298. .. note:: see also the `"listen" grouping`_ API section above.
  299. Event Types
  300. -----------
  301. Here are the different events that are emitted:
  302. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  303. | Event Type | When is it triggered? | Example |
  304. +=================================+===================================================================================================+======================================================================================================+
  305. | **initialized** | Once converse.js has been initialized. | ``converse.listen.on('initialized', function (event) { ... });`` |
  306. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  307. | **ready** | After connection has been established and converse.js has got all its ducks in a row. | ``converse.listen.on('ready', function (event) { ... });`` |
  308. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  309. | **reconnect** | After the connection has dropped. Converse.js will attempt to reconnect when not in prebind mode. | ``converse.listen.on('reconnect', function (event) { ... });`` |
  310. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  311. | **message** | When a message is received. | ``converse.listen.on('message', function (event, messageXML) { ... });`` |
  312. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  313. | **messageSend** | When a message will be sent out. | ``storage_memoryconverse.listen.on('messageSend', function (event, messageText) { ... });`` |
  314. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  315. | **noResumeableSession** | When keepalive=true but there aren't any stored prebind tokens. | ``converse.listen.on('noResumeableSession', function (event) { ... });`` |
  316. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  317. | **roster** | When the roster is updated. | ``converse.listen.on('roster', function (event, items) { ... });`` |
  318. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  319. | **callButtonClicked** | When a call button (i.e. with class .toggle-call) on a chat box has been clicked. | ``converse.listen.on('callButtonClicked', function (event, connection, model) { ... });`` |
  320. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  321. | **chatBoxOpened** | When a chat box has been opened. | ``converse.listen.on('chatBoxOpened', function (event, chatbox) { ... });`` |
  322. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  323. | **chatRoomOpened** | When a chat room has been opened. | ``converse.listen.on('chatRoomOpened', function (event, chatbox) { ... });`` |
  324. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  325. | **chatBoxClosed** | When a chat box has been closed. | ``converse.listen.on('chatBoxClosed', function (event, chatbox) { ... });`` |
  326. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  327. | **chatBoxFocused** | When the focus has been moved to a chat box. | ``converse.listen.on('chatBoxFocused', function (event, chatbox) { ... });`` |
  328. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  329. | **chatBoxToggled** | When a chat box has been minimized or maximized. | ``converse.listen.on('chatBoxToggled', function (event, chatbox) { ... });`` |
  330. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  331. | **roomInviteSent** | After the user has sent out a direct invitation, to a roster contact, asking them to join a room. | ``converse.listen.on('roomInvite', function (event, roomview, invitee_jid, reason) { ... });`` |
  332. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  333. | **roomInviteReceived** | After the user has sent out a direct invitation, to a roster contact, asking them to join a room. | ``converse.listen.on('roomInvite', function (event, roomview, invitee_jid, reason) { ... });`` |
  334. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  335. | **statusChanged** | When own chat status has changed. | ``converse.listen.on('statusChanged', function (event, status) { ... });`` |
  336. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  337. | **statusMessageChanged** | When own custom status message has changed. | ``converse.listen.on('statusMessageChanged', function (event, message) { ... });`` |
  338. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  339. | **contactStatusChanged** | When a chat buddy's chat status has changed. | ``converse.listen.on('contactStatusChanged', function (event, buddy, status) { ... });`` |
  340. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+
  341. | **contactStatusMessageChanged** | When a chat buddy's custom status message has changed. | ``converse.listen.on('contactStatusMessageChanged', function (event, buddy, messageText) { ... });`` |
  342. +---------------------------------+---------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------+