Use this component to remotely load markup and content from the central EMBL ContentHub, this particular component allows reuse and distribution of content ranging articles to navigation elements (such as a global footer).
Currently this is done as HTML imports (see the code example) + some JS. In the future other methods will be support (such as JSON).
After loading from contentHub, this component will also invoke these functions on child content:
See the introductory text on the contentHub.
Load a content and pattern through the contentHub:
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=580&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
There are optional features specified by data attributes, looks like:
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?source=contenthub&pattern=embl-person-publications&limit=100&sort-field-value[changed]=DESC&orcid=0000-0002-2524-5026&source=contenthub" data-target="publications-block" data-embl-js-content-hub-loader-no-content="No publications were found." data-embl-js-content-hub-loader-no-content-hide=".publications-container" data-embl-js-content-hub-loader>
data-target="publications-block": pass the class of an element to insert text into
data-embl-js-content-hub-loader-no-content="No publications were found.": String to use if no results found, can also pass
trueto use default no match text
data-embl-js-content-hub-loader-no-content-hide=".publications-container": If no results, hide an element that matches this selector selector
data-inject-class="vf-grid vf-grid__col-2" data-inject-class-target="ul": Inject class(es) to a an element inside the returned content
Below we do a sample import from the ContentHub:
<div class="embl-content-hub-loader"> <p>Below we do a sample import from the ContentHub:</p> <link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=575&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader> </div>
This repository is distributed with npm. After installing npm and yarn, you can install with this command.
$ yarn add --dev @visual-framework/embl-content-hub-loader
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the
emblContentHubSignalFinished()even in cases where there was nothing to load
*-content-hub-htmlis a direct child of
File system location:
Find an issue on this page? Propose a change or discuss it.