1
0
Fork 0

Ajax improvements, js reorganized

This commit is contained in:
magnolia-fan 2011-06-16 03:06:46 +04:00
parent 3858267585
commit 4a3abb6991
22 changed files with 117 additions and 95 deletions

View File

@ -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

View File

@ -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>

View File

@ -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>

BIN
public/images/loader.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@ -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;
}

View File

@ -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;
});
})

View File

@ -7,7 +7,7 @@ var beathaven = {
init: function () {
this.drawInterface();
this.adjustSizes();
loadSearchPage();
Ajax.detectStartPage();
},
drawInterface: function() {
},

View File

@ -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>
*/
}

View File

@ -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);
}
};
})();

View File

@ -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;