Google+ Hangout Javascript API snippets and examples

basic.js

// basic structure of a Google+ Hangout application
(function () {

  // setup UI elements for the G+ Hangout gadget/app
  function setupFormHandler() {
    var moodForm = $('#mood-form');
    moodForm.submit(onMoodFormSubmit);
  }

  function onMoodFormSubmit(evt) {
    alert("yo yo");
    var moodVal = $('#mood-field').val();
    var moodNotices = $('#mood-notices');
    var newNotice = $('<div>' + moodVal + '</div>');
    moodNotices.append(newNotice);
    return false;
  }

  if (gapi && gapi.hangout) {
    gapi.hangout.onApiReady.add(function (evt) {
      if (apiReadyEvent.isApiReady) {
        // enter your application code here.
        setupFormHandler();
      }
    });
  }
})();

basic.xml

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="@SusanPotter's basic app for testing" height="300" width="600">
  <Require feature="dynamic-height"/>
  <Require feature="views"/>
</ModulePrefs>
<Content type="html"><![CDATA[
  <link type="text/css" rel="stylesheet"
    href="https://gist.github.com/raw/1346865/34722525d7f84952bc170159f97abe09cddac2ea/styles.css" />
  <div id="container">
    <div id="mood-notices">
    </div>
    <form id="mood-form">
      <legend>Enter your current mood here</legend>
      <input type="text" name="mood-field" id="mood-field" maxlength="40"/>
      <input type="submit" value="Broadcast" id="mood-submit"/>
    </form>
  </div>
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery", "1.6.4");</script>
  <script type="text/javascript"
    src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=0.1"></script>
  <script type="text/javascript"
    src="https://raw.github.com/gist/1346865/395e9e785e27a9e8b2eaca2d81833ce323233e7f/basic.js"></script>
]]></Content>
</Module>

styles.css

body {
  background: #444;
  color: #eee;
}

form input[type=text] {
  border: 1px dashed #999;
}

form input {
  display: block;
}