How to speed up toaster animation of elFinder?

[mauleous]

Hi,

I just wanted to share how I speed up toaster animation in elFinder.

For example, there is this toaster notification when creating a new folder. I was looking into speeding up the animation speed of such toaster notification.

How I did this is:

1. Define a new '$.fn.elfinderToastCustom' that runs the original 'elfindertoast' function

   $.fn.elfinderToastCustom = function(opts, fm) {
   
   // This is the new default toaster options
   var customDefOpts = {
     mode: 'success',
     msg: '',
     showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
     showDuration: 0, // no animation when showing the toaster
     showEasing: 'swing', //swing and linear are built into jQuery
     onShown: undefined,
     hideMethod: 'fadeOut',
     hideDuration: 200, // quicker animation when hiding the toaster
     hideEasing: 'swing',
     onHidden: undefined,
     timeOut: 1500, // shorter timeout
     extNode: undefined
   };
   
   var customOpts = Object.assign({}, customDefOpts, opts || {}); // combine new default options with provided options
   
   this.elfindertoast(customOpts, fm);    // run the original elfinder toaster
   }  

2. I defined a new 'toast()' function that runs the new '$.fn.elfinderToastCustom'

   function toast(options) {
   return $('<div class="ui-front"/>').appendTo(this.ui.toast).elfinderToastCustom(options || {},this);
   };

3. I overwrote elFinder's toast function -> 'instance.toast = toast;'

   elFinderInstance.toast = toast;

If there is a better way to do this, please do let me know. I hope this helps those who are looking to do the same thing :)

[nao-pon]

@mauleous I'll change it so that we can set default options for toast message animation.

[nao-pon]

@mauleous I added an option uiOptions.toast.defaults

uiOptions : {
    toast : {
        defaults : {
            // to show
            showMethod: 'fadeIn', // fadeIn, slideDown, and show are
built into jQuery
            showDuration: 300,    // milliseconds
            showEasing: 'swing',  // swing and linear are built into
jQuery
            // timeout to hide
            timeOut: 3000,
            // to hide
            hideMethod: 'fadeOut',
            hideDuration: 1500,
            hideEasing: 'swing'
        }
    }
}

Thanks! 👍

[mauleous]

Cool! That would be even more convenient~ Thanks @nao-pon ! 👍