Adding an Edit Panel to a Google Wave Gadget

In an earlier recipe I demonstrated how one would create a simple Google Wave gadget to load an O'Reilly Book cover. While the gadget worked, I was inspired by the HTML Code gadget to add an edit panel. This new gadget has two modes:

• View Mode - In view mode, the gadget displays an O'Reilly Book Cover.
  
• Edit Mode - In edit mode, the gadget displays an input text element and a button that will load the book cover and switch back to view mode.

For an example of how this gadget works, here's a snapshot of the View mode:



Then, after clicking on the Edit link, you are shown the Edit form:



Copy the ISBN for the Snow Leopard book into this field and click Load Cover to see a new book cover:



To test this Google Wave Gadget, load it on a web server and add it using the add gadget icon. Here's the code:

<Module>
<ModulePrefs title="ISBN Lookup" height="250">
<Require feature="wave-preview"/>
</ModulePrefs>
<Content type="html">
 
  <style type="text/css">
  
  </style>
  
  <script type="text/javascript">

     var previewDiv, editorDiv, toggleButton;
     var isEdit = false;

    function buttonClicked() {
      // var viewerId = wave.getViewer().getId();
      var state = wave.getState();
      var isbn = parseInt(document.getElementById('isbn').value);
      var currentIsbn = state.get('isbn', '0');
      if (isbn != currentIsbn) {
        delta = {};
        delta['isbn'] = isbn;
        state.submitDelta(delta);
      }

      onToggle();      
    }

    function renderInfo() {
      if (!wave.getState()) {
        return;
      }
      
      var state = wave.getState();
      var keys = state.getKeys();
      var currentIsbn = state.get('isbn', '9780596517335');

      var thumbNail = 'http://covers.oreilly.com/images/' + currentIsbn + '/thumb.gif'
      document.getElementById('bookThumbnail').src = thumbNail;
      document.getElementById('isbn').value = currentIsbn;
    }

    function init() {

     previewDiv = document.getElementById('preview');
     editorDiv = document.getElementById('editor');
     toggleButton = document.getElementById('toggleButton')
     editorDiv.style.display = 'none';


      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(renderInfo);
        wave.setParticipantCallback(renderInfo);
      }
    }

    function onToggle() {
      if( isEdit ) {
        previewDiv.style.display = '';
	editorDiv.style.display = 'none';
	toggleButton.innerHTML = 'Edit';
	isEdit = false;
      } else {
        previewDiv.style.display = 'none';
	editorDiv.style.display = '';
	toggleButton.innerHTML = 'View';
	isEdit = true;
      }
    }

    gadgets.util.registerOnLoadHandler(init);
  </script>
  <div id="container" style="padding: 2px; background-color: #DDD">
    <div style="padding: 0px; background-color: #FFF;">
      <div id="toolbar" 
           style="padding: 3px; background-color: #DDD;">
        <a id="toggleButton" 
	   style="font-size: 9pt;" 
           onclick="onToggle();" href="#">Edit</a>
      </div>
      <div>
        <div id="preview">
          <img id="bookThumbnail" 
	       src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif"/><br/><br/>
        </div>
        <div id="editor">
          O'Reilly ISBN: 
	  <input id="isbn" size="20" value="0">
	  <button id="butCount" 
	          onclick="buttonClicked()">Load Cover</button>
        </div>
      </div>
    </div>
  </div>
  
</Content>
</Module>

This gadget maintains an "edit" and a "preview" DIV, the toggleButton triggers some Javascript that will swap the Edit and Preview panels, and when at the end of the buttonClicked() function, the Edit state is changed back to the View state.