mattlockyer/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Google Drive Realtime quickstart</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9">

  <!-- Load the Realtime libraries. -->
  <script type="text/javascript"
          src="https://apis.google.com/js/api.js"></script>

  <!-- Load the utility library. -->
  <script type="text/javascript"
          src="realtime-client-utils.js"></script>
</head>

<!-- Start Realtime when the body has loaded. -->
<body onLoad='startRealtime()'>

  <h1>Drive Realtime API :: quickstart</h1>

  <button id="authorizeButton" disabled>You must authorize</button>

  <h3>Add Item To List</h3>
  <input id="li"  />
  <button onclick="addListItem()">Add List Item</button>


  <h3>Remove Item From List</h3>
  <input id="li-remove"  />
  <button onclick="removeListItem()">Remove List Item</button>

  <p>These text fields are linked with a collb. string but they get updated when something is added or removed to the list of pets.</p>

  <!-- Text areas that will be used as our collaborative controls. -->
  <textarea id="editor1" rows="15" cols="20" disabled="true"></textarea>
  <textarea id="editor2" rows="15" cols="20" disabled="true"></textarea>

  <br />

  <!-- Undo and redo buttons. -->
  <button id="undoButton" disabled>Undo</button>
  <button id="redoButton" disabled>Redo</button>

  <script>
    /**
     * This function is called the first time that the Realtime model is created
     * for a file. This function should be used to initialize any values of the
     * model. In this case, we just create the single string model that will be
     * used to control our text box. The string has a starting value of 'Hello
     * Realtime World!', and is named 'text'.
     * @param model {gapi.drive.realtime.Model} the Realtime root model object.
     */
    function initializeModel(model) {
        console.log('NOT CALLED')

      var string = model.createString('Testing');
      model.getRoot().set('text', string);


     var  list = model.createList(['cat', 'dog']);
         model.getRoot().set('list', list);

    }


    /**
     * This function is called when the Realtime file has been loaded. It should
     * be used to initialize any user interface components and event handlers
     * depending on the Realtime model. In this case, create a text control binder
     * and bind it to our string model that we created in initializeModel.
     * @param doc {gapi.drive.realtime.Document} the Realtime document.
     */

     //global function to add and remove
     function addListItem() {
         list.push(document.getElementById('li').value);
     }

     function removeListItem() {
         list.removeValue(document.getElementById('li-remove').value);
     }


     var string, list;
    function onFileLoaded(doc) {

        var model = doc.getModel();

        string = doc.getModel().getRoot().get('text');


        list = doc.getModel().getRoot().get('list');
        function listUpdated(e) {
            string.setText(JSON.stringify(list.asArray()));
        };
        list.addEventListener(gapi.drive.realtime.EventType.VALUES_ADDED, listUpdated);
        list.addEventListener(gapi.drive.realtime.EventType.VALUES_REMOVED, listUpdated);


      // Keeping one box updated with a String binder.
      var textArea1 = document.getElementById('editor1');
      gapi.drive.realtime.databinding.bindString(string, textArea1);


      // Keeping one box updated with a custom EventListener.
      //basically doing things manually
      var textArea2 = document.getElementById('editor2');
      var textInserted = function(e) {

        textArea2.value = string;
      };

      var textDeleted = function(e) {
        textArea2.value = string + ' SOMETHING WAS DELETED';
      };
      string.addEventListener(gapi.drive.realtime.EventType.TEXT_INSERTED, textInserted);
      string.addEventListener(gapi.drive.realtime.EventType.TEXT_DELETED, textDeleted);
      textArea2.onkeyup = function() {
        string.setText(textArea2.value);
      };
      textInserted();

      // Enabling UI Elements.
      textArea1.disabled = false;
      textArea2.disabled = false;

    }

    /**
     * Options for the Realtime loader.
     */
    var realtimeOptions = {
      /**
       * Client ID from the console.
       */
      clientId: '54499981247-5847tdb8ninks4vggo0hmhed6ubiolse.apps.googleusercontent.com',

      /**
       * The ID of the button to click to authorize. Must be a DOM element ID.
       */
      authButtonElementId: 'authorizeButton',

      /**
       * Function to be called when a Realtime model is first created.
       */
      initializeModel: initializeModel,

      /**
       * Autocreate files right after auth automatically.
       */
      autoCreate: true,

      /**
       * The name of newly created Drive files.
       */
      defaultTitle: "New Realtime Quickstart File",

      /**
       * The MIME type of newly created Drive Files. By default the application
       * specific MIME type will be used:
       *     application/vnd.google-apps.drive-sdk.
       */
      newFileMimeType: null, // Using default.

      /**
       * Function to be called every time a Realtime file is loaded.
       */
      onFileLoaded: onFileLoaded,

      /**
       * Function to be called to inityalize custom Collaborative Objects types.
       */
      registerTypes: null, // No action.

      /**
       * Function to be called after authorization and before loading files.
       */
      afterAuth: null // No action.
    }

    /**
     * Start the Realtime loader with the options.
     */
    function startRealtime() {
      var realtimeLoader = new rtclient.RealtimeLoader(realtimeOptions);
      realtimeLoader.start();
    }


  </script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>Google Drive Realtime quickstart</title>
	<meta http-equiv="X-UA-Compatible" content="IE=9">

	<!-- Load the Realtime libraries. -->
	<script type="text/javascript"
	src="https://apis.google.com/js/api.js"></script>

	<!-- Load the utility library. -->
	<script type="text/javascript"
	src="realtime-client-utils.js"></script>
	</head>

	<!-- Start Realtime when the body has loaded. -->
	<body onLoad='startRealtime()'>

	<h1>Drive Realtime API :: quickstart</h1>

	<button id="authorizeButton" disabled>You must authorize</button>

	<h3>Add Item To List</h3>
	<input id="li" />
	<button onclick="addListItem()">Add List Item</button>


	<h3>Remove Item From List</h3>
	<input id="li-remove" />
	<button onclick="removeListItem()">Remove List Item</button>

	<p>These text fields are linked with a collb. string but they get updated when something is added or removed to the list of pets.</p>

	<!-- Text areas that will be used as our collaborative controls. -->
	<textarea id="editor1" rows="15" cols="20" disabled="true"></textarea>
	<textarea id="editor2" rows="15" cols="20" disabled="true"></textarea>

	<br />

	<!-- Undo and redo buttons. -->
	<button id="undoButton" disabled>Undo</button>
	<button id="redoButton" disabled>Redo</button>

	<script>
	/**
	* This function is called the first time that the Realtime model is created
	* for a file. This function should be used to initialize any values of the
	* model. In this case, we just create the single string model that will be
	* used to control our text box. The string has a starting value of 'Hello
	* Realtime World!', and is named 'text'.
	* @param model {gapi.drive.realtime.Model} the Realtime root model object.
	*/
	function initializeModel(model) {
	console.log('NOT CALLED')

	var string = model.createString('Testing');
	model.getRoot().set('text', string);


	var list = model.createList(['cat', 'dog']);
	model.getRoot().set('list', list);

	}


	/**
	* This function is called when the Realtime file has been loaded. It should
	* be used to initialize any user interface components and event handlers
	* depending on the Realtime model. In this case, create a text control binder
	* and bind it to our string model that we created in initializeModel.
	* @param doc {gapi.drive.realtime.Document} the Realtime document.
	*/

	//global function to add and remove
	function addListItem() {
	list.push(document.getElementById('li').value);
	}

	function removeListItem() {
	list.removeValue(document.getElementById('li-remove').value);
	}


	var string, list;
	function onFileLoaded(doc) {

	var model = doc.getModel();

	string = doc.getModel().getRoot().get('text');


	list = doc.getModel().getRoot().get('list');
	function listUpdated(e) {
	string.setText(JSON.stringify(list.asArray()));
	};
	list.addEventListener(gapi.drive.realtime.EventType.VALUES_ADDED, listUpdated);
	list.addEventListener(gapi.drive.realtime.EventType.VALUES_REMOVED, listUpdated);


	// Keeping one box updated with a String binder.
	var textArea1 = document.getElementById('editor1');
	gapi.drive.realtime.databinding.bindString(string, textArea1);


	// Keeping one box updated with a custom EventListener.
	//basically doing things manually
	var textArea2 = document.getElementById('editor2');
	var textInserted = function(e) {

	textArea2.value = string;
	};

	var textDeleted = function(e) {
	textArea2.value = string + ' SOMETHING WAS DELETED';
	};
	string.addEventListener(gapi.drive.realtime.EventType.TEXT_INSERTED, textInserted);
	string.addEventListener(gapi.drive.realtime.EventType.TEXT_DELETED, textDeleted);
	textArea2.onkeyup = function() {
	string.setText(textArea2.value);
	};
	textInserted();

	// Enabling UI Elements.
	textArea1.disabled = false;
	textArea2.disabled = false;

	}

	/**
	* Options for the Realtime loader.
	*/
	var realtimeOptions = {
	/**
	* Client ID from the console.
	*/
	clientId: '54499981247-5847tdb8ninks4vggo0hmhed6ubiolse.apps.googleusercontent.com',

	/**
	* The ID of the button to click to authorize. Must be a DOM element ID.
	*/
	authButtonElementId: 'authorizeButton',

	/**
	* Function to be called when a Realtime model is first created.
	*/
	initializeModel: initializeModel,

	/**
	* Autocreate files right after auth automatically.
	*/
	autoCreate: true,

	/**
	* The name of newly created Drive files.
	*/
	defaultTitle: "New Realtime Quickstart File",

	/**
	* The MIME type of newly created Drive Files. By default the application
	* specific MIME type will be used:
	* application/vnd.google-apps.drive-sdk.
	*/
	newFileMimeType: null, // Using default.

	/**
	* Function to be called every time a Realtime file is loaded.
	*/
	onFileLoaded: onFileLoaded,

	/**
	* Function to be called to inityalize custom Collaborative Objects types.
	*/
	registerTypes: null, // No action.

	/**
	* Function to be called after authorization and before loading files.
	*/
	afterAuth: null // No action.
	}

	/**
	* Start the Realtime loader with the options.
	*/
	function startRealtime() {
	var realtimeLoader = new rtclient.RealtimeLoader(realtimeOptions);
	realtimeLoader.start();
	}



	</script>
	</body>
	</html>