Fixed some position slider issues; added a pulsing effect to the current track (fun!)
--- 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; }
+