# EdGEL Custom Elements

## Adding to page
Use an HTML5 doctype and include viewport meta tag for proper responsive behaviours.
There are some global CSS style needed, to style `<html>` and `<body>` and provide font definitions.  
This is provided in `edgel-components.css` and is not the full EdGEL CSS.

The following should be used in the `<head>` section:

```html
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="dist/css/edgel-components.min.css" crossorigin="anonymous">
```

To load all the EdGEL web components to the page, add the following to the `<body>` of your page:
```html
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load all EdGEL components -->
<script type="module" src="web-components/edgel.min.js" crossorigin></script>
```

If you only need a subset of the components you can use your own version of the `edgel.js` file, or better still, use 
HTTP/2 Server Push instead.

### jQuery
There is no support for jQuery in these webcomponents

### Preloader
There is a delay rendering the text on the page while all the components are loaded.  To show a spinner while the 
rendering is happening, add the following to the `<body>` of your page:
```html
<!-- Load preload.js to hide content until web components are rendered -->
<script src="dist/js/preloader.min.js"></script>
```
If you are using an EdGEL page tag, such as `<edgel-page>`, it will automatically clear this once the page has finished
rendering.  If you are wanting to use the preloader in any other context, you will need to fire the custom event 
`edgelPageRendered` to clear the preloader, as in the example below:
```js
if (document.body.classList.contains('preloader')) {
  var renderEvent = new CustomEvent("edgelPageRendered", {
    bubbles: true,
    cancelable: false
  });
  this.dispatchEvent(renderEvent);
}
```  

### EdGEL Globals
The global `window.EdGEL` object allows certain configuration setting options for EdGEL.

* `EdGEL.imagePath`: default 'images'.  This is the path to the UoE logo used in the masthead and the affiliations 
graphic in the footer.  Omit the trailing slash from the path.
* `EdGEL.menu`: default {}.  This holds an object representing the main navigation elements.
```json
{
  breadcrumb: [
    {url: 'http://www.ed.ac.uk', text: 'Home'},
    .....
  ],
  children: [
    {url: 'http://www.ed.ac.uk/about', text: 'About'},
    .....
  ]
}
```

The last item in the breadcrumb must be the current page.  If the page does not have children, provide a list of 
`siblings` instead.  If you provide both children and siblings in the object, children will be used.

The menu object can be passed directly to `<edgel-menu>` and `<edgel-breadcrumb>` tags using the `menu` attribute.
Note, if passing the object by attribute, the object must be valid serialised JSON using double quotes, so always 
use single quotes for the `menu` attribute.
