Skip to content
This repository has been archived by the owner on Jan 17, 2022. It is now read-only.

tpluscode/ld-navigation

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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