Improve example.

Test multiple InteractionGadget can co-exists in same page.

Improve example.
Test multiple InteractionGadget can co-exists in same page.
efe5890c · Ivan Tyagov · 3c081ec2 · efe5890c · efe5890c · efe5890c
Commit efe5890c authored Feb 18, 2013 by Ivan Tyagov
6 changed files
--- a/examples/route/gadget-color-picker.css
+++ b/examples/route/gadget-color-picker.css
+.list-item {
+  text-decoration: none;
+  display: block;
+  width: 2em;
+}
\ No newline at end of file
--- a/examples/route/gadget-color-picker.html
+++ b/examples/route/gadget-color-picker.html
 <html>
-  <head></head>
+  <head>
+    <link type="text/css" href="gadget-color-picker.css" rel="stylesheet">
+  </head>
  <body>
    <h2> Color picker</h2>
    <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><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/" class="list-item" style="background-color:rgb(0,0,150);">&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/" class="list-item" style="background-color:rgb(0,150,150);">&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/" class="list-item" style="background-color:rgb(150,0,150);">&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/" 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>
    </ul>
    <div class="select-color" style="display: block;">Unknown color (/color/)</div>

--- a/test/interactions/A.html
+++ b/test/interactions/A.html
@@ -5,6 +5,7 @@
    $(document).ready(function() {
      gadget = RenderJs.GadgetIndex.getGadgetById("A");
      gadget.inc = function (){counter = counter +1;};
+      gadget.inc2 = function (){counter = counter +2;};
    });
  //]]>
 </script>
\ No newline at end of file
--- a/test/interactions/B.html
+++ b/test/interactions/B.html
@@ -6,6 +6,7 @@
      gadget = RenderJs.GadgetIndex.getGadgetById("B");
      gadget.inc = function (){counter = counter + 1; };
      gadget.htmlEvent1 = function (){counter = counter + 1;};
+      gadget.inc2 = function (){counter = counter + 2; };
    });
  //]]>
 </script>
\ No newline at end of file
--- a/test/interactions/index.html
+++ b/test/interactions/index.html
@@ -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;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>
+




--- a/test/renderjs_test.js
+++ b/test/renderjs_test.js
@@ -159,7 +159,11 @@ function setupRenderJSTest(){

    // we need to wait for all gadgets loading ...
    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();
      equal(0, counter);
      // A.inc will call B.inc, both will increase counter by 1
@@ -173,6 +177,11 @@ function setupRenderJSTest(){
      // when A.inc calls B.inc thus result is 6 NOT 5!
      $('#main-interactor').trigger('multiEvent');
      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(){
          }, 1000);

        }, 1000);
-
+      // XXX: test dynamically adding a RouteGadget
    });

  });