Highlighter Controller

Highlighter Controller is a Stimulus controller for highlighting words.

Attributes

HTML Attributes

These are standard HTML attributes (with no prefix) used by Table Filter.

Attribute Element(s) Default Value(s) Description
aria-busy (root)
 false true
false
 Highlighter will set this to true any time it is applying highlighting.
You can use the value in your CSS to indicate that work is in progress.

data- Attributes

All of these attributes are prefixed with "data-" in the attribute name.

Attribute Element(s) Default Value(s) Description
controller (any)
 highlighter This attribute provides the highlighter functionality.

data-highlighter- Attributes

All of these attributes are prefixed with "data-highlighter-" in the attribute name.

Attribute Element(s) Default Value(s) Description
class (controller)
 highlight The class to add to the highlighted words.
color (controller)
 yellow The color to use for the highlighted words.
Only used if no style is applied to the highlight class.
words (controller)
 The words to highlight. Space-delimited.

Events

highlighter: Events

These are custom events that the controller will fire when it takes certain actions.

All of these events are prefixed by "highlighter:".

Event Parameters Description
initialized Called any time that the controller is initialized.
connected Called any time that the controller is connected.
disconnected Called any time that the controller is disconnected.
highlighted

target: (the element in which words are highlighted).

words: (the words that were highlighted).

 Called any time that the controller highlights words.

Methods

While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.

Method Returns Arguments Event(s) Description
getHighlightClass (string)

Get the class that will be applied to highlighted words.
This will be the value of the "data-highlighter-class" attribute.
getHighlightColor (string)

Get the color that will be applied to highlighted words if no styles are set for the class.
This will be the value of the "data-highlighter-color" attribute.
addWord

Add a word to the list of words to be highlighted.
This will add the word to the "data-highlighter-words" attribute.
If the attribute is not set, it will create it.
getWordsArray (array)

Get the words that will be highlighted.
This will be the value of the "data-highlighter-words" attribute.
If the attribute is not set, it will return an empty array.
getWordsString (string)

Get the words that will be highlighted.
This will be the value of the "data-highlighter-words" attribute.
If the attribute is not set, it will return an empty string.
Words are space-delimited.
Example: "word1 word2 word3"
highlightWords

Highlights the words in the data-highlighter-words attribute.
setHighlightClass className (string)

Set the class that will be applied to highlighted words.
This will set the value of the "data-highlighter-class" attribute.
setHighlightColor color (string)

Set the color that will be applied to highlighted words if no style is applied to the highlight class externally.
This will set the value of the "data-highlighter-color" attribute.
setWordsArray words (array)

Set the words that will be highlighted.
This will set the value of the "data-highlighter-words" attribute.
setWordsString words (string)

Set the words that will be highlighted.
This will set the value of the "data-highlighter-words" attribute.
Words are space-delimited.
Example: "word1 word2 word3"