Source: widget/learning/TileControl.js

(function() {
    /**
     * @typedef {Help4.control2.Tile.Params} Help4.widget.learning.TileControl.Params
     * @property {?string} [entityType = null] - entity type of learning asset; e.g. "project"
     * @property {?string} [entitySubType = null] - entity subtype of learning asset; e.g. "docx"
     * @property {boolean} enableFeedback - flag to show/hide feedback button
     */

    /**
     * Control that creates a learning tile.
     * @augments Help4.control2.Tile
     * @property {?string} entityType - entity type of learning asset; e.g. "project"
     * @property {?string} entitySubType - entity subtype of learning asset; e.g. "docx"
     * @property {boolean} enableFeedback - flag to show/hide feedback button
     */
    Help4.widget.learning.TileControl = class extends Help4.control2.Tile {
        /**
         * @override
         * @param {Help4.widget.learning.TileControl.Params} [params]
         */
        constructor(params) {
            const {
                TYPES: T,
                TEXT_TYPES: TT
            } = Help4.jscore.ControlBase;

            super(params, {
                params: {
                    entityType:      {type: T.string_null},  // "slide", "project", "book", ...?
                    entitySubType:   {type: T.string_null},  // "pdf", "doc", "image", "audio", "video", ...?
                    enableFeedback:  {type: T.boolean, mandatory: true, readonly: true}
                },
                statics: {
                    _feedback: {}
                },
                config: {
                    css: 'learning'
                },
                texts: {
                    description: TT.innerHTML
                }
            });
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            switch (name) {
                case 'description':
                    _setDescription.call(this, value);
                    break;
                case 'entityType':
                case 'entitySubType':
                    _setEntityInfo.call(this);
                    break;
                case 'caption':
                    this.title = Help4.Localization.getText('tooltip.play') + ' ' + value;
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomAvailable(dom) {
            super._onDomAvailable(dom);
            this.enableFeedback && _createFeedbackButton.call(this);
        }
    }

    /**
     * @memberof Help4.widget.learning.TileControl#
     * @private
     */
    function _setDescription() {
        // XRAY-1213: remove all tags
        const html = this.description.replace(/<[^>]*>/g, ' ');

        const {_description} = this;
        _description.innerHTML = html;
        this._applyTextAttribute(_description, 'description', !!html);
    }

    /**
     * @memberof Help4.widget.learning.TileControl#
     * @private
     */
    function _setEntityInfo() {
        let {entityType, entitySubType} = this;
        if (entityType === 'media' && entitySubType) entityType += `_${entitySubType}`;
        entityType && Help4.Element.setAttribute(this.getDom(), {'data-type': entityType});
    }

    /**
     * @memberof Help4.widget.learning.TileControl#
     * @private
     */
    function _createFeedbackButton() {
        const {rtl, mobile, contentLanguage, id} = this;

        this._feedback = new Help4.control2.button.Button({
            id: `${id}-learning-feedback`,
            dom: this.getDom(),
            icon: Help4.control.ICONS.mail,
            css: 'icon feedback',
            title: Help4.Localization.getText('tooltip.feedback'),
            rtl,
            mobile,
            contentLanguage
        })
        .addListener('click', () => this._fireEvent({type: 'feedback'}));
    }
})();