ComunicWeb/assets/js/components/searchForm/searchForm.js

/**
 * Search form component
 * 
 * @author Pierre HUBERT
 */

ComunicWeb.components.searchForm = {
	/**
	 * Initializate a search form element
	 * 
	 * @param {HTMLElement} textInput The text input node
	 * @param {HTMLElement} searchResultBox The target of the results
	 * @return {Boolean} True for a success
	 */
	init: function(textInput, searchResultBox){
		//Log action
		ComunicWeb.debug.logMessage("Initializate search menu");

		//Create header
		var searchHeader = createElem("li", searchResultBox);
		searchHeader.className = "header";
		searchHeader.innerHTML = "Search results";

		//Box core
		var searchBoxCore = createElem("li", searchResultBox);
		var searchBoxContainer = createElem("div", searchBoxCore);
		searchBoxContainer.className = "searchBoxResultsContainer";
		
		//Create footer
		var searchFooter = createElem("li", searchResultBox);
		searchFooter.className = "footer";

		//Footer link
		var footerLink = createElem("a", searchFooter);
		footerLink.innerHTML = "See more results";
		footerLink.onclick = function(){
			openPage("search?q=" + this.getAttribute("data-searchValue"));
		}

		//Make input text lives
		textInput.onkeyup = function(){
			ComunicWeb.components.searchForm.ontextchange(textInput, searchResultBox, searchBoxContainer, footerLink);
		}

		return true;
	},

	/**
	 * What to do on text change
	 * 
	 * @param {HTMLElement} textInput The text input node
	 * @param {HTMLElement} searchResultBox The main search box
	 * @param {HTMLElement} searchBoxContainer The target of the results
	 * @param {HTMLElement} footerLink The footer element
	 * @return {Boolean} True for a success
	 */
	ontextchange: function(textInput, searchResultBox, searchBoxContainer, footerLink){
		//We check if the text was removed
		if(textInput.value == ""){
			//Text was removed
			//Hide box
			searchResultBox.style.display = "none";
			return true;
		}

		//We show the box
		searchResultBox.style.display = "block";

		//Change "see more result" value
		footerLink.setAttribute("data-searchValue", textInput.value);

		//Perform a request on the server
		apiURI = "search/request";
		params = {
			query: textInput.value,
		};
		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, function(response){
			
			//Continue only in case of success
			if(response.error)
				return false;
			
			//Preload users informations
			ComunicWeb.user.userInfos.getMultipleUsersInfos(response, function(usersInfos){

				//Remove any remainging element in searchResultBox
				emptyElem(searchBoxContainer);

				//Create menu list
				var menuList = createElem("ul", searchBoxContainer);
				menuList.className = "menu";

				//Process each result
				for(i in response){

					//Retrieve userID
					var userID = response[i];
					
					//We show user only if we have informations about him
					if(usersInfos["user-"+userID])
						//Display user informations
						ComunicWeb.components.searchForm.displayUser(usersInfos["user-"+userID], menuList);

				}

				//Enable slimscroll
				$(menuList).slimScroll({
					height: '200px',
				});
			});
		});
		
	},

	/**
	 * Display a user on the result list
	 * 
	 * @param {Integer} userInfos Informations about the user
	 * @param {HTMLElement} menuList The target list menu
	 * @return {Boolean} True for a success
	 */
	displayUser: function(userInfos, menuList){
		//Create user element
		var userListElement = createElem("li", menuList);
		var userLinkElement = createElem("a", userListElement);
		
		//User account image
		var userAccountImageContainer = createElem("div", userLinkElement);
		userAccountImageContainer.className = "pull-left";

		var userImage = createElem("img", userAccountImageContainer);
		userImage.className = "img-circle";
		userImage.alt = "User image";
		userImage.src = path_assets("img/defaultAvatar.png");

		//User name
		var usernameElem = createElem("h4", userLinkElement);
		usernameElem.innerHTML = "Loading...";
			
		//Apply user informations
		userImage.src = userInfos.accountImage;
		usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
	},
}