From c6f0d227a9f89b1475d06dcaa44232653942d0cd Mon Sep 17 00:00:00 2001 From: nac26 Date: Thu, 13 Jan 2011 14:00:56 +0000 Subject: [PATCH] Refactored approach for inserting visualization links on menu pages. Still hoping to remove JavaScript altogether based on outcome of NIHVIVO-1681 --- .../css/visualization/visualization.css | 71 +++++++++++-------- productMods/js/menupage/visualizationLink.js | 48 +++++++++++++ .../menupage--classgroup-organizations.ftl | 39 ++-------- themes/wilma/css/wilma.css | 5 -- 4 files changed, 96 insertions(+), 67 deletions(-) create mode 100644 productMods/js/menupage/visualizationLink.js diff --git a/productMods/css/visualization/visualization.css b/productMods/css/visualization/visualization.css index c719e210..e78749ca 100644 --- a/productMods/css/visualization/visualization.css +++ b/productMods/css/visualization/visualization.css @@ -5,37 +5,33 @@ **************************************************/ span.incomplete-data-holder, -#incomplete-data{ - padding: 5px; - font-size: 0.8em; - color: #444; - border: dotted 1px #eee; - background-color: #ffb; +#incomplete-data { + padding: 5px; + font-size: 0.8em; + color: #444; + border: dotted 1px #eee; + background-color: #ffb; } -#incomplete-data{ - margin-top: 1.6em; - font-size: 1.0em; + +#incomplete-data { + margin-top: 1.6em; + font-size: 1.0em; } -/* RY Removed cursor:pointer: makes the whole div look clickable when it isn't. */ -#vis_container{ - /*cursor:pointer; */ - /*height:36px; - margin-left:24%; - margin-top:-2%; - position:absolute; - width:380px;*/ -} -.collaboratorship-icon{ + +.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; } \ No newline at end of file diff --git a/productMods/js/menupage/visualizationLink.js b/productMods/js/menupage/visualizationLink.js new file mode 100644 index 00000000..b3744ff0 --- /dev/null +++ b/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(); +}); \ No newline at end of file diff --git a/productMods/templates/freemarker/body/menupage/menupage--classgroup-organizations.ftl b/productMods/templates/freemarker/body/menupage/menupage--classgroup-organizations.ftl index 302a803b..2ffd11de 100644 --- a/productMods/templates/freemarker/body/menupage/menupage--classgroup-organizations.ftl +++ b/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> - - <#assign temporalGraphIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'> - - - - ${stylesheets.add("css/visualization/visualization.css")} - - - - + Temporal Graph -<#include "menupage.ftl"> \ No newline at end of file +<#include "menupage.ftl"> + +${stylesheets.add("/css/visualization/visualization.css")} + +${scripts.add("/js/menupage/visualizationLink.js")} \ No newline at end of file diff --git a/themes/wilma/css/wilma.css b/themes/wilma/css/wilma.css index d2ac1f22..781c0109 100644 --- a/themes/wilma/css/wilma.css +++ b/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; }