Skip to content

renderjs
renderjs
Commit 3940f9c7 authored by Ivan Tyagov's avatar Ivan Tyagov
Browse files
Options

Add basic of RouteGadget which uses route.js. 

Add example for routes and gadgets.
parent 87f0c89f
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 107 deletions
examples/route/gadget-color-picker.html 0 → 100644
View file @ 3940f9c7
<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>
examples/route/gadget-footer.html 0 → 100644
View file @ 3940f9c7
<html>
<head></head>
<body>
<h1> This is footer loaded asynchronously at startup</h1>
</body>
</html>
examples/route/gadget-one.html
View file @ 3940f9c7
<html> <html>
<head></head> <head></head>
<body> <body>
<h1> Below is Gadget 1</h1> <script type="text/javascript" language="javascript">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore //<![CDATA[
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo $(document).ready(function() {
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gadget = RenderJs.GadgetIndex.getGadgetById("gadget-one");
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. gadget.render = function (){
</p> $("#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> </body>
</html> </html>
examples/route/gadget-two.html
View file @ 3940f9c7
<html> <html>
<head></head> <head></head>
<body> <body>
<h1> Below is Gadget 2</h1> <script type="text/javascript" language="javascript">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore //<![CDATA[
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo $(document).ready(function() {
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gadget = RenderJs.GadgetIndex.getGadgetById("gadget-two");
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. gadget.render = function (){
</p> $("#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> </body>
</html> </html>
examples/route/index.html
View file @ 3940f9c7
...@@ -11,11 +11,30 @@ ...@@ -11,11 +11,30 @@
</head> </head>
<body> <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> <noscript>
Please enable Javascript Please enable Javascript
</noscript> </noscript>
</body> </body>
</html> </html>
examples/route/require-renderjs_route.js
View file @ 3940f9c7
...@@ -9,96 +9,29 @@ require.config({ ...@@ -9,96 +9,29 @@ require.config({
}); });
require([ "require-renderjs", "jquery", "route", "url" ], function(domReady) { require([ "require-renderjs", "jquery", "route", "url" ], function(domReady) {
var body = $("body"), var body = $("body");
initialize_route; // XXX: we should use Renderjs's bindReady
setTimeout(
function () {
initialize_route = function () { // render color picker application
// Home route. Redirect to sub app /color/ RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
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 // Trigger route change
container = $(this).find("div"); $.url.onhashchange(function () {
container body
.route("add", "/color/", 2) .route("go", $.url.getPath())
.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 () { .fail(function () {
$('#select-color').html("Unknown color (" + $.url.getPath() + ")"); // 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>"
);
// All routes have been deleted by fail.
// Recreate the default one.
//initialize_route.apply(this, []);
RenderJs.GadgetIndex.getGadgetById("gadget-color-picker").render();
}); });
}); });
}; }, 1000);
initialize_route.apply(body, []);
// Trigger route change
$.url.onhashchange(function () {
body
.route("go", $.url.getPath())
.fail(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>"
);
// All routes have been deleted by fail.
// Recreate the default one.
initialize_route.apply(this, []);
});
});
}); });
renderjs.js
View file @ 3940f9c7
...@@ -17,6 +17,9 @@ var RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING = true; ...@@ -17,6 +17,9 @@ var RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING = true;
// available // available
var RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND = true; 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 // fallback for IE
if (typeof console === "undefined" || typeof console.log === "undefined") { if (typeof console === "undefined" || typeof console.log === "undefined") {
var console = {}; var console = {};
...@@ -36,18 +39,26 @@ var RenderJs = (function () { ...@@ -36,18 +39,26 @@ var RenderJs = (function () {
if (RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING) { if (RENDERJS_ENABLE_IMPLICIT_GADGET_RENDERING) {
RenderJs.bootstrap($('body')); RenderJs.bootstrap($('body'));
} }
if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND) { var root_gadget = RenderJs.GadgetIndex.getRootGadget();
var root_gadget = RenderJs.GadgetIndex.getRootGadget(); if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND||RENDERJS_ENABLE_IMPLICIT_ROUTE_CREATE) {
// We might have a page without gadgets. // We might have a page without gadgets.
// Be careful, right now we can be in this case because // Be careful, right now we can be in this case because
// asynchronous gadget loading is not finished // asynchronous gadget loading is not finished
if (root_gadget !== undefined) { if (root_gadget !== undefined) {
RenderJs.bindReady( RenderJs.bindReady(
function () { function () {
// examine all Intaction Gadgets and bind accordingly if (RENDERJS_ENABLE_IMPLICIT_INTERACTION_BIND) {
$("div[data-gadget-connection]").each(function (index, element) { // examine all Intaction Gadgets and bind accordingly
RenderJs.InteractionGadget.bind($(element)); $("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 () { ...@@ -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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7