NIHVIVO-641 Updates to menupage-classgroup-people.ftl to utilize Brian's new data service that returns JSON. Still needs some work to degrade gracefully without JS.
This commit is contained in:
nac26
parent
66750dae60
commit
6f494c535c
5 changed files with 180 additions and 65 deletions
|
|
@ -388,6 +388,9 @@ public class FreemarkerHttpServlet extends VitroHttpServlet {
|
|||
// Let the page template know which page it's processing.
|
||||
map.put("currentPage", vreq.getServletPath().replaceFirst("/", ""));
|
||||
|
||||
// Allow template to send domain name to JavaScript (needed for AJAX calls)
|
||||
map.put("requestedPage", vreq.getRequestURL().toString());
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
#intro-menupage{
|
||||
clear: both;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
margin: 1em auto;
|
||||
/* padding-top: 30px; nac26: not sure we need all this space up top*/
|
||||
/* margin-bottom: 30px;*/
|
||||
}
|
||||
#intro-menupage h3{
|
||||
padding: 0 25px 15px 0;
|
||||
|
|
@ -59,20 +59,20 @@ ul#foaf-person-childClasses a{
|
|||
#content-generic-class h4{
|
||||
padding: 20px 25px 12px 0;
|
||||
}
|
||||
ul#class-generic-childClasses{
|
||||
ul#vgraph-childClasses{
|
||||
float: left;
|
||||
width: 265px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
ul#class-generic-childClasses li{
|
||||
ul#vgraph-childClasses li{
|
||||
display: block;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
ul#class-generic-childClasses li:last-child{
|
||||
ul#vgraph-childClasses li:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
ul#class-generic-childClasses a{
|
||||
ul#vgraph-childClasses a{
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
width: 265px;
|
||||
|
|
|
|||
113
webapp/web/js/menupage/browseByVClass.js
Normal file
113
webapp/web/js/menupage/browseByVClass.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
var browseByVClass = {
|
||||
// Initial page setup
|
||||
onLoad: function() {
|
||||
this.mergeFromTemplate();
|
||||
this.initObjects();
|
||||
this.bindEventListeners();
|
||||
},
|
||||
|
||||
// Add variables from menupage template
|
||||
mergeFromTemplate: function() {
|
||||
$.extend(this, menupageData);
|
||||
},
|
||||
|
||||
// Create references to frequently used elements for convenience
|
||||
initObjects: function() {
|
||||
this.vgraphVClasses = $('#vgraph-childClasses');
|
||||
this.vgraphVClassLinks = $('#vgraph-childClasses li a');
|
||||
this.browseVClasses = $('#browse-childClasses');
|
||||
this.browseVClassLinks = $('#browse-childClasses li a');
|
||||
this.selectedBrowseVClass = $('#browse-childClasses li a.selected');
|
||||
this.alphaIndex = $('#alpha-browse-childClass');
|
||||
this.alphaIndexLinks = $('#alpha-browse-childClass li a');
|
||||
this.selectedAlphaIndex = $('#alpha-browse-childClass li a.selected');
|
||||
this.individualsInVClass = $('#individuals-in-childClass');
|
||||
},
|
||||
|
||||
// Event listeners. Called on page load
|
||||
bindEventListeners: function() {
|
||||
// Listeners for vClass switching
|
||||
this.vgraphVClassLinks.click(function() {
|
||||
uri = $(this).attr("data-uri");
|
||||
browseByVClass.getIndividuals(uri);
|
||||
});
|
||||
|
||||
this.browseVClassLinks.click(function() {
|
||||
uri = $(this).attr("data-uri");
|
||||
browseByVClass.getIndividuals(uri);
|
||||
return false;
|
||||
})
|
||||
|
||||
// Listener for alpha switching
|
||||
this.alphaIndexLinks.click(function() {
|
||||
uri = $('#browse-childClasses li a.selected').attr("data-uri");
|
||||
alpha = $(this).attr("data-alpha");
|
||||
// alpha = $(this).text().substring(0, 1);
|
||||
browseByVClass.getIndividuals(uri, alpha);
|
||||
return false;
|
||||
})
|
||||
},
|
||||
|
||||
// Load individuals for default class as specified by menupage template
|
||||
defaultVClass: function() {
|
||||
this.getIndividuals(this.defaultBrowseVClassUri);
|
||||
},
|
||||
|
||||
getIndividuals: function(vclassUri, alpha) {
|
||||
url = this.dataServiceUrl + encodeURIComponent(vclassUri);
|
||||
if ( alpha && alpha != "all") {
|
||||
url = url + '&alpha=' + alpha;
|
||||
}
|
||||
|
||||
// First wipe currently displayed individuals
|
||||
this.individualsInVClass.empty();
|
||||
|
||||
$.getJSON(url, function(results) {
|
||||
$.each(results.individuals, function(i, item) {
|
||||
// alert(results.individuals[i].label);
|
||||
indivLabel = results.individuals[i].label;
|
||||
indivUri = results.individuals[i].URI;
|
||||
// test for individual image is not currently functional
|
||||
// since the image is not yet included in the JSON results
|
||||
if ( !results.individuals[i].image ) {
|
||||
indivImage = browseByVClass.baseUrl + '/images//menupage/person-thumbnail.jpg';
|
||||
} else {
|
||||
indivImage = results.individuals[i].image;
|
||||
}
|
||||
browseByVClass.individualsInVClass.append('<article class="vcard individual-foaf-person" role="navigation"> <img src="'+ indivImage +'" width="90" height="90" alt="'+ indivLabel +'" /><h1 class="fn"><a href="'+ indivUri +'" title="View the profile page for '+ indivLabel +'">'+ indivLabel + '</a></h1><p>core:preferredTitle <span class="org">org from preferredTitle??</span></p></article>');
|
||||
})
|
||||
// set selected class and alpha
|
||||
browseByVClass.selectedVClass(results.vclass.URI);
|
||||
browseByVClass.selectedAlpha(alpha);
|
||||
});
|
||||
},
|
||||
|
||||
selectedVClass: function(vclassUri) {
|
||||
// Remove active class on all vClasses
|
||||
$('#browse-childClasses li a.selected').removeClass('selected');
|
||||
// Can't figure out why using this.selectedBrowseVClass doesn't work here
|
||||
// this.selectedBrowseVClass.removeClass('selected');
|
||||
|
||||
// Add active class for requested vClass
|
||||
$('#browse-childClasses li a[data-uri="'+ vclassUri +'"]').addClass('selected');
|
||||
},
|
||||
|
||||
selectedAlpha: function(alpha) {
|
||||
// if no alpha argument sent, assume all
|
||||
if ( alpha == null ) {
|
||||
alpha = "all";
|
||||
}
|
||||
// Remove active class on all letters
|
||||
$('#alpha-browse-childClass li a.selected').removeClass('selected');
|
||||
|
||||
// Add active class for requested alpha
|
||||
$('#alpha-browse-childClass li a[data-alpha="'+ alpha +'"]').addClass('selected');
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
browseByVClass.onLoad();
|
||||
browseByVClass.defaultVClass();
|
||||
});
|
||||
|
|
@ -5,7 +5,14 @@
|
|||
<section id="content-foaf-person" role="region">
|
||||
<h4>Visual Graph</h4>
|
||||
|
||||
<@widget name="browse" classGroup="people"/>
|
||||
<#-- <@widget name="browse" classGroup="people"/> -->
|
||||
<nav role="navigation">
|
||||
<ul id="vgraph-childClasses">
|
||||
<#list vClassGroup as vClass>
|
||||
<li><a href="#browse-by" title="Browse all people in this class" data-uri="${vClass.URI}">${vClass.name} <span class="count-classes">(indivCount)</span></a></li>
|
||||
</#list>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="foaf-person-graph" role="region">
|
||||
<img src="${urls.images}/menupage/visual-graph.jpg" alt="" />
|
||||
|
|
@ -64,71 +71,64 @@
|
|||
</section>
|
||||
|
||||
<section id="browse-by" role="region">
|
||||
<h2>Browse By</h2>
|
||||
<h2>Browse by</h2>
|
||||
|
||||
<nav role="navigation">
|
||||
<ul id="browse-childClasses">
|
||||
<li><a class="selected" href="#">Faculty Members<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Graduate Students<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Undergraduate Students<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Librarians<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Non Academic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Non Faculty Members<span class="count-classes"> (280)</span></a></li>
|
||||
<#list vClassGroup as vClass>
|
||||
<#------------------------------------------------------------
|
||||
Need to replace vClassCamel with full URL that allows function
|
||||
to degrade gracefully in absence of JavaScript. Something
|
||||
similar to what Brian had setup with widget-browse.ftl
|
||||
------------------------------------------------------------->
|
||||
<#assign vClassCamel = vClass.name?capitalize?replace(" ", "")?uncap_first />
|
||||
<li id="${vClassCamel}"><a href="#${vClassCamel}" title="Browse all people in this class" data-uri="${vClass.URI}">${vClass.name} <span class="count-classes">(indivCount)</span></a></li>
|
||||
</#list>
|
||||
</ul>
|
||||
<nav role="navigation">
|
||||
<ul id="alpha-browse-childClass">
|
||||
<li><a href="#">All<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">A<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a class="selected" href="#">B<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">D<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">F<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">G<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">H<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">I<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">K<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">L<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">N<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">P<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">R<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">U<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">V<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Y<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">Z<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" class="selected" data-alpha="all">All<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="a">A<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="b">B<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="d">D<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="f">F<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="g">G<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="h">H<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="i">I<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="k">K<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="l">L<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="n">N<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="p">P<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="r">R<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="u">U<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="v">V<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="y">Y<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#" data-alpha="z">Z<span class="count-classes"> (280)</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<section id="individuals-in-childClass" role="region">
|
||||
<h3>B</h3>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName" />
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
|
||||
<article class="vcard individual-foaf-person" role="navigation"> <img src="${urls.images}/menupage/person-thumbnail.jpg" width="90" height="90" alt="foaf:lastName, foaf:firstName"/>
|
||||
<h1 class="fn"><strong>foaf:lastName, foaf:fisrtName</strong><br>core:preferredTitle <br><span class="org">Albert Mann Library</span></h1>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
${stylesheets.add("/css/menupage/menupage.css")}
|
||||
${stylesheets.add("/css/menupage/menupage.css")}
|
||||
|
||||
<#----------------------------------------------------------------------------------
|
||||
requestedPage is currently provided by FreemarkerHttpServlet. Should this be moved
|
||||
to PageController? Maybe we should have Java provide the domain name directly
|
||||
instead of the full URL of the requested page? Chintan was also asking for a
|
||||
template variable with the domain name for an AJAX request with visualizations.
|
||||
------------------------------------------------------------------------------------>
|
||||
<#assign domainName = requestedPage?substring(0, requestedPage?index_of("/", 7)) />
|
||||
|
||||
<script type="text/javascript">
|
||||
var menupageData = {
|
||||
baseUrl: '${domainName + urls.base}',
|
||||
dataServiceUrl: '${domainName + urls.base}/dataservice?getLuceneIndividualsByVClass=1&vclassId=',
|
||||
defaultBrowseVClassUri: '${vClassGroup[0].URI}'
|
||||
};
|
||||
</script>
|
||||
|
||||
${scripts.add("/js/menupage/browseByVClass.js", "/js/jquery_plugins/jquery.dump.js")}
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<section id="content-generic-class" role="region">
|
||||
<nav role="navigation">
|
||||
<h3>Organizations</h3>
|
||||
|
||||
<h4>Visual Graph</h4>
|
||||
|
||||
<ul id="class-generic-childClasses">
|
||||
<ul id="vgraph-childClasses">
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a class="selected" href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a class="selected" href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
<li><a href="#">class:generic<span class="count-classes"> (280)</span></a></li>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue