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

Changes to support collapsible/expandable property groups on the profile pages.

Browse source
This commit is contained in:
tworrall 2012-11-16 16:00:16 -05:00
parent c9a27d7f11
commit 870db77408
4 changed files with 96 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/web/css/individual/individual.css
View file

@ -32,7 +32,7 @@
/* <------ INDIVIDUAL INTRO FOR ANY CLASS*/ /* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
#individual-intro { #individual-intro {
margin-top: 15px; margin-top: 15px;
margin-bottom: 20px; margin-bottom: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -63,7 +63,7 @@ img#uriIcon {
width: 166px; width: 166px;
float: left; float: left;
padding-right: 1.5em; padding-right: 1.5em;
margin-bottom: 20px; margin-bottom: 0;
} }
#share-contact h3 { #share-contact h3 {
margin-top: 15px; margin-top: 15px;

10
webapp/web/templates/freemarker/body/individual/individual-vitro.ftl
View file

@ -49,10 +49,18 @@
<#assign nameForOtherGroup = "other"> <#-- used by both individual-propertyGroupMenu.ftl and individual-properties.ftl --> <#assign nameForOtherGroup = "other"> <#-- used by both individual-propertyGroupMenu.ftl and individual-properties.ftl -->
<#-- Property group menu --> <#-- Property group menu -->
<#include "individual-propertyGroupMenu.ftl"> <#-- With release 1.6 the property group is no longer used. The include statement
remains in the event a particular VIVO site still wants to use it with the new
collapsible groups.
<#include "individual-propertyGroupMenu.ftl">
-->
<#-- Ontology properties --> <#-- Ontology properties -->
<#include "individual-properties.ftl"> <#include "individual-properties.ftl">
<script>
var individualLocalName = "${individual.localName}";
</script>
<#assign rdfUrl = individual.rdfUrl> <#assign rdfUrl = individual.rdfUrl>

24
webapp/web/templates/freemarker/body/individual/individual.ftl
View file

@ -1,7 +1,27 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ --> <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- Default individual profile page template --> <#-- Default VIVO individual profile page template (extends individual.ftl in vitro) -->
<#include "individual-setup.ftl"> <#include "individual-setup.ftl">
<#import "lib-vivo-properties.ftl" as vp>
<#include "individual-vitro.ftl"> <#assign individualProductExtension>
<#-- Include for any class specific template additions -->
${classSpecificExtension!}
<@vp.webpages propertyGroups editable />
<!--PREINDIVIDUAL OVERVIEW.FTL-->
<#include "individual-overview.ftl">
</section> <!-- #individual-info -->
</section> <!-- #individual-intro -->
<!--postindiviudal overiew tfl-->
</#assign>
<#include "individual-vitro.ftl">
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
'<link rel="stylesheet" href="${urls.base}/css/individual/individual-property-groups.css" />')}
${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/individual/propertyGroupControls.js"></script>')}

107
webapp/web/templates/freemarker/body/partials/individual/individual-properties.ftl
View file

@ -4,62 +4,81 @@
<#import "lib-properties.ftl" as p> <#import "lib-properties.ftl" as p>
<#assign subjectUri = individual.controlPanelUrl()?split("=") > <#assign subjectUri = individual.controlPanelUrl()?split("=") >
<#if ( propertyGroups.all?size > 1 ) >
<span id="toggleContainer">
<a id="propertyGroupsToggle" href="javascript:" title="expand all groups">expand all</a>
</span>
<#else>
<p style="clear:both"><br /></p>
</#if>
<#list propertyGroups.all as group> <#list propertyGroups.all as group>
<#assign groupName = group.getName(nameForOtherGroup)> <#assign groupName = group.getName(nameForOtherGroup)>
<#assign verbose = (verbosePropertySwitch.currentValue)!false> <#assign verbose = (verbosePropertySwitch.currentValue)!false>
<#if groupName?has_content>
<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
<#else>
<#assign groupName = "Properties">
<#assign groupNameHtmlId = "properties" >
</#if>
<section class="property-group" role="region"> <section id="${groupNameHtmlId}" class="property-group" role="region">
<nav class="scroll-up" role="navigation"> <nav class="scroll-up" role="navigation">
<a href="#branding" title="scroll up"> <img src="${urls.images}/individual/expand-prop-group.png" groupName="${groupNameHtmlId}" alt="expand property group" title="expand this property group"/>
<img src="${urls.images}/individual/scroll-up.gif" alt="scroll to property group menus" />
</a>
</nav> </nav>
<#-- Display the group heading --> <#-- Display the group heading -->
<#if groupName?has_content>
<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
<h2 id="${groupNameHtmlId}">${groupName?capitalize}</h2> <h2 id="${groupNameHtmlId}">${groupName?capitalize}</h2>
<#else>
<h2 id="properties">Properties</h2>
</#if>
<#-- List the properties in the group --> <#-- List the properties in the group -->
<#list group.properties as property> <div id="${groupNameHtmlId}Group" >
<article class="property" role="article"> <#list group.properties as property>
<#-- Property display name --> <article class="property" role="article">
<#if property.localName == "authorInAuthorship" && editable > <#-- Property display name -->
<h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> <#if property.localName == "authorInAuthorship" && editable >
<a id="managePubLink" class="manageLinks" href="${urls.base}/managePublications?subjectUri=${subjectUri[1]!}" title="manage publications" <#if verbose>style="padding-top:10px"</#if> > <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property />
manage publications <a id="managePubLink" class="manageLinks" href="${urls.base}/managePublications?subjectUri=${subjectUri[1]!}" title="manage publications" <#if verbose>style="padding-top:10px"</#if> >
</a> manage publications
</h3> </a>
<#elseif property.localName == "hasResearcherRole" && editable > </h3>
<h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> <#elseif property.localName == "hasResearcherRole" && editable >
<a id="manageGrantLink" class="manageLinks" href="${urls.base}/manageGrants?subjectUri=${subjectUri[1]!}" title="manage grants & projects" <#if verbose>style="padding-top:10px"</#if> > <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property />
manage grants & projects <a id="manageGrantLink" class="manageLinks" href="${urls.base}/manageGrants?subjectUri=${subjectUri[1]!}" title="manage grants & projects" <#if verbose>style="padding-top:10px"</#if> >
</a> manage grants & projects
</h3> </a>
<#elseif property.localName == "organizationForPosition" && editable > </h3>
<h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> <#elseif property.localName == "organizationForPosition" && editable >
<a id="managePeopleLink" class="manageLinks" href="${urls.base}/managePeople?subjectUri=${subjectUri[1]!}" title="manage people" <#if verbose>style="padding-top:10px"</#if> > <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property />
manage affiliated people <a id="managePeopleLink" class="manageLinks" href="${urls.base}/managePeople?subjectUri=${subjectUri[1]!}" title="manage people" <#if verbose>style="padding-top:10px"</#if> >
</a> manage affiliated people
</h3> </a>
<#else> </h3>
<h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> </h3>
</#if>
<#-- List the statements for each property -->
<ul class="property-list" role="list" id="${property.localName}List">
<#-- data property -->
<#if property.type == "data">
<@p.dataPropertyList property editable />
<#-- object property -->
<#else> <#else>
<@p.objectProperty property editable /> <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> </h3>
</#if> </#if>
</ul> <#-- List the statements for each property -->
</article> <!-- end property --> <ul class="property-list" role="list" id="${property.localName}List">
</#list> <#-- data property -->
<#if property.type == "data">
<@p.dataPropertyList property editable />
<#-- object property -->
<#else>
<@p.objectProperty property editable />
</#if>
</ul>
</article> <!-- end property -->
</#list>
</div>
</section> <!-- end property-group --> </section> <!-- end property-group -->
</#list> </#list>
<script>
var propGroupCount = ${propertyGroups.all?size};
if ( propGroupCount == 1 ) {
$('section.property-group').find('div').show();
$('section.property-group').find("h2").addClass("expandedPropGroupH2");
$('section.property-group').children("nav").children("img").hide();
// var innerSrc = $('section.property-group').children("nav").children("img").attr("src");
// $('section.property-group').children("nav").children("img").attr("src",innerSrc.replace("expand-prop-group","collapse-prop-group"));
}
</script>