Embedding Hypothesis in a Single Page App

README.markdown

This is a very rough demonstration of how to embed Hypothesis in a single page app.

When you click on the "Go to page two" button it loads the second "page" of the app. This page is just loaded by JavaScript, without having the browser load a new page as it would normally do when following a link. Importantly the JavaScript code does change URL in the browser's location bar though, using history.pushState(). Before changing the URL it unloads Hypothesis from the page, and after changing the URL it reloads Hypothesis into the page. This is to work around a limitation with Hypothesis - it doesn't detect URL changes done by pushState() and reload the annotations.

Usage

git clone git@gist.github.com:4d42c04a330d813d199db616abaa7fc4.git
cd 4d42c04a330d813d199db616abaa7fc4
python -m SimpleHTTPServer 8888

Now open http://localhost:8888 in your browser.

index.html

    <article id="page-one">
      <p>The Jersey Act was introduced to prevent the registration of most
      American-bred Thoroughbred horses in the British General Stud Book. It
      had its roots in the desire of the British to halt the influx of
      American-bred racehorses of possibly impure bloodlines during the early
      20th century. Many American-bred horses were exported to Europe to race
      and retire to a breeding career after a number of US states banned
      gambling, which depressed Thoroughbred racing as well as breeding in the
      United States. The loss of breeding records during the American Civil War
      and the late beginning of the registration of American Thoroughbreds led
      many in the British racing establishment to doubt that the American-bred
      horses were purebred.</p>

      <button id="go-to-page-two">Go to page two</button>
    </article>

    <article id="page-two" class="hidden">
      <p>The Monster is an 1898 novella by American author Stephen Crane
      (1871–1900). The story takes place in the small, fictional town of
      Whilomville, New York. An African-American coachman named Henry Johnson,
      who is employed by the town's physician, Dr. Trescott, becomes horribly
      disfigured after he saves Trescott's son from a fire. When Henry is
      branded a "monster" by the town's residents, Trescott vows to shelter and
      care for him, resulting in his family's exclusion from the community. The
      novella reflects upon the 19th-century social divide and ethnic tensions
      in America.</p>

      <button id="go-to-page-one">Go to page one</button>
    </article>

    <script>
      function unloadHypothesis() {
        var appLinkEl =
          document.querySelector('link[type="application/annotator+html"]');
        appLinkEl.dispatchEvent(new Event('destroy'));
      };

      function loadHypothesis() {
        var embedScript = document.createElement('script');
        embedScript.setAttribute('src','https://hypothes.is/app/embed.js');
        document.body.appendChild(embedScript);
      };

      function goToPageTwo() {
        document.getElementById('page-one').classList.add('hidden');
        document.getElementById('page-two').classList.remove('hidden');
        unloadHypothesis();
        window.history.pushState({}, "", "two");
        loadHypothesis();
      };

      function goToPageOne() {
        document.getElementById('page-two').classList.add('hidden');
        document.getElementById('page-one').classList.remove('hidden');
        unloadHypothesis();
        window.history.pushState({}, "", "one");
        loadHypothesis();
      };

      document.getElementById('go-to-page-two').onclick = goToPageTwo;
      document.getElementById('go-to-page-one').onclick = goToPageOne;
      window.history.pushState({}, "", "one");
      loadHypothesis();
    </script>
  </body>
</html>