Info

File

packages/ecl/components/ecl-gallery/ecl-gallery.component.ts

Description

This component represents a collection of images or videos and allows a user to browse them. Adds functionality and styling, according to the ECL standards.

Extends

ECLBaseDirective

Implements

AfterContentInit OnDestroy OnInit

Metadata

selector	`ecl-gallery`
imports	`TranslateModule` `NgTemplateOutlet` `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EUI_ECL_LINK`
styles	`:host { display: block; }`
templateUrl	`./ecl-gallery.component.html`

Index

Constructor

constructor(cdkBreakpointObserver: BreakpointObserver, platformId: object)

Parameters :

Name	Type	Optional
cdkBreakpointObserver	`BreakpointObserver`	No
platformId	`object`	No

Inputs

columns

Type : "2" | "3" | "4" | number

Default value : 3

gridTemplate

Type : "0" | "1" | "2" | "3" | "4" | string

Default value : '0'

This property can be used with 'isGrid' property set to true. By default gridTemplate is 0 and all the thimbnails have same size. If another template value is set, some additional formatting is applied and the thumbnails will have different sizes.

isFullWidth

Type : boolean

Default value : false

If set to true, the gallery will have 100 view width.

isGrid

Type : boolean

Default value : false

If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size.

isNoOverlay

Type : boolean

Default value : false

If set to true, no overlay will be displayed when user clicks on an image.

isOpenInFullScreenPossible

Type : boolean

Default value : true

isShareable

Type : boolean

Default value : true

If the items in the gallery can be shared. I.e. if the link for sharing will be present for each item.

isShowTitleOnHover

Type : boolean

Default value : true

If set to false, no title will be displayed when user hover on a gallery item.

maxVisibleItems

Type : number

Number of gallery items to be displayed by default. The rest can be displayed with the 'View all' button.

ratio

Type : "3-1" | "3-2" | string

Default value : '3-2'

The ratio that will be applied to the gallery thumbnails.

class

Type : string

e2eAttr

Type : any

tabindex

Type : number

Outputs

hide

Type : EventEmitter

Emits event when an expanded item is closed.

itemSwitch

Type : EventEmitter

Emits event when user is browsing items, opened in an overlay.

openFullScreen

Type : EventEmitter

Emits event when an item is opened in full screen.

share

Type : EventEmitter

Emits event when an item is shared.

show

Type : EventEmitter

Emits event when user clicks on an item to expand it.

HostBindings

attr.role

Type : string

Default value : 'region'

The default role of the component is 'region' and should not be changed.

class

Type : string

Applies specific clases to the component, related to the component properties values.

HostListeners

document:keydown.escape

Arguments : '$event'

document:keydown.escape(event: KeyboardEvent)

On pressing 'esc' key - close the item dialog and emit 'hide' event.

Parameters :

Name	Optional
event	No

window:resize

Arguments : '$event'

window:resize()

Methods

canBeOpenInFullScreen

canBeOpenInFullScreen()

Returns : boolean

canBeShared

canBeShared()

Returns : boolean

getIframeHeight

getIframeHeight()

Returns : number

getIframeWidth

getIframeWidth()

Returns : number

iframeResize

iframeResize()

Decorators :

@HostListener('window:resize', ['$event'])

Returns : void

onClose

onClose(evt: MouseEvent)

Emit 'hide' event, when closing item dialog.

Parameters :

Name	Type	Optional
evt	`MouseEvent`	No

Returns : void

onEscapeKeydownHandler

onEscapeKeydownHandler(event: KeyboardEvent)

Decorators :

@HostListener('document:keydown.escape', ['$event'])

On pressing 'esc' key - close the item dialog and emit 'hide' event.

Parameters :

Name	Type	Optional
event	`KeyboardEvent`	No

Returns : void

onFullScreenOpen

onFullScreenOpen(evt: MouseEvent)

Parameters :

Name	Type	Optional
evt	`MouseEvent`	No

Returns : void

onNext

onNext(evt: MouseEvent)

Emit 'itemSwitch' event, when switching to the next item. Event contains the new current item.

Parameters :

Name	Type	Optional
evt	`MouseEvent`	No

Returns : void

onPrevious

onPrevious(evt: MouseEvent)

Emit 'itemSwitch' event, when switching to the previous item. Event contains the new current item.

Parameters :

Name	Type	Optional
evt	`MouseEvent`	No

Returns : void

onShare

onShare(evt: MouseEvent)

Parameters :

Name	Type	Optional
evt	`MouseEvent`	No

Returns : void

setIframeDimensions

setIframeDimensions()

Returns : void

getCssClasses

getCssClasses(rootClass: string)

Parameters :

Name	Type	Optional
rootClass	`string`	No

Returns : string

Properties

footerChild

Type : ElementRef

Decorators :


                            @ViewChild('footer')

galleryFooter

Type : EclGalleryFooterComponent

Decorators :


                            @ContentChild(EclGalleryFooterComponent)

galleryItems

Type : QueryList<EclGalleryItemComponent>

Decorators :


                            @ContentChildren(EclGalleryItemComponent)

headerChild

Type : ElementRef

Decorators :


                            @ViewChild('header')

isDialogVisible

Default value : false

isMobile

Default value : false

item

Type : EclGalleryItemComponent

itemIndex

Type : number

itemsCount

Type : number

overlayChild

Type : ElementRef

Decorators :


                            @ViewChild('overlay')

role

Type : string

Default value : 'region'

Decorators :


                            @HostBinding('attr.role')

The default role of the component is 'region' and should not be changed.

Accessors

cssClasses

getcssClasses()

Applies specific clases to the component, related to the component properties values.

Returns : string

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Accessors

Constructor

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

Accessors

results matching ""

No results matching ""