Fix #10, create public namespace. startTowTruck renamed to TowTruck()…

…, and some global variables moved under that namespace.
jsfiddle · Feb 4, 2013 · 4ffec6e · 4ffec6e
1 parent d49b050
commit 4ffec6e
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ Integration
 
 TowTruck is meant to be an unintrusive bit of Javascript you add to your page to enable these collaborative features.  It inspects the page to determine what fields can be synchronized between the two browsers, and adds its own interface on top of the content.
 
-`towtruck.js` itself is just a small piece of code to start up TowTruck, it should not cause overhead in your code.  You can either include an element on your page `<div id="towtruck-starter"></div>`, and a TowTruck button will be added to that, or you can call `startTowTruck()` yourself.
+`towtruck.js` itself is just a small piece of code to start up TowTruck, it should not cause overhead in your code.  You can either include an element on your page `<div id="towtruck-starter"></div>`, and a TowTruck button will be added to that, or you can call `TowTruck()` yourself.
 
 You can enter `/help` into the chat window to see some developer-oriented features.
 

diff --git a/app/examples/public/friendlycode/index.html b/app/examples/public/friendlycode/index.html
@@ -19,11 +19,13 @@
     </script>
     <script>
     require.baseUrl = "js";
-    // We don't want TowTruck to try to load until after FriendlyCode is started
-    // up:
-    window._TowTruckLoads = [];
-    window._TowTruckOnLoad = function (callback) {
-      window._TowTruckLoads.push(callback);
+    var TowTruckCallback = null;
+    window._TowTruckCallToStart = function (callback) {
+      if (TowTruckCallback) {
+        callback();
+      } else {
+        TowTruckCallback = callback;
+      }
     };
     require(["jquery", "friendlycode"], function($, FriendlycodeEditor) {
       var result = FriendlycodeEditor({
@@ -33,11 +35,12 @@
       result.ready.then(function () {
         var el = $(".publish-button");
         var newButton = $('<div class="wm-button wm-button-blue short" title="Call The TowTruck">T</div>');
-        newButton.click(startTowTruck);
+        newButton.click(TowTruck);
         el.before(newButton);
-        window._TowTruckLoads.forEach(function (callback) {
-          callback();
-        });
+        if (TowTruckCallback) {
+          TowTruckCallback();
+        }
+        TowTruckCallback = true;
       });
       return result;
     });

diff --git a/app/http/public/bookmarklet.html b/app/http/public/bookmarklet.html
@@ -8,7 +8,7 @@
     <script>
 window.addEventListener("load", function () {
   var el = document.getElementById("towtruck-bookmarklet");
-  el.href = startTowTruck.bookmarklet();
+  el.href = TowTruck.bookmarklet();
 }, false);
     </script>
   </head>

diff --git a/app/http/public/tests/exercise.js b/app/http/public/tests/exercise.js
@@ -2,7 +2,7 @@
 
 // First we test that we can load modules
 
-startTowTruck();
+TowTruck();
 wait(500);
 
 // =>
@@ -28,9 +28,12 @@ channel.send = Spy("send", function () {
   oldSend.apply(channel, arguments);
 }, {ignoreThis: true});
 var oldOnMessage = channel.onmessage;
-channel.onmessage = Spy("onmessage", function () {
+channel.onmessage = function (msg) {
   oldOnMessage.apply(channel, arguments);
-}, {ignoreThis: true});
+  if (msg.type != "cursor-update") {
+    print("onmessage(" + repr(msg) + ")");
+  }
+};
 
 // =>
 

diff --git a/app/http/public/tests/index.html b/app/http/public/tests/index.html
@@ -15,7 +15,7 @@
   <body class="autodoctest">
 
     <script>
-      if (startTowTruck._shareId) {
+      if (TowTruck._shareId) {
         // This is the client loaded by the other page
         document.body.className = "client";
         location.hash += "&client";

diff --git a/app/http/public/towtruck/session.js b/app/http/public/towtruck/session.js
@@ -25,7 +25,7 @@ define(["util", "channels"], function (util, channels) {
 
   session.hubUrl = function () {
     assert(session.shareId, "URL cannot be resolved before TowTruck.shareId has been initialized");
-    return startTowTruck.hubBase + "/hub/" + session.shareId;
+    return TowTruck.hubBase + "/hub/" + session.shareId;
   };
 
   session.shareUrl = function () {
@@ -227,8 +227,8 @@ define(["util", "channels"], function (util, channels) {
       name = window.name = "towtruck-" + util.generateId();
     }
     if (! shareId) {
-      if (startTowTruck._shareId) {
-        shareId = startTowTruck._shareId;
+      if (TowTruck._shareId) {
+        shareId = TowTruck._shareId;
       }
     }
     if (! shareId) {
@@ -246,9 +246,9 @@ define(["util", "channels"], function (util, channels) {
     if (! shareId) {
       var saved = session.getStorage("status." + name);
       assert(
-        saved || window._startTowTruckImmediately,
+        saved || TowTruck.startTowTruckImmediately,
         "No clientId could be found via location.hash or in localStorage; it is unclear why TowTruck was ever started");
-      if ((! saved) && window._startTowTruckImmediately) {
+      if ((! saved) && TowTruck.startTowTruckImmediately) {
         isClient = false;
         shareId = session.settings.get("stickyShare");
         if (! shareId) {
@@ -305,7 +305,7 @@ define(["util", "channels"], function (util, channels) {
     session.emit("shareId");
   };
 
-  if (window._startTowTruckImmediately) {
+  if (TowTruck.startTowTruckImmediately) {
     setTimeout(session.start);
   }
 

diff --git a/app/http/public/towtruck/tracker.js b/app/http/public/towtruck/tracker.js
@@ -161,6 +161,7 @@ define(["jquery", "util", "session", "element-finder"], function ($, util, sessi
     },
 
     change: function () {
+      console.log("Got change in element", this.element);
       var newValue = this.getState();
       var old = this.curState;
       if (newValue == old) {

diff --git a/app/http/public/towtruck/webrtc.js b/app/http/public/towtruck/webrtc.js
@@ -214,7 +214,7 @@ define(["jquery", "util", "session", "ui"], function ($, util, session, ui) {
       var video = $("#towtruck-video");
       for (var i=0; i<conn.remoteStreams.length; i++) {
         var s = conn.remoteStreams[i];
-        //addStream(video, s);
+        addStream(video, s);
       }
       addStream(video, event.stream);
       video[0].play();

diff --git a/app/http/views/towtruck/towtruck.js b/app/http/views/towtruck/towtruck.js
@@ -23,7 +23,7 @@
     }
     button = document.createElement("button");
     button.innerHTML = "Start TowTruck";
-    button.addEventListener("click", startTowTruck, false);
+    button.addEventListener("click", TowTruck, false);
     control.appendChild(button);
   }, false);
 
@@ -40,27 +40,21 @@
     document.head.appendChild(script);
   }
 
-  var startTowTruck = window.startTowTruck = function (doneCallback) {
-    if (startTowTruck.loaded) {
-      var session = startTowTruck.require("session");
+  var TowTruck = window.TowTruck = function (doneCallback) {
+    if (TowTruck._loaded) {
+      var session = TowTruck.require("session");
       session.start();
       // Note if this is an event handler, doneCallback will be an
       // event object and not a function
-      if (typeof doneCallback == "function") {
+      if (doneCallback && typeof doneCallback == "function") {
         doneCallback();
       }
       return;
     }
     // A sort of signal to session.js to tell it to actually
     // start itself (i.e., put up a UI and try to activate)
-    if (! window._startTowTruckImmediately) {
-      window._startTowTruckImmediately = true;
-    }
+    TowTruck.startTowTruckImmediately = true;
     styles.forEach(addStyle);
-    var callbacks = [];
-    window._TowTruckOnLoad = function (callback) {
-      callbacks.push(callback);
-    };
     var oldRequire = window.require;
     var oldDefine = window.define;
     var config = {
@@ -73,13 +67,10 @@
     };
     var deps = ["session"];
     function callback() {
-      startTowTruck.loaded = true;
-      startTowTruck.require = require;
-      startTowTruck.define = define;
-      callbacks.forEach(function (c) {
-        c();
-      });
-      if (doneCallback) {
+      TowTruck._loaded = true;
+      TowTruck.require = require;
+      TowTruck.define = define;
+      if (doneCallback && typeof doneCallback == "function") {
         doneCallback();
       }
     }
@@ -99,10 +90,10 @@
     addScript("/towtruck/libs/require.js");
   };
 
-  startTowTruck.hubBase = "<%= process.env.HUB_BASE %>";
-  startTowTruck.baseUrl = baseUrl;
+  TowTruck.hubBase = "<%= process.env.HUB_BASE %>";
+  TowTruck.baseUrl = baseUrl;
 
-  startTowTruck.bookmarklet = function () {
+  TowTruck.bookmarklet = function () {
     var s = "window._TowTruckBookmarklet = true;";
     s += "s=document.createElement('script');";
     s += "s.src=" + JSON.stringify(baseUrl + "/towtruck.js") + ";";
@@ -116,35 +107,44 @@
   var hash = location.hash.replace(/^#/, "");
   var m = /&?towtruck=([^&]*)/.exec(hash);
   if (m) {
-    startTowTruck._shareId = m[1];
+    TowTruck._shareId = m[1];
     var newHash = hash.substr(0, m.index) + hash.substr(m.index + m[0].length);
     location.hash = newHash;
   }
 
+  function conditionalOnload() {
+    // A page can define this function to defer TowTruck from starting
+    if (window._TowTruckCallToStart) {
+      window._TowTruckCallToStart(onload);
+    } else {
+      onload();
+    }
+  }
+
   function onload() {
-    if (startTowTruck._shareId) {
-      window._startTowTruckImmediately = true;
-      startTowTruck();
+    if (TowTruck._shareId) {
+      TowTruck.startTowTruckImmediately = true;
+      TowTruck();
     } else if (window._TowTruckBookmarklet) {
       delete window._TowTruckBookmarklet;
-      startTowTruck();
+      TowTruck();
     } else {
       var name = window.name;
       var key = "towtruck.status." + name;
       var value = localStorage.getItem(key);
       if (value) {
         value = JSON.parse(value);
         if (value && value.running) {
-          startTowTruck();
+          TowTruck();
         }
       }
     }
   }
 
   if (document.readyState == "complete") {
-    onload();
+    conditionalOnload();
   } else {
-    window.addEventListener("load", onload, false);
+    window.addEventListener("load", conditionalOnload, false);
   }
 
 })();