little doc changes

site.tmpl

@@ -89,14 +89,12 @@
 
 <div id="debug-requests" style="display: none;">
   Server Requests
-  <a class="show_show" href="#" ts-action="prevent, target #debug-requests, class+ show">↑ Show</a>
+  <a class="show_show" href="#" ts-action="prevent, target #debug-requests, class^ show">↑ Show</a>
   <a class="show_hide" href="#" ts-action="prevent, target #debug-requests, class- show">↓ Hide</a>
 
   <div class="columns">
-    <div class="column col-3">
-      <ol id="debug-timeline" reversed>
-      </ol>
-    </div>
+    <ol id="debug-timeline" class="column col-3" reversed>
+    </ol>
     <div id="debug-details" class="column col-9">
       <div class="d-hide">
       </div>
@@ -132,9 +130,11 @@
           var id = `debug${i++}`;
           window['debug-timeline'].insertAdjacentHTML(
             'afterbegin',
-            `<li><a style="cursor:pointer" rel="${id}" onclick="switchResponse('${id}')">
-                     <code><b>${method}</b> ${url}</code>
-               </a></li>`
+            // this uses concat instead of single string to avoid whitespace
+            // between tags - and this causes a spacing in the underline
+            `<li><a style="cursor:pointer" rel="${id}" onclick="switchResponse('${id}')">` +
+            `<code><b>${method}</b> ${url}</code>` +
+            `</a></li>`
           );
 
           var headers = '';

www/api.md

@@ -23,6 +23,7 @@ title: API
 <tr><td><a href="ts-req-strategy/">ts-req-strategy</a></td>  <td>How to deal with multiple requests being generated</td></tr>
 <tr><td><a href="ts-req-history/">ts-req-history</a></td>    <td>Change URL after request</td></tr>
 <tr><td><a href="ts-data/">ts-data</a></td>                  <td>Additional data for request</td></tr>
+<tr><td><a href="ts-json/">ts-json</a></td>                  <td>As <code>ts-data</code>, but for JSON requests</td></tr>
 <tr><td><a href="ts-req-batch/">ts-req-batch</a></td>        <td>Combine multiple requests into a single one</td></tr>
 
 </table>

www/api/ts-swap.md

@@ -9,7 +9,7 @@ origin element. Can be one of the following keywords:
 <table class="table">
 <tr><th>Strategy</th> <th>Description</th></tr>
 
-<tr><td><code>replace</code></td>     <td>replace <a href="../ts-target/">target</a> element with an incoming element <small>(default)</small></td></tr>
+<tr><td><code>replace</code></td>     <td><small>(default)</small> replace <a href="../ts-target/">target</a> element with an incoming element</td></tr>
 <tr><td><code>inner</code></td>       <td>replaces target's children with an incoming element</td></tr>
 <tr><td><code>prepend</code></td>     <td>inserts incoming element as a first child of the target</td></tr>
 <tr><td><code>append</code></td>      <td>inserts incoming element as a last child of the target</td></tr>

www/examples/260-json.html

@@ -14,23 +14,22 @@ <h5 class="d-inline mr-2">Demo</h5>
   </div>
 
   <p class="card-body">
-      <a href="/data"
+      <a href="/json"
          ts-json="{&quot;user&quot;:{&quot;name&quot;:&quot;Sanya&quot;}}"
          ts-req
          ts-req-method="post">Send!</a>
   </p>
 
   <script>
-   XHRMock.post("/data", function(req, res) {
-     return res.status(200)
-               .body(
-       'received: <span>' + req.body() + '</span>');
-   });
-   test(async (el, t) => {
-     el.$('a').click();
-     await t.delay(1);
-     let res = decodeURIComponent(el.$('span').innerText);
-     t.assert(res == '{"user":{"name":"Sanya"}}=');
-   });
+    XHRMock.post("/json", function(req, res) {
+      return res.status(200)
+      .body('<span>' + JSON.parse(req.body()).user.name + '</span>');
+    });
+    test(async (el, t) => {
+      el.$('a').click();
+      await t.delay(1);
+      let res = decodeURIComponent(el.$('span').innerText);
+      t.assert(res + ' == Sanya', res == 'Sanya');
+    });
   </script>
 </div>

www/static/examples.js

@@ -96,6 +96,7 @@ window.addEventListener('popstate', _ => setTimeout(enableExamples, 16));
 
 /// Tests
 
+// this function is to write tests, see `www/examples/*` for example usage
 window.test = (function() {
   var TESTS = [];