Changes to support collapsible/expandable property groups on the profile pages.
This commit is contained in:
tworrall
parent
c9a27d7f11
commit
870db77408
4 changed files with 96 additions and 49 deletions
|
|
@ -32,7 +32,7 @@
|
|||
/* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
|
||||
#individual-intro {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@ img#uriIcon {
|
|||
width: 166px;
|
||||
float: left;
|
||||
padding-right: 1.5em;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#share-contact h3 {
|
||||
margin-top: 15px;
|
||||
|
|
|
|||
|
|
@ -49,10 +49,18 @@
|
|||
<#assign nameForOtherGroup = "other"> <#-- used by both individual-propertyGroupMenu.ftl and individual-properties.ftl -->
|
||||
|
||||
<#-- 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 -->
|
||||
<#include "individual-properties.ftl">
|
||||
<script>
|
||||
var individualLocalName = "${individual.localName}";
|
||||
</script>
|
||||
|
||||
<#assign rdfUrl = individual.rdfUrl>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,27 @@
|
|||
<#-- $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">
|
||||
<#import "lib-vivo-properties.ftl" as vp>
|
||||
|
||||
<#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>')}
|
||||
|
|
|
|||
|
|
@ -4,27 +4,35 @@
|
|||
|
||||
<#import "lib-properties.ftl" as p>
|
||||
<#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>
|
||||
<#assign groupName = group.getName(nameForOtherGroup)>
|
||||
<#assign verbose = (verbosePropertySwitch.currentValue)!false>
|
||||
|
||||
<section class="property-group" role="region">
|
||||
<nav class="scroll-up" role="navigation">
|
||||
<a href="#branding" title="scroll up">
|
||||
<img src="${urls.images}/individual/scroll-up.gif" alt="scroll to property group menus" />
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<#-- 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>
|
||||
<#else>
|
||||
<h2 id="properties">Properties</h2>
|
||||
<#assign groupName = "Properties">
|
||||
<#assign groupNameHtmlId = "properties" >
|
||||
</#if>
|
||||
|
||||
<section id="${groupNameHtmlId}" class="property-group" role="region">
|
||||
<nav class="scroll-up" role="navigation">
|
||||
<img src="${urls.images}/individual/expand-prop-group.png" groupName="${groupNameHtmlId}" alt="expand property group" title="expand this property group"/>
|
||||
</nav>
|
||||
|
||||
<#-- Display the group heading -->
|
||||
<h2 id="${groupNameHtmlId}">${groupName?capitalize}</h2>
|
||||
|
||||
<#-- List the properties in the group -->
|
||||
<div id="${groupNameHtmlId}Group" >
|
||||
<#list group.properties as property>
|
||||
<article class="property" role="article">
|
||||
<#-- Property display name -->
|
||||
|
|
@ -61,5 +69,16 @@
|
|||
</ul>
|
||||
</article> <!-- end property -->
|
||||
</#list>
|
||||
</div>
|
||||
</section> <!-- end property-group -->
|
||||
</#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>
|
||||
Loading…
Add table
Reference in a new issue