diff --git a/web/app/assets/javascripts/musician_search_filter.js.coffee b/web/app/assets/javascripts/musician_search_filter.js.coffee index b2bf616a5..de84403a2 100644 --- a/web/app/assets/javascripts/musician_search_filter.js.coffee +++ b/web/app/assets/javascripts/musician_search_filter.js.coffee @@ -13,36 +13,42 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter @helpBubble = context.JK.HelpBubbleHelper @searchResults = null @instrument_logo_map = context.JK.getInstrumentIconMap24() + init: (app) => @screenBindings = { 'beforeShow': this.beforeShow, 'afterShow': this.afterShow } - app.bindScreen('musicians', @screenBindings); - @results = $('#musician-search-filter-results-list') + app.bindScreen('musicians', @screenBindings) - $('#btn-perform-musician-search').on 'click', => + @screen = $('#musicians-screen') + @resultsContainer = @screen.find('#musician-search-filter-results-list') + @spinner = @screen.find('.paginate-wait') + + # this.registerResultsPagination() + + @screen.find('#btn-perform-musician-search').on 'click', => this.performSearch() - $('#btn-musician-search-builder').on 'click', => + @screen.find('#btn-musician-search-builder').on 'click', => this.showBuilder() - $('#btn-musician-search-reset').on 'click', => + @screen.find('#btn-musician-search-reset').on 'click', => this.resetFilter() - $('#btn-musician-search-cancel').on 'click', => + @screen.find('#btn-musician-search-cancel').on 'click', => this.cancelFilter() beforeShow: (data) => userId = data.id afterShow: () => - $('#musician-search-filter-results').show() - $('#musician-search-filter-builder').hide() + @screen.find('#musician-search-filter-results').show() + @screen.find('#musician-search-filter-builder').hide() this.getUserFilterResults() showBuilder: () => - $('#musician-search-filter-results').hide() - $('#musician-search-filter-builder').show() - $('#musician-search-filter-results-list').empty() + @screen.find('#musician-search-filter-results').hide() + @screen.find('#musician-search-filter-builder').show() + @resultsContainer.empty() renderSearchFilter: () => $.when(this.rest.getMusicianSearchFilter()).done (sFilter) => @@ -56,9 +62,9 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter studio_sessions: @searchFilter.studio_sessions concert_gigs: @searchFilter.concert_gigs - template = context.JK.fillTemplate($('#template-musician-search-filter').html(), args) + template = context.JK.fillTemplate(@screen.find('#template-musician-search-filter').html(), args) - content_root = $('#musician-search-filter-builder-form') + content_root = @screen.find('#musician-search-filter-builder-form') content_root.html template this._populateSkill() @@ -111,10 +117,10 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter this._populateSelectWithInt(@profileUtils.skillLevelMap, @searchFilter.skill_level.toString(), elem) _populateAges: () => - $('#search-filter-ages').empty() + @screen.find('#search-filter-ages').empty() ages_map = gon.musician_search_meta['ages']['map'] $.each gon.musician_search_meta['ages']['keys'], (index, key) => - ageTemplate = $('#template-search-filter-setup-ages').html() + ageTemplate = @screen.find('#template-search-filter-setup-ages').html() selected = '' ageLabel = ages_map[key] if 0 < @searchFilter.ages.length @@ -128,12 +134,12 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter id: key description: ageLabel checked: selected) - $('#search-filter-ages').append ageHtml + @screen.find('#search-filter-ages').append ageHtml _populateGenres: () => - $('#search-filter-genres').empty() + @screen.find('#search-filter-genres').empty() @rest.getGenres().done (genres) => - genreTemplate = $('#template-search-filter-setup-genres').html() + genreTemplate = @screen.find('#template-search-filter-setup-genres').html() selected = '' $.each genres, (index, genre) => if 0 < @searchFilter.genres.length @@ -148,13 +154,13 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter id: genre.id description: genre.description checked: selected) - $('#search-filter-genres').append genreHtml + @screen.find('#search-filter-genres').append genreHtml _populateInstruments: () => - $('#search-filter-instruments').empty() + @screen.find('#search-filter-instruments').empty() @rest.getInstruments().done (instruments) => $.each instruments, (index, instrument) => - instrumentTemplate = $('#template-search-filter-setup-instrument').html() + instrumentTemplate = @screen.find('#template-search-filter-setup-instrument').html() selected = '' proficiency = '1' if 0 < @searchFilter.instruments.length @@ -169,7 +175,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter description: instrument.description checked: selected ) - $('#search-filter-instruments').append instrumentHtml + @screen.find('#search-filter-instruments').append instrumentHtml profsel = '#search-filter-instruments tr[data-instrument-id="'+instrument.id+'"] select' $(profsel).val(proficiency) return true @@ -194,15 +200,15 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter vals willSearch: () => - $('#musician-search-filter-spinner').show() - $('#musician-search-filter-results-list').empty() - $('#musician-search-filter-builder').hide() - $('#musician-search-filter-results').show() + @screen.find('#musician-search-filter-spinner').show() + @resultsContainer.empty() + @screen.find('#musician-search-filter-builder').hide() + @screen.find('#musician-search-filter-results').show() didSearch: (response) => this.loadSearchFilter(response.filter_json) @searchResults = response - $('#musician-search-filter-spinner').hide() + @screen.find('#musician-search-filter-spinner').hide() this.renderMusicians() resetFilter: () => @@ -228,26 +234,26 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter @rest.postMusicianSearchFilter({ filter: JSON.stringify(@searchFilter), page: 1 }).done(this.didSearch) renderResultsHeader: () => - $('#musician-search-filter-description').html(@searchResults.description) + @screen.find('#musician-search-filter-description').html(@searchResults.description) if @searchResults.is_blank_filter - $('#btn-perform-musician-search-reset').show() + @screen.find('#btn-perform-musician-search-reset').show() else - $('#btn-perform-musician-search-reset').hide() + @screen.find('#btn-perform-musician-search-reset').hide() renderMusicians: () => this.renderResultsHeader() musicians = @searchResults.musicians len = musicians.length if 0 == len - $('#musician-search-filter-results-list-blank').show() - $('#musician-search-filter-results-list-blank').html('No results found') + @screen.find('#musician-search-filter-results-list-blank').show() + @screen.find('#musician-search-filter-results-list-blank').html('No results found') return else - $('#musician-search-filter-results-list-blank').hide() + @screen.find('#musician-search-filter-results-list-blank').hide() ii = 0 - mTemplate = $('#template-search-musician-row').html() - aTemplate = $('#template-search-musician-action-btns').html() + mTemplate = @screen.find('#template-search-musician-row').html() + aTemplate = @screen.find('#template-search-musician-action-btns').html() mVals = undefined musician = undefined renderings = '' @@ -296,7 +302,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter latency_badge: latencyBadge musician_first_name: musician['first_name'] $rendering = $(context.JK.fillTemplate(mTemplate, mVals)) - $offsetParent = @results.closest('.content') + $offsetParent = @resultsContainer.closest('.content') data = entity_type: 'musician' options = positions: [ @@ -312,12 +318,12 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter context.JK.helpBubble($('.recording-count', $rendering), 'recording-count', data, options); context.JK.helpBubble($('.session-count', $rendering), 'session-count', data, options); @helpBubble.scoreBreakdown $('.latency', $rendering), false, musician['full_score'], myAudioLatency, musician['audio_latency'], musician['score'], scoreOptions - @results.append $rendering + @resultsContainer.append $rendering $rendering.find('.biography').dotdotdot() ii++ - $('.search-m-friend').on 'click', this.friendMusician - $('.search-m-follow').on 'click', this.followMusician - $('.search-m-message').on 'click', this.messageMusician + @screen.find('.search-m-friend').on 'click', this.friendMusician + @screen.find('.search-m-follow').on 'click', this.followMusician + @screen.find('.search-m-message').on 'click', this.messageMusician context.JK.bindHoverEvents() return @@ -352,7 +358,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter data: JSON.stringify(newFollowing) processData: false success: (response) -> - # remove the orange look to indicate it's not selectable # @FIXME -- this will need to be tweaked when we allow unfollowing $('div[data-musician-id=' + newFollowing.user_id + '] .search-m-follow').removeClass('button-orange').addClass 'button-grey' + # remove the orange look to indicate it's not selectable # @FIXME -- this will need to be tweaked when we allow unfollowing @screen.find('div[data-musician-id=' + newFollowing.user_id + '] .search-m-follow').removeClass('button-orange').addClass 'button-grey' return error: app.ajaxError return @@ -372,3 +378,13 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter else 'Location Unavailable' + registerResultsPagination: => + @resultsContainer.scroll => + wintop = @resultsContainer.scrollTop() + winheight = @resultsContainer.height() + docheight = @screen.find('#musician-search-filter').height() - @screen.find('#musician-search-filter-header').height() + scrollTrigger = 0.90 + # console.log("notification scroll: wintop="+wintop+" docheight="+docheight+" winheight="+winheight+" ratio="+(wintop / (docheight - winheight))); + if (wintop / (docheight - winheight)) > scrollTrigger + paginate() + \ No newline at end of file diff --git a/web/app/views/clients/_musician_search_filter.html.slim b/web/app/views/clients/_musician_search_filter.html.slim index 77421a1d3..67e21caa1 100644 --- a/web/app/views/clients/_musician_search_filter.html.slim +++ b/web/app/views/clients/_musician_search_filter.html.slim @@ -12,8 +12,12 @@ div#musician-search-filter-description a#btn-musician-search-reset.button-grey href="#" RESET div#musician-search-filter-spinner.spinner-large - div#musician-search-filter-results-list-blank - div#musician-search-filter-results-list.content-wrapper + div#musician-search-filter-results-wrapper + div#musician-search-filter-results-list-blank + div#musician-search-filter-results-list.content-wrapper + div.paginate-wait + Fetching more results... + div.spinner-small script#template-musician-search-filter type="text/template" .field