Commit 384df48f authored by Ivan Tyagov's avatar Ivan Tyagov

Extend RouteGadget. Make use of new API in examples.

parent 09817dc3
......@@ -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);
};
});
//]]>
......
......@@ -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, []);
......
......@@ -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);
}
};
}())
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment