-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added asynchronous config for settings.header to specify logo, title and favicon * refactored navigation stuff to separate folder, excluded logo and title as separate component * added Promise testcase * hide logo container if there is no logo * fixed tests and added assertions for logo and title * adjusted left header spacing for title only * added docu for configurable logo and title * added support for data:image favicons
- Loading branch information
Showing
16 changed files
with
251 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
|
|
||
|
|
||
| {#if hasLogo} | ||
| <div on:click="goTo('/')" class="fd-global-nav__logo fd-has-margin-left-none" ref:logo></div> | ||
| {/if} | ||
| <div class="fd-global-nav__product-name"> | ||
| {#if title} | ||
| <a on:click="goTo('/')">{title}</a> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <script type="text/javascript"> | ||
| import { processHeaderSettings } from './services/header.js'; | ||
| import { getConfigBooleanValue } from '../services/config.js'; | ||
|
|
||
| export default { | ||
| oncreate() { | ||
| processHeaderSettings(this); | ||
| }, | ||
| methods: { | ||
| goTo(path) { | ||
| if (getConfigBooleanValue('routing.useHashRouting')) { | ||
| window.location.hash = path; | ||
| } else { | ||
| window.location.pathname = path; | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style type="text/scss"> | ||
| @import 'node_modules/fundamental-ui/scss/components/global-nav'; | ||
| .fd-global-nav__logo { | ||
| cursor: pointer; | ||
| background-image: none; | ||
| margin-left: 0px; | ||
| } | ||
| .fd-global-nav__product-name { | ||
| color: #0a6ed1; | ||
| height: 50px; | ||
| font-size: 24px; | ||
| line-height: 1em; | ||
| padding: 13px 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { | ||
| getConfigValueAsync, | ||
| getConfigBooleanValue | ||
| } from '../../services/config.js'; | ||
|
|
||
| export const processHeaderSettings = component => { | ||
| return getConfigValueAsync('settings.header').then(header => { | ||
| if (!header) { | ||
| return; | ||
| } | ||
|
|
||
| // Set Title and Logo | ||
| if (header.title) { | ||
| component.set({ title: header.title }); | ||
| document.title = header.title; | ||
| } | ||
|
|
||
| const hasLogo = Boolean(header.logo); | ||
| component.set({ hasLogo }); | ||
| if (hasLogo) { | ||
| component.refs.logo.style.backgroundImage = 'url(' + header.logo + ')'; | ||
| } | ||
|
|
||
| // Set Favicon | ||
| if (header.favicon) { | ||
| const isInvalidFaviconFormat = | ||
| !header.favicon.split('?')[0].endsWith('.ico') && | ||
| !header.favicon.startsWith('data:image'); | ||
| if (isInvalidFaviconFormat) { | ||
| console.warn( | ||
| 'Favicon is not an .ico filetype and might get displayed wrong.' | ||
| ); | ||
| } | ||
| const link = Object.assign(document.createElement('link'), { | ||
| type: 'image/x-icon', | ||
| rel: 'shortcut icon', | ||
| href: header.favicon | ||
| }); | ||
| document.getElementsByTagName('head')[0].appendChild(link); | ||
| } | ||
| }); | ||
| }; |
2 changes: 1 addition & 1 deletion
2
core/src/services/navigation.js → core/src/navigation/services/navigation.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| const headerService = require('../src/navigation/services/header'); | ||
| const assert = require('chai').assert; | ||
| const sinon = require('sinon'); | ||
|
|
||
| describe('LogoTitle', function() { | ||
| afterEach(() => { | ||
| sinon.restore(); | ||
| }); | ||
|
|
||
| describe('processHeaderSettings()', function() { | ||
| let component; | ||
| const setHeaderSettings = headerSettings => { | ||
| window.Luigi.config = { | ||
| settings: { | ||
| header: Object.assign({}, headerSettings) | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| component = { | ||
| set: sinon.spy() | ||
| }; | ||
| }); | ||
|
|
||
| it('should not fail for undefined arguments', async () => { | ||
| window.Luigi.config = {}; | ||
| await headerService.processHeaderSettings(); | ||
| }); | ||
|
|
||
| it('should resolve title', async () => { | ||
| // given | ||
| const headerSettings = { | ||
| title: 'Luigi Demo' | ||
| }; | ||
| setHeaderSettings(headerSettings); | ||
|
|
||
| document.title = ''; | ||
|
|
||
| // when | ||
| await headerService.processHeaderSettings(component); | ||
|
|
||
| // then | ||
| assert.equal(document.title, headerSettings.title, 'document title'); | ||
| assert( | ||
| component.set.calledWith({ title: headerSettings.title }), | ||
| 'component set() title' | ||
| ); | ||
| }); | ||
|
|
||
| it('should hide logo if not defined', async () => { | ||
| setHeaderSettings({}); | ||
|
|
||
| // when | ||
| await headerService.processHeaderSettings(component); | ||
|
|
||
| // then | ||
| assert( | ||
| component.set.calledWith({ hasLogo: false }), | ||
| 'component set() hasLogo false' | ||
| ); | ||
| }); | ||
|
|
||
| it('should resolve logo and set hasLogo', async () => { | ||
| // given | ||
| const headerSettings = { | ||
| logo: 'data:image/svg+xml;base64,XXX=' | ||
| }; | ||
| setHeaderSettings(headerSettings); | ||
|
|
||
| component.refs = { | ||
| logo: { | ||
| style: { | ||
| backgroundImage: null | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| // when | ||
| await headerService.processHeaderSettings(component); | ||
|
|
||
| // then | ||
| assert.equal( | ||
| component.refs.logo.style.backgroundImage, | ||
| 'url(' + headerSettings.logo + ')', | ||
| 'backgroundImage logo' | ||
| ); | ||
| assert( | ||
| component.set.calledOnceWith({ hasLogo: true }), | ||
| 'component set() hasLogo' | ||
| ); | ||
| }); | ||
|
|
||
| it('should resolve favicon', async () => { | ||
| // given | ||
| const headerSettings = { | ||
| favicon: '/assets/favicon.ico' | ||
| }; | ||
| setHeaderSettings(headerSettings); | ||
|
|
||
| sinon.stub(document, 'createElement').returns({}); | ||
| const appendChild = sinon.spy(); | ||
| sinon.stub(document, 'getElementsByTagName').returns([{ appendChild }]); | ||
|
|
||
| const expectedLink = { | ||
| type: 'image/x-icon', | ||
| rel: 'shortcut icon', | ||
| href: headerSettings.favicon | ||
| }; | ||
|
|
||
| // when | ||
| await headerService.processHeaderSettings(component); | ||
|
|
||
| // then | ||
| assert( | ||
| document.createElement.calledOnce, | ||
| 'document.createElement() call' | ||
| ); | ||
| assert( | ||
| document.getElementsByTagName.calledOnceWith('head'), | ||
| 'document.getElementsByTagName() call' | ||
| ); | ||
| assert(appendChild.calledOnceWith(expectedLink), 'appendChild() call'); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters