Ajax improvements, js reorganized
This commit is contained in:
parent
3858267585
commit
4a3abb6991
|
@ -57,5 +57,5 @@ Beathaven::Application.routes.draw do
|
|||
# match ':controller(/:action(/:id(.:format)))'
|
||||
|
||||
match 'artist/autocomplete' => 'artist#autocomplete'
|
||||
match 'artist(/:name)' => 'artist#data'
|
||||
match 'artist/(:name)/' => 'artist#data', :constraints => { :name => /[^\/]*/ }
|
||||
end
|
||||
|
|
|
@ -7,16 +7,17 @@
|
|||
<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" />
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery.scroll.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery.autocomplete.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/layout.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/ajax.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/pages.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/audio.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/player.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery/jquery.scroll.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/jquery/jquery.autocomplete.js"></script>
|
||||
<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/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>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/vkontakte.js"></script>
|
||||
<script type="text/javascript" charset="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/javascripts/vkontakte.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ $('#search_field').autocomplete({
|
|||
width: 415, // Ширина списка
|
||||
zIndex: 9999, // z-index списка
|
||||
deferRequestBy: 150, // Задержка запроса (мсек)
|
||||
onSelect: loadArtistData
|
||||
onSelect: Ajax.loadArtistData
|
||||
});
|
||||
$('#search_field').focus();
|
||||
</script>
|
||||
|
@ -16,4 +16,5 @@ $('#search_field').focus();
|
|||
<input type="text" id="search_field"/>
|
||||
<input type="submit" value="Search" id="search_button"/>
|
||||
</form>
|
||||
<img src="/images/loader.gif" alt="" />
|
||||
</div>
|
Binary file not shown.
After Width: | Height: | Size: 7.3 KiB |
|
@ -1,50 +0,0 @@
|
|||
function loadArtistData(name) {
|
||||
setArchor('/artist/'+ name +'/');
|
||||
$.get('/artist/'+ name +'/', function(data){
|
||||
if (typeof data.error != 'undefined') {
|
||||
if (data.error == 'loading') {
|
||||
loadArtistData(name);
|
||||
} else if (data.error == 404) {
|
||||
load404Page();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Pages.renderArtist(data);
|
||||
})
|
||||
}
|
||||
function loadSearchPage() {
|
||||
setArchor('/search/');
|
||||
$.get('/demo/search.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
}
|
||||
function loadWheePage() {
|
||||
$.get('/demo/whee.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
}
|
||||
function load404Page() {
|
||||
$.get('/demo/404.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
}
|
||||
|
||||
$(function(){
|
||||
$('a.data.artist').live('click', function(){
|
||||
loadArtistData($(this).html());
|
||||
return false;
|
||||
});
|
||||
$('.search').live('click', function(){
|
||||
loadSearchPage();
|
||||
return false;
|
||||
});
|
||||
$('#search_form').live('submit', function(){
|
||||
$('.autocomplete-container').remove();
|
||||
loadArtistData($('#search_field').val());
|
||||
return false;
|
||||
});
|
||||
})
|
||||
|
||||
function setArchor(anchor) {
|
||||
window.location = '#'+ anchor;
|
||||
}
|
|
@ -0,0 +1,77 @@
|
|||
var Ajax = {
|
||||
loadArtistData: function(name) {
|
||||
$('#search-container input').attr('disabled', 'disabled').blur();
|
||||
$('#search-container img').show();
|
||||
name = name.replace(' ', '+');
|
||||
Ajax.setArchor('/artist/'+ name +'/');
|
||||
$.get('/artist/'+ name +'/', function(data){
|
||||
if (typeof data.error != 'undefined') {
|
||||
if (data.error == 'loading') {
|
||||
Ajax.loadArtistData(name);
|
||||
} else if (data.error == 404) {
|
||||
Ajax.load404Page();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Pages.renderArtist(data);
|
||||
})
|
||||
},
|
||||
|
||||
loadSearchPage: function() {
|
||||
Ajax.setArchor('/search/');
|
||||
$.get('/demo/search.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
loadWheePage: function() {
|
||||
$.get('/demo/whee.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
load404Page: function() {
|
||||
$.get('/demo/404.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
setArchor: function(anchor) {
|
||||
window.location = '#'+ anchor;
|
||||
},
|
||||
|
||||
getAnchor: function() {
|
||||
var tmp = window.location.href.split('#');
|
||||
if (typeof tmp[1] !== 'undefined') {
|
||||
return tmp[1];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
detectStartPage: function() {
|
||||
if (m = this.getAnchor().match(/\/artist\/(.+)\//)) {
|
||||
this.loadArtistData(m[1]);
|
||||
} else if (this.getAnchor() === '' || this.getAnchor().match(/\/search\//)) {
|
||||
this.loadSearchPage();
|
||||
} else {
|
||||
this.load404Page();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
$('a.data.artist').live('click', 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;
|
||||
});
|
||||
})
|
|
@ -7,7 +7,7 @@ var beathaven = {
|
|||
init: function () {
|
||||
this.drawInterface();
|
||||
this.adjustSizes();
|
||||
loadSearchPage();
|
||||
Ajax.detectStartPage();
|
||||
},
|
||||
drawInterface: function() {
|
||||
},
|
|
@ -53,34 +53,4 @@ var Pages = {
|
|||
|
||||
$('#data-container').html('').append(artist_info).append(albums_info).scrollbar();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
<div class="albums">
|
||||
<div class="album">
|
||||
<h2 class="name">Get Born</h2>
|
||||
<div class="pic">
|
||||
<img src="pics/getborn.jpg" alt="Get Born by Jet" width="250" />
|
||||
<div class="add-album">Add to playlist</div>
|
||||
</div>
|
||||
<div class="tracklist">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="trackname">Last Chance</div>
|
||||
<div class="length">1:52</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="trackname">Are You Gonna Be My Girl</div>
|
||||
<div class="length">3:34</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="trackname">Rollover DJ</div>
|
||||
<div class="length">3:17</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
*/
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
(function(){
|
||||
var interval;
|
||||
jQuery.event.special.contentchange = {
|
||||
setup: function() {
|
||||
var self = this,
|
||||
$this = $(this),
|
||||
$originalContent = $this.text();
|
||||
interval = setInterval(function() {
|
||||
if ($originalContent != $this.text()) {
|
||||
$originalContent = $this.text();
|
||||
jQuery.event.handle.call(self, {type:'contentchange'});
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
teardown: function() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
})();
|
|
@ -92,6 +92,10 @@
|
|||
border: #CCC 1px solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#search-container img {
|
||||
margin-top: 30px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
margin: 4px 0 0 -1px;
|
||||
|
@ -107,12 +111,12 @@
|
|||
}
|
||||
|
||||
#error_page {
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
margin-left: -600px;
|
||||
margin-left: -300px;
|
||||
}
|
||||
#error_page h1 {
|
||||
font-size: 150px;
|
||||
|
|
Loading…
Reference in New Issue