Refactored approach for inserting visualization links on menu pages. Still hoping to remove JavaScript altogether based on outcome of NIHVIVO-1681

productMods/css/visualization/visualization.css

@@ -5,37 +5,33 @@
 **************************************************/
 
 span.incomplete-data-holder,
-#incomplete-data{
+#incomplete-data {
-  padding: 5px;
+    padding: 5px;
-  font-size: 0.8em;
+    font-size: 0.8em;
-  color: #444;
+    color: #444;
-  border: dotted 1px #eee;
+    border: dotted 1px #eee;
-  background-color: #ffb;
+    background-color: #ffb;
 }
-#incomplete-data{
+
-  margin-top: 1.6em;
+#incomplete-data {
-  font-size: 1.0em;
+    margin-top: 1.6em;
+    font-size: 1.0em;
 }
-/* RY Removed cursor:pointer: makes the whole div look clickable when it isn't. */
+
-#vis_container{
+.collaboratorship-icon {
-    /*cursor:pointer; */
-    /*height:36px;
-    margin-left:24%;
-    margin-top:-2%;
-    position:absolute;
-    width:380px;*/
-}
-.collaboratorship-icon{
     float: left;
     padding-right: 5px;
 }
-.collaboratorship-link{
+
+.collaboratorship-link {
     padding-top: 3px;
 }
-.collaboratorship-link a{
+
+.collaboratorship-link a {
     font-size: 0.9em;
 }
-.collaboratorship-link h3{
+
+.collaboratorship-link h3 {
     line-height: 1em;
     font-size: 1em !important;
     margin-bottom: 0px !important;
@@ -44,31 +40,48 @@ span.incomplete-data-holder,
     padding-left: 0px !important;
     padding-bottom: 0px !important;
 }
-.collaboratorship-link h3 a{
+
+.collaboratorship-link h3 a {
     color: #2485AE;
     font-size: .9em !important;
     text-decoration: underline;
 }
-#coauthorship_link_container{
+
+#coauthorship_link_container {
     display: none;
 }
+
 #coauthorship_link_container,
-#coinvestigator_link_container{
+#coinvestigator_link_container {
     margin-top: 20px;
 }
-.sparkline_text{
+
+.sparkline_text {
     font-size: .8em;
     font-weight: bold;
     text-align: left;
     padding-bottom: 20px;
     border-bottom: 1px dotted #A6B1B0;
 }
-.google-visualization-sparkline-default{
+
+.google-visualization-sparkline-default {
     margin-bottom: 5px;
 }
-.google-visualization-sparkline-image{
+
+.google-visualization-sparkline-image {
     border: 1px solid #cfe4ed; 
 }
-.google-visualization-sparkline-selected{
+
+.google-visualization-sparkline-selected {
     background-color: blue;
 }
+
+.visualization-menupage-link {
+    float: right;
+    margin-top: 0.8em;
+    padding-left: 1.6em;
+}
+
+.temporal-graph {
+    background: url(../../images/visualization/temporal_vis_small_icon.jpg) top left no-repeat;
+}

productMods/js/menupage/visualizationLink.js

@@ -0,0 +1,48 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+// NC: I've discussed this with Chintan and my hope is to have the temporal graph vis
+// load the top level org by default (when the uri parameter is not included), therefore
+// rendering this entire file unnecessary and obsolete.
+var visualizationLink = {
+    // Initial page setup
+    onLoad: function() {
+        this.mergeFromTemplate();
+        this.initObjects();
+    },
+    
+    // Add variables from menupage template
+    mergeFromTemplate: function() {
+        $.extend(this, menupageData);
+    },
+    
+    // Create references to frequently used elements for convenience
+    initObjects: function() {
+        this.visLink = $('.visualization-menupage-link');
+    },
+    
+    // Temporarily hide the link while we determine the href value via AJAX
+    hideLink: function() {
+        this.visLink.addClass('hidden');
+    },
+    
+    // Determine the URL parameters for temporal graph of top level org
+    getURL: function() {
+        $.ajax({
+            url: this.baseUrl + "/visualizationAjax",
+            data: ({vis: "utilities", vis_mode: "HIGHEST_LEVEL_ORGANIZATION"}),
+            dataType: "text",
+            success:function(data){
+                if (data != null && data != "") {
+                        visualizationLink.visLink.attr("href", data);
+                        visualizationLink.visLink.removeClass('hidden');
+                    }
+            }
+        });
+    }
+};
+
+$(document).ready(function() {
+    visualizationLink.onLoad();
+    visualizationLink.hideLink();
+    visualizationLink.getURL();
+});

productMods/templates/freemarker/body/menupage/menupage--classgroup-organizations.ftl

@@ -1,37 +1,10 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 <#assign visualizationLink>
-    
+    <a class="visualization-menupage-link temporal-graph" href="#" title="Compare publications and grants output">Temporal Graph</a>
-    <#assign temporalGraphIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
-    
-	<div id="temporal-graph-link-container">
-		<div class="collaboratorship-icon">
-            <a class="temporal-graph-link" href="#"><img src="${temporalGraphIcon}" alt="Temporal Graph"/></a>
-        </div>
-        <div class="collaboratorship-link">
-            <h3><a  class="temporal-graph-link" href="#">Temporal Graph</a></h3>
-        </div>
-	</div>
-	
-    ${stylesheets.add("css/visualization/visualization.css")}
-    
-    <script type="text/javascript">
-        var contextPath = '${urls.base}';
-        
-        $.ajax({
-			url: contextPath + "/visualizationAjax",
-			data: ({vis: "utilities", vis_mode: "HIGHEST_LEVEL_ORGANIZATION"}),
-			dataType: "text",
-			success:function(data){
-				if (data != null && data != "") {
-						$("#temporal-graph-link-container .temporal-graph-link").attr("href", data);
-						$("#temporal-graph-link-container").show();
-					}
-			}
-		});
-	
-    </script>
-    
-    
 </#assign>
 
 <#include "menupage.ftl">
+
+${stylesheets.add("/css/visualization/visualization.css")}
+
+${scripts.add("/js/menupage/visualizationLink.js")}

themes/wilma/css/wilma.css

@@ -831,11 +831,6 @@ ul#foaf-person-childClasses .count-classes {
     font-size: .75em;
 }
 /* VISUAL GRAPH CLASS:GENERIC (ORGANIZATION, RESEARCH, EVENT) ------>  */
-#temporal-graph-link-container {
-	display: none;
-	float: right;
-  	width: 128px;
-}
 #content-generic-class {
     width: 900px;
 }