Set mask to apear over another element

[Jerther]

Hi!!

Here's an example:

• Load the advanced demo
• Right at the start, notice the loading mask covers the Gantt widget only

Is it possible to have the mask cover the toolbar as well? Or have it cover a custom element (like document.body)? Or replace the mask function altogether for a custom one? Or maybe if there are events related to this I could disable the toolbar when the mask is active?

Thanks!!

[pmiklashevich]

Sure, it's possible! Please see the docs of Mask.
Gantt.loadMask and Gantt.syncMask can be null to disable the masks. And then you need to add listeners to ProjectModel

import Mask from '../../lib/Core/widget/Mask.js';

const showLoadMask = () => {
    Mask.mask({
        text : 'Project is loading...',
        mode : 'dark-blur'
    }, document.body);
};

const showSyncMask = () => {
    Mask.mask({
        text : 'Project is saving...',
        mode : 'dark-blur'
    }, document.body);
};

const hideMask = () => {
    Mask.unmask(document.body);
};

const project = new ProjectModel({
    listeners : {
        beforeLoad   : showLoadMask,
        beforeSync   : showSyncMask,
        loadCanceled : hideMask,
        syncCanceled : hideMask,
        requestDone  : hideMask,
        requestFail  : () => {
            // maybe show an error message to the user
            hideMask();
        }
    },

// Let the Project know we want to use our own Task model with custom fields / methods
taskModelClass : Task,
transport      : {
    load : {
        url : '../_datasets/launch-saas.json'
    }
}
});

const gantt = new Gantt({
    loadMask : null,
    syncMask : null,

We will update our docs to make it clear!

Best,
Pavel

[Jerther]

Awesome! Thanks!

[Jerther]

Well I have a bad news... It looks like the pdfExport feature expects the loadMask config to be set...

Try your code in a demo that enables the pdfExport feature, launch the export dialog and hit Export. You'll get this error:

gantt.module.js?timestamp=216:17877 Uncaught (in promise) TypeError: Cannot set property 'element' of null
    at Gantt.mask (gantt.module.js?timestamp=216:17877)
    at PdfExport$2.export (gantt.module.js?timestamp=216:64087)
    at PdfExport$2.onExportDialogExport (gantt.module.js?timestamp=216:64235)
    at SchedulerExportDialog.trigger (gantt.module.js?timestamp=216:3391)
    at SchedulerExportDialog.onExportClick (gantt.module.js?timestamp=216:62555)
    at Button.trigger (gantt.module.js?timestamp=216:3391)
    at Button.onInternalClick (gantt.module.js?timestamp=216:23517)
    at HTMLButtonElement.handler (gantt.module.js?timestamp=216:11795)

Gantt 2.1.6

EDIT: I can use

loadMask: ''

and this fixes it but mixing this to this bug, the result is not pretty...

[pmiklashevich]

Thanks for your report! We will get it fixed: https://github.com/bryntum/support/issues/1215

[Jerther]

Neat, it's fixed in 2.1.7!

But the export features still uses the built in mask feature. Is it possible to have it use a custom one, like in your first reply?

I still need the mask to cover the toolbar as well.

[pmiklashevich]

Hello,

Removing the export mask is not supported. I've opened a feature request: https://github.com/bryntum/support/issues/1239
Sorry, we didn't implement this as a single fix and just removed the grid load mask dependency. Though you can add your own mask to the body the same way as it was shown in the first reply. Please see the example:

Gantt/examples/export/app.js

import Mask from '../../lib/Core/widget/Mask.js';

const showExportMask = () => {
    Mask.mask({
        text : '',
        mode : 'dark'
    }, document.body);
};

const hideMask = () => {
    Mask.unmask(document.body);
};

....

const gantt = new Gantt({
    listeners : {
        beforeExport : showExportMask,
        export       : hideMask
    },

https://www.bryntum.com/docs/gantt/#Gantt/feature/export/PdfExport#event-beforeExport
https://www.bryntum.com/docs/gantt/#Gantt/feature/export/PdfExport#event-export

Снимок экрана 2020-07-24 в 16.19.16.png (352.8 KiB) Viewed 1760 times

Best,
Pavel

[Jerther]

Thanks Pavel, that'll do for now
I'll follow the github issue.