From 4f3bd75bfd6c0f2b7fd2676aa679607233b5e3d8 Mon Sep 17 00:00:00 2001 From: magnolia-fan Date: Thu, 8 Sep 2011 14:56:10 +0400 Subject: [PATCH] Almost working search --- app/assets/javascripts/ajax.coffee | 1 - app/assets/javascripts/beathaven.coffee | 23 ++- .../javascripts/jquery/jquery.autocomplete.js | 38 ++--- app/assets/javascripts/search.coffee | 132 +++++++++--------- app/assets/stylesheets/application.css | 2 +- app/assets/stylesheets/search.scss | 94 +++---------- app/views/layouts/application.html.haml | 19 ++- 7 files changed, 136 insertions(+), 173 deletions(-) diff --git a/app/assets/javascripts/ajax.coffee b/app/assets/javascripts/ajax.coffee index 5c3d52e..c02e7eb 100644 --- a/app/assets/javascripts/ajax.coffee +++ b/app/assets/javascripts/ajax.coffee @@ -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 diff --git a/app/assets/javascripts/beathaven.coffee b/app/assets/javascripts/beathaven.coffee index 0e98075..00fc9fe 100644 --- a/app/assets/javascripts/beathaven.coffee +++ b/app/assets/javascripts/beathaven.coffee @@ -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') diff --git a/app/assets/javascripts/jquery/jquery.autocomplete.js b/app/assets/javascripts/jquery/jquery.autocomplete.js index 4a50374..ee29683 100644 --- a/app/assets/javascripts/jquery/jquery.autocomplete.js +++ b/app/assets/javascripts/jquery/jquery.autocomplete.js @@ -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; - $('
').appendTo('body'); + //$('
').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 ? '
' + f(s, this.data[i], v) + '
'); 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])); }, diff --git a/app/assets/javascripts/search.coffee b/app/assets/javascripts/search.coffee index 05092ad..646f687 100644 --- a/app/assets/javascripts/search.coffee +++ b/app/assets/javascripts/search.coffee @@ -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 ' -
  • - ' +item.name+ ' - ' +(if item.desc? then '
    '+item.desc+'' else '')+ ' -
    • ' - $('.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 ' +
  • + ' +item.name+ ' + ' +(if item.desc? then '
    '+item.desc+'' else '')+ ' +
    • ' + $('.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 ' -
    - -
    ' - 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 ' +
    + +
    ' + 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 = '
    '+$('.subpages .search-container').html()+'
    ' - _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 = '
    '+$('.subpages .search-container').html()+'
    ' + _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; \ No newline at end of file + _ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/'); + false; \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7611fcd..255138d 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,7 +10,7 @@ *= require player * require pulldown * require pulldown -* require search +*= require search * require settings * require textpage diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss index a02ac7f..a4395d8 100644 --- a/app/assets/stylesheets/search.scss +++ b/app/assets/stylesheets/search.scss @@ -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; + } + } + } + } } \ No newline at end of file diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 4ec1e51..2b8f23b 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -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 + + +
    + + \ No newline at end of file