From 43b9fa0fc84474b17587052fcd4439cd6f2025d4 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sun, 1 Nov 2015 02:31:32 +0000
Subject: [PATCH] Initial work on rendering VCard info in chat box

---
 converse.js                | 30 +++++++++++++++++++++++++++++-
 css/converse.css           |  1 +
 main.js                    |  3 ++-
 sass/_chatbox.scss         |  1 +
 src/templates.js           |  6 ++++--
 src/templates/chatbox.html |  2 +-
 src/templates/vcard.html   | 12 ++++++++++++
 7 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/templates/vcard.html

diff --git a/converse.js b/converse.js
index 393fbaeeb..7ba4093d5 100644
--- a/converse.js
+++ b/converse.js
@@ -1207,6 +1207,7 @@
             events: {
                 'click .close-chatbox-button': 'close',
                 'click .toggle-chatbox-button': 'minimize',
+                'click .view-vcard-button': 'renderVCard',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
@@ -1270,6 +1271,33 @@
                 return this.showStatusMessage();
             },
 
+            renderVCard: function () {
+                var $chat_body = this.$el.find('.chat-body');
+                if (this.$el.find('.vcard-info').length) {
+                    return this.returnToChat();
+                }
+                $chat_body.children().addClass('hidden');
+                $chat_body.append(converse.templates.vcard(
+                    _.extend(this.model.toJSON(), {
+                        label_return: __('Return to chat')
+                    })
+                ));
+                $chat_body.find('input[type=button]').on('click', this.returnToChat.bind(this));
+                return this;
+            },
+
+            returnToChat: function (ev) {
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
+                var $chat_body = this.$el.find('.chat-body');
+                this.$el.find('.vcard-info').hide(
+                    function () {
+                        $(this).remove();
+                        $chat_body.children().removeClass('hidden');
+                    }
+                );
+                return this;
+            },
+
             setWidth: function () {
                 // If a custom width is applied (due to drag-resizing),
                 // then we need to set the width of the .chatbox element as well.
@@ -2903,7 +2931,7 @@
                 this.toggleOccupants(null, true);
                 return this;
             },
-			
+
             toggleOccupants: function (ev, preserve_state) {
                 if (ev) {
                     ev.preventDefault();
diff --git a/css/converse.css b/css/converse.css
index 08dd3cf6c..51ae66736 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1251,6 +1251,7 @@
       margin: 0;
       width: 100%; } }
   #conversejs .chatbox .box-flyout {
+    background-color: white;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     height: 450px;
     min-height: 225px;
diff --git a/main.js b/main.js
index 692fa5b0d..527707e18 100644
--- a/main.js
+++ b/main.js
@@ -151,7 +151,8 @@ require.config({
         "status_option":            "src/templates/status_option",
         "toggle_chats":             "src/templates/toggle_chats",
         "toolbar":                  "src/templates/toolbar",
-        "trimmed_chat":             "src/templates/trimmed_chat"
+        "trimmed_chat":             "src/templates/trimmed_chat",
+        "vcard":                    "src/templates/vcard"
     },
 
     map: {
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index faec7d30a..7dbf166ef 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -62,6 +62,7 @@
             width: $mobile-chat-width;
         }
         .box-flyout {
+            background-color: white;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             height: $chat-height;
             min-height: $chat-height/2;
diff --git a/src/templates.js b/src/templates.js
index a03c8dad3..f6b8dfcd7 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -49,7 +49,8 @@ define("converse-templates", [
     "tpl!status_option",
     "tpl!toggle_chats",
     "tpl!toolbar",
-    "tpl!trimmed_chat"
+    "tpl!trimmed_chat",
+    "tpl!vcard",
 ], function () {
     return {
         action:                 arguments[0],
@@ -102,6 +103,7 @@ define("converse-templates", [
         status_option:          arguments[47],
         toggle_chats:           arguments[48],
         toolbar:                arguments[49],
-        trimmed_chat:           arguments[50]
+        trimmed_chat:           arguments[50],
+        vcard:                  arguments[51]
     };
 });
diff --git a/src/templates/chatbox.html b/src/templates/chatbox.html
index fdf910878..222fa7241 100644
--- a/src/templates/chatbox.html
+++ b/src/templates/chatbox.html
@@ -5,7 +5,7 @@
     <div class="chat-head chat-head-chatbox">
         <a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
         <a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
-        <a class="chatbox-btn toggle-chatbox-button icon-eye" title="{{info_view}}"></a>
+        <a class="chatbox-btn view-vcard-button icon-eye" title="{{info_view}}"></a>
         <div class="chat-title">
             {[ if (url) { ]}
                 <a href="{{url}}" target="_blank" class="user">
diff --git a/src/templates/vcard.html b/src/templates/vcard.html
new file mode 100644
index 000000000..44467746b
--- /dev/null
+++ b/src/templates/vcard.html
@@ -0,0 +1,12 @@
+<form class="pure-form converse-form vcard-info">
+    <fieldset>
+        <legend>The VCard info gets rendered here</legend>
+        <label>Full name:</label>
+        {{fullname}}
+        <label>URL:</label>
+        {{url}}
+    </fieldset>
+    <fieldset>
+        <input type="button" class="pure-button button-cancel" value="{{label_return}}"/>
+    </fieldset>
+</form>