Options
All
  • Public
  • Public/Protected
  • All
Menu

Project @pucelle/ff

Index

Namespaces

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

AlignPosition

AlignPosition: "t" | "b" | "t" | "l" | "r" | "c" | "bl" | "bc" | "br" | "tl" | "tc" | "tr" | "cc" | "lb" | "lt" | "rb" | "rt" | "b-b" | "b-t" | "t-t" | "t-b" | "l-l" | "l-r" | "r-r" | "r-l" | "c-c" | "bl-bl" | "bl-br" | "bl-tl" | "bl-tr" | "br-br" | "br-bl" | "br-br" | "br-tl" | "tl-tl" | "tl-tr" | "tl-bl" | "tl-br" | "tr-tr" | "tr-tl" | "tr-tr" | "tr-bl" | "cl-cr" | "cr-cl"

Align Where of current element to where of the target.

AnimationEasing

AnimationEasing: keyof typeof CUBIC_BEZIER_EASINGS | "linear"

Animation easing identifier.

AnimationFrame

AnimationFrame: {[ key in StylePropertyName]: string | number }

Animation frames to play from one to another.

AnimationPromise

AnimationPromise: Promise<boolean>

Animation promise returned from animate series functions. It's resolved boolean value identifies whether executing transtion successfully.

AnimationProperty

AnimationProperty: StylePropertyName | "scrollTop" | "scrollLeft"

Style property names than can be animated.

CanSortKeys

CanSortKeys<T>: Extract<keyof T, string | number>

Extract sortable keys from type T.

Type parameters

  • T

DateObject

DateObject: Record<DateUnit, number>

Data object with units as key.

DateUnit

DateUnit: "y" | "M" | "d" | "h" | "m" | "s"

Data units from year to seconds.

OrderDirection

OrderDirection: -1 | 1

Ordering direction, -1 to sort items from large to small, while 1 and to sort items from small to large.

OrderFunction

OrderFunction<T>: (item: T) => string | number

Ordering function that returned result can be used to do ordering.

Type parameters

  • T

Type declaration

    • (item: T): string | number
    • Parameters

      • item: T

      Returns string | number

OrderRule

Order key or function, or [order key or function, order direction] tuple.

Type parameters

  • T

Rect

Rect: {-readonly [ key in keyof ClientRect]-?: number }

Rect box size and location, all properties are writable.

StylePropertyName

StylePropertyName: Exclude<string & keyof CSSStyleDeclaration, "length" | "parentRule"> | "willChange"

Type of style properties.

Variables

Const storage

storage: JSONStorage = ...

Like LocalStorage very much, except here it read and write JSON datas.

Functions

add

  • add<T>(array: T[], ...items: T[]): T[]
  • Add items to an array, but duplicate items will not be added. This method uses includes to test if an item in array, so it doesn't fit for adding many items to a big array.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array to add items.

    • Rest ...items: T[]

      The items to add to array.

    Returns T[]

addDurationToDate

  • addDurationToDate(date: Date, duration: string): Date
  • Add duration string as a time offset to a date and returns a new date.

    Parameters

    • date: Date

      The date to add duration.

    • duration: string

      The duration string to add to date. like 1d1h.

    Returns Date

after

  • after(string: string, substring: string, greedy?: boolean): string
  • Get the right part of string before the first matched substring.

    Parameters

    • string: string

      The string to search substring.

    • substring: string

      The sub part to search in string.

    • greedy: boolean = false

      If true, when substring can't be found, returns the whole string.

    Returns string

afterLast

  • afterLast(string: string, substring: string, greedy?: boolean): string
  • Get the right part of string before the last matched substring.

    Parameters

    • string: string

      The string to search substring.

    • substring: string

      The sub part to search in string.

    • greedy: boolean = false

      If true, when substring can't be found, returns the whole string.

    Returns string

aggregate

  • aggregate<T, Value>(array: T[], groupKeyOrFn: CanSortKeys<T> | OrderFunction<T>, aggregateFn: (items: T[], key?: string) => Value): Record<string, Value>
  • Group and aggregate items by group by function and aggregate function.

    Type parameters

    • T

    • Value

    Parameters

    • array: T[]

      The array to aggregate.

    • groupKeyOrFn: CanSortKeys<T> | OrderFunction<T>

      The property name of each item, it's mapped value will be used for sorting. Or a function that accepts each item as parameter and returns a value for sorting.

    • aggregateFn: (items: T[], key?: string) => Value

      The aggregate function, it accepts grouped items and each grouped key as parameters, and returns aggregated value.

        • (items: T[], key?: string): Value
        • Parameters

          • items: T[]
          • Optional key: string

          Returns Value

    Returns Record<string, Value>

align

  • Align el to target element by specified position. If no enough space, will adjust align position automatically. Note that this mathod will always cause reflow.

    Parameters

    • el: HTMLElement

      The element to align, it's position should be fixed or absolute.

    • target: Element

      The target element to align to.

    • position: AlignPosition

      Align Where of el to where of the target, e.g., tl-br means align top-left position of el to bottom-right of target.

    • options: AlignOptions = ...

      Additional options.

    Returns void

alignToEvent

  • alignToEvent(el: HTMLElement, event: MouseEvent, offset?: [number, number]): void
  • Align element to a mouse event.

    Parameters

    • el: HTMLElement

      A fixed position element to align.

    • event: MouseEvent

      A mouse event to align to.

    • offset: [number, number] = ...

      [x, y] offset relative to current mouse position.

    Returns void

animate

  • Execute standard web animation on element. After animation end, the state of element will go back to the start state.

    Parameters

    • el: HTMLElement | SVGElement

      The element to execute web animation.

    • startFrame: AnimationFrame

      The start frame.

    • endFrame: AnimationFrame

      The end frame.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns Promise<boolean>

animateFrom

  • Execute standard web animation on element with start frame specified. The end frame will be set as zero or empty values.

    Parameters

    • el: HTMLElement | SVGElement

      The element to execute web animation.

    • startFrame: AnimationFrame

      The start frame.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

animateInterpolatedValue

  • animateInterpolatedValue(fn: (y: number) => void, startValue: number, endValue: number, duration?: number, easing?: AnimationEasing): { promise: Promise<boolean>; stop: undefined }
  • Animate by a value range, fn recives current value that interpolate from startValue to endValue as parameter. Execute animation by setting values per frame in requestAnimationFrame.

    Parameters

    • fn: (y: number) => void

      The function which will got a current state number value as parameter.

        • (y: number): void
        • Parameters

          • y: number

          Returns void

    • startValue: number

      The start value.

    • endValue: number

      The end value.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns { promise: Promise<boolean>; stop: undefined }

    • promise: Promise<boolean>
    • stop: undefined

animateStyleValue

  • Animate numberic style value even scrollLeft and scrollTop on el. Execute animation per frames by setting values per frame in requestAnimationFrame.

    Parameters

    • el: HTMLElement | SVGElement

      The element to animate.

    • property: AnimationProperty

      The style property or scrollLeft and scrollTop.

    • startValue: number

      The start value of property.

    • endValue: number

      The end value of property.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

animateStyleValueFrom

  • Animate numberic style value even scrollLeft and scrollTop on el. Execute animation per frames by setting values per frame in requestAnimationFrame.

    Parameters

    • el: HTMLElement

      The element to animate.

    • property: AnimationProperty

      The style property or scrollLeft and scrollTop.

    • startValue: number

      The start value.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

animateStyleValueTo

  • Animate numberic style value even scrollLeft and scrollTop on el. Execute animation per frames by setting values per frame in requestAnimationFrame.

    Parameters

    • el: HTMLElement | SVGElement

      The element to animate.

    • property: AnimationProperty

      The style property or scrollLeft and scrollTop.

    • endValue: number

      The end value.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

animateTo

  • Execute standard web animation on element with end frame specified. The end frame will be specified as values of current state. After animation executed, will apply end frame values to element.

    Parameters

    • el: HTMLElement | SVGElement

      The element to execute web animation.

    • endFrame: AnimationFrame

      The end frame.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

animateToNextFrame

  • Execute standard web animation, captures current state as start frame, and captures a new state later as end frame.

    Parameters

    • el: HTMLElement | SVGElement

      The element to execute web animation.

    • properties: StylePropertyName[] | StylePropertyName

      The style properties to capture.

    • duration: number = ...

      The animation duration.

    • easing: AnimationEasing = ...

      The animation easing.

    Returns AnimationPromise

assign

  • assign<T, S>(target: T, source: S, keys?: keyof S[]): T & S
  • Assign object keys and values from source to target, will cover values of target with same keys. will ignore undefined values and their keys in source.

    Type parameters

    • T: object

    • S: object

    Parameters

    • target: T

      The target that the sources assigned to.

    • source: S
    • keys: keyof S[] = ...

      If specified, only values whose keys are included will be assigned.

    Returns T & S

assignIf

  • assignIf<T, S>(target: T, source: S, keys?: keyof S[]): T & S
  • Assign object keys and values from source to target, will not cover values of target with existing keys. will ignore undefined values and their keys in source, and undefined values in target will be treated as not exist.

    Type parameters

    • T: object

    • S: object

    Parameters

    • target: T

      The target that the sources assigned to.

    • source: S
    • keys: keyof S[] = ...

      If specified, only values whose keys are included will be assigned.

    Returns T & S

avg

  • avg(array: number[]): number
  • Returns the average value of the numberic values in array. Returns 0 if no items in array.

    Parameters

    • array: number[]

      The array of numberic values.

    Returns number

before

  • before(string: string, substring: string, greedy?: boolean): string
  • Get the left part of string before the first matched substring.

    Parameters

    • string: string

      The string to search substring.

    • substring: string

      The sub part to search in string.

    • greedy: boolean = false

      If true, when substring can't be found, returns the whole string.

    Returns string

beforeLast

  • beforeLast(string: string, substring: string, greedy?: boolean): string
  • Get the left part of string before the last matched substring.

    Parameters

    • string: string

      The string to search substring.

    • substring: string

      The sub part to search in string.

    • greedy: boolean = false

      If true, when substring can't be found, returns the whole string.

    Returns string

binaryFind

  • binaryFind<T>(array: T[], fn: (item: T) => number): T | undefined
  • Using binary algorithm to find one item from a sorted array that matches test function fn.

    Type parameters

    • T

    Parameters

    • array: T[]

      The sorted array to find items from.

    • fn: (item: T) => number

      The function to accept 2 items in array as parameters and returns negative value to move left, positive value to move right.

        • (item: T): number
        • Parameters

          • item: T

          Returns number

    Returns T | undefined

binaryFindIndex

  • binaryFindIndex<T>(array: T[], fn: (item: T) => number): number
  • Using binary algorithm to find index from a sorted array at where the item match fn.

    Type parameters

    • T

    Parameters

    • array: T[]

      The sorted array.

    • fn: (item: T) => number

      The function to accept item in array as parameter and returns negative value to move left, positive value to move right.

        • (item: T): number
        • Parameters

          • item: T

          Returns number

    Returns number

binaryFindIndexToInsert

  • binaryFindIndexToInsert<T>(array: T[], fn: (item: T) => number): number
  • Using binary algorithm to find the closest index from a sorted array at where to insert new item and keep order. Returned index betweens 0 ~ array.length, and if array[index] exist, fn(array[index]) >= 0.

    Type parameters

    • T

    Parameters

    • array: T[]

      The sorted array.

    • fn: (item: T) => number

      The function to accept item in array as parameter and returns nagative value to move left, positive value to move right.

        • (item: T): number
        • Parameters

          • item: T

          Returns number

    Returns number

capitalize

  • capitalize(string: string): string
  • Uppercase the first character of string.

    Parameters

    • string: string

      The string to be capitalized.

    Returns string

cloneDate

  • cloneDate(date?: Date, units?: string): Date
  • Clones a date object. Can specify units to partly clone, units not includeded parts will be set to minimal value.

    Parameters

    • date: Date = ...

      The date to clone, default value is current date.

    • units: string = ...

      The units to partly clone, default value is yMdhms.

    Returns Date

constrain

  • constrain(number: number, min: number, max: number): number
  • Returns a new number which is constrained in a minimal and maximum range.

    Parameters

    • number: number

      The number to constrain.

    • min: number

      The minimum number.

    • max: number

      The maximum number.

    Returns number

count

  • count(array: any[]): number
  • Returns the length of the array. Just a util function for ff.aggregate.

    Parameters

    • array: any[]

      The array to count length.

    Returns number

debounce

  • debounce<F>(fn: F, ms: number): Debounce<F>
  • Debounce function calls, calls returned function continuously in a short time will pause calling fn. It can be used to only send search request after user stops inputting.

    Type parameters

    • F: Function

    Parameters

    • fn: F

      The function to debounce.

    • ms: number

      The timeout in milliseconds.

    Returns Debounce<F>

decodeHTML

  • decodeHTML(code: string): string
  • Decode HTML codes which includes &... to be readable characters.

    Parameters

    • code: string

      Encoded HTML codes.

    Returns string

deepClone

  • deepClone<T>(source: T, deep?: number): T
  • Deeply clone an object, array or any value. 2x~3x faster than JSON stringify and parse methods

    Type parameters

    • T

    Parameters

    • source: T

      The source to clone.

    • deep: number = 10

      Max deep to clone, default value is 10.

    Returns T

deepEqual

  • deepEqual(a: unknown, b: unknown, deep?: number): boolean
  • Deeply compare two objects, arrays or any other values. 1x faster than JSON stringify methods.

    Parameters

    • a: unknown

      Left value.

    • b: unknown

      Right value.

    • deep: number = 10

      Max deep to compare, default value is 10.

    Returns boolean

difference

  • difference<T>(array: T[], ...excludeArrays: T[][]): T[]
  • Creates a new array from picking items from array and excluding items in excludeArrays.

    Type parameters

    • T: string | number

    Parameters

    • array: T[]

      The array to pick items.

    • Rest ...excludeArrays: T[][]

      The arrays to exclude items from.

    Returns T[]

downloadText

  • downloadText(fileName: string, text: string, type?: string): void
  • Download string as a file with specified fileName. Not that fileName may not work for crossed domain resources in some browsers.

    Parameters

    • fileName: string

      The file name.

    • text: string

      The text to download.

    • type: string = 'text/plain'

    Returns void

downloadURL

  • downloadURL(url: string, fileName: string): void
  • Download url as a file with specified fileName. Not that fileName may not work for crossed domain resources in some browsers.

    Parameters

    • url: string

      The URL to download.

    • fileName: string

      The file name.

    Returns void

encodeHTML

  • encodeHTML(code: string): string
  • Encode <> to &... to makesure HTML codes are safely to be appended into document.

    Parameters

    • code: string

      Text to be encoded.

    Returns string

ensureDocumentComplete

  • ensureDocumentComplete(): Promise<void>
  • Returns a promise which will be resolved after document completed, or resolved immediately if document is already completed.

    Returns Promise<void>

ensureWindowLoaded

  • ensureWindowLoaded(): Promise<void>
  • Returns a promise which will be resolved after window loaded, or resolved immediately if window is already loaded.

    Returns Promise<void>

firstMatch

  • firstMatch(string: string, re: RegExp): string
  • Returns the first sub match from executing re on string.

    Parameters

    • string: string

      The string to select sub match.

    • re: RegExp

      The RegExp to execute on string.

    Returns string

format

  • format(template: string, args: Record<string, string | number> | (string | number)[]): string
  • Format string to replace placeholders like {key} in template to args[key]. Will keep the placeholder when no match found.

    Parameters

    • template: string

      String to format.

    • args: Record<string, string | number> | (string | number)[]

      The parameters to find and replace {...} with.

    Returns string

formatDate

  • formatDate(date: Date, format?: string): string
  • Returns a formatted date string from date and format type.

    Parameters

    • date: Date

      The date to format.

    • format: string = 'yyyy-MM-dd hh:mm:ss'

      The date format type, default value is 'yyyy-MM-dd hh:mm:ss'.

    Returns string

formatSecondsToDuration

  • formatSecondsToDuration(seconds: number, units?: string, maxOutputUnitCount?: number): string
  • Format second count to duration string like 1h1m.

    Parameters

    • seconds: number
    • units: string = ...

      Date unit types like yMdhms. Can only specify partial date units like Md.

    • maxOutputUnitCount: number = ...

      Maximun unit count of the duration string. E.g., sepcify to 2 to output like 1y1M, 1M1d, 1d1h, 1s.

    Returns string

formatSecondsToTime

  • formatSecondsToTime(seconds: number): string
  • Format second count to time string like 01:01:01.

    Parameters

    • seconds: number

      The second count.

    Returns string

formatToShortDate

  • formatToShortDate(date: Date, format?: {[ key in DateUnit]: string }): string
  • Returns a short date string relative to current time.

    Parameters

    • date: Date

      The date to format.

    • format: {[ key in DateUnit]: string } = ...

      The format object to use, default value is {y: 'yyyy-MM-dd', M: 'MM-dd', h: 'hh:mm'}.

    Returns string

getCSSEasingValue

getClosestScrollWrapper

  • getClosestScrollWrapper(el: HTMLElement): HTMLElement | null
  • Find the closest scroll wrapper, which has overflow: auto / scroll set. Note that this method may cause reflow.

    Parameters

    • el: HTMLElement

      The element to check scroll wrapper.

    Returns HTMLElement | null

getDateByUnit

  • getDateByUnit(date: Date, unit: DateUnit): number
  • Get one of the date values from date according to specified unit.

    Parameters

    • date: Date

      The date object to get value from.

    • unit: DateUnit

      The unit type, must be one of 'y', 'M', 'd', 'h', 'm', 's'.

    Returns number

getDaysOfMonth

  • getDaysOfMonth(date: Date): number
  • Returns the days in the month from a date, which betweens 28-31.

    Parameters

    • date: Date

      The date to get days from.

    Returns number

getDaysOfYear

  • getDaysOfYear(date: Date): number
  • Returns the days in the year from date, which is 366 for leap year, and is 365 otherwise.

    Parameters

    • date: Date

      The date to get days from.

    Returns number

getEasingFunction

  • Get a (x) => y function from easing name.

    Parameters

    Returns (x: number) => number

      • (x: number): number
      • Parameters

        • x: number

        Returns number

getElementIndex

  • getElementIndex(el: Element): number
  • Get the index of element in it's element siblings.

    Parameters

    • el: Element

      The node.

    Returns number

getFilesFromTransfer

  • getFilesFromTransfer(transfer: DataTransfer): Promise<File[]>
  • Get files in DataTransfer object that captured from drop event. Only work on Chrome.

    Parameters

    • transfer: DataTransfer

      The DataTransfer object from drop event.

    Returns Promise<File[]>

getInnerHeight

  • getInnerHeight(el: Element): number
  • Get inner height of element, which equals to clientHeight - paddingHeights or height - paddingHeights - scrollbarHeight. Note that this method may cause page reflow.

    Parameters

    • el: Element

      The element to get height.

    Returns number

getInnerWidth

  • getInnerWidth(el: Element): number
  • Get inner width of element, which equals clientWidth - paddingWidths or width - paddingWidths - scrollbarWidth. Note that this method may cause page reflow.

    Parameters

    • el: Element

      The element to get width.

    Returns number

getMainAlignDirection

  • getMainAlignDirection(pos: string): "t" | "b" | "l" | "r" | "c" | ""
  • Get main align direction from align position string, can be used to set triangle styles.

    Parameters

    • pos: string

      Align position like t, tc, bc-tc.

    Returns "t" | "b" | "l" | "r" | "c" | ""

getNodeIndex

  • getNodeIndex(node: Node): number
  • Get the index of node in it's node siblings.

    Parameters

    • node: Node

      The node.

    Returns number

getOuterHeight

  • getOuterHeight(el: HTMLElement): number
  • Get inner height of element, which equals offsetHeight + marginHeights. Note that this method may cause page reflow.

    Parameters

    • el: HTMLElement

      The element to get height.

    Returns number

getOuterWidth

  • getOuterWidth(el: HTMLElement): number
  • Get outer width of element, which equals offsetWidth + marginWidths. Note that this method may cause page reflow.

    Parameters

    • el: HTMLElement

      The element to get width.

    Returns number

getRect

  • getRect(el: Element): Rect
  • Get an rect object just like getBoundingClientRect. The didderence is it always returns the rect of visible part for <html>, and properties are writable. Note that this method may cause page reflow.

    Parameters

    • el: Element

      The element to get rect size.

    Returns Rect

getScrollDirection

  • getScrollDirection(wrapper: HTMLElement): "x" | "y" | null
  • Get the scroll direction of scroll wrapper, may be 'x' | 'y' | ''.

    Parameters

    • wrapper: HTMLElement

      The element to check scroll direction.

    Returns "x" | "y" | null

getScrollOffset

  • getScrollOffset(el: HTMLElement, wrapper: HTMLElement, direction: "x" | "y"): number
  • Get element's top or left offset from it's scroll wrapper's scrollable start edges, which also means the scroll wrapper's scrollTop property value when top edges match. This value is not affected by current scroll position.

    Parameters

    • el: HTMLElement

      The element to test offset.

    • wrapper: HTMLElement

      The scroll wrapper.

    • direction: "x" | "y"

      The scroll direction, 'x' | 'y'.

    Returns number

getScrollbarWidth

  • getScrollbarWidth(): number
  • Get scroll bar width. After first time running, the returned value will keep unchanged. Note that this method will cause reflow for the first time.

    Returns number

getStyleValue

  • Get computed style value from element. Note that this method may cause reflow.

    Parameters

    • el: Element

      The element to get style value.

    • propertyName: StylePropertyName

      The property name in camer case, backgroundColor as example.

    Returns string

getStyleValueAsNumber

  • Get computed style value as number from element. Note that this method may cause reflow.

    Parameters

    • el: Element

      The element to get numeric value.

    • property: StylePropertyName

      The property name in camer case, backgroundColor as example.

    Returns number

groupBy

  • Creates an object from grouping by key results returned from running keyOrFn with each item of items.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array to group by.

    • keyOrFn: CanSortKeys<T> | OrderFunction<T>

      The property name of each item, it's mapped value will be used for sorting. Or a function that accepts each item as parameter and returns a value for sorting.

    Returns Record<string, T[]>

indexBy

  • indexBy<T, V>(array: T[], fn: (value: T, index: number) => [string | number, V]): Record<string, V>
  • indexBy<T, K>(array: T[], key: K): Record<string, T>
  • Create a object from [key, value] tuples that returned from fn with each item of items as parameter.

    Type parameters

    • T

    • V

    Parameters

    • array: T[]

      The array to make object.

    • fn: (value: T, index: number) => [string | number, V]

      The function to return [key, value] tuple for each item.

        • (value: T, index: number): [string | number, V]
        • Parameters

          • value: T
          • index: number

          Returns [string | number, V]

    Returns Record<string, V>

  • Create a map object as {item[key]: item} format.

    Type parameters

    • T

    • K

    Parameters

    • array: T[]

      The array to make object.

    • key: K

      The key of items in array to get value as index keys.

    Returns Record<string, T>

intersect

  • intersect<T>(...arrays: T[][]): T[]
  • Creates an array from picking intersect values that are included in all given arrays.

    Type parameters

    • T: string | number

    Parameters

    • Rest ...arrays: T[][]

      The arrays to get intersection from.

    Returns T[]

interval

  • interval(fn: Function, ms: number): Interval
  • Just like setInterval, call fn every ms millisecons.

    Parameters

    • fn: Function

      The function to call.

    • ms: number

      The interval time in millisecons.

    Returns Interval

isContentOverflow

  • isContentOverflow(el: HTMLElement): boolean
  • Returns if content of element overflow and element is scrollable. May return true although element has no scroll bar. Note that this method may cause reflow.

    Parameters

    • el: HTMLElement

      The element to check overflow state.

    Returns boolean

isLeapYear

  • isLeapYear(date: Date): boolean
  • Returns whether the year of date is a leap year, which contains 366 days.

    Parameters

    • date: Date

      The date to test.

    Returns boolean

isPlayingAnimation

  • isPlayingAnimation(el: HTMLElement | SVGElement): boolean
  • Test if element is playing an animation.

    Parameters

    • el: HTMLElement | SVGElement

      The element to test animation at.

    Returns boolean

isValidDate

  • isValidDate(y: number, M: number, d?: number, h?: number, m?: number, s?: number): boolean
  • Returns whether date values from year to second are associated with a real date.

    Parameters

    • y: number

      Year count.

    • M: number

      Month count.

    • d: number = 1

      Date count.

    • h: number = 0

      Hour count.

    • m: number = 0

      Minute count.

    • s: number = 0

      Second count.

    Returns boolean

isVisibleInViewport

  • isVisibleInViewport(el: Element, percentage?: number): boolean
  • Check if element is visible in current viewport, element must also be not fully covered. Note that this method may cause page reflow.

    Parameters

    • el: Element

      The element to check if is in view.

    • percentage: number = 0.5

      Specify how much percentage of el size implies in view.

    Returns boolean

max

  • max(array: number[]): number
  • Returns the maximun value of numberic values in array. Returns -Infinity if no items in array.

    Parameters

    • array: number[]

      The array of numberic values.

    Returns number

maxIndex

  • maxIndex<T>(array: T[], map?: (item: T, index: number) => number): number
  • Returns the index of the maximun value of the array items.R Returns -1 if no items or all values are -Infinity.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array of data items.

    • Optional map: (item: T, index: number) => number

      The map function to map each item to a number.

        • (item: T, index: number): number
        • Parameters

          • item: T
          • index: number

          Returns number

    Returns number

min

  • min(array: number[]): number
  • Returns the minimal value of the numberic values in array. Returns Infinity if no items in array.

    Parameters

    • array: number[]

      The array of numberic values.

    Returns number

minIndex

  • minIndex<T>(array: T[], map?: (item: T, index: number) => number): number
  • Returns the index of the minimal value of the array items. Returns -1 if no items or all values are Infinity.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array of data items.

    • Optional map: (item: T, index: number) => number

      The map function to map each item to a number.

        • (item: T, index: number): number
        • Parameters

          • item: T
          • index: number

          Returns number

    Returns number

mod

  • mod(number: number, modulo: number): number
  • Like a % b, but always returns positive number. e.g., mod(-1, 2) = 1.

    Parameters

    • number: number

      The number to calculate modulo.

    • modulo: number

      The modulo of number.

    Returns number

orderBy

  • orderBy<T>(array: T[], order: Order<T>): T[]
  • orderBy<T>(array: T[], ...orders: OrderRule<T>[]): T[]
  • Sort object type items inside array.

    Type parameters

    • T: object

    Parameters

    • array: T[]

      The array to order.

    • order: Order<T>

      instantiated ff.Order.

    Returns T[]

  • Sort items of object type inside array by a specified orders.

    Type parameters

    • T: object

    Parameters

    • array: T[]

      The array to order.

    • Rest ...orders: OrderRule<T>[]

      Rest parameters of type key or OrderFunction which will return a key, or [key / OrderFunction, OrderDirection].

    Returns T[]

parseDurationToObject

  • parseDurationToObject(duration: string): DateObject
  • Parse duration string like 1h1m or 01:01:00 to date object {y, M, d, h, m, s}.

    Parameters

    • duration: string

      string like 1h1m or 01:01:00.

    Returns DateObject

parseDurationToSeconds

  • parseDurationToSeconds(duration: string): number
  • Parse duration string like 1h1m or 01:01:00 to second count.

    Parameters

    • duration: string

      string like 1h1m or 01:01:00.

    Returns number

parseQuery

  • parseQuery(url: string): Record<string, string>
  • Parse url search part to a query parameter object.

    Parameters

    • url: string

      The url to parse query parameters.

    Returns Record<string, string>

parseSecondsToDateObject

  • parseSecondsToDateObject(seconds: number, units?: string): DateObject
  • Parse second count to date object {y, M, d, h, m, s}.

    Parameters

    • seconds: number

      The second count.

    • units: string = ...

      The unit to use when parsing, default value is yMdhms.

    Returns DateObject

queueEach

  • queueEach<Task>(tasks: Task[], handler: (task: Task) => Promise<void> | void, concurrency?: number): Promise<void>
  • Run eash task of tasks in a queue. Returns a promise which will be resolved after queue finished.

    Type parameters

    • Task

    Parameters

    • tasks: Task[]

      The task array which will be passed to handler in order.

    • handler: (task: Task) => Promise<void> | void

      The handler to handle each task.

        • (task: Task): Promise<void> | void
        • Parameters

          • task: Task

          Returns Promise<void> | void

    • Optional concurrency: number

      Specifies how many tasks to run simultaneously.

    Returns Promise<void>

queueEvery

  • queueEvery<Task>(tasks: Task[], handler: (task: Task) => Promise<boolean> | boolean, concurrency?: number): Promise<boolean>
  • Run eash task of tasks in a queue. Returns a promise which will be resolved if every tasks match handler.

    Type parameters

    • Task

    Parameters

    • tasks: Task[]

      The task array which will be passed to handler in order.

    • handler: (task: Task) => Promise<boolean> | boolean

      The handler to handle each task. It should returns a boolean value.

        • (task: Task): Promise<boolean> | boolean
        • Parameters

          • task: Task

          Returns Promise<boolean> | boolean

    • Optional concurrency: number

      Specifies how many tasks to run simultaneously.

    Returns Promise<boolean>

queueMap

  • queueMap<Task, Value>(tasks: Task[], handler: (task: Task) => Promise<Value> | Value, concurrency?: number): Promise<Value[]>
  • Run eash task of tasks in a queue. Returns a promise which will be resolved with returned values from handler after queue finished.

    Type parameters

    • Task

    • Value

    Parameters

    • tasks: Task[]

      The task array which will be passed to handler in order.

    • handler: (task: Task) => Promise<Value> | Value

      The handler to handle each task. It should returns a value.

        • (task: Task): Promise<Value> | Value
        • Parameters

          • task: Task

          Returns Promise<Value> | Value

    • Optional concurrency: number

      Specifies how many tasks to run simultaneously.

    Returns Promise<Value[]>

queueSome

  • queueSome<Task>(tasks: Task[], handler: (task: Task) => Promise<boolean> | boolean, concurrency?: number): Promise<boolean>
  • Run eash task of tasks in a queue. Returns a promise which will be resolved if some tasks match handler.

    Type parameters

    • Task

    Parameters

    • tasks: Task[]

      The task array which will be passed to handler in order.

    • handler: (task: Task) => Promise<boolean> | boolean

      The handler to handle each task. It should returns a boolean value.

        • (task: Task): Promise<boolean> | boolean
        • Parameters

          • task: Task

          Returns Promise<boolean> | boolean

    • Optional concurrency: number

      Specifies how many tasks to run simultaneously.

    Returns Promise<boolean>

remove

  • remove<T>(array: T[], ...items: T[]): T[]
  • Remove all the items from array, and returns the removed items. Note that this method uses splice to remove items, and only removes each item for once. So using array.filter to filter out multiple items would be better.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array to remove items.

    • Rest ...items: T[]

      The items removed from array.

    Returns T[]

removeFirst

  • removeFirst<T>(array: T[], fn: (item: T, index: number) => boolean): T | undefined
  • Removes the first item which match fn from array. Returns the removed items.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array to remove items.

    • fn: (item: T, index: number) => boolean

      The test function to determinae whether to remove item.

        • (item: T, index: number): boolean
        • Parameters

          • item: T
          • index: number

          Returns boolean

    Returns T | undefined

removeWhere

  • removeWhere<T>(array: T[], fn: (item: T, index: number) => boolean): T[]
  • Remove all the items in array that match test function fn. Returns the removed items. Note that this method uses splice to remove items, so using array.filter to filter out multiple items would be better.

    Type parameters

    • T

    Parameters

    • array: T[]

      The array to remove items.

    • fn: (item: T, index: number) => boolean

      The test function to determinae whether to remove item.

        • (item: T, index: number): boolean
        • Parameters

          • item: T
          • index: number

          Returns boolean

    Returns T[]

repeatTimes

  • repeatTimes<T>(item: T, count: number): T[]
  • Returns the array filled with value and repeated for count times. It's just like string.repeat(count).

    Type parameters

    • T

    Parameters

    • item: T

      The value to repeat.

    • count: number

      Count of times to repeat.

    Returns T[]

scrollToTop

  • scrollToTop(el: HTMLElement, gap?: number, duration?: number, easing?: AnimationEasing): boolean
  • Scroll scrollbars to make element in the top of the viewport area. Returns true if scrolled.

    Parameters

    • el: HTMLElement

      The element you want to see.

    • gap: number = 0

      Keep a little distance from the element's edge to the viewport's edge.

    • duration: number = 0

      If specified, will run an animation when scrolling.

    • easing: AnimationEasing = 'ease-out'

      The animation esing.

    Returns boolean

scrollToView

  • scrollToView(el: HTMLElement, gap?: number, duration?: number, easing?: AnimationEasing): boolean
  • Scroll scrollbars of closest scroll wrapper for minimal distance to make element be fully visible. Returns true if scrolled.

    Parameters

    • el: HTMLElement

      The element you want to see.

    • gap: number = 0

      Keep a little distance from the element's edge to the viewport's edge.

    • duration: number = 0

      If specified, will run an animation when scrolling.

    • easing: AnimationEasing = 'ease-out'

      The animation esing.

    Returns boolean

select

  • select(string: string, re: RegExp, template: string): string
  • Select sub matches from string by matching re, then format with a template string. Returns the format result.

    Parameters

    • string: string

      The string to select sub matches.

    • re: RegExp

      The RegExp to execute on string.

    • template: string

      Replace $i or $<name> to corresponding match.

    Returns string

selectAll

  • selectAll(string: string, re: RegExp, template: string): string[]
  • Select all the sub matches from string by matching re, then format with a template string.

    Parameters

    • string: string

      The string to select sub matches.

    • re: RegExp

      The RegExp to execute on string.

    • template: string

      Replace $i or $<name> to corresponding match.

    Returns string[]

selectFile

  • selectFile(mime: string): Promise<File | null>
  • Select a single file that matches MIME type from clicking a <input type="file">.

    Parameters

    • mime: string

    Returns Promise<File | null>

selectFolder

  • selectFolder(): Promise<File | null>
  • Select a single folder from clicking a <input type="file" directory>.

    Returns Promise<File | null>

selectMultipleFile

  • selectMultipleFile(mime: string): Promise<File[] | null>
  • Select multiple files match MIME type from clicking a <input type="file" multiple>.

    Parameters

    • mime: string

    Returns Promise<File[] | null>

selectMultipleFolders

  • selectMultipleFolders(): Promise<File[] | null>
  • Select multiple folders from clicking a <input type="file" directory multiple>.

    Returns Promise<File[] | null>

setDateByUnit

  • setDateByUnit(date: Date, value: number, unit: DateUnit): number
  • Set one of the date values for date according to specified unit.

    Parameters

    • date: Date

      The date object to set value.

    • value: number

      The date value to set.

    • unit: DateUnit

      The unit type, must be one of 'y', 'M', 'd', 'h', 'm', 's'.

    Returns number

setStyleValue

  • setStyleValue(el: HTMLElement | SVGElement, propertyName: StylePropertyName, value: number | string): void
  • Set value of specified property for element.

    Parameters

    • el: HTMLElement | SVGElement

      The element to set CSS value.

    • propertyName: StylePropertyName

      The property name in camel case. backgroundColor as example.

    • value: number | string

      The value in string or number type. E.g.: value 100 for width property wil be fixed to 100px.

    Returns void

setStyleValues

  • setStyleValues(el: HTMLElement | SVGElement, propertyMap: {[ key in StylePropertyName]: string | number }): void
  • Assign styles whose properties and values specified by propertyMap to element.

    Parameters

    • el: HTMLElement | SVGElement

      The element to set CSS values.

    • propertyMap: {[ key in StylePropertyName]: string | number }

      The property name in camel case, backgroundColor as example.

    Returns void

sleep

  • sleep(ms?: number): Promise<unknown>
  • Returns a promise which will be resolved after ms milliseconds.

    Parameters

    • ms: number = 0

      The sleep time in milliseconds.

    Returns Promise<unknown>

smoothThrottle

  • Throttle function calls, fn will not be called for twice in each ms millisecons. Different from ff.throttle, fn will be called lazily and smooth, and it ensures the last calling.

    Type parameters

    • F: Function

    Parameters

    • fn: F

      The function to throttle.

    • ms: number

      The time period which allows at most one calling. If omitted, uses requestAnimationFrame to throttle.

    Returns SmoothThrottle<F>

stopAnimation

  • stopAnimation(el: HTMLElement | SVGElement): boolean
  • Stop executing standard web animation on element. Returns whether stopped animation.

    Parameters

    • el: HTMLElement | SVGElement

      The element to stop animation at.

    Returns boolean

subMatchAt

  • subMatchAt(string: string, re: RegExp, index: number): string
  • Returns the sub match in specified index from executing re on string.

    Parameters

    • string: string

      The string to select sub match.

    • re: RegExp

      The RegExp to execute on string.

    • index: number

      Select the sub match in the index from match resul.

    Returns string

subMatches

  • subMatches(string: string, re: RegExp, sliceIndex?: number): string[][]
  • Returns array of all the sub matches from executing re on string.

    Parameters

    • string: string

      The string to select sub matches.

    • re: RegExp

      The RegExp to execute on string.

    • sliceIndex: number = 1

      Slice each match result from, specify to 0 to include whole match, 1 to only include sub matches, default value is 1.

    Returns string[][]

subMatchesAt

  • subMatchesAt(string: string, re: RegExp, index: number): string[]
  • For each match result from executing re on string, picks specified index of sub matches. Rreturns array of picked items.

    Parameters

    • string: string

      The string to select sub match.

    • re: RegExp

      The RegExp to execute on string.

    • index: number

      Select the sub match in the index from each match result.

    Returns string[]

sum

  • sum(array: number[]): number
  • Returns the sum of all the numberic values in array.

    Parameters

    • array: number[]

      The array of numberic values.

    Returns number

throttle

  • throttle<F>(fn: F, ms?: number): Throttle<F>
  • Throttle function calls, fn will not be called for twice in each ms millisecons Note that it doesn't ensure the last calling.

    Type parameters

    • F: Function

    Parameters

    • fn: F

      The function to throttle.

    • ms: number = 0

      The time period in which allows at most one calling. If omitted, uses requestAnimationFrame to throttle.

    Returns Throttle<F>

timeout

  • timeout(fn: Function, ms?: number): Timeout
  • Just like setTimeout, call fn after ms millisecons.

    Parameters

    • fn: Function

      The function to call later.

    • ms: number = 0

      The timeout time in millisecons.

    Returns Timeout

toCamerCase

  • toCamerCase(string: string): string
  • Transform string to camer case type.

    Parameters

    • string: string

      The string to transform.

    Returns string

toDashCase

  • toDashCase(string: string): string
  • Transform string to dash case type by joining words with -.

    Parameters

    • string: string

      The string to transform.

    Returns string

toDecimal

  • toDecimal(number: number, decimalCount?: number): number
  • Like number.toFixed, but alway return a number. e.g., toPower(12.345, 2) = 12.34.

    Parameters

    • number: number

      The number to fix.

    • decimalCount: number = 0

      The decimal count that number will correct to, default value is 0.

    Returns number

toPower

  • toPower(number: number, power?: number): number
  • Like number.toFixed, but always returns a number. e.g., toPower(1234, 2) = 1200.

    Parameters

    • number: number

      The number to fix.

    • power: number = 0

      The power that number will correct to, default value is 0.

    Returns number

toPrecision

  • toPrecision(number: number, precision?: number): number
  • Nearly same with number.toPrecision, except it always return a number.

    Parameters

    • number: number

      The number to transfer to specified precision.

    • precision: number = 1

      The precision value betweens 1-21, default value is 1.

    Returns number

toUnderscoreCase

  • toUnderscoreCase(string: string): string
  • Transform string to dash case by joining words with _.

    Parameters

    • string: string

      The string to transform.

    Returns string

union

  • union<T>(...arrays: T[][]): T[]
  • Creates an array composed of all the unique values from given arrays.

    Type parameters

    • T: string | number

    Parameters

    • Rest ...arrays: T[][]

      The arrays to get union from.

    Returns T[]

unique

  • unique<T>(array: T[]): T[]
  • Returns a new array from picking unique items from array and removing duplicate items.

    Type parameters

    • T: string | number

    Parameters

    • array: T[]

      The array to remove duplicate items.

    Returns T[]

useQuery

  • useQuery(url: string, query: Record<string, string>): string
  • Combine base url and query parameters to a new URL.

    Parameters

    • url: string

      The base url.

    • query: Record<string, string>

      The query parameter object.

    Returns string

watchLayout

  • watchLayout<T>(el: HTMLElement, type: T, callback: WatchCallback<T>): () => void
  • Watch specified state, trigger callback if state changed. Please makesure everything was rendered before call this. Returns a cancel function. Note that this method may slow page speed and cause additional reflow.

    Type parameters

    • T: "show" | "hide" | "inview" | "outview" | "size" | "rect"

    Parameters

    • el: HTMLElement

      The element to watch.

    • type: T

      The state to watch, can be 'show' | 'hide' | 'inview' | 'outview' | 'size' | 'rect'.

    • callback: WatchCallback<T>

      The callback to call when state changed.

    Returns () => void

      • (): void
      • Returns void

watchLayoutOnce

  • watchLayoutOnce<T>(el: HTMLElement, type: WatchType, callback: WatchCallback<T>): () => void
  • Watch specified state, trigger callback if it changed for only once. Please makesure everything was rendered before call this. Returns a cancel function. Note that this method may slow page speed and cause additional reflow.

    Type parameters

    • T: "show" | "hide" | "inview" | "outview" | "size" | "rect"

    Parameters

    • el: HTMLElement

      The element to watch.

    • type: WatchType

      The state to watch, can be 'show' | 'hide' | 'inview' | 'outview' | 'size' | 'rect'.

    • callback: WatchCallback<T>

      The callback to call when state changed.

    Returns () => void

      • (): void
      • Returns void

watchLayoutUntil

  • watchLayoutUntil<T>(el: HTMLElement, type: T, callback: WatchCallback<T>): () => void
  • Watch specified state, trigger callback if the state becomes true and never trigger again. Please makesure everything was rendered before call this. Returns a cancel function. Note that this method may slow page speed and cause additional reflow.

    Type parameters

    • T: "show" | "hide" | "inview" | "outview"

    Parameters

    • el: HTMLElement

      The element to watch.

    • type: T

      The state to watch, can be 'show' | 'hide' | 'inview' | 'outview'.

    • callback: WatchCallback<T>

      The callback to call when state becomes true.

    Returns () => void

      • (): void
      • Returns void

Generated using TypeDoc