From 9178d4f8bbc302e24f4e387bcd86c9ea7161e8b0 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Mon, 22 Feb 2021 16:56:29 +0200
Subject: [PATCH] Nxstage 1469 mobilemenu breadcrumbs
---
src/components.d.ts | 2 +
.../navigation/menu-item/menu-item.tsx | 17 +++++++-
src/components/navigation/menu-item/readme.md | 39 ++++++++++---------
src/components/navigation/menu/menu.tsx | 18 +++++++--
src/components/site-header/site-header.tsx | 4 ++
5 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 41ef26ca..74e86e2b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -550,6 +550,7 @@ export namespace Components {
isHeading: boolean;
isParent: boolean;
label: string;
+ menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative: boolean;
menuLinkId: string;
@@ -1879,6 +1880,7 @@ declare namespace LocalJSX {
isHeading?: boolean;
isParent?: boolean;
label?: string;
+ menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative?: boolean;
menuLinkId?: string;
diff --git a/src/components/navigation/menu-item/menu-item.tsx b/src/components/navigation/menu-item/menu-item.tsx
index 016fcb8b..dc1b8934 100644
--- a/src/components/navigation/menu-item/menu-item.tsx
+++ b/src/components/navigation/menu-item/menu-item.tsx
@@ -22,6 +22,7 @@ export class MenuItem {
@Prop() menuLinkId: string = '';
@Prop() menuType: MenuType = MenuType.desktop;
@Prop() menuButtonSubmenuExpand?: string = '';
+ @Prop() menuButtonBreadcrumbMain?: string;
@Prop({mutable: true}) ariaExpanded: boolean = false;
@Prop({mutable: true, reflect: true}) depth: number = 0;
@Prop({mutable: true}) hasChildren: boolean = null;
@@ -38,10 +39,18 @@ export class MenuItem {
triggerType: 'add',
});
const currentParent = this.el.parentNode;
+
+ let parentLabel = currentParent.parentElement.getAttribute('label')
+ ? currentParent.parentElement.getAttribute('label')
+ : this.menuButtonBreadcrumbMain;
+
+ let isMainMenu = parentLabel == this.menuButtonBreadcrumbMain;
+
this.addBreadcrumb.emit({
url: this.url,
- label: currentParent.parentElement.getAttribute('label'),
+ label: parentLabel,
bid: this.menuLinkId,
+ isMainMenu: isMainMenu,
});
}
@@ -54,9 +63,13 @@ export class MenuItem {
// Notify breadcrumbs if item is in active trail.
if (this.inActiveTrail && !this.isActive) {
const currentParent = this.el.parentNode;
+
+ let parentLabel = currentParent.parentElement.getAttribute('label')
+ ? currentParent.parentElement.getAttribute('label')
+ : this.menuButtonBreadcrumbMain;
this.addBreadcrumb.emit({
url: this.url,
- label: currentParent.parentElement.getAttribute('label'),
+ label: parentLabel,
bid: this.menuLinkId,
});
}
diff --git a/src/components/navigation/menu-item/readme.md b/src/components/navigation/menu-item/readme.md
index aa75cc38..415507a2 100644
--- a/src/components/navigation/menu-item/readme.md
+++ b/src/components/navigation/menu-item/readme.md
@@ -4,25 +4,26 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
-| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
-| `depth` | `depth` | | `number` | `0` |
-| `hasChildren` | `has-children` | | `boolean` | `null` |
-| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
-| `isActive` | `is-active` | | `boolean` | `false` |
-| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
-| `isDemo` | `is-demo` | | `boolean` | `false` |
-| `isHeading` | `is-heading` | | `boolean` | `false` |
-| `isParent` | `is-parent` | | `boolean` | `false` |
-| `label` | `label` | | `string` | `''` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
-| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
-| `menuLinkId` | `menu-link-id` | | `string` | `''` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
-| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
-| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
-| `url` | `url` | | `string` | `''` |
+| Property | Attribute | Description | Type | Default |
+| -------------------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
+| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
+| `depth` | `depth` | | `number` | `0` |
+| `hasChildren` | `has-children` | | `boolean` | `null` |
+| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
+| `isActive` | `is-active` | | `boolean` | `false` |
+| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
+| `isDemo` | `is-demo` | | `boolean` | `false` |
+| `isHeading` | `is-heading` | | `boolean` | `false` |
+| `isParent` | `is-parent` | | `boolean` | `false` |
+| `label` | `label` | | `string` | `''` |
+| `menuButtonBreadcrumbMain` | `menu-button-breadcrumb-main` | | `string` | `undefined` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
+| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
+| `menuLinkId` | `menu-link-id` | | `string` | `''` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
+| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
+| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
+| `url` | `url` | | `string` | `''` |
## Events
diff --git a/src/components/navigation/menu/menu.tsx b/src/components/navigation/menu/menu.tsx
index 0fb98ff9..2293aaf4 100644
--- a/src/components/navigation/menu/menu.tsx
+++ b/src/components/navigation/menu/menu.tsx
@@ -34,6 +34,7 @@ export class Menu {
return e.bid;
})
.indexOf(data.detail.bid);
+
breadcrumbs.length = currentBreadcrumb;
for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
@@ -64,6 +65,18 @@ export class Menu {
// Listener for adding a breadcrumb to mobile menu breadcrumbs.
@Listen('addBreadcrumb') addBreadcrumb(event) {
+ //console.log('Adding: ' + this.menuButtonBreadcrumbMain + ' ' + event. detail.url + ' ' + event.detail.label + ' ' + event.detail.isMainMenu);
+ /* if (this.breadcrumbs.length == 0 && !event.detail.isMainMenu) {
+ // add Main Menu
+ this.breadcrumbs = [
+ ...this.breadcrumbs,
+ {
+ label: this.menuButtonBreadcrumbMain,
+ bid: event.detail.bid,
+ url: this.logoUrl,
+ },
+ ];
+ } */
this.breadcrumbs = [
...this.breadcrumbs,
{
@@ -147,13 +160,12 @@ export class Menu {
<hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
{this.breadcrumbs.length ? (
[
- this.breadcrumbs.map((breadcrumb, index) => {
- let current_label = index === 0 ? this.menuButtonBreadcrumbMain : breadcrumb.label;
+ this.breadcrumbs.map((breadcrumb) => {
return (
<hy-menu-mobile-breadcrumb
label-back={this.menuButtonBreadcrumbReturn}
label-front-page={this.labelFrontPage}
- label={current_label}
+ label={breadcrumb.label}
bid={breadcrumb.bid}
/>
);
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 50c8d71e..85b0dab7 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -96,6 +96,10 @@ export class SiteHeader {
this.menuLabels = labels.menu_labels;
this.languageLabels = labels.language_labels;
this.searchLabels = labels.search_labels;
+
+ this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-logourl', this.logoUrl);
}
// Check for the donation link information and set it to variables accordingly.
--
GitLab