reworked 2nd instance in example to only using ajax links

gadget/filebrowser.js

 /*global document, jQuery */
-// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
-"use strict";
 (function (document, $) {
+  "use strict";
 
   var getParameter = function(searchString, paramName) {
     var i, val, params = searchString.split("&");
@@ -15,33 +14,65 @@
     return null;
   };
 
-  var mapUrl = function (url) {
-    var searchString = url.href.split("?")[1],
-      fileToDisplay;
+  var mapUrl = function (searchString) {
+    var fileToDisplay = getParameter(searchString, "file"),
+      scope,
+      register,
+      service;
 
-    if (searchString) {
-      fileToDisplay = getParameter(searchString, "file");
     if (fileToDisplay) {
-
       $.ajax({
         method: 'GET',
-          // XXX Hardcoded
         url: fileToDisplay,
         context: $('body'),
         error: function (jqXHR, textStatus, errorThrown) {
           $(this).text(errorThrown);
         },
         success: function (value, textStatus, jqXHR) {
+
+          scope = value._links.scope.href.slice(0,-1).split(/[/]+/).pop();
+          register = value._links.call.href
+            .replace("{method}", "register")
+            .replace("{scope}", scope )
+            .replace("{interaction}", "");
+          service = {
+            "type": "service/test",
+            "src": encodeURIComponent(window.location.href),
+            "rel": "browse",
+            "self": window.frameElement.id
+          };
+
+          $.ajax({
+            method: 'POST',
+            url: register,
+            context: $(this),
+            data: JSON.stringify(service),
+            error: function (jqXHR, textStatus, errorThrown) {
+              console.log("registration failed: " + errorThrown);
+            },
+            success: function (value, textStatus, jqXHR) {
+              // console.log("registration successful");
+            }
+          });
+
+          // HACK: this is hacking the functionality provided by the
+          // filebrowser!
+          // 'browser://call/browse/' should be called by the interactor
+          // instead of hardcoding it here
           $.ajax({
             method: 'GET',
-              // XXX Hardcoded
-              url: value._links.storage.href,
+            url: value._links.scope.href,
             context: $('body'),
             error: function (jqXHR, textStatus, errorThrown) {
               $(this).text(errorThrown);
             },
             success: function (value2, textStatus, jqXHR) {
-                var content_type = jqXHR.getResponseHeader("Content-Type") || "";
+              var content_type = jqXHR.getResponseHeader("Content-Type") || "",
+                request = value._links.call.href
+                  .replace("{method}", "service")
+                  .replace("{scope}", scope )
+                  .replace("{interaction}", "preview");
+
               // XXX Hardcoded mime type
               if (content_type.split(';')[0] === "application/hal+json") {
                 // XXX Will fail if response does not send expected links...
@@ -49,20 +80,19 @@
                 for (var i in value2._links.contents){
                     $(this).append("<li><button id='" + i + "'>" +
                       value2._links.contents[i].href + "</button></li>");
+
                     $(this).find("#" + i.toString()).on('click', function(e, target) {
                       $.ajax({
-                         // XXX Hardcoded post and url
-                         // Why using postMessage?
                         method: "POST",
-                         url: value._links.display.href,
+                        url: request,
                         context: $(this),
                         data: $(this).text(),
                         error: function (jqXHR, textStatus, errorThrown) {
-                           console.log("Plumbing failed: " + errorThrown);
+                          console.log("request failed: " + errorThrown);
                         },
                       //  success: function (value, textStatus, jqXHR) {
-    //                       console.log(value);
-    //                     },
+                      //    console.log("request sent");
+                      //  }
                       });
                     });
                 }
@@ -70,21 +100,22 @@
               } else {
                 $(this).text("Unsupported content type " + content_type);
               };
-              },
+            }
           });
         },
       });
-
     } else {
       $("body").text("No parameter found in url");
     }
-    } else {
-      $("body").text("No parameter found in url (2)");
-    }
   };
 
   $(document).ready(function () {
-    mapUrl(window.location);
+    var search = window.location.search;
+    if (search) {
+      mapUrl(search.slice(1));
+    } else {
+      $("body").text("No parameter found in url");
+    }
   });
 
 }(document, jQuery));

gadget/filebrowser_and_preview.js

 /*global document, jQuery */
-// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
 "use strict";
 (function (document, $) {
 
@@ -20,6 +19,20 @@
     return -1;
   };
 
+  var generateUuid = function () {
+    var S4 = function () {
+      /* 65536 */
+      var i, string = Math.floor(
+        Math.random() * 0x10000
+      ).toString(16);
+      for (i = string.length; i < 4; i += 1) {
+        string = "0" + string;
+      }
+      return string;
+    };
+    return S4() + S4();
+  };
+
   var getParameter = function(searchString, paramName) {
     var i, val, params = searchString.split("&");
 
@@ -32,29 +45,69 @@
     return null;
   };
 
-  // this is our "interactor", it only knows one other iFrame
-  // so we post to this one!
   var handler = function (event) {
-    var frames = document.getElementsByTagName("iframe"), frame, i;
-    for (i = 0; i < frames.length; i += 1) {
-      frame = frames[i];
-      if (myIndexOf(
-        event.source.location.pathname,
-        frame.getAttribute("src").split("?")[0]
-      ) < 0) {
-        frame.contentWindow.postMessage(event.data, "*");
-        // frame.contentWindow.postMessage(event.data, window.location.href);
+    // prevent registrations to renderJs from triggering here
+    var type = event.data.type,
+      service,
+      scope,
+      request;
+
+    if (type === undefined) {
+      $.ajax({
+        method: "GET",
+        url: event.data,
+        error: function (jqXHR, textStatus, errorThrown) {
+          console.log("request failed: " + errorThrown);
+        },
+        success: function (value, textStatus, jqXHR) {
+          // we now have the URL to handle and the method
+          // to request. We need to POST this, because
+          // we can't access renderJS.gadgetService from here...
+          // when optimizing all the secondary ajax calls should be removed
+          // question also is, whether we need POST at all, if we could
+          // pass everything through the URL?
+          scope = value._links.self.href.split("/").slice(0,-1).pop();
+          service = {
+            "service" : value._links.self.href.split(/[/]+/).pop(),
+            "parameters" : [value._links.request.href],
+            "scope" : scope
           }
+          request = 'browser://request/' + scope + '/';
+
+          $.ajax({
+            method: "POST",
+            url: request,
+            context: $(this),
+            data: JSON.stringify(service),
+            error: function (jqXHR, textStatus, errorThrown) {
+              console.log("request for service failed");
+            },
+            //  success: function () {
+            //    console.log("service requested from renderJS");
+            //  }
+          });
         }
-  };
+      });
 
-  var mapUrl = function (url) {
-    var searchString = url.href.split("?")[1],
-      fileToDisplay, fileToDisplayData;
+//       var frames = document.getElementsByTagName("iframe"), frame, i;
+//       for (i = 0; i < frames.length; i += 1) {
+//         frame = frames[i];
+//         if (myIndexOf(
+//           event.source.location.pathname,
+//           frame.getAttribute("src").split("?")[0]
+//         ) < 0) {
+//           frame.contentWindow.postMessage(event.data, "*");
+//         }
+//       }
+    }
+  };
 
-    if (searchString) {
-      fileToDisplay = getParameter(searchString, "file");
+  var mapUrl = function (searchString) {
+    var fileToDisplay = getParameter(searchString, "file"),
+      browserAPI,
+      previewAPI;
 
+    if (fileToDisplay) {
       $.ajax({
         method: 'GET',
         // XXX Hardcoded
@@ -64,20 +117,39 @@
           $(this).text(errorThrown);
         },
         success: function (value, textStatus, jqXHR) {
-          fileToDisplayData = "data://application/hal+json;base64," + 
+          var access;
+          // detour to request, while working on the 2nd preview window
+          if (value._links.target.href === "preview_by_postmessage.html") {
+            access = "request";
+          } else {
+            access = "plumb";
+          }
+
+          // merge again once working!
+          browserAPI = "data://application/hal+json;base64," +
             window.btoa(JSON.stringify({
             _links: {
-              self: {href: value._links.storage.href},
-              storage: {href: value._links.storage.href},
-              display: {href: 'browser://plumb/parentwindow/'},
+              self: {href: value._links.scope.href},
+              scope: {href: value._links.scope.href},
+              display: {href: 'browser://' + access + '/parentwindow/'},
+              // pass API-url so child can call parent
+              call: {href:'browser://call/{method}/{scope}/{interaction}'}
             }}));
 
-          if (fileToDisplay) {
+          previewAPI = "data://application/hal+json;base64," +
+            window.btoa(JSON.stringify({
+            _links: {
+              self: {href:''},
+              scope: {href: value._links.scope.href},
+              display: {href: ''},
+              call: {href:'browser://call/{method}/{scope}/{interaction}'}
+            }}));
 
           $("body").html(
             '<iframe src="' +
             // XXX Hardcoded gadget to load
-              'filebrowser.html?file=' + fileToDisplayData +
+            'filebrowser.html?file=' + browserAPI +
+            '" id="' + generateUuid() +
             '">' +
             '<p>Your browser does not support iframes.</p>' +
             '</iframe">');
@@ -85,24 +157,25 @@
           $("body").append(
             '<iframe src="' +
             // XXX Hardcoded gadget to load
-              value._links.preview.href +
+            value._links.target.href + '?file=' + previewAPI +
+            '" id="' + generateUuid() +
             '">' +
             '<p>Your browser does not support iframes.</p>' +
             '</iframe">');
-
-          } else {
-            $("body").text("No parameter found in url");
         }
-        },
       });
-
     } else {
-      $("body").text("No parameter found in url (2)");
+      $("body").text("No parameter found in url");
     }
   };
 
   $(document).ready(function () {
-    mapUrl(window.location);
+    var search = window.location.search;
+    if (search) {
+      mapUrl(search.slice(1));
+    } else {
+      $("body").text("No parameter found in url");
+    }
 
     if (window.addEventListener){
       window.addEventListener("message", handler, false)

gadget/filecontent.js

 /*global document, jQuery */
-// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
-// filebrowser_and_preview.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
 "use strict";
 (function (document, $) {
 
-
-    // contents
+  // sample contents
   localStorage.setItem("foo", "bar");
   localStorage.setItem("baz", "bam");
   sessionStorage.setItem("cous", "cous");
   sessionStorage.setItem("schnick", "schnack");
-//   var myIndexOf = function (path, contains) {
-//     var len = path.length;
-//     var wordLen = contains.length;
-//     for(var i = 0; i < len; i++) {
-//       var j = 0;
-//       for(j = 0; j < wordLen; j++) {
-//         if(path[i+j] != contains[j]) {
-//             break;
-//         }
-//       }
-//       if(j == wordLen) {
-//         return i;
-//       }
-//     }
-//     return -1;
-//   };
-// 
-//   var getParameter = function(searchString, paramName) {
-//     var i, val, params = searchString.split("&");
-// 
-//     for (i=0;i<params.length;i++) {
-//       val = params[i].split("=");
-//       if (val[0] == paramName) {
-//         return decodeURIComponent(val[1]);
-//       }
-//     }
-//     return null;
-//   };
-// 
-//   // this is our "interactor", it only knows one other iFrame
-//   // so we post to this one!
-//   var handler = function (event) {
-//     var frames = document.getElementsByTagName("iframe"), frame, i;
-//     for (i = 0; i < frames.length; i += 1) {
-//       frame = frames[i];
-//       if (myIndexOf(
-//         event.source.location.pathname,
-//         frame.getAttribute("src").split("?")[0]
-//       ) < 0) {
-//         frame.contentWindow.postMessage(event.data, "*");
-//       }
-//     }
-//   };
-// 
-  var mapUrl = function (url) {
-//     var searchString = url.href.split("?")[1],
-//       fileToDisplay;
-// 
-//     if (searchString) {
-//       fileToDisplay = getParameter(searchString, "file");
-// 
-//       if (fileToDisplay) {
 
-        var param1 = "data://application/hal+json;base64," + 
+  var generateUuid = function () {
+    var S4 = function () {
+      var i, string = Math.floor(
+        Math.random() * 0x10000
+      ).toString(16);
+      for (i = string.length; i < 4; i += 1) {
+        string = "0" + string;
+      }
+      return string;
+    };
+    return S4() + S4();
+  };
+
+  var setup = function () {
+    // this will have to run automatically should renderJs have an easy API
+    var instance1 = "data://application/hal+json;base64," +
       window.btoa(JSON.stringify({
       _links: {
-            self: {href: ""},
-            storage: {href: 'browser://browse/ls/'},
-            preview: {href: 'preview_by_hash_change.html'},
+        self: {href: ''},
+        // not sure if scope should be passed as a link or JSON parameter
+        scope: {href: 'browser://browse/ls/'},
+        target: {href: 'preview_by_hash_change.html'},
+        call: {href: ''}
       }}));
 
-        var param2 = "data://application/hal+json;base64," + 
+    var instance2 = "data://application/hal+json;base64," +
       window.btoa(JSON.stringify({
       _links: {
-            self: {href: ""},
-            storage: {href: 'browser://browse/ss/'},
-            preview: {href: 'preview_by_postmessage.html'},
+        self: {href: ''},
+        scope: {href: 'browser://browse/ss/'},
+        target: {href: 'preview_by_postmessage.html'},
+        call: {href: ''}
       }}));
 
     $("body").append(
       '<iframe src="' +
       // XXX Hardcoded gadget to load
-          'filebrowser_and_preview.html' + "?file=" + param1 +
+      'filebrowser_and_preview.html' + "?file=" + instance1 +
+      '" id="' + generateUuid() +
       '">' +
       '<p>Your browser does not support iframes.</p>' +
       '</iframe">');
@@ -90,27 +54,15 @@
     $("body").append(
       '<iframe src="' +
       // XXX Hardcoded gadget to load
-          'filebrowser_and_preview.html' + "?file=" + param2 +
+      'filebrowser_and_preview.html' + "?file=" + instance2 +
+      '" id="' + generateUuid() +
       '">' +
       '<p>Your browser does not support iframes.</p>' +
       '</iframe">');
-
-//       } else {
-//         $("body").text("No parameter found in url");
-//       }
-//     } else {
-//       $("body").text("No parameter found in url (2)");
-//     }
   };
 
   $(document).ready(function () {
-    mapUrl(window.location);
-
-//     if (window.addEventListener){
-//       window.addEventListener("message", handler, false)
-//     } else {
-//       window.attachEvent("onmessage", handler)
-//     }
+    setup();
   });
 
 }(document, jQuery));

gadget/preview.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Preview</title>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script type="text/javascript"
+      src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+    <script type="text/javascript" src="../hyperbrowser.js"></script>
+    <script type="text/javascript" src="../renderjs.js"></script>
+    <script type="text/javascript" src="preview.js"></script>
+  </head>
+  <body>
+    <noscript>
+      Please enable Javascript
+    </noscript>
+  </body>
+</html>
\ No newline at end of file

gadget/preview.js

+// > grab URL with parameters of file to open
+// > call addGadget with those parameters?
+// > display a file from some storage (local/session)
+// > storage type will also be a parameter in the url?
+// return "browser://localstorage/foo"
+// file=browser%3A%2F%2Flocalstorage%2Ffoo
+
+/*global document, jQuery */
+"use strict";
+(function (document, $) {
+
+  var ajaxGet = function (src, cb) {
+    $.ajax({
+      method: 'GET',
+      url: src,
+      context: $('body'),
+      error: function (jqXHR, textStatus, errorThrown) {
+        $(this).text(errorThrown);
+      },
+      success: function (value, textStatus, jqXHR) {
+        cb(value, textStatus, jqXHR);
+      }
+    });
+  };
+
+  var handler = function (event) {
+    ajaxGet(event.data, function(value, status, jqXHR) {
+      ajaxGet(value._links.enclosure.href, function(value, status, jqXHR) {
+        if (value === "") {
+          window.document.body.innerHTML = "file not found";
+        } else {
+          window.document.body.innerHTML = value;
+        }
+      });
+    });
+  }
+
+  var mapUrl = function (url) {
+    var searchString = url.href.split("?")[1],
+      fileToDisplay;
+
+    if (searchString) {
+      fileToDisplay = getParameter(searchString, "file");
+      if (fileToDisplay) {
+        $.ajax({
+          method: 'GET',
+          url: fileToDisplay,
+          context: $('body'),
+          error: function (jqXHR, textStatus, errorThrown) {
+            $(this).text(errorThrown);
+          },
+          success: function (value, textStatus, jqXHR) {
+            if (value === "") {
+              $(this).text("file not found");
+            } else {
+              $(this).text(value);
+            }
+          },
+        });
+      }
+    } else {
+      $(this).text("no file to display");
+    }
+  };
+
+  var getParameter = function(searchString, paramName) {
+    var i, val, params = searchString.split("&");
+
+    for (i=0;i<params.length;i++) {
+      val = params[i].split("=");
+      if (val[0] == paramName) {
+        return decodeURIComponent(val[1]);
+      }
+    }
+    return null;
+  };
+
+  $(document).ready(function () {  
+    // mapUrl(window.location);
+
+    if (window.addEventListener){
+      window.addEventListener("message", handler, false)
+    } else {
+      window.attachEvent("onmessage", handler)
+    }
+  });
+
+}(document, jQuery));
\ No newline at end of file

gadget/preview_by_hash_change.js

@@ -83,6 +83,10 @@
     } else {
       window.attachEvent("onmessage", handler)
     }
+//     $(window).on('hashchange', function() {
+//       console.log("LE HASH CHANGED");
+//     });
+//     $(window).trigger("hashchange");
   });
 
 }(document, jQuery));
\ No newline at end of file

gadget/preview_by_postmessage.js

-// > grab URL with parameters of file to open
-// > call addGadget with those parameters?
-// > display a file from some storage (local/session)
-// > storage type will also be a parameter in the url?
-// return "browser://localstorage/foo"
-// file=browser%3A%2F%2Flocalstorage%2Ffoo
-
 /*global document, jQuery */
 "use strict";
 (function (document, $) {
@@ -24,6 +17,10 @@
   };
 
   var handler = function (event) {
+    var type = event.data.type,
+      method = type ? type.split("/")[0] : undefined;
+    // prevent both renderJs and page events triggering on "run"
+    if (type === undefined || method !== "run") {
       ajaxGet(event.data, function(value, status, jqXHR) {
         ajaxGet(value._links.enclosure.href, function(value, status, jqXHR) {
           if (value === "") {
@@ -34,13 +31,26 @@
         });
       });
     }
+  }
+
+  var getParameter = function(searchString, paramName) {
+    var i, val, params = searchString.split("&");
+
+    for (i=0;i<params.length;i++) {
+      val = params[i].split("=");
+      if (val[0] == paramName) {
+        return decodeURIComponent(val[1]);
+      }
+    }
+    return null;
+  };
 
-  var mapUrl = function (url) {
-    var searchString = url.href.split("?")[1],
-      fileToDisplay;
+  var mapUrl = function (searchString) {
+    var fileToDisplay = getParameter(searchString, "file"),
+      scope,
+      register,
+      service;
 
-    if (searchString) {
-      fileToDisplay = getParameter(searchString, "file");
     if (fileToDisplay) {
       $.ajax({
         method: 'GET',
@@ -50,33 +60,43 @@
           $(this).text(errorThrown);
         },
         success: function (value, textStatus, jqXHR) {
-            if (value === "") {
-              $(this).text("file not found");
-            } else {
-              $(this).text(value);
-            }
+
+          scope = value._links.scope.href.slice(0,-1).split(/[/]+/).pop();
+          register = value._links.call.href
+            .replace("{method}", "register")
+            .replace("{scope}", scope )
+            .replace("{interaction}", "");
+          service = {
+            "type": "service/test",
+            "src": encodeURIComponent(window.location.href),
+            "rel": "preview",
+            "self": window.frameElement.id
+          };
+
+          $.ajax({
+            method: 'POST',
+            url: register,
+            context: $(this),
+            data: JSON.stringify(service),
+            error: function (jqXHR, textStatus, errorThrown) {
+              console.log("registration failed: " + errorThrown);
             },
-        });
+            success: function (value, textStatus, jqXHR) {
+              // console.log("registration successful");
             }
-    } else {
-      $(this).text("no file to display");
+          });
         }
-  };
-
-  var getParameter = function(searchString, paramName) {
-    var i, val, params = searchString.split("&");
-
-    for (i=0;i<params.length;i++) {
-      val = params[i].split("=");
-      if (val[0] == paramName) {
-        return decodeURIComponent(val[1]);
+      });
     }
   }
-    return null;
-  };
 
   $(document).ready(function () {
-    // mapUrl(window.location);
+    var search = window.location.search;
+    if (search) {
+      mapUrl(search.slice(1));
+    } else {
+      $("body").text("No parameter found in url");
+    }
 
     if (window.addEventListener){
       window.addEventListener("message", handler, false)