Options
All
  • Public
  • Public/Protected
  • All
Menu

Describes the configuration for a content flow gallery.

Hierarchy

  • Configuration

Index

Properties

circularFlow

circularFlow: boolean

Should the Flow wrap around? Defaults to true.

endOpacity

endOpacity: number

The opacity of the last visible item on either side. The opacity of each item will be calculated by the calcOpacity function. Defaults to 1.

fixItemSize

fixItemSize: boolean

Fixes the item size, to the calculated size. No adjustments will be done. Images will be croped if bigger. Defaults to false.

flowDragFriction

flowDragFriction: number

Determines how hard it is to drag the flow. If set to 0 dragging of the flow is deactivated. Defaults to 1.

flowSpeedFactor

flowSpeedFactor: number

A flowSpeedFactor > 1 will speedup the scrollspeed, while a factor between 0 and 1 will slow it down. Defaults to 1.

keys

keys: Record<number, KeydownHandler>

Defines the keyCodes and the functions, which are triggerd on a keydown event within the ContentFlow. All defined functions are bound to the ContentFlow object. To disable this functionality, set this to an empty object.

Defaults to

{
13: function () { this._onclickActiveItem(this._activeItem) }, // return/enter key
37: function () { this.moveTo('pre') }, // left arrow
38: function () { this.moveTo('visibleNext') }, // up arrow
39: function () { this.moveTo('next') }, // right arrow
40: function () { this.moveTo('visiblePre') } // down arrow
}

loadingTimeout

loadingTimeout: number

Grace time in milliseconds for images to load. Defaults to 3000.

maxItemHeight

maxItemHeight: number

Maximum item height in px. If set to a value greater than 0 the item size will be calculated from this value instead relative to the width of the ContentFlow. Defaults to 0.

reflectionColor

reflectionColor: string

Set the "surface"-color of the reflection. If set to 'overlay' the image given by the option reflectionOverlaySrc will be lain over the reflection. Defaults to transparent.

reflectionGap

reflectionGap: number

Set the size of the gap between the image and the reflection image relative to the original image size. Defaults to 0.

reflectionHeight

reflectionHeight: number

Set the size of the reflection image relative to the original image. Defaults to 0.5.

relativeItemPosition

relativeItemPosition: RelativePosition

Position of item relative to it's coordinate. Defaults to top center. So by default, the item will be placed above the coordinate point and centered horizontally. If set, this option overrides the calcRelativeItemPosition option.

scaleFactor

scaleFactor: number

Factor by which the item will be scaled. Default to 1.

scaleFactorLandscape

scaleFactorLandscape: number | "max"

Factor to scale content images in landscape format by. If set to max, the height of an landscape image content will be set to the height of the item. Defaults to 1.

scaleFactorPortrait

scaleFactorPortrait: number | "max"

Factor to scale content images in portrait format by. If set to max, the width of an portait image content will be set to the width of the item. Defaults to 1.

scrollInFrom

scrollInFrom: number | "none" | PositionKeyword

Flow will start scrolling on load from this item. If set to none the flow will not scroll in. Default to pre.

scrollWheelSpeed

scrollWheelSpeed: number

Scales by how many items the flow will be moved with one usage of the mousewheel. Negative values will reverse the scroll direction. If set to 0 scrolling with the mouse wheel is deactivated. Defaults to 1.

startItem

startItem: number | PositionKeyword

Active Content item to start with. Defaults to center

useAddOns

useAddOns: string[] | "none" | "all"

Addons the ContentFlow should use. Defaults to all

verticalFlow

verticalFlow: boolean

Will turn the ContentFlow 90 degree counterclockwise. This will automatically swap calculated positions and sizes where needed. You do not have to adjust any calculations or sizes. Should work with any AddOn out of the box. Defaults to false.

visibleItems

visibleItems: number

Number of items to show on either side of the active Item. If set to 0 it will be set to the square root of the number of items in the flow. Defaults to 0.

Methods

calcCoordinates

  • Called to calculate the position of an item element within the flow.

    Parameters

    Returns Point

    The calculated position of the item within the flow.

calcFontSize

  • Called to set the calculation function of the relative font-size of an item.

    Parameters

    Returns number

    The calculated font size, must not be negative.

calcOpacity

  • Called to calculate the opacity of each item.

    Parameters

    Returns number

    The calculated opacity in the range 0...1.

calcRelativeItemPosition

  • Called to calculate the position of an item relative to it's coordinates. Please note that this function will be overridden by the relativeItemPosition option.

    Parameters

    Returns Point

    The calculated relative position of the item.

calcSize

  • Called to set the calculation function of the size of a visible item

    Parameters

    Returns RectangularSize

    The calculated size of the item.

calcStepWidth

  • calcStepWidth(diff: number): number
  • Called to set the calculation function of the width of each step to get the next position of the flow. diff is the targetItemPosition - currentPosition

    Parameters

    • diff: number

      The different between the target item position and the current position in pixels.

    Returns number

    The next position in the flow.

calcZIndex

  • Called to set the calculation function of the z-index of each item. The z-index is only valid within the flow itself.

    Parameters

    Returns number

    The calculated z-index in the range -32768...32768.

onDrawItem

  • Called when ever an item is redrawn. Use with caution, because this method is easily called many thousand times.

    Parameters

    Returns void

onMakeActive

  • Called if an item becomes the active item.

    Parameters

    Returns void

onMakeInactive

  • Called if the active item becomes an inactive item.

    Parameters

    Returns void

onMoveTo

  • Called each time a new target is set i.e by calling the moveTo method.

    Parameters

    Returns void

onReachTarget

  • Called if the target item becomes the active item.

    Parameters

    Returns void

onclickActiveItem

  • Called if the active item is clicked.

    Parameters

    Returns void

onclickInactiveItem

  • Called if an inactive item is clicked.

    Parameters

    Returns void

onclickNextButton

  • onclickNextButton(event: Event): void
  • Called if the next button item is clicked.

    Parameters

    Returns void

onclickPreButton

  • onclickPreButton(event: Event): void
  • Called if the pre button item is clicked.

    Parameters

    Returns void

Generated using TypeDoc