Merge branch 'master' into gh-pages

README.rst

@@ -2,12 +2,12 @@
 converse.js
 ===========
 
-Converse.js_ implements an XMPP_ based instant messaging client in the browser.
+Converse.js_ is a web based `XMPP/Jabber`_ instant messaging client.
 
 It is used by collective.xmpp.chat_, which is a Plone_ instant messaging add-on.
 
-The ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.
-This is currently possible, except for adding new contacts, which still makes an XHR call to the (Plone) backend to fetch user info.
+The ultimate goal is to enable anyone to add chat functionality to their websites, independent of any backend.
+You will however need an XMPP server to connect to, either your own, or a public one.
 
 --------
 Features
@@ -54,7 +54,7 @@ Licence
 .. _require.js: http:/requirejs.org
 .. _collective.xmpp.chat: http://github.com/collective/collective.xmpp.chat
 .. _Plone: http://plone.org
-.. _XMPP: http://xmpp.org
+.. _`XMPP/Jabber`: http://xmpp.org
 .. _MIT: http://opensource.org/licenses/mit-license.php
 .. _GPL: http://opensource.org/licenses/gpl-license.php
 .. _here: http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp

converse.css

@@ -182,6 +182,10 @@ div.delayed .chat-message-me {
     color: #7EABBB;
 }
 
+input.error {
+    border: 1px solid red;
+}
+
 .chat-message-error {
     color:#76797C;
     font-size:90%;
@@ -234,9 +238,8 @@ a.subscribe-to-user {
     font-weight: bold;
 }
 
-dl.add-xmpp-contact {
+dl.add-converse-contact {
     margin: 0 0 0 0.5em;
-    padding-top: 3px;
     z-index: 21;
     background: url('images/add_icon.png') no-repeat 3px;
 }
@@ -245,8 +248,13 @@ dt#xmpp-contact-search {
     padding-top: 3px;
 }
 
+.fancy-dropdown {
+    border:1px solid #ddd;
+    height: 22px;
+}
+
 .fancy-dropdown a.choose-xmpp-status,
-.fancy-dropdown a.add-xmpp-contact {
+.fancy-dropdown a.toggle-xmpp-contact-form {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     padding-left: 1.5em;
     width: 140px;
@@ -272,7 +280,7 @@ dt#xmpp-contact-search {
 
 ul#found-users {
     padding: 10px 0 5px 5px;
-    border: 0; 
+    border: 0;
 }
 
 form.search-xmpp-contact {
@@ -283,7 +291,7 @@ form.search-xmpp-contact {
 }
 
 form.search-xmpp-contact input {
-    width: 9em;
+    width: 8em;
 }
 
 .oc-chat-head {
@@ -340,42 +348,42 @@ form.search-xmpp-contact input {
     padding-top: 0.5em;
 }
 
-#xmppchat-roster dd.odd {
+#converse-roster dd.odd {
     background-color: #DCEAC5; /* Make this difference */
 }
 
-#xmppchat-roster dd.current-xmpp-contact {
+#converse-roster dd.current-xmpp-contact {
     clear: both;
 }
 
-#xmppchat-roster dd.current-xmpp-contact,
-#xmppchat-roster dd.current-xmpp-contact:hover {
+#converse-roster dd.current-xmpp-contact,
+#converse-roster dd.current-xmpp-contact:hover {
     background: url(images/user_online_panel.png) no-repeat 5px 2px;
 }
 
-#xmppchat-roster dd.current-xmpp-contact.offline:hover,
-#xmppchat-roster dd.current-xmpp-contact.unavailable:hover,
-#xmppchat-roster dd.current-xmpp-contact.offline,
-#xmppchat-roster dd.current-xmpp-contact.unavailable {
+#converse-roster dd.current-xmpp-contact.offline:hover,
+#converse-roster dd.current-xmpp-contact.unavailable:hover,
+#converse-roster dd.current-xmpp-contact.offline,
+#converse-roster dd.current-xmpp-contact.unavailable {
     background: url(images/user_offline_panel.png) no-repeat 5px 2px;
 }
 
-#xmppchat-roster dd.current-xmpp-contact.dnd,
-#xmppchat-roster dd.current-xmpp-contact.dnd:hover {
+#converse-roster dd.current-xmpp-contact.dnd,
+#converse-roster dd.current-xmpp-contact.dnd:hover {
     background: url(images/user_busy_panel.png) no-repeat 5px 2px;
 }
 
-#xmppchat-roster dd.current-xmpp-contact.away,
-#xmppchat-roster dd.current-xmpp-contact.away:hover {
+#converse-roster dd.current-xmpp-contact.away,
+#converse-roster dd.current-xmpp-contact.away:hover {
     background: url(images/user_away_panel.png) no-repeat 5px 2px;
 }
 
-#xmppchat-roster dd.requesting-xmpp-contact button{
+#converse-roster dd.requesting-xmpp-contact button{
     margin-left: 0.5em;
 }
 
-#xmppchat-roster dd a,
-#xmppchat-roster dd span {
+#converse-roster dd a,
+#converse-roster dd span {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     display: inline-block;
     overflow: hidden;
@@ -383,12 +391,12 @@ form.search-xmpp-contact input {
     text-overflow: ellipsis;
 }
 
-#xmppchat-roster dd a {
+#converse-roster dd a {
     margin-left: 1.5em;
     width: 113px;
 }
 
-#xmppchat-roster dd span {
+#converse-roster dd span {
     width: 125px;
 }
 
@@ -396,7 +404,7 @@ form.search-xmpp-contact input {
     border: none;
 }
 
-#xmppchat-roster {
+#converse-roster {
     height: 200px;
     overflow-y: scroll;
     width: 100%;
@@ -408,7 +416,7 @@ form.search-xmpp-contact input {
 }
 
 #available-chatrooms dt,
-#xmppchat-roster dt {
+#converse-roster dt {
     font-weight: normal;
     display: none;
     font-size: 13px;
@@ -428,7 +436,7 @@ form.search-xmpp-contact input {
 
 
 dd.available-chatroom,
-#xmppchat-roster dd {
+#converse-roster dd {
     font-weight: bold;
     border: none;
     display: block;
@@ -437,7 +445,7 @@ dd.available-chatroom,
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
-#xmppchat-roster dd a.remove-xmpp-contact {
+#converse-roster dd a.remove-xmpp-contact {
     background: url('images/delete_icon.png') no-repeat right top;
     padding: 0 1em 1em 0;
     float: right;
@@ -494,12 +502,12 @@ div#controlbox-panes {
     width: 199px;
 }
 
-form#xmppchat-login {
+form#converse-login {
     background: white;
     padding: 2em 0 0.3em 0.5em;
 }
 
-form#xmppchat-login input {
+form#converse-login input {
     display: block;
 }
 
@@ -599,17 +607,12 @@ form.sendXMPPMessage {
 form#set-custom-xmpp-status {
     float: left;
     padding: 0;
-    background: none;
 }
 
 #set-custom-xmpp-status button {
     padding: 1px 2px 1px 1px;
 }
 
-input.custom-xmpp-status {
-    width: 138px;
-}
-
 /* status dropdown styles */
 dl.dropdown {
     margin-right: 0.5em;
@@ -622,9 +625,17 @@ div.xmpp-status {
     padding: 3px;
 }
 
-.fancy-dropdown {
-    border:1px solid #ddd;
-    height: 22px;
+input.custom-xmpp-status {
+    width: 138px;
+}
+
+form.add-xmpp-contact {
+    background: white;
+    padding: 5px;
+}
+
+form.add-xmpp-contact input {
+    width: 125px;
 }
 
 .dropdown dt a span {

docs/NOTES.rst

+=========================
+Converse.js Documentation
+=========================
+
+------------------------------------
+Converse.js configuration variables:
+------------------------------------
+
+Prebind
+========
+
+Use this option if you don't want to render the login form on the chat control
+box.
+
+When set to true, the onConnected method needs to be called manually, together
+with a Strophe connection object.
+
+The most likely usecase is if you want to already authenticate on the backend
+and merely attach to that connection in the browser.
+
+Besides requiring the back-end to authenticate you, you'll also 
+have to write a Javascript snippet to attach to the set up connection::
+
+    $.JSON({
+        'url': 'mysite.com/xmpp-authenticate',
+        'success': function (data) {
+            connection = new Strophe.Connection(data.BOSH_SERVICE_URL);
+            connection.attach(data.jid, data.sid, data.rid, converse.onConnected);
+        }
+
+fullname
+========
+
+If you are using prebinding, you need to specify the fullname of the currently
+logged in user.
+
+xhr_user_search
+===============
+
+There are two ways to add users. 
+
+* The user inputs a valid JID (Jabber ID), and the user is added as a pending
+contact.
+* The user inputs some text (for example part of a firstname or lastname), an XHR will be made to a backend, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
+
+This setting enables the second mechanism, otherwise by default the first will
+be used.
+
+auto_subscribe
+==============
+
+If true, the user will automatically subscribe back to any contact requests.
+
+animate
+=======
+
+Show animations, for example when opening and closing chat boxes.

index.html

@@ -29,16 +29,16 @@
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
     <section id="main_content" class="inner">
-    <p><strong>Converse.js</strong> implements an <a href="http://xmpp.org" target="_blank">XMPP</a> based instant messaging client in the browser.</p>
+    <p><strong>Converse.js</strong> is a web based <a href="http://xmpp.org" target="_blank">XMPP/Jabber</a> instant messaging client.</p>
     <p>It is used by <a href="http://github.com/collective/collective.xmpp.chat" target="_blank">collective.xmpp.chat</a>, which is a <a href="http://plone.org" target="_blank">Plone</a> instant messaging add-on.</p>
-    <p>The ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.</p>
-    <p>This is currently possible, except for adding new contacts, which still makes an XHR call to the (Plone) backend to fetch user info.</p>
+    <p>The ultimate goal is to enable anyone to add chat functionality to their websites, independent of any backend.
+       You will however need an XMPP server to connect to, either your own, or a public one.</p>
 
     <h2>Features</h2>
     <ul>
         <li>Manually or automically subscribe to other users.</li>
         <li>Accept or decline contact requests</li>
-        <li>Chat status (online, busy, away, offline)</li>
+        <li>Chat statuses (online, busy, away, offline)</li>
         <li>Custom status messages</li>
         <li>Typing notifications</li>
         <li>Third person messages (/me )</li>
@@ -131,10 +131,10 @@
     </div>
 </div>
 
-    <script type="text/javascript">
-        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-2128260-8"); pageTracker._trackPageview(); } catch(err) {}</script>
-  </body>
+<script type="text/javascript">
+    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-2128260-8"); pageTracker._trackPageview(); } catch(err) {}</script>
+</body>
 </html>

main.js

-require(["jquery", "converse"], function($) {});
+require(["jquery", "converse"], function($, converse) {
+    converse.initialize({
+        prebind: false,
+        xhr_user_search: false,
+        auto_subscribe: false 
+    });
+});

tests.html

@@ -29,5 +29,11 @@
             </a>
         </div>
     </div>
+
+    <script type="text/javascript">
+        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-2128260-8"); pageTracker._trackPageview(); } catch(err) {}</script>
 </body>
 </html>