First incarnation of playlist scrolling with Openrico Livegrid.

If you open playlist.html and without selecting anything head
to the song list scroller you can scroll in your song list. With
rows fetched dynamicly from the server.
A lot of things are broken, but the scrolling works!

admin-root/lib-js/rico.js

@@ -1972,6 +1972,17 @@ Rico.LiveGridBuffer.prototype = {
    },
 
    loadRows: function(ajaxResponse) {
+      var newRows = [];
+      $A(ajaxResponse.responseXML.getElementsByTagName('dmap.listingitem')).each(function (el) {
+        var row = [];
+        //,dmap.itemid,,dmap.itemname']
+        ['dmap.itemname','daap.songtime','daap.songartist','daap.songalbum','daap.songgenre'].each(function (name) {
+          row.push(el.getElementsByTagName(name)[0].firstChild.nodeValue);  
+        });
+        newRows.push(row);
+      });
+      return newRows;
+      
       var rowsElement = ajaxResponse.getElementsByTagName('rows')[0];
       this.updateUI = rowsElement.getAttribute("update_ui") == "true"
       var newRows = new Array()
@@ -2381,8 +2392,9 @@ Rico.LiveGrid.prototype = {
             queryString = queryString+'&sort_col='+escape(this.sortCol)+'&sort_dir='+this.sortDir;
 
         this.ajaxOptions.parameters = queryString;
-
+       var end = bufferStartPos+fetchSize;
-       ajaxEngine.sendRequest( this.tableId + '_request', this.ajaxOptions );
+       new Ajax.Request(Query.getFullUrl('songs')+'&index='+bufferStartPos+'-'+end,{method: 'get',onComplete: this.ajaxUpdate.bind(this)});
+//       ajaxEngine.sendRequest( this.tableId + '_request', this.ajaxOptions );
 
        this.timeoutHandler = setTimeout( this.handleTimedOut.bind(this), this.options.bufferTimeout);
 

admin-root/playlist.html

@@ -96,9 +96,41 @@ Album<br />
 
     </tr>
   </table>
-<div style="height: 400px; overflow: auto; width: 549px;">
+<!--       <col style="width: 140px;" />
+      <col style="width: 50px;" />
+      <col style="width: 120px;" />
+      <col style="width: 120px;" />
+      <col style="width: 100px;" />
+ -->
+
+<div style="height: 400px; width: 570px;">
   <table id="songs_data" style="width:530px;" border="0" cellspacing="0" cellpadding="0">
-    <tr><td>hej</td><td></td><td></td><td></td><td></td></tr>
+      <col style="width: 140px;" />
+      <col style="width: 50px;" />
+      <col style="width: 120px;" />
+      <col style="width: 120px;" />
+      <col style="width: 100px;" />
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
+    <tr><td>&#x00a0;</td><td></td><td></td><td></td><td></td></tr>
   </table>
 </div>
 </div>

admin-root/playlist.js

@@ -24,6 +24,7 @@ function initPlaylist() {
   Event.observe('edit_playlist_name','keypress',EventHandler.editPlaylistNameKeyPress);
   // Firefox remebers the search box value on page reload
   Field.clear('search');
+  new Rico.LiveGrid('songs_data',20,1000,'',{prefetchBuffer: true});
 }
 var GlobalEvents = {
   _clickListeners: [],
@@ -92,6 +93,7 @@ var Source = {
     input = $('edit_playlist_name');
     Source.playlistId = $('source').value;
     playlistName = this._getOptionElement(Source.playlistId).firstChild.nodeValue;
+    //###FIXME use prototype Position instead
     input.style.top = RicoUtil.toDocumentPosition(this._getOptionElement(Source.playlistId)).y + 'px';
     input.value = playlistName;
     input.style.display = 'block';
@@ -126,6 +128,7 @@ var Source = {
     Query.send('genres');
   },
   click: function (e) {
+    //###FIXME use prototype Position instead
     var x = Event.pointerX(e);
     var y = Event.pointerY(e);
     var el = $('edit_playlist_name');
@@ -305,37 +308,39 @@ var Query = {
        }
      }
    },
-   send: function (type) {
+   getFullUrl: function (type) {
      this.busy = true;
      var url;
      var handler;
      var meta = '';
-     var index = '';
      switch (type) {
        case 'genres':
          url = 'browse/genres';
-         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'artists':
          url = 'browse/artists';
-         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'albums':
          url = 'browse/albums';
-         handler = ResponseHandler.genreAlbumArtist;
          break;
        case 'songs':
          url = 'items';
          meta = '&meta=daap.songalbum,daap.songartist,daap.songgenre,dmap.itemid,daap.songtime,dmap.itemname';
-         index = '&index=0-50';
-         handler = rsSongs;
         break;
        default:
          alert("Shouldn't happen 2");
          break;
      }
-     url = this.baseUrl + this.playlistUrl + url + '?output=xml' + index + meta + this.getUrl(type);
+     return this.baseUrl + this.playlistUrl + url + '?output=xml' + meta + this.getUrl(type);
-     new Ajax.Request(url ,{method: 'get',onComplete:handler});
+   },
+   send: function(type) {
+     if (('genres' == type) || ('artists' == type) || ('albums' == type)) {
+       handler = ResponseHandler.genreAlbumArtist;
+     } else {
+       return;
+     //  handler = rsSongs;  
+     }
+     new Ajax.Request(this.getFullUrl(type), {method: 'get',onComplete:handler});
    }
 };
 var ResponseHandler = {
@@ -378,7 +383,7 @@ var ResponseHandler = {
         Query.send('albums');
         break;
       case 'albums':
-        Query.send('songs');
+//        Query.send('songs');
         break;
       default:
         alert("Shouldn't happen 3");