abubelinha/annotorious-firebase.html

## annotorious-firebase.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Annotorious | Firebase Demo</title>
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <style>
      html, body {
        padding:20px;
        margin:0px;
      }

      p.caption {
        font-family:Arial, Helvetica, sans-serif;
        color:#8f8f8f;
      }

      p.caption a {
        color:#3f3f3f;
      }
    </style>
    <script src="https://recogito.github.io/annotorious/annotorious.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-firestore.js"></script>
    <script>
      // Firebase will auto-generate this config for you when you create your app.
      // Just paste your own settings in here.
      var firebaseConfig = {
        apiKey: "-- your firebase api key here --",
        authDomain: "-- your authdomain here --",
        databaseURL: "-- your database url --",
        projectId: "-- your project id --",
        storageBucket: "-- your storage bucket --",
        messagingSenderId: "...",
        appId: "..."
      };

      firebase.initializeApp(firebaseConfig);

      var db = firebase.firestore();

      // Helper to find a Firebase doc by annotation ID
      var findById = function(id) {
        var query = db.collection('annotations').where('id', '==', id);
        return query.get().then(function(querySnapshot) {
          return query.docs[0];
        });
      }

      window.onload = function() {
        var image = document.getElementById('hallstatt');
        var anno = Annotorious.init({ image });

        // Load annotations for this image
        db.collection('annotations').where('target.source', '==', image.src).get().then(function(querySnapshot) {
          var annotations = querySnapshot.docs.map(function(doc) { return doc.data() });
          anno.setAnnotations(annotations);
        });

        anno.on('createAnnotation', function(a) {
          db.collection('annotations').add(a).then(function() {
            console.log('Stored annotation');
          });
        });

        anno.on('updateAnnotation', function(annotation, previous) {
          findById(previous.id).then(function(doc) {
            doc.ref.update(annotation);
          });
        });

        anno.on('deleteAnnotation', function(annotation) {
          findById(annotation.id).then(function(doc) {
            doc.ref.delete();
          });
        });

        // Bonus coolness: listen for realtime updates on this image
        // and roll your own GoogleDrive-like realtime collab!
        db.collection('annotations').where('target.source', '==', image.src).onSnapshot(function(querySnapshot) {
          querySnapshot.docChanges().forEach(function(change) {
            console.log(change.type, change.doc.data());
          });
        });
      }
    </script>
  </head>
  <body>
    <div id="content">
      <img id="hallstatt" src="https://recogito.github.io/annotorious/640px-Hallstatt.jpg">
      <p class="caption">
        Sample image source: <a href="http://commons.wikimedia.org/wiki/File:Hallstatt_300.jpg">Hallstatt,
        Austria</a>, by Nick Csakany/Wikimedia Commons. Public Domain.
      </p>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Annotorious \| Firebase Demo</title>
	<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
	<style>
	html, body {
	padding:20px;
	margin:0px;
	}

	p.caption {
	font-family:Arial, Helvetica, sans-serif;
	color:#8f8f8f;
	}

	p.caption a {
	color:#3f3f3f;
	}
	</style>
	<script src="https://recogito.github.io/annotorious/annotorious.min.js"></script>
	<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-firestore.js"></script>
	<script>
	// Firebase will auto-generate this config for you when you create your app.
	// Just paste your own settings in here.
	var firebaseConfig = {
	apiKey: "-- your firebase api key here --",
	authDomain: "-- your authdomain here --",
	databaseURL: "-- your database url --",
	projectId: "-- your project id --",
	storageBucket: "-- your storage bucket --",
	messagingSenderId: "...",
	appId: "..."
	};

	firebase.initializeApp(firebaseConfig);

	var db = firebase.firestore();

	// Helper to find a Firebase doc by annotation ID
	var findById = function(id) {
	var query = db.collection('annotations').where('id', '==', id);
	return query.get().then(function(querySnapshot) {
	return query.docs[0];
	});
	}

	window.onload = function() {
	var image = document.getElementById('hallstatt');
	var anno = Annotorious.init({ image });

	// Load annotations for this image
	db.collection('annotations').where('target.source', '==', image.src).get().then(function(querySnapshot) {
	var annotations = querySnapshot.docs.map(function(doc) { return doc.data() });
	anno.setAnnotations(annotations);
	});

	anno.on('createAnnotation', function(a) {
	db.collection('annotations').add(a).then(function() {
	console.log('Stored annotation');
	});
	});

	anno.on('updateAnnotation', function(annotation, previous) {
	findById(previous.id).then(function(doc) {
	doc.ref.update(annotation);
	});
	});

	anno.on('deleteAnnotation', function(annotation) {
	findById(annotation.id).then(function(doc) {
	doc.ref.delete();
	});
	});

	// Bonus coolness: listen for realtime updates on this image
	// and roll your own GoogleDrive-like realtime collab!
	db.collection('annotations').where('target.source', '==', image.src).onSnapshot(function(querySnapshot) {
	querySnapshot.docChanges().forEach(function(change) {
	console.log(change.type, change.doc.data());
	});
	});
	}
	</script>
	</head>
	<body>
	<div id="content">
	<img id="hallstatt" src="https://recogito.github.io/annotorious/640px-Hallstatt.jpg">
	<p class="caption">
	Sample image source: <a href="http://commons.wikimedia.org/wiki/File:Hallstatt_300.jpg">Hallstatt,
	Austria</a>, by Nick Csakany/Wikimedia Commons. Public Domain.
	</p>
	</div>
	</body>
	</html>