Skip to content

Instantly share code, notes, and snippets.

@leonardosantos
Created August 10, 2014 03:38
Show Gist options
  • Save leonardosantos/f0172e9bf53690be2df4 to your computer and use it in GitHub Desktop.
Save leonardosantos/f0172e9bf53690be2df4 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en" ng-app="gamethemesongs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Game Theme Songs">
<meta name="author" content="GameThemeSongs">
<title>GameThemeSongs</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="/restazero/loading-bar.min.css" rel="stylesheet">
<style>
@media (min-width: 960px) {
.container{
max-width: 960px;
}
}
.banner{
height: 243px;
background: url(//i.imgur.com/PvmrSf8.jpg);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52844405-1', 'auto');
ga('send', 'pageview');
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="/restazero/loading-bar.min.js"></script>
<script type="text/javascript">
angular
.module("gamethemesongs", ['chieffancypants.loadingBar'])
.factory('audio',function ($document, $sce) {
var audioElement = $document[0].createElement('audio');
return {
audioElement: audioElement,
play: function(filename) {
audioElement.src = $sce.trustAsResourceUrl(filename);
audioElement.play();
}
}
})
.controller("Search", function($scope, $http, $sce, audio){
$scope.result = [];
$scope.submit = function(){
if ($scope.filter && $scope.filter.trim().length)
$http.get('//restazero.herokuapp.com/gamethemesongs/?name~=' + $scope.filter,
{headers: {'Accept': 'application/vnd.collection+json'}})
.success(function(result){
$scope.result = result.collection.items;
})
.error(function(){
$scope.result = null;
});
};
$scope.audio = audio;
});
</script>
</head>
<body>
<div class="container" ng-controller="Search">
<div class="col-lg-12">
<a href="http://www.gamethemesongs.com/">
<div class="banner"></div>
</a>
<p>
<form ng-submit="submit()">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input class="form-control" type="text" autofocus
placeholder="Regex" ng-model="filter"/>
<span class="input-group-btn" title="search">
<button class="btn btn-primary" type="submit">
<i class="glyphicon glyphicon-search"></i>
Go
</button>
</span>
</div>
</form>
</p>
<div class="alert alert-warning" ng-if="!result">
<center>
<h4>
<i class="glyphicon glyphicon-warning"></i>
Not found
</h4>
</center>
</div>
<center>
{{playing}}
</center>
<div class="panel panel-default" ng-if="result">
<div class="panel-heading">
<span class="pull-right text-muted">{{result.length}}</span>
Results
</div>
<div class="panel-body">
<ul>
<li ng-repeat="item in result">
<span ng-click="playing = item.data.name;audio.play(item.data.url)"
class="pull-right" title="play" ng-class="{'text-danger':playing==item.data.name}">
<i class="glyphicon glyphicon-volume-up"></i>
</span>
<a href="{{item.data.url}}" target="_blank">
{{item.data.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment