Skip to content

R
renderjs
Commit 3c081ec2 authored by Ivan Tyagov's avatar Ivan Tyagov
Browse files
Options

Use RouteGadget API to clean up. 

Extend RouteGadget API to test multiple routers per page.
parent 384df48f
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 39 deletions
examples/route/gadget-color-picker.html
View file @ 3c081ec2
...@@ -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);
}; };
}); });
//]]> //]]>
......
examples/route/require-renderjs_route.js
View file @ 3c081ec2
...@@ -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));
}); });
......
test/renderjs_test.js
View file @ 3c081ec2
...@@ -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);
}); });
}); });
......
test/route/gadget-one.html
View file @ 3c081ec2
...@@ -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>
......
test/route/index.html
View file @ 3c081ec2
...@@ -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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7