Skip to content
Routing-like element for the modern Web
TypeScript JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.eslintrc.json
.gitignore
.travis.yml
CHANGELOG.md
README.md
bower.json
karma.bs.config.js
karma.conf.js
netlify.toml
package-lock.json
package.json
prettier.config.js
tsconfig.json
webpack.config.js

README.md

ld-navigation Build Status codecov

A set of Web Components for data-driven Linked Data REST client in the browser.

With ld-navigation you let actual Linked Data be the router of your application.

You then simply GET and decide what to display based on the data returned. No more client-side routing.

<ld-navigator>

Control current resource in relation to document path Maintain browser history with HTML history API Set up base resource URL and base client path to tweak routing

<ld-link>

Initiate transition between application states

Demos

Demos and sort-of documentation.

ld-navigation also plays nice with location.hash history.

Installation

Run yarn add ld-navigation

In your code

// main element, required
import 'ld-navigation/ld-navigator'
// optionally, to wrap links
import 'ld-navigation/ld-link'
// optionally, to initiate navigation manually
import fireNavigation from 'ld-navigation/fireNavigation'

No external dependencies

Usage

Let's assume that:

  • Your website is at http://www.my.app/.
  • Your Linked Data API is at http://api.my.app/.
<!-- navigator exposes a resourceUrl property, see below -->
<ld-navigator></ld-navigator>

<!-- ld-link replaces or wraps anchor -->
<ld-link resource-url="http://api.my.app/people">get people</ld-link>
<ld-link resource-url="http://api.my.app/projects">
    <a>get projects</a>
</ld-link>

<script>
var navigator = document.querySelector('ld-navigator')
navigator.addEventListener('resource-url-changed', function(e) {
    // same url sits in e.detail.resourceUrl
    var nextUrl = navigator.resourceUrl;

    // no go ahead and $.get or window.fetch your data from nextUrl
    window.fetch(nextUrl).then(bindDataWithPage);
  });
</script>

With the above code, when you click the first link, the browser moves to http://www.my.app/http://api.my.app/people and the resource-url-changed event is fired.

Base URL

Obviously an URL like http://www.my.app/http://api.my.app/people is ugly (and, well, invalid). It is possible to get rid of the API domain by adding an attribute to the <ld-navigator> tag:

<ld-navigator base-url="http://api.my.app"></ld-navigator>

This way the API domain is stripped out from the browser address bar and http://www.my.app/people remains. This is where client-side routing becomes virtually obsolete.

Polymer

ld-navigation will also play nice with Polymer - see the demos above.

Tests

Tests are written with @open-wc/testing.

yarn install
yarn test:local
You can’t perform that action at this time.