From f1e9ce86fd6a775484d21e04e83d6a042b8fd166 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Mon, 17 Feb 2020 09:52:58 -0800 Subject: [PATCH] if a HeaderCard is being shown, then update the page title and description using that information --- public/index.html | 1 + .../playground/CardContainerLogicDemo.tsx | 29 +++++-------------- src/lib/containers/HeaderCard.tsx | 9 ++++++ 3 files changed, 17 insertions(+), 22 deletions(-) diff --git a/public/index.html b/public/index.html index 02dc72d004..da78d4c36d 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ + { 'MODEL-AD': mouseSvg, 'Resilience-AD': resilienceadSvg, } - const genericCardSchemaHeader: GenericCardSchema = { - type: SynapseConstants.DATASET, - title: 'portalDisplayName', - subTitle: 'centerName', - description: 'summary', - secondaryLabels: [ - 'Title', - 'overallDesign', - 'PubMed', - 'Theme', - 'studies', - 'tumorType', - 'experimentalStrategy', - 'species', - 'externalLink', - 'centerName', - 'consortium', - 'grantType', - ], - } + const genericCardSchema: CardConfiguration = { type: SynapseConstants.GENERIC_CARD, genericCardSchema: { @@ -94,7 +74,12 @@ export default class CardContainerLogicDemo extends React.Component<{}, State> { sql={'SELECT * FROM syn17024173'} entityId={'syn17024173'} searchParams={{ Program: 'AMP-AD' }} - genericCardSchema={genericCardSchemaHeader} + genericCardSchema={{ + type: 'Program', + title: 'Full Name', + subTitle: 'Short Description', + icon: 'Program', + }} backgroundColor={'#5960a5'} isHeader={true} iconOptions={iconOptions} diff --git a/src/lib/containers/HeaderCard.tsx b/src/lib/containers/HeaderCard.tsx index 0c0da64e02..289d441284 100644 --- a/src/lib/containers/HeaderCard.tsx +++ b/src/lib/containers/HeaderCard.tsx @@ -29,6 +29,15 @@ const HeaderCard: React.FunctionComponent = ({ secondaryLabelLimit, isAlignToLeftNav }) => { + // update page title and description based on header card values + if (title && document.title !== title) { + document.title = title + } + const descriptionElement:Element|null = document.querySelector('meta[name="description"]') + if (descriptionElement && (description || subTitle)) { + descriptionElement.setAttribute('content', description ? description : subTitle) + } + const style: React.CSSProperties = { background: backgroundColor, }