Merge branch 'master' into gh-pages

0d9fa4a9 · JC Brand · 419019c7 · 93d31f26 · 0d9fa4a9 · 0d9fa4a9
Commit 0d9fa4a9 authored Apr 21, 2013 by JC Brand
8 changed files
--- a/README.rst
+++ b/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

--- a/converse.css
+++ b/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 {

--- a/converse.js
+++ b/converse.js
--- a/docs/NOTES.rst
+++ b/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.
--- a/index.html
+++ b/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>
--- a/main.js
+++ b/main.js
-require(["jquery", "converse"], function($) {});
+require(["jquery", "converse"], function($, converse) {
+    converse.initialize({
+        prebind: false,
+        xhr_user_search: false,
+        auto_subscribe: false 
+    });
+});
--- a/spec/MainSpec.js
+++ b/spec/MainSpec.js
--- a/tests.html
+++ b/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>