javascript/samplecontainer/examples/SocialHelloWorld.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <Module>
   3  <ModulePrefs title="Social Hello World">
   4    <Require feature="opensocial-0.7"></Require>
   5    <Require feature="dynamic-height"></Require>
   6  </ModulePrefs>
   7  <Content type="html">
   8    <![CDATA[
   9    <style type="text/css">
  10      #helloworlds {
  11        margin: 20px;
  12        font-family: arial, sans-serif;
  13        width: 310px;
  14      }
  15
  16      div.person img {
  17        margin-bottom: 10px;
  18      }
  19
  20      div.bubble {
  21        background-image: url(/gadgets/files/samplecontainer/examples/bubble.gif);
  22        background-repeat: no-repeat;
  23        width: 202px;
  24        height: 66px;
  25        padding: 12px 0px 0px 12px;
  26        font-weight: bold;
  27        font-size: 18px;
  28        float: right;
  29      }
  30
  31      .c0 { color: #008000; }
  32      .c1 { color: #FF8A00; }
  33      .c2 { color: #7777CC; }
  34      .c3 { color: #008000; }
  35      .c4 { color: #CC0000; }
  36      .c5 { color: #73A6FF; }
  37
  38      div.name {
  39        width: 150px;
  40        text-align: right;
  41        font-weight: normal;
  42        font-size: 12px;
  43        color: #999;
  44        position:relative;
  45        top: 10px;
  46        right: -35px;
  47      }
  48    </style>
  49
  50    <script type="text/javascript">
  51      var hellos = new Array('Hello World', 'Hallo Welt', 'Ciao a tutti', 'Hola mundo',
  52        '&#1055;&#1086;&#1103;&#1074;&#1083;&#1077;&#1085;&#1080;&#1077; &#1085;&#1072; &#1089;&#1074;&#1077;&#1090;', '&#12371;&#12435;&#12395;&#12385;&#12399;&#19990;&#30028;', '&#20320;&#22909;&#19990;&#30028;', '&#50668;&#47084;&#48516;, &#50504;&#45397;&#54616;&#49464;&#50836;');
  53      var numberOfStyles = 6;
  54      var viewerCount;
  55
  56      var allPeople, viewerFriendData;
  57      function render(data) {
  58        var viewer = data.get('viewer').getData();
  59        allPeople = data.get('viewerFriends').getData().asArray() || new Array();
  60        if (viewer) {
  61          allPeople.push(viewer);
  62        }
  63
  64        var viewerData = data.get('viewerData').getData() || {};
  65        viewerCount = getCount(viewerData[viewer.getId()]);
  66
  67        viewerFriendData = data.get('viewerFriendData').getData() || {};
  68        viewerFriendData[viewer.getId()] = viewerData[viewer.getId()];
  69
  70        var html = '';
  71        for (var i = 0; i < allPeople.length; i++) {
  72          var count = getCount(viewerFriendData[allPeople[i].getId()]);
  73          if (count == 0) {
  74            //continue;
  75          }
  76
  77          html += '<div class="person">';
  78          html += '<div class="bubble c' + count % numberOfStyles + '">' + hellos[count % hellos.length];
  79          html += '<div class="name">' + allPeople[i].getDisplayName() + ' (' + count + ') ' + allPeople[i].getField(opensocial.Person.Field.GENDER).getDisplayValue();
  80          html += '</div></div>';
  81
  82          if (allPeople[i].getField(opensocial.Person.Field.THUMBNAIL_URL)
  83              && allPeople[i].getField(opensocial.Person.Field.THUMBNAIL_URL).indexOf('null') == -1) {
  84            html += '<img src="' + allPeople[i].getField(opensocial.Person.Field.THUMBNAIL_URL) + '"/>';
  85          } else {
  86            html += '<img src="/gadgets/files/samplecontainer/examples/nophoto.gif"/>';
  87          }
  88          html += '<br style="clear:both"></div>';
  89        }
  90        document.getElementById('helloworlds').innerHTML = html;
  91
  92        gadgets.window.adjustHeight();
  93      }
  94
  95      function getCount(data) {
  96        return data && data['count'] ? Number(data['count']) : 0;
  97      }
  98
  99      function sayHelloWorld() {
 100        viewerCount++;
 101        var req = opensocial.newDataRequest();
 102        req.add(req.newUpdatePersonAppDataRequest('VIEWER', 'count', viewerCount), 'updateData');
 103        req.send(initData);
 104      }
 105
 106
 107      var opts = {};
 108      opts[opensocial.DataRequest.PeopleRequestFields.FIRST] =  0;
 109      opts[opensocial.DataRequest.PeopleRequestFields.MAX] = 40;
 110      opts[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
 111                      [opensocial.Person.Field.AGE,
 112                      opensocial.Person.Field.NAME,
 113                      opensocial.Person.Field.GENDER,
 114                      opensocial.Person.Field.PROFILE_URL,
 115                      opensocial.Person.Field.THUMBNAIL_URL,
 116                      opensocial.Person.Field.STATUS];
 117      opts[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.NAME;
 118
 119
 120
 121      function initData() {
 122        var req = opensocial.newDataRequest();
 123        req.add(req.newFetchPersonRequest('VIEWER', opts), 'viewer');
 124        req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS', opts), 'viewerFriends');
 125        req.add(req.newFetchPersonAppDataRequest('VIEWER', 'count'), 'viewerData');
 126        req.add(req.newFetchPersonAppDataRequest('VIEWER_FRIENDS', 'count'), 'viewerFriendData');
 127        req.send(render);
 128      }
 129
 130      gadgets.util.registerOnLoadHandler(initData);
 131    </script>
 132
 133    <div style="margin-bottom: 1em">
 134      <input type="button" value="Say hello" onclick="sayHelloWorld(); return false;"/>
 135    </div>
 136    <div id="helloworlds" style="margin: 4px">
 137    </div>
 138   ]]>
 139   </Content>
 140 </Module>