Implement a modal system

I decided to create my own and not to use a community package, because
1. it's straightforward
2. it's better integrated with our others libs such as EscapeActions
3. monitoring third-party packages evolutions (eg, CSS changes) is a
   lot of work.

This is basically the same rationale than for our other generic UI
components such as the Popup/Popover.

This commit also slightly modify the general layout to remove
unnecessary wrapper DOM nodes.
This commit is contained in:
Maxime Quandalle 2015-08-25 23:39:00 +02:00
parent 46a5e08aa7
commit 9faaf07e02
7 changed files with 79 additions and 10 deletions

31
client/lib/modal.js Normal file
View file

@ -0,0 +1,31 @@
const closedValue = null
Modal = new class {
constructor() {
this._currentModal = new ReactiveVar(closedValue)
}
getTemplateName() {
return this._currentModal.get()
}
isOpen() {
return this.getTemplateName() !== closedValue
}
close() {
this._currentModal.set(closedValue)
}
open(modalName) {
this._currentModal.set(modalName)
}
};
Blaze.registerHelper('Modal', Modal)
EscapeActions.register('modalWindow',
() => Modal.close(),
() => Modal.isOpen(),
{ noClickEscapeOn: '.modal-content' }
);