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.

webapp/src/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java

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

webapp/web/css/menupage/menupage.css

@@ -7,9 +7,9 @@
 #intro-menupage{
     clear: both;
     width: 100%;
-    margin: 0 auto;
+    margin: 1em auto;
-    padding-top: 30px;
+/*    padding-top: 30px;  nac26: not sure we need all this space up top*/
-    margin-bottom: 30px;
+/*    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;

webapp/web/js/menupage/browseByVClass.js

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

webapp/web/templates/freemarker/body/menupage/menupage--classgroup-people.ftl

@@ -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>
+            <#list vClassGroup as vClass>
-            <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>
+                Need to replace vClassCamel with full URL that allows function
-            <li><a href="#">Librarians<span class="count-classes"> (280)</span></a></li>
+                to degrade gracefully in absence of JavaScript. Something
-            <li><a href="#">Non Academic<span class="count-classes"> (280)</span></a></li>
+                similar to what Brian had setup with widget-browse.ftl
-            <li><a href="#">Non Faculty Members<span class="count-classes"> (280)</span></a></li>
+                ------------------------------------------------------------->
+                <#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="#" class="selected" data-alpha="all">All<span class="count-classes"> (280)</span></a></li>
-                <li><a href="#">A<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 class="selected" href="#">B<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="#">D<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="#">F<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="#">G<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="#">H<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="#">I<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="#">K<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="#">L<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="#">N<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="#">P<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="#">R<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="#">U<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="#">V<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="#">Y<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="#">Z<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" />
+    </section>
-            <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>
 
-${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")}

webapp/web/templates/freemarker/body/menupage/menupage.ftl

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