From 7f5c1a3bf1a7335e964dfbc32a1fe18533c83c08 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 13:47:05 -0800 Subject: [PATCH 01/11] Match a url that has navigated to a location in page --- apps/fabric-website/src/components/Nav/Nav.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 1ca61b4a5c9291..f8cac419c4f1d1 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -69,7 +69,7 @@ export class Nav extends React.Component { const links: React.ReactElement<{}>[] = pages .filter(page => !page.hasOwnProperty('isHiddenFromMainNav')) .map( - (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex) + (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex) ); return ( @@ -112,6 +112,16 @@ function _isPageActive(page: INavPage): boolean { return _urlResolver.href === target; } + if (location.href) { + // Match a url that has navigated to a location in page. + let path = location.href; + const hashIndex = path.lastIndexOf('#'); + + if (hashIndex > 0) { + path = path.substr(0, hashIndex); + } + return path === target; + } return false; } From 5245886fd1dda116c2cebf78df43e7127a221e94 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 13:48:01 -0800 Subject: [PATCH 02/11] Modified page paths --- .../src/components/PageHeader/PageHeader.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index 51833d676efc57..51e7d99edd68d9 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -102,7 +102,7 @@ export class PageHeader extends BaseComponent { links.map((link, linkIndex) => (
  • - +
    • )) } @@ -143,4 +143,15 @@ export class PageHeader extends BaseComponent 0) { + path = path.substr(0, hashIndex); + } + + return path + '#' + link.location; + } } From 755276d16204a92cce8a4a4cb63de1c9e71e5616 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 14:02:38 -0800 Subject: [PATCH 03/11] Removed baseRoute and added comment --- apps/fabric-website/src/components/PageHeader/PageHeader.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index 51e7d99edd68d9..b28da9c6515eef 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utilities'; import * as stylesImport from './PageHeader.module.scss'; const styles: any = stylesImport; -import { getPageRouteFromState } from '../../utilities/pageroute'; import AttachedScrollUtility from '../../utilities/AttachedScrollUtility'; import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; @@ -84,9 +83,6 @@ export class PageHeader extends BaseComponent 0) { + // This makes sure that location hash changes don't append path = path.substr(0, hashIndex); } From 8a086bba26deb0098c465bbe3713a47a7c7ae254 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 14:17:03 -0800 Subject: [PATCH 04/11] Repurposing pageroute utility --- apps/fabric-website/src/components/Nav/Nav.tsx | 6 ++---- .../src/components/PageHeader/PageHeader.tsx | 9 +++------ apps/fabric-website/src/utilities/pageroute.ts | 10 +++++++--- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index f8cac419c4f1d1..3cbb4bc97a5465 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { css } from 'office-ui-fabric-react/lib/Utilities'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; +import { getPathMinusLastHash } from '../../utilities/pageroute'; import * as stylesImport from './Nav.module.scss'; const styles: any = stylesImport; import { @@ -115,11 +116,8 @@ function _isPageActive(page: INavPage): boolean { if (location.href) { // Match a url that has navigated to a location in page. let path = location.href; - const hashIndex = path.lastIndexOf('#'); + path = getPathMinusLastHash(path); - if (hashIndex > 0) { - path = path.substr(0, hashIndex); - } return path === target; } return false; diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index b28da9c6515eef..bafc2d4ce182d4 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -3,6 +3,7 @@ import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utili import * as stylesImport from './PageHeader.module.scss'; const styles: any = stylesImport; import AttachedScrollUtility from '../../utilities/AttachedScrollUtility'; +import { getPathMinusLastHash } from '../../utilities/pageroute'; import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; @@ -142,12 +143,8 @@ export class PageHeader extends BaseComponent 0) { - // This makes sure that location hash changes don't append - path = path.substr(0, hashIndex); - } + // This makes sure that location hash changes don't append + path = getPathMinusLastHash(path); return path + '#' + link.location; } diff --git a/apps/fabric-website/src/utilities/pageroute.ts b/apps/fabric-website/src/utilities/pageroute.ts index 62c04a1498bfd8..9cba1c26732788 100644 --- a/apps/fabric-website/src/utilities/pageroute.ts +++ b/apps/fabric-website/src/utilities/pageroute.ts @@ -1,7 +1,11 @@ /* - Retreive the route URL for a page in a group from the the AppState + Retreive the route URL for a page without the string after the last hash. */ -export function getPageRouteFromState(pageName: string): string { - return ''; +export function getPathMinusLastHash(path: string): string { + const hashIndex = path.lastIndexOf('#') + if (hashIndex > 0) { + path = path.substr(0, hashIndex); + } + return path; } \ No newline at end of file From e976609b8ab088935f9f25c438627294e7a6c3b3 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 14:28:45 -0800 Subject: [PATCH 05/11] Revert "Repurposing pageroute utility" This reverts commit 8a086bba26deb0098c465bbe3713a47a7c7ae254. --- apps/fabric-website/src/components/Nav/Nav.tsx | 6 ++++-- .../src/components/PageHeader/PageHeader.tsx | 9 ++++++--- apps/fabric-website/src/utilities/pageroute.ts | 10 +++------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 3cbb4bc97a5465..f8cac419c4f1d1 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { css } from 'office-ui-fabric-react/lib/Utilities'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; -import { getPathMinusLastHash } from '../../utilities/pageroute'; import * as stylesImport from './Nav.module.scss'; const styles: any = stylesImport; import { @@ -116,8 +115,11 @@ function _isPageActive(page: INavPage): boolean { if (location.href) { // Match a url that has navigated to a location in page. let path = location.href; - path = getPathMinusLastHash(path); + const hashIndex = path.lastIndexOf('#'); + if (hashIndex > 0) { + path = path.substr(0, hashIndex); + } return path === target; } return false; diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index bafc2d4ce182d4..b28da9c6515eef 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -3,7 +3,6 @@ import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utili import * as stylesImport from './PageHeader.module.scss'; const styles: any = stylesImport; import AttachedScrollUtility from '../../utilities/AttachedScrollUtility'; -import { getPathMinusLastHash } from '../../utilities/pageroute'; import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; @@ -143,8 +142,12 @@ export class PageHeader extends BaseComponent 0) { + // This makes sure that location hash changes don't append + path = path.substr(0, hashIndex); + } return path + '#' + link.location; } diff --git a/apps/fabric-website/src/utilities/pageroute.ts b/apps/fabric-website/src/utilities/pageroute.ts index 9cba1c26732788..62c04a1498bfd8 100644 --- a/apps/fabric-website/src/utilities/pageroute.ts +++ b/apps/fabric-website/src/utilities/pageroute.ts @@ -1,11 +1,7 @@ /* - Retreive the route URL for a page without the string after the last hash. + Retreive the route URL for a page in a group from the the AppState */ -export function getPathMinusLastHash(path: string): string { - const hashIndex = path.lastIndexOf('#') - if (hashIndex > 0) { - path = path.substr(0, hashIndex); - } - return path; +export function getPageRouteFromState(pageName: string): string { + return ''; } \ No newline at end of file From d258ef81aaef79ef704f6be0be4e37e16da48d7c Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 14:17:03 -0800 Subject: [PATCH 06/11] Repurposing pageroute utility --- apps/fabric-website/src/components/Nav/Nav.tsx | 6 ++---- .../src/components/PageHeader/PageHeader.tsx | 9 +++------ apps/fabric-website/src/utilities/pageroute.ts | 10 +++++++--- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index f8cac419c4f1d1..3cbb4bc97a5465 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { css } from 'office-ui-fabric-react/lib/Utilities'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; +import { getPathMinusLastHash } from '../../utilities/pageroute'; import * as stylesImport from './Nav.module.scss'; const styles: any = stylesImport; import { @@ -115,11 +116,8 @@ function _isPageActive(page: INavPage): boolean { if (location.href) { // Match a url that has navigated to a location in page. let path = location.href; - const hashIndex = path.lastIndexOf('#'); + path = getPathMinusLastHash(path); - if (hashIndex > 0) { - path = path.substr(0, hashIndex); - } return path === target; } return false; diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index b28da9c6515eef..bafc2d4ce182d4 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -3,6 +3,7 @@ import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utili import * as stylesImport from './PageHeader.module.scss'; const styles: any = stylesImport; import AttachedScrollUtility from '../../utilities/AttachedScrollUtility'; +import { getPathMinusLastHash } from '../../utilities/pageroute'; import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; @@ -142,12 +143,8 @@ export class PageHeader extends BaseComponent 0) { - // This makes sure that location hash changes don't append - path = path.substr(0, hashIndex); - } + // This makes sure that location hash changes don't append + path = getPathMinusLastHash(path); return path + '#' + link.location; } diff --git a/apps/fabric-website/src/utilities/pageroute.ts b/apps/fabric-website/src/utilities/pageroute.ts index 62c04a1498bfd8..9cba1c26732788 100644 --- a/apps/fabric-website/src/utilities/pageroute.ts +++ b/apps/fabric-website/src/utilities/pageroute.ts @@ -1,7 +1,11 @@ /* - Retreive the route URL for a page in a group from the the AppState + Retreive the route URL for a page without the string after the last hash. */ -export function getPageRouteFromState(pageName: string): string { - return ''; +export function getPathMinusLastHash(path: string): string { + const hashIndex = path.lastIndexOf('#') + if (hashIndex > 0) { + path = path.substr(0, hashIndex); + } + return path; } \ No newline at end of file From 218e87e3d2b490d89ccf8cb4632010a4a79349e5 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 14:57:30 -0800 Subject: [PATCH 07/11] Code cleanup --- .../fabric-website/src/components/Nav/Nav.tsx | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 3cbb4bc97a5465..9fc145881ba302 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -92,33 +92,22 @@ function _isPageActive(page: INavPage): boolean { } _urlResolver.href = page.url || ''; const target: string = _urlResolver.href; + let path = location.href; if (location.protocol + '//' + location.host + location.pathname === target) { return true; } - if (location.href === target) { + if (path === target) { return true; } - if (location.hash) { - // Match the hash to the url. - if (location.hash === page.url) { - return true; - } - - // Match a rebased url. (e.g. #foo becomes http://hostname/foo) - _urlResolver.href = location.hash.substring(1); - - return _urlResolver.href === target; - } - - if (location.href) { + path = getPathMinusLastHash(path); + if (path === target) { // Match a url that has navigated to a location in page. - let path = location.href; - path = getPathMinusLastHash(path); - return path === target; + + return true; } return false; } From 3f9670de5426276e255374adf1bb3928a4d1017a Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 15:08:11 -0800 Subject: [PATCH 08/11] Added change file --- .../in-page-nav-bug_2018-03-06-23-06.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json diff --git a/common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json b/common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json new file mode 100644 index 00000000000000..f6ee0714b27598 --- /dev/null +++ b/common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/fabric-website", + "comment": "Fixed in page nav so that the left nav links will display properly.", + "type": "patch" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file From 01331c5ebef191af73beaf3717afbebae83fadec Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 6 Mar 2018 15:16:23 -0800 Subject: [PATCH 09/11] Removed spaces --- apps/fabric-website/src/components/Nav/Nav.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 9fc145881ba302..97d788142bb317 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -105,8 +105,6 @@ function _isPageActive(page: INavPage): boolean { path = getPathMinusLastHash(path); if (path === target) { // Match a url that has navigated to a location in page. - - return true; } return false; From f80d5736e5995d7cd53b1cfe6742bc1c7ae1194a Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 7 Mar 2018 09:19:22 -0800 Subject: [PATCH 10/11] Counting hashes --- apps/fabric-website/src/components/Nav/Nav.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 97d788142bb317..d972b4ed9d3768 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -98,15 +98,15 @@ function _isPageActive(page: INavPage): boolean { return true; } - if (path === target) { - return true; + const hashCount = path.split('#').length - 1 + if (hashCount > 1) { + path = getPathMinusLastHash(path); } - path = getPathMinusLastHash(path); if (path === target) { - // Match a url that has navigated to a location in page. return true; } + return false; } From c316ff82654746f45b35639cee3603dc494ce501 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 7 Mar 2018 09:35:18 -0800 Subject: [PATCH 11/11] Semicolons --- apps/fabric-website/src/components/Nav/Nav.tsx | 2 +- apps/fabric-website/src/utilities/pageroute.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index d972b4ed9d3768..df836511d6eabd 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -98,7 +98,7 @@ function _isPageActive(page: INavPage): boolean { return true; } - const hashCount = path.split('#').length - 1 + const hashCount = path.split('#').length - 1; if (hashCount > 1) { path = getPathMinusLastHash(path); } diff --git a/apps/fabric-website/src/utilities/pageroute.ts b/apps/fabric-website/src/utilities/pageroute.ts index 9cba1c26732788..1e19957463ec66 100644 --- a/apps/fabric-website/src/utilities/pageroute.ts +++ b/apps/fabric-website/src/utilities/pageroute.ts @@ -3,7 +3,7 @@ Retreive the route URL for a page without the string after the last hash. */ export function getPathMinusLastHash(path: string): string { - const hashIndex = path.lastIndexOf('#') + const hashIndex = path.lastIndexOf('#'); if (hashIndex > 0) { path = path.substr(0, hashIndex); }