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> | ||||
							
								
								
									
										
											BIN
										
									
								
								public/images/loader.gif
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								public/images/loader.gif
									
									
									
									
									
										Normal file
									
								
							
										
											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; | ||||
| } | ||||
							
								
								
									
										77
									
								
								public/javascripts/beathaven/ajax.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								public/javascripts/beathaven/ajax.js
									
									
									
									
									
										Normal 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; | ||||
| 	}); | ||||
| }) | ||||
| @ -7,7 +7,7 @@ var beathaven = { | ||||
| 	init: function () { | ||||
| 		this.drawInterface(); | ||||
| 		this.adjustSizes(); | ||||
| 		loadSearchPage(); | ||||
| 		Ajax.detectStartPage(); | ||||
| 	}, | ||||
| 	drawInterface: function() { | ||||
| 	}, | ||||
| @ -54,33 +54,3 @@ 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> | ||||
| 
 | ||||
| */ | ||||
							
								
								
									
										19
									
								
								public/javascripts/jquery/jquery.contentchange.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								public/javascripts/jquery/jquery.contentchange.js
									
									
									
									
									
										Normal 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); | ||||
| 		} | ||||
| 	}; | ||||
| })(); | ||||
| @ -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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user