localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Ajax improvements, js reorganized

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/routes.rb
View File

@ -57,5 +57,5 @@ Beathaven::Application.routes.draw do
# match ':controller(/:action(/:id(.:format)))' # match ':controller(/:action(/:id(.:format)))'
match 'artist/autocomplete' => 'artist#autocomplete' match 'artist/autocomplete' => 'artist#autocomplete'
match 'artist(/:name)' => 'artist#data' match 'artist/(:name)/' => 'artist#data', :constraints => { :name => /[^\/]*/ }
end end

19
public/demo/index.html
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/misc.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/player.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" /> <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/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/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/jquery/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/jquery/jquery.contentchange.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/ajax.js"></script> <script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/layout.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/pages.js"></script> <script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/ajax.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/audio.js"></script> <script type="text/javascript" charset="utf-8" src="/javascripts/beathaven/pages.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/player.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="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/vkontakte.js"></script>
</head> </head>
<body> <body>

3
public/demo/search.html
View File

@ -7,7 +7,7 @@ $('#search_field').autocomplete({
width: 415, // Ширина списка width: 415, // Ширина списка
zIndex: 9999, // z-index списка zIndex: 9999, // z-index списка
deferRequestBy: 150, // Задержка запроса (мсек) deferRequestBy: 150, // Задержка запроса (мсек)
onSelect: loadArtistData onSelect: Ajax.loadArtistData
}); });
$('#search_field').focus(); $('#search_field').focus();
</script> </script>
@ -16,4 +16,5 @@ $('#search_field').focus();
<input type="text" id="search_field"/> <input type="text" id="search_field"/>
<input type="submit" value="Search" id="search_button"/> <input type="submit" value="Search" id="search_button"/>
</form> </form>
<img src="/images/loader.gif" alt="" />
</div> </div>

BIN
public/images/loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

50
public/javascripts/ajax.js
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;
}

77
public/javascripts/beathaven/ajax.js Normal file
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;
});
})

0
public/javascripts/audio.js → public/javascripts/beathaven/audio.js
View File

2
public/javascripts/layout.js → public/javascripts/beathaven/layout.js
View File

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

32
public/javascripts/pages.js → public/javascripts/beathaven/pages.js
View File

@ -53,34 +53,4 @@ var Pages = {
$('#data-container').html('').append(artist_info).append(albums_info).scrollbar(); $('#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
public/javascripts/player.js → public/javascripts/beathaven/player.js
View File

0
public/javascripts/vkontakte.js → public/javascripts/beathaven/vkontakte.js
View File

0
public/javascripts/jquery.autocomplete.js → public/javascripts/jquery/jquery.autocomplete.js
View File

19
public/javascripts/jquery/jquery.contentchange.js Normal file
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);
}
};
})();

0
public/javascripts/jquery.min.js → public/javascripts/jquery/jquery.min.js vendored
View File

0
public/javascripts/jquery.scroll.js → public/javascripts/jquery/jquery.scroll.js
View File

0
public/javascripts/application.js → public/javascripts/rails/application.js
View File

0
public/javascripts/controls.js → public/javascripts/rails/controls.js vendored
View File

0
public/javascripts/dragdrop.js → public/javascripts/rails/dragdrop.js vendored
View File

0
public/javascripts/effects.js → public/javascripts/rails/effects.js vendored
View File

0
public/javascripts/prototype.js → public/javascripts/rails/prototype.js vendored
View File

0
public/javascripts/rails.js → public/javascripts/rails/rails.js
View File

8
public/stylesheets/misc.css
View File

@ -92,6 +92,10 @@
border: #CCC 1px solid; border: #CCC 1px solid;
border-radius: 3px; border-radius: 3px;
} }
#search-container img {
margin-top: 30px;
display: none;
}
.autocomplete { .autocomplete {
margin: 4px 0 0 -1px; margin: 4px 0 0 -1px;
@ -107,12 +111,12 @@
} }
#error_page { #error_page {
position: absolute; position: relative;
width: 600px; width: 600px;
text-align: center; text-align: center;
top: 100px; top: 100px;
left: 50%; left: 50%;
margin-left: -600px; margin-left: -300px;
} }
#error_page h1 { #error_page h1 {
font-size: 150px; font-size: 150px;