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 auto complete.

 *

 * @module core/emoji/auto_complete

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

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

 */

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

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

import {debounce} from 'core/utils';

import LocalStorage from 'core/localstorage';

import KeyCodes from 'core/key_codes';

const INPUT_DEBOUNCE_TIMER = 200;

const SUGGESTION_LIMIT = 50;

const MAX_RECENT_COUNT = 27;

const RECENT_EMOJIS_STORAGE_KEY = 'moodle-recent-emojis';

const SELECTORS = {

    EMOJI_BUTTON: '[data-region="emoji-button"]',

    ACTIVE_EMOJI_BUTTON: '[data-region="emoji-button"].active',

};

/**

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

 *

 * @return {Array}

 */

const getRecentEmojis = () => {

    const storedData = LocalStorage.get(RECENT_EMOJIS_STORAGE_KEY);

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

};

/**

 * Add an emoji data to the set of recent emojis. The new set of recent emojis are

 * saved in local storage.

 *

 * @param {String} unified The char chodes for the emoji

 * @param {String} shortName The emoji short name

 */

const addRecentEmoji = (unified, shortName) => {

    const newEmoji = {

        unified,

        shortnames: [shortName]

    };

    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);

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

};

/**

 * Get the actual emoji string from the short name.

 *

 * @param {String} shortName Emoji short name

 * @return {String|null}

 */

const getEmojiTextFromShortName = (shortName) => {

    const unified = EmojiData.byShortName[shortName];

    if (unified) {

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

        return String.fromCodePoint.apply(null, charCodes);

    } else {

        return null;

    }

};

/**

 * Render the auto complete list for the given short names.

 *

 * @param {Element} root The root container for the emoji auto complete

 * @param {Array} shortNames The list of short names for emoji suggestions to show

 */

const render = async(root, shortNames) => {

    const renderContext = {

        emojis: shortNames.map((shortName, index) => {

            return {

                active: index === 0,

                emojitext: getEmojiTextFromShortName(shortName),

                displayshortname: `:${shortName}:`,

                shortname: shortName,

                unified: EmojiData.byShortName[shortName]

            };

        })

    };

    const html = await renderTemplate('core/emoji/auto_complete', renderContext);

    root.innerHTML = html;

};

/**

 * Get the list of emoji short names that include the given search term. If

 * the search term is an empty string then the list of recently used emojis

 * will be returned.

 *

 * @param {String} searchTerm Text to match on

 * @param {Number} limit Maximum number of results to return

 * @return {Array}

 */

const searchEmojis = (searchTerm, limit) => {

    if (searchTerm === '') {

        return getRecentEmojis().map(data => data.shortnames[0]).slice(0, limit);

    } else {

        searchTerm = searchTerm.toLowerCase();

        return Object.keys(EmojiData.byShortName)

                .filter(shortName => shortName.includes(searchTerm))

                .slice(0, limit);

    }

};

/**

 * Get the current word at the given position (index) within the text.

 *

 * @param {String} text The text to process

 * @param {Number} position The position (index) within the text to match the word

 * @return {String}

 */

const getWordFromPosition = (text, position) => {

    const startMatches = text.slice(0, position).match(/(\S*)$/);

    const endMatches = text.slice(position).match(/^(\S*)/);

    let startText = '';

    let endText = '';

    if (startMatches) {

        startText = startMatches[startMatches.length - 1];

    }

    if (endMatches) {

        endText = endMatches[endMatches.length - 1];

    }

    return `${startText}${endText}`;

};

/**

 * Check if the given text is a full short name, i.e. has leading and trialing colon

 * characters.

 *

 * @param {String} text The text to process

 * @return {Bool}

 */

const isCompleteShortName = text => /^:[^:\s]+:$/.test(text);

/**

 * Check if the given text is a partial short name, i.e. has a leading colon but no

 * trailing colon.

 *

 * @param {String} text The text to process

 * @return {Bool}

 */

const isPartialShortName = text => /^:[^:\s]*$/.test(text);

/**

 * Remove the colon characters from the given text.

 *

 * @param {String} text The text to process

 * @return {String}

 */

const getShortNameFromText = text => text.replace(/:/g, '');

/**

 * Get the currently active emoji button element in the list of suggestions.

 *

 * @param {Element} root The emoji auto complete container element

 * @return {Element|null}

 */

const getActiveEmojiSuggestion = (root) => {

    return root.querySelector(SELECTORS.ACTIVE_EMOJI_BUTTON);

};

/**

 * Make the previous sibling of the current active emoji active.

 *

 * @param {Element} root The emoji auto complete container element

 */

const selectPreviousEmojiSuggestion = (root) => {

    const activeEmojiSuggestion = getActiveEmojiSuggestion(root);

    const previousSuggestion = activeEmojiSuggestion.previousElementSibling;

    if (previousSuggestion) {

        activeEmojiSuggestion.classList.remove('active');

        previousSuggestion.classList.add('active');

        previousSuggestion.scrollIntoView({behaviour: 'smooth', inline: 'center'});

    }

};

/**

 * Make the next sibling to the current active emoji active.

 *

 * @param {Element} root The emoji auto complete container element

 */

const selectNextEmojiSuggestion = (root) => {

    const activeEmojiSuggestion = getActiveEmojiSuggestion(root);

    const nextSuggestion = activeEmojiSuggestion.nextElementSibling;

    if (nextSuggestion) {

        activeEmojiSuggestion.classList.remove('active');

        nextSuggestion.classList.add('active');

        nextSuggestion.scrollIntoView({behaviour: 'smooth', inline: 'center'});

    }

};

/**

 * Trigger the select callback for the given emoji button element.

 *

 * @param {Element} element The emoji button element

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

 */

const selectEmojiElement = (element, selectCallback) => {

    const shortName = element.getAttribute('data-short-name');

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

    addRecentEmoji(unified, shortName);

    selectCallback(element.innerHTML.trim());

};

/**

 * Initialise the emoji auto complete.

 *

 * @method

 * @param {Element} root The root container element for the auto complete

 * @param {Element} textArea The text area element to monitor for auto complete

 * @param {Function} hasSuggestionCallback Callback for when there are auto-complete suggestions

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

 */

export default (root, textArea, hasSuggestionCallback, selectCallback) => {

    let hasSuggestions = false;

    let previousSearchText = '';

    // Debounce the listener so that each keypress delays the execution of the handler. The

    // handler should only run 200 milliseconds after the last keypress.

    textArea.addEventListener('keyup', debounce(() => {

        // This is a "keyup" listener so that it only executes after the text area value

        // has been updated.

        const text = textArea.value;

        const cursorPos = textArea.selectionStart;

        const searchText = getWordFromPosition(text, cursorPos);

        if (searchText === previousSearchText) {

            // Nothing has changed so no need to take any action.

            return;

        } else {

            previousSearchText = searchText;

        }

        if (isCompleteShortName(searchText)) {

            // If the user has entered a full short name (with leading and trialing colons)

            // then see if we can find a match for it and auto complete it.

            const shortName = getShortNameFromText(searchText);

            const emojiText = getEmojiTextFromShortName(shortName);

            hasSuggestions = false;

            if (emojiText) {

                addRecentEmoji(EmojiData.byShortName[shortName], shortName);

                selectCallback(emojiText);

            }

        } else if (isPartialShortName(searchText)) {

            // If the user has entered a partial short name (leading colon but no trailing) then

            // search on the text to see if we can find some suggestions for them.

            const suggestions = searchEmojis(getShortNameFromText(searchText), SUGGESTION_LIMIT);

            if (suggestions.length) {

                render(root, suggestions);

                hasSuggestions = true;

            } else {

                hasSuggestions = false;

            }

        } else {

            hasSuggestions = false;

        }

        hasSuggestionCallback(hasSuggestions);

    }, INPUT_DEBOUNCE_TIMER));

    textArea.addEventListener('keydown', (e) => {

        if (hasSuggestions) {

            const isModifierPressed = (e.shiftKey || e.metaKey || e.altKey || e.ctrlKey);

            if (!isModifierPressed) {

                switch (e.which) {

                    case KeyCodes.escape:

                        // Escape key closes the auto complete.

                        hasSuggestions = false;

                        hasSuggestionCallback(false);

                        break;

                    case KeyCodes.arrowLeft:

                        // Arrow keys navigate through the list of suggetions.

                        selectPreviousEmojiSuggestion(root);

                        e.preventDefault();

                        break;

                    case KeyCodes.arrowRight:

                        // Arrow keys navigate through the list of suggetions.

                        selectNextEmojiSuggestion(root);

                        e.preventDefault();

                        break;

                    case KeyCodes.enter:

                        // Enter key selects the current suggestion.

                        selectEmojiElement(getActiveEmojiSuggestion(root), selectCallback);

                        e.preventDefault();

                        e.stopPropagation();

                        break;

                }

            }

        }

    });

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

        const target = e.target;

        if (target.matches(SELECTORS.EMOJI_BUTTON)) {

            selectEmojiElement(target, selectCallback);

        }

    });

};