last.fm

functions.php

@@ -62,10 +62,11 @@ function dw_scripts() {
 		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init.min.js', 'jquery', '', true );
 	} 
 	if ( is_page('music') || is_archive() || is_search() ) {	
-		wp_enqueue_script( 'scripts-o', get_template_directory_uri() . '/js/script-o.js', 'jquery', '', true );
+		wp_enqueue_script( 'scripts-o', get_template_directory_uri() . '/js/scripts-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/script-o.min.js', 'jquery', '', true );
 		wp_enqueue_script( 'init-o', get_template_directory_uri() . '/js/init-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init-o.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'charts', get_template_directory_uri() . '/js/Chart.min.js', 'jquery', '', true );
 		wp_enqueue_script( 'last-fm', get_template_directory_uri() . '/js/last.fm.js', 'jquery', '', true );
 	}
 

js/last.fm.js

@@ -1,48 +1,483 @@
-/* https://github.com/alexcash/jQuery.last.fm */
+$.fn.waypoint.defaults = {
+	context: window,
+	continuous: true,
+	enabled: true,
+	horizontal: false,
+	offset: '70%',
+	triggerOnce: true
+}
 
-(function( $ ) {
-	$.fn.lfm = function(options){
-		var settings = $.extend({
-			APIkey:		null,
-			User:		null,
-			Behavior:	"hover",
-			limit:		20,
-			period:		"3month"	// overall | 7day | 1month | 3month | 6month | 12month
-		}, options);
+$('.timeline').waypoint(function() {
+	$(function() {
+	     options = {
+			responsive: true,
+			maintainAspectRatio: true,
+			animationSteps: 100,
+			animationEasing: "easeInQuart",
+			legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
 
-		var url = "https://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=" + settings.User + "&period=" + settings.period + "&api_key=" + settings.APIkey + "&format=json&limit=" + settings.limit +"&callback=?";
-		var albums = [];
+	    };
+		var data = {
+		    labels: ["January", "February", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
+		    datasets: [
+		        {
+		            label: "Ambient",
+		            fillColor: "rgba(254, 254, 51,0.2)",
+		            strokeColor: "rgba(254, 254, 51,1)",
+		            pointColor: "rgba(254, 254, 51,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(220,220,220,1)",
+		            data: [115, 91, 47, 31, 26, 55, 60, 70, 85, 94, 100, 63]
+		        },
+		        {
+		            label: "Blues",
+		            fillColor: "rgba(250, 188, 2,0.2)",
+		            strokeColor: "rgba(250, 188, 2,1)",
+		            pointColor: "rgba(250, 188, 2,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [83, 91, 104, 79, 56, 27, 52, 35, 33, 25, 22, 86]
+		        },
+		        {
+		            label: "Classical",
+		            fillColor: "RGBA(251, 153, 2, .3)",
+		            strokeColor: "rgba(251, 153, 2,1)",
+		            pointColor: "rgba(251, 153, 2,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [118, 78, 30, 9, 16, 37, 50, 41, 34, 50, 99, 200]
+		        },
+		        {
+		            label: "Country",
+		            fillColor: "RGBA(253, 83, 8, .3)",
+		            strokeColor: "rgba(253, 83, 8,1)",
+		            pointColor: "rgba(253, 83, 8,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [46, 85, 91, 79, 26, 37, 50, 41, 34, 50, 49, 81]
+		        },
+		        {
+		            label: "Electronic",
+		            fillColor: "RGBA(254, 39, 18, .3)",
+		            strokeColor: "rgba(254, 39, 18,1)",
+		            pointColor: "rgba(254, 39, 18,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [28, 42, 34, 59, 86, 77, 50, 41, 34, 67, 70, 81]
+		        },
+		        {
+		            label: "Folk",
+		            fillColor: "RGBA(167, 25, 75, .3)",
+		            strokeColor: "rgba(167, 25, 75,1)",
+		            pointColor: "rgba(167, 25, 75,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [38, 31, 70, 39, 56, 117, 50, 41, 34, 50, 90, 121]
+		        },
+		        {
+		            label: "Hip Hop",
+		            fillColor: "RGBA(134, 1, 175, .3)",
+		            strokeColor: "rgba(134, 1, 175,1)",
+		            pointColor: "rgba(134, 1, 175,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [21, 17, 31, 89, 86, 77, 50, 41, 34, 50, 90, 81]
+		        },
+		        {
+		            label: "Jazz",
+		            fillColor: "RGBA(61, 1, 164, .3)",
+		            strokeColor: "rgba(61, 1, 164,1)",
+		            pointColor: "rgba(61, 1, 164,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [51, 38, 33, 19, 26, 57, 50, 81, 170, 200, 195, 172]
+		        },
+		        {
+		            label: "Pop",
+		            fillColor: "RGBA(2, 71, 254, .3)",
+		            strokeColor: "rgba(2, 71, 254,1)",
+		            pointColor: "rgba(2, 71, 254,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [48, 53, 63, 107, 191, 177, 118, 91, 74, 60, 51, 123]
+		        },
+		        {
+		            label: "R&B",
+		            fillColor: "RGBA(3, 146, 206, .3)",
+		            strokeColor: "rgba(3, 146, 206,1)",
+		            pointColor: "rgba(3, 146, 206,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [73, 43, 52, 29, 56, 73, 24, 33, 37, 14, 26, 41]
+		        },
+		        {
+		            label: "Rock",
+		            fillColor: "RGBA(102, 176, 50, .3)",
+		            strokeColor: "rgba(102, 176, 50,1)",
+		            pointColor: "rgba(102, 176, 50,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [28, 37, 30, 59, 146, 157, 200, 105, 94, 40, 36, 89]
+		        },
+		        {
+		            label: "World",
+		            fillColor: "RGBA(208, 234, 43, .3)",
+		            strokeColor: "rgba(208, 234, 43,1)",
+		            pointColor: "rgba(208, 234, 43,1)",
+		            pointStrokeColor: "#fff",
+		            pointHighlightFill: "#fff",
+		            pointHighlightStroke: "rgba(151,187,205,1)",
+		            data: [36, 41, 23, 34, 94, 85, 87, 71, 44, 39, 30, 11]
+		        }
+		    ]
+		};
+	     ctx = $("#timechart").get(0).getContext("2d");
+	     LineChart = new Chart(ctx).Line(data, options);
+	});
+});
 
-		function isLoaded (albumElement) {
+$('.music-types').waypoint(function() {
+	$(function() {
+	     options = {
+	        scaleShowLabelBackdrop: true,
+	        scaleBackdropColor: "rgba(255,255,255,0.75)",
+	        scaleBeginAtZero: true,
+	        scaleBackdropPaddingY: 2,
+	        scaleBackdropPaddingX: 2,
+	        scaleShowLine: true,
+	        segmentShowStroke: true,
+	        segmentStrokeColor: "#fff",
+	        segmentStrokeWidth: 2,
+	        animationSteps: 100,
+	        animationEasing: "easeInCirc",
+	        animateRotate: true,
+	        animateScale: false,
+	        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
 
-			for (var i = 0; i < albums.length; i++){
-				var markup = $("<div class='album'><div class='front'><img src='" + albums[i].art + "'><div class='alpha'></div></div><div class='back'><h2>" + albums[i].artist + "</h2><h1>" + albums[i].name + "</h1><h3>" + albums[i].played + " tracks played</h3></div></div>");
-				albumElement.append(markup);
-			}
+	    };
+	     data = [
+	        {
+	            value: 440,
+	            color: "RGBA(254, 254, 51, .7)",
+	            highlight: "RGBA(254, 254, 51, .3)",
+	            label: "Ambient"
+	        },
+	        {
+	            value: 510,
+	            color: "RGBA(250, 188, 2, .7)",
+	            highlight: "RGBA(250, 188, 2, .3)",
+	            label: "Blues"
+	        },
+	        {
+	            value: 410,
+	            color: "RGBA(251, 153, 2, .7)",
+	            highlight: "RGBA(251, 153, 2, .3)",
+	            label: "Classical"
+	        },
+	        {
+	            value: 510,
+	            color: "RGBA(253, 83, 8, .7)",
+	            highlight: "RGBA(253, 83, 8, .3)",
+	            label: "Country"
+	        },
+	        {
+	            value: 548,
+	            color: "RGBA(254, 39, 18, .7)",
+	            highlight: "RGBA(254, 39, 18, .3)",
+	            label: "Electronic"
+	        },
+	        {
+	            value: 460,
+	            color: "RGBA(167, 25, 75, .7)",
+	            highlight: "RGBA(167, 25, 75, .3)",
+	            label: "Folk"
+	        },
+	        {
+	            value: 261,
+	            color: "RGBA(134, 1, 175, .7)",
+	            highlight: "RGBA(134, 1, 175, .3)",
+	            label: "Hip Hop"
+	        },
+	        {
+	            value: 1038,
+	            color: "RGBA(61, 1, 164, .7)",
+	            highlight: "RGBA(61, 1, 164, .3)",
+	            label: "Jazz"
+	        },
+	        {
+	            value: 970,
+	            color: "RGBA(2, 71, 254, .7)",
+	            highlight: "RGBA(2, 71, 254, .3)",
+	            label: "Pop"
+	        },
+	        {
+	            value: 777,
+	            color: "RGBA(3, 146, 206, .7)",
+	            highlight: "RGBA(3, 146, 206, .3)",
+	            label: "R&B"
+	        },
+	        {
+	            value: 712,
+	            color: "RGBA(102, 176, 50, .7)",
+	            highlight: "RGBA(102, 176, 50, .3)",
+	            label: "Rock"
+	        },
+	        {
+	            value: 625,
+	            color: "RGBA(208, 234, 43, .7)",
+	            highlight: "RGBA(208, 234, 43, .3)",
+	            label: "World"
+	        }
+	    ];
+	     ctx = $("#typechart").get(0).getContext("2d");
+	     styles = new Chart(ctx).Doughnut(data, options);
+		 document.getElementById('key').innerHTML = styles.generateLegend();
+
+	});
+});
 
-			if (settings.Behavior == "hover") {
-				albumElement.find('.album').hover(function(){
-					$(this).addClass('flip');
-				},function(){
-					$(this).removeClass('flip');
+$('.music-typed').waypoint(function() {
+	$(function() {
+	     options = {
+	        scaleShowLabelBackdrop: true,
+	        scaleBackdropColor: "rgba(255,255,255,0.75)",
+	        scaleBeginAtZero: true,
+	        scaleBackdropPaddingY: 2,
+	        scaleBackdropPaddingX: 2,
+	        scaleShowLine: true,
+	        segmentShowStroke: true,
+	        segmentStrokeColor: "#fff",
+	        segmentStrokeWidth: 2,
+	        animationSteps: 100,
+	        animationEasing: "easeOutQuart",
+	        animateRotate: true,
+	        animateScale: false,
+	        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
+
+	    };
+	    data = [
+	       {
+	           value: 440,
+	           color: "RGBA(254, 254, 51, .7)",
+	           highlight: "RGBA(254, 254, 51, .3)",
+	           label: "Ambient"
+	       },
+	       {
+	           value: 510,
+	           color: "RGBA(250, 188, 2, .7)",
+	           highlight: "RGBA(250, 188, 2, .3)",
+	           label: "Blues"
+	       },
+	       {
+	           value: 410,
+	           color: "RGBA(251, 153, 2, .7)",
+	           highlight: "RGBA(251, 153, 2, .3)",
+	           label: "Classical"
+	       },
+	       {
+	           value: 510,
+	           color: "RGBA(253, 83, 8, .7)",
+	           highlight: "RGBA(253, 83, 8, .3)",
+	           label: "Country"
+	       },
+	       {
+	           value: 548,
+	           color: "RGBA(254, 39, 18, .7)",
+	           highlight: "RGBA(254, 39, 18, .3)",
+	           label: "Electronic"
+	       },
+	       {
+	           value: 460,
+	           color: "RGBA(167, 25, 75, .7)",
+	           highlight: "RGBA(167, 25, 75, .3)",
+	           label: "Folk"
+	       },
+	       {
+	           value: 261,
+	           color: "RGBA(134, 1, 175, .7)",
+	           highlight: "RGBA(134, 1, 175, .3)",
+	           label: "Hip Hop"
+	       },
+	       {
+	           value: 1000,
+	           color: "RGBA(61, 1, 164, .7)",
+	           highlight: "RGBA(61, 1, 164, .3)",
+	           label: "Jazz"
+	       },
+	       {
+	           value: 970,
+	           color: "RGBA(2, 71, 254, .7)",
+	           highlight: "RGBA(2, 71, 254, .3)",
+	           label: "Pop"
+	       },
+	       {
+	           value: 777,
+	           color: "RGBA(3, 146, 206, .7)",
+	           highlight: "RGBA(3, 146, 206, .3)",
+	           label: "R&B"
+	       },
+	       {
+	           value: 712,
+	           color: "RGBA(102, 176, 50, .7)",
+	           highlight: "RGBA(102, 176, 50, .3)",
+	           label: "Rock"
+	       },
+	       {
+	           value: 625,
+	           color: "RGBA(208, 234, 43, .7)",
+	           highlight: "RGBA(208, 234, 43, .3)",
+	           label: "World"
+	       }
+	   ];
+	     ctx = $("#artchart").get(0).getContext("2d");
+	     myNewChart = new Chart(ctx).PolarArea(data, options);
+	});
+});
+
+(function( $ ) {
+	$.fn.lfmr = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&format=json&limit=17";
+		var tracks = [];
+		function isLoadedr (recentElement) {
+			for (var i = 0; i < tracks.length; i++){
+				var markup = $("<li class='list-group-item'>" + tracks[i].artist + " - <span class='artist'>" + tracks[i].title + " : " + tracks[i].album + "</li>");
+				recentElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.recenttracks.track).each(function(){
+					tracks.push ({
+						artist:	this.artist["#text"],
+						title: this.name,
+						album: this.album["#text"]
+					});
 				});
-			} else {
-				$(document).bind('click', function (e) {
-					$('.flip').removeClass('flip');
+				isLoadedr($this);
+			});
+		});
+	};
+	
+	$.fn.lfmtw = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=7day&format=json&limit=20";
+		var tracks = [];
+		function isLoadedt (tracksElement) {
+			for (var i = 0; i < tracks.length; i++){
+				var markup = $("<li class='list-group-item'>" + tracks[i].artist + " - <span class='artist'>" + tracks[i].title + "</span><span class='badge'>" + tracks[i].played + "</span></li>");
+				tracksElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.toptracks.track).each(function(){
+					tracks.push ({
+						title: this.name,
+						artist: this.artist.name,
+						played: this.playcount,
+					});
 				});
-
-				albumElement.find('.album').click(function(e){
-					e.stopPropagation();
-					if($('.flip')[0] === this){
-						$(this).removeClass('flip');
-					} else {
-						$('.flip').removeClass('flip');
-						$(this).addClass('flip');
-					}
+				isLoadedt($this);
+			});
+		});
+	};
+	
+	$.fn.lfmaw = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=7day&format=json&limit=25";
+		var artists = [];
+		function isLoadeda (artistElement) {
+			for (var i = 0; i < artists.length; i++){
+				var markup = $("<li class='list-group-item'>" + artists[i].aname + "<span class='badge'>" + artists[i].played + "</span></li>");
+				artistElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.topartists.artist).each(function(){
+					artists.push ({
+						aname:	this.name,
+						played: this.playcount
+					});
+				});
+				isLoadeda($this);
+			});
+		});
+	};
+	
+	$.fn.lfma = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=6month&format=json&limit=50";
+		var artists = [];
+		function isLoadeda (artistElement) {
+			for (var i = 0; i < artists.length; i++){
+				var markup = $("<li class='list-group-item'>" + artists[i].aname + "<span class='badge'>" + artists[i].played + "</span></li>");
+				artistElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.topartists.artist).each(function(){
+					artists.push ({
+						aname:	this.name,
+						played: this.playcount
+					});
 				});
+				isLoadeda($this);
+			});
+		});
+	};
+	
+	$.fn.lfmt = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=6month&format=json&limit=50";
+		var tracks = [];
+		function isLoadedt (tracksElement) {
+			for (var i = 0; i < tracks.length; i++){
+				var markup = $("<li class='list-group-item'>" + tracks[i].artist + " - <span class='artist'>" + tracks[i].title + "</span><span class='badge'>" + tracks[i].played + "</span></li>");
+				tracksElement.append(markup);
 			}
 		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.toptracks.track).each(function(){
+					tracks.push ({
+						title: this.name,
+						artist: this.artist.name,
+						played: this.playcount,
+					});
+				});
+				isLoadedt($this);
+			});
+		});
+	};
 
+	$.fn.lfm = function(options){
+		var url = "https://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=12month&format=json&limit=200";
+		var albums = [];
+		function isLoaded (albumElement) {
+			for (var i = 0; i < albums.length; i++){
+				var markup = $("<div class='album'><div class='front'><img src='" + albums[i].art + "'><div class='alpha'></div></div><div class='back'><h2>" + albums[i].artist + "</h2><h1>" + albums[i].name + "</h1><h3><span class='badge'>" + albums[i].played + "</span> tracks played</h3></div></div>");
+				albumElement.append(markup);
+			}
+			albumElement.find('.album').hover(function(){
+				$(this).addClass('flip');
+			},function(){
+				$(this).removeClass('flip');
+			});
+		}
 		return this.each(function(){
 			var $this = $(this);
 			$.getJSON( url, function(data){
@@ -60,10 +495,9 @@
 	};
 })( jQuery );
 
-$('.albums').lfm({
-    APIkey: "e12ea1d0253898ee9a93edfe42ffdeab",
-    User: "windhamdavid",
-    Behavior: "hover",
-    limit: 100,
-    period: "3month"
-});
+$('.recent').lfmr();
+$('.wtracks').lfmtw();
+$('.wartists').lfmaw();
+$('.artists').lfma();
+$('.tracks').lfmt();
+$('.albums').lfm();

js/script-o.js

@@ -328,7 +328,9 @@ if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires j
   })
 
 }(window.jQuery);
-;/**
+;
+
+/**
  * jQuery Validation Plugin 1.9.0
  *
  * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
@@ -379,7 +381,9 @@ date:function(a,b){return this.optional(b)||!/Invalid|NaN/.test(new Date(a))},da
 (function(c){var a={};if(c.ajaxPrefilter)c.ajaxPrefilter(function(d,e,f){e=d.port;if(d.mode=="abort"){a[e]&&a[e].abort();a[e]=f}});else{var b=c.ajax;c.ajax=function(d){var e=("port"in d?d:c.ajaxSettings).port;if(("mode"in d?d:c.ajaxSettings).mode=="abort"){a[e]&&a[e].abort();return a[e]=b.apply(this,arguments)}return b.apply(this,arguments)}}})(jQuery);
 (function(c){!jQuery.event.special.focusin&&!jQuery.event.special.focusout&&document.addEventListener&&c.each({focus:"focusin",blur:"focusout"},function(a,b){function d(e){e=c.event.fix(e);e.type=b;return c.event.handle.call(this,e)}c.event.special[b]={setup:function(){this.addEventListener(a,d,true)},teardown:function(){this.removeEventListener(a,d,true)},handler:function(e){arguments[0]=c.event.fix(e);arguments[0].type=b;return c.event.handle.apply(this,arguments)}}});c.extend(c.fn,{validateDelegate:function(a,
 b,d){return this.bind(b,function(e){var f=c(e.target);if(f.is(a))return d.apply(f,arguments)})}})})(jQuery);
-;// ------------- JQUERY APPEAR ---------------------------------------------- //
+;
+
+// ------------- JQUERY APPEAR ---------------------------------------------- //
 // ============ https://github.com/morr/jquery.appear ====================== //
 // -------------------------------------------------------------------------- //
 

page-music.php

@@ -4,147 +4,132 @@ Template Name: Music
 */
 
 get_header(); ?>
-<style media="screen" type="text/css">
-.albums {
-  position: relative;
-}
-.albums:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-.album {
-  float: left;
-  height: auto;
-  position: relative;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
-  -moz-transition: -moz-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
-  -ms-transition: -ms-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
-  -o-transition: -o-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
-  transition: transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
-  -webkit-perspective: 600px;
-  perspective: 600px;
-}
-.album img {
-  width: 100%;
-  height: auto;
-}
-.album h1, .album h2, .album h3 {
-  font-size: 13px;
-  line-height: 15px;
-}
-.album .front, .album .back {
-  float: none;
-  width: 100%;
-  height: auto;
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-  -moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-  -ms-transition: -ms-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-  -o-transition: -o-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
-}
-.album .front {
-  z-index: 1;
-  -webkit-transform: rotateY(0deg);
-  -moz-transform: rotateY(0deg);
-  -ms-transform: rotateY(0deg);
-  -o-transform: rotateY(0deg);
-  transform: rotateY(0deg);
-}
-.album .front .alpha {
-  -webkit-transition: opacity 0.4s ease-in-out;
-  -moz-transition: opacity 0.4s ease-in-out;
-  -ms-transition: opacity 0.4s ease-in-out;
-  -o-transition: opacity 0.4s ease-in-out;
-  transition: opacity 0.4s ease-in-out;
-  display: block;
-  content: '';
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: rgba(255, 255, 255, 0.75);
-  opacity: 0;
-}
-.album .back {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  text-align: center;
-  font-family: sans-serif;
-  padding: 10px;
-  opacity: 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-transform: rotateY(-180deg);
-  -moz-transform: rotateY(-180deg);
-  -ms-transform: rotateY(-180deg);
-  -o-transform: rotateY(-180deg);
-  transform: rotateY(-180deg);
-}
-.album.flip {
-  -webkit-transform: scale(1.1, 1.1);
-  -moz-transform: scale(1.1, 1.1);
-  -ms-transform: scale(1.1, 1.1);
-  -o-transform: scale(1.1, 1.1);
-  transform: scale(1.1, 1.1);
-  z-index: 10;
-}
-.album.flip .front {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  -ms-transform: rotateY(180deg);
-  -o-transform: rotateY(180deg);
-  transform: rotateY(180deg);
-}
-.album.flip .front .alpha {
-  opacity: 1;
-}
-.album.flip .back {
-  z-index: 2;
-  opacity: 1;
-  -webkit-transform: rotateY(0deg);
-  -moz-transform: rotateY(0deg);
-  -ms-transform: rotateY(0deg);
-  -o-transform: rotateY(0deg);
-  transform: rotateY(0deg);
-}
-.album {
-  width: 20%;
-  -webkit-text-size-adjust: none;
-}
-@media screen and (max-width: 768px) {
-  .album h1, .album h2, .album h3 {
-    font-size: 13px;
-    line-height: 15px;
-  }
-  .album {
-    width: 25%;
-  }
-}
-@media screen and (min-width: 992px) {
-  .album h1, .album h2, .album h3 {
-    font-size: 15px;
-    line-height: 17px;
-  }
-}
-</style>
 
 	<div class="container">
 		<article id="content" class="single" role="main">
 			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-				<div class="entry-content">
-					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
+				<div id="music" class="entry-content">
+					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">Music</a></h2>
 					<?php the_content(); ?>
+					<div class="row">
+						<div class="col-sm-4">
+						<p>&nbsp;</p>
+						</div>
+						<div class="col-sm-4">
+						</div>
+						<div class="col-sm-4">
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-2">
+							<h5 class="cm-type"><em>Averages:</em></h5>
+						</div>
+						<div class="col-sm-2">
+							<h5 class="cm-type"><em>Types:</em></h5>
+						</div>
+						<div class="col-sm-4">
+						</div>
+						<div class="col-sm-4">
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-2">
+							
+							<ul class="list-group">
+								<li class="list-group-item active">Tracks</li>
+									<li class='list-group-item'>Year<span class='badge'>7151</span></li>
+									<li class='list-group-item'>Month<span class='badge'>687</span></li>
+									<li class='list-group-item'>Day<span class='badge'>37</span></li>
+								</li>
+							</ul>
+							<ul class="list-group">
+								<li class="list-group-item active">Albums</li>
+									<li class='list-group-item'>Year<span class='badge'>160</span></li>
+									<li class='list-group-item'>Month<span class='badge'>11</span></li>
+								</li>
+							</ul>
+						</div>
+						<div class="col-sm-2">		
+							<div id="key">
+
+							</div>
+						</div>
+						<div class="col-sm-4">
+							<div class="music-types">
+								<canvas id="typechart" width="300" height="300"></canvas>
+							</div>
+						</div>
+						<div class="col-sm-4">
+							<div class="music-typed">
+								<canvas id="artchart" width="300" height="300"></canvas>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
+							<h5 class="cm-type"><em>By Month:</em></h5>
+							<div class="timeline">
+								<canvas id="timechart" width="900" height="400"></canvas>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
+							<div id="music-notes">
+								<p><small><sup>*</sup>Note: 12 Categories is limiting. Bluegrass is country, Rhythm and Blues includes Fats Domino and Mary J. Blige. Peter Tosh is World music. Brian Eno is somtimes ambient and sometimes electronic. I tagged alot of pop music as electronic when I hear very few real instruments. I also noticed that because pop songs are shorter there are much more plays.  I capped off the plays below at 200. </small></p>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
+							<div id="music-notes">
+							<p>&nbsp;</p>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
+							<div id="linechart"></div>
+						</div>
+					</div>
+
+					<div class="row">
+						<div class="col-sm-4">
+							<h5 class="cm-type"><em>Recent</em></h5>
+							<ul class="list-group">
+								<div class="recent"></div>
+							</ul>
+						</div>
+						<div class="col-sm-4">
+							<h5 class="cm-type"><em>Top Artists - Last Week</em></h5>
+							<ul class="list-group">
+								<div class="wartists"></div>
+							</ul>
+						</div>
+						<div class="col-sm-4">
+							<h5 class="cm-type"><em>Top Tracks - Last Week</em></h5>
+							<ul class="list-group">
+								<div class="wtracks"></div>
+							</ul>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-4">
+							<h5 class="cm-type"><em>Top Artists - Last 6 Months</em></h5>
+							<ul class="list-group">
+								<div class="artists"></div>
+							</ul>
+						</div>
+						<div class="col-sm-8">
+							<h5 class="cm-type"><em>Top Tracks - Last 6 Months</em></h5>
+							<ul class="list-group">
+								<div class="tracks"></div>
+							</ul>
+						</div>
+					</div>
+					
+					<h5 class="cm-type"><em>Top 200 Albums From the Last Year</em></h5>
 					<div class="albums"></div>
 				</div>
 			</div>

style.css

@@ -126,6 +126,9 @@ body {
 .georgia {
 	font-family: Georgia, Times, "Times New Roman", serif;
 }
+.helvetica {
+	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+}
 * {
 	-webkit-font-smoothing: antialiased !important;
 	text-rendering: optimizeLegibility !important;
@@ -1901,10 +1904,171 @@ img.me {
     width: 92%;
   }
 }
-
 form .actions button{
 	margin: 20px 0;
 }
 
 
+/*============================================
+					Music 
+==============================================*/
+.albums {
+  position: relative;
+}
+.albums:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.album {
+  float: left;
+  height: auto;
+  position: relative;
+  font-size: 12px;
+  -webkit-transition: -webkit-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -moz-transition: -moz-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -ms-transition: -ms-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -o-transition: -o-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  transition: transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -webkit-perspective: 600px;
+  perspective: 600px;
+}
+.album img {
+  width: 100%;
+  height: auto;
+}
+.album h1, .album h2, .album h3 {
+  font-size: 13px;
+  line-height: 15px;
+}
+.album .front, .album .back {
+  float: none;
+  width: 100%;
+  height: auto;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -ms-transition: -ms-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -o-transition: -o-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+}
+.album .front {
+  z-index: 1;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+.album .front .alpha {
+  -webkit-transition: opacity 0.4s ease-in-out;
+  -moz-transition: opacity 0.4s ease-in-out;
+  -ms-transition: opacity 0.4s ease-in-out;
+  -o-transition: opacity 0.4s ease-in-out;
+  transition: opacity 0.4s ease-in-out;
+  display: block;
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.85);
+  opacity: 0;
+}
+.album .back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  text-align: center;
+  font-family: sans-serif;
+  padding: 10px;
+  opacity: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  -o-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}
+.album.flip {
+  -webkit-transform: scale(1.1, 1.1);
+  -moz-transform: scale(1.1, 1.1);
+  -ms-transform: scale(1.1, 1.1);
+  -o-transform: scale(1.1, 1.1);
+  transform: scale(1.1, 1.1);
+  z-index: 10;
+}
+.album.flip .front {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+.album.flip .front .alpha {
+  opacity: 1;
+}
+.album.flip .back {
+  z-index: 2;
+  opacity: 1;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+.album {
+  width: 20%;
+  -webkit-text-size-adjust: none;
+}
+.timeline {
+	margin: 10px 20px 24px;
+}
+#music li.list-group-item {
+	padding: 5px 15px;
+	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+	font-size: 12px;
+}
+#music.entry-content ul {
+	margin:0 0 24px;
+}
+@media screen and (max-width: 768px) {
+  .album h1, .album h2, .album h3 {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .album {
+    width: 25%;
+  }
+}
+@media screen and (min-width: 992px) {
+  .album h1, .album h2, .album h3 {
+    font-size: 15px;
+    line-height: 17px;
+  }
+}
+.doughnut-legend li span {
+	display: block;
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+	float: left;
+	margin-top: 4px;
+	margin-right: 8px;
+}
 
+.doughnut-legend {
+	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	font-size: 14px;
+	margin-top : 20px;
+}