How is the `$.mage.prompt` jQuery UI widget implemented?

dmitry_fedyuk · May 20, 2018, 6:54pm

magento/magento2/blob/2.2.4/app/code/Magento/Ui/view/base/web/js/modal/prompt.js#L9-L179


define([
'jquery',
'underscore',
'mage/template',
'text!ui/template/modal/modal-prompt-content.html',
'jquery/ui',
'Magento_Ui/js/modal/modal',
'mage/translate'
], function ($, _, template, promptContentTmpl) {
'use strict';


$.widget('mage.prompt', $.mage.modal, {
    options: {
        modalClass: 'prompt',
        promptContentTmpl: promptContentTmpl,
        promptField: '[data-role="promptField"]',
        attributesForm: {},
        attributesField: {},
        value: '',
        validation: false,
        validationRules: [],
        actions: {


            /**
             * Callback always - called on all actions.
             */
            always: function () {},


            /**
             * Callback confirm.
             */
            confirm: function () {},


            /**
             * Callback cancel.
             */
            cancel: function () {}
        },
        buttons: [{
            text: $.mage.__('Cancel'),
            class: 'action-secondary action-dismiss',


            /**
             * Click handler.
             */
            click: function () {
                this.closeModal();
            }
        }, {
            text: $.mage.__('OK'),
            class: 'action-primary action-accept',


            /**
             * Click handler.
             */
            click: function () {
                this.closeModal(true);
            }
        }]
    },


    /**
     * Create widget.
     */
    _create: function () {
        this.options.focus = this.options.promptField;
        this.options.validation = this.options.validation && this.options.validationRules.length;
        this._super();
        this.modal.find(this.options.modalContent).append(this.getFormTemplate());
        this.modal.find(this.options.modalCloseBtn).off().on('click',  _.bind(this.closeModal, this, false));


        if (this.options.validation) {
            this.setValidationClasses();
        }


        this.openModal();
    },


    /**
     * Form template getter.
     *
     * @returns {Object} Form template.
     */
    getFormTemplate: function () {
        var formTemplate,
            formAttr = '',
            inputAttr = '',
            attributeName;


        for (attributeName in this.options.attributesForm) {
            if (this.options.attributesForm.hasOwnProperty(attributeName)) {
                formAttr = formAttr + ' ' + attributeName + '="' +
                    this.options.attributesForm[attributeName] + '"';
            }
        }


        for (attributeName in this.options.attributesField) {
            if (this.options.attributesField.hasOwnProperty(attributeName)) {
                inputAttr = inputAttr + ' ' + attributeName + '="' +
                    this.options.attributesField[attributeName] + '"';
            }
        }


        formTemplate = $(template(this.options.promptContentTmpl, {
            data: this.options,
            formAttr: formAttr,
            inputAttr: inputAttr
        }));


        return formTemplate;
    },


    /**
     * Remove widget
     */
    _remove: function () {
        this.modal.remove();
    },


    /**
     * Validate prompt field
     */
    validate: function () {
        return $.validator.validateSingleElement(this.options.promptField);
    },


    /**
     * Add validation classes to prompt field
     */
    setValidationClasses: function () {
        this.modal.find(this.options.promptField).attr('class', $.proxy(function (i, val) {
            return val + ' ' + this.options.validationRules.join(' ');
        }, this));
    },


    /**
     * Open modal window
     */
    openModal: function () {
        this._super();
        this.modal.find(this.options.promptField).val(this.options.value);
    },


    /**
     * Close modal window
     */
    closeModal: function (result) {
        var value;


        if (result) {
            if (this.options.validation && !this.validate()) {
                return false;
            }


            value = this.modal.find(this.options.promptField).val();
            this.options.actions.confirm.call(this, value);
        } else {
            this.options.actions.cancel.call(this, result);
        }


        this.options.actions.always();
        this.element.bind('promptclosed', _.bind(this._remove, this));


        return this._super();
    }
});


return function (config) {
    return $('<div class="prompt-message"></div>').html(config.content).prompt(config);
};
});

This file has been truncated. show original

dmitry_fedyuk · May 20, 2018, 8:30pm