/*global define */
define(['jquery', 'underscore', 'backbone', 'views/SignInView', 'text!templates/navbar.html'],
function($, _, Backbone, SignInView, NavbarTemplate) {
'use strict';
/**
* @class NavbarView
* @classdesc Build the navbar view of the application
* @extends Backbone.View
* @classcategory Views
* @constructor
* @screenshot views/NavbarView.png
*/
var NavbarView = Backbone.View.extend(
/** @lends NavbarView.prototype */ {
/**
* @type {string}
*/
el: '#Navbar',
/**
* @type {Underscore.Template}
*/
template: _.template(NavbarTemplate),
/**
* @type {object}
*/
events: {
'click #search_btn' : 'triggerSearch',
'keypress #search_txt' : 'triggerOnEnter',
'click .show-new-search' : 'resetSearch',
'click .dropdown-menu a' : 'hideDropdown',
'mouseenter .dropdown' : 'showDropdown',
'mouseleave .dropdown' : 'hideDropdown',
'click #nav-trigger' : 'showNav',
'click .nav li' : 'showSubNav'
},
initialize: function () {
// listen to the MetacatUI.appModel for changes in username
this.listenTo(MetacatUI.appUserModel, 'change:username', this.render);
this.listenTo(MetacatUI.appUserModel, 'change:fullName', this.render);
this.listenTo(MetacatUI.appUserModel, 'change:loggedIn', this.render);
this.listenTo(MetacatUI.appModel, 'change:headerType', this.toggleHeaderType);
},
render: function () {
var name = MetacatUI.appUserModel.get('fullName') ? MetacatUI.appUserModel.get('fullName').charAt(0).toUpperCase() + MetacatUI.appUserModel.get("fullName").substring(1) : MetacatUI.appUserModel.get("username");
//Insert the navbar template
this.$el.html(
this.template({
username: MetacatUI.appUserModel.get('username'),
formattedName: name,
firstName: MetacatUI.appUserModel.get('firstName'),
loggedIn: MetacatUI.appUserModel.get("loggedIn"),
baseUrl: MetacatUI.appModel.get('baseUrl')
}));
//Insert the sign-in button
var signInView = new SignInView().render();
this.$(".login-container").append(signInView.el);
signInView.setUpPopup();
//Initialize the tooltips in the navbar
this.$(".tooltip-this").tooltip({
delay: {show: 600},
trigger: "hover",
placement: "bottom"
});
this.changeBackground();
//Check if the temporary message is in this view
if( MetacatUI.appModel.get("temporaryMessageContainer") == "#Navbar"){
if( typeof MetacatUI.appView.showTemporaryMessage == "function") {
MetacatUI.appView.showTemporaryMessage();
}
}
},
changeBackground: function(){
// Change the background image if there is one
var imageEl = $('#bg_image');
if ($(imageEl).length > 0) {
var imgCnt = $(imageEl).attr('data-image-count');
//Randomly choose the next background image
var bgNum = Math.ceil(Math.random() * imgCnt);
$(imageEl).css('background-image', "url('" + MetacatUI.root + "/js/themes/" + MetacatUI.theme + "/img/backgrounds/bg" + bgNum + ".jpg')");
}
},
triggerSearch: function() {
// Get the search term entered
var searchTerm = $("#search_txt").val();
//Clear the input value
$("#search_txt").val('');
//Clear the search model to start a fresh search
MetacatUI.appSearchModel.clear().set(MetacatUI.appSearchModel.defaults);
//Create a new array with the new search term
var newSearch = [searchTerm];
//Set up the search model for this new term
MetacatUI.appSearchModel.set('all', newSearch);
// make sure the browser knows where we are
MetacatUI.uiRouter.navigate("data", {trigger: true});
// ...but don't want to follow links
return false;
},
resetSearch: function(e){
e.preventDefault();
MetacatUI.appView.resetSearch();
},
hideDropdown: function(e){
this.$('.dropdown-menu').addClass('hidden');
this.$('.dropdown').removeClass('open');
},
showDropdown: function(e){
this.$('.dropdown-menu').removeClass('hidden');
// Prevent click events immediately following mouseenter events, otherwise
// toggleDropdown() is called right after showDropdown on touchscreen devices.
// (on touch screen, both mouseenter and click are called when user touches element)
this.$('.dropdown .dropdown-toggle').off('click');
var view = this;
setTimeout(function () {
view.$('.dropdown .dropdown-toggle').on('click', function(e){
view.toggleDropdown(e)
});
}, 10);
},
toggleDropdown: function(e){
// this.$(".navbar-inner").append(" TOGG: " + e.handleObj.origType)
// console.log(e);
this.$('.dropdown-menu').toggleClass('hidden');
this.$('.dropdown').removeClass('open');
},
showNav: function(){
this.$("#main-nav").slideToggle();
this.$("#nav-trigger .icon").toggle();
},
showSubNav: function(e){
var parentEl = e.target.tagName == "LI"? e.target : $(e.target).parent("li");
if(!parentEl || !$(parentEl).length) return;
$(parentEl).find(".sub-menu").slideToggle();
},
triggerOnEnter: function(e) {
if (e.keyCode != 13) return;
this.triggerSearch();
},
toggleHeaderType: function(){
// set the navbar class based on what the page requested
var headerType = MetacatUI.appModel.get('headerType');
if (headerType == "default") {
//Remove the alt class
$(this.$el).removeClass("alt");
//Add the class given
$(this.$el).addClass(headerType);
}
else if(headerType == "alt"){
//Remove the default class
$(this.$el).removeClass("default");
//Add the class given
$(this.$el).addClass(headerType);
}
}
});
return NavbarView;
});