multiple updates and new files to support multiple foaf person profile pages
This commit is contained in:
tworrall
parent
b6bab121c5
commit
589cc245a6
12 changed files with 385 additions and 183 deletions
|
|
@ -3,57 +3,65 @@
|
|||
$(document).ready(function(){
|
||||
|
||||
$.extend(this, individualLocalName);
|
||||
|
||||
adjustFontSize();
|
||||
padSectionBottoms();
|
||||
retrieveLocalStorage();
|
||||
|
||||
// ensures that shorter property group sections don't cause the page to "jump around"
|
||||
// when the tabs are clicked
|
||||
function padSectionBottoms() {
|
||||
$.each($('section.property-group'), function() {
|
||||
var sectionHeight = $(this).height();
|
||||
if ( sectionHeight < 1000 ) {
|
||||
$(this).css('margin-bottom', 1000-sectionHeight + "px");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// expands/collapses the div within each property group
|
||||
$.each($('section.property-group'), function() {
|
||||
var groupName = $(this).attr("id");
|
||||
$(this).children("nav").children("img").click(function() {
|
||||
if ( $("div[id='" + groupName + "Group']").is(":visible") ) {
|
||||
$("div[id='" + groupName + "Group']").slideUp(222);
|
||||
$(this).attr("src", $(this).attr("src").replace("collapse-prop-group","expand-prop-group"));
|
||||
$("section#" + groupName).children("h2").removeClass("expandedPropGroupH2");
|
||||
// controls the property group tabs
|
||||
$.each($('li.clickable'), function() {
|
||||
var groupName = $(this).attr("groupName");
|
||||
var $propertyGroupLi = $(this);
|
||||
|
||||
$(this).click(function() {
|
||||
|
||||
if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) {
|
||||
$.each($('li.selectedGroupTab'), function() {
|
||||
$(this).removeClass("selectedGroupTab clickable");
|
||||
$(this).addClass("nonSelectedGroupTab clickable");
|
||||
});
|
||||
$propertyGroupLi.removeClass("nonSelectedGroupTab clickable");
|
||||
$propertyGroupLi.addClass("selectedGroupTab clickable");
|
||||
}
|
||||
if ( $propertyGroupLi.text() == "View All" ) {
|
||||
processViewAllTab();
|
||||
}
|
||||
else {
|
||||
$("div[id='" + groupName + "Group']").slideDown(222);
|
||||
$(this).attr("src", $(this).attr("src").replace("expand-prop-group","collapse-prop-group"));
|
||||
$("section#" + groupName).children("h2").addClass("expandedPropGroupH2");
|
||||
padSectionBottoms();
|
||||
var $visibleSection = $('section.property-group:visible');
|
||||
$visibleSection.hide();
|
||||
$('h2[pgroup=tabs]').addClass("hidden");
|
||||
$('nav#scroller').addClass("hidden");
|
||||
$('section#' + groupName).show();
|
||||
}
|
||||
manageLocalStorage();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// expands/collapses all property groups together
|
||||
$.each($('a#propertyGroupsToggle'), function() {
|
||||
$('a#propertyGroupsToggle').click(function() {
|
||||
var anchorHtml = $(this).html();
|
||||
if ( anchorHtml.indexOf('expand') > -1 ) {
|
||||
$.each($('section.property-group'), function() {
|
||||
$("div[id='" + $(this).attr("id") + "Group']").slideDown(222);
|
||||
var innerSrc = $(this).children("nav").children("img").attr("src");
|
||||
$(this).children("nav").children("img").attr("src",innerSrc.replace("expand-prop-group","collapse-prop-group"));
|
||||
$(this).children("h2").addClass("expandedPropGroupH2");
|
||||
});
|
||||
$(this).html("collapse all");
|
||||
}
|
||||
else {
|
||||
$.each($('section.property-group'), function() {
|
||||
$("div[id='" + $(this).attr("id") + "Group']").slideUp(222);
|
||||
var innerSrc = $(this).children("nav").children("img").attr("src");
|
||||
$(this).children("nav").children("img").attr("src",innerSrc.replace("collapse-prop-group","expand-prop-group"));
|
||||
$(this).children("h2").removeClass("expandedPropGroupH2");
|
||||
});
|
||||
$(this).html("expand all");
|
||||
}
|
||||
manageLocalStorage();
|
||||
});
|
||||
});
|
||||
|
||||
function processViewAllTab() {
|
||||
$.each($('section.property-group'), function() {
|
||||
$(this).css("margin-bottom", "1px");
|
||||
$(this).children('h2').css("margin-top", "-15px").css("border-bottom","1px solid #DFEBE5").css("padding","12px 25px 10px 20px");
|
||||
$(this).show();
|
||||
$('h2[pgroup=tabs]').removeClass("hidden");
|
||||
$('nav#scroller').removeClass("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
// Next two functions -- keep track of which property group tabs have been expanded,
|
||||
// Next two functions -- keep track of which property group tab was selected,
|
||||
// so if we return from a custom form or a related individual, even via the back button,
|
||||
// the property groups will be expanded as before.
|
||||
// the same property group will be selected as before.
|
||||
function manageLocalStorage() {
|
||||
var localName = this.individualLocalName;
|
||||
// is this individual already stored? If not, how many have been stored?
|
||||
|
|
@ -78,13 +86,9 @@ $(document).ready(function(){
|
|||
amplify.store("profiles", profiles)
|
||||
}
|
||||
}
|
||||
var groups = [];
|
||||
$.each($('section.property-group').children("nav").children("img"), function() {
|
||||
if ( $(this).attr('src').indexOf('collapse-prop-group') > -1 ) {
|
||||
groups.push($(this).attr('groupName'));
|
||||
}
|
||||
});
|
||||
amplify.store(localName, groups);
|
||||
var selectedTab = [];
|
||||
selectedTab.push($('li.selectedGroupTab').attr('groupName'));
|
||||
amplify.store(localName, selectedTab);
|
||||
var checkLength = amplify.store(localName);
|
||||
if ( checkLength.length == 0 ) {
|
||||
amplify.store(localName, null);
|
||||
|
|
@ -93,23 +97,81 @@ $(document).ready(function(){
|
|||
|
||||
function retrieveLocalStorage() {
|
||||
var localName = this.individualLocalName;
|
||||
var groups = amplify.store(individualLocalName);
|
||||
if ( groups != undefined ) {
|
||||
for ( i = 0; i < groups.length; i++) {
|
||||
var groupName = groups[i];
|
||||
// unlikely, but it's possible a group that was previously opened and stored won't be displayed
|
||||
// because the object properties would have been deleted. So ensure that the group in local
|
||||
// storage has been rendered on the page. More likely, a user navigated from a quick view to a full
|
||||
// profile, opened a group, then navigated back to the quick view where the group isn't rendered.
|
||||
if ($("section#" + groupName).length ) {
|
||||
$("div[id='" + groupName + "Group']").slideDown(1);
|
||||
$("img[groupName='" + groupName + "']").attr("src", $("img[groupName='" + groupName + "']").attr("src").replace("expand-prop-group","collapse-prop-group"));
|
||||
$("section#" + groupName).children("h2").addClass("expandedPropGroupH2");
|
||||
var selectedTab = amplify.store(individualLocalName);
|
||||
|
||||
if ( selectedTab != undefined ) {
|
||||
var groupName = selectedTab[0];
|
||||
|
||||
// unlikely, but it's possible a tab that was previously selected and stored won't be displayed
|
||||
// because the object properties would have been deleted (in non-edit mode). So ensure that the tab in local
|
||||
// storage has been rendered on the page.
|
||||
if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) {
|
||||
// if the selected tab is the default first one, don't do anything
|
||||
if ( $('li.clickable').first().attr("groupName") != groupName ) {
|
||||
// deselect the default first tab
|
||||
var $firstTab = $('li.clickable').first();
|
||||
$firstTab.removeClass("selectedGroupTab clickable");
|
||||
$firstTab.addClass("nonSelectedGroupTab clickable");
|
||||
// select the stored tab
|
||||
$("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable");
|
||||
$("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable");
|
||||
// hide the first tab section
|
||||
$('section.property-group:visible').hide();
|
||||
|
||||
if ( groupName == "viewAll" ) {
|
||||
processViewAllTab();
|
||||
}
|
||||
}
|
||||
if ( groups.length == $('section.property-group').length ) {
|
||||
$('a#propertyGroupsToggle').html('collapse all');
|
||||
|
||||
// show the selected tab section
|
||||
$('section#' + groupName).show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// if there are so many tabs that they wrap to a second line, adjust the font size to
|
||||
//prevent wrapping
|
||||
function adjustFontSize() {
|
||||
var width = 0;
|
||||
$('ul.propertyTabsList li').each(function() {
|
||||
width += $(this).outerWidth();
|
||||
});
|
||||
if ( width < 922 ) {
|
||||
var diff = 926-width;
|
||||
$('ul.propertyTabsList li:last-child').css('width', diff + 'px');
|
||||
}
|
||||
else {
|
||||
var diff = width-926;
|
||||
if ( diff < 26 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.96em");
|
||||
}
|
||||
else if ( diff > 26 && diff < 50 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.92em");
|
||||
}
|
||||
else if ( diff > 50 && diff < 80 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.9em");
|
||||
}
|
||||
else if ( diff > 80 && diff < 130 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.84em");
|
||||
}
|
||||
else if ( diff > 130 && diff < 175 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.8em");
|
||||
}
|
||||
else if ( diff > 175 && diff < 260 ) {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.73em");
|
||||
}
|
||||
else {
|
||||
$('ul.propertyTabsList li').css('font-size', "0.7em");
|
||||
}
|
||||
|
||||
// get the new width
|
||||
var newWidth = 0
|
||||
$('ul.propertyTabsList li').each(function() {
|
||||
newWidth += $(this).outerWidth();
|
||||
});
|
||||
var newDiff = 926-newWidth;
|
||||
$('ul.propertyTabsList li:last-child').css('width', newDiff + 'px');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue