frontend/src/Metamaps/GlobalUI/Search.js
/* global $, Hogan, Bloodhound, CanvasLoader */
import { browserHistory } from 'react-router'
import Active from '../Active'
const Search = {
locked: false,
isOpen: false,
limitTopicsToMe: false,
limitMapsToMe: false,
changing: false,
optionsInitialized: false,
init: function(serverData) {
var self = Search
self.wildcardIconUrl = serverData['icons/wildcard.png']
self.userIconUrl = serverData['user.png']
// this is similar to Metamaps.Loading, but it's for the search element
if (!document.getElementById('searchLoading')) return
var loader = new CanvasLoader('searchLoading')
loader.setColor('#4fb5c0') // default is '#000000'
loader.setDiameter(24) // default is 40
loader.setDensity(41) // default is 40
loader.setRange(0.9) // default is 1.3
loader.show() // Hidden by default
$('.sidebarSearchIcon').click(function(e) {
$('.sidebarSearchField').focus()
})
$('.sidebarSearch').click(function(e) {
e.stopPropagation()
})
self.startTypeahead()
},
focus: function() {
$('.sidebarSearchField').focus()
},
startTypeahead: function() {
var self = Search
var mapheader = Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>'
var topicheader = Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>'
var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>'
var topics = {
name: 'topics',
limit: 9999,
display: s => s.label,
templates: {
notFound: function(s) {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: 'No results',
label: 'No results',
typeImageURL: self.wildcardIconUrl,
rtype: 'noresult'
})
},
header: topicheader,
suggestion: function(s) {
return Hogan.compile($('#topicSearchTemplate').html()).render(s)
}
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/topics',
prepare: function(query, settings) {
settings.url += '?term=' + query
if (Active.Mapper && self.limitTopicsToMe) {
settings.url += '&user=' + Active.Mapper.id.toString()
}
return settings
}
}
})
}
var maps = {
name: 'maps',
limit: 9999,
display: s => s.label,
templates: {
notFound: function(s) {
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
value: 'No results',
label: 'No results',
rtype: 'noresult'
})
},
header: mapheader,
suggestion: function(s) {
return Hogan.compile($('#mapSearchTemplate').html()).render(s)
}
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/maps',
prepare: function(query, settings) {
settings.url += '?term=' + query
if (Active.Mapper && self.limitMapsToMe) {
settings.url += '&user=' + Active.Mapper.id.toString()
}
return settings
}
}
})
}
var mappers = {
name: 'mappers',
limit: 9999,
display: s => s.label,
templates: {
notFound: function(s) {
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
value: 'No results',
label: 'No results',
rtype: 'noresult',
profile: self.userIconUrl
})
},
header: mapperheader,
suggestion: function(s) {
return Hogan.compile($('#mapperSearchTemplate').html()).render(s)
}
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY'
}
})
}
// Take all that crazy setup data and put it together into one beautiful typeahead call!
$('.sidebarSearchField').typeahead(
{
highlight: true
},
[topics, maps, mappers]
)
// Set max height of the search results box to prevent it from covering bottom left footer
$('.sidebarSearchField').bind('typeahead:render', function(event) {
self.initSearchOptions()
self.hideLoader()
var h = $(window).height()
$('.tt-dropdown-menu').css('max-height', h - 100)
if (self.limitTopicsToMe) {
$('#limitTopicsToMe').prop('checked', true)
}
if (self.limitMapsToMe) {
$('#limitMapsToMe').prop('checked', true)
}
})
$(window).resize(function() {
var h = $(window).height()
$('.tt-dropdown-menu').css('max-height', h - 100)
})
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick)
// don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function(event) {
event.stopPropagation()
})
// make sure that when you click on 'limit to me' or 'toggle section' it works
$('.sidebarSearchField.tt-input').keyup(function() {
if ($('.sidebarSearchField.tt-input').val() === '') {
self.hideLoader()
} else {
self.showLoader()
}
})
},
handleResultClick: function(event, datum, dataset) {
var self = Search
self.hideLoader()
if (['topic', 'map', 'mapper'].indexOf(datum.rtype) !== -1) {
if (datum.rtype === 'topic') {
browserHistory.push(`/topics/${datum.id}`)
} else if (datum.rtype === 'map') {
browserHistory.push(`/maps/${datum.id}`)
} else if (datum.rtype === 'mapper') {
browserHistory.push(`/explore/mapper/${datum.id}`)
}
}
},
initSearchOptions: function() {
var self = Search
function toggleResultSet(set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult')
if (s.is(':visible')) {
s.hide()
$(this).removeClass('minimizeResults').addClass('maximizeResults')
} else {
s.show()
$(this).removeClass('maximizeResults').addClass('minimizeResults')
}
}
$('.limitToMe').unbind().bind('change', function(e) {
if ($(this).attr('id') === 'limitTopicsToMe') {
self.limitTopicsToMe = !self.limitTopicsToMe
}
if ($(this).attr('id') === 'limitMapsToMe') {
self.limitMapsToMe = !self.limitMapsToMe
}
// set the value of the search equal to itself to retrigger the
// autocomplete event
var searchQuery = $('.sidebarSearchField.tt-input').val()
$('.sidebarSearchField').typeahead('val', '')
.typeahead('val', searchQuery)
})
// when the user clicks minimize section, hide the results for that section
$('.minimizeMapperResults').unbind().click(function(e) {
toggleResultSet.call(this, 'mappers')
})
$('.minimizeTopicResults').unbind().click(function(e) {
toggleResultSet.call(this, 'topics')
})
$('.minimizeMapResults').unbind().click(function(e) {
toggleResultSet.call(this, 'maps')
})
},
hideLoader: function() {
$('#searchLoading').hide()
},
showLoader: function() {
$('#searchLoading').show()
}
}
export default Search