Skip to content

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

Improve example. 

Test multiple InteractionGadget can co-exists in same page.
parent 3c081ec2
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 11 deletions
examples/route/gadget-color-picker.css 0 → 100644
View file @ efe5890c
.list-item {
text-decoration: none;
display: block;
width: 2em;
}
\ No newline at end of file
examples/route/gadget-color-picker.html
View file @ efe5890c
<html> <html>
<head></head> <head>
<link type="text/css" href="gadget-color-picker.css" rel="stylesheet">
</head>
<body> <body>
<h2> Color picker</h2> <h2> Color picker</h2>
<div class="body"> <div class="body">
<a href="#unknown">Wrong global route</a> <a href="#unknown">Wrong global route</a>
<ul style="list-style: none;"> <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/0/" class="list-item" style="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/0/150/" class="list-item" style="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/0/" class="list-item" style="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/0/150/150/" class="list-item" style="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/0/" class="list-item" style="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/0/150/" class="list-item" style="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/0/" class="list-item" style="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><a href="#/color/150/150/150/" class="list-item" style="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> <li style="text-align: center;"><a href="#/color/X/X/X" style="text-decoration: none; display: block; width: 2em;">XXX</a></li>
</ul> </ul>
<div class="select-color" style="display: block;">Unknown color (/color/)</div> <div class="select-color" style="display: block;">Unknown color (/color/)</div>
......
test/interactions/A.html
View file @ efe5890c
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
$(document).ready(function() { $(document).ready(function() {
gadget = RenderJs.GadgetIndex.getGadgetById("A"); gadget = RenderJs.GadgetIndex.getGadgetById("A");
gadget.inc = function (){counter = counter +1;}; gadget.inc = function (){counter = counter +1;};
gadget.inc2 = function (){counter = counter +2;};
}); });
//]]> //]]>
</script> </script>
\ No newline at end of file
test/interactions/B.html
View file @ efe5890c
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
gadget = RenderJs.GadgetIndex.getGadgetById("B"); gadget = RenderJs.GadgetIndex.getGadgetById("B");
gadget.inc = function (){counter = counter + 1; }; gadget.inc = function (){counter = counter + 1; };
gadget.htmlEvent1 = function (){counter = counter + 1;}; gadget.htmlEvent1 = function (){counter = counter + 1;};
gadget.inc2 = function (){counter = counter + 2; };
}); });
//]]> //]]>
</script> </script>
\ No newline at end of file
test/interactions/index.html
View file @ efe5890c
...@@ -16,6 +16,11 @@ ...@@ -16,6 +16,11 @@
{&quot;source&quot;: &quot;main-interactor.multiEvent&quot;, &quot;destination&quot;: &quot;A.inc&quot;}, {&quot;source&quot;: &quot;main-interactor.multiEvent&quot;, &quot;destination&quot;: &quot;A.inc&quot;},
{&quot;source&quot;: &quot;main-interactor.multiEvent&quot;, &quot;destination&quot;: &quot;B.inc&quot;}]"></div> {&quot;source&quot;: &quot;main-interactor.multiEvent&quot;, &quot;destination&quot;: &quot;B.inc&quot;}]"></div>
<div data-gadget=""
id="supplimentary-interactor"
data-gadget-connection="[
{&quot;source&quot;: &quot;A.inc2&quot;, &quot;destination&quot;: &quot;B.inc2&quot;}]"></div>
......
test/renderjs_test.js
View file @ efe5890c
...@@ -159,7 +159,11 @@ function setupRenderJSTest(){ ...@@ -159,7 +159,11 @@ function setupRenderJSTest(){
// we need to wait for all gadgets loading ... // we need to wait for all gadgets loading ...
RenderJs.bindReady(function () { RenderJs.bindReady(function () {
RenderJs.InteractionGadget.bind($("#main-interactor")); //RenderJs.InteractionGadget.bind($("#main-interactor"));
$("div[data-gadget-connection]").each(function (index, element) {
RenderJs.InteractionGadget.bind($(element));
});
start(); start();
equal(0, counter); equal(0, counter);
// A.inc will call B.inc, both will increase counter by 1 // A.inc will call B.inc, both will increase counter by 1
...@@ -173,6 +177,11 @@ function setupRenderJSTest(){ ...@@ -173,6 +177,11 @@ function setupRenderJSTest(){
// when A.inc calls B.inc thus result is 6 NOT 5! // when A.inc calls B.inc thus result is 6 NOT 5!
$('#main-interactor').trigger('multiEvent'); $('#main-interactor').trigger('multiEvent');
equal(6, counter); equal(6, counter);
// check multiple interactors can coexist (a.inc2 +2 -> B.inc2 +2)
RenderJs.GadgetIndex.getGadgetById("A").inc2();
equal(10, counter);
// XXX: test dynamically adding an InteractionGadget
}); });
}); });
...@@ -286,7 +295,7 @@ function setupRenderJSTest(){ ...@@ -286,7 +295,7 @@ function setupRenderJSTest(){
}, 1000); }, 1000);
}, 1000); }, 1000);
// XXX: test dynamically adding a RouteGadget
}); });
}); });
......
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