Mask

Widget

Masks a target element (document.body if none is specified). Call static methods for ease of use or make instance for reusability.

 Mask.mask('hello');
 Mask.unmask();

Can show progress:

 // Using progress by calling static method
 const mask = Mask.mask({
     text        :'The task is in progress',
     progress    : 0,
     maxProgress : 100
 });

 let timer = setInterval(() => {
     mask.progress += 5;
     if (mask.progress >= mask.maxProgress) {
         Mask.unmask();
         clearInterval(timer);
     }
 }, 100);

Stacking Multiple Masks

An element can have multiple masks attached to it (for example, to handle independent asynchronous activities). When an element has multiple masks attached, only the first mask created is visible to the user. This avoids unpleasant transparency layering that would occur if all masks were visible at the same time. When the active mask is destroyed or hidden (via hide), the next oldest mask is made visible. That is, masks are displayed in FIFO order.

When a mask is hidden, it is not a candidate in the FIFO order and is ignored when looking for the next oldest mask. If the mask is shown (via show), the mask is again a candidate for being shown, and will be shown immediately if there is not already a currently visible mask. This eliminates flickering effects that would otherwise come from multiple masks competing for display.

When the last mask is hidden or destroyed, the target element becomes unmasked. Showing and hiding of masks is useful when the masks may be needed repeatedly over time.

Masking Bryntum Widgets

Shortcut to masking Bryntum components:

 // Using progress to mask a Bryntum component
 scheduler.mask({
     text:'Loading in progress',
     progress: 0,
     maxProgress: 100
 });

 let timer = setInterval(() => {
     scheduler.masked.progress += 5;
     if (scheduler.masked.progress >= scheduler.masked.maxProgress) {
         scheduler.unmask();
         clearInterval(timer);
     }
 },100);