dmcgrath · December 15, 2017 03:19
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ComputasBrann Notes</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/4.8.0/firebase.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/4.8.0/firebase-firestore.js"></script>

    <style media="screen">
        html{
            background: #CCC;
            font-family: Monaco, monospace;
            font-size: 14px;
            color: #444;
            line-height: 1.4;
            max-width: 60rem;
            margin: 0 auto;
            height: 100%;
        }
        body{
            background: #F0F1F1;
            padding: 100px;
            height: 100%;
        }
        
        #note{
            height: 100%;
        }
    </style>
  </head>
  <body>
    <div id="note" contenteditable></div>

    <script>
      // https://stackoverflow.com/a/2117523
      function uuidv4() {
        return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(
              /[018]/g,
              c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        );
      }
    
      document.addEventListener('DOMContentLoaded', function() {
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        noteId = window.location.hash;
        project = "computasbrann-example";

        firebase.initializeApp({
            authDomain:project+".firebaseapp.com",
            projectId:project
        });
        
        var dbClient=null;
        var uuid = uuidv4();
        
        firebase.firestore().enablePersistence().then(function(){
            dbClient = firebase.firestore();

            noteElement = document.getElementById("note");
            noteDocument = dbClient.collection("notes").doc(noteId);
            
            noteElement.oninput = function(){
                noteDocument.set({
                    owner: uuid,
                    text: this.innerHTML
                });
            };
            
            noteDocument.set({owner:0}, {merge: true});
            
            noteDocument.onSnapshot(function(documentSnapshot){
                noteData = documentSnapshot.data();
                if(noteData.owner !== uuid ) {
                    noteElement.innerHTML = noteData.text || '';
                }
            });
        });
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ComputasBrann Notes</title>

	<!-- update the version number as needed -->
	<script defer src="/__/firebase/4.8.0/firebase.js"></script>
	<!-- include only the Firebase features as you need -->
	<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
	<script defer src="/__/firebase/4.8.0/firebase-firestore.js"></script>

	<style media="screen">
	html{
	background: #CCC;
	font-family: Monaco, monospace;
	font-size: 14px;
	color: #444;
	line-height: 1.4;
	max-width: 60rem;
	margin: 0 auto;
	height: 100%;
	}
	body{
	background: #F0F1F1;
	padding: 100px;
	height: 100%;
	}

	#note{
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="note" contenteditable></div>

	<script>
	// https://stackoverflow.com/a/2117523
	function uuidv4() {
	return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(
	/[018]/g,
	c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
	);
	}

	document.addEventListener('DOMContentLoaded', function() {
	// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
	// // The Firebase SDK is initialized and available here!
	// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

	noteId = window.location.hash;
	project = "computasbrann-example";

	firebase.initializeApp({
	authDomain:project+".firebaseapp.com",
	projectId:project
	});

	var dbClient=null;
	var uuid = uuidv4();

	firebase.firestore().enablePersistence().then(function(){
	dbClient = firebase.firestore();

	noteElement = document.getElementById("note");
	noteDocument = dbClient.collection("notes").doc(noteId);

	noteElement.oninput = function(){
	noteDocument.set({
	owner: uuid,
	text: this.innerHTML
	});
	};

	noteDocument.set({owner:0}, {merge: true});

	noteDocument.onSnapshot(function(documentSnapshot){
	noteData = documentSnapshot.data();
	if(noteData.owner !== uuid ) {
	noteElement.innerHTML = noteData.text \|\| '';
	}
	});
	});
	});
	</script>
	</body>
	</html>