[mq]: jsify.patch

CHANGES.txt

@@ -1,3 +1,18 @@
+0.6
+---
+
+- replace chameleon templates with mako and jquery-tmpl(temporary
+  until jquery-ui decides what they are going to endorse)
+- replaced player with jPlayer
+- upgraded jquery and jquery-ui dependencies
+- 
+
+
+0.5.1.1
+-------
+
+- port to pyramid
+
 0.5.1
 -----
 

README.txt

@@ -3,7 +3,7 @@
 =========
 
 Spazzer is a web based music portal application. It's written in
-python, it runs under WSGI, it's built on top of bfg.
+python, it runs under WSGI, it's built on top of pyramid.
 
 
 

setup.py

@@ -16,7 +16,7 @@
             "PasteScript>=1.7.3"]
 
 setup(name = 'spazzer',
-      version = '0.5.1',
+      version = '0.6',
       description = 'spazzer',
       long_description = README + '\n\n' + CHANGES,
       classifiers = [

spazzer/web/templates/browse.mako

@@ -57,7 +57,7 @@
 				</div>
 				<div class="jp-title">
 					<ul>
-						<li>Cro Magnon Man</li>
+						<li></li>
 					</ul>
 				</div>
 				<div class="jp-no-solution" style="display: none; ">

spazzer/web/templates/search.mako

@@ -55,7 +55,7 @@
 				</div>
 				<div class="jp-title">
 					<ul>
-						<li>Cro Magnon Man</li>
+						<li></li>
 					</ul>
 				</div>
 				<div class="jp-no-solution" style="display: none; ">
@@ -78,23 +78,47 @@
 	  <p class="info">
 	    Artists whose name contains '${criteria}'
 	  </p>
-	  <span>${artists|n}</span>
+	  <div class="content"></div>
 	</div>
 	<div id="album-results" class="results">
 	  <h3>Albums</h3>
 	  <p class="info">
 	    Albums whose name contains '${criteria}'
 	  </p>
-	  <span>${albums|n}</span>
+	  <div class="content"></div>
 	</div>
 	<div id="track-results" class="results">
 	  <h3>Tracks</h3>
 	  <p class="info">
 	    Tracks whose title contains '${criteria}'
 	  </p>
-	  <span>${tracks|n}</span>
+	  <div class="content"></div>
 	</div>
     </div>
+  % if results:
+  <script type="text/javascript">
+    var results = ${results|n};
+  </script>
+  %else:
+  <script type="text/javascript">
+    var results = {};
+  </script>
+  %endif
+  <script type="text/javascript">
+    $(function(){
+      $.UI.init_filter_widget("#filter-widget");
+      $.UI.init_player_widget("#player",
+        {
+          swfPath:"${request.application_url}/static/js/jQuery.jPlayer.2.1.0/"
+      });
+    });
+
+    
+    function play(url){
+       $.UI.play(url);
+    }
+  </script>
+
 <script type="text/javascript">
 $(function(){
    $.UI.init_search_results("#results");

spazzer/web/templates/static/detail.html

@@ -1,13 +1,23 @@
 <ul class="album-list data-list list">
-    {{each items}}
+    {{each(album_index, album) items}}
     <li class="album-item">
-     <h3>${$value.name}&nbsp;&nbsp;<a class="download-link" href="${$value.download_url}">(download)</a></h3>
+     <h3>${album.title}&nbsp;&nbsp;<a class="download-link" href="${album.download_url}">(download)</a></h3>
       <table class="album-table">
-	{{each $value.tracks}}
+	{{each album.tracks}}
 	<tr class="track-row">
 	  <td class="index-cell">${$value.track}</td>
 	  <td class="title-cell">
-	    <span tal:attributes="class 'relevant-track track-title' if track.on_compilation() and artist_context and track.artist == artist_context.name else 'track-title' " tal:content="ftt(track.on_compilation())(track)">${$value.title}</span>
+	    {{if $value.on_compilation}}
+	      {{if artist_context !=$value.artist}}
+	        <span class="track-title">
+	       {{else}}
+	        <span class="track-title relevant-track">
+	       {{/if}}
+		${$value.title}</span>
+	    {{else}}
+	    <span class="track-title">${$value.title}</span>
+	    {{/if}}
+
 	  </td>
 	  <td class="action-cell">
 
@@ -17,7 +27,7 @@ <h3>${$value.name}&nbsp;&nbsp;<a class="download-link" href="${$value.download_u
 	     </a>
 	     &nbsp;&nbsp;
 	     <a class="play-link" 
-		href="#" onclick="play('${$value.download_url}')">
+		href="${$value.download_url}">
 	       play
 	     </a>
 	  </td>

spazzer/web/templates/static/js/ui.js

@@ -1,39 +1,54 @@
 /*ui logic for spazzer depends on jquery*/
 (function($){
 
-  var init_artist_header_click = function(selector, OPTIONS, render_cb){
+  var init_artist_view = function(selector, OPTIONS, render_cb){
       /*handle click events on all child headers of selector present and future*/
-      $(selector).find(OPTIONS.header_selector).live("click",
+      $(OPTIONS.header_selector, selector).live("click",
 						     function(event){
 							 event.preventDefault();
 							 var content = $(event.target).closest(OPTIONS.item_selector).children(OPTIONS.content_selector);
 							 var link = $(event.target);
 							 var url = $(link).attr("href");
 							 if(!$(content).is(":visible")){
+
 							     $(content).html("<div>Loading....</div>").show("normal");
 							     $.get(url, 
 								   function(data){
 								       render_cb(content, data);
-								       
+
 								   }
 								  );
 							 }else{
 							     $(content).toggle("normal");
+							     console.info("toggled");
 							 }
 						     });
+      /*handles click events on all play links*/
+      $(OPTIONS.play_link, selector).live("click",
+					  function(event){
+					      event.preventDefault();
+					      var url = $(event.target).attr("href");
+					      $.UI.play(url); 
+					  });
 
   };
   var template_cache = {};
-  var render = function(template, data, container){
-      /*handles template caching*/
+  var render = function(template, data, container, cb){
+      /*handles template caching
+       * template: url to template to fetched
+       * data: data to use to render the template
+       * container: container to insert template result in to
+       * cb: callback to call when rendering is done*/
       var x = function(){
-	  console.info("rendering data with template " + template);
-	  $(container).hide("fast").html($.tmpl(template, data)).show("normal");
+	  var content = $.tmpl(template, data);
+	  $(container).hide("fast").html(content).show("normal");
+	  if(cb){
+	      cb();
+	  }
       };
 
       if(!template_cache[template]){
 	  $.get(template,function(data){
-		    console.info("fetched template: " + template);
 		    template_cache[template] = $.template(template, data);
 		    x();
 		});
@@ -51,7 +66,9 @@
 		  header_selector: ".artist-header",
 		  list_selector: ".artist-list",
 		  artist_list_template: "/static/artist-list.html",
-		  detail_template: "/static/detail.html"
+		  detail_template: "/static/detail.html",
+		  tracks_template: "/static/tracks.html",
+		  play_link:".play-link"
 	      };
 
 	      var OPTIONS = $.extend(DEFAULT_OPTIONS, options || {});
@@ -62,20 +79,21 @@
 	      };
 
 	      var render_artist_list = function(data, status, xhr){
-		  render(OPTIONS.artist_list_template, data, $("#panel-content", selector));
+		  render(OPTIONS.artist_list_template, data, $("#panel-content", selector), 
+			 function(){
+			     $(OPTIONS.content_selector).hide();
+			     $(OPTIONS.content_selector).html("<p/>");
+			 });
 	      };
 
-	      init_artist_header_click(selector, OPTIONS, render_artist_content_cb);
+	      init_artist_view(selector, OPTIONS, render_artist_content_cb);
 
 	      $(selector).tabs(
 		  {show: function(){
 		       $(OPTIONS.list_selector).fadeIn("normal");
 		   }, //end show
 
 		   load: function(event,ui){
-		       $(OPTIONS.list_selector).hide();
-		       $(OPTIONS.content_selector).hide();
-		       $(OPTIONS.content_selector).html("<p/>");
 		   },//end load
 		   ajaxOptions:{
 		       success:render_artist_list
@@ -99,11 +117,42 @@
 		  item_selector: ".artist-item",
 		  content_selector: ".artist-content",
 		  header_selector: ".artist-header",
-		  list_selector: ".artist-list"
+		  list_selector: ".artist-list",
+		  artist_list_template: "/static/artist-list.html",
+		  detail_template: "/static/detail.html",
+		  tracks_template: "/static/tracks.html",
+		  play_link:".play-link"
 	      };
 	      var OPTIONS = $.extend(DEFAULT_OPTIONS, options || {});
+	      var render_artist_list = function(data){
+		  render(OPTIONS.artist_list_template, data, $(".content",$("#artist-results", "#results")), 
+			 function(){
+			     $(OPTIONS.content_selector).hide();
+			     $(OPTIONS.content_selector).html("<p/>");
+			 });
+
+	      };
+	      var render_artist_content_cb = function(container, data){
+		  render(OPTIONS.detail_template, data, container);
+
+	      };
+
+	      var render_album_list = function(data){
+		  render(OPTIONS.detail_template, data, $(".content",$("#album-results", "#results")));
+	      };
+
+	      var render_track_list = function(data){
+		  render(OPTIONS.tracks_template, data, $(".content",$("#track-results", "#results")));
+	      };
+
 	      $(selector).find(OPTIONS.content_selector).hide();
-	      init_artist_header_click(selector, OPTIONS);
+	      init_artist_view(selector, OPTIONS, render_artist_content_cb);
+
+	      if(window.results){
+		  render_artist_list({items:window.results.artists});
+		  render_album_list({items:window.results.albums});
+		  render_track_list({items:window.results.tracks});
+	      }
 	  }
   };   
  })(jQuery);

spazzer/web/templates/static/tracks.html

@@ -0,0 +1,14 @@
+<table class="track-content data-list list track-list">
+  {{each items}}
+    <tr class="track-row">
+    	<td class="track-cell">${$value.title} by ${$value.artist}</td>
+	<td class="action-cell"><a class="download-link" href="${$value.download_url}">download</a>
+	     &nbsp;&nbsp;
+	     <a class="play-link" 
+		href="${$value.download_url}">
+	       play
+	     </a>
+	     </td>
+	</tr>
+	{{/each}}
+</table>