I am working on editing search functionality for a knowledge base. The knowledge base has a filter panel that can be displayed where users can select which database or category they want to use to filter search results. Currently it is set to "hidden" until the link/icon is clicked on for it. I would like to make it always visible if possible. Below I have the script file, css file, and html for the search and filter section. I would like for the show/hide link/icon to still work. I just want the default to be that the filter pane is shown.
//Link function
function(scope,element,attr){
if(scope.data.set_foccus)
setTimeout(function(){
element.find('#kb_search_input').focus();
},0);
var c = scope.c;
$rootScope = $injector.get("$rootScope");
c.showFiltersButton = true;
c.showAndHideFilters = function(){
if(c.showFiltersButton==true){
$(".hide-filters").addClass("show-filters").removeClass("hide-filters");
$(".expand-width").addClass("original-width").removeClass("expand-width");
c.showFiltersButton = false;
}else{
$(".show-filters").addClass("hide-filters").removeClass("show-filters");
$(".original-width").addClass("expand-width").removeClass("original-width");
c.showFiltersButton = true;
}
}
c.hideFilters = function(){
$(".show-filters").addClass("hide-filters").removeClass("show-filters");
$(".original-width").addClass("expand-width").removeClass("original-width");
c.showFiltersButton = true;
}
c.toggleFacets = function(){
$rootScope.showFacet = !$rootScope.showFacet;
$rootScope.showLanguageFacet = false;
}
c.showLanguageFacet = function(){
$rootScope.showFacet = !$rootScope.showFacet;
$rootScope.showLanguageFacet = true;
}
c.keywordChanged = function(event){
c.keyword = c.keyword.trim();
if(c.keyword != c.oldKeyword){
//handle keyboard events for enter and keyup
if(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(!c.data.allow_instant_search && keycode != 13)
return;
}
//throw update event based on options
if( (c.data.allow_empty_search && c.keyword == "") || (c.keyword && c.keyword.length >= c.data.min_search_char)){
$rootScope.$emit('sp.kb.updated.keyword',{'keyword':c.keyword});
c.hideFilters();
}
c.oldKeyword = angular.copy(c.keyword);
}
scope.$evalAsync(function(){
if($("#kb_search_input"))
$("#kb_search_input").focus();
});
};
//If instant search enable then wait for 200ms for the next input then throw event
$("#kb_search_input").keyup(_.debounce(function(event){
c.keywordChanged(event);
},c.options.search_wait));
$(window).resize(function() {
var width1 = $(window).width();
if(width1<=992 && !$rootScope.isMobile){
$rootScope.isMobile = true;
}else if(width1>992 && $rootScope.isMobile ){
$rootScope.showFacet = false;
$rootScope.isMobile = false;
}
});
//set keyword onload from url and throw event
if(c.data.keyword){
c.keyword = c.data.keyword;
c.keywordChanged();
}
}@media only screen and (max-width: 991px) {
.kb-search-block {
padding-top : 7px !important;
}
.filter-icon-padding {
padding-left : 0px !important;
padding-right : 0px !important;
text-align : center;
}
.kb-search-display-none {
display :none !important;
}
.kb-search-block .lang-icon {
font-size : 18px;
float :left;
padding-right:9px;
}
}
@media only screen and (min-width:991px) {
.expand-width {
width :100%;
}
.hide-filters {
display :none;
}
.original-width{
width : 75%;
}
.show-filters {
display:block;
}
}<div class="kb-search-block" ng-class="$root.showFacet? 'kb-search-display-none':''" ng-cloak>
<div class="search-bar col-md-5 col-xs-11 col-sm-7 no-pad">
<div ng-if="c.showLanguageIcon" class="visible-xs visible-sm lang-icon">
<span ng-click ="::c.showLanguageFacet()"><i class="fa fa-globe icon-padding" aria-hidden="true"></i></span>
</div>
<div class="pad-bottom">
<div class="input-group input-group-{{::c.options.size}}">
<input id="kb_search_input" name="q" type="text" ng-model="c.keyword" aria-label="{{::options.title}}" placeholder="{{::options.title}}" class="form-control">
<span class="input-group-btn">
<button name="search" type="submit" aria-label="search" class="btn btn-{{::c.options.color}}" ng-click="c.keywordChanged('')">
<i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"></i>
</button>
</span>
</div>
</div>
</div>
<div class="filter-icon-padding visible-xs visible-sm col-xs-1 col-sm-1">
<span class=" filter-icon" ng-click ="::c.toggleFacets()" ng-class="c.applycolor ? 'selected-filter-color' : 'filter-color'" ><i class="fa fa-filter filter-size" aria-hidden="true"></i>
<span class="check-position" ng-show="c.applycolor"><i class="fa fa-check float-left" aria-hidden="true"></i></span></span>
</div>
<!--
<div class="visible-xs visible-sm col-xs-1 col-sm-1 no-pad">
<div class="col-xs-11 col-sm-11 pad-bottom no-pad">
-->
<div class="col-md-12">
<div class="hidden-xs hidden-sm filter-class">
<a href="javascript:void(0);" id="showFilterBtn" ng-click="c.showAndHideFilters()"><i class="fa fa-list" aria-hidden="true"></i>
<span ng-show="c.showFiltersButton" class="filter-text">${Show filters}</span>
<span ng-show="!c.showFiltersButton" class="filter-text">${Hide filters}</span></a>
</div>
</div>
</div>//client script
function($rootScope,$window,$timeout,KnowledgeSearchService,$scope) {
var c = this;
c.keyword = c.data.keyword || "";
c.oldKeyword = c.data.keyword || "";
c.options.glyph = c.options.glyph || 'search';
c.filterCount =0;
c.applycolor =false;
c.items =[];
c.showLanguageIcon = false;
if($rootScope.showLanguageIcon){
c.showLanguageIcon = $rootScope.showLanguageIcon;
}
var qry;
//Subscribe search element to service on load
if(KnowledgeSearchService){
var input = {};
input.element = "search";
input.alt_url_params = c.options.alt_search_url_params;
KnowledgeSearchService.subscribe(input);
}
var refreshSearchFilter = $rootScope.$on('sp.kb.refresh.filter',function (event,data){
if(data){
c.items = data;
}
if(c.items.length>0){
c.filterCount = c.items.length;
c.applycolor = true;
}else{
c.filterCount = 0;
c.applycolor = false;
}
});
var refreshKeyword = $rootScope.$on('sp.kb.refresh.keyword',function(event,data){
if(data)
c.keyword = data.keyword;
});
$scope.$on('$destroy',function(){
refreshSearchFilter();
refreshKeyword();
});//Server script
(function($sp) {
options.alt_search_url_params = options.alt_search_url_params || "";
//Set keyword from url
data.keyword = "";
var keywordParm = $sp.getParameter('query') || "";
if(keywordParm == ""){
if(options.alt_search_url_params){
var qParams = options.alt_search_url_params.toString().split(",");
qParams.forEach(function(key){
if($sp.getParameter(key))
keywordParm = $sp.getParameter(key);
});
}
}
if(keywordParm)
data.keyword = keywordParm;
//set values based on options and properties.
//options will be given precedence if value exit
data.set_foccus = gs.getProperty('glide.knowman.portal_search_focus') == 'true' || false;
data.min_search_char = parseInt(options.min_search_char || gs.getProperty('glide.knowman.search_character_limit') || 3);
data.allow_instant_search = options.allow_instant_search ? (options.allow_instant_search == 'Use system property' ? gs.getProperty('glide.knowman.search.instant_results') == 'true' : options.allow_instant_search == 'Yes') : gs.getProperty('glide.knowman.search.instant_results') == 'true' || false;
data.allow_empty_search = options.allow_empty_search ? (options.allow_empty_search == 'Use system property' ? gs.getProperty('glide.knowman.allow_empty_search') == 'true' : options.allow_empty_search == 'Yes') : gs.getProperty('glide.knowman.allow_empty_search') == 'true' || false;
options.search_wait = options.search_wait || 500;
options.title = options.title || gs.getMessage('Search (minimum {0} characters)',data.min_search_char+'');
var langOption = {};
langOption.alt_lang_url_params = options.alt_lang_url_params || "";
data.language_picker = $sp.getWidget("kb-language-picker",langOption);
})($sp);Add this to your Link Function, right between c.showFiltersButton = true; and c.showAndHideFilters:
$(".hide-filters").addClass("show-filters").removeClass("hide-filters");
$(".expand-width").addClass("original-width").removeClass("expand-width");