Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Emoji picker.

 *

 * @module core/emoji/picker

 * @copyright  2019 Ryan Wyllie <ryan@moodle.com>

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

 */

import LocalStorage from 'core/localstorage';

import * as EmojiData from 'core/emoji/data';

import {throttle, debounce} from 'core/utils';

import {getString} from 'core/str';

import {render as renderTemplate} from 'core/templates';

const VISIBLE_ROW_COUNT = 10;

const ROW_RENDER_BUFFER_COUNT = 5;

const RECENT_EMOJIS_STORAGE_KEY = 'moodle-recent-emojis';

const ROW_HEIGHT_RAW = 40;

const EMOJIS_PER_ROW = 7;

const MAX_RECENT_COUNT = EMOJIS_PER_ROW * 3;

const ROW_TYPE = {

    EMOJI: 0,

    HEADER: 1

};

const SELECTORS = {

    CATEGORY_SELECTOR: '[data-action="show-category"]',

    EMOJIS_CONTAINER: '[data-region="emojis-container"]',

    EMOJI_PREVIEW: '[data-region="emoji-preview"]',

    EMOJI_SHORT_NAME: '[data-region="emoji-short-name"]',

    ROW_CONTAINER: '[data-region="row-container"]',

    SEARCH_INPUT: '[data-region="search-input"]',

    SEARCH_RESULTS_CONTAINER: '[data-region="search-results-container"]'

};

/**

 * Create the row data for a category.

 *

 * @method

 * @param {String} categoryName The category name

 * @param {String} categoryDisplayName The category display name

 * @param {Array} emojis The emoji data

 * @param {Number} totalRowCount The total number of rows generated so far

 * @return {Array}

 */

const createRowDataForCategory = (categoryName, categoryDisplayName, emojis, totalRowCount) => {

    const rowData = [];

    rowData.push({

        index: totalRowCount + rowData.length,

        type: ROW_TYPE.HEADER,

        data: {

            name: categoryName,

            displayName: categoryDisplayName

        }

    });

    for (let i = 0; i < emojis.length; i += EMOJIS_PER_ROW) {

        const rowEmojis = emojis.slice(i, i + EMOJIS_PER_ROW);

        rowData.push({

            index: totalRowCount + rowData.length,

            type: ROW_TYPE.EMOJI,

            data: rowEmojis

        });

    }

    return rowData;

};

/**

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

 *

 * @method

 * @param {Array} rowData List of emoji row data

 * @return {Array}

 */

const addIndexesToRowData = (rowData) => {

    return rowData.map((data, index) => {

        return {...data, index};

    });

};

/**

 * Calculate the scroll position for the beginning of each category from

 * the row data.

 *

 * @method

 * @param {Array} rowData List of emoji row data

 * @return {Object}

 */

const getCategoryScrollPositionsFromRowData = (rowData) => {

    return rowData.reduce((carry, row, index) => {

        if (row.type === ROW_TYPE.HEADER) {

            carry[row.data.name] = index * ROW_HEIGHT_RAW;

        }

        return carry;

    }, {});

};

/**

 * Create a header row element for the category name.

 *

 * @method

 * @param {Number} rowIndex Index of the row in the row data

 * @param {String} name The category display name

 * @return {Element}

 */

const createHeaderRow = async(rowIndex, name) => {

    const context = {

        index: rowIndex,

        text: name

    };

    const html = await renderTemplate('core/emoji/header_row', context);

    const temp = document.createElement('div');

    temp.innerHTML = html;

    return temp.firstChild;

};

/**

 * Create an emoji row element.

 *

 * @method

 * @param {Number} rowIndex Index of the row in the row data

 * @param {Array} emojis The list of emoji data for the row

 * @return {Element}

 */

const createEmojiRow = async(rowIndex, emojis) => {

    const context = {

        index: rowIndex,

        emojis: emojis.map(emojiData => {

            const charCodes = emojiData.unified.split('-').map(code => `0x${code}`);

            const emojiText = String.fromCodePoint.apply(null, charCodes);

            return {

                shortnames: `:${emojiData.shortnames.join(': :')}:`,

                unified: emojiData.unified,

                text: emojiText,

                spacer: false

            };

        }),

        spacers: Array(EMOJIS_PER_ROW - emojis.length).fill(true)

    };

    const html = await renderTemplate('core/emoji/emoji_row', context);

    const temp = document.createElement('div');

    temp.innerHTML = html;

    return temp.firstChild;

};

/**

 * Check if the element is an emoji element.

 *

 * @method

 * @param {Element} element Element to check

 * @return {Bool}

 */

const isEmojiElement = element => element.getAttribute('data-short-names') !== null;

/**

 * Search from an element and up through it's ancestors to fine the category

 * selector element and return it.

 *

 * @method

 * @param {Element} element Element to begin searching from

 * @return {Element|null}

 */

const findCategorySelectorFromElement = element => {

    if (!element) {

        return null;

    }

    if (element.getAttribute('data-action') === 'show-category') {

        return element;

    } else {

        return findCategorySelectorFromElement(element.parentElement);

    }

};

const getCategorySelectorByCategoryName = (root, name) => {

    return root.querySelector(`[data-category="${name}"]`);

};

/**

 * Sets the given category selector element as active.

 *

 * @method

 * @param {Element} root The root picker element

 * @param {Element} element The category selector element to make active

 */

const setCategorySelectorActive = (root, element) => {

    const allCategorySelectors = root.querySelectorAll(SELECTORS.CATEGORY_SELECTOR);

    for (let i = 0; i < allCategorySelectors.length; i++) {

        const selector = allCategorySelectors[i];

        selector.classList.remove('selected');

    }

    element.classList.add('selected');

};

/**

 * Get the category selector element and the scroll positions for the previous and

 * next categories for the given scroll position.

 *

 * @method

 * @param {Element} root The picker root element

 * @param {Number} position The position to get the category for

 * @param {Object} categoryScrollPositions Set of scroll positions for all categories

 * @return {Array}

 */

const getCategoryByScrollPosition = (root, position, categoryScrollPositions) => {

    let positions = [];

    if (position < 0) {

        position = 0;

    }

    // Get all of the category positions.

    for (const categoryName in categoryScrollPositions) {

        const categoryPosition = categoryScrollPositions[categoryName];

        positions.push([categoryPosition, categoryName]);

    }

    // Sort the positions in ascending order.

    positions.sort(([a], [b]) => {

        if (a < b) {

            return -1;

        } else if (a > b) {

            return 1;

        } else {

            return 0;

        }

    });

    // Get the current category name as well as the previous and next category

    // positions from the sorted list of positions.

    const {categoryName, previousPosition, nextPosition} = positions.reduce(

        (carry, candidate) => {

            const [categoryPosition, categoryName] = candidate;

            if (categoryPosition <= position) {

                carry.categoryName = categoryName;

                carry.previousPosition = carry.currentPosition;

                carry.currentPosition = position;

            } else if (carry.nextPosition === null) {

                carry.nextPosition = categoryPosition;

            }

            return carry;

        },

        {

            categoryName: null,

            currentPosition: null,

            previousPosition: null,

            nextPosition: null

        }

    );

    return [getCategorySelectorByCategoryName(root, categoryName), previousPosition, nextPosition];

};

/**

 * Get the list of recent emojis data from local storage.

 *

 * @method

 * @return {Array}

 */

const getRecentEmojis = () => {

    const storedData = LocalStorage.get(RECENT_EMOJIS_STORAGE_KEY);

    return storedData ? JSON.parse(storedData) : [];

};

/**

 * Save the list of recent emojis in local storage.

 *

 * @method

 * @param {Array} recentEmojis List of emoji data to save

 */

const saveRecentEmoji = (recentEmojis) => {

    LocalStorage.set(RECENT_EMOJIS_STORAGE_KEY, JSON.stringify(recentEmojis));

};

/**

 * 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.

 *

 * @method

 * @param {Array} rowData The emoji rows data

 * @param {Number} recentEmojiRowCount Count of the recent emoji rows

 * @param {Object} newEmoji The emoji data for the emoji to add to the recent emoji list

 * @return {Array}

 */

const addRecentEmoji = (rowData, recentEmojiRowCount, newEmoji) => {

    // The first set of rows is always the recent emojis.

    const categoryName = rowData[0].data.name;

    const categoryDisplayName = rowData[0].data.displayName;

    const recentEmojis = getRecentEmojis();

    // Add the new emoji to the start of the list of recent emojis.

    let newRecentEmojis = [newEmoji, ...recentEmojis.filter(emoji => emoji.unified != newEmoji.unified)];

    // Limit the number of recent emojis.

    newRecentEmojis = newRecentEmojis.slice(0, MAX_RECENT_COUNT);

    const newRecentEmojiRowData = createRowDataForCategory(categoryName, categoryDisplayName, newRecentEmojis);

    // Save the new list in local storage.

    saveRecentEmoji(newRecentEmojis);

    return [

        // Return the new rowData and re-index it to make sure it's all correct.

        addIndexesToRowData(newRecentEmojiRowData.concat(rowData.slice(recentEmojiRowCount))),

        newRecentEmojiRowData.length

    ];

};

/**

 * 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.

 *

 * @method

 * @param {Number} scrollPosition Scroll position within the emoji container

 * @param {Number} visibleRowCount How many rows should be visible

 * @param {Array} rowData The emoji rows data

 * @return {Array}

 */

const getRowsToRender = (scrollPosition, visibleRowCount, rowData) => {

    const minVisibleRow = scrollPosition > ROW_HEIGHT_RAW ? Math.floor(scrollPosition / ROW_HEIGHT_RAW) : 0;

    const start = minVisibleRow >= ROW_RENDER_BUFFER_COUNT ? minVisibleRow - ROW_RENDER_BUFFER_COUNT : minVisibleRow;

    const end = minVisibleRow + visibleRowCount + ROW_RENDER_BUFFER_COUNT;

    const rows = rowData.slice(start, end);

    return rows;

};

/**

 * Create a row element from the row data.

 *

 * @method

 * @param {Object} rowData The emoji row data

 * @return {Element}

 */

const createRowElement = async(rowData) => {

    let row = null;

    if (rowData.type === ROW_TYPE.HEADER) {

        row = await createHeaderRow(rowData.index, rowData.data.displayName);

    } else {

        row = await createEmojiRow(rowData.index, rowData.data);

    }

    row.style.position = 'absolute';

    row.style.left = 0;

    row.style.right = 0;

    row.style.top = `${rowData.index * ROW_HEIGHT_RAW}px`;

    return row;

};

/**

 * Check if the given rows match.

 *

 * @method

 * @param {Object} a The first row

 * @param {Object} b The second row

 * @return {Bool}

 */

const doRowsMatch = (a, b) => {

    if (a.index !== b.index) {

        return false;

    }

    if (a.type !== b.type) {

        return false;

    }

    if (typeof a.data != typeof b.data) {

        return false;

    }

    if (a.type === ROW_TYPE.HEADER) {

        return a.data.name === b.data.name;

    } else {

        if (a.data.length !== b.data.length) {

            return false;

        }

        for (let i = 0; i < a.data.length; i++) {

            if (a.data[i].unified != b.data[i].unified) {

                return false;

            }

        }

    }

    return true;

};

/**

 * 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.

 *

 * @method

 * @param {Element} rowContainer The container element for the emoji rows

 * @param {Array} currentRows List of row data that matches the currently visible rows

 * @param {Array} nextRows List of row data containing the new list of rows to be made visible

 */

const renderRows = async(rowContainer, currentRows, nextRows) => {

    // We need to add any rows that are in nextRows but not in currentRows.

    const toAdd = nextRows.filter(nextRow => !currentRows.some(currentRow => doRowsMatch(currentRow, nextRow)));

    // Remember which rows will still be visible so that we can insert our element in the correct place in the DOM.

    let toKeep = currentRows.filter(currentRow => nextRows.some(nextRow => doRowsMatch(currentRow, nextRow)));

    // We need to remove any rows that are in currentRows but not in nextRows.

    const toRemove = currentRows.filter(currentRow => !nextRows.some(nextRow => doRowsMatch(currentRow, nextRow)));

    const toRemoveElements = toRemove.map(rowData => rowContainer.querySelectorAll(`[data-row="${rowData.index}"]`));

    // Render all of the templates first.

    const rows = await Promise.all(toAdd.map(rowData => createRowElement(rowData)));

    rows.forEach((row, index) => {

        const rowData = toAdd[index];

        let nextRowIndex = null;

        for (let i = 0; i < toKeep.length; i++) {

            const candidate = toKeep[i];

            if (candidate.index > rowData.index) {

                nextRowIndex = i;

                break;

            }

        }

        // Make sure the elements get added to the DOM in the correct order (ascending by row data index)

        // so that they appear naturally in the tab order.

        if (nextRowIndex !== null) {

            const nextRowData = toKeep[nextRowIndex];

            const nextRowNode = rowContainer.querySelector(`[data-row="${nextRowData.index}"]`);

            rowContainer.insertBefore(row, nextRowNode);

            toKeep.splice(nextRowIndex, 0, toKeep);

        } else {

            toKeep.push(rowData);

            rowContainer.appendChild(row);

        }

    });

    toRemoveElements.forEach(rows => {

        for (let i = 0; i < rows.length; i++) {

            const row = rows[i];

            rowContainer.removeChild(row);

        }

    });

};

/**

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

 * position.

 *

 * @method

 * @param {Element} rowContainer The container element for the emoji rows

 * @return {Function}

 */

const generateRenderRowsAtPositionFunction = (rowContainer) => {

    let currentRows = [];

    let nextRows = [];

    let rowCount = 0;

    let isRendering = false;

    const renderNextRows = async() => {

        if (!nextRows.length) {

            return;

        }

        if (isRendering) {

            return;

        }

        isRendering = true;

        const nextRowsToRender = nextRows.slice();

        nextRows = [];

        await renderRows(rowContainer, currentRows, nextRowsToRender);

        currentRows = nextRowsToRender;

        isRendering = false;

        renderNextRows();

    };

    return (scrollPosition, rowData, rowLimit = VISIBLE_ROW_COUNT) => {

        nextRows = getRowsToRender(scrollPosition, rowLimit, rowData);

        renderNextRows();

        if (rowCount !== rowData.length) {

            // Adjust the height of the container to match the number of rows.

            rowContainer.style.height = `${rowData.length * ROW_HEIGHT_RAW}px`;

        }

        rowCount = rowData.length;

    };

};

/**

 * Show the search results container and hide the emoji container.

 *

 * @method

 * @param {Element} emojiContainer The emojis container

 * @param {Element} searchResultsContainer The search results container

 */

const showSearchResults = (emojiContainer, searchResultsContainer) => {

    searchResultsContainer.classList.remove('hidden');

    emojiContainer.classList.add('hidden');

};

/**

 * Hide the search result container and show the emojis container.

 *

 * @method

 * @param {Element} emojiContainer The emojis container

 * @param {Element} searchResultsContainer The search results container

 * @param {Element} searchInput The search input

 */

const clearSearch = (emojiContainer, searchResultsContainer, searchInput) => {

    searchResultsContainer.classList.add('hidden');

    emojiContainer.classList.remove('hidden');

    searchInput.value = '';

};

/**

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

 *

 * @method

 * @param {Element} emojiPreview The emoji preview element

 * @param {Element} emojiShortName The emoji short name element

 * @return {Function}

 */

const getHandleMouseEnter = (emojiPreview, emojiShortName) => {

    return (e) => {

        const target = e.target;

        if (isEmojiElement(target)) {

            emojiShortName.textContent = target.getAttribute('data-short-names');

            emojiPreview.textContent = target.textContent;

        }

    };

};

/**

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

 *

 * @method

 * @param {Element} emojiPreview The emoji preview element

 * @param {Element} emojiShortName The emoji short name element

 * @return {Function}

 */

const getHandleMouseLeave = (emojiPreview, emojiShortName) => {

    return (e) => {

        const target = e.target;

        if (isEmojiElement(target)) {

            emojiShortName.textContent = '';

            emojiPreview.textContent = '';

        }

    };

};

/**

 * 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.

 *

 * @method

 * @param {Number} recentEmojiRowCount Number of rows of recent emojis

 * @param {Element} emojiContainer Container element for the visible of emojis

 * @param {Element} searchResultsContainer Contaienr element for the search results

 * @param {Element} searchInput Search input element

 * @param {Function} selectCallback Callback function to execute when a user selects an emoji

 * @param {Function} renderAtPosition Render function to display current visible emojis

 * @return {Function}

 */

const getHandleClick = (

    recentEmojiRowCount,

    emojiContainer,

    searchResultsContainer,

    searchInput,

    selectCallback,

    renderAtPosition

) => {

    return (e, rowData, categoryScrollPositions) => {

        const target = e.target;

        let newRowData = rowData;

        let newCategoryScrollPositions = categoryScrollPositions;

        // Hide the search results if they are visible.

        clearSearch(emojiContainer, searchResultsContainer, searchInput);

        if (isEmojiElement(target)) {

            // Emoji selected.

            const unified = target.getAttribute('data-unified');

            const shortnames = target.getAttribute('data-short-names').replace(/:/g, '').split(' ');

            // Build the emoji data from the selected element.

            const emojiData = {unified, shortnames};

            const currentScrollTop = emojiContainer.scrollTop;

            const isRecentEmojiRowVisible = emojiContainer.querySelector(`[data-row="${recentEmojiRowCount - 1}"]`) !== null;

            // Save the selected emoji in the recent emojis list.

            [newRowData, recentEmojiRowCount] = addRecentEmoji(rowData, recentEmojiRowCount, emojiData);

            // Re-index the category scroll positions because the additional recent emoji may have

            // changed their positions.

            newCategoryScrollPositions = getCategoryScrollPositionsFromRowData(newRowData);

            if (isRecentEmojiRowVisible) {

                // If the list of recent emojis is currently visible then we need to re-render the emojis

                // to update the display and show the newly selected recent emoji.

                renderAtPosition(currentScrollTop, newRowData);

            }

            // Call the client's callback function with the selected emoji.

            selectCallback(target.textContent);

            // Return the newly calculated row data and scroll positions.

            return [newRowData, newCategoryScrollPositions];

        }

        const categorySelector = findCategorySelectorFromElement(target);

        if (categorySelector) {

            // Category selector.

            const selectedCategory = categorySelector.getAttribute('data-category');

            const position = categoryScrollPositions[selectedCategory];

            // Scroll the container to the selected category. This will trigger the

            // on scroll handler to re-render the visibile emojis.

            emojiContainer.scrollTop = position;

        }

        return [newRowData, newCategoryScrollPositions];

    };

};

/**

 * 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.

 *

 * @method

 * @param {Element} root The picker root element

 * @param {Number} currentVisibleRowScrollPosition The current scroll position of the container

 * @param {Element} emojiContainer The emojis container element

 * @param {Object} initialCategoryScrollPositions Scroll positions for each category

 * @param {Function} renderAtPosition Function to render the appropriate emojis for a scroll position

 * @return {Function}

 */

const getHandleScroll = (

    root,

    currentVisibleRowScrollPosition,

    emojiContainer,

    initialCategoryScrollPositions,

    renderAtPosition

) => {

    // Scope some local variables to track the scroll positions of the categories. We need to

    // recalculate these because adding recent emojis can change those positions by adding

    // additional rows.

    let [

        currentCategoryElement,

        previousCategoryPosition,

        nextCategoryPosition

    ] = getCategoryByScrollPosition(root, emojiContainer.scrollTop, initialCategoryScrollPositions);

    return (categoryScrollPositions, rowData) => {

        const newScrollPosition = emojiContainer.scrollTop;

        const upperScrollBound = currentVisibleRowScrollPosition + ROW_HEIGHT_RAW;

        const lowerScrollBound = currentVisibleRowScrollPosition - ROW_HEIGHT_RAW;

        // We only need to update the active category indicator if the user has scrolled into a

        // new category scroll position.

        const updateActiveCategory = (newScrollPosition >= nextCategoryPosition) ||

                       (newScrollPosition < previousCategoryPosition);

        // We only need to render new emoji rows if the user has scrolled far enough that a new row

        // would be visible (i.e. they've scrolled up or down more than 40px - the height of a row).

        const updateRenderRows = (newScrollPosition < lowerScrollBound) || (newScrollPosition > upperScrollBound);

        if (updateActiveCategory) {

            // New category is visible so update the active category selector and re-index the

            // positions incase anything has changed.

            [

                currentCategoryElement,

                previousCategoryPosition,

                nextCategoryPosition

            ] = getCategoryByScrollPosition(root, newScrollPosition, categoryScrollPositions);

            setCategorySelectorActive(root, currentCategoryElement);

        }

        if (updateRenderRows) {

            // A new row should be visible so re-render the visible emojis at this new position.

            // We request an animation frame from the browser so that we're not blocking anything.

            // The animation only needs to occur as soon as the browser is ready not immediately.

            requestAnimationFrame(() => {

                renderAtPosition(newScrollPosition, rowData);

                // Remember the updated position.

                currentVisibleRowScrollPosition = newScrollPosition;

            });

        }

    };

};

/**

 * Build the function that handles search input from the user.

 *

 * @method

 * @param {Element} searchInput The search input element

 * @param {Element} searchResultsContainer Container element to display the search results

 * @param {Element} emojiContainer Container element for the emoji rows

 * @return {Function}

 */

const getHandleSearch = (searchInput, searchResultsContainer, emojiContainer) => {

    const rowContainer = searchResultsContainer.querySelector(SELECTORS.ROW_CONTAINER);

    // Build a render function for the search results.

    const renderSearchResultsAtPosition = generateRenderRowsAtPositionFunction(rowContainer);

    searchResultsContainer.appendChild(rowContainer);

    return async() => {

        const searchTerm = searchInput.value.toLowerCase();

        if (searchTerm) {

            // Display the search results container and hide the emojis container.

            showSearchResults(emojiContainer, searchResultsContainer);

            // Find which emojis match the user's search input.

            const matchingEmojis = Object.keys(EmojiData.byShortName).reduce((carry, shortName) => {

                if (shortName.includes(searchTerm)) {

                    carry.push({

                        shortnames: [shortName],

                        unified: EmojiData.byShortName[shortName]

                    });

                }

                return carry;

            }, []);

            const searchResultsString = await getString('searchresults', 'core');

            const rowData = createRowDataForCategory(searchResultsString, searchResultsString, matchingEmojis, 0);

            // Show the emoji rows for the search results.

            renderSearchResultsAtPosition(0, rowData, rowData.length);

        } else {

            // Hide the search container and show the emojis container.

            clearSearch(emojiContainer, searchResultsContainer, searchInput);

        }

    };

};

/**

 * Register the emoji picker event listeners.

 *

 * @method

 * @param {Element} root The picker root element

 * @param {Element} emojiContainer Root element containing the list of visible emojis

 * @param {Function} renderAtPosition Function to render the visible emojis at a given scroll position

 * @param {Number} currentVisibleRowScrollPosition What is the current scroll position

 * @param {Function} selectCallback Function to execute when the user picks an emoji

 * @param {Object} categoryScrollPositions Scroll positions for where each of the emoji categories begin

 * @param {Array} rowData Data representing each of the display rows for hte emoji container

 * @param {Number} recentEmojiRowCount Number of rows of recent emojis

 */

const registerEventListeners = (

    root,

    emojiContainer,

    renderAtPosition,

    currentVisibleRowScrollPosition,

    selectCallback,

    categoryScrollPositions,

    rowData,

    recentEmojiRowCount

) => {

    const searchInput = root.querySelector(SELECTORS.SEARCH_INPUT);

    const searchResultsContainer = root.querySelector(SELECTORS.SEARCH_RESULTS_CONTAINER);

    const emojiPreview = root.querySelector(SELECTORS.EMOJI_PREVIEW);

    const emojiShortName = root.querySelector(SELECTORS.EMOJI_SHORT_NAME);

    // Build the click handler function.

    const clickHandler = getHandleClick(

        recentEmojiRowCount,

        emojiContainer,

        searchResultsContainer,

        searchInput,

        selectCallback,

        renderAtPosition

    );

    // Build the scroll handler function.

    const scrollHandler = getHandleScroll(

        root,

        currentVisibleRowScrollPosition,

        emojiContainer,

        categoryScrollPositions,

        renderAtPosition

    );

    const searchHandler = getHandleSearch(searchInput, searchResultsContainer, emojiContainer);

    // Mouse enter/leave events to show the emoji preview on hover or focus.

    root.addEventListener('focus', getHandleMouseEnter(emojiPreview, emojiShortName), true);

    root.addEventListener('blur', getHandleMouseLeave(emojiPreview, emojiShortName), true);

    root.addEventListener('mouseenter', getHandleMouseEnter(emojiPreview, emojiShortName), true);

    root.addEventListener('mouseleave', getHandleMouseLeave(emojiPreview, emojiShortName), true);

    // User selects an emoji or clicks on one of the emoji category selectors.

    root.addEventListener('click', e => {

        // Update the row data and category scroll positions because they may have changes if the

        // user selects an emoji which updates the recent emojis list.

        [rowData, categoryScrollPositions] = clickHandler(e, rowData, categoryScrollPositions);

    });

    // Throttle the scroll event to only execute once every 50 milliseconds to prevent performance issues

    // in the browser when re-rendering the picker emojis. The scroll event fires a lot otherwise.

    emojiContainer.addEventListener('scroll', throttle(() => scrollHandler(categoryScrollPositions, rowData), 50));

    // Debounce the search input so that it only executes 200 milliseconds after the user has finished typing.

    searchInput.addEventListener('input', debounce(searchHandler, 200));

};

/**

 * Initialise the emoji picker.

 *

 * @method

 * @param {Element} root The root element for the picker

 * @param {Function} selectCallback Callback for when the user selects an emoji

 */

export default (root, selectCallback) => {

    const emojiContainer = root.querySelector(SELECTORS.EMOJIS_CONTAINER);

    const rowContainer = emojiContainer.querySelector(SELECTORS.ROW_CONTAINER);

    const recentEmojis = getRecentEmojis();

    // Add the recent emojis category to the list of standard categories.

    const allData = [{

        name: 'Recent',

        emojis: recentEmojis

    }, ...EmojiData.byCategory];

    let rowData = [];

    let recentEmojiRowCount = 0;

    /**

     * Split categories data into rows which represent how they will be displayed in the

     * picker. Each category will add a row containing the display name for the category

     * and a row for every 9 emojis in the category. The row data will be used to calculate

     * which emojis should be visible in the picker at any given time.

     *

     * E.g.

     * input = [

     *  {name: 'example1', emojis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]},

     *  {name: 'example2', emojis: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]},

     * ]

     * output = [

     *      {type: 'categoryName': data: 'Example 1'},

     *      {type: 'emojiRow': data: [1, 2, 3, 4, 5, 6, 7, 8, 9]},

     *      {type: 'emojiRow': data: [10, 11, 12]},

     *      {type: 'categoryName': data: 'Example 2'},

     *      {type: 'emojiRow': data: [13, 14, 15, 16, 17, 18, 19, 20, 21]},

     *      {type: 'emojiRow': data: [22, 23]},

     * ]

     */

    allData.forEach(category => {

        const categorySelector = getCategorySelectorByCategoryName(root, category.name);

        // Get the display name from the category selector button so that we don't need to

        // send an ajax request for the string.

        const categoryDisplayName = categorySelector.title;

        const categoryRowData = createRowDataForCategory(category.name, categoryDisplayName, category.emojis, rowData.length);

        if (category.name === 'Recent') {

            // Remember how many recent emoji rows there are because it needs to be used to

            // re-index the row data later when we're adding more recent emojis.

            recentEmojiRowCount = categoryRowData.length;

        }

        rowData = rowData.concat(categoryRowData);

    });

    // Index the row data so that we can calculate which rows should be visible.

    rowData = addIndexesToRowData(rowData);

    // Calculate the scroll positions for each of the categories within the emoji container.

    // These are used to know where to jump to when the user selects a specific category.

    const categoryScrollPositions = getCategoryScrollPositionsFromRowData(rowData);

    const renderAtPosition = generateRenderRowsAtPositionFunction(rowContainer);

    // Display the initial set of emojis.

    renderAtPosition(0, rowData);

    registerEventListeners(

        root,

        emojiContainer,

        renderAtPosition,

        0,

        selectCallback,

        categoryScrollPositions,

        rowData,

        recentEmojiRowCount

    );

};