diff --git a/webapp/src/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java b/webapp/src/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java index f12e30150..d96eb23df 100644 --- a/webapp/src/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java +++ b/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; } diff --git a/webapp/web/css/menupage/menupage.css b/webapp/web/css/menupage/menupage.css index 677b0b6c9..30f10106f 100644 --- a/webapp/web/css/menupage/menupage.css +++ b/webapp/web/css/menupage/menupage.css @@ -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; diff --git a/webapp/web/js/menupage/browseByVClass.js b/webapp/web/js/menupage/browseByVClass.js new file mode 100644 index 000000000..62cbda168 --- /dev/null +++ b/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(''); + }) + // 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(); +}); \ No newline at end of file diff --git a/webapp/web/templates/freemarker/body/menupage/menupage--classgroup-people.ftl b/webapp/web/templates/freemarker/body/menupage/menupage--classgroup-people.ftl index fbb1f3e34..4e19cd021 100644 --- a/webapp/web/templates/freemarker/body/menupage/menupage--classgroup-people.ftl +++ b/webapp/web/templates/freemarker/body/menupage/menupage--classgroup-people.ftl @@ -5,7 +5,14 @@

Visual Graph

- <@widget name="browse" classGroup="people"/> + <#-- <@widget name="browse" classGroup="people"/> --> +
@@ -64,71 +71,64 @@
-

Browse By

+

Browse by

-

B

- - - - - - - - - - - - - -
+
-${stylesheets.add("/css/menupage/menupage.css")} \ No newline at end of file +${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)) /> + + + +${scripts.add("/js/menupage/browseByVClass.js", "/js/jquery_plugins/jquery.dump.js")} \ No newline at end of file diff --git a/webapp/web/templates/freemarker/body/menupage/menupage.ftl b/webapp/web/templates/freemarker/body/menupage/menupage.ftl index 0abc07705..5742b4c6f 100644 --- a/webapp/web/templates/freemarker/body/menupage/menupage.ftl +++ b/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$ --> -