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 ! 👍