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

/**

 * An Icon System implementation for FontAwesome.

 *

 * @module core/icon_system_fontawesome

 * @copyright  2017 Damyon Wiese

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

 */

import {call as fetchMany} from './ajax';

import LocalStorage from './localstorage';

import IconSystem from './icon_system';

import * as Mustache from './mustache';

import * as Config from './config';

import * as Url from './url';

/**

 * An set of properties for an icon.

 * @typedef {object} IconProperties

 * @property {array} attributes

 * @private

 */

/**

 * The FontAwesome icon system.

 */

export default class IconSystemFontawesome extends IconSystem {

    /**

     * @var {Map} staticMap A map of icon names to FA Icon.

     * @private

     */

    static staticMap = null;

    /**

     * @var {Promise} fetchPromise The promise used when fetching the result

     * @private

     */

    static fetchPromise = null;

    /**

     * @var {string} cacheKey The key used to store the icon map in LocalStorage.

     * @private

     */

    static cacheKey = `core_iconsystem/theme/${Config.theme}/core/iconmap-fontawesome`;

    /**

     * Prefetch resources so later calls to renderIcon can be resolved synchronously.

     *

     * @returns {Promise<IconSystemFontawesome>}

     */

    init() {

        if (IconSystemFontawesome.staticMap) {

            return Promise.resolve(this);

        }

        if (this.getMapFromCache()) {

            return Promise.resolve(this);

        }

        if (IconSystemFontawesome.fetchPromise) {

            return IconSystemFontawesome.fetchPromise;

        }

        return this.fetchMapFromServer();

    }

    /**

     * Get the icon map from LocalStorage.

     *

     * @private

     * @returns {Map}

     */

    getMapFromCache() {

        const map = LocalStorage.get(IconSystemFontawesome.cacheKey);

        if (map) {

            IconSystemFontawesome.staticMap = new Map(JSON.parse(map));

        }

        return IconSystemFontawesome.staticMap;

    }

    /**

     * Fetch the map data from the server.

     *

     * @private

     * @returns {Promise}

     */

    _fetchMapFromServer() {

        return fetchMany([{

            methodname: 'core_output_load_fontawesome_icon_system_map',

            args: {

                themename: Config.theme,

            },

        }], true, false, false, 0, Config.themerev)[0];

    }

    /**

     * Fetch the map data from the server.

     *

     * @returns {Promise<IconSystemFontawesome>}

     * @private

     */

    async fetchMapFromServer() {

        IconSystemFontawesome.fetchPromise = (async () => {

            const mapData = await this._fetchMapFromServer();

            IconSystemFontawesome.staticMap = new Map(Object.entries(mapData).map(([, value]) => ([

                `${value.component}/${value.pix}`,

                value.to,

            ])));

            LocalStorage.set(

                IconSystemFontawesome.cacheKey,

                JSON.stringify(Array.from(IconSystemFontawesome.staticMap.entries())),

            );

            return this;

        })();

        return IconSystemFontawesome.fetchPromise;

    }

    /**

     * Render an icon.

     *

     * @param {string} key

     * @param {string} component

     * @param {string} title

     * @param {string} template

     * @return {string} The rendered HTML content

     */

    renderIcon(key, component, title, template) {

        const iconKey = `${component}/${key}`;

        const mappedIcon = IconSystemFontawesome.staticMap.get(iconKey);

        const unmappedIcon = this.getUnmappedIcon(mappedIcon, key, component, title);

        const context = {

            title,

            unmappedIcon,

            alt: title,

            key: mappedIcon,

        };

        if (typeof title === "undefined" || title === '') {

            context['aria-hidden'] = true;

        }

        return Mustache.render(template, context).trim();

    }

    /**

     * Get the unmapped icon content, if the icon is not mapped.

     *

     * @param {IconProperties} mappedIcon

     * @param {string} key

     * @param {string} component

     * @param {string} title

     * @returns {IconProperties|null}

     * @private

     */

    getUnmappedIcon(mappedIcon, key, component, title) {

        if (mappedIcon) {

            return null;

        }

        return {

            attributes: [

                {name: 'src', value: Url.imageUrl(key, component)},

                {name: 'alt', value: title},

                {name: 'title', value: title}

            ],

        };

    }

    /**

     * Get the name of the template to pre-cache for this icon system.

     *

     * @return {string}

     * @method getTemplateName

     */

    getTemplateName() {

        return 'core/pix_icon_fontawesome';

    }

}