Commit 90b5975c authored by Kedar A.'s avatar Kedar A. 💻

New generic selector widget added

parent b9d2129d
<style type="text/css">
.selector-widget{
margin-bottom: 2rem;
border: solid thin #efefef;
/*background-color: red;*/
}
#select-search-container{
width: 100%;
background-color: whitesmoke;
}
#selected-items > .selection{
float: left;
margin: 0.25rem 0.5rem;
}
.selection > .item{
float: left;
font-size: larger;
padding-top: 1.5px;
}
i.remove-tag{
padding-left: 8px;
font-size: 1.1em;
cursor: pointer;
font-size: large;
}
#search-text{
min-height: 2em;
margin: auto 1em;
padding: 2px;
float: left;
color: gray;
}
#to-be-selected{
max-height: 10rem;
min-height: auto;
background-color: #efefef;
display: block;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 97%;
z-index: 1000;
box-shadow: 0 5px 5px 1px lightgray;
border: solid thin #efefef;
border-top: none;
}
#to-be-selected > .item{
cursor: pointer;
padding: 5px;
border-bottom: solid thin lightgray;
}
#to-be-selected > .item:hover{
background-color: lightgray;
}
.item-title{
text-transform: uppercase;
}
.item-description{
color: gray;
}
</style>
<div class="selector-widget" id="{{for}}-selector-widget">
<div class="row">
<div class="small-12 medium-12 columns">
<div id="select-search-container">
<div id="selected-items" style=""></div>
<div id="search-text" contenteditable>search</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-12 medium-centered columns">
<div id="to-be-selected" class="hide">
{% for each_opt in all_options %}
<div class="item" data-title="{{each_opt.name}}" data-description="{{each_opt.content_org|default_if_none:''}}" title="{{each_opt.content_org|default_if_none:each_opt.name}}" data-value="{{each_opt.pk}}">
<div class="row">
<!-- <div class="small-1 columns text-center"> </div> -->
<div class="small-12 columns">
<div class="item-title">
{{each_opt.name}}
</div>
<div class="item-description">
{{each_opt.content_org|default_if_none:''|safe|truncatechars:50}}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script type="text/javascript">
selected_options = [ {% for each_opt in selected_options %}"{{each_opt.pk|safe}}"{% if not forloop.last %},{% endif %}{% endfor %} ];
// console.log(selected_options)
// querySelector, jQuery style
var $s = function (selector) {
return document.querySelector(selector);
};
var $sa = function (selector) {
return document.querySelectorAll(selector);
};
toBeSelected = document.getElementById('to-be-selected');
selectedItems = document.getElementById('selected-items');
searchText = document.getElementById('search-text');
selectorWidget = $s('.selector-widget');
sItems = $sa("#to-be-selected .item");
function removeTag(){
tempItem = this.parentNode.querySelector('.item');
tempItem.style.textDecoration = '';
tempItem.onclick = addToSelection;
tempItem.querySelector('.item-description').classList.remove('hide');
toBeSelected.appendChild(tempItem);
this.parentNode.onclick = detachEvent
this.parentNode.remove();
toBeSelected.classList.remove('hide');
}
function lineThrough(){
this.previousSibling.style.textDecoration = 'line-through';
}
function removeLineThrough(){
this.previousSibling.style.textDecoration = ''
}
function detachEvent() { return false; }
function addToSelection () {
// console.log(this.textContent);
this.onclick = detachEvent;
this.querySelector('.item-description').classList.add('hide');
selDiv = document.createElement('div');
selDiv.classList.add('label', 'secondary', 'selection');
var closeBtn = document.createElement("i");
closeBtn.className = "fi-x-circle remove-tag";
closeBtn.title = "Remove";
closeBtn.onclick = removeTag;
closeBtn.onmouseenter = lineThrough;
closeBtn.onmouseleave = removeLineThrough;
selDiv.appendChild(this);
selDiv.appendChild(closeBtn);
selectedItems.appendChild(selDiv);
selDiv.onclick = function(){selectedItems.insertBefore(this, this.previousSibling );}
}
for (var i = sItems.length - 1; i >= 0; i--) {
sItems[i].onclick = addToSelection;
// console.log(sItems[i].getAttribute('data-value'))
}
for (var i = 0; i < selected_options.length; i++) {
temp_item = toBeSelected.querySelector('.item[data-value="'+ selected_options[i] +'"]');
if(temp_item){temp_item.click()};
};
function searchOnItems (){
// console.log(this.textContent)
var toBeSearch = this.textContent.trim().toLowerCase();
sItemsTemp = $sa("#to-be-selected .item");
for (var i = sItemsTemp.length - 1; i >= 0; i--) {
// sItemsTemp[i].style.display = (sItemsTemp[i].textContent.indexOf(toBeSearch)>=0)? 'block': 'none';
sItemsTemp[i].style.display = (sItemsTemp[i].getAttribute('data-title').toLowerCase().indexOf(toBeSearch)>=0)? 'block': 'none';
};
}
searchText.oninput = searchOnItems;
function showOptionItems () {
toBeSelected.classList.remove('hide');
// searchText.textContent = '';
if(!searchText.textContent || searchText.textContent=='search'){
searchText.textContent = '';
}
}
function hideOptionItems () {
// toBeSelected.style.display = 'none';
if(!searchText.textContent || searchText.textContent=='search'){
searchText.textContent = 'search';
}
}
searchText.onfocus = showOptionItems;
searchText.onblur = hideOptionItems;
function getSelectedValues ({{for}}) {
selected = selectedItems.querySelectorAll('.selection .item');
selectedValuesList = [];
for (var i = 0; i < selected.length; i++) {
selectedValuesList.push( selected[i].getAttribute('data-value') );
}
// console.log(selectedValuesList);
return selectedValuesList
}
function getSelValuesHiddenElement (name, idToAppend=false){
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = name;
hiddenInput.value = JSON.stringify(getSelectedValues());
if (idToAppend) {
document.getElementById(idToAppend).appendChild(hiddenInput);
}
return hiddenInput;
}
document.querySelector('html').onclick = function (e) {
// aaa = e;
p = $(e.target).closest('.selector-widget');
// console.log(p);
if (p.hasClass('selector-widget')) {
document.getElementById('to-be-selected').classList.remove('hide');
// console.log(e);
} else {
document.getElementById('to-be-selected').classList.add('hide');
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment