Add eventlistener to body after DOM is loaded (#38)

oracle-samples · Apr 10, 2019 · bd85584 · bd85584
1 parent 1d59657
commit bd85584
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 Next Release
 -------------
 
+1.7.2
+------
+* Fix Image resizing for slow loading images by calling on document.
+
 1.7.1
 ------
 * Add Image resizing for slow loading images.

diff --git a/example/initialization/1_d_index.html b/example/initialization/1_d_index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>Embedded Content Consuming Site</title>
+    <meta charset="utf-8" />
+    <script src="http://localhost:8080/xfc.js"></script>
+    <style>
+      iframe {
+        width: 100%;
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+      html[hidden] { display: none; }
+      .xfc[data-status='mounted'] {
+        border: 5px dashed #000;
+      }
+      .xfc[data-status='launched'] {
+        border: 5px dashed #00F;
+      }
+      .xfc[data-status='authorized'] {
+        border: 5px dashed #0F0;
+      }
+      .grid {
+        display: flex;
+        flex-flow: row wrap;
+      }
+      .grid div {
+        padding: 20px;
+      }
+      #c1 {
+        border: 5px dashed #000;
+      }
+      #c2 {
+        border: 5px dashed #00F;
+      }
+      #c3 {
+        border: 5px dashed #0F0;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h2>The following are XFC's statuses (mounted, launched, authorized).</h2>
+    </div>
+    <div class="grid">
+      <div id="c1">
+        <h2>mounted app</h2>
+      </div>
+      <p></p>
+      <div id="c2">
+        <h2>launched app</h2>
+      </div>
+      <p></p>
+      <div id="c3">
+        <h2>authorized app</h2>
+      </div>
+    </div>
+    <p>This example shows that the image resizing event is called only after the DOM is loaded</p>
+    <script>
+      XFC.Consumer.init()
+      XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/initialization/1_d_provider.html');
+    </script>
+  </body>
+</html>
diff --git a/example/initialization/1_d_provider.html b/example/initialization/1_d_provider.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>HealtheLife Trusted Site</title>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        padding-bottom: 5px;
+      }
+      html[hidden] { display: none; }
+    </style>
+    <script src="http://localhost:8080/xfc.js"></script>
+    <script type="text/javascript">
+      XFC.Provider.init({ acls: ['*'] })
+    </script>
+  </head>
+  <body>
+    <div>
+      <h1>1. Initialization</h1>
+      <p>The image resizing event(imageRequestResize) is called only after the DOM is loaded.</p>
+    </div>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xfc",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "A Cross Frame Container that handles securely embedding web content into a 3rd party domain",
   "author": "Cerner Corporation",
   "license": "Apache-2.0",

diff --git a/src/provider/application.js b/src/provider/application.js
@@ -32,7 +32,7 @@ class Application extends EventEmitter {
     this.unload = this.unload.bind(this);
 
     // Resize for slow loading images
-    document.body.addEventListener('load', this.imageRequestResize.bind(this), true);
+    document.addEventListener('load', this.imageRequestResize.bind(this), true);
 
     // If the document referer (parent frame) origin is trusted, default that
     // to the active ACL;

diff --git a/test/application.js b/test/application.js
@@ -17,7 +17,11 @@ describe('Application', () => {
     const application = new Application();
 
     const oldDocument = global.document;
-    global.document = {referrer: 'http://localhost:8080', createElement: document.createElement.bind(document), body: { addEventListener: () => console.log('mock addEventListener') } };
+    global.document = {
+      referrer: 'http://localhost:8080',
+      createElement: document.createElement.bind(document),
+      addEventListener: () => console.log('mock addEventListener')
+    };
     application.init({acls, secret, onReady});
     global.document = oldDocument;
 
@@ -27,7 +31,11 @@ describe('Application', () => {
 
     it ("doesn't set activeACL to document referrer if not in ACL", () => {
       const insecureApp = new Application();
-      global.document = {referrer: 'http://evilsite.com', createElement: document.createElement.bind(document), body: { addEventListener: () => console.log('mock addEventListener') } };
+      global.document = {
+        referrer: 'http://evilsite.com',
+        createElement: document.createElement.bind(document),
+        addEventListener: () => console.log('mock addEventListener')
+      };
       insecureApp.init({acls, secret, onReady});
       global.document = oldDocument;
 
@@ -49,10 +57,10 @@ describe('Application', () => {
     it("sets application's JSONRPC", () => {
       expect(application.JSONRPC).to.be.an.instanceof(JSONRPC);
     });
-    
+
     it("calls addEventListener", sinon.test(function() {
-      sinon.spy(document.body, 'addEventListener');
-      expect(document.body.addEventListener.calledOnce);
+      sinon.spy(document, 'addEventListener');
+      expect(document.addEventListener.calledOnce);
     }));
 
     describe('#trigger(event, detail)', () => {
@@ -298,7 +306,7 @@ describe('Application', () => {
       sinon.assert.notCalled(requestResize);
     }));
   });
-  
+
   describe('#requestResize()', () => {
     it("does not resize when resizeConfig is null", sinon.test(function() {
       const application = new Application();
@@ -339,9 +347,17 @@ describe('Application', () => {
           addEventListener: () => console.log('mock addEventListener'),
           top: { length: -1 },
         };
+        const oldDocument = global.document;
+        global.document = {
+          referrer: 'http://localhost:8080',
+          createElement: document.createElement.bind(document),
+          addEventListener: () => console.log('mock addEventListener'),
+          body: (function () { return; })()
+        };
 
         const application = new Application();
         application.init({ acls: ['http://localhost:8080'] });
+        global.document = oldDocument;
         sinon.spy(window, 'addEventListener');
 
         application.launch();