glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

eslint updates for GlobalUI.js

Browse source
This commit is contained in:
Devin Howard 2016-09-30 00:05:49 +08:00
parent 2f0b0f39e5
commit 3b8199aac6
1 changed files with 302 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

612
frontend/src/Metamaps/GlobalUI.js
View file

@ -1,4 +1,4 @@
/* global Metamaps, $, Hogan, Bloodhound */ /* global Metamaps, $, Hogan, Bloodhound, CanvasLoader */
import Active from './Active' import Active from './Active'
import Create from './Create' import Create from './Create'
import Filter from './Filter' import Filter from './Filter'
@ -14,44 +14,44 @@ const GlobalUI = {
notifyTimeout: null, notifyTimeout: null,
lightbox: null, lightbox: null,
init: function () { init: function () {
var self = GlobalUI; var self = GlobalUI
self.Search.init(); self.Search.init()
self.CreateMap.init(); self.CreateMap.init()
self.Account.init(); self.Account.init()
if ($('#toast').html().trim()) self.notifyUser($('#toast').html()) if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
//bind lightbox clicks // bind lightbox clicks
$('.openLightbox').click(function (event) { $('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open')); self.openLightbox($(this).attr('data-open'))
event.preventDefault(); event.preventDefault()
return false; return false
}); })
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox); $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
// initialize global backbone models and collections // initialize global backbone models and collections
if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper); if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper)
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []; var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []; var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : []; var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : []
var mapperCollection = []; var mapperCollection = []
var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' }; var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
if (Metamaps.Maps.Mapper) { if (Metamaps.Maps.Mapper) {
mapperCollection = Metamaps.Maps.Mapper.models; mapperCollection = Metamaps.Maps.Mapper.models
mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id; mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id
} }
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []; var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []; var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' }); Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' }); Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, {id: 'starred', sortBy: 'updated_at' }); Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
// 'Mapper' refers to another mapper // 'Mapper' refers to another mapper
Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj); Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj)
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' }); Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' }); Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
}, },
showDiv: function (selector) { showDiv: function (selector) {
$(selector).show() $(selector).show()
@ -65,261 +65,252 @@ const GlobalUI = {
}, 200, 'easeInCubic', function () { $(this).hide() }) }, 200, 'easeInCubic', function () { $(this).hide() })
}, },
openLightbox: function (which) { openLightbox: function (which) {
var self = GlobalUI; var self = GlobalUI
$('.lightboxContent').hide(); $('.lightboxContent').hide()
$('#' + which).show(); $('#' + which).show()
self.lightbox = which; self.lightbox = which
$('#lightbox_overlay').show(); $('#lightbox_overlay').show()
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px'; var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px'
// animate the content in from the bottom // animate the content in from the bottom
$('#lightbox_main').animate({ $('#lightbox_main').animate({
'top': '50%', 'top': '50%',
'margin-top': heightOfContent 'margin-top': heightOfContent
}, 200, 'easeOutCubic'); }, 200, 'easeOutCubic')
// fade the black overlay in // fade the black overlay in
$('#lightbox_screen').animate({ $('#lightbox_screen').animate({
'opacity': '0.42' 'opacity': '0.42'
}, 200); }, 200)
if (which == "switchMetacodes") { if (which === 'switchMetacodes') {
Create.isSwitchingSet = true; Create.isSwitchingSet = true
} }
}, },
closeLightbox: function (event) { closeLightbox: function (event) {
var self = GlobalUI; var self = GlobalUI
if (event) event.preventDefault(); if (event) event.preventDefault()
// animate the lightbox content offscreen // animate the lightbox content offscreen
$('#lightbox_main').animate({ $('#lightbox_main').animate({
'top': '100%', 'top': '100%',
'margin-top': '0' 'margin-top': '0'
}, 200, 'easeInCubic'); }, 200, 'easeInCubic')
// fade the black overlay out // fade the black overlay out
$('#lightbox_screen').animate({ $('#lightbox_screen').animate({
'opacity': '0.0' 'opacity': '0.0'
}, 200, function () { }, 200, function () {
$('#lightbox_overlay').hide(); $('#lightbox_overlay').hide()
}); })
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map'); if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map')
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map'); if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map')
if (Create && Create.isSwitchingSet) { if (Create && Create.isSwitchingSet) {
Create.cancelMetacodeSetSwitch(); Create.cancelMetacodeSetSwitch()
} }
self.lightbox = null; self.lightbox = null
}, },
notifyUser: function (message, leaveOpen) { notifyUser: function (message, leaveOpen) {
var self = GlobalUI; var self = GlobalUI
$('#toast').html(message) $('#toast').html(message)
self.showDiv('#toast') self.showDiv('#toast')
clearTimeout(self.notifyTimeOut); clearTimeout(self.notifyTimeOut)
if (!leaveOpen) { if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () { self.notifyTimeOut = setTimeout(function () {
self.hideDiv('#toast') self.hideDiv('#toast')
}, 8000); }, 8000)
} }
}, },
clearNotify: function() { clearNotify: function () {
var self = GlobalUI; var self = GlobalUI
clearTimeout(self.notifyTimeOut); clearTimeout(self.notifyTimeOut)
self.hideDiv('#toast') self.hideDiv('#toast')
}, },
shareInvite: function(inviteLink) { shareInvite: function (inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink); window.prompt('To copy the invite link, press: Ctrl+C, Enter', inviteLink)
} }
} }
GlobalUI.CreateMap = { GlobalUI.CreateMap = {
newMap: null, newMap: null,
emptyMapForm: "", emptyMapForm: '',
emptyForkMapForm: "", emptyForkMapForm: '',
topicsToMap: [], topicsToMap: [],
synapsesToMap: [], synapsesToMap: [],
init: function () { init: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
self.bindFormEvents(); self.bindFormEvents()
self.emptyMapForm = $('#new_map').html();
self.emptyMapForm = $('#new_map').html()
}, },
bindFormEvents: function () { bindFormEvents: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) { $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function (event) {
if (event.keyCode === 13) self.submit() if (event.keyCode === 13) self.submit()
}) })
$('.new_map button.cancel').unbind().bind('click', function (event) { $('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault(); event.preventDefault()
GlobalUI.closeLightbox(); GlobalUI.closeLightbox()
}); })
$('.new_map button.submitMap').unbind().bind('click', self.submit); $('.new_map button.submitMap').unbind().bind('click', self.submit)
// bind permission changer events on the createMap form // bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission); $('.permIcon').unbind().bind('click', self.switchPermission)
}, },
closeSuccess: function () { closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){ $('#mapCreatedSuccess').fadeOut(300, function () {
$(this).remove(); $(this).remove()
}); })
}, },
generateSuccessMessage: function (id) { generateSuccessMessage: function (id) {
var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"; var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"
stringStart += id; stringStart += id
stringStart += "' onclick='GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"; stringStart += "' onclick='GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"
stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "; stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "
var page = Active.Map ? 'map' : 'page'; var page = Active.Map ? 'map' : 'page'
var stringEnd = "</a></div>"; var stringEnd = '</a></div>'
return stringStart + page + stringEnd; return stringStart + page + stringEnd
}, },
switchPermission: function () { switchPermission: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
self.newMap.set('permission', $(this).attr('data-permission')); self.newMap.set('permission', $(this).attr('data-permission'))
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected')
$(this).find('.mapPermIcon').addClass('selected'); $(this).find('.mapPermIcon').addClass('selected')
var permText = $(this).find('.tip').html(); var permText = $(this).find('.tip').html()
$(this).parents('.new_map').find('.permText').html(permText); $(this).parents('.new_map').find('.permText').html(permText)
}, },
submit: function (event) { submit: function (event) {
if (event) event.preventDefault(); if (event) event.preventDefault()
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
if (GlobalUI.lightbox === 'forkmap') { if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap); self.newMap.set('topicsToMap', self.topicsToMap)
self.newMap.set('synapsesToMap', self.synapsesToMap); self.newMap.set('synapsesToMap', self.synapsesToMap)
} }
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
var $form = $(formId); var $form = $(formId)
self.newMap.set('name', $form.find('#map_name').val()); self.newMap.set('name', $form.find('#map_name').val())
self.newMap.set('desc', $form.find('#map_desc').val()); self.newMap.set('desc', $form.find('#map_desc').val())
if (self.newMap.get('name').length===0){ if (self.newMap.get('name').length === 0) {
self.throwMapNameError(); self.throwMapNameError()
return; return
} }
self.newMap.save(null, { self.newMap.save(null, {
success: self.success success: self.success
// TODO add error message // TODO add error message
}); })
GlobalUI.closeLightbox(); GlobalUI.closeLightbox()
GlobalUI.notifyUser('Working...'); GlobalUI.notifyUser('Working...')
}, },
throwMapNameError: function () { throwMapNameError: function () {
var self = GlobalUI.CreateMap;
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
var $form = $(formId); var $form = $(formId)
var message = $("<div class='feedback_message'>Please enter a map name...</div>"); var message = $("<div class='feedback_message'>Please enter a map name...</div>")
$form.find('#map_name').after(message); $form.find('#map_name').after(message)
setTimeout(function(){ setTimeout(function () {
message.fadeOut('fast', function(){ message.fadeOut('fast', function () {
message.remove(); message.remove()
}); })
}, 5000); }, 5000)
}, },
success: function (model) { success: function (model) {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
// push the new map onto the collection of 'my maps'
//push the new map onto the collection of 'my maps' Metamaps.Maps.Mine.add(model)
Metamaps.Maps.Mine.add(model);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId);
GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id));
GlobalUI.clearNotify()
$('#wrapper').append(self.generateSuccessMessage(model.id))
}, },
reset: function (id) { reset: function (id) {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap
var form = $('#' + id); var form = $('#' + id)
if (id === "fork_map") { if (id === 'fork_map') {
self.topicsToMap = []; self.topicsToMap = []
self.synapsesToMap = []; self.synapsesToMap = []
form.html(self.emptyForkMapForm); form.html(self.emptyForkMapForm)
} } else {
else { form.html(self.emptyMapForm)
form.html(self.emptyMapForm);
} }
self.bindFormEvents(); self.bindFormEvents()
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
return false; return false
}, }
} }
GlobalUI.Account = { GlobalUI.Account = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function () {
var self = GlobalUI.Account; var self = GlobalUI.Account
$('.sidebarAccountIcon').click(self.toggleBox); $('.sidebarAccountIcon').click(self.toggleBox)
$('.sidebarAccountBox').click(function(event){ $('.sidebarAccountBox').click(function (event) {
event.stopPropagation(); event.stopPropagation()
}); })
$('body').click(self.close); $('body').click(self.close)
}, },
toggleBox: function (event) { toggleBox: function (event) {
var self = GlobalUI.Account; var self = GlobalUI.Account
if (self.isOpen) self.close(); if (self.isOpen) self.close()
else self.open(); else self.open()
event.stopPropagation(); event.stopPropagation()
}, },
open: function () { open: function () {
var self = GlobalUI.Account; var self = GlobalUI.Account
Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
Filter.close()
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide')
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {
self.changing = true; self.changing = true
$('.sidebarAccountBox').fadeIn(200, function () { $('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false; self.changing = false
self.isOpen = true; self.isOpen = true
$('.sidebarAccountBox #user_email').focus(); $('.sidebarAccountBox #user_email').focus()
}); })
} }
}, },
close: function () { close: function () {
var self = GlobalUI.Account; var self = GlobalUI.Account
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide'); $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide')
if (!self.changing) { if (!self.changing) {
self.changing = true; self.changing = true
$('.sidebarAccountBox #user_email').blur(); $('.sidebarAccountBox #user_email').blur()
$('.sidebarAccountBox').fadeOut(200, function () { $('.sidebarAccountBox').fadeOut(200, function () {
self.changing = false; self.changing = false
self.isOpen = false; self.isOpen = false
}); })
} }
} }
} }
@ -333,31 +324,33 @@ GlobalUI.Search = {
changing: false, changing: false,
optionsInitialized: false, optionsInitialized: false,
init: function () { init: function () {
var self = GlobalUI.Search; var self = GlobalUI.Search
var loader = new CanvasLoader('searchLoading'); // TODO does this overlap with Metamaps.Loading?
loader.setColor('#4fb5c0'); // default is '#000000' // devin sez: I'd like to remove Metamaps.Loading from the rails code
loader.setDiameter(24); // default is 40 var loader = new CanvasLoader('searchLoading')
loader.setDensity(41); // default is 40 loader.setColor('#4fb5c0') // default is '#000000'
loader.setRange(0.9); // default is 1.3 loader.setDiameter(24) // default is 40
loader.show(); // Hidden by default loader.setDensity(41) // default is 40
loader.setRange(0.9) // default is 1.3
loader.show() // Hidden by default
// bind the hover events // bind the hover events
$(".sidebarSearch").hover(function () { $('.sidebarSearch').hover(function () {
self.open() self.open()
}, function () { }, function () {
self.close(800, false) self.close(800, false)
}); })
$('.sidebarSearchIcon').click(function (e) { $('.sidebarSearchIcon').click(function (e) {
$('.sidebarSearchField').focus(); $('.sidebarSearchField').focus()
}); })
$('.sidebarSearch').click(function (e) { $('.sidebarSearch').click(function (e) {
e.stopPropagation(); e.stopPropagation()
}); })
$('body').click(function (e) { $('body').click(function (e) {
self.close(0, false); self.close(0, false)
}); })
// open if the search is closed and user hits ctrl+/ // open if the search is closed and user hits ctrl+/
// close if they hit ESC // close if they hit ESC
@ -365,281 +358,280 @@ GlobalUI.Search = {
switch (e.which) { switch (e.which) {
case 191: case 191:
if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) { if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
self.open(true); // true for focus self.open(true) // true for focus
} }
break; break
case 27: case 27:
if (self.isOpen) { if (self.isOpen) {
self.close(0, true); self.close(0, true)
} }
break; break
default: default:
break; //console.log(e.which); break // console.log(e.which)
} }
}); })
self.startTypeahead(); self.startTypeahead()
}, },
lock: function() { lock: function () {
var self = GlobalUI.Search; var self = GlobalUI.Search
self.locked = true; self.locked = true
}, },
unlock: function() { unlock: function () {
var self = GlobalUI.Search; var self = GlobalUI.Search
self.locked = false; self.locked = false
}, },
open: function (focus) { open: function (focus) {
var self = GlobalUI.Search; var self = GlobalUI.Search
clearTimeout(self.timeOut); clearTimeout(self.timeOut)
if (!self.isOpen && !self.changing && !self.locked) { if (!self.isOpen && !self.changing && !self.locked) {
self.changing = true; self.changing = true
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '400px' width: '400px'
}, 300, function () { }, 300, function () {
if (focus) $('.sidebarSearchField').focus(); if (focus) $('.sidebarSearchField').focus()
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({ $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 10px 3px 10px', padding: '7px 10px 3px 10px',
width: '380px' width: '380px'
}); })
self.changing = false; self.changing = false
self.isOpen = true; self.isOpen = true
}); })
} }
}, },
close: function (closeAfter, bypass) { close: function (closeAfter, bypass) {
// for now // for now
return return
var self = GlobalUI.Search; var self = GlobalUI.Search
self.timeOut = setTimeout(function () { self.timeOut = setTimeout(function () {
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) { if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() === '')) {
self.changing = true; self.changing = true
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({ $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 0 3px 0', padding: '7px 0 3px 0',
width: '400px' width: '400px'
}); })
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '0' width: '0'
}, 300, function () { }, 300, function () {
$('.sidebarSearchField').typeahead('val', ''); $('.sidebarSearchField').typeahead('val', '')
$('.sidebarSearchField').blur(); $('.sidebarSearchField').blur()
self.changing = false; self.changing = false
self.isOpen = false; self.isOpen = false
}); })
} }
}, closeAfter); }, closeAfter)
}, },
startTypeahead: function () { startTypeahead: function () {
var self = GlobalUI.Search; var self = GlobalUI.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 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 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 mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>'
var topics = { var topics = {
name: 'topics', name: 'topics',
limit: 9999, limit: 9999,
display: function(s) { return s.label; }, display: s => s.label,
templates: { templates: {
notFound: function(s) { notFound: function (s) {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({ return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: "No results", value: 'No results',
label: "No results", label: 'No results',
typeImageURL: Metamaps.Erb['icons/wildcard.png'], typeImageURL: Metamaps.Erb['icons/wildcard.png'],
rtype: "noresult" rtype: 'noresult'
}); })
}, },
header: topicheader, header: topicheader,
suggestion: function(s) { suggestion: function (s) {
return Hogan.compile($('#topicSearchTemplate').html()).render(s); return Hogan.compile($('#topicSearchTemplate').html()).render(s)
}, }
}, },
source: new Bloodhound({ source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/topics', url: '/search/topics',
prepare: function(query, settings) { prepare: function (query, settings) {
settings.url += '?term=' + query; settings.url += '?term=' + query
if (Active.Mapper && self.limitTopicsToMe) { if (Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString(); settings.url += '&user=' + Active.Mapper.id.toString()
} }
return settings; return settings
}, }
}, }
}), })
}; }
var maps = { var maps = {
name: 'maps', name: 'maps',
limit: 9999, limit: 9999,
display: function(s) { return s.label; }, display: s => s.label,
templates: { templates: {
notFound: function(s) { notFound: function (s) {
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({ return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
value: "No results", value: 'No results',
label: "No results", label: 'No results',
rtype: "noresult" rtype: 'noresult'
}); })
}, },
header: mapheader, header: mapheader,
suggestion: function(s) { suggestion: function (s) {
return Hogan.compile($('#mapSearchTemplate').html()).render(s); return Hogan.compile($('#mapSearchTemplate').html()).render(s)
}, }
}, },
source: new Bloodhound({ source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/maps', url: '/search/maps',
prepare: function(query, settings) { prepare: function (query, settings) {
settings.url += '?term=' + query; settings.url += '?term=' + query
if (Active.Mapper && self.limitMapsToMe) { if (Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString(); settings.url += '&user=' + Active.Mapper.id.toString()
} }
return settings; return settings
}, }
}, }
}), })
}; }
var mappers = { var mappers = {
name: 'mappers', name: 'mappers',
limit: 9999, limit: 9999,
display: function(s) { return s.label; }, display: s => s.label,
templates: { templates: {
notFound: function(s) { notFound: function (s) {
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({ return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
value: "No results", value: 'No results',
label: "No results", label: 'No results',
rtype: "noresult", rtype: 'noresult',
profile: Metamaps.Erb['user.png'] profile: Metamaps.Erb['user.png']
}); })
}, },
header: mapperheader, header: mapperheader,
suggestion: function(s) { suggestion: function (s) {
return Hogan.compile($('#mapperSearchTemplate').html()).render(s); return Hogan.compile($('#mapperSearchTemplate').html()).render(s)
}, }
}, },
source: new Bloodhound({ source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/mappers?term=%QUERY', url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY', wildcard: '%QUERY'
}, }
}), })
}; }
// Take all that crazy setup data and put it together into one beautiful typeahead call! // Take all that crazy setup data and put it together into one beautiful typeahead call!
$('.sidebarSearchField').typeahead( $('.sidebarSearchField').typeahead(
{ {
highlight: true, highlight: true
}, },
[topics, maps, mappers] [topics, maps, mappers]
); )
//Set max height of the search results box to prevent it from covering bottom left footer // Set max height of the search results box to prevent it from covering bottom left footer
$('.sidebarSearchField').bind('typeahead:render', function (event) { $('.sidebarSearchField').bind('typeahead:render', function (event) {
self.initSearchOptions(); self.initSearchOptions()
self.hideLoader(); self.hideLoader()
var h = $(window).height(); var h = $(window).height()
$(".tt-dropdown-menu").css('max-height', h - 100); $('.tt-dropdown-menu').css('max-height', h - 100)
if (self.limitTopicsToMe) { if (self.limitTopicsToMe) {
$('#limitTopicsToMe').prop('checked', true); $('#limitTopicsToMe').prop('checked', true)
} }
if (self.limitMapsToMe) { if (self.limitMapsToMe) {
$('#limitMapsToMe').prop('checked', true); $('#limitMapsToMe').prop('checked', true)
} }
}); })
$(window).resize(function () { $(window).resize(function () {
var h = $(window).height(); var h = $(window).height()
$(".tt-dropdown-menu").css('max-height', h - 100); $('.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 // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick); $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick)
// don't do it, if they clicked on a 'addToMap' button // don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function (event) { $('.sidebarSearch button.addToMap').click(function (event) {
event.stopPropagation(); event.stopPropagation()
}); })
// make sure that when you click on 'limit to me' or 'toggle section' it works // make sure that when you click on 'limit to me' or 'toggle section' it works
$('.sidebarSearchField.tt-input').keyup(function(){ $('.sidebarSearchField.tt-input').keyup(function () {
if ($('.sidebarSearchField.tt-input').val() === '') { if ($('.sidebarSearchField.tt-input').val() === '') {
self.hideLoader(); self.hideLoader()
} else { } else {
self.showLoader(); self.showLoader()
} }
}); })
}, },
handleResultClick: function (event, datum, dataset) { handleResultClick: function (event, datum, dataset) {
var self = GlobalUI.Search; var self = GlobalUI.Search
self.hideLoader(); self.hideLoader()
if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) { if (['topic', 'map', 'mapper'].indexOf(datum.rtype) !== -1) {
self.close(0, true); self.close(0, true)
if (datum.rtype == "topic") { if (datum.rtype === 'topic') {
Router.topics(datum.id); Router.topics(datum.id)
} else if (datum.rtype == "map") { } else if (datum.rtype === 'map') {
Router.maps(datum.id); Router.maps(datum.id)
} else if (datum.rtype == "mapper") { } else if (datum.rtype === 'mapper') {
Router.explore("mapper", datum.id); Router.explore('mapper', datum.id)
} }
} }
}, },
initSearchOptions: function () { initSearchOptions: function () {
var self = GlobalUI.Search; var self = GlobalUI.Search
function toggleResultSet(set) { function toggleResultSet (set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult'); var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult')
if (s.is(':visible')) { if (s.is(':visible')) {
s.hide(); s.hide()
$(this).removeClass('minimizeResults').addClass('maximizeResults'); $(this).removeClass('minimizeResults').addClass('maximizeResults')
} else { } else {
s.show(); s.show()
$(this).removeClass('maximizeResults').addClass('minimizeResults'); $(this).removeClass('maximizeResults').addClass('minimizeResults')
} }
} }
$('.limitToMe').unbind().bind("change", function (e) { $('.limitToMe').unbind().bind('change', function (e) {
if ($(this).attr('id') == 'limitTopicsToMe') { if ($(this).attr('id') === 'limitTopicsToMe') {
self.limitTopicsToMe = !self.limitTopicsToMe; self.limitTopicsToMe = !self.limitTopicsToMe
} }
if ($(this).attr('id') == 'limitMapsToMe') { if ($(this).attr('id') === 'limitMapsToMe') {
self.limitMapsToMe = !self.limitMapsToMe; self.limitMapsToMe = !self.limitMapsToMe
} }
// set the value of the search equal to itself to retrigger the // set the value of the search equal to itself to retrigger the
// autocomplete event // autocomplete event
var searchQuery = $('.sidebarSearchField.tt-input').val(); var searchQuery = $('.sidebarSearchField.tt-input').val()
$(".sidebarSearchField").typeahead('val', '') $('.sidebarSearchField').typeahead('val', '')
.typeahead('val', searchQuery); .typeahead('val', searchQuery)
}); })
// when the user clicks minimize section, hide the results for that section // when the user clicks minimize section, hide the results for that section
$('.minimizeMapperResults').unbind().click(function (e) { $('.minimizeMapperResults').unbind().click(function (e) {
toggleResultSet.call(this, 'mappers'); toggleResultSet.call(this, 'mappers')
}); })
$('.minimizeTopicResults').unbind().click(function (e) { $('.minimizeTopicResults').unbind().click(function (e) {
toggleResultSet.call(this, 'topics'); toggleResultSet.call(this, 'topics')
}); })
$('.minimizeMapResults').unbind().click(function (e) { $('.minimizeMapResults').unbind().click(function (e) {
toggleResultSet.call(this, 'maps'); toggleResultSet.call(this, 'maps')
}); })
}, },
hideLoader: function () { hideLoader: function () {
$('#searchLoading').hide(); $('#searchLoading').hide()
}, },
showLoader: function () { showLoader: function () {
$('#searchLoading').show(); $('#searchLoading').show()
} }
} }