Make gadget independant from each other. Use global RouteGadget to route

between different applications.

examples/route/gadget-color-picker.html

@@ -20,7 +20,6 @@
     </ul>
     <div class="select-color" style="display: block;">Unknown color (/color/)</div>
 
-    <a href="#/gadget-one/">Gadget 1</a>&nbsp;<a href="#/gadget-two/">Gadget 2</a>
     <div class="container"></div>
 
     </div>
@@ -29,37 +28,30 @@
       //<![CDATA[
         $(document).ready(function() {
             gadget = RenderJs.getSelfGadget();
-            // define entry point which handles an url
-            gadget.render = function (){
-              var handler_func;
 
+            gadget.redirect = function () {
               // Default route. Redirect to color subapp
-              RenderJs.RouteGadget.add("",
-                                       function () {$.url.redirect('/color/');},
-                                       1);
-
-              handler_func = function () {
-
-                  // Create sub routed in the container
-                  RenderJs.RouteGadget.add("/color/",
-                                           function () {
-                                             $('.select-color').text("Please select a color");},
-                                           2);
-                  RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/",
-                                           function (red, green, blue) {
-                                            $('.select-color').html(
-                                              "<div style='background-color:rgb(" + red + "," + green + "," + blue + ");'>&nbsp;<\/div>" +
-                                              "<p>Color (" + red + "," + green + "," + blue + ") selected at " + new Date() + "<\/p>");},
-                                           2);
-                  RenderJs.RouteGadget.go($.url.getPath(),
-                                          function () {
-                                            $('.select-color').html("Unknown color (" + $.url.getPath() + ")");},
-                                          2);
-                };
-
-              // /color app. Create subroutes and initialize DOM
-              RenderJs.RouteGadget.add("/color<path:params>", handler_func, 1);
-          };
+              $.url.redirect('/color/');
+            };
+
+            gadget.initRoutes = function () {
+              // Create sub routed in the container
+              // XXX: it uses low level API
+              RenderJs.RouteGadget.add("/color/",
+                                       function () {
+                                         $('.select-color').text("Please select a color");},
+                                       2);
+              RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/",
+                                       function (red, green, blue) {
+                                        $('.select-color').html(
+                                           "<div style='background-color:rgb(" + red + "," + green + "," + blue + ");'>&nbsp;<\/div>" +
+                                           "<p>Color (" + red + "," + green + "," + blue + ") selected at " + new Date() + "<\/p>");},
+                                        2);
+              RenderJs.RouteGadget.go($.url.getPath(),
+                                      function () {
+                                        $('.select-color').html("Unknown color (" + $.url.getPath() + ")");},
+                                      2);
+            };
         });
       //]]>
     </script>

examples/route/gadget-three.html

@@ -11,10 +11,7 @@
             $(gadget.getDom()).find(".gadget-id-viewer").html("This is " + gadget.getId())
 
             gadget.render = function (gadget_id){
-              // XXX: find cooler way to get this gadget_id rather from url .. (closures?)
-              //gadget_id = window.location.toString().split("#")[1].replace("/", "").replace("/", "");
               gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
-              console.log(gadget);
               $(gadget.getDom().find(".gadget-id-viewer")).toggle();
             };
         });

examples/route/index.html

@@ -15,6 +15,8 @@
     <div data-gadget=""
          id="main-router"
          data-gadget-route="[
+          {&quot;source&quot;: &quot;&quot;, &quot;destination&quot;: &quot;gadget-color-picker.redirect&quot;},
+          {&quot;source&quot;: &quot;/color<path:params>&quot;, &quot;destination&quot;: &quot;gadget-color-picker.initRoutes&quot;},
           {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;main-router.gadget_one&quot;},
           {&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;main-router.gadget_two&quot;}]">
     </div>
@@ -22,6 +24,9 @@
     <div id="gadget-color-picker"
          data-gadget="gadget-color-picker.html"></div>
 
+    <a href="#/gadget-one/">Gadget 1</a>&nbsp;
+    <a href="#/gadget-two/">Gadget 2</a>
+
     <div id="gadget-one"
          data-gadget="gadget-one.html"></div>
 

examples/route/require-renderjs_route.js

@@ -20,8 +20,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
             gadget.gadget_one = function (){
               // we use interactionGadget which will call proper gadgets' function
             };
-
-            gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
             gadget.gadget_two = function (){
               // we use interactionGadget which will call proper gadgets' function
             };
@@ -31,7 +29,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
               RenderJs.InteractionGadget.bind($(element));
             });
 
-            RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
             $.url.onhashchange(function () {
               RenderJs.RouteGadget.go($.url.getPath(),
                                       function () {
@@ -40,9 +37,10 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
                                           "<p>Oups, seems the route '<b>" + $.url.getPath() + "<\/b>' doesn't exist!<\/p>" +
                                             "<a href='" + $.url.generateUrl("") + "'>Go back to home<\/a>");
                                         // All routes have been deleted by fail.
-                                        // Recreate the default one.
-                                        //initialize_route.apply(this, []);
-                                        RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
+                                        // XXX: Recreate the default routes using RouteGadget
+                                        $("div[data-gadget-route]").each(function (index, element) {
+                                          RenderJs.RouteGadget.route($(element));
+                                        });
                                       });
             });
           });

renderjs.js

@@ -794,6 +794,7 @@ var RenderJs = (function () {
                         var gadget_id = gadget_route.destination.split('.')[0],
                             method_id = gadget_route.destination.split('.')[1],
                             gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
+                        // XXX: pass passed to us arguments + gadget_id
                         gadget[method_id](gadget_id=gadget_id);
                     };
                     // add route itself