Every script calls Monocle.pieceLoaded.

You can use this to detect when parts of Monocle have loaded, in a similar way to how JSON-P works. If you define the global function onMonoclePiece, it will be passed the piece name. As a result of this, the framer functionality now works in IE8 (which bizarrely evaluates script tags in dynamic iframes when earlier script tags have not been loaded).
ruiwen · Mar 30, 2010 · 27fcaf1 · 27fcaf1
1 parent 7aa2bda
commit 27fcaf1
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 8 deletions.
diff --git a/src/book.js b/src/book.js
@@ -272,3 +272,5 @@ Monocle.Book.fromHTML = function (html) {
 
   return new Monocle.Book(bookData);
 }
+
+Monocle.pieceLoaded('book');
diff --git a/src/compat.js b/src/compat.js
@@ -57,3 +57,5 @@ if (typeof(MONOCLE_NO_COMPAT) == 'undefined') {
   }
 
 }
+
+Monocle.pieceLoaded('compat');
diff --git a/src/component.js b/src/component.js
@@ -432,3 +432,5 @@ Monocle.Component = function (book, id, index, chapters, html) {
 
   return API;
 }
+
+Monocle.pieceLoaded('component');
diff --git a/src/controls/contents.js b/src/controls/contents.js
@@ -115,3 +115,5 @@ Monocle.Styles.Controls.Contents = {
     "cursor": "pointer"
   }
 }
+
+Monocle.pieceLoaded('controls/contents');
diff --git a/src/controls/magnifier.js b/src/controls/magnifier.js
@@ -104,3 +104,5 @@ Monocle.Styles.Controls.Magnifier = {
     "font-size": "11px"
   }
 }
+
+Monocle.pieceLoaded('controls/magnifier');
diff --git a/src/controls/placesaver.js b/src/controls/placesaver.js
@@ -109,3 +109,6 @@ Monocle.Controls.PlaceSaver = function (reader) {
 
   return API;
 }
+
+
+Monocle.pieceLoaded('controls/placesaver');
diff --git a/src/controls/scrubber.js b/src/controls/scrubber.js
@@ -242,3 +242,5 @@ Monocle.Styles.Controls.Scrubber = {
   }
 }
 
+
+Monocle.pieceLoaded('controls/scrubber');
diff --git a/src/controls/spinner.js b/src/controls/spinner.js
@@ -80,3 +80,6 @@ Monocle.Styles.Controls.Spinner = {
     "background-position": "center center"
   }
 }
+
+
+Monocle.pieceLoaded('controls/spinner');
diff --git a/src/flippers/instant.js b/src/flippers/instant.js
@@ -103,3 +103,6 @@ Monocle.Flippers.Instant = function (reader, setPageFn) {
 
   return API;
 }
+
+
+Monocle.pieceLoaded('flippers/instant');
diff --git a/src/flippers/legacy.js b/src/flippers/legacy.js
@@ -164,3 +164,6 @@ Monocle.Styles.Flippers.Legacy = {
     "margin-top": "3px"
   }
 }
+
+
+Monocle.pieceLoaded('flippers/legacy');
diff --git a/src/flippers/slider.js b/src/flippers/slider.js
@@ -462,3 +462,6 @@ Monocle.Flippers.Slider = function (reader, setPageFn) {
 
   return API;
 }
+
+
+Monocle.pieceLoaded('flippers/slider');
diff --git a/src/framer.js b/src/framer.js
@@ -12,7 +12,8 @@ Monocle.Framer = function () {
     documentStyles:
       "body { margin: 0; padding: 0; border: 0; }" +
       "#rdr { width: 100%; height: 100%; position: absolute; }",
-    scripts: ["monocle.js"]
+    scripts: ["monocle.js"],
+    waitForPiece: 'monocle'
   }
 
   var p = {
@@ -29,6 +30,11 @@ Monocle.Framer = function () {
   }
 
 
+  // Creates an iframe, populates it with the barest required HTML (including
+  // all specified scripts and stylesheets), and waits for the HTML to load.
+  // When it has fully loaded, frameLoaded() will be called to create the actual
+  // reader instance.
+  //
   function newReader(node, bookData, options) {
     p.node = typeof(node) == "string" ? document.getElementById(node) : node;
     p.bookData = bookData;
@@ -47,22 +53,31 @@ Monocle.Framer = function () {
     for (var i = 0; i < k.scripts.length; ++i) {
       html += '<script type="text/javascript" src="'+k.scripts[i]+'"></script>';
     }
-    html += '<script type="text/javascript">' +
-      'Monocle.addListener(window, "load", function () {' +
-        'window.framer.frameLoaded();' +
-      '});</script>';
-    html += '</head><body><div id="rdr"></div></body></html>';
+    html += '</head><body>' +
+      '<div id="rdr"></div>' +
+      '<script type="text/javascript">window.framer.frameLoaded();</script>' +
+      '</body></html>';
 
     doc = p.cWin.document;
     doc.open();
-    doc.write(html);
     p.cWin.framer = API;
+    doc.write(html);
     doc.close();
   }
 
 
+  // If all the required libraries are loaded, we can create the reader.
+  // Otherwise, we should wait for the libraries. Make sure that
+  // k.waitForPiece is set to the final piece you depend on.
+  //
   function frameLoaded() {
-    p.cWin.reader = p.cWin.Monocle.Reader('rdr', p.bookData, p.readerOptions);
+    if (typeof p.cWin.Monocle != "undefined") {
+      p.cWin.reader = p.cWin.Monocle.Reader('rdr', p.bookData, p.readerOptions);
+    } else {
+      p.cWin.onMonoclePiece = function (piece) {
+        if (piece == k.waitForPiece) { frameLoaded(); }
+      }
+    }
   }
 
 
@@ -81,3 +96,5 @@ Monocle.Styles.framer = {
   "border": "0",
   "display": "block"
 }
+
+Monocle.pieceLoaded('framer');
diff --git a/src/monocle.js b/src/monocle.js
@@ -2,6 +2,12 @@ Monocle = {
   VERSION: "1.0.0"
 };
 
+Monocle.pieceLoaded = function (piece) {
+  if (typeof onMonoclePiece == 'function') {
+    onMonoclePiece(piece);
+  }
+}
+
 Monocle.Styles = {
   ruleText: function(rule) {
     if (typeof rule == "string") {
@@ -29,3 +35,5 @@ Monocle.Controls = {};
 
 //= require <flippers/legacy>
 //= require <flippers/slider>
+
+Monocle.pieceLoaded('monocle');
diff --git a/src/place.js b/src/place.js
@@ -107,3 +107,5 @@ Monocle.Place.FromPercentageThrough = function (component, percent) {
   place.setPercentageThrough(component, percent);
   return place;
 }
+
+Monocle.pieceLoaded('place');
diff --git a/src/reader.js b/src/reader.js
@@ -619,3 +619,5 @@ Monocle.Reader = function (node, bookData, options) {
 
   return API;
 }
+
+Monocle.pieceLoaded('reader');
diff --git a/src/styles.js b/src/styles.js
@@ -69,3 +69,5 @@ Monocle.Styles.Controls = {
 Monocle.Styles.Flippers = {
   // A separate namespace for flippers.
 }
+
+Monocle.pieceLoaded('styles');
diff --git a/test/framer/index.html b/test/framer/index.html
@@ -83,6 +83,7 @@
           "../../src/flippers/slider.js",
           "../../src/flippers/legacy.js"
         ];
+        framer.constants.waitForPiece = 'flippers/legacy';
         framer.newReader('reader', bookData);
       }
       Monocle.addListener(window, 'load', initFn);