litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
nac26 2011-01-13 14:00:56 +00:00
parent 5cd5251bbf
commit c6f0d227a9
4 changed files with 96 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
productMods/css/visualization/visualization.css
View file

@ -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;
}

48
productMods/js/menupage/visualizationLink.js Normal file
View file

@ -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();
});

39
productMods/templates/freemarker/body/menupage/menupage--classgroup-organizations.ftl
View file

@ -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'>
<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>
<a class="visualization-menupage-link temporal-graph" href="#" title="Compare publications and grants output">Temporal Graph</a>
</#assign>
<#include "menupage.ftl">
<#include "menupage.ftl">
${stylesheets.add("/css/visualization/visualization.css")}
${scripts.add("/js/menupage/visualizationLink.js")}

5
themes/wilma/css/wilma.css
View file

@ -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;
}