Almost working search
This commit is contained in:
magnolia-fan
parent
1b02272d81
commit
4f3bd75bfd
|
|
@ -20,7 +20,6 @@ class window.Ajax
|
|||
else if data.status == 'loading_failed'
|
||||
_search.hideSpinner()
|
||||
_search.showError()
|
||||
_beathaven.redrawScrollbar()
|
||||
else
|
||||
_ajax.setArchor '/artist/' +name+ '/'
|
||||
_pages.renderArtist data
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Registering global objects
|
||||
window._beathaven = null
|
||||
window._session = 1
|
||||
window._session = null
|
||||
window._vkontakte = null
|
||||
window._ajax = null
|
||||
window._player = null
|
||||
|
|
@ -36,8 +36,24 @@ class BeatHaven
|
|||
|
||||
window._settings = new Settings()
|
||||
|
||||
this.setupAutocomplete()
|
||||
|
||||
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: ->
|
||||
$('.data-container').height $(window).height() - $('.header-container').height() - $('.pulldown').height()
|
||||
$('.data-container').width $(window).width() - $('.player').width()
|
||||
|
|
@ -65,11 +81,6 @@ class BeatHaven
|
|||
, 500
|
||||
false
|
||||
|
||||
redrawScrollbar: ->
|
||||
$('.data-container').html $('.data-container').find('.inner').first()
|
||||
$('.data-container').scrollbar()
|
||||
false
|
||||
|
||||
localizeHTML: (obj, lang) ->
|
||||
unless obj?
|
||||
obj = $('body')
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@
|
|||
this.ignoreValueChange = false;
|
||||
this.serviceUrl = options.serviceUrl;
|
||||
this.isLocal = false;
|
||||
this.containerId = options.containerId;
|
||||
this.containerItemsId = options.containerItemsId;
|
||||
this.options = {
|
||||
autoSubmit: false,
|
||||
minChars: 1,
|
||||
|
|
@ -79,10 +81,13 @@
|
|||
|
||||
if (!this.options.width) { this.options.width = this.el.width(); }
|
||||
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_items = $('#'+ this.containerItemsId);
|
||||
|
||||
this.fixPosition();
|
||||
if (window.opera) {
|
||||
this.el.keypress(function(e) { me.onKeyPress(e); });
|
||||
|
|
@ -101,8 +106,8 @@
|
|||
this.isLocal = true;
|
||||
if($.isArray(o.lookup)){ o.lookup = { suggestions:o.lookup, data:[] }; }
|
||||
}
|
||||
$('#'+this.mainContainerId).css({ zIndex:o.zIndex });
|
||||
this.container.css({ maxHeight: o.maxHeight + 'px', width:o.width });
|
||||
//$('#'+this.mainContainerId).css({ zIndex:o.zIndex });
|
||||
//this.container.css({ maxHeight: o.maxHeight + 'px', width:o.width });
|
||||
},
|
||||
|
||||
clearCache: function(){
|
||||
|
|
@ -120,7 +125,7 @@
|
|||
|
||||
fixPosition: function() {
|
||||
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() {
|
||||
|
|
@ -266,7 +271,7 @@
|
|||
this.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var me, len, div, f, v, i, s, mOver, mClick;
|
||||
me = this;
|
||||
len = this.suggestions.length;
|
||||
|
|
@ -274,22 +279,19 @@
|
|||
v = this.getQuery(this.currentValue);
|
||||
mOver = function(xi) { return function() { me.activate(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++) {
|
||||
s = this.suggestions[i];
|
||||
div = $((me.selectedIndex === i ? '<div class="selected"' : '<div') + ' title="' + s + '">' + f(s, this.data[i], v) + '</div>');
|
||||
div.mouseover(mOver(i));
|
||||
div.click(mClick(i));
|
||||
this.container.append(div);
|
||||
this.container_items.append(div);
|
||||
}
|
||||
this.enabled = true;
|
||||
that = this;
|
||||
$('.pulldown').animate({height: 250}, 'fast', function(){
|
||||
that.container.show();
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
});
|
||||
this.container.show();
|
||||
},
|
||||
|
||||
processResponse: function(text) {
|
||||
|
|
@ -311,7 +313,7 @@
|
|||
|
||||
activate: function(index) {
|
||||
var divs, activeItem;
|
||||
divs = this.container.children();
|
||||
divs = this.container_items.children();
|
||||
// Clear previous selection:
|
||||
if (this.selectedIndex !== -1 && divs.length > this.selectedIndex) {
|
||||
$(divs.get(this.selectedIndex)).removeClass();
|
||||
|
|
@ -347,7 +349,7 @@
|
|||
moveUp: function() {
|
||||
if (this.selectedIndex === -1) { return; }
|
||||
if (this.selectedIndex === 0) {
|
||||
this.container.children().get(0).className = '';
|
||||
this.container_items.children().get(0).className = '';
|
||||
this.selectedIndex = -1;
|
||||
this.el.val(this.currentValue);
|
||||
return;
|
||||
|
|
@ -364,12 +366,12 @@
|
|||
var activeItem, offsetTop, upperBound, lowerBound;
|
||||
activeItem = this.activate(i);
|
||||
offsetTop = activeItem.offsetTop;
|
||||
upperBound = this.container.scrollTop();
|
||||
upperBound = this.container_items.scrollTop();
|
||||
lowerBound = upperBound + this.options.maxHeight - 25;
|
||||
if (offsetTop < upperBound) {
|
||||
this.container.scrollTop(offsetTop);
|
||||
this.container_items.scrollTop(offsetTop);
|
||||
} 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]));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,75 +1,75 @@
|
|||
class window.Search
|
||||
|
||||
pics: []
|
||||
|
||||
showSpinner: ->
|
||||
$('.search-container input').first().attr(disabled: 'disabled').blur()
|
||||
$('.search-container img').first().show()
|
||||
$('.autocomplete-container').hide()
|
||||
$('.artist_loading.failed').first().hide()
|
||||
this.hideSuggestions()
|
||||
false
|
||||
|
||||
hideSpinner: ->
|
||||
$('.search-container input').first().removeAttr 'disabled'
|
||||
$('.search_field').first().focus()
|
||||
$('.search-container img').first().hide()
|
||||
false
|
||||
|
||||
showSuggestions: (values) ->
|
||||
for item in values
|
||||
$('.suggestions ul').append '
|
||||
<li>
|
||||
<a class="data artist">' +item.name+ '</a>
|
||||
' +(if item.desc? then '<br/><span>'+item.desc+'</span>' else '')+ '
|
||||
</li>'
|
||||
$('.suggestions').show()
|
||||
false
|
||||
|
||||
pics: []
|
||||
|
||||
showSpinner: ->
|
||||
$('#search').val("").attr(disabled: 'disabled').blur()
|
||||
$('.search-container img').first().show()
|
||||
$('#autocomplete-container').hide()
|
||||
$('.artist_loading.failed').first().hide()
|
||||
this.hideSuggestions()
|
||||
false
|
||||
|
||||
hideSpinner: ->
|
||||
$('#search').removeAttr 'disabled'
|
||||
$('.search_field').first().focus()
|
||||
$('.search-container img').first().hide()
|
||||
false
|
||||
|
||||
showSuggestions: (values) ->
|
||||
for item in values
|
||||
$('.suggestions ul').append '
|
||||
<li>
|
||||
<a class="data artist">' +item.name+ '</a>
|
||||
' +(if item.desc? then '<br/><span>'+item.desc+'</span>' else '')+ '
|
||||
</li>'
|
||||
$('.suggestions').show()
|
||||
false
|
||||
|
||||
hideSuggestions: ->
|
||||
$('.suggestions ul li').remove()
|
||||
$('.suggestions').hide()
|
||||
false
|
||||
hideSuggestions: ->
|
||||
$('.suggestions ul li').remove()
|
||||
$('.suggestions').hide()
|
||||
false
|
||||
|
||||
showArtistPics: (pics) ->
|
||||
$('.artist_loading.ok, .artist_pics').show()
|
||||
for pic in pics
|
||||
if @pics.indexOf(pic) == -1
|
||||
@pics.push(pic);
|
||||
$('.artist_pics').append '
|
||||
<div class="pic">
|
||||
<img src="' +pic+ '" alt=""/>
|
||||
</div>'
|
||||
false
|
||||
|
||||
showError: ->
|
||||
$('.artist_loading.ok, .artist_pics').hide()
|
||||
$('.artist_loading.failed').show()
|
||||
@pics = []
|
||||
showArtistPics: (pics) ->
|
||||
$('.artist_loading.ok, .artist_pics').show()
|
||||
for pic in pics
|
||||
if @pics.indexOf(pic) == -1
|
||||
@pics.push(pic);
|
||||
$('.artist_pics').append '
|
||||
<div class="pic">
|
||||
<img src="' +pic+ '" alt=""/>
|
||||
</div>'
|
||||
false
|
||||
|
||||
showError: ->
|
||||
$('.artist_loading.ok, .artist_pics').hide()
|
||||
$('.artist_loading.failed').show()
|
||||
@pics = []
|
||||
|
||||
|
||||
$('.search').live 'click', ->
|
||||
if $('.pulldown').css('display') is 'none'
|
||||
$('.pulldown').width $('.data-container').width() - 50
|
||||
$('.pulldown').height 300#38
|
||||
$('.pulldown').slideDown 'fast', ->
|
||||
data = '<div class="search-container">'+$('.subpages .search-container').html()+'</div>'
|
||||
_pages.renderSearch _beathaven.localizeHTML $(data)
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
else
|
||||
$('.pulldown').slideUp 'fast', ->
|
||||
$('.pulldown').height 0
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
false
|
||||
if $('.pulldown').css('display') is 'none'
|
||||
$('.pulldown').width $('.data-container').width() - 50
|
||||
$('.pulldown').height 300#38
|
||||
$('.pulldown').slideDown 'fast', ->
|
||||
data = '<div class="search-container">'+$('.subpages .search-container').html()+'</div>'
|
||||
_pages.renderSearch _beathaven.localizeHTML $(data)
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
else
|
||||
$('.pulldown').slideUp 'fast', ->
|
||||
$('.pulldown').height 0
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
false
|
||||
$('.search_form').live 'submit', ->
|
||||
$('.autocomplete-container').remove()
|
||||
_ajax.loadArtistData $('.search_field').first().val()
|
||||
false
|
||||
$('.autocomplete-container').remove()
|
||||
_ajax.loadArtistData $('.search_field').first().val()
|
||||
false
|
||||
$('.suggestions a').live 'click', ->
|
||||
$('.search_field').first().val $(this).text()
|
||||
false
|
||||
$('.search_field').first().val $(this).text()
|
||||
false
|
||||
$('.data.artist').live 'click', ->
|
||||
_ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/');
|
||||
false;
|
||||
_ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/');
|
||||
false;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
*= require player
|
||||
* require pulldown
|
||||
* require pulldown
|
||||
* require search
|
||||
*= require search
|
||||
* require settings
|
||||
* require textpage
|
||||
|
||||
|
|
|
|||
|
|
@ -1,75 +1,21 @@
|
|||
@import "rounded";
|
||||
|
||||
.search-container {
|
||||
width: 425px;
|
||||
padding: 0 5px;
|
||||
|
||||
#search_form {
|
||||
#search_field {
|
||||
width: 300px;
|
||||
font-size: 24px;
|
||||
padding: 4px;
|
||||
border: #CCC 1px solid;
|
||||
@include rounded(3);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#autocomplete-container {
|
||||
.inner {
|
||||
.start {
|
||||
height: 3px;
|
||||
padding: 0;
|
||||
background-color: #ffffff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.content {
|
||||
padding: 0 0 3px 0;
|
||||
div {
|
||||
padding: 6px 10px;
|
||||
background-color: #ffffff;
|
||||
&.selected {
|
||||
color: #202020;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
.topbar-inner
|
||||
.container
|
||||
%h3
|
||||
%a{ :href => "#" } BeatHaven
|
||||
%a{ :href => "#/" } BeatHaven
|
||||
%ul.nav
|
||||
%li
|
||||
%a{ :href => "#" } Blog
|
||||
%a{ :href => "http://blog.beathaven.org/", :"data-ls" => "NEWS" } Blog
|
||||
%li
|
||||
%a{ :href => "#" } About
|
||||
%a.about{ :href => "#/about/" } About
|
||||
%form{ :action => "" }
|
||||
%input{ :type => "text", :placeholder => "Search" }
|
||||
%input#search{ :type => "text", :placeholder => "Search" }
|
||||
%ul.nav.secondary-nav
|
||||
%li.dropdown
|
||||
%a.dropdown-toggle{ :href => "#" } chez
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
%a{ :href => "#" } Logout
|
||||
|
||||
.popover-wrapper
|
||||
.popover.below
|
||||
.popover.below#autocomplete-container
|
||||
.arrow
|
||||
.inner
|
||||
%h3.title Foo Fighters
|
||||
.content
|
||||
%h3.title.start
|
||||
.content#autocomplete-items
|
||||
|
||||
.container#main
|
||||
.row
|
||||
|
|
@ -78,3 +78,8 @@
|
|||
.artist-name Foo Fighters
|
||||
Long Road to Ruin
|
||||
%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 -->
|
||||
|
||||
Loading…
Reference in New Issue