localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Search works so-so. Done for now. Close #45, close #56

Browse Source
This commit is contained in:
magnolia-fan
2011-06-18 05:09:07 +04:00
parent 24ca64a945
commit c9ea9c6a27
10 changed files with 167 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/demo/index.html
+2
View File
@@ -4,6 +4,7 @@
<title>BetaHaven</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/layout.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/search.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/misc.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/player.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/albums.css" />
@@ -13,6 +14,7 @@
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery/jquery.contentchange.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/layout.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/ajax.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/search.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/pages.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/audio.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/player.js"></script>
public/demo/search.html
+15
View File
@@ -4,4 +4,19 @@
<input type="submit" value="Search" id="search_button"/>
</form>
<img src="/images/loader.gif" alt="" />
<div class="suggestions">
<div>Misspelled?</div>
<ul>
<li><a class="data artist">The Raconters</a></li>
<li>The Raconteurs</li>
<li>The Encounters</li>
<li>Encounters</li>
<li>The Encounter</li>
<li>Carpenters</li>
<li>The Dearhunters</li>
<li>Jamhunters</li>
<li>The Go Go Haunters</li>
<li>The Beathunters</li>
</ul>
</div>
</div>
public/javascripts/beathaven/ajax.js
+13 -17
View File
@@ -1,20 +1,25 @@
var Ajax = {
loadArtistData: function(name) {
$('#search-container input').attr('disabled', 'disabled').blur();
$('#search-container img').show();
Search.showSpinner();
name = name.split(' ').join('+');
Ajax.setArchor('/artist/'+ name +'/');
$.get('/artist/'+ name +'/', function(data){
if (typeof data.error != 'undefined') {
if (data.error == 'loading') {
if (typeof data.status != 'undefined') {
if (data.status == 'loaded') {
Ajax.loadArtistData(name);
} else if (data.error == 404) {
} else if (data.status == 'corrected') {
Ajax.loadArtistData(data.page);
} else if (data.status == 'suggestions') {
Search.hideSpinner();
Search.showSuggestions(data.values);
} else if (data.status == 'error') {
Ajax.load404Page();
}
return false;
} else {
Ajax.setArchor('/artist/'+ name +'/');
Pages.renderArtist(data);
beathaven.redrawScrollbar();
}
Pages.renderArtist(data);
beathaven.redrawScrollbar();
})
},
@@ -75,14 +80,5 @@ $(function(){
Ajax.loadArtistData($(this).html());
return false;
});
$('.search').live('click', function(){
Ajax.loadSearchPage();
return false;
});
$('#search_form').live('submit', function(){
$('.autocomplete-container').remove();
Ajax.loadArtistData($('#search_field').val());
return false;
});
$(window).bind('hashchange', Ajax.detectPage);
})
public/javascripts/beathaven/search.js
+46
View File
@@ -0,0 +1,46 @@
var Search = {
showSpinner: function() {
$('#search-container input').attr('disabled', 'disabled').blur();
$('#search-container img').show();
Search.hideSuggestions();
},
hideSpinner: function() {
$('#search-container input').removeAttr('disabled');
$('#search_field').focus();
$('#search-container img').hide();
},
showSuggestions: function(values) {
for (var i = 0; i < values.length; i++) {
$('.suggestions ul').append('\
<li>\
<a class="data artist">'+ values[i] +'</a>\
</li>\
');
}
$('.suggestions').show();
},
hideSuggestions: function() {
$('.suggestions ul li').remove();
$('.suggestions').hide();
}
}
$(function(){
$('.search').live('click', function(){
Ajax.loadSearchPage();
return false;
});
$('#search_form').live('submit', function(){
$('.autocomplete-container').remove();
Ajax.loadArtistData($('#search_field').val());
return false;
});
$('.suggestions a').live('click', function(){
$('#search_field').val($(this).text());
return false;
});
});
public/stylesheets/misc.css
-42
View File
@@ -79,48 +79,6 @@
background: #AAA;
}
#search-container {
width: 100%;
text-align: center;
margin-top: 50px;
}
#search-container #search_field {
width: 300px;
font-size: 24px;
padding: 4px;
border: #CCC 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container #search_button {
width: 100px;
font-size: 24px;
padding: 4px;
background-color: #DDD;
border: #CCC 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container img {
margin-top: 30px;
display: none;
}
.autocomplete {
margin: 4px 0 0 -1px;
}
.autocomplete div {
font-size: 24px;
padding: 6px 5px;
background-color: #FAFAFA;
margin-bottom: 1px;
}
.autocomplete div.selected {
background-color: #EAEAEA;
}
#error_page {
position: relative;
width: 600px;
public/stylesheets/search.css
+64
View File
@@ -0,0 +1,64 @@
#search-container {
width: 100%;
text-align: center;
margin-top: 50px;
}
#search-container #search_field {
width: 300px;
font-size: 24px;
padding: 4px;
border: #CCC 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container #search_button {
width: 100px;
font-size: 24px;
padding: 4px;
background-color: #DDD;
border: #CCC 1px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container img {
margin-top: 30px;
display: none;
}
.autocomplete {
margin: 4px 0 0 -1px;
}
.autocomplete div {
font-size: 24px;
padding: 6px 5px;
background-color: #FAFAFA;
margin-bottom: 1px;
}
.autocomplete div.selected {
background-color: #EAEAEA;
}
.suggestions {
display: none;
position: absolute;
left: 50%;
margin: 30px 0 0 -380px;
width: 400px;
text-align: left;
font-size: 24px;
}
.suggestions div {
margin-bottom: 20px;
}
.suggestions ul li {
display: block;
width: auto;
margin-bottom: 6px;
}
.suggestions .data.artist {
color: #04F;
border-bottom: #04F 1px dotted;
cursor: pointer;
}