This library extends abilities of stock fh behaviors.
It works on Mutator Observer and inject code between luna rendering, and displaying it on client side. Also includes fhml extender.
import {getCookie} from 'fhdp-extenders';
...
const cookie = getCookie();
it returns cookie dictionary parsed to json.
import {FHDPExtender} from 'fhdp-extenders';
...
new FHDPExtender({
i18n: i18nInstance, /* needs to provide i18n instance to handle translations*/
extendFHML: true, /* extends fhml */
enableMobileNavbar: true, /* enable changing from desktop to mobile navbar */
enableHintOnHover: true, /* enable hints on hover */
enableRequiredAtLabel: true, /* enable moving required star from field to label */
enableErrorBelowField: true, /* enable moving error from field to label */
enableDynamicFooterPosition: true, /* enable dynamic footer sliding */
enableCurrentMenuElementHighlight: true, /* enable highlight for currently selected element */
enableFHMLinTooltips: true, /* enable fhml in tooltips */
enableSessionCounterRules: true, /* enable session counter rules */
enableCookieAlert: true, /* enable cookie alert at bottom */
});
import {addTranslationForCookiePolitics} from 'fhdp-extenders';
addTranslationForCookiePolitics('pl' {
warning: 'Uwaga!',
message: 'Używając tej strony akceptujesz politykę prywatności i przetwarzanie plików cookie',
close: 'Akceptuję'
})
In FHDPExtender config add node additionalRules
.
This is list of objects:
{
// 'exclusion' type excludes all mutations described by condition param,
// 'extension' type extends rules. For this param ruleMutator is obligatory
type: 'exclusion' | 'extension'
// 'selector' its marker for recognising whitch element is selected (only used in debug),
selector: string
// async function for recognisiong if element fits into mutation rule
condition: (mutation: Mutation) => Promise<boolean>
// rule mutator is actual function that modifies elements in DOM. It runs only if type = extension and condition returns true.
ruleMutator: (mutation: Mutation) => Promise<void>
}
Example adding div to dom only if not exists:
new FHDPExtender({
i18n: i18nInstance,
additionalRules: [
{
type: 'extension',
selector: '#myComponent',
condition: async (mutation) => !!document.querySelector('#myComponent'),
ruleMutator: async (mutation) => {
const myElement = document.createElement(div);
myElement.id = '#myComponent';
myElement.innerText = 'Thats my element!';
document.body.appendChild(myElement);
}
}
...
]
});