Added unload listener and trigger (#18)

* Added unload listener and trigger

Added tests for load function

Adjusted changelog and contributors

* Removed target param and added to readme

* Updated tests to remove target from unmount

* Refactored frame to allow unload event to initiate data-status update

* Cleaned code

* Updated Version number

* Took url out of unload trigger

* Updated changelog

CHANGELOG.md

@@ -1,5 +1,7 @@
 Next Release
 -------------
+* Added trigger for frame unloading. #18
+
 1.3.2
 ------
 * Updated default height calculation to max to account for dropdowns.

CONTRIBUTORS.md

@@ -6,10 +6,12 @@ Cerner Corporation
 - Elliott Hoffman [@slor]
 - Greg Howdeshell [@poloka]
 - Matt Schile [@mschile]
+- Sam Milligan [@grneggandsam]
 
 [@mhemesath]: https://github.com/mhemesath
 [@kafkahw]: https://github.com/kafkahw
 [@cmgurba]: https://github.com/cmgurba
 [@slor]: https://github.com/slor
 [@poloka]: https://github.com/poloka
 [@mschile]: https://github.com/mschile
+[@grneggandsam]: https://github.com/grneggandsam

README.md

@@ -96,6 +96,7 @@ Application lifecycles go through 3 stages as they load:
 1. ```mounted``` The application frame has been appended to the DOM and is loading the remote application site.
 2. ```launched``` The application frame has loaded and the embedded application has begun authorization sequence. At this time the app is loaded, but is hidden to prevent clickjacking.
 3. ```authorized``` The application has approved authorization and is now visible.
+4. ```unload``` The application frame is about to unload due to redirect or other causes.
 
 These statuses are communicated to the consumer application environment in 2 ways.
 
@@ -137,6 +138,11 @@ frame.on('xfc.launched', function() {
 frame.on('xfc.authorized', function(detail) {
   console.log('authorized', detail);
 })
+
+// Listen for a container to trigger an unload event
+frame.on('xfc.unload', function(detail) {
+  console.log('unloading', detail);
+})
 ```
 
 ### Fullscreen Events

src/consumer/frame.js

@@ -53,6 +53,12 @@ class Frame extends EventEmitter {
           return Promise.resolve();
         },
 
+        unload(detail = {}) {
+          self.wrapper.setAttribute('data-status', 'unloaded');
+          self.emit('xfc.unload', detail);
+          return Promise.resolve();
+        },
+
         resize(height = null, width = null) {
           if (typeof resizeConfig.customCalculationMethod === 'function') {
             resizeConfig.customCalculationMethod.call(self.iframe);

src/provider/application.js

@@ -19,6 +19,7 @@ class Application extends EventEmitter {
     this.authorizeConsumer = this.authorizeConsumer.bind(this);
     this.verifyChallenge = this.verifyChallenge.bind(this);
     this.emitError = this.emitError.bind(this);
+    this.unload = this.unload.bind(this);
 
     // If the document referer (parent frame) origin is trusted, default that
     // to the active ACL;
@@ -115,8 +116,9 @@ class Application extends EventEmitter {
   */
   launch() {
     if (window.self !== window.top) {
-      // 1: Setup listeners for all incoming communication
+      // 1: Setup listeners for all incoming communication and beforeunload
       window.addEventListener('message', this.handleConsumerMessage);
+      window.addEventListener('beforeunload', this.unload);
 
       // 2: Begin launch and authorization sequence
       this.JSONRPC.notification('launch');
@@ -231,6 +233,11 @@ class Application extends EventEmitter {
   emitError(error) {
     this.emit('xfc.error', error);
   }
+
+  unload() {
+    this.JSONRPC.notification('unload');
+    this.trigger('xfc.unload');
+  }
 }
 
 export default Application;

test/application.js

@@ -227,6 +227,15 @@ describe('Application', () => {
         expect(emittedError).to.equal(testErr);
       });
     });
+
+    describe("#unload()", () => {
+      it("calls this.trigger with event 'xfc.unload'", sinon.test(function() {
+        const trigger = this.stub(application, 'trigger');
+        application.unload();
+
+        sinon.assert.calledWith(trigger, 'xfc.unload');
+      }));
+    });
   });
 
   describe('#launch()', () => {