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