Wait

The wait component allows you to disable and visually indicate that an element is in a waiting state. When bb-wait is set to true, the element will initially be blocked with a clear mask, but after 300ms a visual indicator will cover the element as well. This will allow for the element to immediately be disabled but not cause visual disturbances for very brief waits.

Dependencies


If the value bound to bb-wait is truthy, then the element will begin waiting until the value becomes falsey.

Multiple waits

You can set the value of bb-wait to a numeric value to track a count of simultaneous waits. When waits are added, increment the wait count and when they are removed then decrement the count. This will cause the wait UI to only clear once all waits are removed.

Full-page waits

If bb-wait is added to the <body> tag, then a full-page version of the wait UI will be created.

Raising wait events

Wait events can be raised from one controller to another by calling $scope.$emit("bbBeginWait"); and $scope.$emit("bbEndWait"); respectively. A controller can capture that event and begin waiting its element by listening for the event and updating its own bb-wait component. When doing so, itshould call stopPropagation() on the event so that other parents won't catch it as well. Uncaught events will raise all the way to the main controller of the application which can cause the entire page to wait.

$scope.$on("bbBeginWait", function (event) { event.stopPropagation(); $scope.myElementWaitCount += 1; });

Wait service

In addition to the bb-wait component, a bbWait service exists to allow functional access to adding and removing waits on elements or the page as a whole. This service supports the following functions

  • beginElWait(element) — Adds a wait for the specified element. Implicitly tracks a wait count for the element.
  • endElWait(element) — Removes a wait for the specified element. Implicitly tracks a wait count for the element and clears the wait UI when the count is 0.
  • clearElWait(element) — Removes all waits for the specified element and will clear any wait UI.
  • beginPageWait() — Adds a wait for the whole page (same as body element). Implicitly tracks a wait count for the element.
  • endPageWait() — Removes a wait for the whole page (same as body element). Implicitly tracks a wait count for the element and clears the wait UI when the count is 0.
  • clearPageWait() — Removes all waits for the whole page (same as body element) and will clear any wait UI.

Demo

A large area that needs to be waited.
Some simple text that needs to be waited.

{{waitCtrl.waitCount}}
Default value of waiting

Markup

<div ng-controller="WaitDemoController as waitCtrl">

    <div>
        <button ng-click="waitCtrl.onWaitDiv()" style="float: left;">Wait div</button>
        <div bb-wait="waitCtrl.waitDiv" style="height:200px; width: 300px; border: solid 1px red; float: left; margin-left: 10px">
            A large area that needs to be waited.
        </div>
    </div>

    <div style="float: left; margin-top: 10px; clear:both;">
        <button ng-click="waitCtrl.onWaitSpan()">Wait span</button>
        <span bb-wait="waitCtrl.waitSpan">Some simple text that needs to be waited.</span>
    </div>

    <div style="float: left; margin-top: 10px; clear:both;">
        <div style="float: left;">
            <button ng-click="waitCtrl.onWaitIncrement()" style="width:150px">Wait increment</button>
            <br />
            <button ng-click="waitCtrl.onWaitDecrement()" style="width:150px">Wait decrement</button>
        </div>
        <div bb-wait="waitCtrl.waitCount" style="height: 100px; width: 100px; border: solid 1px red; float: left; margin-left: 10px; font-size: 18px; font-weight: bold;">
            {{waitCtrl.waitCount}}
        </div>
    </div>

    <div style="float: left; margin-top: 10px; clear:both;">
        <button ng-click="waitCtrl.onShowPageWait()">Show page wait</button>
    </div>

    <div style="float: left; margin-top: 10px; clear:both;">
        <button ng-click="waitCtrl.onShowNonblockingPageWait()">Show nonblocking page wait</button>
    </div>

    <div style="float: left; margin-top: 10px; clear:both;">
        <div style="float: left;">
            Default value of waiting
        </div>
        <div bb-wait="{{true}}" style="height: 100px; width: 100px; border: solid 1px red; float: left; margin-left: 10px; font-size: 18px; font-weight: bold;">
        </div>
    </div>

</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function WaitDemoController($scope, $timeout, bbWait) {
        var self = this;

        self.waitCount = 0;

        self.onWaitDiv = function () {
            self.waitDiv = true;

            $timeout(function () {
                self.waitDiv = false;
            }, 1000);
        };

        self.onWaitSpan = function () {
            self.waitSpan = true;

            $timeout(function () {
                self.waitSpan = false;
            }, 1000);
        };

        self.onWaitIncrement = function () {
            self.waitCount += 1;
        };

        self.onWaitDecrement = function () {
            if (self.waitCount > 0) {
                self.waitCount -= 1;
            }
        };

        self.onShowPageWait = function () {
            $scope.$emit("bbBeginWait");

            $timeout(function () {
                $scope.$emit("bbEndWait");
            }, 1000);
        };

        self.onShowNonblockingPageWait = function () {
            $scope.$emit("bbBeginWait", { nonblocking: true });

            $timeout(function () {
                $scope.$emit("bbEndWait", { nonblocking: true });
            }, 1000);
        };
    }

    WaitDemoController.$inject = ['$scope', '$timeout', 'bbWait'];

    angular.module('stache').controller('WaitDemoController', WaitDemoController);
}());