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.

2 files changed, 32 insertions, 0 deletions

diff --git a/client/lib/escapeActions.js b/client/lib/escapeActions.js
index 04e7f3f3..b3d4efe0 100644
--- a/client/lib/escapeActions.js
+++ b/client/lib/escapeActions.js
@@ -13,6 +13,7 @@ EscapeActions = {
     'popup-close',
     'inlinedForm',
     'detailsPane',
+    'modalWindow',
     'multiselection',
     'sidebarView'
   ],
diff --git a/client/lib/modal.js b/client/lib/modal.js
new file mode 100644
index 00000000..04a9b8b2
--- /dev/null
+++ b/client/lib/modal.js
@@ -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' }
+);