Admin Panel

Admin panel component provides a wrapper around your Admin Panel module to display navigation menu, language switch etc.

Usage:

<hadmin>    <content/></hadmin>

Calendar component is used to display calendar. It's also available as a part of Form Builder.

Usage:

<hcalendar    key="exampleCalendar"    on-date-change("onCalendarDateChange")/>

Display full-screen loading spinner:

<hloading key="loading"/>

Display loading spinner ("dots"):

<hloading-dots/>

Notification

Display notification messages on top of the page.

Usage:

<hnotify     key="notifyExample"/>

Methods

Use show method to display notification messages:

this.getComponent("notifyExample").show(window.__heretic.t("notificationMessage"), "is-danger");

Use classes from Bulma in order to have different styling for your notifications.

Pagination

Display pagination bar in order to display multiple pages of content.

Usage:

<hpagination    data=paginationData    currentPage=state.currentPage    on-page-click("onExamplePageClick")/>

Pagination Data

Pagination data is a simple array of numbers and "...".

[1, 2, 3, "...", 14, 15]

Example method to generate pagination data (in this example, current page is set by currentPage, total number of pages is set by totalPages):

generatePagination(currentPage, totalPages) {    const center = [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];    const filteredCenter = center.filter((p) => p > 1 && p < totalPages);    // includeThreeLeft    if (currentPage === 5) {        filteredCenter.unshift(2);    }    // includeThreeRight    if (currentPage === totalPages - 4) {        filteredCenter.push(totalPages - 1);    }    // includeLeftDots    if (currentPage > 5) {        filteredCenter.unshift("...");    }    // includeRightDots    if (currentPage < totalPages - 4) {        filteredCenter.push("...");    }    // Finalize    const pagination = [1, ...filteredCenter, totalPages];    if (pagination.join(",") === "1,1") {        pagination.pop();    }    // Return pagination data    return pagination;}

Translation Component

Translation component is used to translate strings using key-value dictionaries. Read more about internationalization here.

Usage:

<t>translationKey</t>

You may use any attributes which could be applied to <span/> tag like class etc.

WYSIWYG Editor

WYSIWYG implies a user interface that allows you edit documents very similar to the end result while the document is being created.

Usage:

<hwysiwyg    key="sampleWysiwyg"    id=input.id    on-value-change("onWYSIWYGValueChange")    formId="formId"/>