complex sample

wave gadget

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Attendance Book Gadget" height="100">
    <Require feature="wave" /> 
    <Require feature="dynamic-height" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
<style>
  div.corner, div.date, div.participant, div.choice {
    border:1px solid black;
    float:left;
    font-size:small;
    height:20px;
    margin:3px;
    overflow:hidden;
    padding:3px;
  }
  div.choice { width:70px; }
  div.corner { width:150px; }
  div.date { background-color:black; }
  div.date { color:white; }
  div.date { width:70px; }
  div.participant { background-color:black; }
  div.participant { color:white; }
  div.participant { width:150px; }
</style>
<div id="editor">
  <input id="dates" />
  <button onclick="javascript:setDates()">Set Dates</button>
</div>
<div id="viewer">
</div>

<script type="text/javascript">
var datesElm = document.getElementById('dates');
var editorElm = document.getElementById('editor');
var viewerElm = document.getElementById('viewer');

function render() {
  var state = wave.getState();
  if (!state) return;

  if (wave.getMode() == wave.Mode.EDIT) {
    renderEdit(state);
  }
  else {
    renderView(state);
  }
  gadgets.window.adjustHeight();
}

function renderEdit(state) {
  viewerElm.style.display = 'none';
  if (wave.getHost() == wave.getViewer()) {
    editorElm.style.display = 'block';
    datesElm.value = state.get('dates', '');
  }
}

function renderView(state) {
  var dates = state.get('dates', '').split(',');
  var participants = wave.getParticipants();
  viewerElm.style.display = 'block';
  editorElm.style.display = 'none';

  var html = '<div class="corner"></div>';
  for (var i = 0; i < dates.length; i++) {
    html += '<div class="date">' + dates[i] + '</div>';
  }
  html += '<br style="clear:both;" />';
  for (var i = 0; i < participants.length; i++) {
    var participant = participants[i];
    html += '<div class="participant">' + 
      '<img src="' + participant.getThumbnailUrl() + '" width="20" height="20" />' +
      participant.getDisplayName().substring(0, 15) + '</div>';
    for (var j = 0; j < dates.length; j++) {
      var key = participant.getId() + '-' + dates[j];
      html += '<div id="' + key + '" class="choice" ' + 
        'onclick="javascript:updateState(\'' + participant.getId() + '\', \'' + dates[j] + '\')">' + 
        state.get(key, '') + '</div>';
    }
    html += '<br style="clear:both;" />';
  }

  viewerElm.innerHTML = html;
}

var STATE_TABLE = {'':'参加可能', '参加可能':'参加不能', '参加不能':''};
function updateState(pid, date) {
  var key = pid + '-' + date;
  var state = wave.getState();
  if (state && wave.getViewer().getId() == pid) {
    state.submitValue(key, STATE_TABLE[document.getElementById(key).innerHTML]);
  }
}

function setDates() {
  var state = wave.getState();
  if (state && datesElm.value) {
    state.submitValue('dates', datesElm.value);
  }
}

function init() {
  if (wave && wave.isInWaveContainer()) {
    wave.setModeCallback(render);
    wave.setParticipantCallback(render);
    wave.setStateCallback(render);
  }
}
gadgets.util.registerOnLoadHandler(init);
</script>
    ]]>
  </Content>
</Module>