Skip to content
Snippets Groups Projects
Commit 82fc9d79 authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-1469-mobilemenu-breadcrumbs' into 'development' 

Nxstage 1469 mobilemenu breadcrumbs

See merge request julkiset-sivut/design-system-lib!149
parents 1425b408 9178d4f8
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 @ 82fc9d79
......@@ -563,6 +563,7 @@ export namespace Components {
isHeading: boolean;
isParent: boolean;
label: string;
menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative: boolean;
menuLinkId: string;
......@@ -1916,6 +1917,7 @@ declare namespace LocalJSX {
isHeading?: boolean;
isParent?: boolean;
label?: string;
menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative?: boolean;
menuLinkId?: string;
......
src/components/navigation/menu-item/menu-item.tsx
+ 15
− 2
View file @ 82fc9d79
......@@ -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,
});
}
......
src/components/navigation/menu-item/readme.md
+ 20
− 19
View file @ 82fc9d79
......@@ -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
......
src/components/navigation/menu/menu.tsx
+ 15
− 3
View file @ 82fc9d79
......@@ -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}
/>
);
......
src/components/site-header/site-header.tsx
+ 4
− 0
View file @ 82fc9d79
......@@ -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.
......
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