feat: Initial implementation

.gitignore

@@ -0,0 +1,5 @@
+*.tgz
+node_modules
+coverage
+.nyc_output
+package

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+
+node_js:
+  - 12
+
+addons:
+  chrome: stable
+  firefox: latest

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 CFWare, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,58 @@
+# @cfware/nav-menu
+
+[![Travis CI][travis-image]][travis-url]
+[![Greenkeeper badge][gk-image]](https://greenkeeper.io/)
+[![NPM Version][npm-image]][npm-url]
+[![NPM Downloads][downloads-image]][downloads-url]
+[![MIT][license-image]](LICENSE)
+
+Navigation menu element
+
+
+### Install @cfware/nav-menu
+
+```sh
+npm i @cfware/nav-menu
+```
+
+
+## Usage
+
+Import to your application:
+```js
+import '@cfware/nav-menu';
+```
+
+Use to create a navigation element:
+```html
+<style>
+	nav-section {
+		--expander-font-family: 'Font Family to use when rendering  and ';
+	}
+</style>
+<nav-menu>
+	<nav-section title="General">
+		<nav-item title="Welcome"></nav-item>
+		<nav-item href=software title="Software"></nav-item>
+	</nav-section>
+</nav-menu>
+```
+
+
+## Running tests
+
+Testing is provided by ava and xo.
+
+```sh
+npm install
+npm test
+```
+
+[npm-image]: https://img.shields.io/npm/v/@cfware/nav-menu.svg
+[npm-url]: https://npmjs.org/package/@cfware/nav-menu
+[travis-image]: https://travis-ci.org/cfware/nav-menu.svg?branch=master
+[travis-url]: https://travis-ci.org/cfware/nav-menu
+[gk-image]: https://badges.greenkeeper.io/cfware/nav-menu.svg
+[downloads-image]: https://img.shields.io/npm/dm/@cfware/nav-menu.svg
+[downloads-url]: https://npmjs.org/package/@cfware/nav-menu
+[license-image]: https://img.shields.io/npm/l/@cfware/nav-menu.svg

nav-item.js

@@ -0,0 +1,63 @@
+import {ShadowElement, html} from '@cfware/shadow-element';
+
+class NavItem extends ShadowElement {
+	constructor() {
+		super();
+
+		const observer = new MutationObserver(() => this.dispatchEvent(new Event('hiddenchange')));
+		observer.observe(this, {
+			attributes: true,
+			attributeFilter: ['hidden']
+		});
+	}
+
+	get pathname() {
+		return new URL(this.href, document.baseURI).pathname;
+	}
+
+	get template() {
+		return html`
+			<style>
+				a {
+					display: block;
+					position: relative;
+					margin-left: .85rem;
+					padding: .83rem .95rem .83rem .85rem;
+					color: #000a;
+					text-decoration: none;
+					line-height: 1;
+					border-left: .2rem solid transparent;
+				}
+
+				a:hover {
+					color: #005d90;
+				}
+
+				a:focus {
+					background-color: #8881;
+				}
+
+				a:active {
+					background-color: #0001;
+				}
+
+				:host(:not(:first-child)) a {
+					border-top: 1px solid #8882;
+				}
+
+				:host([active]) a {
+					border-left-color: unset;
+				}
+			</style>
+			<a href=${this.href}>${this.title}</a>
+		`;
+	}
+}
+
+NavItem.define('nav-item', {
+	stringProps: {
+		title: '',
+		href: '.'
+	},
+	booleanProps: ['active']
+});

nav-menu.js

@@ -0,0 +1,49 @@
+import {ShadowElement, html} from '@cfware/shadow-element';
+import './nav-section';
+import './nav-item';
+
+class NavMenu extends ShadowElement {
+	update() {
+		const {pathname} = location;
+		const items = [...this.querySelectorAll('nav-item')];
+		const matches = items
+			.filter(item => pathname.startsWith(item.pathname))
+			.sort((a, b) => b.pathname.length - a.pathname.length);
+
+		items.forEach(item => {
+			item.active = item === matches[0];
+		});
+
+		const sections = [...this.querySelectorAll('nav-section:not([hidden])')];
+		if (sections.length === 0) {
+			return;
+		}
+
+		const activeSections = sections.filter(section => {
+			if (!section.active) {
+				section.active = section.querySelectorAll('nav-item[active]:not([hidden])').length !== 0;
+			}
+
+			return section.active;
+		});
+
+		if (matches.length === 0 || activeSections.length === 0) {
+			sections[0].active = true;
+		}
+	}
+
+	get template() {
+		return html`
+			<style>
+				:host {
+					width: 15rem;
+					font-weight: 400;
+					-webkit-user-select: none;
+				}
+			</style>
+			<slot />
+		`;
+	}
+}
+
+NavMenu.define('nav-menu');

nav-section.js

@@ -0,0 +1,62 @@
+import {ShadowElement, html} from '@cfware/shadow-element';
+
+class NavSection extends ShadowElement {
+	constructor() {
+		super();
+
+		this.addEventListener('hiddenchange', () => this._updateHidden(), true);
+	}
+
+	_updateHidden() {
+		this.hidden = !this.querySelector('*:not([hidden])');
+	}
+
+	get template() {
+		return html`
+			<style>
+				:host {
+					background: #00000005;
+					white-space: nowrap;
+				}
+
+				.title {
+					background-color: #ddd;
+					color: #000;
+					cursor: pointer;
+					margin: 0;
+					padding: .75rem 1rem;
+				}
+
+				:host(:not(:first-child)) .title {
+					border-top: 1px solid #0001;
+				}
+
+				.title::before {
+					display: inline-block;
+					font-family: var(--expander-font-family);
+					content: '';
+					width: 1.25rem;
+					text-align: center;
+					margin-right: 0.5rem;
+				}
+
+				:host([active]) .title::before {
+					content: '';
+				}
+
+				:host(:not([active])) ::slotted(nav-item) {
+					display: none;
+				}
+			</style>
+			<div class="title" onclick=${() => this.toggleAttribute('active')}>${this.title}</div>
+			<slot onslotchange=${() => this._updateHidden()} />
+		`;
+	}
+}
+
+NavSection.define('nav-section', {
+	stringProps: {
+		title: ''
+	},
+	booleanProps: ['active']
+});

nyc.config.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = require('@cfware/nyc')
+	.fullCoverage()
+	.settings;

package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@cfware/nav-menu",
+	"version": "0.1.0",
+	"description": "Navigation menu element",
+	"main": "nav-menu.js",
+	"scripts": {
+		"release": "standard-version --sign",
+		"test": "xo && nyc ava -v"
+	},
+	"author": "Corey Farrell",
+	"license": "MIT",
+	"files": [
+		"nav-*.js"
+	],
+	"keywords": [
+		"custom-elements",
+		"navigation",
+		"menu",
+		"html"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/cfware/nav-menu.git"
+	},
+	"bugs": {
+		"url": "https://github.com/cfware/nav-menu/issues"
+	},
+	"homepage": "https://github.com/cfware/nav-menu#readme",
+	"dependencies": {
+		"@cfware/shadow-element": "^0.7.0"
+	},
+	"devDependencies": {
+		"@cfware/ava-selenium-manager": "^0.2.1",
+		"@cfware/eslint-config-browser": "^0.3.0",
+		"@cfware/fastify-test-helper": "^0.2.3",
+		"@cfware/nyc": "^0.4.2",
+		"@fortawesome/fontawesome-free": "=5.8.2",
+		"ava": "^1.4.1",
+		"chromedriver": "^74.0.0",
+		"geckodriver": "^1.16.2",
+		"nyc": "^14.1.0",
+		"standard-version": "^6.0.1",
+		"xo": "^0.24.0"
+	},
+	"xo": {
+		"overrides": [
+			{
+				"files": [
+					"nav-*.js"
+				],
+				"extends": "@cfware/eslint-config-browser"
+			}
+		]
+	}
+}

test/chrome.js

@@ -0,0 +1,4 @@
+import {builderChrome} from '@cfware/ava-selenium-manager';
+import {setupTesting} from './helpers/setup-testing';
+
+setupTesting(builderChrome);

test/firefox.js

@@ -0,0 +1,4 @@
+import {builderFirefox} from '@cfware/ava-selenium-manager';
+import {setupTesting} from './helpers/setup-testing';
+
+setupTesting(builderFirefox);

test/fixtures/fontawesome.css

@@ -0,0 +1,34 @@
+@import '/node_modules/@fortawesome/fontawesome-free/css/solid.css';
+
+@font-face {
+	font-family: 'global-font';
+	font-style: normal;
+	font-weight: 400;
+	font-display: auto;
+	src: url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot");
+	src: url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"), url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff") format("woff"), url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype"), url("/node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg#fontawesome") format("svg");
+}
+
+/* Using fontawesome globally is an attempt to normalize font on different platforms */
+* {
+	font-family: 'global-font';
+}
+
+html, body {
+	display: inline-block!important;
+	margin: 0;
+	width: -moz-fit-content;
+}
+
+div {
+	height: 400px;
+	width: 40rem;
+	display: flex;
+	background: #eee;
+	display: flex;
+	flex-direction: column;
+}
+
+nav-section {
+	--expander-font-family: 'Font Awesome 5 Free';
+}

test/fixtures/nav-empty.html

@@ -0,0 +1,16 @@
+<html>
+	<head>
+		<title>&lt;nav-menu&gt; empty test</title>
+		<script type="module" src="nav-menu.js"></script>
+		<link rel="stylesheet" href="fontawesome.css">
+	</head>
+	<body>
+		<div id="container">
+			<nav-menu id="test">
+				<nav-section title="">
+					<nav-item title="" hidden></nav-item>
+				</nav-section>
+			</nav-menu>
+		</div>
+	</body>
+</html>