changeset 34:3577634b575c

experimental postMessage stuff
author Atul Varma <avarma@mozilla.com>
date Fri, 23 Apr 2010 16:18:14 -0700
parents fdf9a6ac2848
children 1930087bd219
files js/login.js js/post-office.js login-example.html login.html
diffstat 4 files changed, 136 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/login.js	Fri Apr 23 16:18:14 2010 -0700
@@ -0,0 +1,24 @@
+PostOffice.exposedMethods = {
+  getCurrentUser: function getCurrentUser(arg, cb, event) {
+    console.log("from", event.origin);
+    cb({user: "NO U"});
+  }
+};
+
+window.addEventListener(
+  "DOMContentLoaded",
+  function() {
+    var form = document.getElementById("find-user");
+    form.addEventListener(
+      "submit",
+      function(event) {
+        if (window.opener)
+          PostOffice.send("userChanged", {user: "hi"}, window.opener);
+        event.preventDefault();
+      },
+      false
+    );
+    //var pw = document.getElementById("password").value;
+  },
+  false
+);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/post-office.js	Fri Apr 23 16:18:14 2010 -0700
@@ -0,0 +1,45 @@
+var PostOffice = {
+  latestID: 1,
+  poBoxes: {},
+  exposedMethods: {},
+  send: function send(command, arg, window, cb) {
+    var msg = {
+      command: command,
+      arg: arg,
+      id: this.latestID++
+    };
+    if (cb)
+      this.poBoxes[msg.id] = cb;
+    window.postMessage(JSON.stringify(msg), "*");
+  },
+  receive: function receive(event) {
+    var msg = JSON.parse(event.data);
+    if (msg.command) {
+      if (msg.command in this.exposedMethods) {
+        function callback(arg) {
+          event.source.postMessage(
+            JSON.stringify({id: msg.id, arg: arg}),
+            "*"
+          );
+        }
+        this.exposedMethods[msg.command](msg.arg, callback, event);
+      } else
+        throw new Error("unknown method: " + msg.command);
+    } else if (msg.id) {
+      if (msg.id in this.poBoxes) {
+        var cb = this.poBoxes[msg.id];
+        delete this.poBoxes[msg.id];
+        cb(msg.arg);
+      } else
+        throw new Error("no callback registered for msg id " +
+                        msg.id);
+    } else
+      throw new Error("unknown message: " + event.data);
+  }
+};
+
+window.addEventListener(
+  "message",
+  function(event) { PostOffice.receive(event); },
+  false
+);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/login-example.html	Fri Apr 23 16:18:14 2010 -0700
@@ -0,0 +1,42 @@
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="css/jquery-ui.css" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="css/dashboard.css" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="css/file-bug.css" />
+  <title>Atul's User-Finder</title>
+</head>
+<body>
+<div id="reports">
+  <h1>Atul's Bugzilla Login Example</h1>
+  <div id="login">Click to login</div>
+  <iframe id="login-frame"
+          src="login.html" style="display: none;"></iframe>
+</div>
+</body>
+<script src="js/jquery.js"></script>
+<script src="js/post-office.js"></script>
+<script>
+PostOffice.exposedMethods = {
+  userChanged: function(arg, cb, event) {
+    console.log("USER CHANGED " + arg.user);
+  }
+};
+
+$(window).ready(function() {
+  var login = $("#login-frame").get(0).contentWindow;
+  $("#login").click(function() {
+    //window.open("login.html", "BugzillaLogin", "width=640,height=480");
+    PostOffice.send(
+      "getCurrentUser", null,
+      login,
+      function(response) {
+        console.log(response.user);
+    });
+  });
+});
+</script>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/login.html	Fri Apr 23 16:18:14 2010 -0700
@@ -0,0 +1,25 @@
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Atul's Bugzilla Login Manager</title>
+</head>
+<body>
+  <form id="find-user">
+  <table>
+    <tr>
+      <td>Your Username</td>
+      <td><input type="text" id="username"
+                 value="avarma@mozilla.com"/></td>
+    </tr>
+    <tr>
+      <td>Your Password</td>
+      <td><input type="password" id="password"/></td>
+    </tr>
+  </table>
+  <br/>
+  <input type="submit" id="submit" value="Login"/>
+  </form>
+</body>
+<script src="js/post-office.js"></script>
+<script src="js/login.js"></script>
+</html>