Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

A more uniform style to JS

  • Loading branch information...
commit d2a3a10479de1487a7a64554f3a3d4ef370233ca 1 parent cf958c5
@sunny authored
Showing with 86 additions and 88 deletions.
  1. +80 −82 public/script.js
  2. +6 −6 views/index.haml
View
162 public/script.js
@@ -1,7 +1,4 @@
-// Change CSS background image
-$.fn.background = function(bg) {
- return $(this).css('backgroundImage', bg ? 'url('+bg+')' : 'none')
-}
+/* JavaScript helpers */
// Return a random element from an Array
// [3, 9, 8].random() # => 5
@@ -9,20 +6,35 @@ Array.prototype.random = function() {
return this[Math.floor(Math.random() * this.length)]
}
-// Assigns keyboard keys to elements and adds them to the title attributes.
-//
+// Recursively calls a function after a certain amount of time if it's not
+// called during that time
+function regularly(fn, interval) {
+ var timeout = null,
+ wrapped = function() {
+ clearTimeout(timeout)
+ timeout = setTimeout(wrapped, interval)
+ fn()
+ }
+ timeout = setTimeout(wrapped, interval)
+ return wrapped
+}
+
+
+/* jQuery helpers */
+
+// Change CSS background image
+$.fn.background = function(bg) {
+ return $(this).css('backgroundImage', bg ? 'url('+bg+')' : 'none')
+}
+
+// Assigns keyboard keys to elements and adds them to the title attributes
// Needs the data-keyboard-key attribute on elements and optionally accepts
-// the data-keyboard-name attribute.
-//
-// Example:
-// <a data-keyboard-key="h" href="/">home</a>
-// <a data-keyboard-key=" " data-keyboard-name="Space" href="/space">space</a>
-// $('a').keyboardShortcut()
+// the data-keyboard-name attribute
$.fn.keyboardShortcut = function() {
return $(this).each(function() {
var button = $(this),
- character = $(this).data('keyboard-key'),
- title = $(this).data('keyboard-name') || character
+ character = $(this).data('key'),
+ title = $(this).data('key-name') || character
button.attr('title', button.attr('title') + ' ('+title+')')
$(document).keypress(function(e) {
if (String.fromCharCode(e.charCode) == character)
@@ -31,76 +43,53 @@ $.fn.keyboardShortcut = function() {
})
}
-// Recursively calls a function after a certain amount of time
-// if it's not called during that time
-function regularly(fn, interval) {
- var timeout = null
- var wrapped = function() {
- clearTimeout(timeout)
- timeout = setTimeout(wrapped, interval)
- fn()
- }
- timeout = setTimeout(wrapped, interval)
- return wrapped
-}
-$(function() {
- var currentSong = {}
+/* So-nice helpers */
- // Get a new artist image from Last.fm via jsonp.
- // When found calls the `callback` with the image url
- // as the first argument.
- // Example:
- //
- // artistImage('LCD Soundsystem', function(url) {
- // alert(url)
- // });
- function artistImage(artist, callback) {
- var cb = function() { callback(cache[artist].random()) }
- var cache = artistImage.cache
- artist = encodeURI(artist)
-
- // Deliver from cache
- if (cache.hasOwnProperty(artist)) {
- // execute the callback asynchronously to minimize codepaths
- setTimeout(cb, 10)
- return
- }
+// Get a new artist image from Last.fm via jsonp
+// When found calls the `callback` with the image url as the first argument
+function artistImage(artist, callback) {
+ var cb = function() { callback(cache[artist].random()) },
+ cache = artistImage.cache
+ artist = encodeURI(artist)
- // Load
- var last_fm_uri = "http://ws.audioscrobbler.com/2.0/?format=json&method=artist.getimages&artist=%s&api_key=b25b959554ed76058ac220b7b2e0a026"
- $.ajax({
- url: last_fm_uri.replace('%s', artist),
- dataType: 'jsonp',
- success: function(obj) {
- if (obj.images.image) {
- cache[artist] = $.map(obj.images.image, function(img) {
- return img.sizes.size[0]['#text']
- })
- cb()
- } else {
- callback()
- }
- }
- })
+ // Deliver from cache
+ if (cache.hasOwnProperty(artist)) {
+ // execute the callback asynchronously to minimize codepaths
+ setTimeout(cb, 10)
+ return
}
- artistImage.cache = {}
- // Every 10 seconds change background on the $(body)
- var changeBackground = regularly(function() {
- if (!currentSong.artist)
- return $('body').background()
- artistImage(currentSong.artist, function(url) {
- $('body').background(url)
- })
- }, 10e3)
+ // Load
+ var last_fm_uri = "http://ws.audioscrobbler.com/2.0/?format=json&method=artist.getimages&artist=%s&api_key=b25b959554ed76058ac220b7b2e0a026"
+ $.ajax({
+ url: last_fm_uri.replace('%s', artist),
+ dataType: 'jsonp',
+ success: function(obj) {
+ if (obj.images.image) {
+ cache[artist] = $.map(obj.images.image, function(img) {
+ return img.sizes.size[0]['#text']
+ })
+ cb()
+ } else {
+ callback()
+ }
+ }
+ })
+}
+artistImage.cache = {}
+
+
+$(function() {
+ // Object that contains all the song info
+ var currentSong = {}
// Update the HTML based on the currentSong object
function updateInformation(obj) {
- var artistChange = currentSong.artist != obj.artist
- var songChange = currentSong.title != obj.title
+ var artistChange = currentSong.artist != obj.artist,
+ songChange = currentSong.title != obj.title
currentSong = obj = obj || {}
-
+
var artist = obj.artist || '',
album = obj.album || '',
title = obj.title || ''
@@ -109,18 +98,27 @@ $(function() {
$('#artist').text(artist)
$('#album' ).text(album)
- if (!title && !title) {
+ if (!title && !title)
$('title').text('So nice')
- } else {
+ else
$('title').text(artist + (artist && title ? '' : '') + title)
- }
if (artistChange || songChange)
- $('#vote').removeAttr('disabled').show();
+ $('#vote').removeAttr('disabled').show()
+
if (artistChange)
changeBackground()
}
+ // Change background on the body regularly
+ var changeBackground = regularly(function() {
+ if (!currentSong.artist)
+ return $('body').background()
+ artistImage(currentSong.artist, function(url) {
+ $('body').background(url)
+ })
+ }, 10e3)
+
// XHR updating the text regularly
var update = regularly(function() {
$.ajax({
@@ -135,11 +133,10 @@ $(function() {
if ($(this).attr('disabled'))
return false
- var form = $(this).parents('form')
$.ajax({
type: 'put',
- url: form.attr('action'),
- data: this.name+'='+this.value,
+ url: '/player',
+ data: this.name+'='+encodeURI(this.value),
complete: update
})
@@ -151,5 +148,6 @@ $(function() {
// Keyboard shortcuts
$('input').keyboardShortcut()
+
})
View
12 views/index.haml
@@ -18,13 +18,13 @@
%form{:method => 'post', :action => 'player'}
%input{:type => "hidden", :name => "_method", :value => "put"}
- if settings.controls
- %input#playpause{:type=>'submit', :value => '▸', :name=>'playpause', :title => "Play/Pause", :'data-keyboard-key' => " ", :'data-keyboard-name' => "space" }
- %input#prev{ :type=>'submit', :value => '←', :name=>'prev', :title => "Previous", :'data-keyboard-key' => "p" }
- %input#next{ :type=>'submit', :value => '→', :name=>'next', :title => "Next", :'data-keyboard-key' => "n" }
- %input#voldown{ :type=>'submit', :value => '♪', :name=>'voldown', :title => "Quieter", :'data-keyboard-key' => "-" }
- %input#volup{ :type=>'submit', :value => '♫', :name=>'volup', :title => "Louder", :'data-keyboard-key' => "+" }
+ %input#playpause{:type=>'button', :value=>'▸', :name=>'playpause', :title=>"Play/Pause", :'data-key'=>" ", :'data-key-name'=>"space"}
+ %input#prev{ :type=>'button', :value=>'←', :name=>'prev', :title=>"Previous", :'data-key'=>"p"}
+ %input#next{ :type=>'button', :value=>'→', :name=>'next', :title=>"Next", :'data-key'=>"n"}
+ %input#voldown{ :type=>'button', :value=>'♪', :name=>'voldown', :title=>"Quieter", :'data-key'=>"-"}
+ %input#volup{ :type=>'button', :value=>'♫', :name=>'volup', :title=>"Louder", :'data-key'=>"+"}
- if settings.voting
- %input#vote{ :type=>'submit', :value => '↡', :name=>'vote', :title => "Vote to Skip", :'data-keyboard-key' => "s" }
+ %input#vote{ :type=>'button', :value=>'↡', :name=>'vote', :title=>"Vote to Skip", :'data-key' => "s" }
%script{:src => '/jquery.min.js'}
%script{:src => '/script.js'}
Please sign in to comment.
Something went wrong with that request. Please try again.