Hides (display: none) all child HTMLElements which are "iframe" and "object" at component load. Then checks if "src" or "data" of the "iframe" and "object" HTMLElements contain a defined cookie "src" string. If that is the case and the user has not agreed to the cookie terms yet, the "iframe" or "object" HTMLElement is replaced with a HTMLDivElement with the class "hylo-cookie-barrier-layer" which contains a html-cookie-layer component. Otherwise the HTMLElement is shown.

By default the "hylo-cookie-barrier-layer" has a class "is-relative" which sets its position "relative" and its dimensions to 16:9. The nested html-cookie-layer component will span over this element. This can be changed with the property "checkAncestorRelative".

A replaced HTMLElement is changed back again, after the user agrees to the cookie terms.

IMPORTANT!!! Every "iframe" and "object" HTMLElement has to be hidden from the start in order to have the component work. If the "iframe" and "object" HTMLElements are present in your markup right from the beginning of the page load, you have to add the style "hylo-cookie-barrier iframe:not(.hylo-cookie-barrier), hylo-cookie-barrier object:not(.hylo-cookie-barrier) {display: none !important;}" to an inline style in the header of your page.

Properties

agreed: boolean

Default setting of overriding a disagreed decision to an agreed decision. A manually changed decision is not saved in the session storage.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

buttonAgreeClass: string = ''

Classes added by default to the button wrapped by the "agree to cookies" hylo-button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

buttonDisagreeClass: string = ''

Classes added by default to the button wrapped by the "disagree to cookies" hylo-button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

buttonsWrapperClass: string = ''

Classes added by default to the wrapper of the cookies buttons.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

checkAncestorRelative: number | boolean

By default the wrapper "hylo-cookie-barrier-layer" element is set to position "relative". With this property the ancestor elements are checked whether one of them is NOT position "static". If that is the case, the "hylo-cookie-barrier-layer" element is not getting the class "is-relative" but the class "has-parent-relative" which will not set a position value or dimensions at all. The nested html-cookie-layer component will span over the ancestor element.

You can define how many levels of ancestors should be searched by providing a number as value or just set the value to "true" which is the same as setting the value to "1".

The value "0" or "false" will set neither of the classes.

cookies: string | any[]

Either a string which defines a cookie, an array defining multiple cookies/identifier pairs or a JSON string representing this array.

The cookies array contains objects where each object represents one unique cookie/identifier pair. The object key "cookie" defines the name of the cookie. All the other keys define properties you want to override from the default setting like "identifier", "hyloButtonDisagreeHide" or "htmlLayer".

With the cookies object you can override any setting given by the default properties. If a property is not set for a cookie/identifier pair in the cookies object, the default property is used.

dontListenToBanner: boolean

By default a hylo-cookie-layer component listens to the hyloCookieBannerSaved event of the hylo-cookie-banner component. It updates itself when the event got fired. This setting disables the behavior.

Default setting for all used hylo-cookie-layer components. Can be specified for individual cookies/identifier pairs with the "cookies" property.

htmlLayer: string = ''

Default HTML markup displayed in the hylo-cookie-layer components.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

hyloButtonAgreeClass: string = ''

Classes added by default to the "agree to cookies" hylo-button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

hyloButtonDisagreeClass: string = ''

Classes added by default to the "disagree to cookies" hylo-button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

hyloButtonDisagreeHide: boolean = true

Default setting to hides the "disagree to cookies" button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

identifier: string

A default unique identifier under which the user's decision is saved in the session storage. The decision layer will only appear if the user has not agreed yet. The user's decision is considered not agreed if the "cookie" is not set and the identifier is not set to be agreed in the session storage.

Can be specified in the "cookies" property to create individual cookie/identifier pairs. Has to be defined for each cookie either through this property or through "cookies".

layerWrapperClass: string = ''

Classes added to the replacement HTMLDivElement which contains the hylo-cookie-layer component. You are responsible to style the replacement HTMLElement.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

src: string | RegExp

The default value as string or regular expression with which the "src" or "data" of the "iframe" or "object" HTMLElement respectively is tested against. The string has to be part of the "src" or "data" to test "true" (ignoring case).

A regular expression can also be provided as string. When provided as string, only define the part between the start and end sign (the pattern) without the start/end sign and any flags.

Can be specified for individual cookies/identifier pairs with the "cookies" property. Has to be defined for each cookie/identifier pair either through this property or through "cookies".

textAgree: string

Default text of the "agree to cookies" button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

textDisagree: string

Default text of the "disagree to cookies" button.

Can be specified for individual cookies/identifier pairs with the "cookies" property.

Methods

  • Checks its inner HTML for newly added "iframe" and "object" HTMLElements.

    If you want to have an "iframe" or "object" HTMLElement which got cleared already to be checked again, remove its css class "hylo-cookie-barrier" before calling "update()". All cleared "iframe" and "object" HTMLElements have the css class "hylo-cookie-barrier".

    Returns Promise<void>

  • Updates each hylo-cookie-layer component.

    Returns Promise<void>

Generated using TypeDoc