joicomponents/test/route/beforeNavigateTest.html

Design patterns to build native web components

<script src="../../src/router/beforeNavigate.js"></script>

<a href="withIsmap.html?ismap=queries#and_hash_values_are_added_BEFORE_the_?x,y_value_OMG_WTF__">
  <img ismap id="zero" src="http://programmerbook.ru/examples/images/figures.png" width="450px" height="360px"
       alt="find a nice picture here">
</a>

<a id="one" href="omg.html" download rel="noopener blabla">hello</a>

<svg>
  <animate xlink:href="#test-a" attributeName="href" from="filename.html" to="animated.html" dur="1ms" begin="0s"
           fill="freeze"/>
  <a id="two" href="filename.html">
    <polygon id="boo" fill="red" stroke="black" points="360.5,406 62.757,371.5 61.125,72 360.5,89.5"/>
  </a>
</svg>

<map name="infographic">
  <area shape="poly" coords="130,147,200,107,254,219,130,228"
        id="three"
        rel="noopener blabla"
        href="https://developer.mozilla.org/docs/Web/HTML"
        target="_blank" alt="HTML" accesskey="p"/>
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png"
     alt="MDN infographic"/>

<a href="someobject.html">
  <object type="application/pdf"
          data="/media/examples/In-CC0.pdf"
          usemap="#infographic"
          width="250"
          height="200">
    <h1>no pdf found</h1>
  </object>
</a>
<!-- todo problem this works from JS, but not via the mouse
<script>document.querySelector("object").click();</script>
<script>document.querySelector("object").children[0].click();</script>
-->

<form rel="noopener blabla" action="wtf.html?query=abc#that" method="get">
  <input type="text" name="a" value="omg"/>
  <input type="text" name="b" value="wtf"/>
  <button id="four" type="submit"></button>
</form>

<iframe src="iframes/a.html" name="frame_a" frameborder="0"></iframe>
<iframe src="iframes/b.html" frameborder="0"></iframe>
<iframe src="iframes/c.html" frameborder="0"></iframe>
<iframe src="iframes/d.html" frameborder="0"></iframe>
<iframe src="iframes/e.html" frameborder="0"></iframe>
<iframe src="iframes/f.html" frameborder="0"></iframe>

<script>

  window.addEventListener("beforeNavigate", function (e) {
    console.log(e);
    if (e.hyperlinkSuffix)
      console.log(e.hyperlinkSuffix());
    e.preventDefault();
  });

  //test1 clicking all navigation triggering elements.
  setTimeout(function () {
    document.querySelector("#zero").dispatchEvent(new MouseEvent("click", {
      clientX: 100,
      clientY: 100,
      bubbles: true,
      cancelable: true
    }));
  }, 1000);

  setTimeout(function () {
    document.querySelector("#one").click();
  }, 0);

  setTimeout(function () {
    document.querySelector("#boo").dispatchEvent(new MouseEvent("click", {bubbles: true, cancelable: true}));
  }, 0);

  setTimeout(function () {
    document.querySelector("#three").click();
  }, 0);

  setTimeout(function () {
    document.querySelector("#four").click();
  }, 0);

  //test 3 other invocations
  //calling .submit() will not trigger the submit event. nor click event.
  //  setTimeout(function () {
  //    const el = document.querySelector("form");
  //    el.addEventListener("submit", e => console.log(e));
  //    el.submit();
  //  }, 101);


</script>