Animation easing identifier.
Animation frames to play from one to another.
Animation promise returned from animate series functions. It's resolved boolean value identifies whether executing transtion successfully.
Style property names than can be animated.
Extract sortable keys from type T
.
Data object with units as key.
Data units from year to seconds.
Ordering direction, -1
to sort items from large to small, while 1
and to sort items from small to large.
Ordering function that returned result can be used to do ordering.
Order key or function, or [order key or function, order direction]
tuple.
Rect box size and location, all properties are writable.
Type of style properties.
Like LocalStorage
very much, except here it read and write JSON datas.
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.
The array to add items.
The items to add to array.
Add duration
string as a time offset to a date
and returns a new date.
The date to add duration.
The duration string to add to date. like 1d1h
.
Get the right part of string
before the first matched substring
.
The string to search substring.
The sub part to search in string.
If true
, when substring can't be found, returns the whole string.
Get the right part of string
before the last matched substring
.
The string to search substring.
The sub part to search in string.
If true
, when substring can't be found, returns the whole string.
Group and aggregate items by group by function and aggregate function.
The array to aggregate.
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.
The aggregate function, it accepts grouped items and each grouped key
as parameters, and returns aggregated value.
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.
The element to align, it's position should be fixed or absolute.
The target element to align to.
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
.
Additional options.
Align element to a mouse event.
A fixed position element to align.
A mouse event to align to.
[x, y]
offset relative to current mouse position.
Execute standard web animation on element. After animation end, the state of element will go back to the start state.
The element to execute web animation.
The start frame.
The end frame.
The animation duration.
The animation easing.
Execute standard web animation on element with start frame specified. The end frame will be set as zero or empty values.
The element to execute web animation.
The start frame.
The animation duration.
The animation easing.
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
.
The function which will got a current state number value as parameter.
The start value.
The end value.
The animation duration.
The animation easing.
Animate numberic style value even scrollLeft
and scrollTop
on el
.
Execute animation per frames by setting values per frame in requestAnimationFrame
.
The element to animate.
The style property or scrollLeft
and scrollTop
.
The start value of property
.
The end value of property
.
The animation duration.
The animation easing.
Animate numberic style value even scrollLeft
and scrollTop
on el
.
Execute animation per frames by setting values per frame in requestAnimationFrame
.
The element to animate.
The style property or scrollLeft
and scrollTop
.
The start value.
The animation duration.
The animation easing.
Animate numberic style value even scrollLeft
and scrollTop
on el
.
Execute animation per frames by setting values per frame in requestAnimationFrame
.
The element to animate.
The style property or scrollLeft
and scrollTop
.
The end value.
The animation duration.
The animation easing.
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.
The element to execute web animation.
The end frame.
The animation duration.
The animation easing.
Execute standard web animation, captures current state as start frame, and captures a new state later as end frame.
The element to execute web animation.
The style properties to capture.
The animation duration.
The animation easing.
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
.
The target that the sources assigned to.
If specified, only values whose keys are included will be assigned.
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.
The target that the sources assigned to.
If specified, only values whose keys are included will be assigned.
Returns the average value of the numberic values in array
.
Returns 0
if no items in array
.
The array of numberic values.
Get the left part of string
before the first matched substring
.
The string to search substring.
The sub part to search in string.
If true
, when substring can't be found, returns the whole string.
Get the left part of string
before the last matched substring
.
The string to search substring.
The sub part to search in string.
If true
, when substring can't be found, returns the whole string.
Using binary algorithm to find one item from a sorted array that matches test function fn
.
The sorted array to find items from.
The function to accept 2 items in array as parameters and returns negative value to move left, positive value to move right.
Using binary algorithm to find index from a sorted array at where the item match fn
.
The sorted array.
The function to accept item in array as parameter and returns negative value to move left, positive value to move right.
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
.
The sorted array.
The function to accept item in array as parameter and returns nagative value to move left, positive value to move right.
Uppercase the first character of string
.
The string to be capitalized.
Clones a date object.
Can specify units
to partly clone, units
not includeded parts will be set to minimal value.
The date to clone, default value is current date.
The units to partly clone, default value is yMdhms
.
Returns a new number which is constrained in a minimal and maximum range.
The number to constrain.
The minimum number.
The maximum number.
Returns the length of the array. Just a util function for ff.aggregate
.
The array to count length.
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.
The function to debounce.
The timeout in milliseconds.
Decode HTML codes which includes &...
to be readable characters.
Encoded HTML codes.
Deeply clone an object, array or any value. 2x~3x faster than JSON stringify and parse methods
The source to clone.
Max deep to clone, default value is 10.
Deeply compare two objects, arrays or any other values. 1x faster than JSON stringify methods.
Left value.
Right value.
Max deep to compare, default value is 10.
Creates a new array from picking items from array
and excluding items in excludeArrays
.
The array to pick items.
The arrays to exclude items from.
Download string as a file with specified fileName
.
Not that fileName
may not work for crossed domain resources in some browsers.
The file name.
The text to download.
Download url as a file with specified fileName
.
Not that fileName
may not work for crossed domain resources in some browsers.
The URL to download.
The file name.
Encode <>
to &...
to makesure HTML codes are safely to be appended into document.
Text to be encoded.
Returns a promise which will be resolved after document completed, or resolved immediately if document is already completed.
Returns a promise which will be resolved after window loaded, or resolved immediately if window is already loaded.
Returns the first sub match from executing re
on string
.
The string to select sub match.
The RegExp to execute on string.
Format string to replace placeholders like {key}
in template
to args[key]
.
Will keep the placeholder when no match found.
String to format.
The parameters to find and replace {...}
with.
Returns a formatted date string from date
and format
type.
The date to format.
The date format type, default value is 'yyyy-MM-dd hh:mm:ss'
.
Format second count to duration string like 1h1m
.
Date unit types like yMdhms
. Can only specify partial date units like Md
.
Maximun unit count of the duration string. E.g., sepcify to 2
to output like 1y1M
, 1M1d
, 1d1h
, 1s
.
Format second count to time string like 01:01:01
.
The second count.
Returns a short date string relative to current time.
The date to format.
The format object to use, default value is {y: 'yyyy-MM-dd', M: 'MM-dd', h: 'hh:mm'}
.
Get cubic-bezier(...)
as CSS easing from easing name.
The extended easing name.
Find the closest scroll wrapper, which has overflow: auto / scroll
set.
Note that this method may cause reflow.
The element to check scroll wrapper.
Get one of the date values from date
according to specified unit
.
The date object to get value from.
The unit type, must be one of 'y', 'M', 'd', 'h', 'm', 's'
.
Returns the days in the month from a date
, which betweens 28-31
.
The date to get days from.
Returns the days in the year from date
, which is 366
for leap year, and is 365
otherwise.
The date to get days from.
Get a (x) => y
function from easing name.
Get the index of element in it's element siblings.
The node.
Get files in DataTransfer
object that captured from drop event.
Only work on Chrome.
The DataTransfer
object from drop event.
Get inner height of element, which equals to clientHeight - paddingHeights
or height - paddingHeights - scrollbarHeight
.
Note that this method may cause page reflow.
The element to get height.
Get inner width of element, which equals clientWidth - paddingWidths
or width - paddingWidths - scrollbarWidth
.
Note that this method may cause page reflow.
The element to get width.
Get main align direction from align position string, can be used to set triangle styles.
Align position like t
, tc
, bc-tc
.
Get the index of node in it's node siblings.
The node.
Get inner height of element, which equals offsetHeight + marginHeights
.
Note that this method may cause page reflow.
The element to get height.
Get outer width of element, which equals offsetWidth + marginWidths
.
Note that this method may cause page reflow.
The element to get width.
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.
The element to get rect size.
Get the scroll direction of scroll wrapper, may be 'x' | 'y' | ''
.
The element to check scroll direction.
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.
The element to test offset.
The scroll wrapper.
The scroll direction, 'x' | 'y'
.
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.
Get computed style value from element. Note that this method may cause reflow.
The element to get style value.
The property name in camer case, backgroundColor
as example.
Get computed style value as number from element. Note that this method may cause reflow.
The element to get numeric value.
The property name in camer case, backgroundColor
as example.
Creates an object from grouping by key results returned from running keyOrFn
with each item of items
.
The array to group by.
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.
Create a object from [key, value]
tuples that returned from fn
with each item of items
as parameter.
The array to make object.
The function to return [key, value]
tuple for each item.
Create a map object as {item[key]: item}
format.
The array to make object.
The key of items in array to get value as index keys.
Creates an array from picking intersect values that are included in all given arrays
.
The arrays to get intersection from.
Just like setInterval
, call fn
every ms
millisecons.
The function to call.
The interval time in millisecons.
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.
The element to check overflow state.
Returns whether the year of date
is a leap year, which contains 366 days.
The date to test.
Test if element is playing an animation.
The element to test animation at.
Returns whether date values from year to second are associated with a real date.
Year count.
Month count.
Date count.
Hour count.
Minute count.
Second count.
Check if element is visible in current viewport, element must also be not fully covered. Note that this method may cause page reflow.
The element to check if is in view.
Specify how much percentage of el size implies in view.
Returns the maximun value of numberic values in array
.
Returns -Infinity
if no items in array
.
The array of numberic values.
Returns the index of the maximun value of the array items.R
Returns -1
if no items or all values are -Infinity
.
The array of data items.
The map function to map each item to a number.
Returns the minimal value of the numberic values in array
.
Returns Infinity
if no items in array
.
The array of numberic values.
Returns the index of the minimal value of the array items.
Returns -1
if no items or all values are Infinity
.
The array of data items.
The map function to map each item to a number.
Like a % b
, but always returns positive number. e.g., mod(-1, 2) = 1
.
The number to calculate modulo.
The modulo of number.
Sort object type items inside array.
The array to order.
instantiated ff.Order
.
Sort items of object type inside array by a specified orders.
The array to order.
Rest parameters of type key
or OrderFunction
which will return a key
, or [key / OrderFunction, OrderDirection]
.
Parse duration
string like 1h1m
or 01:01:00
to date object {y, M, d, h, m, s}
.
string like 1h1m
or 01:01:00
.
Parse duration string like 1h1m
or 01:01:00
to second count.
string like 1h1m
or 01:01:00
.
Parse url
search part to a query parameter object.
The url to parse query parameters.
Parse second count to date object {y, M, d, h, m, s}
.
The second count.
The unit to use when parsing, default value is yMdhms
.
Run eash task of tasks
in a queue.
Returns a promise which will be resolved after queue finished.
The task array which will be passed to handler in order.
The handler to handle each task.
Specifies how many tasks to run simultaneously.
Run eash task of tasks
in a queue.
Returns a promise which will be resolved if every tasks match handler
.
The task array which will be passed to handler in order.
The handler to handle each task. It should returns a boolean value.
Specifies how many tasks to run simultaneously.
Run eash task of tasks
in a queue.
Returns a promise which will be resolved with returned values from handler
after queue finished.
The task array which will be passed to handler in order.
The handler to handle each task. It should returns a value.
Specifies how many tasks to run simultaneously.
Run eash task of tasks
in a queue.
Returns a promise which will be resolved if some tasks match handler
.
The task array which will be passed to handler in order.
The handler to handle each task. It should returns a boolean value.
Specifies how many tasks to run simultaneously.
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.
The array to remove items.
The items removed from array.
Removes the first item which match fn
from array
. Returns the removed items.
The array to remove items.
The test function to determinae whether to remove item.
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.
The array to remove items.
The test function to determinae whether to remove item.
Returns the array filled with value
and repeated for count
times.
It's just like string.repeat(count).
The value to repeat.
Count of times to repeat.
Scroll scrollbars to make element in the top of the viewport area.
Returns true
if scrolled.
The element you want to see.
Keep a little distance from the element's edge to the viewport's edge.
If specified, will run an animation when scrolling.
The animation esing.
Scroll scrollbars of closest scroll wrapper for minimal distance to make element be fully visible.
Returns true
if scrolled.
The element you want to see.
Keep a little distance from the element's edge to the viewport's edge.
If specified, will run an animation when scrolling.
The animation esing.
Select sub matches from string
by matching re
, then format with a template
string.
Returns the format result.
The string to select sub matches.
The RegExp to execute on string.
Replace $i
or $<name>
to corresponding match.
Select all the sub matches from string
by matching re
, then format with a template
string.
The string to select sub matches.
The RegExp to execute on string.
Replace $i
or $<name>
to corresponding match.
Select a single file that matches MIME
type from clicking a <input type="file">
.
Select a single folder from clicking a <input type="file" directory>
.
Select multiple files match MIME
type from clicking a <input type="file" multiple>
.
Select multiple folders from clicking a <input type="file" directory multiple>
.
Set one of the date values for date
according to specified unit
.
The date object to set value.
The date value to set.
The unit type, must be one of 'y', 'M', 'd', 'h', 'm', 's'
.
Set value of specified property
for element.
The element to set CSS value.
The property name in camel case. backgroundColor
as example.
The value in string or number type. E.g.: value 100
for width
property wil be fixed to 100px
.
Assign styles whose properties and values specified by propertyMap
to element.
The element to set CSS values.
The property name in camel case, backgroundColor
as example.
Returns a promise which will be resolved after ms
milliseconds.
The sleep time in milliseconds.
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.
The function to throttle.
The time period which allows at most one calling. If omitted, uses requestAnimationFrame
to throttle.
Stop executing standard web animation on element. Returns whether stopped animation.
The element to stop animation at.
Returns the sub match in specified index
from executing re
on string
.
The string to select sub match.
The RegExp to execute on string.
Select the sub match in the index from match resul.
Returns array of all the sub matches from executing re
on string
.
The string to select sub matches.
The RegExp to execute on string.
Slice each match result from, specify to 0
to include whole match, 1
to only include sub matches, default value is 1
.
For each match result from executing re
on string
, picks specified index
of sub matches.
Rreturns array of picked items.
The string to select sub match.
The RegExp to execute on string.
Select the sub match in the index from each match result.
Returns the sum of all the numberic values in array
.
The array of numberic values.
Throttle function calls, fn
will not be called for twice in each ms
millisecons
Note that it doesn't ensure the last calling.
The function to throttle.
The time period in which allows at most one calling. If omitted, uses requestAnimationFrame
to throttle.
Just like setTimeout
, call fn
after ms
millisecons.
The function to call later.
The timeout time in millisecons.
Transform string
to camer case type.
The string to transform.
Transform string
to dash case type by joining words with -
.
The string to transform.
Like number.toFixed
, but alway return a number. e.g., toPower(12.345, 2) = 12.34
.
The number to fix.
The decimal count that number
will correct to, default value is 0
.
Like number.toFixed
, but always returns a number. e.g., toPower(1234, 2) = 1200
.
The number to fix.
The power that number
will correct to, default value is 0
.
Nearly same with number.toPrecision
, except it always return a number.
The number to transfer to specified precision.
The precision value betweens 1-21
, default value is 1
.
Transform string
to dash case by joining words with _
.
The string to transform.
Creates an array composed of all the unique values from given arrays
.
The arrays to get union from.
Returns a new array from picking unique items from array
and removing duplicate items.
The array to remove duplicate items.
Combine base url
and query
parameters to a new URL.
The base url.
The query parameter object.
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.
The element to watch.
The state to watch, can be 'show' | 'hide' | 'inview' | 'outview' | 'size' | 'rect'
.
The callback to call when state changed.
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.
The element to watch.
The state to watch, can be 'show' | 'hide' | 'inview' | 'outview' | 'size' | 'rect'
.
The callback to call when state changed.
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.
The element to watch.
The state to watch, can be 'show' | 'hide' | 'inview' | 'outview'
.
The callback to call when state becomes true.
Generated using TypeDoc
Align Where of current element to where of the target.