Directory

← Back

ld-navigation

Routing-like element for the modern Web

Author

Rating

Popularity

<100

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

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="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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-01-22
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

ld-navigation - Vaadin Add-on Directory

Routing-like element for the modern Web ld-navigation - Vaadin Add-on Directory
# ld-navigation [![Build Status](https://travis-ci.org/tpluscode/ld-navigation.svg?branch=master)](https://travis-ci.org/tpluscode/ld-navigation) [![codecov](https://codecov.io/gh/tpluscode/ld-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/tpluscode/ld-navigation) 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](https://routing.hypermedia.app/demo/). [`ld-navigation` also plays nice with location.hash history](https://routing.hypermedia.app/demo/#use-hash). ## Installation Run `yarn add ld-navigation` In your code ```js // 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/`. ``` html get people get projects ``` 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 `` tag: ``` html ``` 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](/Polymer/polymer/) - see the [demos](#demo) above. ## Tests Tests are written with [@open-wc/testing](http://open-wc.org). ``` bash yarn install yarn test:local ```
Online