Template:My Favorite Music Code

From OpenSocial Directory

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="My Favorite Music">
    <Require feature="opensocial-0.5" />
    <Require feature='setprefs' />
    <Require feature='dynamic-height' />
  </ModulePrefs>
  <Content type="html">
  
  <![CDATA[
  
  <div id="overlord">
  <div id="loading">Loading...</div>
  <div id="updating" style="display:none;">Updating...</div>
  
  <div id="area"></div>

  <div id="lastfmAccount">
  <div id="hadALastfmAccount" style="display:none;" class="strongLinks">
    <p><a href="javascript:;" onclick="$('setUsername').toggle();_IG_AdjustIFrameHeight();return false;">Have a Last.fm account? Click here.</a></p>
  </div>
  <form id="setUsername" style="display:none;">
    <input type="text" id="username" />
    <input type="submit" value="That's me" />
    <span id="cancelChangeUsername">| <a href="javascript:;" class="cancel" id="">cancel</a></span>
  </form>
  </div>
  <div id="placeholder"></div>
  
  </div>
  <style>
    @import url(http://cdn.last.fm/opensocial/main.css);
  </style>
  <script src="http://cdn.last.fm/javascript/lib/prototype.js"></script>
  
  <script type="text/javascript" src="http://cdn.last.fm/javascript/source/flashplayer_inline.js"></script>
  <script type="text/javascript" src="http://cdn.last.fm/javascript/11/flashpreview.js"></script>

  <script>

if(!LFM) {
  var LFM = {};
}
LFM.opensocial = {};
LFM.opensocial.RecentTracks = Class.create();
LFM.opensocial.RecentTracks.prototype = {
  initialize: function() {
    this.prefs = new _IG_Prefs();
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('OWNER'), 'owner');
    req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
    req.send(this.onLoadOwner.bind(this));
  },
  onLoadOwner: function(data) {
    this.owner = data.get("owner");//.getData();
    this.viewer = data.get("viewer");//.getData();
    if(this.owner && this.owner.getData) {
        this.owner = this.owner.getData();
    }
    if(this.viewer && this.viewer.getData) {
        this.viewer = this.viewer.getData();
    }
    if(this.isSameUser()) {
        Element.addClassName('overlord', 'sameUser');
    }
    if(!this.viewer) {
        Element.addClassName('overlord', 'notOnLastfm');
    } else {
        if(this.isSameUser()) {
            Element.addClassName('overlord', 'sameUserOnLastfm');
        }
        Element.addClassName('overlord', 'onLastfm');
    }
    if(this.isSameUser()/*1*/) {
      this._bindToChangeUser();
    }
    var fields = [ "username", "artists" ];
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonAppDataRequest("OWNER", fields), "owner_data");
    req.add(req.newFetchPersonAppDataRequest("VIEWER", fields), "viewer_data");
    req.send(this.onLoadUsername.bind(this));
  },
  _bindToChangeUser: function() {
      Event.observe('cancelChangeUsername', 'click', function(e) {
        Event.stop(e);
        $('setUsername').hide();
        $('changeUsername').show();
      });
      Event.observe('setUsername', 'submit', function(e) {
        Event.stop(e);
        //set username from pursistance
        this.saveUsername();
      }.bindAsEventListener(this));
  },
  _artistsFormSubmit: function(e) {
    Event.stop(e);
    var url = 'http://www.last.fm/opensocial/artists?input=' + encodeURIComponent($('artistsnames').value);
    _IG_FetchContent(url, function (responseText) {
      this.artists = $A(eval('(' + responseText + ')'));
      this.prefs.set("artists", responseText);
      this.goRecentTracks();
    }.bind(this));
  },
  
  onLoadUsername: function(data) {
    var fields = data.get("owner_data")//.getData();
    var viewerfields = data.get("viewer_data")//.getData();
    //ningfix
    if(fields && fields.getData) {
      var mydata = fields ? fields.getData() : false;
      console.log("mydata");
      console.log(mydata);
      fields = mydata && mydata[this.owner.getId()] ? mydata[this.owner.getId()] : mydata;
      console.log(fields);
      
      var viewerdata = viewerfields ? viewerfields.getData() : false;
      viewerfields = viewerdata && viewerdata[this.viewer.getId()] ? viewerdata[this.viewer.getId()] : viewerdata;
    }
    this.viewerusername = viewerfields ? viewerfields['username'] : false;
    this.username = fields ? fields['username'] : false;
    if(this.username=="false") this.username = false;
    this.artists = fields && fields['artists'] ? $A(eval('(' + fields['artists'] + ')')) : false;
    
    this.goRecentTracks();
  },
  
  isSameUser: function() {
      return this.owner && this.viewer && this.owner.getId() == this.viewer.getId();
  },
  
  isNing: function() {
    var s = new String(window.location);
    return s.include('ning.com');
  },
  saveUsername: function() {
    
    this.username = $('username').value;
    
    $('updating').show();
    //ningfix
    if(this.isNing()) {
      this.prefs.set("username", this.username);
      if($('changeUsername')) {
        $('changeUsername').show();
      }
      $('setUsername').hide();
      this.goRecentTracks();
    } else {
      var req = opensocial.newDataRequest();
      req.add(req.newUpdatePersonAppDataRequest("OWNER", "username", this.username));
      req.send(this.onSaveUsername.bind(this));
    }
  },
  onSaveUsername: function() {
    this.goRecentTracks();
  },
  goRecentTracks: function() {
    var currentTime = new Date();
    var url = 'http://www.last.fm/opensocial/recenttracks?';
    if(this.username) {
        url += 'username=' + this.username + '&';
    }
    if(this.viewerusername) {
        url += 'viewerusername=' + this.viewerusername + '&';
    }
    if(this.artists) {
        url += 'artists='+this.artists.join(',')+'&';
    }
    //var url = 'http://ws.audioscrobbler.com/1.0/user/'+ encodeURIComponent(this.username) +'/recenttracks.js?';
    url += 't=' + currentTime.getTime() / 1000;

    _IG_FetchContent(url, function (responseText) {
      $('placeholder').parentNode.insertBefore($('lastfmAccount'), $('placeholder'));   
      $('area').innerHTML = responseText;

      $('updating').hide();
      $('loading').hide();
      
      var artistHeader = "<h3 class=\"lfmOS\">My Favorite Music";
      if(this.isSameUser()/*9*/) {
        artistHeader += "<span id=\"changeArtists\"> | <a href=\"javascript:;\">Edit</a></span>";
      }
      artistHeader + "</h3>";
      if(!$('artistsForm')) {
        new Insertion.Before('artistList', artistHeader);
        if ($("artistList") && Prototype.Browser && Prototype.Browser.IE) {
            if (document.compatMode && document.compatMode == "BackCompat") {
                Element.addClassName("artistList", "artistListBackCompat");
            }
          var newWidth = $("artistList").parentNode.offsetWidth + 20;
          Element.setStyle("artistList", { width: newWidth + 'px'});
        }
        
        if(this.isSameUser()) {
          new Insertion.Before('artistList', '<form id="artistsForm" style="display:none;">'
            +'<div>Who are you favorite artists? Type as many as you like, separated by commas:</div>'
            +'<textarea id="artistsnames"></textarea><br />'
            +'<input type="submit" value="Save" />'
            +' | <a href="javascript:;" class="cancel" id="cancelChangeArtists">cancel</a>'
            +'</form>');
          Event.observe('artistsForm', 'submit', this._artistsFormSubmit.bindAsEventListener(this));
          
          $('artistsnames').value = $('currentArtists').innerHTML;
          Event.observe('cancelChangeArtists', 'click', function(e) {
            Event.stop(e);
            $('artistsForm').hide();
            $('changeArtists').show();
          });
          Event.observe('changeArtists', 'click', function(e) {
            Event.stop(e);
            $('artistsForm').show();
            $('changeArtists').hide();
            _IG_AdjustIFrameHeight();
          }.bindAsEventListener(this));
        }
      }
      
      if(this.isSameUser()/*9*/) {
        $('artistsForm').hide();
        $('changeArtists').show();
        if($('usernamedisplay')) {
          new Insertion.After('usernamedisplay', 
              '<span id="changeUsername"> (<a href="javascript:;">change</a>)</span>');
              
          Event.observe('changeUsername', 'click', function(e) {
            Event.stop(e);
            $('setUsername').show();
            $('changeUsername').hide();
            _IG_AdjustIFrameHeight();
          }.bindAsEventListener(this));
          $('setUsername').hide();
          $('hadALastfmAccount').hide();
        } else {
          $('notOnLastfm').parentNode.parentNode.insertBefore($('lastfmAccount'), $('notOnLastfm').parentNode);
          this._bindToChangeUser();
          $('hadALastfmAccount').show();
          $('setUsername').hide();
          $('cancelChangeUsername').hide();
        }
      }
      _IG_AdjustIFrameHeight();
      setTimeout('_IG_AdjustIFrameHeight()', 1000);
    }.bind(this), 10, true);
  }
}

_IG_RegisterOnloadHandler(function() {
  new LFM.opensocial.RecentTracks();
});

</script>
 
  ]]>
  </Content>
</Module>