/*!
* jQuery ComboTree Plugin
* Author: Erhan FIRAT
* Mail: erhanfirat@gmail.com
* Licensed under the MIT license
* Version: 1.1
*/
;(function ( $, window, document, undefined ) {
// Create the defaults once
var comboTreePlugin = 'comboTree',
defaults = {
source: [],
isMultiple: false
};
// The actual plugin constructor
function ComboTree( element, options ) {
this.elemInput = element;
this._elemInput = $(element);
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = comboTreePlugin;
this.init();
}
ComboTree.prototype.init = function () {
// Setting Doms
this.comboTreeId = 'comboTree' + Math.floor(Math.random() * 999999);
this._elemInput.addClass('comboTreeInputBox');
if (this._elemInput.attr('id') === undefined)
this._elemInput.attr('id', this.comboTreeId + 'Input');
this.elemInputId = this._elemInput.attr('id');
this._elemInput.wrap('
');
this._elemInput.wrap('');
this._elemWrapper = $('#' + this.comboTreeId + 'Wrapper');
this._elemArrowBtn = $('');
this._elemInput.after(this._elemArrowBtn);
this._elemWrapper.append('');
// DORP DOWN AREA
this._elemDropDownContainer = $('#' + this.comboTreeId + 'DropDownContainer');
this._elemDropDownContainer.html(this.createSourceHTML());
this._elemItems = this._elemDropDownContainer.find('li');
this._elemItemsTitle = this._elemDropDownContainer.find('span.comboTreeItemTitle');
// VARIABLES
this._selectedItem = {};
this._selectedItems = [];
this.bindings();
};
// *********************************
// SOURCES CODES
// *********************************
ComboTree.prototype.removeSourceHTML = function () {
this._elemDropDownContainer.html('');
};
ComboTree.prototype.createSourceHTML = function () {
var sourceHTML = '';
if (this.options.isMultiple)
sourceHTML = this.createFilterHTMLForMultiSelect();
sourceHTML += this.createSourceSubItemsHTML(this.options.source);
return sourceHTML;
};
ComboTree.prototype.createFilterHTMLForMultiSelect = function (){
return '
';
}
ComboTree.prototype.createSourceSubItemsHTML = function (subItems) {
var subItemsHtml = '
';
for (var i=0; i'
return subItemsHtml;
}
ComboTree.prototype.createSourceItemHTML = function (sourceItem) {
var itemHtml = "",
isThereSubs = sourceItem.hasOwnProperty("subs");
itemHtml = '- ';
if (isThereSubs)
itemHtml += '−';
if (this.options.isMultiple)
itemHtml += '' + sourceItem.title + '';
else
itemHtml += '' + sourceItem.title + '';
if (isThereSubs)
itemHtml += this.createSourceSubItemsHTML(sourceItem.subs);
itemHtml += '
';
return itemHtml;
};
// BINDINGS
// *****************************
ComboTree.prototype.bindings = function () {
var _this = this;
this._elemArrowBtn.on('click', function(e){
e.stopPropagation();
_this.toggleDropDown();
});
this._elemInput.on('click', function(e){
e.stopPropagation();
if (!_this._elemDropDownContainer.is(':visible'))
_this.toggleDropDown();
});
this._elemItems.on('click', function(e){
e.stopPropagation();
if ($(this).hasClass('ComboTreeItemParent')){
_this.toggleSelectionTree(this);
}
});
this._elemItemsTitle.on('click', function(e){
e.stopPropagation();
if (_this.options.isMultiple)
_this.multiItemClick(this);
else
_this.singleItemClick(this);
});
this._elemItemsTitle.on("mousemove", function (e) {
e.stopPropagation();
_this.dropDownMenuHover(this);
});
// KEY BINDINGS
this._elemInput.on('keyup', function(e) {
e.stopPropagation();
switch (e.keyCode) {
case 27:
_this.closeDropDownMenu(); break;
case 13:
case 39: case 37: case 40: case 38:
e.preventDefault();
break;
default:
if (!_this.options.isMultiple)
_this.filterDropDownMenu();
break;
}
});
if (_this.options.isMultiple) {
$("#" + _this.comboTreeId + "MultiFilter").on('keyup', function(e) {
e.stopPropagation();
switch (e.keyCode) {
case 27:
$(this).val(''); _this.filterDropDownMenu(); break;
default:
_this.filterDropDownMenu();
break;
}
});
}
this._elemInput.on('keydown', function(e) {
e.stopPropagation();
switch (e.keyCode) {
case 9:
_this.closeDropDownMenu(); break;
case 40: case 38:
e.preventDefault();
_this.dropDownInputKeyControl(e.keyCode - 39); break;
case 37: case 39:
e.preventDefault();
_this.dropDownInputKeyToggleTreeControl(e.keyCode - 38);
break;
case 13:
if (_this.options.isMultiple)
_this.multiItemClick(_this._elemHoveredItem);
else
_this.singleItemClick(_this._elemHoveredItem);
e.preventDefault();
break;
default:
if (_this.options.isMultiple)
e.preventDefault();
}
});
// ON FOCUS OUT CLOSE DROPDOWN
$(document).on('mouseup.' + _this.comboTreeId, function (e){
if (!_this._elemWrapper.is(e.target) && _this._elemWrapper.has(e.target).length === 0 && _this._elemDropDownContainer.is(':visible'))
_this.closeDropDownMenu();
});
};
// EVENTS HERE
// ****************************
// DropDown Menu Open/Close
ComboTree.prototype.toggleDropDown = function () {
this._elemDropDownContainer.slideToggle(50);
this._elemInput.focus();
};
ComboTree.prototype.closeDropDownMenu = function () {
this._elemDropDownContainer.slideUp(50);
};
// Selection Tree Open/Close
ComboTree.prototype.toggleSelectionTree = function (item, direction) {
var subMenu = $(item).children('ul')[0];
if (direction === undefined){
if ($(subMenu).is(':visible'))
$(item).children('span.comboTreeParentPlus').html("+");
else
$(item).children('span.comboTreeParentPlus').html("−");
$(subMenu).slideToggle(50);
}
else if (direction == 1 && !$(subMenu).is(':visible')){
$(item).children('span.comboTreeParentPlus').html("−");
$(subMenu).slideDown(50);
}
else if (direction == -1){
if ($(subMenu).is(':visible')){
$(item).children('span.comboTreeParentPlus').html("+");
$(subMenu).slideUp(50);
}
else {
this.dropDownMenuHoverToParentItem(item);
}
}
};
// SELECTION FUNCTIONS
// *****************************
ComboTree.prototype.singleItemClick = function (ctItem) {
this._selectedItem = {
id: $(ctItem).attr("data-id"),
title: $(ctItem).text()
};
this.refreshInputVal();
this.closeDropDownMenu();
};
ComboTree.prototype.multiItemClick = function (ctItem) {
this._selectedItem = {
id: $(ctItem).attr("data-id"),
title: $(ctItem).text()
};
var index = this.isItemInArray(this._selectedItem, this._selectedItems);
if (index){
this._selectedItems.splice(parseInt(index), 1);
$(ctItem).find("input").prop('checked', false);
}
else {
this._selectedItems.push(this._selectedItem);
$(ctItem).find("input").prop('checked', true);
}
this.refreshInputVal();
};
ComboTree.prototype.isItemInArray = function (item, arr) {
for (var i=0; i0){
var tmpArr = [];
for (i=0; i0){
var tmpArr = [];
for (i=0; i