Permalink
Browse files

Complete rewrite with AngularJS

  • Loading branch information...
IgorMinar committed Oct 24, 2011
1 parent 49e64b4 commit 87dfa695d9981b1fc439c6cf4ed32f77970faf8f
Showing with 360 additions and 636 deletions.
  1. +36 −47 public/index.html
  2. +106 −385 public/js/Tunes.js
  3. +12 −18 public/style/screen.css
  4. +2 −5 test-js/SpecRunner.html
  5. +204 −181 test-js/spec/TunesSpec.js
View
@@ -1,63 +1,52 @@
<!doctype html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backbone Tunes</title>
<title>Angular Tunes</title>
<meta name="author" content="David Goodlad <david@goodlad.ca>">
<meta name="author" content="Igor Minar <igor@angularjs.org>">
<link rel="stylesheet" href="style/screen.css" media="screen, projection">
<link rel="stylesheet" href="style/fancypants.css" media="screen, projection">
<script src="js/vendor/modernizr-1.6.min.js"></script>
<script src="js/vendor/jquery-1.5.1.min.js"></script>
<script src="js/vendor/underscore.js"></script>
<script src="js/vendor/backbone.js"></script>
<script src="js/vendor/angular.js" ng:autobind></script>
<script src="js/Tunes.js"></script>
<script type="text/template" id="library-template">
<h1>Music Library</h1>
<ul class="albums"></ul>
</script>
<script type="text/template" id="playlist-template">
<h1>Playlist</h1>
<nav>
<button class="control play">Play</button>
<button class="control pause">Pause</button>
<button class="control prev">Prev</button>
<button class="control next">Next</button>
</nav>
<ul class="albums">
</ul>
</script>
<script type="text/template" id="album-template">
<button class="queue add"><img src="/images/add.png"></button>
<button class="queue remove"><img src="/images/remove.png"></button>
<span class="album-title"><%= title %></span>&nbsp;&nbsp;
<span class="artist-name"><%= artist %></span>
<ol class="tracks">
<% _.each(tracks, function(track) { %>
<li><%= track.title %></li>
<% }); %>
</ol>
</script>
<script type="application/javascript">
jQuery(function() {
window.library.fetch();
});
</script>
</head>
<body>
<body ng:controller="TunesCtrl">
<div id="container">
<div class="playlist">
<h1>Playlist</h1>
<nav>
<button class="control play" ng:click="player.play()" ng:hide="player.playing">Play</button>
<button class="control pause" ng:click="player.pause()" ng:show="player.playing">Pause</button>
<button class="control prev" ng:click="player.previous()">Prev</button>
<button class="control next" ng:click="player.next()">Next</button>
</nav>
<ul class="albums">
<li class="album" ng:repeat="album in player.playlist"
ng:class="player.current.album == $index && 'current'">
<button class="queue remove" ng:click="player.playlist.remove(album)"></button>
<span class="album-title">{{album.title}}</span>
<span class="artist-name">{{album.artist}}</span>
<ol class="tracks">
<li ng:repeat="track in album.tracks"
ng:class="player.current.track == $index && 'current'">{{track.title}}</li>
</ol>
</li>
</ul>
</div>
<section class="library">
<h1>Music Library</h1>
<ul class="albums">
<li class="album current" ng:repeat="album in albums">
<button class="queue add" ng:click="player.playlist.add(album)"></button>
<span class="album-title">{{album.title}}</span>
<span class="artist-name">{{album.artist}}</span>
</li>
</ul>
</section>
</div>
</body>
</html>
Oops, something went wrong.

0 comments on commit 87dfa69

Please sign in to comment.