Ember-ui-blocker

Ember addon for UI blocking combined with a spinner.
Implemented with block-ui & spin.js

Installation

• npm install ember-ui-blocker --save-dev
• ember g ember-ui-blocker

Usage

// app/some-route/route.js
export default Ember.Route.extend({
    uiBlocker: Ember.inject.service(),
    actions: {
        doSomethingAsyncAndBlock: function(){
            this.get('uiBlocker').executeWhileBlocking([
                
                // Positive Functions(!!!) which return promises(!!!)
                // Will be executed sequently
                Ember.run.bind(this, this.fn1)
                Ember.run.bind(this, this.fn2)
 
            ],[
 
                // Negative Functions(!!!) which return promises(!!!).
                // Will be executed sequently on a fail
                Ember.run.bind(this, this.fn4)
                Ember.run.bind(this, this.fn5)
            
            ]).then(function(){
                //Do something... or not
            });
        },
        block: function(){
            this.get('uiBlocker').block();
        },
        unblock: function(){
            this.get('uiBlocker').unblock();
        }
    },
 
    fn1: function(){ return new Ember.RSVP.Promise(function(res,rej){...}); },
    fn2: function(){ return new Ember.RSVP.Promise(function(res,rej){...}); },
    fn3: function(){ return new Ember.RSVP.Promise(function(res,rej){...}); },
    fn4: function(){ return new Ember.RSVP.Promise(function(res,rej){...}); }
 
});

Configuration

• Environment configuration (deep merge)
  Deep-merge custom options with the default options by adding the following to config/environment.js

    'ember-ui-blocker': {
        /* The default options are:
            disableSpinner: false,
 
            spinnerSelector: 'body',
 
            blockDelay: 200, // minimum blocking delay for the method 'executeWhileBlocking'
 
            blockUIOptions: { ... }, 
 
            spinjsOptions:  { .. }
        */
    }

block-ui options reference
spin.js options reference

• Change default options in runtime (deep merge)

// app/services/some-service.js
export default Ember.Service.extend({
    uiBlocker: Ember.inject.service(),
    init: function(){
        //deep-merge new default options
        this.get('uiBlocker').setDefaultOptions({/* your custom options*/});
    }
});

• Method invocation (deep merge)
  Pass options to every method as a last argument.
  These options will be deep-merged with the default options & the above custom options.

// app/some-route/route.js
export default Ember.Route.extend({
    uiBlocker: Ember.inject.service(),
    actions: {
        doSomethingAsyncAndBlock: function(){
            this.get('uiBlocker').executeWhileBlocking([
                //...
            ],[
                //..
            ],{
                /* your custom options*/
            });
        },
        block: function(){
            this.get('uiBlocker').block({/* your custom options*/});
        },
        unblock: function(){
            this.get('uiBlocker').unblock({/* your custom options*/});
        }
    }
});

License

MIT