eslint updates for GlobalUI.js
This commit is contained in:
Devin Howard
parent
2f0b0f39e5
commit
3b8199aac6
1 changed files with 302 additions and 310 deletions
|
|
@ -1,4 +1,4 @@
|
|||
/* global Metamaps, $, Hogan, Bloodhound */
|
||||
/* global Metamaps, $, Hogan, Bloodhound, CanvasLoader */
|
||||
import Active from './Active'
|
||||
import Create from './Create'
|
||||
import Filter from './Filter'
|
||||
|
|
@ -14,44 +14,44 @@ const GlobalUI = {
|
|||
notifyTimeout: null,
|
||||
lightbox: null,
|
||||
init: function () {
|
||||
var self = GlobalUI;
|
||||
var self = GlobalUI
|
||||
|
||||
self.Search.init();
|
||||
self.CreateMap.init();
|
||||
self.Account.init();
|
||||
self.Search.init()
|
||||
self.CreateMap.init()
|
||||
self.Account.init()
|
||||
|
||||
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
|
||||
|
||||
//bind lightbox clicks
|
||||
// bind lightbox clicks
|
||||
$('.openLightbox').click(function (event) {
|
||||
self.openLightbox($(this).attr('data-open'));
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
self.openLightbox($(this).attr('data-open'))
|
||||
event.preventDefault()
|
||||
return false
|
||||
})
|
||||
|
||||
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
|
||||
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
|
||||
|
||||
// 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 sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
|
||||
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : [];
|
||||
var mapperCollection = [];
|
||||
var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
|
||||
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []
|
||||
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []
|
||||
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : []
|
||||
var mapperCollection = []
|
||||
var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
|
||||
if (Metamaps.Maps.Mapper) {
|
||||
mapperCollection = Metamaps.Maps.Mapper.models;
|
||||
mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
|
||||
mapperCollection = Metamaps.Maps.Mapper.models
|
||||
mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id
|
||||
}
|
||||
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
|
||||
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
|
||||
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.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, {id: 'starred', sortBy: 'updated_at' });
|
||||
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
|
||||
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
|
||||
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.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
|
||||
// 'Mapper' refers to another mapper
|
||||
Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
|
||||
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.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj)
|
||||
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' })
|
||||
},
|
||||
showDiv: function (selector) {
|
||||
$(selector).show()
|
||||
|
|
@ -65,261 +65,252 @@ const GlobalUI = {
|
|||
}, 200, 'easeInCubic', function () { $(this).hide() })
|
||||
},
|
||||
openLightbox: function (which) {
|
||||
var self = GlobalUI;
|
||||
var self = GlobalUI
|
||||
|
||||
$('.lightboxContent').hide();
|
||||
$('#' + which).show();
|
||||
$('.lightboxContent').hide()
|
||||
$('#' + 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
|
||||
$('#lightbox_main').animate({
|
||||
'top': '50%',
|
||||
'margin-top': heightOfContent
|
||||
}, 200, 'easeOutCubic');
|
||||
}, 200, 'easeOutCubic')
|
||||
|
||||
// fade the black overlay in
|
||||
$('#lightbox_screen').animate({
|
||||
'opacity': '0.42'
|
||||
}, 200);
|
||||
}, 200)
|
||||
|
||||
if (which == "switchMetacodes") {
|
||||
Create.isSwitchingSet = true;
|
||||
if (which === 'switchMetacodes') {
|
||||
Create.isSwitchingSet = true
|
||||
}
|
||||
},
|
||||
|
||||
closeLightbox: function (event) {
|
||||
var self = GlobalUI;
|
||||
var self = GlobalUI
|
||||
|
||||
if (event) event.preventDefault();
|
||||
if (event) event.preventDefault()
|
||||
|
||||
// animate the lightbox content offscreen
|
||||
$('#lightbox_main').animate({
|
||||
'top': '100%',
|
||||
'margin-top': '0'
|
||||
}, 200, 'easeInCubic');
|
||||
}, 200, 'easeInCubic')
|
||||
|
||||
// fade the black overlay out
|
||||
$('#lightbox_screen').animate({
|
||||
'opacity': '0.0'
|
||||
}, 200, function () {
|
||||
$('#lightbox_overlay').hide();
|
||||
});
|
||||
$('#lightbox_overlay').hide()
|
||||
})
|
||||
|
||||
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map');
|
||||
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map');
|
||||
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map')
|
||||
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map')
|
||||
if (Create && Create.isSwitchingSet) {
|
||||
Create.cancelMetacodeSetSwitch();
|
||||
Create.cancelMetacodeSetSwitch()
|
||||
}
|
||||
self.lightbox = null;
|
||||
self.lightbox = null
|
||||
},
|
||||
notifyUser: function (message, leaveOpen) {
|
||||
var self = GlobalUI;
|
||||
var self = GlobalUI
|
||||
|
||||
$('#toast').html(message)
|
||||
self.showDiv('#toast')
|
||||
clearTimeout(self.notifyTimeOut);
|
||||
clearTimeout(self.notifyTimeOut)
|
||||
if (!leaveOpen) {
|
||||
self.notifyTimeOut = setTimeout(function () {
|
||||
self.hideDiv('#toast')
|
||||
}, 8000);
|
||||
}, 8000)
|
||||
}
|
||||
},
|
||||
clearNotify: function() {
|
||||
var self = GlobalUI;
|
||||
clearNotify: function () {
|
||||
var self = GlobalUI
|
||||
|
||||
clearTimeout(self.notifyTimeOut);
|
||||
clearTimeout(self.notifyTimeOut)
|
||||
self.hideDiv('#toast')
|
||||
},
|
||||
shareInvite: function(inviteLink) {
|
||||
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
|
||||
shareInvite: function (inviteLink) {
|
||||
window.prompt('To copy the invite link, press: Ctrl+C, Enter', inviteLink)
|
||||
}
|
||||
}
|
||||
|
||||
GlobalUI.CreateMap = {
|
||||
newMap: null,
|
||||
emptyMapForm: "",
|
||||
emptyForkMapForm: "",
|
||||
emptyMapForm: '',
|
||||
emptyForkMapForm: '',
|
||||
topicsToMap: [],
|
||||
synapsesToMap: [],
|
||||
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.emptyMapForm = $('#new_map').html();
|
||||
self.bindFormEvents()
|
||||
|
||||
self.emptyMapForm = $('#new_map').html()
|
||||
},
|
||||
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()
|
||||
})
|
||||
|
||||
$('.new_map button.cancel').unbind().bind('click', function (event) {
|
||||
event.preventDefault();
|
||||
GlobalUI.closeLightbox();
|
||||
});
|
||||
$('.new_map button.submitMap').unbind().bind('click', self.submit);
|
||||
event.preventDefault()
|
||||
GlobalUI.closeLightbox()
|
||||
})
|
||||
$('.new_map button.submitMap').unbind().bind('click', self.submit)
|
||||
|
||||
// bind permission changer events on the createMap form
|
||||
$('.permIcon').unbind().bind('click', self.switchPermission);
|
||||
$('.permIcon').unbind().bind('click', self.switchPermission)
|
||||
},
|
||||
closeSuccess: function () {
|
||||
$('#mapCreatedSuccess').fadeOut(300, function(){
|
||||
$(this).remove();
|
||||
});
|
||||
$('#mapCreatedSuccess').fadeOut(300, function () {
|
||||
$(this).remove()
|
||||
})
|
||||
},
|
||||
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/";
|
||||
stringStart += id;
|
||||
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 ";
|
||||
var page = Active.Map ? 'map' : 'page';
|
||||
var stringEnd = "</a></div>";
|
||||
return stringStart + page + stringEnd;
|
||||
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 += "' 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 "
|
||||
var page = Active.Map ? 'map' : 'page'
|
||||
var stringEnd = '</a></div>'
|
||||
return stringStart + page + stringEnd
|
||||
},
|
||||
switchPermission: function () {
|
||||
var self = GlobalUI.CreateMap;
|
||||
var self = GlobalUI.CreateMap
|
||||
|
||||
self.newMap.set('permission', $(this).attr('data-permission'));
|
||||
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
|
||||
$(this).find('.mapPermIcon').addClass('selected');
|
||||
self.newMap.set('permission', $(this).attr('data-permission'))
|
||||
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected')
|
||||
$(this).find('.mapPermIcon').addClass('selected')
|
||||
|
||||
var permText = $(this).find('.tip').html();
|
||||
$(this).parents('.new_map').find('.permText').html(permText);
|
||||
var permText = $(this).find('.tip').html()
|
||||
$(this).parents('.new_map').find('.permText').html(permText)
|
||||
},
|
||||
submit: function (event) {
|
||||
if (event) event.preventDefault();
|
||||
if (event) event.preventDefault()
|
||||
|
||||
var self = GlobalUI.CreateMap;
|
||||
var self = GlobalUI.CreateMap
|
||||
|
||||
if (GlobalUI.lightbox === 'forkmap') {
|
||||
self.newMap.set('topicsToMap', self.topicsToMap);
|
||||
self.newMap.set('synapsesToMap', self.synapsesToMap);
|
||||
self.newMap.set('topicsToMap', self.topicsToMap)
|
||||
self.newMap.set('synapsesToMap', self.synapsesToMap)
|
||||
}
|
||||
|
||||
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
|
||||
var $form = $(formId);
|
||||
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
|
||||
var $form = $(formId)
|
||||
|
||||
self.newMap.set('name', $form.find('#map_name').val());
|
||||
self.newMap.set('desc', $form.find('#map_desc').val());
|
||||
self.newMap.set('name', $form.find('#map_name').val())
|
||||
self.newMap.set('desc', $form.find('#map_desc').val())
|
||||
|
||||
if (self.newMap.get('name').length===0){
|
||||
self.throwMapNameError();
|
||||
return;
|
||||
if (self.newMap.get('name').length === 0) {
|
||||
self.throwMapNameError()
|
||||
return
|
||||
}
|
||||
|
||||
self.newMap.save(null, {
|
||||
success: self.success
|
||||
// TODO add error message
|
||||
});
|
||||
// TODO add error message
|
||||
})
|
||||
|
||||
GlobalUI.closeLightbox();
|
||||
GlobalUI.notifyUser('Working...');
|
||||
GlobalUI.closeLightbox()
|
||||
GlobalUI.notifyUser('Working...')
|
||||
},
|
||||
throwMapNameError: function () {
|
||||
var self = GlobalUI.CreateMap;
|
||||
|
||||
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
|
||||
var $form = $(formId);
|
||||
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
|
||||
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);
|
||||
setTimeout(function(){
|
||||
message.fadeOut('fast', function(){
|
||||
message.remove();
|
||||
});
|
||||
}, 5000);
|
||||
$form.find('#map_name').after(message)
|
||||
setTimeout(function () {
|
||||
message.fadeOut('fast', function () {
|
||||
message.remove()
|
||||
})
|
||||
}, 5000)
|
||||
},
|
||||
success: function (model) {
|
||||
var self = GlobalUI.CreateMap;
|
||||
|
||||
//push the new map onto the collection of 'my maps'
|
||||
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));
|
||||
var self = GlobalUI.CreateMap
|
||||
// push the new map onto the collection of 'my maps'
|
||||
Metamaps.Maps.Mine.add(model)
|
||||
|
||||
GlobalUI.clearNotify()
|
||||
$('#wrapper').append(self.generateSuccessMessage(model.id))
|
||||
},
|
||||
reset: function (id) {
|
||||
var self = GlobalUI.CreateMap;
|
||||
var self = GlobalUI.CreateMap
|
||||
|
||||
var form = $('#' + id);
|
||||
var form = $('#' + id)
|
||||
|
||||
if (id === "fork_map") {
|
||||
self.topicsToMap = [];
|
||||
self.synapsesToMap = [];
|
||||
form.html(self.emptyForkMapForm);
|
||||
}
|
||||
else {
|
||||
form.html(self.emptyMapForm);
|
||||
if (id === 'fork_map') {
|
||||
self.topicsToMap = []
|
||||
self.synapsesToMap = []
|
||||
form.html(self.emptyForkMapForm)
|
||||
} else {
|
||||
form.html(self.emptyMapForm)
|
||||
}
|
||||
|
||||
self.bindFormEvents();
|
||||
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
|
||||
self.bindFormEvents()
|
||||
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
|
||||
|
||||
return false;
|
||||
},
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
GlobalUI.Account = {
|
||||
isOpen: false,
|
||||
changing: false,
|
||||
init: function () {
|
||||
var self = GlobalUI.Account;
|
||||
var self = GlobalUI.Account
|
||||
|
||||
$('.sidebarAccountIcon').click(self.toggleBox);
|
||||
$('.sidebarAccountBox').click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
$('body').click(self.close);
|
||||
$('.sidebarAccountIcon').click(self.toggleBox)
|
||||
$('.sidebarAccountBox').click(function (event) {
|
||||
event.stopPropagation()
|
||||
})
|
||||
$('body').click(self.close)
|
||||
},
|
||||
toggleBox: function (event) {
|
||||
var self = GlobalUI.Account;
|
||||
var self = GlobalUI.Account
|
||||
|
||||
if (self.isOpen) self.close();
|
||||
else self.open();
|
||||
if (self.isOpen) self.close()
|
||||
else self.open()
|
||||
|
||||
event.stopPropagation();
|
||||
event.stopPropagation()
|
||||
},
|
||||
open: function () {
|
||||
var self = GlobalUI.Account;
|
||||
|
||||
Filter.close();
|
||||
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
|
||||
var self = GlobalUI.Account
|
||||
|
||||
Filter.close()
|
||||
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide')
|
||||
|
||||
if (!self.isOpen && !self.changing) {
|
||||
self.changing = true;
|
||||
self.changing = true
|
||||
$('.sidebarAccountBox').fadeIn(200, function () {
|
||||
self.changing = false;
|
||||
self.isOpen = true;
|
||||
$('.sidebarAccountBox #user_email').focus();
|
||||
});
|
||||
self.changing = false
|
||||
self.isOpen = true
|
||||
$('.sidebarAccountBox #user_email').focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
close: function () {
|
||||
var self = GlobalUI.Account;
|
||||
var self = GlobalUI.Account
|
||||
|
||||
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
|
||||
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide')
|
||||
if (!self.changing) {
|
||||
self.changing = true;
|
||||
$('.sidebarAccountBox #user_email').blur();
|
||||
self.changing = true
|
||||
$('.sidebarAccountBox #user_email').blur()
|
||||
$('.sidebarAccountBox').fadeOut(200, function () {
|
||||
self.changing = false;
|
||||
self.isOpen = false;
|
||||
});
|
||||
self.changing = false
|
||||
self.isOpen = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -333,31 +324,33 @@ GlobalUI.Search = {
|
|||
changing: false,
|
||||
optionsInitialized: false,
|
||||
init: function () {
|
||||
var self = GlobalUI.Search;
|
||||
var self = GlobalUI.Search
|
||||
|
||||
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
|
||||
// TODO does this overlap with Metamaps.Loading?
|
||||
// devin sez: I'd like to remove Metamaps.Loading from the rails code
|
||||
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
|
||||
|
||||
// bind the hover events
|
||||
$(".sidebarSearch").hover(function () {
|
||||
$('.sidebarSearch').hover(function () {
|
||||
self.open()
|
||||
}, function () {
|
||||
self.close(800, false)
|
||||
});
|
||||
})
|
||||
|
||||
$('.sidebarSearchIcon').click(function (e) {
|
||||
$('.sidebarSearchField').focus();
|
||||
});
|
||||
$('.sidebarSearchField').focus()
|
||||
})
|
||||
$('.sidebarSearch').click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
e.stopPropagation()
|
||||
})
|
||||
$('body').click(function (e) {
|
||||
self.close(0, false);
|
||||
});
|
||||
self.close(0, false)
|
||||
})
|
||||
|
||||
// open if the search is closed and user hits ctrl+/
|
||||
// close if they hit ESC
|
||||
|
|
@ -365,281 +358,280 @@ GlobalUI.Search = {
|
|||
switch (e.which) {
|
||||
case 191:
|
||||
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:
|
||||
if (self.isOpen) {
|
||||
self.close(0, true);
|
||||
self.close(0, true)
|
||||
}
|
||||
break;
|
||||
break
|
||||
|
||||
default:
|
||||
break; //console.log(e.which);
|
||||
break // console.log(e.which)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
self.startTypeahead();
|
||||
self.startTypeahead()
|
||||
},
|
||||
lock: function() {
|
||||
var self = GlobalUI.Search;
|
||||
self.locked = true;
|
||||
lock: function () {
|
||||
var self = GlobalUI.Search
|
||||
self.locked = true
|
||||
},
|
||||
unlock: function() {
|
||||
var self = GlobalUI.Search;
|
||||
self.locked = false;
|
||||
unlock: function () {
|
||||
var self = GlobalUI.Search
|
||||
self.locked = false
|
||||
},
|
||||
open: function (focus) {
|
||||
var self = GlobalUI.Search;
|
||||
var self = GlobalUI.Search
|
||||
|
||||
clearTimeout(self.timeOut);
|
||||
clearTimeout(self.timeOut)
|
||||
if (!self.isOpen && !self.changing && !self.locked) {
|
||||
self.changing = true;
|
||||
self.changing = true
|
||||
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
|
||||
width: '400px'
|
||||
}, 300, function () {
|
||||
if (focus) $('.sidebarSearchField').focus();
|
||||
if (focus) $('.sidebarSearchField').focus()
|
||||
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
|
||||
padding: '7px 10px 3px 10px',
|
||||
width: '380px'
|
||||
});
|
||||
self.changing = false;
|
||||
self.isOpen = true;
|
||||
});
|
||||
})
|
||||
self.changing = false
|
||||
self.isOpen = true
|
||||
})
|
||||
}
|
||||
},
|
||||
close: function (closeAfter, bypass) {
|
||||
// for now
|
||||
return
|
||||
|
||||
var self = GlobalUI.Search;
|
||||
var self = GlobalUI.Search
|
||||
|
||||
self.timeOut = setTimeout(function () {
|
||||
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
|
||||
self.changing = true;
|
||||
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() === '')) {
|
||||
self.changing = true
|
||||
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
|
||||
padding: '7px 0 3px 0',
|
||||
width: '400px'
|
||||
});
|
||||
})
|
||||
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
|
||||
width: '0'
|
||||
}, 300, function () {
|
||||
$('.sidebarSearchField').typeahead('val', '');
|
||||
$('.sidebarSearchField').blur();
|
||||
self.changing = false;
|
||||
self.isOpen = false;
|
||||
});
|
||||
$('.sidebarSearchField').typeahead('val', '')
|
||||
$('.sidebarSearchField').blur()
|
||||
self.changing = false
|
||||
self.isOpen = false
|
||||
})
|
||||
}
|
||||
}, closeAfter);
|
||||
}, closeAfter)
|
||||
},
|
||||
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 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 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: function(s) { return s.label; },
|
||||
display: s => s.label,
|
||||
templates: {
|
||||
notFound: function(s) {
|
||||
notFound: function (s) {
|
||||
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
|
||||
value: "No results",
|
||||
label: "No results",
|
||||
value: 'No results',
|
||||
label: 'No results',
|
||||
typeImageURL: Metamaps.Erb['icons/wildcard.png'],
|
||||
rtype: "noresult"
|
||||
});
|
||||
rtype: 'noresult'
|
||||
})
|
||||
},
|
||||
header: topicheader,
|
||||
suggestion: function(s) {
|
||||
return Hogan.compile($('#topicSearchTemplate').html()).render(s);
|
||||
},
|
||||
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;
|
||||
prepare: function (query, settings) {
|
||||
settings.url += '?term=' + query
|
||||
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 = {
|
||||
name: 'maps',
|
||||
limit: 9999,
|
||||
display: function(s) { return s.label; },
|
||||
display: s => s.label,
|
||||
templates: {
|
||||
notFound: function(s) {
|
||||
notFound: function (s) {
|
||||
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
|
||||
value: "No results",
|
||||
label: "No results",
|
||||
rtype: "noresult"
|
||||
});
|
||||
value: 'No results',
|
||||
label: 'No results',
|
||||
rtype: 'noresult'
|
||||
})
|
||||
},
|
||||
header: mapheader,
|
||||
suggestion: function(s) {
|
||||
return Hogan.compile($('#mapSearchTemplate').html()).render(s);
|
||||
},
|
||||
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;
|
||||
prepare: function (query, settings) {
|
||||
settings.url += '?term=' + query
|
||||
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 = {
|
||||
name: 'mappers',
|
||||
limit: 9999,
|
||||
display: function(s) { return s.label; },
|
||||
display: s => s.label,
|
||||
templates: {
|
||||
notFound: function(s) {
|
||||
notFound: function (s) {
|
||||
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
|
||||
value: "No results",
|
||||
label: "No results",
|
||||
rtype: "noresult",
|
||||
value: 'No results',
|
||||
label: 'No results',
|
||||
rtype: 'noresult',
|
||||
profile: Metamaps.Erb['user.png']
|
||||
});
|
||||
})
|
||||
},
|
||||
header: mapperheader,
|
||||
suggestion: function(s) {
|
||||
return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
|
||||
},
|
||||
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',
|
||||
},
|
||||
}),
|
||||
};
|
||||
wildcard: '%QUERY'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Take all that crazy setup data and put it together into one beautiful typeahead call!
|
||||
$('.sidebarSearchField').typeahead(
|
||||
{
|
||||
highlight: true,
|
||||
highlight: true
|
||||
},
|
||||
[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) {
|
||||
self.initSearchOptions();
|
||||
self.hideLoader();
|
||||
var h = $(window).height();
|
||||
$(".tt-dropdown-menu").css('max-height', h - 100);
|
||||
self.initSearchOptions()
|
||||
self.hideLoader()
|
||||
var h = $(window).height()
|
||||
$('.tt-dropdown-menu').css('max-height', h - 100)
|
||||
if (self.limitTopicsToMe) {
|
||||
$('#limitTopicsToMe').prop('checked', true);
|
||||
$('#limitTopicsToMe').prop('checked', true)
|
||||
}
|
||||
if (self.limitMapsToMe) {
|
||||
$('#limitMapsToMe').prop('checked', true);
|
||||
$('#limitMapsToMe').prop('checked', true)
|
||||
}
|
||||
});
|
||||
})
|
||||
$(window).resize(function () {
|
||||
var h = $(window).height();
|
||||
$(".tt-dropdown-menu").css('max-height', h - 100);
|
||||
});
|
||||
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);
|
||||
$('.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();
|
||||
});
|
||||
event.stopPropagation()
|
||||
})
|
||||
|
||||
// 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() === '') {
|
||||
self.hideLoader();
|
||||
self.hideLoader()
|
||||
} else {
|
||||
self.showLoader();
|
||||
self.showLoader()
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
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) {
|
||||
self.close(0, true);
|
||||
if (datum.rtype == "topic") {
|
||||
Router.topics(datum.id);
|
||||
} else if (datum.rtype == "map") {
|
||||
Router.maps(datum.id);
|
||||
} else if (datum.rtype == "mapper") {
|
||||
Router.explore("mapper", datum.id);
|
||||
if (['topic', 'map', 'mapper'].indexOf(datum.rtype) !== -1) {
|
||||
self.close(0, true)
|
||||
if (datum.rtype === 'topic') {
|
||||
Router.topics(datum.id)
|
||||
} else if (datum.rtype === 'map') {
|
||||
Router.maps(datum.id)
|
||||
} else if (datum.rtype === 'mapper') {
|
||||
Router.explore('mapper', datum.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
initSearchOptions: function () {
|
||||
var self = GlobalUI.Search;
|
||||
var self = GlobalUI.Search
|
||||
|
||||
function toggleResultSet(set) {
|
||||
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
|
||||
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');
|
||||
s.hide()
|
||||
$(this).removeClass('minimizeResults').addClass('maximizeResults')
|
||||
} else {
|
||||
s.show();
|
||||
$(this).removeClass('maximizeResults').addClass('minimizeResults');
|
||||
s.show()
|
||||
$(this).removeClass('maximizeResults').addClass('minimizeResults')
|
||||
}
|
||||
}
|
||||
|
||||
$('.limitToMe').unbind().bind("change", function (e) {
|
||||
if ($(this).attr('id') == 'limitTopicsToMe') {
|
||||
self.limitTopicsToMe = !self.limitTopicsToMe;
|
||||
$('.limitToMe').unbind().bind('change', function (e) {
|
||||
if ($(this).attr('id') === 'limitTopicsToMe') {
|
||||
self.limitTopicsToMe = !self.limitTopicsToMe
|
||||
}
|
||||
if ($(this).attr('id') == 'limitMapsToMe') {
|
||||
self.limitMapsToMe = !self.limitMapsToMe;
|
||||
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);
|
||||
});
|
||||
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');
|
||||
});
|
||||
toggleResultSet.call(this, 'mappers')
|
||||
})
|
||||
$('.minimizeTopicResults').unbind().click(function (e) {
|
||||
toggleResultSet.call(this, 'topics');
|
||||
});
|
||||
toggleResultSet.call(this, 'topics')
|
||||
})
|
||||
$('.minimizeMapResults').unbind().click(function (e) {
|
||||
toggleResultSet.call(this, 'maps');
|
||||
});
|
||||
toggleResultSet.call(this, 'maps')
|
||||
})
|
||||
},
|
||||
hideLoader: function () {
|
||||
$('#searchLoading').hide();
|
||||
$('#searchLoading').hide()
|
||||
},
|
||||
showLoader: function () {
|
||||
$('#searchLoading').show();
|
||||
$('#searchLoading').show()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue