Lucos_navbar NPM

lucos-navbar

Web Component containing navigation bar for lucos apps

There's currently two ways to include lucos-navbar - as an npm package or a docker image.

Regardless of installation method, also include the following element at the top of the <body> tag in your html:

<lucos-navbar>Title to appear in navbar</lucos-navbar>

Run the following command:

	npm i lucos_navbar

Then include the following in your javascript:

import 'lucos_navbar';

Update the Dockerfile to include:

## Near top of file:
FROM lucas42/lucos_navbar:latest as navbar

## After `WORKDIR` has been set:
COPY --from=navbar lucos_navbar.js .

Ensure the file is served by the webserver and then include the following at the end of the <body> tag in your html:

<script src="/lucos_navbar.js" type="text/javascript"></script>

The navigation bar will function without any attributes. The following attributes can be added as optional:

font set to a valid font-family CSS value to apply to the title. If set, font size is automatically increased.
text-colour any valid CSS colour value for the text in the navbar. Defaults to white.
bg-colour any valid CSS colour value for the background of the navbar. Defaults to black. A gradient is applied on top of the given colour.

The status indicator interacts via a Broadcast Channel called lucos_status.

It listens to the following events:

streaming-opened Indicates a streaming connection with the server (eg web socket or long polling) has started. Status indicator turns green.
streaming-closed Indicates a streaming connection with the server (eg web socket or long polling) has finished. Status indicator turns red.
service-worker-waiting Indicates a new service worker is available for use. Status indicator turns blue. This takes precedant over streaming-* events.
service-worker-active Indicates a service worker has become active. Removes the behaviours set by service-worker-waiting, including any animations on the status indicator.

It fires the following event:

service-worker-skip-waiting Fired when the status indicator is in the service-worker-waiting state and recieves a click event. The status indicator also begins to spin when this is fired. This indicates to the new service worker that it should skip waiting and become the active one.