localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

Almost working search

This commit is contained in:
magnolia-fan 2011-09-08 14:56:10 +04:00
parent 1b02272d81
commit 4f3bd75bfd
7 changed files with 136 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/ajax.coffee
View File

@ -20,7 +20,6 @@ class window.Ajax
else if data.status == 'loading_failed' else if data.status == 'loading_failed'
_search.hideSpinner() _search.hideSpinner()
_search.showError() _search.showError()
_beathaven.redrawScrollbar()
else else
_ajax.setArchor '/artist/' +name+ '/' _ajax.setArchor '/artist/' +name+ '/'
_pages.renderArtist data _pages.renderArtist data

23
app/assets/javascripts/beathaven.coffee
View File

@ -1,6 +1,6 @@
# Registering global objects # Registering global objects
window._beathaven = null window._beathaven = null
window._session = 1 window._session = null
window._vkontakte = null window._vkontakte = null
window._ajax = null window._ajax = null
window._player = null window._player = null
@ -36,8 +36,24 @@ class BeatHaven
window._settings = new Settings() window._settings = new Settings()
this.setupAutocomplete()
false false
setupAutocomplete: ->
$('#search').first().bh_autocomplete
serviceUrl: '/artist/autocomplete' # Страница для обработки запросов автозаполнения
minChars: 2 # Минимальная длина запроса для срабатывания автозаполнения
delimiter: /(,|;)\s*/ # Разделитель для нескольких запросов, символ или регулярное выражение
maxHeight: 400 # Максимальная высота списка подсказок, в пикселях
width: 415 # Ширина списка
zIndex: 9999 # z-index списка
deferRequestBy: 500 # Задержка запроса (мсек)
containerId: 'autocomplete-container'
containerItemsId: 'autocomplete-items'
onSelect: ->
_ajax.loadArtistData $('#search').first().val()
adjustSizes: -> adjustSizes: ->
$('.data-container').height $(window).height() - $('.header-container').height() - $('.pulldown').height() $('.data-container').height $(window).height() - $('.header-container').height() - $('.pulldown').height()
$('.data-container').width $(window).width() - $('.player').width() $('.data-container').width $(window).width() - $('.player').width()
@ -65,11 +81,6 @@ class BeatHaven
, 500 , 500
false false
redrawScrollbar: ->
$('.data-container').html $('.data-container').find('.inner').first()
$('.data-container').scrollbar()
false
localizeHTML: (obj, lang) -> localizeHTML: (obj, lang) ->
unless obj? unless obj?
obj = $('body') obj = $('body')

38
app/assets/javascripts/jquery/jquery.autocomplete.js
View File

@ -38,6 +38,8 @@
this.ignoreValueChange = false; this.ignoreValueChange = false;
this.serviceUrl = options.serviceUrl; this.serviceUrl = options.serviceUrl;
this.isLocal = false; this.isLocal = false;
this.containerId = options.containerId;
this.containerItemsId = options.containerItemsId;
this.options = { this.options = {
autoSubmit: false, autoSubmit: false,
minChars: 1, minChars: 1,
@ -79,10 +81,13 @@
if (!this.options.width) { this.options.width = this.el.width(); } if (!this.options.width) { this.options.width = this.el.width(); }
this.mainContainerId = 'AutocompleteContainter_' + uid; this.mainContainerId = 'AutocompleteContainter_' + uid;
this.mainContainerId = this.containerId;
$('<div class="autocomplete-container" id="' + this.mainContainerId + '" style="position:absolute;z-index:9999;"><div class="autocomplete-w1"><div class="autocomplete" id="' + autocompleteElId + '" style="display:none; width:300px;"></div></div></div>').appendTo('body'); //$('<div class="autocomplete-container" id="' + this.mainContainerId + '" style="position:absolute;z-index:9999;"><div class="autocomplete-w1"><div class="autocomplete" id="' + autocompleteElId + '" style="display:none; width:300px;"></div></div></div>').appendTo('body');
this.container = $('#' + autocompleteElId); this.container = $('#' + autocompleteElId);
this.container_items = $('#'+ this.containerItemsId);
this.fixPosition(); this.fixPosition();
if (window.opera) { if (window.opera) {
this.el.keypress(function(e) { me.onKeyPress(e); }); this.el.keypress(function(e) { me.onKeyPress(e); });
@ -101,8 +106,8 @@
this.isLocal = true; this.isLocal = true;
if($.isArray(o.lookup)){ o.lookup = { suggestions:o.lookup, data:[] }; } if($.isArray(o.lookup)){ o.lookup = { suggestions:o.lookup, data:[] }; }
} }
$('#'+this.mainContainerId).css({ zIndex:o.zIndex }); //$('#'+this.mainContainerId).css({ zIndex:o.zIndex });
this.container.css({ maxHeight: o.maxHeight + 'px', width:o.width }); //this.container.css({ maxHeight: o.maxHeight + 'px', width:o.width });
}, },
clearCache: function(){ clearCache: function(){
@ -120,7 +125,7 @@
fixPosition: function() { fixPosition: function() {
var offset = this.el.offset(); var offset = this.el.offset();
$('#' + this.mainContainerId).css({ top: (offset.top + this.el.innerHeight()) + 'px', left: offset.left + 'px' }); //$('#' + this.mainContainerId).css({ top: (offset.top + this.el.innerHeight()) + 'px', left: offset.left + 'px' });
}, },
enableKillerFn: function() { enableKillerFn: function() {
@ -266,7 +271,7 @@
this.hide(); this.hide();
return; return;
} }
var me, len, div, f, v, i, s, mOver, mClick; var me, len, div, f, v, i, s, mOver, mClick;
me = this; me = this;
len = this.suggestions.length; len = this.suggestions.length;
@ -274,22 +279,19 @@
v = this.getQuery(this.currentValue); v = this.getQuery(this.currentValue);
mOver = function(xi) { return function() { me.activate(xi); }; }; mOver = function(xi) { return function() { me.activate(xi); }; };
mClick = function(xi) { return function() { me.select(xi); }; }; mClick = function(xi) { return function() { me.select(xi); }; };
this.container.hide().empty(); this.container = $('#'+ this.containerId);
this.container_items = $('#'+ this.containerItemsId);
this.container_items.empty();
for (i = 0; i < len; i++) { for (i = 0; i < len; i++) {
s = this.suggestions[i]; s = this.suggestions[i];
div = $((me.selectedIndex === i ? '<div class="selected"' : '<div') + ' title="' + s + '">' + f(s, this.data[i], v) + '</div>'); div = $((me.selectedIndex === i ? '<div class="selected"' : '<div') + ' title="' + s + '">' + f(s, this.data[i], v) + '</div>');
div.mouseover(mOver(i)); div.mouseover(mOver(i));
div.click(mClick(i)); div.click(mClick(i));
this.container.append(div); this.container_items.append(div);
} }
this.enabled = true; this.enabled = true;
that = this; this.container.show();
$('.pulldown').animate({height: 250}, 'fast', function(){
that.container.show();
_beathaven.adjustSizes()
_beathaven.redrawScrollbar()
});
}, },
processResponse: function(text) { processResponse: function(text) {
@ -311,7 +313,7 @@
activate: function(index) { activate: function(index) {
var divs, activeItem; var divs, activeItem;
divs = this.container.children(); divs = this.container_items.children();
// Clear previous selection: // Clear previous selection:
if (this.selectedIndex !== -1 && divs.length > this.selectedIndex) { if (this.selectedIndex !== -1 && divs.length > this.selectedIndex) {
$(divs.get(this.selectedIndex)).removeClass(); $(divs.get(this.selectedIndex)).removeClass();
@ -347,7 +349,7 @@
moveUp: function() { moveUp: function() {
if (this.selectedIndex === -1) { return; } if (this.selectedIndex === -1) { return; }
if (this.selectedIndex === 0) { if (this.selectedIndex === 0) {
this.container.children().get(0).className = ''; this.container_items.children().get(0).className = '';
this.selectedIndex = -1; this.selectedIndex = -1;
this.el.val(this.currentValue); this.el.val(this.currentValue);
return; return;
@ -364,12 +366,12 @@
var activeItem, offsetTop, upperBound, lowerBound; var activeItem, offsetTop, upperBound, lowerBound;
activeItem = this.activate(i); activeItem = this.activate(i);
offsetTop = activeItem.offsetTop; offsetTop = activeItem.offsetTop;
upperBound = this.container.scrollTop(); upperBound = this.container_items.scrollTop();
lowerBound = upperBound + this.options.maxHeight - 25; lowerBound = upperBound + this.options.maxHeight - 25;
if (offsetTop < upperBound) { if (offsetTop < upperBound) {
this.container.scrollTop(offsetTop); this.container_items.scrollTop(offsetTop);
} else if (offsetTop > lowerBound) { } else if (offsetTop > lowerBound) {
this.container.scrollTop(offsetTop - this.options.maxHeight + 25); this.container_items.scrollTop(offsetTop - this.options.maxHeight + 25);
} }
this.el.val(this.getValue(this.suggestions[i])); this.el.val(this.getValue(this.suggestions[i]));
}, },

132
app/assets/javascripts/search.coffee
View File

@ -1,75 +1,75 @@
class window.Search class window.Search
pics: [] pics: []
showSpinner: -> showSpinner: ->
$('.search-container input').first().attr(disabled: 'disabled').blur() $('#search').val("").attr(disabled: 'disabled').blur()
$('.search-container img').first().show() $('.search-container img').first().show()
$('.autocomplete-container').hide() $('#autocomplete-container').hide()
$('.artist_loading.failed').first().hide() $('.artist_loading.failed').first().hide()
this.hideSuggestions() this.hideSuggestions()
false false
hideSpinner: -> hideSpinner: ->
$('.search-container input').first().removeAttr 'disabled' $('#search').removeAttr 'disabled'
$('.search_field').first().focus() $('.search_field').first().focus()
$('.search-container img').first().hide() $('.search-container img').first().hide()
false false
showSuggestions: (values) -> showSuggestions: (values) ->
for item in values for item in values
$('.suggestions ul').append ' $('.suggestions ul').append '
<li> <li>
<a class="data artist">' +item.name+ '</a> <a class="data artist">' +item.name+ '</a>
' +(if item.desc? then '<br/><span>'+item.desc+'</span>' else '')+ ' ' +(if item.desc? then '<br/><span>'+item.desc+'</span>' else '')+ '
</li>' </li>'
$('.suggestions').show() $('.suggestions').show()
false false
hideSuggestions: -> hideSuggestions: ->
$('.suggestions ul li').remove() $('.suggestions ul li').remove()
$('.suggestions').hide() $('.suggestions').hide()
false false
showArtistPics: (pics) -> showArtistPics: (pics) ->
$('.artist_loading.ok, .artist_pics').show() $('.artist_loading.ok, .artist_pics').show()
for pic in pics for pic in pics
if @pics.indexOf(pic) == -1 if @pics.indexOf(pic) == -1
@pics.push(pic); @pics.push(pic);
$('.artist_pics').append ' $('.artist_pics').append '
<div class="pic"> <div class="pic">
<img src="' +pic+ '" alt=""/> <img src="' +pic+ '" alt=""/>
</div>' </div>'
false false
showError: -> showError: ->
$('.artist_loading.ok, .artist_pics').hide() $('.artist_loading.ok, .artist_pics').hide()
$('.artist_loading.failed').show() $('.artist_loading.failed').show()
@pics = [] @pics = []
$('.search').live 'click', -> $('.search').live 'click', ->
if $('.pulldown').css('display') is 'none' if $('.pulldown').css('display') is 'none'
$('.pulldown').width $('.data-container').width() - 50 $('.pulldown').width $('.data-container').width() - 50
$('.pulldown').height 300#38 $('.pulldown').height 300#38
$('.pulldown').slideDown 'fast', -> $('.pulldown').slideDown 'fast', ->
data = '<div class="search-container">'+$('.subpages .search-container').html()+'</div>' data = '<div class="search-container">'+$('.subpages .search-container').html()+'</div>'
_pages.renderSearch _beathaven.localizeHTML $(data) _pages.renderSearch _beathaven.localizeHTML $(data)
_beathaven.adjustSizes() _beathaven.adjustSizes()
_beathaven.redrawScrollbar() _beathaven.redrawScrollbar()
else else
$('.pulldown').slideUp 'fast', -> $('.pulldown').slideUp 'fast', ->
$('.pulldown').height 0 $('.pulldown').height 0
_beathaven.adjustSizes() _beathaven.adjustSizes()
_beathaven.redrawScrollbar() _beathaven.redrawScrollbar()
false false
$('.search_form').live 'submit', -> $('.search_form').live 'submit', ->
$('.autocomplete-container').remove() $('.autocomplete-container').remove()
_ajax.loadArtistData $('.search_field').first().val() _ajax.loadArtistData $('.search_field').first().val()
false false
$('.suggestions a').live 'click', -> $('.suggestions a').live 'click', ->
$('.search_field').first().val $(this).text() $('.search_field').first().val $(this).text()
false false
$('.data.artist').live 'click', -> $('.data.artist').live 'click', ->
_ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/'); _ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/');
false; false;

2
app/assets/stylesheets/application.css
View File

@ -10,7 +10,7 @@
*= require player *= require player
* require pulldown * require pulldown
* require pulldown * require pulldown
* require search *= require search
* require settings * require settings
* require textpage * require textpage

94
app/assets/stylesheets/search.scss
View File

@ -1,75 +1,21 @@
@import "rounded"; #autocomplete-container {
.inner {
.search-container { .start {
width: 425px; height: 3px;
padding: 0 5px; padding: 0;
background-color: #ffffff;
#search_form { border-bottom: none;
#search_field { }
width: 300px; .content {
font-size: 24px; padding: 0 0 3px 0;
padding: 4px; div {
border: #CCC 1px solid; padding: 6px 10px;
@include rounded(3); background-color: #ffffff;
} &.selected {
} color: #202020;
background-color: #e0e0e0;
.spinner { }
display: none; }
margin: 20px 0 0 175px; }
} }
.artist_loading {
display: none;
margin: 15px 0;
font-size: 18;
}
.artist_pics {
display: none;
.pic {
float: left;
width: 47px;
height: 47px;
overflow: hidden;
margin: 0 5px 5px 0;
}
img {
width: 47px;
}
}
.suggestions {
display: none;
width: 415px;
text-align: left;
font-size: 24px;
div {
margin: 15px 0;
}
ul {
li {
display: block;
width: auto;
margin-bottom: 6px;
.data {
&.artist {
color: #04F;
border-bottom: #04F 1px dotted;
cursor: pointer;
}
}
span {
font-size: 14px;
font-style: italic;
}
}
}
}
} }

19
app/views/layouts/application.html.haml
View File

@ -15,14 +15,14 @@
.topbar-inner .topbar-inner
.container .container
%h3 %h3
%a{ :href => "#" } BeatHaven %a{ :href => "#/" } BeatHaven
%ul.nav %ul.nav
%li %li
%a{ :href => "#" } Blog %a{ :href => "http://blog.beathaven.org/", :"data-ls" => "NEWS" } Blog
%li %li
%a{ :href => "#" } About %a.about{ :href => "#/about/" } About
%form{ :action => "" } %form{ :action => "" }
%input{ :type => "text", :placeholder => "Search" } %input#search{ :type => "text", :placeholder => "Search" }
%ul.nav.secondary-nav %ul.nav.secondary-nav
%li.dropdown %li.dropdown
%a.dropdown-toggle{ :href => "#" } chez %a.dropdown-toggle{ :href => "#" } chez
@ -34,11 +34,11 @@
%a{ :href => "#" } Logout %a{ :href => "#" } Logout
.popover-wrapper .popover-wrapper
.popover.below .popover.below#autocomplete-container
.arrow .arrow
.inner .inner
%h3.title Foo Fighters %h3.title.start
.content .content#autocomplete-items
.container#main .container#main
.row .row
@ -78,3 +78,8 @@
.artist-name Foo Fighters .artist-name Foo Fighters
Long Road to Ruin Long Road to Ruin
%td.song-duration 4:29 %td.song-duration 4:29
<!-- Yandex.Metrika counter -->
<script type="text/javascript">var yaParams = {};</script><div style="display:none;"><script type="text/javascript">(function(w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter7596904 = new Ya.Metrika({id:7596904, enableAll: true,params:window.yaParams||{ }}); } catch(e) { } }); })(window, "yandex_metrika_callbacks");</script></div><script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script><noscript><div><img src="//mc.yandex.ru/watch/7596904" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->