Commit 3c081ec2 authored by Ivan Tyagov's avatar Ivan Tyagov

Use RouteGadget API to clean up.

Extend RouteGadget API to test multiple routers per page.
parent 384df48f
...@@ -2,7 +2,26 @@ ...@@ -2,7 +2,26 @@
<head></head> <head></head>
<body> <body>
<h2> Color picker</h2> <h2> Color picker</h2>
<div class="body"></div> <div class="body">
<a href="#unknown">Wrong global route</a>
<ul style="list-style: none;">
<li><a href="#/color/0/0/0/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(0,0,0);">&nbsp;</a></li>
<li><a href="#/color/0/0/150/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(0,0,150);">&nbsp;</a></li>
<li><a href="#/color/0/150/0/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(0,150,0);">&nbsp;</a></li>
<li><a href="#/color/0/150/150/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(0,150,150);">&nbsp;</a></li>
<li><a href="#/color/150/0/0/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(150,0,0);">&nbsp;</a></li>
<li><a href="#/color/150/0/150/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(150,0,150);">&nbsp;</a></li>
<li><a href="#/color/150/150/0/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(150,150,0);">&nbsp;</a></li>
<li><a href="#/color/150/150/150/" style="text-decoration: none; display: block; width: 2em; background-color:rgb(150,150,150);">&nbsp;</a></li>
<li style="text-align: center;"><a href="#/color/X/X/X" style="text-decoration: none; display: block; width: 2em;">XXX</a></li>
</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>
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
//<![CDATA[ //<![CDATA[
...@@ -13,40 +32,20 @@ ...@@ -13,40 +32,20 @@
// define entry point which handles an url // define entry point which handles an url
gadget.render = function (){ gadget.render = function (){
var body = $(".body"), handler_func; var handler_func;
// Default route. Redirect to color subapp // Default route. Redirect to color subapp
RenderJs.RouteGadget.add("", RenderJs.RouteGadget.add("",
function () {$.url.redirect('/color/');}, 1); function () {$.url.redirect('/color/');},
1);
handler_func = 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>";
page += "<ul style='list-style: none;'>";
for (i = 0; i < 256; i += increment) {
for (j = 0; j < 256; j += increment) {
for (k = 0; k < 256; k += increment) {
page += "<li><a style='text-decoration: none; display: block; width: 2em; " +
"background-color:rgb(" + i + "," + j + "," + k + ");' " +
"href='" + $.url.generateUrl("/color/" + i + "/" + j + "/" + k + "/") + "'" +
">&nbsp;<\/a><\/li>";
}
}
}
page += "<li style='text-align: center;'><a style='text-decoration: none; display: block; width: 2em;' href='" +
$.url.generateUrl("/color/X/X/X") + "'>XXX<a><\/li>";
page += "<\/ul>";
page += "<div style='display: block;' class='select-color'><\/div>"
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);
// Create sub routed in the container // Create sub routed in the container
RenderJs.RouteGadget.add("/color/", RenderJs.RouteGadget.add("/color/",
function () { function () {
$('.select-color').text("Please select a color");}, 2); $('.select-color').text("Please select a color");},
2);
RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/", RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/",
function (red, green, blue) { function (red, green, blue) {
$('.select-color').html( $('.select-color').html(
...@@ -61,7 +60,6 @@ ...@@ -61,7 +60,6 @@
// /color app. Create subroutes and initialize DOM // /color app. Create subroutes and initialize DOM
RenderJs.RouteGadget.add("/color<path:params>", handler_func, 1); RenderJs.RouteGadget.add("/color<path:params>", handler_func, 1);
}; };
}); });
//]]> //]]>
......
...@@ -26,7 +26,7 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d ...@@ -26,7 +26,7 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
// we use interactionGadget which will call proper gadgets' function // we use interactionGadget which will call proper gadgets' function
}; };
// XXX: fid why interaction gadget is not initialized properly yet // we have to re-bind interaction gadget as main-route API implemantation changed
$("div[data-gadget-connection]").each(function (index, element) { $("div[data-gadget-connection]").each(function (index, element) {
RenderJs.InteractionGadget.bind($(element)); RenderJs.InteractionGadget.bind($(element));
}); });
......
...@@ -245,25 +245,48 @@ function setupRenderJSTest(){ ...@@ -245,25 +245,48 @@ function setupRenderJSTest(){
RenderJs.bindReady(function () { RenderJs.bindReady(function () {
start(); start();
// initialize route gadget as it's loaded asynchronously // initialize route gadget as it's loaded asynchronously
RenderJs.RouteGadget.route($("#main-router")); $("div[data-gadget-route]").each(function (index, element) {
RenderJs.RouteGadget.route($(element));
});
// listen to event and do actual routing // listen to event and do actual routing
$.url.onhashchange(function () { $.url.onhashchange(function () {
var body = $("body"); RenderJs.RouteGadget.go($.url.getPath(),
body function () {
.route("go", $.url.getPath()) console.log("no route");});
.fail(function () {
alert("no route");
});
}); });
$.url.go('/gadget-one/'); $.url.go('/gadget-one/');
// give some time so .render finishes, most likely we need some event like .bindReady // give some time so .render finishes, most likely we need some event like .bindReady
// to indicate that respective .render method finishes in generic RenderJs ? // to indicate that respective .render method finishes in generic RenderJs ?
stop(); stop();
setTimeout( function () { setTimeout( function () {
start();
// respective gadget .render method must be called and global var changed // respective gadget .render method must be called and global var changed
equal(1, route_changed); equal(1, route_changed);
equal('/gadget-one/', window.location.toString().split('#')[1]);
start();
$.url.go('/gadget-two/');
stop();
setTimeout( function () {
// respective gadget .render method must be called and global var changed
equal(2, route_changed);
equal('/gadget-two/', window.location.toString().split('#')[1]);
start();
$.url.go('/gadget-three/');
stop();
setTimeout( function () {
// respective gadget .render method must be called and global var changed
equal(3, route_changed);
equal('/gadget-three/', window.location.toString().split('#')[1]);
start();
}, 1000); }, 1000);
}, 1000);
}, 1000);
}); });
}); });
......
...@@ -5,9 +5,15 @@ ...@@ -5,9 +5,15 @@
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("gadget-one"); gadget = RenderJs.GadgetIndex.getGadgetById("gadget-one");
gadget.gadget_one = function (){ gadget.gadget_one = function () {
route_changed=1; // so we can test this method was actually called from qunit route_changed=1; // so we can test this method was actually called from qunit
}; };
gadget.gadget_two = function () {
route_changed=2; // so we can test this method was actually called from qunit
};
gadget.gadget_three = function () {
route_changed=3; // so we can test this method was actually called from qunit
};
}); });
//]]> //]]>
</script> </script>
......
...@@ -4,14 +4,20 @@ ...@@ -4,14 +4,20 @@
<title></title> <title></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head> </head>
<body> <body>
<div data-gadget="" <div data-gadget=""
id="main-router" id="main-router"
data-gadget-route="[ data-gadget-route="[
{&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one.gadget_one&quot;}]"> {&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one.gadget_one&quot;},
{&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;gadget-one.gadget_two&quot;}]">
</div>
<div data-gadget=""
id="suplimentary-router"
data-gadget-route="[
{&quot;source&quot;: &quot;/gadget-three/&quot;, &quot;destination&quot;: &quot;gadget-one.gadget_three&quot;}]">
</div> </div>
<div id="gadget-one" <div id="gadget-one"
......
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