How is `Magento_Ui/js/modal/modal-component` implemented and used?

dmitrii_fediuk · May 19, 2018, 10:45am

Implementation

magento/magento2/blob/2.2.4/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js#L6-L367


/**
* @api
*/
define([
   'Magento_Ui/js/lib/view/utils/async',
   'uiCollection',
   'uiRegistry',
   'underscore',
   './modal'
], function ($, Collection, registry, _) {
   'use strict';


   return Collection.extend({
       defaults: {
           template: 'ui/modal/modal-component',
           title: '',
           subTitle: '',
           options: {
               modalClass: '',
               title: '',
               subTitle: '',
               buttons: [],
               keyEventHandlers: {}
           },
           valid: true,
           links: {
               title: 'options.title',
               subTitle: 'options.subTitle'
           },
           listens: {
               state: 'onState',
               title: 'setTitle',
               'options.subTitle': 'setSubTitle'
           },
           modalClass: 'modal-component',
           onCancel: 'closeModal'
       },


       /**
        * Initializes component.
        *
        * @returns {Object} Chainable.
        */
       initialize: function () {
           this._super();
           _.bindAll(this,
               'initModal',
               'openModal',
               'closeModal',
               'toggleModal',
               'setPrevValues',
               'validate');
           this.initializeContent();


           return this;
       },


       /**
        * Initializes modal configuration
        *
        * @returns {Object} Chainable.
        */
       initConfig: function () {
           return this._super()
               .initSelector()
               .initModalEvents();
       },


       /**
        * Configure modal selector
        *
        * @returns {Object} Chainable.
        */
       initSelector: function () {
           var modalClass = this.name.replace(/\./g, '_');


           this.contentSelector = '.' + this.modalClass;
           this.options.modalClass = this.options.modalClass + ' ' + modalClass;
           this.rootSelector = '.' + modalClass;


           return this;
       },


       /**
        * Configure modal keyboard handlers
        * and outer click
        *
        * @returns {Object} Chainable.
        */
       initModalEvents: function () {
           this.options.keyEventHandlers.escapeKey = this.options.outerClickHandler = this[this.onCancel].bind(this);


           return this;
       },


       /**
        * Initialize modal's content components
        */
       initializeContent: function () {
           $.async({
               component: this.name
           }, this.initModal);
       },


       /**
        * Init toolbar section so other components will be able to place something in it
        */
       initToolbarSection: function () {
           this.set('toolbarSection', this.modal.data('mage-modal').modal.find('header').get(0));
       },


       /**
        * Initializes observable properties.
        *
        * @returns {Object} Chainable.
        */
       initObservable: function () {
           this._super();
           this.observe(['state', 'focused']);


           return this;
       },


       /**
        * Wrap content in a modal of certain type
        *
        * @param {HTMLElement} element
        * @returns {Object} Chainable.
        */
       initModal: function (element) {
           if (!this.modal) {
               this.overrideModalButtonCallback();
               this.options.modalCloseBtnHandler = this[this.onCancel].bind(this);
               this.modal = $(element).modal(this.options);
               this.initToolbarSection();


               if (this.waitCbk) {
                   this.waitCbk();
                   this.waitCbk = null;
               }
           }


           return this;
       },


       /**
        * Open modal
        */
       openModal: function () {
           if (this.modal) {
               this.state(true);
           } else {
               this.waitCbk = this.openModal;
           }
       },


       /**
        * Close modal
        */
       closeModal: function () {
           if (this.modal) {
               this.state(false);
           } else {
               this.waitCbk = this.closeModal;
           }
       },


       /**
        * Toggle modal
        */
       toggleModal: function () {
           if (this.modal) {
               this.state(!this.state());
           } else {
               this.waitCbk = this.toggleModal;
           }
       },


       /**
        * Sets title for modal
        *
        * @param {String} title
        */
       setTitle: function (title) {
           if (this.title !== title) {
               this.title = title;
           }


           if (this.modal) {
               this.modal.modal('setTitle', title);
           }
       },


       /**
        * Sets subTitle for modal
        *
        * @param {String} subTitle
        */
       setSubTitle: function (subTitle) {
           if (this.subTitle !== subTitle) {
               this.subTitle = subTitle;
           }


           if (this.modal) {
               this.modal.modal('setSubTitle', subTitle);
           }
       },


       /**
        * Wrap content in a modal of certain type
        *
        * @param {Boolean} state
        */
       onState: function (state) {
           if (state) {
               this.modal.modal('openModal');
               this.applyData();
           } else {
               this.modal.modal('closeModal');
           }
       },


       /**
        * Validate everything validatable in modal
        */
       validate: function (elem) {
           if (typeof elem.validate === 'function') {
               this.valid = this.valid & elem.validate().valid;
           } else if (elem.elems) {
               elem.elems().forEach(this.validate, this);
           }
       },


       /**
        * Reset data from provider
        */
       resetData: function () {
           this.elems().forEach(this.resetValue, this);
       },


       /**
        * Update 'applied' property with data from modal content
        */
       applyData: function () {
           var applied = {};


           this.elems().forEach(this.gatherValues.bind(this, applied), this);
           this.applied = applied;
       },


       /**
        * Gather values from modal content
        *
        * @param {Array} applied
        * @param {HTMLElement} elem
        */
       gatherValues: function (applied, elem) {
           if (typeof elem.value === 'function') {
               applied[elem.name] = elem.value();
           } else if (elem.elems) {
               elem.elems().forEach(this.gatherValues.bind(this, applied), this);
           }
       },


       /**
        * Set to previous values from modal content
        *
        * @param {HTMLElement} elem
        */
       setPrevValues: function (elem) {
           if (typeof elem.value === 'function') {
               this.modal.focus();
               elem.value(this.applied[elem.name]);
           } else if (elem.elems) {
               elem.elems().forEach(this.setPrevValues, this);
           }
       },


       /**
        * Triggers some method in every modal child elem, if this method is defined
        *
        * @param {Object} action - action configuration,
        * must contain actionName and targetName and
        * can contain params
        */
       triggerAction: function (action) {
           var targetName = action.targetName,
               params = action.params || [],
               actionName = action.actionName,
               target;


           target = registry.async(targetName);


           if (target && typeof target === 'function' && actionName) {
               params.unshift(actionName);
               target.apply(target, params);
           }
       },


       /**
        * Override modal buttons callback placeholders with real callbacks
        */
       overrideModalButtonCallback: function () {
           var buttons = this.options.buttons;


           if (buttons && buttons.length) {
               buttons.forEach(function (button) {
                   button.click = this.getButtonClickHandler(button.actions);
               }, this);
           }
       },


       /**
        * Generate button click handler based on button's 'actions' configuration
        */
       getButtonClickHandler: function (actionsConfig) {
           var actions = actionsConfig.map(
               function (actionConfig) {
                   if (_.isObject(actionConfig)) {
                       return this.triggerAction.bind(this, actionConfig);
                   }


                   return this[actionConfig] ? this[actionConfig].bind(this) : function () {};
               }, this);


           return function () {
               actions.forEach(
                   function (action) {
                       action();
                   }
               );
           };
       },


       /**
        * Cancels changes in modal:
        * returning elems values to the previous state,
        * and close modal
        */
       actionCancel: function () {
           this.elems().forEach(this.setPrevValues, this);
           this.closeModal();
       },


       /**
        * Accept changes in modal by not preventing them.
        * Can be extended by exporting 'gatherValues' result somewhere
        */
       actionDone: function () {
           this.valid = true;
           this.elems().forEach(this.validate, this);


           if (this.valid) {
               this.closeModal();
           }
       }
   });
});

This file has been truncated. show original

Usages

1. Magento_ConfigurableProduct/js/components/modal-configurable

github.com

magento/magento2/blob/2.2.4/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/components/modal-configurable.js#L6-L40


define([
'Magento_Ui/js/modal/modal-component',
'uiRegistry',
'underscore'
], function (Modal, registry, _) {
'use strict';


return Modal.extend({
    defaults: {
        stepWizard: '',
        modules: {
            form: '${ $.formName }'
        }
    },


    /**
     * Open modal
     */
    openModal: function () {
        var stepWizard = {};


        this.form().validate();


        if (this.form().source.get('params.invalid') === false) {
            stepWizard = registry.get('index = ' + this.stepWizard);


            if (!_.isUndefined(stepWizard)) {
                stepWizard.open();
            }


            this._super();
        }
    }
});
});

2. Magento_ReleaseNotification/js/modal/component

github.com

magento/magento2/blob/2.2.4/app/code/Magento/ReleaseNotification/view/adminhtml/web/js/modal/component.js#L6-L65


define([
'jquery',
'Magento_Ui/js/modal/modal-component',
'Magento_Ui/js/modal/alert',
'mage/translate'
], function ($, Modal, alert, $t) {
'use strict';


return Modal.extend({
    defaults: {
        imports: {
            logAction:  '${ $.provider }:data.logAction'
        }
    },


    /**
     * Error handler.
     *
     * @param {Object} xhr - request result.
     */
    onError: function (xhr) {
        if (xhr.statusText === 'abort') {
            return;
        }


        alert({
            content: xhr.message || $t('An error occurred while logging process.')
        });
    },


    /**
     * Log release notes show
     */
    logReleaseNotesShow: function () {
        var self = this,
            data = {
                'form_key': window.FORM_KEY
            };


        $.ajax({
            type: 'POST',
            url: this.logAction,
            data: data,
            showLoader: true
        }).done(function (xhr) {
            if (xhr.error) {
                self.onError(xhr);
            }
        }).fail(this.onError);
    },


    /**
     * Close release notes
     */
    closeReleaseNotes: function () {
        this.logReleaseNotesShow();
        this.closeModal();
    }
});
});

dmitrii_fediuk · May 19, 2018, 11:10am