I customized message.js for smoothly messages hiding - now messages will be smoothly hidden afters 5 seconds. Here is the code.
define([
'jquery',
'uiComponent',
'underscore',
'Magento_Customer/js/customer-data',
'jquery/jquery-storageapi'
], function ($, Component, _, customerData,ko) {
'use strict';
return Component.extend({
defaults: {
cookieMessages: [],
messages: [],
selector: '.page.messages .message',
listens: {
isHidden: 'onHiddenChange'
}
},
/** @inheritdoc */
initialize: function () {
this._super();
this.cookieMessages = $.cookieStorage.get('mage-messages');
this.messages = customerData.get('messages').extend({
disposableCustomerData: 'messages'
});
if (!_.isEmpty(this.messages().messages)) {
customerData.set('messages', {});
}
$.cookieStorage.set('mage-messages', '');
},
initObservable: function () {
this._super()
.observe('isHidden');
return this;
},
RemoveMessage: function () {
var el = $(this.selector);
if (el.hasClass('fadeIn')) {
el.toggleClass('fadeIn fadeOut');
}
setTimeout(function () {
el.hide()
}, 2000);
},
isVisible: function () {
return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
},
onHiddenChange: function (isHidden) {
var self = this;
// Hide message block if needed
console.log(isHidden);
if (isHidden) {
setTimeout(function () {
self.RemoveMessage();
}, 5000);
}
// reseting variable
this.isHidden(false);
},
});
});
Now i want to add functionality to hide messages on close button click. I have seen this solution, all work fine, no problem. But i want to use my custom function RemoveMessage from messages.js, for smoothness. How can i it?