Skip to content
Snippets Groups Projects
Commit 9178d4f8 authored by Ekaterina Kondareva's avatar Ekaterina Kondareva Committed by Tuukka Turu
Browse files

Nxstage 1469 mobilemenu breadcrumbs

parent d52d444f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components.d.ts
+ 2
− 0
View file @ 9178d4f8
...@@ -550,6 +550,7 @@ export namespace Components { ...@@ -550,6 +550,7 @@ export namespace Components {
isHeading: boolean; isHeading: boolean;
isParent: boolean; isParent: boolean;
label: string; label: string;
menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string; menuButtonSubmenuExpand?: string;
menuItemAlternative: boolean; menuItemAlternative: boolean;
menuLinkId: string; menuLinkId: string;
...@@ -1879,6 +1880,7 @@ declare namespace LocalJSX { ...@@ -1879,6 +1880,7 @@ declare namespace LocalJSX {
isHeading?: boolean; isHeading?: boolean;
isParent?: boolean; isParent?: boolean;
label?: string; label?: string;
menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string; menuButtonSubmenuExpand?: string;
menuItemAlternative?: boolean; menuItemAlternative?: boolean;
menuLinkId?: string; menuLinkId?: string;
......
src/components/navigation/menu-item/menu-item.tsx
+ 15
− 2
View file @ 9178d4f8
...@@ -22,6 +22,7 @@ export class MenuItem { ...@@ -22,6 +22,7 @@ export class MenuItem {
@Prop() menuLinkId: string = ''; @Prop() menuLinkId: string = '';
@Prop() menuType: MenuType = MenuType.desktop; @Prop() menuType: MenuType = MenuType.desktop;
@Prop() menuButtonSubmenuExpand?: string = ''; @Prop() menuButtonSubmenuExpand?: string = '';
@Prop() menuButtonBreadcrumbMain?: string;
@Prop({mutable: true}) ariaExpanded: boolean = false; @Prop({mutable: true}) ariaExpanded: boolean = false;
@Prop({mutable: true, reflect: true}) depth: number = 0; @Prop({mutable: true, reflect: true}) depth: number = 0;
@Prop({mutable: true}) hasChildren: boolean = null; @Prop({mutable: true}) hasChildren: boolean = null;
...@@ -38,10 +39,18 @@ export class MenuItem { ...@@ -38,10 +39,18 @@ export class MenuItem {
triggerType: 'add', triggerType: 'add',
}); });
const currentParent = this.el.parentNode; 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({ this.addBreadcrumb.emit({
url: this.url, url: this.url,
label: currentParent.parentElement.getAttribute('label'), label: parentLabel,
bid: this.menuLinkId, bid: this.menuLinkId,
isMainMenu: isMainMenu,
}); });
} }
...@@ -54,9 +63,13 @@ export class MenuItem { ...@@ -54,9 +63,13 @@ export class MenuItem {
// Notify breadcrumbs if item is in active trail. // Notify breadcrumbs if item is in active trail.
if (this.inActiveTrail && !this.isActive) { if (this.inActiveTrail && !this.isActive) {
const currentParent = this.el.parentNode; const currentParent = this.el.parentNode;
let parentLabel = currentParent.parentElement.getAttribute('label')
? currentParent.parentElement.getAttribute('label')
: this.menuButtonBreadcrumbMain;
this.addBreadcrumb.emit({ this.addBreadcrumb.emit({
url: this.url, url: this.url,
label: currentParent.parentElement.getAttribute('label'), label: parentLabel,
bid: this.menuLinkId, bid: this.menuLinkId,
}); });
} }
......
src/components/navigation/menu-item/readme.md
+ 20
− 19
View file @ 9178d4f8
...@@ -4,25 +4,26 @@ ...@@ -4,25 +4,26 @@
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ | | -------------------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` | | `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
| `depth` | `depth` | | `number` | `0` | | `depth` | `depth` | | `number` | `0` |
| `hasChildren` | `has-children` | | `boolean` | `null` | | `hasChildren` | `has-children` | | `boolean` | `null` |
| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` | | `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
| `isActive` | `is-active` | | `boolean` | `false` | | `isActive` | `is-active` | | `boolean` | `false` |
| `isActiveChild` | `is-active-child` | | `boolean` | `false` | | `isActiveChild` | `is-active-child` | | `boolean` | `false` |
| `isDemo` | `is-demo` | | `boolean` | `false` | | `isDemo` | `is-demo` | | `boolean` | `false` |
| `isHeading` | `is-heading` | | `boolean` | `false` | | `isHeading` | `is-heading` | | `boolean` | `false` |
| `isParent` | `is-parent` | | `boolean` | `false` | | `isParent` | `is-parent` | | `boolean` | `false` |
| `label` | `label` | | `string` | `''` | | `label` | `label` | | `string` | `''` |
| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` | | `menuButtonBreadcrumbMain` | `menu-button-breadcrumb-main` | | `string` | `undefined` |
| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` | | `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
| `menuLinkId` | `menu-link-id` | | `string` | `''` | | `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` | | `menuLinkId` | `menu-link-id` | | `string` | `''` |
| `parentAsHeading` | `parent-as-heading` | | `string` | `''` | | `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
| `parentExpanded` | `parent-expanded` | | `boolean` | `false` | | `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
| `url` | `url` | | `string` | `''` | | `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
| `url` | `url` | | `string` | `''` |
## Events ## Events
......
src/components/navigation/menu/menu.tsx
+ 15
− 3
View file @ 9178d4f8
...@@ -34,6 +34,7 @@ export class Menu { ...@@ -34,6 +34,7 @@ export class Menu {
return e.bid; return e.bid;
}) })
.indexOf(data.detail.bid); .indexOf(data.detail.bid);
breadcrumbs.length = currentBreadcrumb; breadcrumbs.length = currentBreadcrumb;
for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) { for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
...@@ -64,6 +65,18 @@ export class Menu { ...@@ -64,6 +65,18 @@ export class Menu {
// Listener for adding a breadcrumb to mobile menu breadcrumbs. // Listener for adding a breadcrumb to mobile menu breadcrumbs.
@Listen('addBreadcrumb') addBreadcrumb(event) { @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 = [
...this.breadcrumbs, ...this.breadcrumbs,
{ {
...@@ -147,13 +160,12 @@ export class Menu { ...@@ -147,13 +160,12 @@ export class Menu {
<hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} /> <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
{this.breadcrumbs.length ? ( {this.breadcrumbs.length ? (
[ [
this.breadcrumbs.map((breadcrumb, index) => { this.breadcrumbs.map((breadcrumb) => {
let current_label = index === 0 ? this.menuButtonBreadcrumbMain : breadcrumb.label;
return ( return (
<hy-menu-mobile-breadcrumb <hy-menu-mobile-breadcrumb
label-back={this.menuButtonBreadcrumbReturn} label-back={this.menuButtonBreadcrumbReturn}
label-front-page={this.labelFrontPage} label-front-page={this.labelFrontPage}
label={current_label} label={breadcrumb.label}
bid={breadcrumb.bid} bid={breadcrumb.bid}
/> />
); );
......
src/components/site-header/site-header.tsx
+ 4
− 0
View file @ 9178d4f8
...@@ -96,6 +96,10 @@ export class SiteHeader { ...@@ -96,6 +96,10 @@ export class SiteHeader {
this.menuLabels = labels.menu_labels; this.menuLabels = labels.menu_labels;
this.languageLabels = labels.language_labels; this.languageLabels = labels.language_labels;
this.searchLabels = labels.search_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. // Check for the donation link information and set it to variables accordingly.
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment