issue/2847 Improved notify subview handling

[oliverfoster]

#2847

Added

• Notify can now render any Adapt _id as a subview
• Adapt.notify.stack for a list of open popups

Fixed

• Resize jumping

Changed

• Use native Adapt.log.deprecated instead of a notify specific one
• Converted to ES6 classes
• Notifies get appended to the body rather than prepended, preserving their stack order
• Added styling so that shadow layers appear in the correct order and above the navigation bar
• Only the last notify will respond to the last close / cancel event

Test

This should be accessibility tested. The feedback notify in the mcq should appear over the mcq notify and be completely keyboard navigable.

To show an mcq:

var Adapt = require('core/js/adapt');
Adapt.notify.popup({
  _id: 'c-65'
});

To show a media component:

var Adapt = require('core/js/adapt');
Adapt.notify.popup({
  _id: 'c-40'
});

To show a text and graphic block:

var Adapt = require('core/js/adapt');
Adapt.notify.popup({
  _id: 'b-05'
});

To remove the close button and have a continue instead:

var Adapt = require('core/js/adapt');
Adapt.notify.alert({
  _id: 'b-05',
  confirmText: 'Continue'
});

[cahirodoherty-learningpool]

code 👀

[kirsty-hames]

@oliverfoster I haven't accessibility tested this yet as I'm not able to render the popup content in Chrome (running latest v). You can see from the screenshot that an empty Notify renders. I've tested in Firefox and not getting any issues.

I can see from your demo above you were also running Chrome. I'm on a Mac.

UPDATE: Caching issue.

[kirsty-hames]

+1 Tested in latest Chrome, Firefox, Safari, iPhone iOS 13.5.1, iPad iOS 10.3.4.

Accessibility tested in IE11 running Jaws 18 (in particular Hotgraphic / MCQ where you have stacked Notifies).

[moloko]

code 👁️‍🗨️