robertknight/README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    This is a sample which demonstrates how to use Hypothesis <= v0.21.0 in a JavaScript Single Page Application which does client-side routing.
The current version of Hypothesis at the time of writing does not automatically update the loaded annotations when the page URL changes.
This sample takes the heavy-handed approach of completely removing and reloading Hypothesis when the URL changes.
In future we'll look to build this into Hypothesis automatically in a much more performant way.
Running the demo

Download files from this gist and extract into a directory
Run python -m SimpleHTTPServer 8000
Navigate to http://locahost:8000/demo.html
Switch chapters using Chapter links in left navbar


## demo.css
.container {
  display: flex;
  flex-direction: row;
  margin: auto;
  max-width: 800px;
}

.navbar {
  max-width: 200px;
  padding: 20px;
  background-color: #ddd;
}

.content {
  width: 500px;
  border: 1px solid #ddd;
  padding: 10px;
}

## demo.html
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demo.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/page.js/1.7.1/page.js"></script>
  </head>
<body>
  <div class="container">
    <nav class="navbar">
      <a href="/demo.html">Home</a>
      <br>
      <a href="/chapters/1">Chapter 1</a>
      <br>
      <a href="/chapters/2">Chapter 2</a>
      <br>
      <a href="/chapters/3">Chapter 3</a>
      <br>
    </nav>
    <main class="content js-content">
    </main>
  </div>
  <script src="demo.js"></script>
</body>
</html>

## demo.js
var CONTENT = {
  '1': 'This is the content for the first chapter',
  '2': 'Content for the second chapter',
  '3': 'Content for the third chapter',
};

function reloadHypothesis() {
  var H_SERVER = 'https://hypothes.is';

  // Remove existing Hypothesis instance (if any)
  var links = [].slice.apply(document.querySelectorAll('link'));
  links.forEach(function (linkEl) {
    if (linkEl.type === 'application/annotator+html' ||
        linkEl.href.startsWith(H_SERVER)) {
      linkEl.remove();
    }
  });
  var scripts = [].slice.apply(document.querySelectorAll('script'));
  scripts.forEach(function (scriptEl) {
    if (scriptEl.src.startsWith(H_SERVER)) {
      scriptEl.remove();
    }
  });

  if (window.annotator) {
    // Remove event listeners for existing Hypothesis
    // instance. This works around a bug in Hypothesis <= 0.21.0
    // where window.annotator.destroy() fails to do this itself.
    var jq = require('jquery');
    var events = ['beforeAnnotationCreated',
                  'annotationCreated',
                  'annotationUpdated',
                  'annotationsLoaded',
                  'annotationsUnloaded',
                  'annotationDeleted',
                  'panelReady',
                  'setVisibleHighlights'];
    events.forEach(function (event) {
      jq(document.body).unbind(event);
    });

    // Remove the Hypothesis UI from the page
    window.annotator.destroy();
  }

  // Install Hypothesis for current URL
  var embedScriptEl = document.createElement('script');
  embedScriptEl.src = H_SERVER + '/embed.js';
  document.head.appendChild(embedScriptEl);
}

var contentEl = document.querySelector('.js-content');

page('/demo.html', function () {
  contentEl.innerHTML = 'Click the chapter links on the left';
  reloadHypothesis();
});

page('/chapters/:id', function (context) {
  contentEl.innerHTML = CONTENT[context.params.id];
  reloadHypothesis();
});

document.addEventListener('DOMContentLoaded', function () {
  page.start();
});
	.container {
	display: flex;
	flex-direction: row;
	margin: auto;
	max-width: 800px;
	}

	.navbar {
	max-width: 200px;
	padding: 20px;
	background-color: #ddd;
	}

	.content {
	width: 500px;
	border: 1px solid #ddd;
	padding: 10px;
	}
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="demo.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/page.js/1.7.1/page.js"></script>
	</head>
	<body>
	<div class="container">
	<nav class="navbar">
	<a href="/demo.html">Home</a>
	<br>
	<a href="/chapters/1">Chapter 1</a>
	<br>
	<a href="/chapters/2">Chapter 2</a>
	<br>
	<a href="/chapters/3">Chapter 3</a>
	<br>
	</nav>
	<main class="content js-content">
	</main>
	</div>
	<script src="demo.js"></script>
	</body>
	</html>
	var CONTENT = {
	'1': 'This is the content for the first chapter',
	'2': 'Content for the second chapter',
	'3': 'Content for the third chapter',
	};

	function reloadHypothesis() {
	var H_SERVER = 'https://hypothes.is';

	// Remove existing Hypothesis instance (if any)
	var links = [].slice.apply(document.querySelectorAll('link'));
	links.forEach(function (linkEl) {
	if (linkEl.type === 'application/annotator+html' \|\|
	linkEl.href.startsWith(H_SERVER)) {
	linkEl.remove();
	}
	});
	var scripts = [].slice.apply(document.querySelectorAll('script'));
	scripts.forEach(function (scriptEl) {
	if (scriptEl.src.startsWith(H_SERVER)) {
	scriptEl.remove();
	}
	});

	if (window.annotator) {
	// Remove event listeners for existing Hypothesis
	// instance. This works around a bug in Hypothesis <= 0.21.0
	// where window.annotator.destroy() fails to do this itself.
	var jq = require('jquery');
	var events = ['beforeAnnotationCreated',
	'annotationCreated',
	'annotationUpdated',
	'annotationsLoaded',
	'annotationsUnloaded',
	'annotationDeleted',
	'panelReady',
	'setVisibleHighlights'];
	events.forEach(function (event) {
	jq(document.body).unbind(event);
	});

	// Remove the Hypothesis UI from the page
	window.annotator.destroy();
	}

	// Install Hypothesis for current URL
	var embedScriptEl = document.createElement('script');
	embedScriptEl.src = H_SERVER + '/embed.js';
	document.head.appendChild(embedScriptEl);
	}

	var contentEl = document.querySelector('.js-content');

	page('/demo.html', function () {
	contentEl.innerHTML = 'Click the chapter links on the left';
	reloadHypothesis();
	});

	page('/chapters/:id', function (context) {
	contentEl.innerHTML = CONTENT[context.params.id];
	reloadHypothesis();
	});

	document.addEventListener('DOMContentLoaded', function () {
	page.start();
	});