default

by levchenko_d

HTML

<script src="https://beat.today/javascripts/functions.js"></script>
<link rel="stylesheet" href="https://beat.today/stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul title="Filter Milstones" data-select-list-value="all" class="ms_sort_list _select_list with-input no-style">
  <div class="select-list-input-wrapper">
    <input type="text" class="input" placeholder="Start typing...">
  </div>
  
  <div onclick="App.selectList('.ms_sort_list');" class="_title_wrap">
    <h4 class="_title">all</h4>
    <i class="_icon icon-angle_down"></i>
  </div>
  
  <div class="_list">
    <li class="_item" data-select-list-name="all"><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="all" ><h4 class="_text">All</h4></a></li>
    <li class="_item" data-select-list-name="in process"><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="process" ><h4 class="_text">In Process</h4></a></li>
    <li class="_item" data-select-list-name="pending"><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="pending"><h4 class="_text">Pending</h4></a></li>
    <li class="_item" data-select-list-name="late="><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="late" ><h4 class="_text">Late</h4></a></li>
    <li class="_item" data-select-list-name="done"><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="done" ><h4 class="_text">Done</h4></a></li>
    <hr style="margin:0;">
    <li class="_item" data-select-list-name="archived"><a href="javascript:;" onclick="App.updateSelectList('.ms_sort_list', this);" data-select-list-value="archived"><h4 class="_text">Archived</h4></a></li>
    <li class="no-match __hide">
      <span class="text-gray">No results found</span>
   ...

CSS

body{
  background: silver;
  padding: 100px;
}

._select_list.with-input{
  
}

._select_list.with-input:not(.__active) .select-list-input-wrapper{
  display: none;
}

.select-list-input-wrapper {
  position: relative;
  z-index: 9;
}

.select-list-input-wrapper .input {
  border-radius: 0;
  border: none;
  border-bottom: solid 1px #D8DCE0;
  padding: 10px;
}

._select_list.with-input.__active ._title_wrap{
  display: none;
}


._select_list.with-input ._list ._item:not(.selected):hover{
  background: initial;
}

._select_list ._list ._item.selected{
  background-color: #f2f3f4;
}

._select_list ._list .no-match {
  padding: 10px;
  font-size: 8pt;
}

JavaScript

var Body = document.body;

App.isHover = function(id){
  return App.q(id) === App.q(id+':hover');
};
//IGNORE ABOVE





/*
handleArrowsNavigation - handles Up and Down nav only

Arguments:
manipulator - Element, input or something that already focused, so it could bind key events
list - nodeList of items you want to navigate through
onEnterKey - function, that fires when list item has been selected. If list.length == 1 it will select it without arrows

Example:

var keyNav = new handleArrowsNavigation(input, itemsList, function(selectedItem){
	App.updateSelectList(selector, selectedItem);
	input.value = '';
});

// if itemsList has been changed (filtered or something)
keyNav.updateList(changedItemsList);
*/

var handleArrowsNavigation = function(manipulator, list, onEnterKey){

	var _t = this;
  
  _t.manipulator = manipulator;
  _t.list = list
  _t.selectedItem = null;
  _t.listSize = _t.list.length;
  _t.i = -1;
  
      
  function select(newSelectedItem){ //hover
  	if(_t.selectedItem){ _t.selectedItem.removeClass('selected');}
  	_t.selectedItem = newSelectedItem;
    if(_t.selectedItem){ _t.selectedItem.addClass('selected');}
  };
  
  _t.select = select;
  
  function next(){
  	_t.i = _t.i+1 > _t.listSize-1 ? 0 : _t.i+1;
	  _t.select(_t.list[_t.i]);
  };
  
  function prev(){
		_t.i = _t.i-1 < 0 ? _t.listSize-1 : _t.i-1;
	  _t.select(_t.list[_t.i]);
  };
  
  function handleEnterKey(){
  	if(_t.listSize == 1 && !_t.selectedItem){
    	_t.selectedItem = _t.list[0];
    }
    
  	App.isFn(onEnterKey)(_t.selectedItem);
    _t.manipulator.removeEventListener('keydown', _t.handleKeydown);
		_t.reset();
  };
  _t.handleEnterKey = handleEnterKey;
  
  _t.handleKeydown = function(e){
  	if(e.keyCode === 38){//up
    	prev();
    } else if(e.keyCode === 40){//down
    	next();
    } else if(e.keyCode === 13){//enter
    	handleEnterKey();
    } else {
    	_t.reset();
    }
  };
  
  _t.manipulator.addEventListener('keydown', _t.handleKeydown);
  
 ...