Fixed some position slider issues; added a pulsing effect to the current track (fun!)
authorDan
Wed, 26 Mar 2008 09:57:42 -0400
changeset 11 0faea3a6c881
parent 10 d3059e20b0fa
child 12 b3fcc21e557f
Fixed some position slider issues; added a pulsing effect to the current track (fun!)
scripts/ajax.js
scripts/domutils.js
scripts/position.js
themes/funkymonkey/style.css
themes/iphone/style.css
--- a/scripts/ajax.js	Mon Mar 24 02:53:42 2008 -0400
+++ b/scripts/ajax.js	Wed Mar 26 09:57:42 2008 -0400
@@ -148,6 +148,7 @@
           {
             $(nt_id).addClass('current');
           }
+          pulsar_reset();
         }
         // update playing status
         is_playing = response.is_playing;
@@ -237,6 +238,8 @@
         {
           $(nt_id).addClass('current');
         }
+        // update pulsar
+        pulsar_reset();
         // update playing status
         var img = $('btn_playpause').object.getElementsByTagName('img')[0];
         is_playing = true;
@@ -316,3 +319,66 @@
 
 addOnloadHook(refresh_playlist);
 
+// pulse the current track
+var pulsar_current = 0, pulsar_tdlist = [], pulsar_direction = 1;
+
+var pulsar_reset = function()
+{
+  // remove any pulsar classes from items that aren't "current"
+  var boobylist = document.getElementsByTagName('tr');
+  for ( var i = 0; i < boobylist.length; i++ )
+  {
+    var booby = boobylist[i];
+    var match = booby.className.match(/(^| )(pulsar[0-9])( |$)/);
+    if ( match && !$(booby).hasClass('current') )
+    {
+      $(booby).rmClass(match[2]);
+    }
+  }
+  var tdlist_new = document.getElementsByClassName('current', 'tr');
+  if ( pulsar_current == 0 && tdlist_new == pulsar_tdlist )
+  {
+    return true;
+  }
+  pulsar_tdlist = tdlist_new;
+  pulsar_current = 0;
+  for ( var i = 0; i < pulsar_tdlist.length; i++ )
+  {
+    var td = pulsar_reset[i];
+    for ( var i = 1; i < 10; i++ )
+    {
+      if ( $(td).hasClass('pulsar' + i) )
+      {
+        $(td).rmClass('pulsar' + i);
+      }
+    }
+    if ( ! $(td).hasClass('pulsar0') )
+    {
+      $(td).addClass('pulsar0');
+    }
+  }
+}
+
+var pulsar_advance = function()
+{
+  if ( !is_playing )
+    return true;
+  if ( pulsar_current + pulsar_direction == 10 )
+  {
+    pulsar_direction = -1;
+  }
+  else if ( pulsar_current + pulsar_direction == -1 )
+  {
+    pulsar_direction = 1;
+  }
+  var nc = pulsar_current + pulsar_direction;
+  for ( var i = 0; i < pulsar_tdlist.length; i++ )
+  {
+    $(pulsar_tdlist[i]).rmClass('pulsar' + pulsar_current).addClass('pulsar' + nc);
+  }
+  pulsar_current = nc;
+}
+
+addOnloadHook(pulsar_reset);
+setInterval(pulsar_advance, 50);
+
--- a/scripts/domutils.js	Mon Mar 24 02:53:42 2008 -0400
+++ b/scripts/domutils.js	Wed Mar 26 09:57:42 2008 -0400
@@ -95,3 +95,29 @@
   return text;
 }
 
+// Tell which elements have the specified CSS class
+// Parameters:
+//   * object - HTMLElement
+//   * string - class name
+//   * string - tag name, if omitted will test all elements (slow)
+function getElementsByClassName(oRoot, className, tagName)
+{
+  tagName = ( tagName ) ? tagName : '*';
+  var arrEls = document.getElementsByTagName(tagName);
+  var arrResult = [];
+  for ( var i = 0; i < arrEls.length; i++ )
+  {
+    if ( $(arrEls[i]).hasClass(className) )
+    {
+      arrResult.push(arrEls[i]);
+    }
+  }
+  return arrResult;
+}
+
+// shortcut :)
+document.getElementsByClassName = function(a, b)
+{
+  return getElementsByClassName(document, a, b);
+}
+
--- a/scripts/position.js	Mon Mar 24 02:53:42 2008 -0400
+++ b/scripts/position.js	Wed Mar 26 09:57:42 2008 -0400
@@ -16,11 +16,11 @@
   var minY = $(base).Top() + 3;
   var maxY = minY;
   var maxX = minX + $(base).Width() - 6;
-  Drag.init(slider, inner, minX, maxX, minY, maxY);
+  Drag.init(slider, slider, minX, maxX, minY, maxY);
   
-  inner.onDrag = posslide_handle_drag;
-  inner.onDragEnd = posslide_handle_dragend;
-  inner.onDragStart = function(x, y) { pos_in_drag = true; };
+  slider.onDrag = posslide_handle_drag;
+  slider.onDragEnd = posslide_handle_dragend;
+  slider.onDragStart = function(x, y) { pos_in_drag = true; };
   base.onclick = posslide_handle_click;
   
   posslide_set_position(0);
@@ -35,7 +35,7 @@
   if ( do_inner )
     inner.style.width = size + 'px';
   if ( ( pos_in_drag && !do_inner ) || ( !pos_in_drag && do_inner ) )
-    slider.style.left = x + 'px';
+    slider.style.left = ( x ) + 'px';
 }
 
 var posslide_handle_dragend = function(x, y)
--- a/themes/funkymonkey/style.css	Mon Mar 24 02:53:42 2008 -0400
+++ b/themes/funkymonkey/style.css	Wed Mar 26 09:57:42 2008 -0400
@@ -122,3 +122,16 @@
   background-repeat: no-repeat;
   background-position: center center;
 }
+
+/* The list of colors that will be cycled through as playback takes place */
+tr.pulsar0 td { background-color: #47507a; }
+tr.pulsar1 td { background-color: #424a73; }
+tr.pulsar2 td { background-color: #3c436c; }
+tr.pulsar3 td { background-color: #383d64; }
+tr.pulsar4 td { background-color: #31365d; }
+tr.pulsar5 td { background-color: #2c3155; }
+tr.pulsar6 td { background-color: #272a4e; }
+tr.pulsar7 td { background-color: #222447; }
+tr.pulsar8 td { background-color: #1c1d3f; }
+tr.pulsar9 td { background-color: #171738; }
+
--- a/themes/iphone/style.css	Mon Mar 24 02:53:42 2008 -0400
+++ b/themes/iphone/style.css	Wed Mar 26 09:57:42 2008 -0400
@@ -134,3 +134,15 @@
   background-position: center center;
 }
 
+/* The list of colors that will be cycled through as playback takes place */
+tr.pulsar0 td { background-color: #47507a; }
+tr.pulsar1 td { background-color: #424a73; }
+tr.pulsar2 td { background-color: #3c436c; }
+tr.pulsar3 td { background-color: #383d64; }
+tr.pulsar4 td { background-color: #31365d; }
+tr.pulsar5 td { background-color: #2c3155; }
+tr.pulsar6 td { background-color: #272a4e; }
+tr.pulsar7 td { background-color: #222447; }
+tr.pulsar8 td { background-color: #1c1d3f; }
+tr.pulsar9 td { background-color: #171738; }
+