Commit e417ed3b authored by Ivan Tyagov's avatar Ivan Tyagov

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

between different applications.
parent 036c479f
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
</ul> </ul>
<div class="select-color" style="display: block;">Unknown color (/color/)</div> <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 class="container"></div>
</div> </div>
...@@ -29,18 +28,15 @@ ...@@ -29,18 +28,15 @@
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
gadget = RenderJs.getSelfGadget(); 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 // Default route. Redirect to color subapp
RenderJs.RouteGadget.add("", $.url.redirect('/color/');
function () {$.url.redirect('/color/');}, };
1);
handler_func = function () {
gadget.initRoutes = function () {
// Create sub routed in the container // Create sub routed in the container
// XXX: it uses low level API
RenderJs.RouteGadget.add("/color/", RenderJs.RouteGadget.add("/color/",
function () { function () {
$('.select-color').text("Please select a color");}, $('.select-color').text("Please select a color");},
...@@ -56,10 +52,6 @@ ...@@ -56,10 +52,6 @@
$('.select-color').html("Unknown color (" + $.url.getPath() + ")");}, $('.select-color').html("Unknown color (" + $.url.getPath() + ")");},
2); 2);
}; };
// /color app. Create subroutes and initialize DOM
RenderJs.RouteGadget.add("/color<path:params>", handler_func, 1);
};
}); });
//]]> //]]>
</script> </script>
......
...@@ -11,10 +11,7 @@ ...@@ -11,10 +11,7 @@
$(gadget.getDom()).find(".gadget-id-viewer").html("This is " + gadget.getId()) $(gadget.getDom()).find(".gadget-id-viewer").html("This is " + gadget.getId())
gadget.render = function (gadget_id){ 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); gadget = RenderJs.GadgetIndex.getGadgetById(gadget_id);
console.log(gadget);
$(gadget.getDom().find(".gadget-id-viewer")).toggle(); $(gadget.getDom().find(".gadget-id-viewer")).toggle();
}; };
}); });
......
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
<div data-gadget="" <div data-gadget=""
id="main-router" id="main-router"
data-gadget-route="[ 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-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;}]"> {&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;main-router.gadget_two&quot;}]">
</div> </div>
...@@ -22,6 +24,9 @@ ...@@ -22,6 +24,9 @@
<div id="gadget-color-picker" <div id="gadget-color-picker"
data-gadget="gadget-color-picker.html"></div> 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" <div id="gadget-one"
data-gadget="gadget-one.html"></div> data-gadget="gadget-one.html"></div>
......
...@@ -20,8 +20,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d ...@@ -20,8 +20,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
gadget.gadget_one = function (){ gadget.gadget_one = function (){
// we use interactionGadget which will call proper gadgets' function // we use interactionGadget which will call proper gadgets' function
}; };
gadget = RenderJs.GadgetIndex.getGadgetById("main-router");
gadget.gadget_two = function (){ gadget.gadget_two = function (){
// we use interactionGadget which will call proper gadgets' function // we use interactionGadget which will call proper gadgets' function
}; };
...@@ -31,7 +29,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d ...@@ -31,7 +29,6 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d
RenderJs.InteractionGadget.bind($(element)); RenderJs.InteractionGadget.bind($(element));
}); });
RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
$.url.onhashchange(function () { $.url.onhashchange(function () {
RenderJs.RouteGadget.go($.url.getPath(), RenderJs.RouteGadget.go($.url.getPath(),
function () { function () {
...@@ -40,9 +37,10 @@ require([ "renderjs", "require-renderjs", "jquery", "route", "url" ], function(d ...@@ -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>" + "<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. // All routes have been deleted by fail.
// Recreate the default one. // XXX: Recreate the default routes using RouteGadget
//initialize_route.apply(this, []); $("div[data-gadget-route]").each(function (index, element) {
RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render(); RenderJs.RouteGadget.route($(element));
});
}); });
}); });
}); });
......
...@@ -794,6 +794,7 @@ var RenderJs = (function () { ...@@ -794,6 +794,7 @@ var RenderJs = (function () {
var gadget_id = gadget_route.destination.split('.')[0], 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 = RenderJs.GadgetIndex.getGadgetById(gadget_id);
// XXX: pass passed to us arguments + gadget_id
gadget[method_id](gadget_id=gadget_id); gadget[method_id](gadget_id=gadget_id);
}; };
// add route itself // add route itself
......
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