Class HyloTemplate

Enables to build a hybrid website which consists of content pages switching dynamically like a one pager website but also having sites being loaded separately in its entirely, page by page while having a backend CMS like Django CMS serving the content as templates.

Place a hylo-template component, marked with the "content" property, inside a hylo-nav component. Everything inside this component will be loaded as content when the page switches dynamically.

To define a dynamic page switch, define ion-route components wrapped by a hylo-router component where the to be loaded component is a hylo-template. The markup of the loaded page included in a hylo-template marked with the "content" property will be injected into the dynamically created hylo-template by the hylo-router.

E.g:

  • You define:

    • <ion-route url="/page/" component="page-component"></ion-route>
    • <ion-route url="/:path1/" component="hylo-template"></ion-route>
    • <ion-route url="/:path1/:path2/" component="hylo-template"></ion-route>
    • <ion-route url="/:path1/:path2/:path3" component="hylo-template"></ion-route>

  • All pages except the one with the path "/page/" are loading the hylo-template component.

  • The path "/page/" is loading the page-component component.

  • The loaded hylo-template component will load the actual page via Ajax from the server but only takes the part of the markup from the loaded page which is wrapped by a hylo-template component itself marked with the "content" property.

  • The gathered markup will then be injected (innerHTML) into the hylo-template component of the ion-route.

  • You get a hylo-template component wrapping the markup which was defined as the dynamic content in the loaded page.

  • The dynamic content in the loaded page was defined by placing it in a hylo-template component itself where the components "content" property is set. Usually placed inside a hylo-nav component. (See hylo-nav component ...)

  • In the backend you have full pages defined/created via e.g. DjangoCMS.

  • In the frontend on page change only the part of the page is dynamically replaced which is wrapped in a hylo-template component with its "component" property set.

You can overwrite the dynamic loading functionality with the hylo-router properties "disableIfHtmlClass", "disableIfBodyClass" and "disableIfId".

Properties

breadcrumbs content fires pageTitle path scripts

Methods

appendScripts getPageTitle isLoaded reload

Events

hyloTemplateLoaded hyloTemplateReload

Properties

breadcrumbs

breadcrumbs: string | {
    href: string;
    id: string;
    name: string;
    slug: string;
}[] = []

The paths and page titles of each ancestor page in an ordered array of objects {name: string, slug: string, id: string, href: string}, starting with the root page down to the current page. Can be set as a JSON string of the array. When set as JSON string, it will be converted into an array right away.

Will be set as array in the dynamically created template when set in the loaded content template. Has to be set in the loaded content template manually as string. Does not create the breadcrumbs on its own.

Has no functional purpose other than store the breadcrumbs of the template. Other components can read out the breadcrumbs and trigger functions on their own depending on the value.

content

content: boolean

Marks the component as a wrapper for dynamic markup/content when loaded via the hylo-router. Separates itself from its use as page component in an ion-route.

fires

fires: boolean

Has to be set when the dynamically loaded content fires the event "hyloComponentLoaded" to signal that it is fully loaded.

pageTitle

pageTitle: string

The new page title of the loaded template. If not set, the template looks for a "title" tag in a "head" tag in the loaded markup. When a title is set or found, the title of the site gets replaced with the new one.

path

path: string

The path with which the template is loaded with. If not set, it will be filled with window.location.pathname.

Has no functional purpose other than store the path the template is associated with. Other components can read out the path and trigger functions on their own depending on the value.

scripts

scripts: string = ''

A string of comma separated RegExp of script tags which will be looked for in the loaded markup. These script tags will be added before the closing body tag after the template portion of the loaded markup is added.

Make sure the script tags are not part of the template tag since these are added automatically with the template portion.

Methods

appendScripts

  • appendScripts(html?): Promise<void>

  • Appends the scripts defined by the "scripts" property. Checks the given html code or, if not provided, the loaded html markup.

    Is executed automatically when the component is loaded.

    EXPERIMENTAL

    Parameters

    • Optional html: string

    Returns Promise<void>

getPageTitle

  • getPageTitle(): Promise<string>

  • Returns the page title which is either the provided "pageTitle" or the title gathered by parsing the "title" tag of loaded markup.

    Returns Promise<string>

isLoaded

  • isLoaded(): Promise<boolean>

  • Returns if the template is loaded.

    Returns Promise<boolean>

reload

  • reload(url?): Promise<void>

  • Reloads the current location.href into the template. E.g. helpful if the GET query changed and the template content should be updated/reloaded.

    As alternative a url for the new content can be provided. The content of the provided url has to contain a hylo-template component marked with the "content" property.

    Parameters

    • Optional url: string

      a url to the new content (optional)

    Returns Promise<void>

Events

hyloTemplateLoaded

hyloTemplateLoaded: EventEmitter<HTMLHyloTemplateElement>

Fires when the template got loaded. Emits the template component.

hyloTemplateReload

hyloTemplateReload: EventEmitter<string>

Fires when the template reloads. Emits the reloaded url.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc