# HG changeset patch # User Dan # Date 1206539862 14400 # Node ID 0faea3a6c881c3f1e26b72cc653915016e147459 # Parent d3059e20b0fa7b5cb844c014c87cfd5075a04d1d Fixed some position slider issues; added a pulsing effect to the current track (fun!) diff -r d3059e20b0fa -r 0faea3a6c881 scripts/ajax.js --- 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); + diff -r d3059e20b0fa -r 0faea3a6c881 scripts/domutils.js --- 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); +} + diff -r d3059e20b0fa -r 0faea3a6c881 scripts/position.js --- 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) diff -r d3059e20b0fa -r 0faea3a6c881 themes/funkymonkey/style.css --- 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; } + diff -r d3059e20b0fa -r 0faea3a6c881 themes/iphone/style.css --- 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; } +