{"id":21044620,"url":"https://github.com/tripflex/meteor-suiblocker","last_synced_at":"2025-07-28T14:36:55.860Z","repository":{"id":147531835,"uuid":"116283026","full_name":"tripflex/meteor-suiblocker","owner":"tripflex","description":"Meteor UI blocker/loader/spinner using Semantic UI dimmer and loader with Blaze","archived":false,"fork":false,"pushed_at":"2018-08-29T14:22:58.000Z","size":366,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-20T17:32:57.159Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tripflex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-04T16:34:47.000Z","updated_at":"2018-08-29T14:19:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"d91fbbe7-1098-4c08-9632-cbf4e00be3dc","html_url":"https://github.com/tripflex/meteor-suiblocker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripflex%2Fmeteor-suiblocker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripflex%2Fmeteor-suiblocker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripflex%2Fmeteor-suiblocker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tripflex%2Fmeteor-suiblocker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tripflex","download_url":"https://codeload.github.com/tripflex/meteor-suiblocker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243489898,"owners_count":20299001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T14:17:45.305Z","updated_at":"2025-03-13T22:10:27.713Z","avatar_url":"https://github.com/tripflex.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"UI blocker and loader for Meteor using Semantic UI\n=============\n\n**_Author:_** Myles McNamara\n\n**_Version:_** 1.2.1\n\n![overview](https://raw.githubusercontent.com/tripflex/meteor-suiblocker/master/demo.gif)\n\nBased on [Meteor UIBlocker](https://github.com/VeliovGroup/Meteor-UIBlocker/)\n\nUsing the [Semantic UI](https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/components) dimmer, and loader CSS\nhttps://github.com/Semantic-Org/Semantic-UI/tree/master/dist/components\n\nAs 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.\n\nVersion 1.2.0+ introduces new bluring feature, close button, async timeout, and auto close (see below for details)\n\n### Demo\nLive Demo: https://demo-kfvacvnspk.now.sh\n\nOr you can build it yourself using [Meteor Kitchen](http://www.meteorkitchen.com)\n\n### Installation\n```shell\nmeteor add tripflex:suiblocker\n```\n\n### Basic Usage\n##### Block screen:\n```javascript\nSUIBlock.block();\nSUIBlock.block('some message'); // \u003c-- Block with message\n```\n\n##### Unblock screen:\n```javascript\nSUIBlock.unblock();\n```\n\n##### Check if screen is blocked:\n```javascript\nif (SUIBlock.isBlocked) {\n  // Do something\n}\n```\n\n##### `Meteor.status` example:\n```javascript\nTracker.autorun(function () {\n  if (Meteor.status().connected) {\n    SUIBlock.unblock();\n  } else {\n    SUIBlock.block(Meteor.status().status);\n  }\n});\n```\n\n##### Change message on the fly:\n```javascript\nSUIBlock.block('Sending email...');\nMeteor.setTimeout(function () {\n  SUIBlock.message.set('Please wait...');\n}, 1000);\n```\n\n##### `Meteor.call` example:\n```javascript\nSUIBlock.block('Sending email...');\nMeteor.call('sendEmail', subject, body, function (err, res) {\n  SUIBlock.unblock();\n});\n```\n\n### Advanced Usage\n\n##### Block inside async function\n```javascript\nlet myFunction = async function(){\n    await SUIBlock.asyncBlock( 'Our code is now synchornous while we wait!' );\n    // do something after waiting default of 2 seconds\n}\n```\n\n##### Blur inside async function\n```javascript\nlet myFunction = async function(){\n    await SUIBlock.asyncBlur( 'Our code is now synchornous while we wait!' );\n    // do something after waiting default of 2 seconds\n}\n```\n\n##### Block usage inside non-async function\n```javascript\nSUIBlock.asyncBlock( 'Our code is now synchornous while we wait!' ).then( function(){\n    // do something after waiting default of 2 seconds\n});\n```\n\n##### Blur usage inside non-async function\n```javascript\nSUIBlock.asyncBlur( 'Our code is now synchornous while we wait!' ).then( function(){\n    // do something after waiting default of 2 seconds\n});\n```\n\n##### Showing close button immediately\n```javascript\nSUIBlock.block( 'Close button shows immediately!', true );\nSUIBlock.blur( 'Close button shows immediately!', true ); // OR use blur to blur entire page\n```\n\n##### Showing close button after 5 seconds\n```javascript\nSUIBlock.block( 'Close button shows immediately!', 5000 );\n```\n\n##### Auto unblock/close after asyncTimeout (5 seconds)\n```javascript\nawait SUIBlock.asyncBlock( 'I will automatically unblock in 5 seconds', 5000, true );\n```\n- The code above is the same as doing this:\n\n```javascript\nawait SUIBlock.asyncBlock( 'I will automatically unblock in 5 seconds', 5000 );\nSUIBlock.unblock();\n```\n\n\n\n### Methods \u0026 Method Docs\n\n##### _Every argument for ALL methods are OPTIONAL_\n\n```jsdoc\n/**\n* Block UI without Blur\n*\n* @param {string} [message] - Custom message to display\n* @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\n* @param {int} [asyncTimeout=false] - Time in milliseconds to delay before returning resolved promise\n* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout\n* @param {boolean} [doBlur=false] - Pass TRUE to enable background blurring\n* @returns {Promise\u003cany\u003e|boolean}\n*/\n```\n\n##### `SUIBlock.block(message, showClose, asyncTimeout, autoUnblock, doBlur)`\n- This is the main method for this plugin, all arguments are optional, there are numerous helper methods below as well for easier method calling.\n\n```jsdoc\n/**\n* Block UI with Blur\n*\n* @param {string} [message] - Custom message to display\n* @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\n* @param {int} [asyncTimeout=false] - Time in milliseconds to delay before returning resolved promise\n* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout\n* @returns {Promise\u003cany\u003e|boolean}\n*/\n```\n\n##### `SUIBlock.blur(message, showClose, asyncTimeout, autoUnblock)`\n- This method is the same as calling `SUIBlock.block(message, showClose, asyncTimeout, autoUnblock, true)`\n\n\n```jsdoc\n/**\n* Async Timeout Block\n*\n* @async\n* @param {string} [message] - Custom message to display\n* @param {int} [asyncTimeout=2000] - Time in milliseconds to delay before returning resolved promise (default is 2000ms = 2s)\n* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout\n* @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\n* @param {boolean} [doBlur=false] - Pass TRUE to enable background blurring\n* @returns {Promise\u003cany\u003e}\n*/\n```\n\n##### `SUIBlock.asyncBlock(message, asyncTimeout, autoUnblock, showClose, doBlur)`\n- This method is the same as calling `SUIBlock.block( message, showClose, asyncTimeout, autoUnblock, doBlur )`\n\n```jsdoc\n/**\n* Async Timeout Blur\n*\n* @async\n* @param {string} [message] - Custom message to display\n* @param {int} [asyncTimeout=2000] - Time in milliseconds to delay before returning resolved promise (default is 2000ms = 2s)\n* @param {boolean} [autoUnblock=false] - Specify true to auto close/unblock after asyncTimeout\n* @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\n* @returns {Promise\u003cany\u003e}\n*/\n```\n\n##### `SUIBlock.asyncBlur(message, asyncTimeout, autoUnblock, showClose)`\n- This method is the same as calling `SUIBlock.block( message, showClose, asyncTimeout, autoUnblock, true )`\n\n```jsdoc\n/**\n* Synchronous Sleep/Timeout\n* @param [delay=2000] - Delay in MS before returning resolved promise\n* @returns {Promise\u003cany\u003e}\n*/\n```\n\n##### `SUIBlock.timeout(delay)`\n\n\n### Changelog\n##### 1.2.1 *8/29/2018*\n- Prevent back button from being used when UI is blocked\n- use 0 blur for `body`\n- Target `block-close` instead of generic `close` class (props @dolgarev)\n- Removed generic `close` class (props @dolgarev)\n\n##### 1.2.0 *1/22/2018*\n- Added close button and `showClose` argument to `block` and `blur`\n- Added `blur` ability and configuration\n- Updated Semantic UI dimmer to use page dimmer\n- Updated min Meteor version to 1.2.1\n- Added `asyncTimeout` and `autoUnblock` to `SUIBlock.block()`\n- Updated z-index to use `9999999` instead of `1000`\n- Added extra helper functions `asyncBlur` `asyncBlock` `blur`, etc\n- Updated and fully documented methods using JSDoc blocks and formatting\n\n##### 1.1.0\n- Added event handler to prevent back button on Android while showing blocker\n\n##### 1.0.0\n- Initial Creation","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripflex%2Fmeteor-suiblocker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftripflex%2Fmeteor-suiblocker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftripflex%2Fmeteor-suiblocker/lists"}