Added a spinner closes #34

Started work on #60 you can select songs by clicking and ctrl-clicking
(can't do anything with the selected songs though)

admin-root/lib-js/rico.js

@@ -1965,7 +1965,8 @@ Rico.LiveGridBuffer.prototype = {
    getBlankRow: function() {
       if (!this.blankRow ) {
          this.blankRow = new Array();
-         for ( var i=0; i < this.metaData.columnCount ; i++ ) 
+         this.blankRow[0] = {name: '&nbsp;',id: ''};
+         for ( var i=1; i < this.metaData.columnCount ; i++ ) 
             this.blankRow[i] = "&nbsp;";
      }
      return this.blankRow;
@@ -1975,7 +1976,6 @@ Rico.LiveGridBuffer.prototype = {
       var newRows = [];
       $A(ajaxResponse.responseXML.getElementsByTagName('dmap.listingitem')).each(function (el) {
         var row = [];
-        //,dmap.itemid,,dmap.itemname']
         row.push({id:Element.textContent(el.getElementsByTagName('dmap.itemid')[0]),
                   name: Element.textContent(el.getElementsByTagName('dmap.itemname')[0])});
         ['daap.songtime','daap.songartist','daap.songalbum'].each(function (name) {
@@ -2162,21 +2162,7 @@ Rico.GridViewPort.prototype = {
    },
 
    populateRow: function(htmlRow, row) {
-      var songId = '';
-      if (typeof(row[0]) == 'object') {
       htmlRow.cells[0].innerHTML = row[0].name;
-        htmlRow.setAttribute('songid',row[0].id);
-        songId = row[0].id;
-      } else {
-        // empty row
-        htmlRow.cells[0].innerHTML = '';
-        htmlRow.removeAttribute('songid');
-      }
-      if (SelectedRows.isSelected(songId)) {
-        htmlRow.style.backgroundColor = '#8CACBB';
-      } else {
-        htmlRow.style.backgroundColor = '';
-      }
       for (var j=1; j < row.length; j++) {
          htmlRow.cells[j].innerHTML = row[j]
       }
@@ -2225,9 +2211,11 @@ Rico.GridViewPort.prototype = {
       var contentOffset = viewPrecedesBuffer ? blankSize: 0;
 
       for (var i=0; i < rows.length; i++) {//initialize what we have
+        SelectedRows.updateState(this.table.rows[i + contentOffset],rows[i][0].id,startPos+i);
         this.populateRow(this.table.rows[i + contentOffset], rows[i]);
       }
       for (var i=0; i < blankSize; i++) {// blank out the rest 
+        SelectedRows.updateState(this.table.rows[i + contentOffset]);
         this.populateRow(this.table.rows[i + blankOffset], this.buffer.getBlankRow());
       }
       this.isPartialBlank = blankSize > 0;

admin-root/playlist.js

@@ -31,18 +31,18 @@ Ajax.Responders.register({  onCreate: Spinner.incRequestCount,
 }
 var Spinner = {
   count: 0,
-  incRequestCount: function () {
+  incRequestCount: function (ca) {
     Spinner.count++;
     $('spinner').style.visibility = 'visible';
   },
-  decRequestCount: function () {
+  decRequestCount: function (caller) {
     Spinner.count--;
-    if (Spinner.count <= 0) {
+    if (/index/.test(caller.url)) {
       Spinner.count = 0;
       $('spinner').style.visibility = 'hidden';
     }
   }  
-}
+};
 var GlobalEvents = {
   _clickListeners: [],
   click: function (e) {
@@ -58,7 +58,7 @@ var GlobalEvents = {
       return (element != el);
     });
   }
-}
+};
 
 var Source = {
   playlistId: '',
@@ -157,7 +157,8 @@ var Source = {
     }
     Source.savePlaylistName();
   }  
-}
+};
+
 var EventHandler = {
   searchTimeOut: '',
   sourceClickCount: [],
@@ -168,7 +169,7 @@ var EventHandler = {
       return;
     }
     if (EventHandler.sourceClickCount[playlistId]) {
-      EventHandler.sourceClickCount[playlistId]++
+      EventHandler.sourceClickCount[playlistId]++;
     } else {
       EventHandler.sourceClickCount[playlistId] = 1;
     }
@@ -235,6 +236,7 @@ var EventHandler = {
   },
   albumsChange: function (e) {
     EventHandler._setSelected('albums');
+    SelectedRows.clearAll();
     g_myLiveGrid.resetContents();
     g_myLiveGrid.requestContentRefresh(0);
 //    Query.send('songs');
@@ -402,6 +404,7 @@ var ResponseHandler = {
         Query.send('albums');
         break;
       case 'albums':
+        SelectedRows.clearAll();
         g_myLiveGrid.resetContents();
         g_myLiveGrid.requestContentRefresh(0);
 //        Query.send('songs');
@@ -487,15 +490,60 @@ SelectedRows = {
   click: function(e) {
     var tr = Event.findElement(e,'tr');
     if (tr.hasAttribute('songid')) {
-      SelectedRows.songId[tr.getAttribute('songid')] = 1;
-      tr.style.backgroundColor = '#8CACBB';
+      var id = tr.getAttribute('songid');
+    } else {
+      return;
+    }
+    if (e.ctrlKey) {
+      if (SelectedRows.isSelected(tr)) {
+        SelectedRows.unsetSelected(tr);
+      } else {
+        SelectedRows.setSelected(tr);
+      }
+      return;
+    }
+    if (e.shiftKey) {
+      return;
+    }
+    if (SelectedRows.isSelected(tr)) {
+      SelectedRows.clearAll();
+    } else {
+      SelectedRows.clearAll();
+      SelectedRows.setSelected(tr);
     }
-    Event.stop(e);
   },
-  isSelected: function (songId) {
-    return SelectedRows.songId[songId];
+  isSelected: function (tr) {
+    return SelectedRows.songId[tr.getAttribute('songid')];
+  },
+  setSelected: function (tr) {
+    SelectedRows.songId[tr.getAttribute('songid')] = tr.getAttribute('index');
+    tr.style.backgroundColor = '#8CACBB';
+  },
+  unsetSelected: function (tr) {
+    SelectedRows.songId[tr.getAttribute('songid')] = '';
+    tr.style.backgroundColor = '';
+  },
+  clearAll: function () {
+    SelectedRows.songId = [];
+    $A($('songs_data').getElementsByTagName('tr')).each(SelectedRows.unsetSelected);
+ },
+  updateState: function (tr,songId,index) {
+    if (songId && index) {
+      tr.setAttribute('songid',songId);
+      tr.setAttribute('index',index);
+      if (SelectedRows.isSelected(tr)) {
+        SelectedRows.setSelected(tr);
+      } else {
+        SelectedRows.unsetSelected(tr);  
       }
-}
+    } else {
+      tr.removeAttribute('songid');
+      tr.removeAttribute('index');
+      SelectedRows.unsetSelected(tr);  
+    }
+  }
+};
+
 Object.extend(Element, {
   removeChildren: function(element) {
   while(element.hasChildNodes()) {