Commit 3940f9c7 authored by Ivan Tyagov's avatar Ivan Tyagov

Add basic of RouteGadget which uses route.js.

Add example for routes and gadgets.
parent 87f0c89f
<html>
<head></head>
<body>
<h2> Color picker</h2>
<div id="body"></div>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("gadget-color-picker");
gadget.render = function (){
var body = $("body");
// Home route. Redirect to sub app /color/
body
.route("add", "", 1)
.done(function () {
// Default route. Redirect to color subapp
$.url.redirect('/color/');
});
// /color app. Create subroutes and initialize DOM
body
.route("add", "/color<path:params>", 1)
.done(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;' id='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 id='container'></div>";
$('#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) {
$('#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() + ")");
});
});
};
});
//]]>
</script>
</body>
</html>
<html>
<head></head>
<body>
<h1> This is footer loaded asynchronously at startup</h1>
</body>
</html>
<html>
<head></head>
<body>
<h1> Below is Gadget 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("gadget-one");
gadget.render = function (){
$("#gadget-one").html("<h2>Gadget 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>");
$("#gadget-two").empty(); // XXX: this will become redundant if we use Tabbular gadget
};
});
//]]>
</script>
</body>
</html>
<html>
<head></head>
<body>
<h1> Below is Gadget 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("gadget-two");
gadget.render = function (){
$("#gadget-one").empty(); // XXX: this will become redundant if we use Tabbular gadget
$("#gadget-two").html("<h2>Gadget 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>");
};
});
//]]>
</script>
</body>
</html>
......@@ -11,11 +11,30 @@
</head>
<body>
<div id="body"></div>
<div data-gadget=""
id="main-router"
data-gadget-route="[
{&quot;source&quot;: &quot;/gadget-one/&quot;, &quot;destination&quot;: &quot;gadget-one&quot;},
{&quot;source&quot;: &quot;/gadget-two/&quot;, &quot;destination&quot;: &quot;gadget-two&quot;}]">
</div>
<div id="gadget-color-picker"
data-gadget="gadget-color-picker.html"></div>
<div id="gadget-one"
data-gadget="gadget-one.html"></div>
<div id="gadget-two"
data-gadget="gadget-two.html"></div>
<div id="gadget-footer"
data-gadget="gadget-footer.html"></div>
<noscript>
Please enable Javascript
</noscript>
</body>
</html>
......@@ -9,82 +9,13 @@ require.config({
});
require([ "require-renderjs", "jquery", "route", "url" ], function(domReady) {
var body = $("body"),
initialize_route;
var body = $("body");
// XXX: we should use Renderjs's bindReady
setTimeout(
function () {
initialize_route = function () {
// Home route. Redirect to sub app /color/
body
.route("add", "", 1)
.done(function () {
// Default route. Redirect to color subapp
$.url.redirect('/color/');
});
// add gadgets who use route (history)
body
.route("add", "/gadget-one/", 1)
.done(function () {
RenderJs.addGadget('container', "gadget-one", "gadget-one.html", "", "");
});
body
.route("add", "/gadget-two/", 1)
.done(function () {
RenderJs.addGadget('container', "gadget-two", "gadget-two.html", "", "");
});
// /color app. Create subroutes and initialize DOM
body
.route("add", "/color<path:params>", 1)
.done(function () {
var i, j, k, increment = 150, page, container;
// Container for the selected color
page = "<p>Page generated at " + new Date() + "<\/p>";
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;' id='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 id='container'></div>";
$('#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) {
$('#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() + ")");
});
});
};
initialize_route.apply(body, []);
// render color picker application
RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
// Trigger route change
$.url.onhashchange(function () {
......@@ -98,7 +29,9 @@ require([ "require-renderjs", "jquery", "route", "url" ], function(domReady) {
);
// All routes have been deleted by fail.
// Recreate the default one.
initialize_route.apply(this, []);
//initialize_route.apply(this, []);
RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
});
});
}, 1000);
});
......@@ -17,6 +17,9 @@ var RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING = true;
// available
var RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND = true;
// by default RenderJs will examine and create all routes
var RENDERJS_ENABLE_IMPLICIT_ROUTE_CREATE = true;
// fallback for IE
if (typeof console === "undefined" || typeof console.log === "undefined") {
var console = {};
......@@ -36,18 +39,26 @@ var RenderJs = (function () {
if (RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING) {
RenderJs.bootstrap($('body'));
}
if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND) {
var root_gadget = RenderJs.GadgetIndex.getRootGadget();
if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND||RENDERJS_ENABLE_IMPLICIT_ROUTE_CREATE) {
// We might have a page without gadgets.
// Be careful, right now we can be in this case because
// asynchronous gadget loading is not finished
if (root_gadget !== undefined) {
RenderJs.bindReady(
function () {
if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND) {
// examine all Intaction Gadgets and bind accordingly
$("div[data-gadget-connection]").each(function (index, element) {
RenderJs.InteractionGadget.bind($(element));
});
}
if (RENDERJS_ENABLE_IMPLICIT_ROUTE_CREATE) {
// create all routes between gadgets
$("div[data-gadget-route]").each(function (index, element) {
RenderJs.RouteGadget.route($(element));
});
}
});
}
}
......@@ -729,6 +740,31 @@ var RenderJs = (function () {
});
}
};
}()),
RouteGadget : (function () {
/*
* A gadget that defines possible routes (i.e. URL changes) between gadgets.
*/
return {
route: function (gadget_dom) {
/*
* Create routes between gadgets.
*/
var body = $("body"),
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 () {
RenderJs.GadgetIndex.getGadgetById(gadget_route.destination).render();
});
});
}
};
}())
};
}());
\ No newline at end of file
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