Author: Myles McNamara
Version: 1.2.1
Based on Meteor UIBlocker
Using the Semantic UI dimmer, and loader CSS https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/components
As of version 1.1.0+, the back button (only on Android) is blocked when UI block is being shown. When it is not showing, back button still works like normal.
Version 1.2.0+ introduces new bluring feature, close button, async timeout, and auto close (see below for details)
Live Demo: https://demo-kfvacvnspk.now.sh
Or you can build it yourself using Meteor Kitchen
meteor add tripflex:suiblocker
SUIBlock.block();
SUIBlock.block('some message'); // <-- Block with message
SUIBlock.unblock();
if (SUIBlock.isBlocked) {
// Do something
}
Tracker.autorun(function () {
if (Meteor.status().connected) {
SUIBlock.unblock();
} else {
SUIBlock.block(Meteor.status().status);
}
});
SUIBlock.block('Sending email...');
Meteor.setTimeout(function () {
SUIBlock.message.set('Please wait...');
}, 1000);
SUIBlock.block('Sending email...');
Meteor.call('sendEmail', subject, body, function (err, res) {
SUIBlock.unblock();
});
let myFunction = async function(){
await SUIBlock.asyncBlock( 'Our code is now synchornous while we wait!' );
// do something after waiting default of 2 seconds
}
let myFunction = async function(){
await SUIBlock.asyncBlur( 'Our code is now synchornous while we wait!' );
// do something after waiting default of 2 seconds
}
SUIBlock.asyncBlock( 'Our code is now synchornous while we wait!' ).then( function(){
// do something after waiting default of 2 seconds
});
SUIBlock.asyncBlur( 'Our code is now synchornous while we wait!' ).then( function(){
// do something after waiting default of 2 seconds
});
SUIBlock.block( 'Close button shows immediately!', true );
SUIBlock.blur( 'Close button shows immediately!', true ); // OR use blur to blur entire page
SUIBlock.block( 'Close button shows immediately!', 5000 );
await SUIBlock.asyncBlock( 'I will automatically unblock in 5 seconds', 5000, true );
- The code above is the same as doing this:
await SUIBlock.asyncBlock( 'I will automatically unblock in 5 seconds', 5000 );
SUIBlock.unblock();
/**
* Block UI without Blur
*
* @param {string} [message] - Custom message to display
* @param {boolean|int} [showClose=false] - Pass TRUE to show close button immediately (false for not at all), or integer in milliseconds to wait before showing close button
* @param {int} [asyncTimeout=false] - Time in milliseconds to delay before returning resolved promise
* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout
* @param {boolean} [doBlur=false] - Pass TRUE to enable background blurring
* @returns {Promise<any>|boolean}
*/
- This is the main method for this plugin, all arguments are optional, there are numerous helper methods below as well for easier method calling.
/**
* Block UI with Blur
*
* @param {string} [message] - Custom message to display
* @param {boolean|int} [showClose=false] - Pass TRUE to show close button immediately (false for not at all), or integer in milliseconds to wait before showing close button
* @param {int} [asyncTimeout=false] - Time in milliseconds to delay before returning resolved promise
* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout
* @returns {Promise<any>|boolean}
*/
- This method is the same as calling
SUIBlock.block(message, showClose, asyncTimeout, autoUnblock, true)
/**
* Async Timeout Block
*
* @async
* @param {string} [message] - Custom message to display
* @param {int} [asyncTimeout=2000] - Time in milliseconds to delay before returning resolved promise (default is 2000ms = 2s)
* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout
* @param {boolean|int} [showClose=false] - Pass TRUE to show close button immediately (false for not at all), or integer in milliseconds to wait before showing close button
* @param {boolean} [doBlur=false] - Pass TRUE to enable background blurring
* @returns {Promise<any>}
*/
- This method is the same as calling
SUIBlock.block( message, showClose, asyncTimeout, autoUnblock, doBlur )
/**
* Async Timeout Blur
*
* @async
* @param {string} [message] - Custom message to display
* @param {int} [asyncTimeout=2000] - Time in milliseconds to delay before returning resolved promise (default is 2000ms = 2s)
* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout
* @param {boolean|int} [showClose=false] - Pass TRUE to show close button immediately (false for not at all), or integer in milliseconds to wait before showing close button
* @returns {Promise<any>}
*/
- This method is the same as calling
SUIBlock.block( message, showClose, asyncTimeout, autoUnblock, true )
/**
* Synchronous Sleep/Timeout
* @param [delay=2000] - Delay in MS before returning resolved promise
* @returns {Promise<any>}
*/
- Prevent back button from being used when UI is blocked
- use 0 blur for
body
- Target
block-close
instead of genericclose
class (props @dolgarev) - Removed generic
close
class (props @dolgarev)
- Added close button and
showClose
argument toblock
andblur
- Added
blur
ability and configuration - Updated Semantic UI dimmer to use page dimmer
- Updated min Meteor version to 1.2.1
- Added
asyncTimeout
andautoUnblock
toSUIBlock.block()
- Updated z-index to use
9999999
instead of1000
- Added extra helper functions
asyncBlur
asyncBlock
blur
, etc - Updated and fully documented methods using JSDoc blocks and formatting
- Added event handler to prevent back button on Android while showing blocker
- Initial Creation