Add initial UI and handlers for starting OTR to converse.js

converse.css

@@ -8,6 +8,15 @@
 
 @import url("fonticons/style.css");
 
+.no-text-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 #collective-xmpp-chat-data {
   color: rgb(79, 79, 79);
 }
@@ -777,8 +786,40 @@ ul.chat-toolbar {
     float: right;
 }
 
+.chat-toolbar .toggle-otr ul {
+	display: none;
+    font-size:12px;
+    position: absolute;
+    top: 20px;
+    right: 0;
+    background: #fff;
+    box-shadow: 1px 3px 3px 1px rgba(0,0,0,0.4);
+}
+
+.chat-toolbar .toggle-otr ul li {
+	position: relative;
+	list-style: none;
+	cursor: pointer;
+    display: block;
+    z-index: 99;
+}
+
+.chat-toolbar .toggle-otr ul li:hover {
+    background-color: #eee;
+}
+
+.chat-toolbar .toggle-otr ul li a {
+	transition:background-color 0.2s ease-in-out;
+	-webkit-transition:background-color 0.2s ease-in-out;
+	-moz-transition:background-color 0.2s ease-in-out;
+	display: block;
+	padding: 1px;
+	text-decoration: none;
+}
+
 .chat-toolbar-text {
     font-size: 12px;
+    padding-right: 3px;
 }
 
 .not-private a,
@@ -895,34 +936,3 @@ form.add-xmpp-contact input {
     color: rgb(79, 79, 79);
 }
 
-.chatbox .click-nav ul {
-	display: none;
-    font-size:12px;
-    position: absolute;
-    top: 20px;
-    right: 0;
-    background: #fff;
-    box-shadow: 1px 3px 3px 1px rgba(0,0,0,0.4);
-}
-
-.chatbox .click-nav ul li {
-	position: relative;
-	list-style: none;
-	cursor: pointer;
-    display: block;
-    z-index: 99;
-}
-
-.chatbox .click-nav ul li:hover {
-    background-color: #eee;
-}
-
-.chatbox .click-nav ul li a {
-	transition:background-color 0.2s ease-in-out;
-	-webkit-transition:background-color 0.2s ease-in-out;
-	-moz-transition:background-color 0.2s ease-in-out;
-	display: block;
-	padding: 1px;
-	text-decoration: none;
-}
-

converse.js

@@ -379,9 +379,41 @@
 
             events: {
                 'click .close-chatbox-button': 'closeChat',
-                'keypress textarea.chat-textarea': 'keyPressed'
+                'keypress textarea.chat-textarea': 'keyPressed',
+                'click .toggle-otr': 'toggleOTRMenu',
+                'click .start-otr': 'startOTR',
+                'click .end-otr': 'endOTR',
+                'click .auth-otr': 'authOTR'
             },
 
+            template: _.template(
+                '<div class="chat-head chat-head-chatbox">' +
+                    '<a class="close-chatbox-button icon-close"></a>' +
+                    '<a href="{{url}}" target="_blank" class="user">' +
+                        '<div class="chat-title"> {{ fullname }} </div>' +
+                    '</a>' +
+                    '<p class="user-custom-message"><p/>' +
+                '</div>' +
+                '<div class="chat-content"></div>' +
+                '<form class="sendXMPPMessage" action="" method="post">' +
+                    '<ul class="chat-toolbar no-text-select">'+
+                        '<li class="toggle-otr not-private" title="Turn on \'off-the-record\' chat encryption">'+
+                            '<span class="chat-toolbar-text">Not private</span>'+
+                            '<span class="icon-unlocked"></span>'+
+                            '<ul>'+
+                                '<li><a class="start-otr" href="#">Start private conversation</a></li>'+
+                                '<li><a class="end-otr" href="#">End private conversation</a></li>'+
+                                '<li><a class="auth-otr" href="#">Authenticate buddy</a></li>'+
+                                '<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What\'s this?</a></li>'+
+                            '</ul>'+
+                        '</li>'+
+                    '</ul>'+
+                '<textarea ' +
+                    'type="text" ' +
+                    'class="chat-textarea" ' +
+                    'placeholder="'+__('Personal message')+'"/>'+
+                '</form>'),
+
             message_template: _.template(
                                 '<div class="chat-message {{extra_classes}}">' +
                                     '<span class="chat-message-{{sender}}">{{time}} {{username}}:&nbsp;</span>' +
@@ -562,20 +594,7 @@
                         return;
                     }
                     else if (match[1] === "otr") {
-                        msgs = [
-                            __('Initializing OTR.'),
-                            __('Generating private key'),
-                            __('...this might take a few seconds.')
-                            ];
-                        this.showHelpMessages(msgs);
-                        setTimeout($.proxy(function () {
-                            var privKey = this.model.getPrivateKey();
-                            msgs = [
-                                __('Private key generated.')
-                                ];
-                            this.showHelpMessages(msgs);
-                            this.model.initiateOTR(privKey);
-                        }, this));
+                        this.startOTR();
                         return;
                     } else if (match[1] === "endotr") {
                         if (this.model.otr) {
@@ -631,6 +650,47 @@
                 }
             },
 
+            toggleOTRMenu: function (ev) {
+                ev.stopPropagation();
+                $(ev.currentTarget).children('ul').slideToggle(200, function () {
+                    $(document).click(function() {
+                        if ($('.toggle-otr ul').is(':visible')) {
+                            $('.toggle-otr ul', this).slideUp();
+                        }
+                    });
+                });
+            },
+
+            startOTR: function (ev) {
+                $(ev.target).parent().parent().slideUp();
+                ev.stopPropagation();
+                msgs = [
+                    __('Initializing OTR.'),
+                    __('Generating private key'),
+                    __('...this might take a few seconds.')
+                    ];
+                this.showHelpMessages(msgs);
+                setTimeout($.proxy(function () {
+                    var privKey = this.model.getPrivateKey();
+                    msgs = [
+                        __('Private key generated.')
+                        ];
+                    this.showHelpMessages(msgs);
+                    this.model.initiateOTR(privKey);
+                }, this));
+                // TODO: UI must be updated to show new status... most likely
+                // "unverified" but we also need to figure out to know whether
+                // the status is verified or unverified (and how to verify).
+            },
+
+            endOTR: function (ev) {
+                alert('to be done');
+            },
+
+            authOTR: function (ev) {
+                alert('to be done');
+            },
+
             onChange: function (item, changed) {
                 if (_.has(item.changed, 'chat_status')) {
                     var chat_status = item.get('chat_status'),
@@ -688,22 +748,6 @@
                 }
             },
 
-            template: _.template(
-                '<div class="chat-head chat-head-chatbox">' +
-                    '<a class="close-chatbox-button icon-close"></a>' +
-                    '<a href="{{url}}" target="_blank" class="user">' +
-                        '<div class="chat-title"> {{ fullname }} </div>' +
-                    '</a>' +
-                    '<p class="user-custom-message"><p/>' +
-                '</div>' +
-                '<div class="chat-content"></div>' +
-                '<form class="sendXMPPMessage" action="" method="post">' +
-                '<textarea ' +
-                    'type="text" ' +
-                    'class="chat-textarea" ' +
-                    'placeholder="'+__('Personal message')+'"/>'+
-                '</form>'),
-
             renderAvatar: function () {
                 if (!this.model.get('image')) {
                     return;

mockup.html

@@ -225,20 +225,20 @@
             </div>
         </div>
         <form class="sendXMPPMessage" action="" method="post">
-            <ul class="chat-toolbar">
+            <ul class="chat-toolbar no-text-select">
                 <!--
                 <li class="icon-happy" title="Insert a smilery"></li>
                 <li class="icon-camera-2" title="Enable video chat"></li>
                 <li class="icon-newspaper" title="Fetch and show this user's vCard"></li>
                 -->
-                <li class="toggle-otr click-nav not-private" title="Turn on 'off-the-record' chat encryption">
+                <li class="toggle-otr not-private" title="Turn on 'off-the-record' chat encryption">
                     <span class="chat-toolbar-text">Not private</span>
                     <span class="icon-unlocked"></span>
                     <ul>
                         <li><a href="#">Start private conversation</a></li>
                         <li><a href="#">End private conversation</a></li>
                         <li><a href="#">Authenticate buddy</a></li>
-                        <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php">What's this?</a></li>
+                        <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
                     </ul>
                 </li>
             </ul>
@@ -365,13 +365,13 @@ $(document).ready(function () {
 
     $(function() {
         // Clickable Dropdown
-        $('.click-nav').click(function(e) {
-            $('.click-nav ul').slideToggle(200);
+        $('.toggle-otr').click(function(e) {
+            $('.toggle-otr ul').slideToggle(200);
             e.stopPropagation();
         });
         $(document).click(function() {
-            if ($('.click-nav ul').is(':visible')) {
-                $('.click-nav ul', this).slideUp();
+            if ($('.toggle-otr ul').is(':visible')) {
+                $('.toggle-otr ul', this).slideUp(200);
             }
         });
     });