Extend RouteGadget. Make use of new API in examples.

examples/route/gadget-color-picker.html

@@ -10,20 +10,16 @@
             // dirty way to get which is actual gadget we are used for
             gadget_id = $(".body").parent().attr("id")
             gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
+
+            // define entry point which handles an url
             gadget.render = function (){
-              var body = $(".body");
-              // Home route. Redirect to sub app /color/
-              body
-                .route("add", "", 1)
-                .done(function () {
+              var body = $(".body"), handler_func;
+
               // Default route. Redirect to color subapp
-                  $.url.redirect('/color/');
-                });
+              RenderJs.RouteGadget.add("",
+                                       function () {$.url.redirect('/color/');}, 1);
 
-              // /color app. Create subroutes and initialize DOM
-              body
-                .route("add", "/color<path:params>", 1)
-                .done(function () {
+              handler_func = function () {
                   var i, j, k, increment = 150, page, container;
                   // Container for the selected color
                   page = "<a href='" + $.url.generateUrl("unknown") + "'>Wrong global route<a>";
@@ -45,29 +41,27 @@
                   page += "<a href='" +  $.url.generateUrl("/gadget-one/") + "'>Gadget 1</a>";
                   page += "&nbsp;<a href='" +  $.url.generateUrl("/gadget-two/") + "'>Gadget 2</a>";
                   page += "<div class='container'></div>";
-                  $('.body').html(page);
+                  body.html(page);
 
                   // Create sub routed in the container
-                  container = $(this).find("div");
-                  container
-                    .route("add", "/color/", 2)
-                    .done(function () {
-                      $('.select-color').text("Please select a color");
-                    });
-                  container
-                    .route("add", "/color/<int:red>/<int:green>/<int:blue>/", 2)
-                    .done(function (red, green, blue) {
+                  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>"
-                      );
-                    });
-                  container
-                    .route("go", $.url.getPath(), 2)
-                    .fail(function () {
-                      $('.select-color').html("Unknown color (" + $.url.getPath() + ")");
-                    });
-                });
+                                              "<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);
+
           };
         });
       //]]>

examples/route/require-renderjs_route.js

@@ -18,29 +18,27 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
             // XXX: try to encapsulate this in router gadget
             gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
             gadget.gadget_one = function (){
-              console.log("gadget-one");
               // we use interactionGadget which will call proper gadgets' function
             };
+
             gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
             gadget.gadget_two = function (){
-              console.log("gadget-two");
               // we use interactionGadget which will call proper gadgets' function
             };
 
-            // XXX: fid why interaction gadget is not initialized proeprly yet
-            RenderJs.InteractionGadget.bind($("#main-interactor"))
+            // XXX: fid why interaction gadget is not initialized properly yet
+            $("div[data-gadget-connection]").each(function (index, element) {
+              RenderJs.InteractionGadget.bind($(element));
+            });
 
-            var body = $("body");
             RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
             $.url.onhashchange(function () {
-                body
-                  .route("go", $.url.getPath())
-                  .fail(function () {
+              RenderJs.RouteGadget.go($.url.getPath(),
+                                      function () {
                                         // Method to display error to the user
                                         $(this).html(
                                           "<p>Oups, seems the route '<b>" + $.url.getPath() + "<\/b>' doesn't exist!<\/p>" +
-                        "<a href='" + $.url.generateUrl("") + "'>Go back to home<\/a>"
-                    );
+                                            "<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.js

@@ -768,19 +768,39 @@ var RenderJs = (function () {
                      * Create routes between gadgets.
                      */
                   var body = $("body"),
+                      handler_func,
                       gadget_route_list = gadget_dom.attr("data-gadget-route");
                   gadget_route_list = $.parseJSON(gadget_route_list);
                   $.each(gadget_route_list, function (key, gadget_route) {
-                    // add route itself
-                    body
-                      .route("add", gadget_route.source, 1)
-                      .done(function () {
+                    handler_func = function () {
                         var gadget_id = gadget_route.destination.split('.')[0],
-                            method_id = gadget_route.destination.split('.')[1];
+                            method_id = gadget_route.destination.split('.')[1],
                             gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
                         gadget[method_id]();
+                    };
+                    // add route itself
+                    RenderJs.RouteGadget.add(gadget_route.source, handler_func, 1);
                   });
-                  });
+                },
+
+                add: function (path, handler_func, priority) {
+                    /*
+                     * Add a route between path (hashable) and a handler function (part of Gadget's API).
+                     */
+                  var body = $("body");
+                  body
+                      .route("add", path, 1)
+                      .done(handler_func);
+                },
+
+                go: function (path, handler_func, priority) {
+                    /*
+                     * Go a route.
+                     */
+                  var body = $("body");
+                  body
+                      .route("go", path, priority)
+                      .fail(handler_func);
                 }
             };
         }())