0.1.0

julianxhokaxhiu · Jun 17, 2017 · 57214b6 · 57214b6
1 parent 0de8b36
commit 57214b6
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+yarn.lock
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,2 @@
+demo.html
+yarn.lock
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # PostEvent
 A simple postMessage wrapper that acts like a CustomEvent
+
+WIP, documentation will come soon
diff --git a/demo.html b/demo.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>PostEvent Demo</title>
+</head>
+<body>
+  <!-- Load the PostEvent library -->
+  <script src="/index.js"></script>
+  <!--
+    On Window load, initialize the PostEvent library and try some demos:
+
+    1) Make sure the main thread tunes on "say" and alerts a custom parameter
+    2) Make sure the main thread tunes on "only.you" and alerts if successfull. This test is for namespaces.
+    3) Embed the iFrames and send an "iframeInit" event, which should be listened from the iFrames. If successful they should greet with their ID.
+    4) The first iFrame will be able to trigger the "only.you" event. An alert will be sent by the main thread and test2 iframe.
+  -->
+  <script>
+    window.onload = function () {
+      var postEvent = new PostEvent(),
+          appendIFrame = function ( id ) {
+            var iframe = document.createElement('iframe');
+            iframe.id = id;
+            iframe.src = 'about:blank';
+            document.body.appendChild(iframe);
+
+            if(iframe.contentDocument) doc = iframe.contentDocument;
+            else if(iframe.contentWindow) doc = iframe.contentWindow.document;
+            else if(iframe.document) doc = iframe.document;
+
+            if(doc == null) throw "Document not initialized";
+
+            doc.open();
+            doc.write(document.getElementById( iframe.id + '-tpl' ).innerHTML);
+            doc.close();
+          }
+
+      postEvent
+      .on( 'say', function ( params ){
+        alert( params.message );
+      })
+      .on( 'only.you', function (){
+        alert( '[main] ' + 'Were you calling me?')
+      })
+      .trigger( 'say', { message: 'Hello World' });
+
+      appendIFrame( 'test' );
+      appendIFrame( 'test2' );
+
+      setTimeout( function () {
+        postEvent.trigger( 'iframeInit' );
+      }, 10000 );
+    }
+  </script>
+  <!-- HTML template of test iframe -->
+  <template id="test-tpl">
+    <!DOCTYPE html>
+      <html>
+        <head>
+        </head>
+        <body>
+          <script src="/index.js"></script>
+          <script>
+            window.onload = function () {
+              var postEvent = new PostEvent();
+
+              postEvent
+              .trigger( 'only.you' )
+              .on( 'iframeInit', function () {
+                alert( 'Hello, this is ' + window.frameElement.id);
+              })
+            }
+          </script>
+        </body>
+      </html>
+  </template>
+  <!-- HTML template of test2 iframe -->
+  <template id="test2-tpl">
+    <!DOCTYPE html>
+      <html>
+        <head>
+        </head>
+        <body>
+          <script src="/index.js"></script>
+          <script>
+            window.onload = function () {
+              var postEvent = new PostEvent();
+
+              postEvent
+              .on( 'only.you', function () {
+                alert( '[' + window.frameElement.id + '] ' + 'Were you calling me?')
+              })
+              .on( 'iframeInit', function () {
+                alert( 'Hello, this is ' + window.frameElement.id);
+              })
+            }
+          </script>
+        </body>
+      </html>
+  </template>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,55 @@
+// startsWith polyfill @ MDN
+if (!String.prototype.startsWith) {
+  String.prototype.startsWith = function(searchString, position){
+    return this.substr(position || 0, searchString.length) === searchString;
+  };
+}
+
+// PostEvent main code
+function PostEvent( config ) {
+  if ( !config ) config = {};
+
+  this.messagePrefix = config.messagePrefix || 'PostEvent:';
+  this.debug = config.debug || false;
+
+  this.server = window.parent;
+}
+
+PostEvent.prototype.log = function ( message ) {
+  var warn = 'warn' in console ? console.warn : console.log;
+
+  if ( this.debug )
+    warn( this.messagePrefix + ' ' + message );
+}
+
+PostEvent.prototype.trigger = function ( name, params ) {
+  if ( name ) {
+    var message = {
+      name: name,
+      params: params || {}
+    };
+
+    this.server.postMessage( this.messagePrefix + JSON.stringify(message), '*' );
+  } else
+    this.log( 'Trying to call "trigger" without a "name". Call ignored.' )
+
+  return this;
+}
+
+PostEvent.prototype.on = function ( name, cb ) {
+  var that = this;
+
+  if ( name ) {
+    this.server.addEventListener( 'message', function ( event ){
+      if ( event.data.startsWith( that.messagePrefix ) ) {
+        var message = JSON.parse( event.data.substr( that.messagePrefix.length ) );
+        if ( message.name === name ) {
+          if ( cb ) cb( message.params );
+        }
+      }
+    });
+  } else
+    this.log( 'Trying to call "on" without a "name". Call ignored.' );
+
+  return this;
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "PostEvent",
+  "version": "0.1.0",
+  "main": "index.js",
+  "author": {
+    "name" : "Julian Xhokaxhiu",
+    "email" : "",
+    "url" : "https://julianxhokaxhiu.com/"
+  },
+  "license": "MIT",
+  "scripts": {
+    "serve": "node_modules/http-server/bin/http-server"
+  },
+  "devDependencies": {
+    "http-server": "^0.10.0"
+  }
+}