core/emoji/picker

Emoji picker.

Source:

lib/amd/src/emoji/picker.js, line 16

Copyright:

2019 Ryan Wyllie

License:

http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

(require("core/emoji/picker"))(root, selectCallback)

Source:

lib/amd/src/emoji/picker.js, line 825

Initialise the emoji picker.

Parameters:

Name	Type	Description
`root`	Element	The root element for the picker
`selectCallback`	function	Callback for when the user selects an emoji

Methods

(inner) addIndexesToRowData(rowData) → {Array}

Source:

lib/amd/src/emoji/picker.js, line 89

Add each row's index to it's value in the row data.

Parameters:

Name	Type	Description
`rowData`	Array	List of emoji row data

Returns:

Type: Array

(inner) addRecentEmoji(rowData, recentEmojiRowCount, newEmoji) → {Array}

Source:

lib/amd/src/emoji/picker.js, line 307

Add an emoji data to the set of recent emojis. This function will update the row data to ensure that the recent emoji rows are correct and all of the rows are re-indexed.

The new set of recent emojis are saved in local storage and the full set of updated row data and new emoji row count are returned.

Parameters:

Name	Type	Description
`rowData`	Array	The emoji rows data
`recentEmojiRowCount`	Number	Count of the recent emoji rows
`newEmoji`	Object	The emoji data for the emoji to add to the recent emoji list

Returns:

Type: Array

(inner) clearSearch(emojiContainer, searchResultsContainer, searchInput)

Source:

lib/amd/src/emoji/picker.js, line 529

Hide the search result container and show the emojis container.

Parameters:

Name	Type	Description
`emojiContainer`	Element	The emojis container
`searchResultsContainer`	Element	The search results container
`searchInput`	Element	The search input

(async, inner) createEmojiRow(rowIndex, emojis) → {Element}

Source:

lib/amd/src/emoji/picker.js, line 139

Create an emoji row element.

Parameters:

Name	Type	Description
`rowIndex`	Number	Index of the row in the row data
`emojis`	Array	The list of emoji data for the row

Returns:

Type: Element

(async, inner) createHeaderRow(rowIndex, name) → {Element}

Source:

lib/amd/src/emoji/picker.js, line 120

Create a header row element for the category name.

Parameters:

Name	Type	Description
`rowIndex`	Number	Index of the row in the row data
`name`	String	The category display name

Returns:

Type: Element

(inner) createRowDataForCategory(categoryName, categoryDisplayName, emojis, totalRowCount) → {Array}

Source:

lib/amd/src/emoji/picker.js, line 59

Create the row data for a category.

Parameters:

Name	Type	Description
`categoryName`	String	The category name
`categoryDisplayName`	String	The category display name
`emojis`	Array	The emoji data
`totalRowCount`	Number	The total number of rows generated so far

Returns:

Type: Array

(async, inner) createRowElement(rowData) → {Element}

Source:

lib/amd/src/emoji/picker.js, line 354

Create a row element from the row data.

Parameters:

Name	Type	Description
`rowData`	Object	The emoji row data

Returns:

Type: Element

(inner) doRowsMatch(a, b) → {Bool}

Source:

lib/amd/src/emoji/picker.js, line 378

Check if the given rows match.

Parameters:

Name	Type	Description
`a`	Object	The first row
`b`	Object	The second row

Returns:

Type: Bool

(inner) findCategorySelectorFromElement(element) → {Element|null}

Source:

lib/amd/src/emoji/picker.js, line 177

Search from an element and up through it's ancestors to fine the category selector element and return it.

Parameters:

Name	Type	Description
`element`	Element	Element to begin searching from

Returns:

Type: Element | null

(inner) generateRenderRowsAtPositionFunction(rowContainer) → {function}

Source:

lib/amd/src/emoji/picker.js, line 472

Build a function to render the visible emoji rows for a given scroll position.

Parameters:

Name	Type	Description
`rowContainer`	Element	The container element for the emoji rows

Returns:

Type: function

(inner) getCategoryByScrollPosition(root, position, categoryScrollPositions) → {Array}

Source:

lib/amd/src/emoji/picker.js, line 221

Get the category selector element and the scroll positions for the previous and next categories for the given scroll position.

Parameters:

Name	Type	Description
`root`	Element	The picker root element
`position`	Number	The position to get the category for
`categoryScrollPositions`	Object	Set of scroll positions for all categories

Returns:

Type: Array

(inner) getCategoryScrollPositionsFromRowData(rowData) → {Object}

Source:

lib/amd/src/emoji/picker.js, line 103

Calculate the scroll position for the beginning of each category from the row data.

Parameters:

Name	Type	Description
`rowData`	Array	List of emoji row data

Returns:

Type: Object

(inner) getHandleClick(recentEmojiRowCount, emojiContainer, searchResultsContainer, searchInput, selectCallback, renderAtPosition) → {function}

Source:

lib/amd/src/emoji/picker.js, line 586

Build the function to handle a user clicking something in the picker.

The function currently handles clicking on the category selector or selecting a specific emoji.

Parameters:

Name	Type	Description
`recentEmojiRowCount`	Number	Number of rows of recent emojis
`emojiContainer`	Element	Container element for the visible of emojis
`searchResultsContainer`	Element	Contaienr element for the search results
`searchInput`	Element	Search input element
`selectCallback`	function	Callback function to execute when a user selects an emoji
`renderAtPosition`	function	Render function to display current visible emojis

Returns:

Type: function

(inner) getHandleMouseEnter(emojiPreview, emojiShortName) → {function}

Source:

lib/amd/src/emoji/picker.js, line 543

Build function to handle mouse hovering an emoji. Shows the preview.

Parameters:

Name	Type	Description
`emojiPreview`	Element	The emoji preview element
`emojiShortName`	Element	The emoji short name element

Returns:

Type: function

(inner) getHandleMouseLeave(emojiPreview, emojiShortName) → {function}

Source:

lib/amd/src/emoji/picker.js, line 561

Build function to handle mouse leaving an emoji. Removes the preview.

Parameters:

Name	Type	Description
`emojiPreview`	Element	The emoji preview element
`emojiShortName`	Element	The emoji short name element

Returns:

Type: function

(inner) getHandleScroll(root, currentVisibleRowScrollPosition, emojiContainer, initialCategoryScrollPositions, renderAtPosition) → {function}

Source:

lib/amd/src/emoji/picker.js, line 658

Build the function that handles scrolling of the emoji container to display the correct emojis.

We render the emoji rows as they are needed rather than all up front so that we can avoid adding tends of thousands of elements to the DOM unnecessarily which would bog down performance.

Parameters:

Name	Type	Description
`root`	Element	The picker root element
`currentVisibleRowScrollPosition`	Number	The current scroll position of the container
`emojiContainer`	Element	The emojis container element
`initialCategoryScrollPositions`	Object	Scroll positions for each category
`renderAtPosition`	function	Function to render the appropriate emojis for a scroll position

Returns:

Type: function

(inner) getHandleSearch(searchInput, searchResultsContainer, emojiContainer) → {function}

Source:

lib/amd/src/emoji/picker.js, line 719

Build the function that handles search input from the user.

Parameters:

Name	Type	Description
`searchInput`	Element	The search input element
`searchResultsContainer`	Element	Container element to display the search results
`emojiContainer`	Element	Container element for the emoji rows

Returns:

Type: function

(inner) getRecentEmojis() → {Array}

Source:

lib/amd/src/emoji/picker.js, line 278

Get the list of recent emojis data from local storage.

Returns:

Type: Array

(inner) getRowsToRender(scrollPosition, visibleRowCount, rowData) → {Array}

Source:

lib/amd/src/emoji/picker.js, line 339

Calculate which rows should be visible based on the given scroll position. Adds a buffer to amount to either side of the total number of requested rows so that scrolling the emoji rows container is smooth.

Parameters:

Name	Type	Description
`scrollPosition`	Number	Scroll position within the emoji container
`visibleRowCount`	Number	How many rows should be visible
`rowData`	Array	The emoji rows data

Returns:

Type: Array

(inner) isEmojiElement(element) → {Bool}

Source:

lib/amd/src/emoji/picker.js, line 167

Check if the element is an emoji element.

Parameters:

Name	Type	Description
`element`	Element	Element to check

Returns:

Type: Bool

(inner) registerEventListeners(root, emojiContainer, renderAtPosition, currentVisibleRowScrollPosition, selectCallback, categoryScrollPositions, rowData, recentEmojiRowCount)

Source:

lib/amd/src/emoji/picker.js, line 767

Parameters:

Name	Type	Description
`root`	Element	The picker root element
`emojiContainer`	Element	Root element containing the list of visible emojis
`renderAtPosition`	function	Function to render the visible emojis at a given scroll position
`currentVisibleRowScrollPosition`	Number	What is the current scroll position
`selectCallback`	function	Function to execute when the user picks an emoji
`categoryScrollPositions`	Object	Scroll positions for where each of the emoji categories begin
`rowData`	Array	Data representing each of the display rows for hte emoji container
`recentEmojiRowCount`	Number	Number of rows of recent emojis

(async, inner) renderRows(rowContainer, currentRows, nextRows)

Source:

lib/amd/src/emoji/picker.js, line 418

Update the visible rows. Deletes any row elements that should no longer be visible and creates the newly visible row elements. Any rows that haven't changed visibility will be left untouched.

Parameters:

Name	Type	Description
`rowContainer`	Element	The container element for the emoji rows
`currentRows`	Array	List of row data that matches the currently visible rows
`nextRows`	Array	List of row data containing the new list of rows to be made visible

(inner) saveRecentEmoji(recentEmojis)

Source:

lib/amd/src/emoji/picker.js, line 289

Save the list of recent emojis in local storage.

Parameters:

Name	Type	Description
`recentEmojis`	Array	List of emoji data to save

(inner) setCategorySelectorActive(root, element)

Source:

lib/amd/src/emoji/picker.js, line 200

Sets the given category selector element as active.

Parameters:

Name	Type	Description
`root`	Element	The root picker element
`element`	Element	The category selector element to make active

(inner) showSearchResults(emojiContainer, searchResultsContainer)

Source:

lib/amd/src/emoji/picker.js, line 516

Show the search results container and hide the emoji container.

Parameters:

Name	Type	Description
`emojiContainer`	Element	The emojis container
`searchResultsContainer`	Element	The search results container