Merge pull request #23 from LIN3S/feature/modal-initialized-event

The  component Modal (Vanilla) now dispatches a ModalInitializedEvent after it's initialization.

CHANGELOG.md

@@ -5,6 +5,8 @@ This changelog references the relevant changes done between versions.
 To get the diff for a specific change, go to https://github.com/LIN3S/FrontFoundation/commit/XXX where XXX is the change hash
 To get the diff between two versions, go to https://github.com/LIN3S/FrontFoundation/compare/v0.5.0...v0.6.0
 
+* 0.19.3
+    * The `Modal` component (Vanilla) now dispatches a `ModalInitializedEvent` after it's initialization.
 * 0.19.2
     * The `autocomplete` field's value is now passed as a prop and it has a "new-password" as it's default value.
 * 0.19.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lin3s-front-foundation",
-  "version": "0.19.2",
+  "version": "0.19.3",
   "author": "LIN3S",
   "license": "MIT",
   "description": "Library that provides a sort of commonly used front-end components in LIN3S projects",

src/js/event-bus/Modal/ModalInitializedEvent.js

@@ -0,0 +1,27 @@
+/*
+ * This file is part of the Euskaltel project.
+ *
+ * Copyright (c) 2017 LIN3S <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Mikel Tuesta <[email protected]>
+ */
+
+import {Event} from 'lin3s-event-bus';
+
+class ModalInitializedEvent extends Event {
+
+  static NAME = 'MODAL_INITIALIZED';
+
+  constructor({domNode, open, close} = {}) {
+    super(ModalInitializedEvent.NAME);
+
+    this.domNode = domNode;
+    this.open = open;
+    this.close = close;
+  }
+}
+
+export default ModalInitializedEvent;

src/js/event-bus/Modal/ModalInitializedEventSubscriber.js

@@ -0,0 +1,29 @@
+/*
+ * This file is part of the Euskaltel project.
+ *
+ * Copyright (c) 2017 LIN3S <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Mikel Tuesta <[email protected]>
+ */
+
+import {EventSubscriber} from 'lin3s-event-bus';
+import ModalInitializedEvent from './ModalInitializedEvent';
+
+class ModalInitializedEventSubscriber extends EventSubscriber {
+  constructor(modalId, aCallback, aPriority) {
+    super(aCallback, aPriority);
+
+    this.modalId = modalId;
+  }
+
+  isSubscribedTo(anEvent) {
+    const event = new ModalInitializedEvent();
+
+    return anEvent.getName() === event.getName() && anEvent.domNode.id === this.modalId;
+  }
+}
+
+export default ModalInitializedEventSubscriber;

src/js/event-bus/Modal/subscriptions.js

@@ -10,10 +10,22 @@
  * @author Ander Rodriguez <[email protected]>
  */
 
-import {Priority, LifeTimeEventPublisher} from 'lin3s-event-bus';
+import {Priority, OneTimeEventPublisher, LifeTimeEventPublisher} from 'lin3s-event-bus';
 import ModalStateChangedEventSubscriber from './ModalStateChangedEventSubscriber';
+import ModalInitializedEventSubscriber from './ModalInitializedEventSubscriber';
 
 const
+  onInitialized = (modalId, onModalInitializedCallback, priority) => {
+    const modalInitializedEventSubscriber = new ModalInitializedEventSubscriber(
+      modalId,
+      onModalInitializedCallback,
+      new Priority(priority)
+    );
+
+    OneTimeEventPublisher.subscribe(modalInitializedEventSubscriber);
+
+    return modalInitializedEventSubscriber;
+  },
   onStateChanged = (onModalStateChangedCallback, priority) => {
     const modalStateChangedEventSubscriber = new ModalStateChangedEventSubscriber(
       onModalStateChangedCallback,
@@ -26,5 +38,6 @@ const
   };
 
 export {
-  onStateChanged
+  onStateChanged,
+  onInitialized,
 };

src/js/ui/vanilla/components/Modal/Modal.js

@@ -9,8 +9,9 @@
  * @author Mikel Tuesta <[email protected]>
  */
 
-import {LifeTimeEventPublisher} from 'lin3s-event-bus';
+import {OneTimeEventPublisher, LifeTimeEventPublisher} from 'lin3s-event-bus';
 import ModalStateChangedEvent from './../../../../event-bus/Modal/ModalStateChangedEvent';
+import ModalInitializedEvent from './../../../../event-bus/Modal/ModalInitializedEvent';
 
 class Modal {
 
@@ -37,6 +38,7 @@ class Modal {
     this.onKeyDown = this.onKeyDown.bind(this);
 
     this.bindListeners();
+    this.publishModalInitializedEvent();
   }
 
   bindListeners() {
@@ -84,6 +86,14 @@ class Modal {
       state: this.state
     }));
   }
+
+  publishModalInitializedEvent() {
+    OneTimeEventPublisher.publish(new ModalInitializedEvent({
+      open: this.open.bind(this),
+      close: this.close.bind(this),
+      domNode: this.domNode,
+    }));
+  }
 }
 
 export default Modal;

tests/app/app.js

@@ -216,6 +216,14 @@ const scrollToWithMenuLinks = () => {
   });
 };
 
+const testModalInitializedEvent = () => {
+  console.log('Testing EventBus.Modal.onInitialized');
+
+  EventBus.Modal.onInitialized('modal-test', modalInitializedEvent => {
+    console.log('modal has been initialized!', modalInitializedEvent.domNode);
+  });
+};
+
 const onReady = () => {
   testAsyncCancelablePromise();
   testBrowserIsIE11();
@@ -225,6 +233,7 @@ const onReady = () => {
   testValidatory();
   testCookies();
   scrollToWithMenuLinks();
+  testModalInitializedEvent();
 };
 
 addAsyncValidator();