youroom-home-gadgets-staging.xml

<?xml version="1.0" encoding="UTF-8" ?>

<Module>
  <ModulePrefs title="youRoom Home" scrolling="true">
    <Require feature="opensocial-0.8" />
    <Require feature="locked-domain"/>
    <OAuth>
      <Service name="youroom">
        <Access url="http://youroom.sg/oauth/access_token" method="GET" />
        <Request url="http://youroom.sg/oauth/request_token" method="GET" />
        <Authorization url="http://youroom.sg/oauth/authorize?oauth_callback=http://oauth.gmodules.com/gadgets/oauthcallback" />
      </Service>
    </OAuth>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[

  <!-- shindig oauth popup handling code -->
  <script src="http://gadget-doc-examples.googlecode.com/svn/trunk/opensocial-gadgets/popup.js"></script>

  <style>
  #main {
    margin: 0px;
    padding: 0px;
    font-size: small;
  }
  </style>

  <div id="main" style="display: none">
  </div>

  <div id="approval" style="display: none">
    <img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
    <a href="#" id="personalize">Personalize this gadget</a>
  </div>

  <div id="waiting" style="display: none">
    Please click
    <a href="#" id="approvaldone">I've approved access</a>
    once you've approved access to your data.
  </div>

  <script type="text/javascript">
    // Display UI depending on OAuth access state of the gadget (see <divs> above).
    // If user hasn't approved access to data, provide a "Personalize this gadget" link
    // that contains the oauthApprovalUrl returned from makeRequest.
    //
    // If the user has opened the popup window but hasn't yet approved access, display
    // text prompting the user to confirm that s/he approved access to data.  The user
    // may not ever need to click this link, if the gadget is able to automatically
    // detect when the user has approved access, but showing the link gives users
    // an option to fetch their data even if the automatic detection fails.
    //
    // When the user confirms access, the fetchData() function is invoked again to
    // obtain and display the user's data.
    function showOneSection(toshow) {
      var sections = [ 'main', 'approval', 'waiting' ];
      for (var i=0; i < sections.length; ++i) {
        var s = sections[i];
        var el = document.getElementById(s);
        if (s === toshow) {
          el.style.display = "block";
        } else {
          el.style.display = "none";
        }
      }
    }

    // Process returned JSON feed to display data.
    function showResults(result) {
      showOneSection('main');

      var titleElement = document.createElement('div');
      var nameNode = document.createTextNode("Home");
      titleElement.appendChild(nameNode);
      document.getElementById("main").appendChild(titleElement);
      document.getElementById("main").appendChild(document.createElement("br"));

      for(var i = 0; i < result.length; i++) {
        entry = result[i];
        var divElement = document.createElement('div');
        divElement.setAttribute('class', 'name');
        var valueNode = document.createTextNode(entry["entry"]["content"]);
        divElement.appendChild(nameNode);
        divElement.appendChild(valueNode);
        document.getElementById("main").appendChild(divElement);
      }
    }


    // Invoke makeRequest() to fetch data from the service provider endpoint.
    // Depending on the results of makeRequest, decide which version of the UI
    // to ask showOneSection() to display. If user has approved access to his
    // or her data, display data.
    // If the user hasn't approved access yet, response.oauthApprovalUrl contains a
    // URL that includes a Google-supplied request token. This is presented in the
    // gadget as a link that the user clicks to begin the approval process.
    function fetchData() {
      var params = {};
      url = "http://home.youroom.sg/?format=json";
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
      params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH;
      params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = "youroom";
      params[gadgets.io.RequestParameters.OAUTH_USE_TOKEN] = "always";
      params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;

      gadgets.io.makeRequest(url, function (response) {
        if (response.oauthApprovalUrl) {
          // Create the popup handler. The onOpen function is called when the user
          // opens the popup window. The onClose function is called when the popup
          // window is closed.
          var popup = shindig.oauth.popup({
            destination: response.oauthApprovalUrl,
            windowOptions: null,
            onOpen: function() { showOneSection('waiting'); },
            onClose: function() { fetchData(); }
          });
          // Use the popup handler to attach onclick handlers to UI elements.  The
          // createOpenerOnClick() function returns an onclick handler to open the
          // popup window.  The createApprovedOnClick function returns an onclick
          // handler that will close the popup window and attempt to fetch the user's
          // data again.
          var personalize = document.getElementById('personalize');
          personalize.onclick = popup.createOpenerOnClick();
          var approvaldone = document.getElementById('approvaldone');
          approvaldone.onclick = popup.createApprovedOnClick();
          showOneSection('approval');
        } else if (response.data) {
          showOneSection('main');
          showResults(response.data);
        } else {
          // The response.oauthError and response.oauthErrorText values may help debug
          // problems with your gadget.
          var main = document.getElementById('main');
          var err = document.createTextNode('OAuth error: ' +
            response.oauthError + ': ' + response.oauthErrorText);
          main.appendChild(err);
          showOneSection('main');
        }
      }, params);
    }
    // Call fetchData() when gadget loads.
    gadgets.util.registerOnLoadHandler(fetchData);
  </script>
  ]]>
  </Content>
</Module>

youroom_home_gadget_for_staging_igoogle.xml

<?xml version="1.0" encoding="UTF-8" ?>

<Module>
  <ModulePrefs title="youRoom Home(Staging)">
    <Require feature="opensocial-0.8" />
    <Require feature="locked-domain"/>
    <Require feature="dynamic-height"/>
    <OAuth>
      <Service name="youroom">
        <Access url="http://youroom.sg/oauth/access_token" method="GET" />
        <Request url="http://youroom.sg/oauth/request_token" method="GET" />
        <Authorization url="http://youroom.sg/oauth/authorize?oauth_callback=http://oauth.gmodules.com/gadgets/oauthcallback" />
      </Service>
    </OAuth>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[

  <!-- shindig oauth popup handling code -->
  <script src="http://gadget-doc-examples.googlecode.com/svn/trunk/opensocial-gadgets/popup.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
  <script src="http://github.com/creationix/jquery-haml/raw/master/jquery.haml-1.3.js"></script>

  <style>
  #main {
    margin: 0px;
    padding: 0px;
    font-size: small;
  }
  .entry {
    border-bottom: 1px solid silver;
    padding: 4px 0px;
  }
  .entry img {
    float: left;
    margin: 4px;
  }
  .entry .name {
    color: gray;
  }
  .entry .navi {
    border: 1px solid silver;
  }
  .entry .navi div {
    margin: 4px;
  }
  .entry .navi .show {
    float: left;
  }
  .entry .navi .comment {
    float: left;
  }

  .children {
    margin-left: 10px;
   }

  .link {
    color: blue;
    cursor: pointer;
  }
  .link:hover {
    text-decoration: underline;
  }
  .clear_left {
    clear: left;
  }
  </style>

  <div id="main" style="display: none">
  </div>

  <div id="approval" style="display: none">
    <img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
    <a href="#" id="personalize">Personalize this gadget</a>
  </div>

  <div id="waiting" style="display: none">
    Please click
    <a href="#" id="approvaldone">I've approved access</a>
    once you've approved access to your data.
  </div>

  <script type="text/javascript">
  $(document).ready(function() {
    function showOneSection(toshow) {
      $('#main, #approval, #waiting').hide();
      $('#' + toshow).show();
    }

    function showEachResult(entry, main) {
      var img_url = "http://www.youroom.sg/r/" + entry["participation"]["group"]["to_param"] + "/participations/" + entry["participation"]["id"] + "/picture";
      main.haml([".root.entry"+"#"+entry["id"],
                 ["%img", {src:img_url, width:48, height:48}],
                 [".name", entry["participation"]["name"]],
                 [".group", {data:entry["participation"]["group"]["to_param"]}, entry["participation"]["group"]["name"]],
                 [".content", entry["content"]],
                 [".clear_left"],
                 [".navi",
                  [".show.link", "Show"],
                  [".comment.link", "Comment"],
                  [".clear_left"]
                 ]
                ]);
    }

    // Process returned JSON feed to display data.
    function showResults(result) {
      showOneSection('main');
      var $main = $("#main");

      for(var i = 0; i < result.length; i++) {
        entry = result[i];
        showEachResult(entry["entry"], $main);
      }

      gadgets.window.adjustHeight()
    }

    function getHomeEntries() {
      url = "http://www.youroom.sg/?format=json";

      callYouRoom(url, "get", function (result) {
          showOneSection('main');
          showResults(result);
        }
      );
    }

    function callYouRoom(url, method, successCallback, postdata){
      var params = {};

      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
      params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH;
      params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = "youroom";
      params[gadgets.io.RequestParameters.OAUTH_USE_TOKEN] = "always";

      if (method == "post") {
        params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
      } else {
        params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
      }

      if (postdata != null) {
        postdata = gadgets.io.encodeValues(postdata);
        params[gadgets.io.RequestParameters.POST_DATA]= postdata;
      }


      gadgets.io.makeRequest(url, function (response) {
        if (response.oauthApprovalUrl) {
          var popup = shindig.oauth.popup({
            destination: response.oauthApprovalUrl,
            windowOptions: null,
            onOpen: function() { showOneSection('waiting'); },
            onClose: function() { bootWithClear(); }
          });
          var personalize = document.getElementById('personalize');
          personalize.onclick = popup.createOpenerOnClick();
          var approvaldone = document.getElementById('approvaldone');
          approvaldone.onclick = popup.createApprovedOnClick();
          showOneSection('approval');
        } else if (response.data) {
          showOneSection('main');
          successCallback(response.data);
        } else {
          var main = document.getElementById('main');
          var err = document.createTextNode('OAuth error: ' +
            response.oauthError + ': ' + response.oauthErrorText);
          main.appendChild(err);
          showOneSection('main');
        }
      }, params);
    }

    // Call getHomeEntries() when gadget loads.
    getHomeEntries();

    $(".show").live('click', function() {
      var entry = $(this).parents(".root.entry")[0];
      var entryId = entry.id;
      var groupId = $(this).parents(".root.entry").find('.group')[0].attributes[0].value;
      var url = "http://www.youroom.sg/r/" + groupId + "/entries/" + entryId + "?format=json";

      callYouRoom(url, "get", function(result) {
        $(entry).append(childrenDoms(result.entry, groupId, true));
      });
    });

    $(".comment").live('click', function(){
      var entry = $(this).parents(".entry")[0];
      $(entry).append(formDom());
    });

    function formDom(){
      // Form
      var formElem = document.createElement('form');
      formElem.onsubmit = submitComment;
      var textElem = document.createElement('textarea');
      textElem.setAttribute('name', "content");
      var submitElem = document.createElement('input');
      submitElem.type = "submit";
      formElem.appendChild(textElem);
      formElem.appendChild(submitElem);
      return formElem;
    }

    function submitComment() {
      if (this.content.value != "") {
        var entryId = $(this).parents(".entry")[0].id;
        var groupId = $(this).parents(".root.entry").find('.group')[0].attributes[0].value;
        postEntry(this.content.value, groupId, entryId);
      } else {
        alert("Input content");
      }
      return false;
    }

    function postEntry(content, groupId, parentId) {
      url = "http://www.youroom.sg/r/" + groupId + "/entries?format=json";
      callYouRoom(url, "post", reloadWithClear, {"entry[content]":content, "entry[parent_id]": parentId});
    }

    function reloadWithClear(result){
      var parent_id = result.entry.parent_id;
      // TODO: resultにグループIDを含めるようにする
      $(".entry#"+parent_id).find("form").hide().end().append("<div class='children'>" + entryDom(result.entry, '5') + "</div>");
    }

    function childrenDoms(entry, groupId, notRenderSelf) {
      var str = "";
      if (notRenderSelf != true) {
        str = entryDom(entry, groupId);
      }
      if(entry.children){
        var childrenStr = "";
        $.each(entry.children, function(){
          childrenStr = childrenStr + childrenDoms(this, groupId);
        });
        str = str + "<div class='children'>" + childrenStr + "</div>";
      }
      return str;
    }

    function entryDom(entry, groupId) {
      return '<div class="entry" id="'+entry.id+'"><img src="http://www.youroom.sg/r/'+groupId+'/participations/'+ entry.participation.id +'/picture" width="48" height="48"><div class="name">'+ entry.participation.name + '</div><div class="content">'+entry.content+'</div><div class="clear_left"></div><div class="comment link">Comment</div><div class="clear_left"></div></div>';
    }

  });
  </script>
  ]]>
  </Content>
</Module>