Expand all

TruncatableTextField

Represents any text field that might need to be truncated to be readable. Text will be adjusted to fit into its container.

More specifically, TruncatableTextField should be invoked with a fixed-height container as the first parameter and a flexible-width content (which gets its size from the text inside it) as the second one. The container gets overflow: hidden, and the content is placed inside it; if the content overflows the container, TruncatableTextField will cycle through a set of styles and apply to the container the first one that makes the content not overflow anymore. If none of the styles do that, the last one is applied anyway.

The list of styles can be customized; by default, they set progressively smaller font size, and the last one adds an ellipsis to the end. (An ellipsis element is automatically appended to the end of the container to help with this, but it is hidden unless made visible by one of the styles.)

grow() and shrink() can be used to show full text (by making the container flexible-height) and hiding them again; TruncatableTextField will not call them automatically (the caller class should e.g. set up a click handler on the ellipsis).

repaint() should be called after layout changes to keep the truncation accurate.

Constructor

new TruncatableTextField($container, $element, [options]) #

Parameters:

Name Type Attributes Description
$container jQuery

The container for the element.
$element jQuery

The element where we should put the text.
options Object optional
Properties:
Name Type Attributes Description
styles Array.<string> optional

a list of styles to try if the text does not fit into the container. Will stop at the first which makes the text fit; the last one will be used even if it does not make the text fit.
Source:

Properties

$element :jQuery #

The DOM element that holds text for this element.

Type:

Source:
The DOM element that holds text for this element.

$ellipsis :jQuery #

the element which marks that the text was truncated

Type:

Source:
the element which marks that the text was truncated

expanded :boolean #

true if the text is long enough to be truncated but the full text is shown

Type:

  • boolean
Source:
true if the text is long enough to be truncated but the full text is shown

normalTitle :string #

title attribute to show when the text is not truncated

Type:

  • string
Source:
title attribute to show when the text is not truncated

options :Object #

Type:

Source:

truncatedTitle :string #

title attribute to show when the text is not truncated

Type:

  • string
Source:
title attribute to show when the text is not truncated

Methods

changeStyle() #

Changes the element style if a certain length is reached.

Source:
Changes the element style if a certain length is reached.

grow() #

Makes the container flexible-width, thereby restoring the full text.

Source:
Makes the container flexible-width, thereby restoring the full text.

isTruncatable() → {boolean} #

Returns true if the text is long enough that it needs to be truncated.

Returns:

Type
boolean
Source:
Returns true if the text is long enough that it needs to be truncated.

isTruncated() → {boolean} #

Returns true if the text is truncated at the moment.

Returns:

Type
boolean
Source:
Returns true if the text is truncated at the moment.

repaint() #

Recalculate truncation after layout changes (such as resize)

Source:
Recalculate truncation after layout changes (such as resize)

set(value) #

Sets the string for the element.

Parameters:

Name Type Description
value string

Warning - unsafe HTML is allowed here.
Source:
Sets the string for the element.

setTitle(normal, truncated) #

Allows setting different titles for fully visible and for truncated text.

Parameters:

Name Type Description
normal string
truncated string
Source:
Allows setting different titles for fully visible and for truncated text.

shrink() #

Makes the container fixed-width, clipping the text. This will only add a .mw-mmv-ttf-truncated class; it's the caller's responsibility to define the fixed height for that class.

Source:
Makes the container fixed-width, clipping the text.

updateTitle() #

Selects the right title to use (for full or for truncated version). The title can be set with setTitle().

Source:
Selects the right title to use (for full or for truncated version).