Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/ebi-header-footer/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
### 2.1.4

* Optimised the component by removing dependency of old header (with VF 1.4) and footer loading from contenthub. [Tracking issue](https://github.com/visual-framework/vf-core/issues/2333)

### 2.1.3

* Resolve accessbility issues for EBI blackbar header for v1.4 and also fixes overlapping x button for search box.
Expand Down
21 changes: 15 additions & 6 deletions components/ebi-header-footer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,27 @@

## About

Support for using the EMBL-EBI header and footer from the EMBL-EBI VF 1.3.
Support for using the EMBL-EBI header and footer in projects that use the Visual Framework 2.0.

> **Upgrade recommended:** If you are using an earlier version of this component, upgrade to **v2.1.4 or later**. Previous versions loaded header and footer HTML from the EMBL ContentHub and depended on the legacy `EBI-Framework/v1.x/script.js` file. Both of those external dependencies have been removed as of v2.1.4.

## What changed in v2.1.4

- **Removed ContentHub HTML loading dependency.** The header and footer HTML is now self-contained in the component templates (`ebi-header-footer--header.njk` and `ebi-header-footer--footer.njk`). No `<link rel="import">` or `data-embl-js-content-hub-loader` attribute is needed.
- **Removed legacy `script.js` dependency.** The component no longer relies on `//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.x/js/script.js` to bootstrap header or footer behaviour. All required JavaScript (black bar population, global search, data protection banner, external link decorators, announcements) is fully bundled inside `ebi-header-footer.js`.
- **Lighter and faster.** Eliminating two external round-trips (ContentHub API call + legacy script) reduces page load overhead and removes a network failure point.
- **No functional or visual regressions.** The rendered output and interactive behaviour remain identical to previous versions.

## Usage

This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with other 2.0 styles.
This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with VF 2.0 styles.

- This component requires the EMBL contentHub loader, which is included in most EMBL VF builds.
- This requires VF 2.0 footer CSS and other styles.
- If you do not currently have VF 2.0 CSS and JS as part of your project, [you can use the CDN JS](https://stable.visual-framework.dev/#cdn).
- This uses the existing `//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js` to load the HTML for the header.
- The EBI VF 1.x will also included a data protection banner, to disable this with 1.4 you can an included an element with `data-protection-message-disable="true"`
- This will be inserted by default when using the `ebi-header-footer--footer` template.
- The EMBL contentHub loader is **no longer required** as of v2.1.4.
- The legacy `script.js` file from EBI-Framework v1.x is **no longer required** as of v2.1.4.
- The data protection banner is bundled inside the component JS. To disable the built-in VF 1.x cookie banner include an element with `data-protection-message-disable="true"`.
- This is inserted automatically when using the `ebi-header-footer--footer` template.

## Install

Expand Down
Loading
Loading