Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improvements to notify popup handling #3029

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion src/core/js/notify.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,45 @@ class Notify extends Backbone.Controller {
'notify:popup': this._deprecated.bind(this, 'popup'),
'notify:alert': this._deprecated.bind(this, 'alert'),
'notify:prompt': this._deprecated.bind(this, 'prompt'),
'notify:push': this._deprecated.bind(this, 'push')
'notify:push': this._deprecated.bind(this, 'push'),
'notify:cancel': this.cancelTopNotify,
'notify:close': this.closeTopNotify
});
}

get stack() {
return this._stack;
}

get stackTop() {
return this._stack[this._stack.length - 1];
}

_deprecated(type, notifyObject) {
Adapt.log.deprecated(`NOTIFY DEPRECATED: Adapt.trigger('notify:${type}', notifyObject); is no longer supported, please use Adapt.notify.${type}(notifyObject);`);
return this.create(notifyObject, { _type: type });
}

removeFromStack(notifyView) {
const stackIndex = this.stack.findIndex(stackItem => stackItem === notifyView);
if (stackIndex === -1) return;

this.stack.splice(stackIndex, 1);

if (this.stack.length > 0) return;

Adapt.a11y.scrollEnable('body');
$('html').removeClass('notify');
}

cancelTopNotify() {
this.stackTop.cancelNotify();
}

closeTopNotify() {
this.stackTop.closeNotify();
}

create(notifyObject, defaults) {
notifyObject = _.defaults({}, notifyObject, defaults, {
_type: 'popup',
Expand Down
52 changes: 25 additions & 27 deletions src/core/js/views/notifyView.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ export default class NotifyView extends Backbone.View {
}

initialize() {
_.bindAll(this, 'resetNotifySize', 'onKeyUp');
// adding close/cancelNotify here makes them available at Adapt.notify.stack[n] making it possible
// for the main Notify class to call those functions when it needs to close/cancel a Notify popup
_.bindAll(this, 'resetNotifySize', 'onKeyUp', 'closeNotify', 'cancelNotify');
this.disableAnimation = Adapt.config.get('_disableAnimation') || false;
this.isOpen = false;
this.hasOpened = false;
Expand All @@ -37,8 +39,6 @@ export default class NotifyView extends Backbone.View {
this.listenTo(Adapt, {
'remove page:scrollTo': this.closeNotify,
'notify:resize': this.resetNotifySize,
'notify:cancel': this.cancelNotify,
'notify:close': this.closeNotify,
'device:resize': this.resetNotifySize
});
this.setupEscapeKey();
Expand Down Expand Up @@ -192,15 +192,10 @@ export default class NotifyView extends Backbone.View {
}

closeNotify() {
// Make sure that only the top most notify is closed
const stackItem = Adapt.notify.stack[Adapt.notify.stack.length - 1];
if (this !== stackItem) return;
Adapt.notify.stack.pop();
// Prevent from being invoked multiple times - see https:/adaptlearning/adapt_framework/issues/1659
if (!this.isOpen) return;
this.isOpen = false;
// If closeNotify is called before showNotify has finished then wait
// until it's open.
// If closeNotify is called before showNotify has finished then wait until it's open.
if (this.hasOpened) {
this.onCloseReady();
return;
Expand All @@ -216,30 +211,33 @@ export default class NotifyView extends Backbone.View {
this.$('.notify__popup').css('visibility', 'hidden');
this.$el.css('visibility', 'hidden');
this.remove();
} else {
this.$('.notify__popup').velocity({ opacity: 0 }, { duration: 400,
complete: () => {
this.$('.notify__popup').css('visibility', 'hidden');
}
});
this.$('.notify__shadow').velocity({ opacity: 0 }, { duration: 400,
complete: () => {
this.$el.css('visibility', 'hidden');
this.remove();
}
});
return;
}
Adapt.a11y.scrollEnable('body');
$('html').removeClass('notify');
// Return focus to previous active element
Adapt.a11y.popupClosed(this.$previousActiveElement);
// Return reference to the notify view
Adapt.trigger('notify:closed', this);

this.$('.notify__popup').velocity({ opacity: 0 }, { duration: 400,
complete: () => {
this.$('.notify__popup').css('visibility', 'hidden');
}
});
this.$('.notify__shadow').velocity({ opacity: 0 }, { duration: 400,
complete: () => {
this.$el.css('visibility', 'hidden');
this.remove();
}
});
}

remove(...args) {
this.removeSubView();

$(window).off('keyup', this.onKeyUp);

Adapt.notify.removeFromStack(this);
// Return focus to previous active element
Adapt.a11y.popupClosed(this.$previousActiveElement);

Adapt.trigger('notify:closed', this);

super.remove(...args);
}

Expand Down