From bd02a3cfa340be33e5feb020f69e56003236730a Mon Sep 17 00:00:00 2001
From: cappadona <cappadona@43c2fc9b-1942-4403-87b2-35b4218f7473>
Date: Fri, 8 Jul 2011 12:50:29 +0000
Subject: [PATCH] NIHVIVO-2783 NIHVIVO-2784 Tweaked JavaScript and CSS for URI
 (qTip) and QR code popups.

---
 .../css/individual/individual-vivo.css        | 39 ++++++++++++
 productMods/js/individual/individualUtils.js  | 62 ++++++++++---------
 .../individual/individual--foaf-person.ftl    |  2 +-
 3 files changed, 74 insertions(+), 29 deletions(-)

diff --git a/productMods/css/individual/individual-vivo.css b/productMods/css/individual/individual-vivo.css
index dd75d3bc..03b5ed00 100644
--- a/productMods/css/individual/individual-vivo.css
+++ b/productMods/css/individual/individual-vivo.css
@@ -1,5 +1,44 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
 
+/* <------ INDIVIDUAL INTRO FOR PERSON*/
+#individual-intro.person {
+    margin-bottom: 30px;
+    position: relative;
+    width: 100%;
+}
+#individual-intro.person #individual-info {
+    float: left;
+    width: 78%;
+    margin-bottom: 20px;
+}
+#individual-intro.person .individual-overview {
+    width: 100%;
+    float: none;
+}
+ul#individual-tools-people {
+    margin-top: 5px;
+    height: 20px;
+    padding-bottom: 20px;
+    list-style-type: none;
+    clear: both;
+    margin-bottom: 15px;
+}
+ul#individual-tools-people li {
+    position: relative;
+    display: block;
+    padding-right: 7px;
+    float: left;
+    margin-bottom: 20px;
+}
+ul.individual-urls-people {
+    clear: both;
+    list-style-type: circle;
+    padding-left: 24px;
+}
+ul.individual-urls-people li {
+    font-size: .875em;
+    line-height: 1.3em;
+}
 /* <------ INDIVIDUAL CORE:OVERVIEW */
 #overview {
     clear: left;
diff --git a/productMods/js/individual/individualUtils.js b/productMods/js/individual/individualUtils.js
index 0fd62c8c..bd79cc25 100644
--- a/productMods/js/individual/individualUtils.js
+++ b/productMods/js/individual/individualUtils.js
@@ -11,34 +11,40 @@ $(document).ready(function(){
     // This function creates and styles the "qTip" tooltip that displays the resource uri when the user clicks the uri icon.
     $('#uriIcon').each(function()
     {
-       $(this).qtip(
-       {
-          content: {
-              title: { 
-                  text: 'URI',
-              },
-              text: '<br /><span id="uri-text">' + $("#uriIcon").attr("title") + '</span><br /><br />'
-          },
-          position: {
-              corner: {
-              target: 'leftBottom',
-              tooltip: 'bottomLeft'
-              }
-          },
-          show: {
-             when: {event: 'click'}
-          },
-          hide: {
-             fixed: true // Make it fixed so it can be hovered over
-          },
-          style: {
-              title: {'backgroundColor': '#2485AE', 'color': 'white', 'fontFamily': '"Lucida Sans Unicode","Lucida Grande", Geneva, helvetica, sans-serif'},
-             padding: '6px 6px', // Give it some extra padding
-             width: 380,
-             textAlign: 'center',
-             backgroundColor: '#f1f2ee'
-         }
-       });
+        $(this).qtip(
+        {
+            content: {
+                prerender: true, // We need this for the .click() event listener on 'a.close'
+                text: '<h5>share the URI for this profile</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /> <a class="close" href="#">close</a>'
+            },
+            position: {
+                corner: {
+                    target: 'bottomLeft',
+                    tooltip: 'topLeft'
+                }
+            },
+            show: {
+                when: {event: 'click'}
+            },
+            hide: {
+                fixed: true, // Make it fixed so it can be hovered over and interacted with
+                when: {
+                    target: $('a.close'),
+                    event: 'click'
+                }
+            },
+            style: {
+                padding: '6px',
+                width: 380,
+                backgroundColor: '#f1f2ee'
+            }
+        });
+    });
+    
+    // Prevent close link for URI qTip from requesting bogus '#' href
+    $('a.close').click(function() {
+        $('#uriIcon').qtip("hide");
+        return false;
     });
     
     // Reveal vCard QR code when QR icon is clicked
diff --git a/productMods/templates/freemarker/body/individual/individual--foaf-person.ftl b/productMods/templates/freemarker/body/individual/individual--foaf-person.ftl
index 6511a239..8d9fce8e 100644
--- a/productMods/templates/freemarker/body/individual/individual--foaf-person.ftl
+++ b/productMods/templates/freemarker/body/individual/individual--foaf-person.ftl
@@ -28,7 +28,7 @@
         <nav role="navigation">
         
             <ul id ="individual-tools-people" role="list">
-                <li role="listitem"><img id="uriIcon" title="${individual.uri}" onmouseover="javascript:this.style.cursor='pointer'" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></li>
+                <li role="listitem"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></li>
     
                 <#assign rdfUrl = individual.rdfUrl>
                 <#if rdfUrl??>