diff --git a/assets/css/components/searchForm.css b/assets/css/components/searchForm.css new file mode 100644 index 00000000..1a339e1a --- /dev/null +++ b/assets/css/components/searchForm.css @@ -0,0 +1,18 @@ +/** + * Search form styles + * + * @author Pierre HUBERT + */ + +.searchBoxResultsContainer { + position: relative; + overflow: hidden; + width: auto; + height: 200px; +} + +.searchBoxResultsContainer .menu { + overflow: hidden; + width: 100%; + height: 200px; +} \ No newline at end of file diff --git a/assets/js/components/menuBar/authenticated.js b/assets/js/components/menuBar/authenticated.js index 39d7f217..3df8bea8 100644 --- a/assets/js/components/menuBar/authenticated.js +++ b/assets/js/components/menuBar/authenticated.js @@ -124,7 +124,7 @@ ComunicWeb.components.menuBar.authenticated = { addSearchForm: function(navbarElem){ //Create form element var searchForm = createElem("li", navbarElem); - searchForm.className = "dropdown navbar-form navbar-left"; + searchForm.className = "dropdown navbar-form navbar-left notifications-menu"; searchForm.setAttribute("role", "search"); //Create form group @@ -138,5 +138,11 @@ ComunicWeb.components.menuBar.authenticated = { searchInput.type = "text"; searchInput.id = "navbar-search-input"; + //Create dropdown container + var dropdownContainer = createElem("ul", searchForm); + dropdownContainer.className = "dropdown-menu"; + + //Initializate menu + ComunicWeb.components.searchForm.init(searchInput, dropdownContainer); } }; \ No newline at end of file diff --git a/assets/js/components/searchForm/searchForm.js b/assets/js/components/searchForm/searchForm.js index 116cabbc..d416a2b8 100644 --- a/assets/js/components/searchForm/searchForm.js +++ b/assets/js/components/searchForm/searchForm.js @@ -8,7 +8,74 @@ ComunicWeb.components.searchForm = { /** * Initializate a search form element * - * @param {HTMLElement} + * @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 menu list + var menuList = createElem("ul", searchBoxContainer); + menuList.className = "menu"; + + //Enable slimscroll + /*$(menuList).slimScroll({ + height: '200px', + }));*/ + + //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); + }, } \ No newline at end of file diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php index ce152290..4f2c2cf3 100644 --- a/corePage/config/dev.config.php +++ b/corePage/config/dev.config.php @@ -24,6 +24,7 @@ $config['CSSfiles'] = array( //Components stylesheets "%PATH_ASSETS%css/components/menuBar.css", + "%PATH_ASSETS%css/components/searchForm.css", ); //JS files to include (at the end of the page)