框架重构
清除多余的业务
This commit is contained in:
橙子
22
WebFirst/wwwroot/vendors/combo-tree/LICENSE
vendored
Normal file
22
WebFirst/wwwroot/vendors/combo-tree/LICENSE
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 kirlisakal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
127
WebFirst/wwwroot/vendors/combo-tree/README.md
vendored
Normal file
127
WebFirst/wwwroot/vendors/combo-tree/README.md
vendored
Normal file
@@ -0,0 +1,127 @@
|
||||
|
||||
## 1.2.1 Updates
|
||||
- Filter is fixed & updated.
|
||||
- icontains.js dependency is deprecated.
|
||||
|
||||
# ComboTree jQuery Plugin v 1.2.1
|
||||
ComboTree is a jQuery Plugin which is a combobox item within tree structured data list and multiple/single selection options and more. It has been developed to manage large amount of choices in a combobox and multi selection feature.
|
||||
|
||||
|
||||
## Features:
|
||||
- Tree structured data list in combobox dropdown menu
|
||||
- Multiple & Single selection
|
||||
- Cascade selection (for multiple mode)
|
||||
- Returns selected item(s) as title or id array
|
||||
- Filtering (for multiple mode)
|
||||
- Consumes JSON source
|
||||
- Key controls are available for both selection and filter inputs.
|
||||
|
||||
|
||||
## Dependencies:
|
||||
- jQuery
|
||||
|
||||
## Configurations:
|
||||
- **isMultiple**: *{true/false} | default: false* | decide if it is multiple selection behaviour or single
|
||||
- **cascadeSelect**: *{true/false} | default: false* | decide if parent selection should cascade to children in multiple selection
|
||||
- **source**: *{JSON Data Array}* | takes source of combobox dropdown menu as a JSON array.
|
||||
- **selected**: *{JSON Data Array}* | takes the list of ID's that corespond from the source.
|
||||
- **collapse**: *{true/false} | default: false* | makes sub lists collapsed.
|
||||
|
||||
## Methods
|
||||
- **getSelectedIds()**: Returns selected item(s) id list as array or null. *(i.e. [12, 5, 7], [7], null)*
|
||||
- **getSelectedNames()**: Returns selected item(s) name list as array or null. *(i.e. ["Piegon", "Cat", "Horse"], ["Lion"], null)*
|
||||
- **setSource()**: You can initialize ComboTree then set source after your JSON data is retrieved.
|
||||
- **clearSelection()**: Clear selected items.
|
||||
- **setSelection(selectionIdList)**: Set selected values of combotree by id array or single id parameter. If you want to clear previous selections please use *clearSelection()* before *setSelection()*. *(i.e. ct1.setSelection([12, 5, 7]) | ct1.setSelection(5)*
|
||||
|
||||
## Events
|
||||
- **onChange(callBackFunction)**: Triggers after selection changes.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
There should be an input element to apply and a JSON Data source.
|
||||
|
||||
comboTree1 = $('#justAnInputBox').comboTree({
|
||||
source : SampleJSONData,
|
||||
isMultiple: true,
|
||||
cascadeSelect: true,
|
||||
selected: ['0']
|
||||
});
|
||||
|
||||
// Array, One title/id, or False value return
|
||||
var selectedTitles = comboTree1.getSelectedItemsTitle();
|
||||
var selectedIds = comboTree1.getSelectedItemsId();
|
||||
|
||||
// To remove plugin
|
||||
comboTree1.destroy();
|
||||
|
||||
|
||||
|
||||
## Source
|
||||
|
||||
Three parameter are needed: id, title and subs.
|
||||
|
||||
var SampleJSONData = [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Horse'
|
||||
}, {
|
||||
id: 1,
|
||||
title: 'Birds',
|
||||
subs: [
|
||||
{
|
||||
id: 10,
|
||||
title: 'Piegon'
|
||||
}, {
|
||||
id: 11,
|
||||
title: 'Parrot'
|
||||
}, {
|
||||
id: 12,
|
||||
title: 'Owl'
|
||||
}, {
|
||||
id: 13,
|
||||
title: 'Falcon'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
title: 'Rabbit'
|
||||
}, {
|
||||
id: 3,
|
||||
title: 'Fox'
|
||||
}, {
|
||||
id: 5,
|
||||
title: 'Cats',
|
||||
subs: [
|
||||
{
|
||||
id: 50,
|
||||
title: 'Kitty'
|
||||
}, {
|
||||
id: 51,
|
||||
title: 'Bigs',
|
||||
subs: [
|
||||
{
|
||||
id: 510,
|
||||
title: 'Cheetah'
|
||||
}, {
|
||||
id: 511,
|
||||
title: 'Jaguar'
|
||||
}, {
|
||||
id: 512,
|
||||
title: 'Leopard'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 6,
|
||||
title: 'Fish'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
## You can donate to support me
|
||||
|
||||
https://www.blockchain.com/btc/address/15c5AxBVgNxkwaHSTBZMiCV5PL41DKe88v
|
||||
154
WebFirst/wwwroot/vendors/combo-tree/Sample.html
vendored
Normal file
154
WebFirst/wwwroot/vendors/combo-tree/Sample.html
vendored
Normal file
@@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>ComboTree jQuery Plugin Demos by Erhan FIRAT</title>
|
||||
|
||||
|
||||
<link href="../bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
|
||||
|
||||
<link href="comboTreePlugin.css" rel="stylesheet" />
|
||||
<style>
|
||||
|
||||
body {
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 150px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>ComboTree jQuery Plugin Demos</h1>
|
||||
<div>
|
||||
<a href="https://github.com/erhanfirat/combo-tree/">Github Home Page</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h3>Multi Selection</h3>
|
||||
<input type="text" id="justAnInputBox" placeholder="Select" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h3>Multi Selection With Cascade Option Select</h3>
|
||||
<input type="text" id="justAnInputBox1" placeholder="Select" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h3>Single Selection</h3>
|
||||
<input type="text" id="justAnotherInputBox" placeholder="Type to filter" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../jquery/dist/jquery.js"></script>
|
||||
<script src="comboTreePlugin.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var SampleJSONData = [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Horse'
|
||||
}, {
|
||||
id: 1,
|
||||
title: 'Birds',
|
||||
isSelectable: false,
|
||||
subs: [
|
||||
{
|
||||
id: 10,
|
||||
title: 'Pigeon',
|
||||
isSelectable: false
|
||||
}, {
|
||||
id: 11,
|
||||
title: 'Parrot'
|
||||
}, {
|
||||
id: 12,
|
||||
title: 'Owl'
|
||||
}, {
|
||||
id: 13,
|
||||
title: 'Falcon'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
title: 'Rabbit'
|
||||
}, {
|
||||
id: 3,
|
||||
title: 'Fox'
|
||||
}, {
|
||||
id: 5,
|
||||
title: 'Cats',
|
||||
subs: [
|
||||
{
|
||||
id: 50,
|
||||
title: 'Kitty'
|
||||
}, {
|
||||
id: 51,
|
||||
title: 'Bigs',
|
||||
subs: [
|
||||
{
|
||||
id: 510,
|
||||
title: 'Cheetah'
|
||||
}, {
|
||||
id: 511,
|
||||
title: 'Jaguar'
|
||||
}, {
|
||||
id: 512,
|
||||
title: 'Leopard'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 6,
|
||||
title: 'Fish'
|
||||
}
|
||||
];
|
||||
var SampleJSONData2 = [
|
||||
|
||||
{
|
||||
id: 3,
|
||||
title: 'Bus'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
var comboTree1, comboTree2;
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
|
||||
comboTree1 = $('#justAnInputBox').comboTree({
|
||||
source: SampleJSONData,
|
||||
isMultiple: true,
|
||||
cascadeSelect: false,
|
||||
collapse: true,
|
||||
selectableLastNode: true
|
||||
|
||||
});
|
||||
|
||||
comboTree3 = $('#justAnInputBox1').comboTree({
|
||||
source: SampleJSONData,
|
||||
isMultiple: true,
|
||||
cascadeSelect: true,
|
||||
collapse: false
|
||||
});
|
||||
|
||||
comboTree3.setSource(SampleJSONData2);
|
||||
|
||||
|
||||
comboTree2 = $('#justAnotherInputBox').comboTree({
|
||||
source: SampleJSONData,
|
||||
isMultiple: false
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
151
WebFirst/wwwroot/vendors/combo-tree/comboTreePlugin.css
vendored
Normal file
151
WebFirst/wwwroot/vendors/combo-tree/comboTreePlugin.css
vendored
Normal file
@@ -0,0 +1,151 @@
|
||||
/*!
|
||||
* jQuery ComboTree Plugin
|
||||
* Author: Erhan FIRAT
|
||||
* Mail: erhanfirat@gmail.com
|
||||
* Licensed under the MIT license
|
||||
* Version: 1.2.1
|
||||
*/
|
||||
|
||||
|
||||
:root {
|
||||
--ct-bg: #fff;
|
||||
--ct-btn-hover: #e8e8e8;
|
||||
--ct-btn-active: #ddd;
|
||||
--ct-btn-color: #555;
|
||||
--ct-border-color: #e1e1e1;
|
||||
--ct-border-radius: 5px;
|
||||
--ct-tree-hover: #efefef;
|
||||
--ct-selection: #418EFF;
|
||||
--ct-padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
.comboTreeWrapper{
|
||||
position: relative;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.comboTreeInputWrapper{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comboTreeArrowBtn {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--ct-border-color);
|
||||
border-radius: 0 var(--ct-border-radius) var(--ct-border-radius) 0;
|
||||
background: var(--ct-border-color);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
user-select: none; /* Standard */
|
||||
}
|
||||
.comboTreeArrowBtn:hover {
|
||||
background: var(--ct-btn-hover);
|
||||
}
|
||||
.comboTreeArrowBtn:active {
|
||||
background: var(--ct-btn-active);
|
||||
}
|
||||
.comboTreeInputBox:focus + .comboTreeArrowBtn {
|
||||
color: var(--ct-btn-color);
|
||||
border-top: 1px solid var(--ct-selection);
|
||||
border-right: 1px solid var(--ct-selection);
|
||||
border-bottom: 1px solid var(--ct-selection);
|
||||
}
|
||||
|
||||
.comboTreeArrowBtnImg{
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.comboTreeDropDownContainer {
|
||||
display: none;
|
||||
background: var(--ct-bg);
|
||||
border: 1px solid var(--ct-border-color);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.comboTreeDropDownContainer ul{
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comboTreeDropDownContainer li{
|
||||
list-style-type: none;
|
||||
|
||||
}
|
||||
|
||||
.comboTreeDropDownContainer li .selectable{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comboTreeDropDownContainer li .not-selectable{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.comboTreeDropDownContainer li:hover{
|
||||
background-color: var(--ct-tree-hover);}
|
||||
.comboTreeDropDownContainer li:hover ul{
|
||||
background-color: var(--ct-bg)}
|
||||
.comboTreeDropDownContainer li span.comboTreeItemTitle.comboTreeItemHover{
|
||||
background-color: var(--ct-selection);
|
||||
color: var(--ct-bg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
span.comboTreeItemTitle{
|
||||
display: block;
|
||||
padding: 3px var(--ct-padding);
|
||||
}
|
||||
.comboTreeDropDownContainer label{
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.comboTreeDropDownContainer .comboTreeItemTitle input {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin: 0px 4px 0px 0px;
|
||||
}
|
||||
.comboTreeParentPlus{
|
||||
position: relative;
|
||||
left: -12px;
|
||||
top: 4px;
|
||||
width: 4px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.comboTreeInputBox {
|
||||
padding: var(--ct-padding);
|
||||
border-radius: var(--ct-border-radius);
|
||||
border: 1px solid var(--ct-border-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.comboTreeInputBox:focus {
|
||||
border: 1px solid var(--ct-selection);
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.multiplesFilter{
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--ct-border-color);
|
||||
}
|
||||
625
WebFirst/wwwroot/vendors/combo-tree/comboTreePlugin.js
vendored
Normal file
625
WebFirst/wwwroot/vendors/combo-tree/comboTreePlugin.js
vendored
Normal file
@@ -0,0 +1,625 @@
|
||||
/*!
|
||||
* jQuery ComboTree Plugin
|
||||
* Author: Erhan FIRAT
|
||||
* Mail: erhanfirat@gmail.com
|
||||
* Licensed under the MIT license
|
||||
* Version: 1.2.1
|
||||
*/
|
||||
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
// Default settings
|
||||
var comboTreePlugin = 'comboTree',
|
||||
defaults = {
|
||||
source: [],
|
||||
isMultiple: false,
|
||||
cascadeSelect: false,
|
||||
selected: [],
|
||||
collapse: false,
|
||||
selectableLastNode: false
|
||||
};
|
||||
|
||||
// LIFE CYCLE
|
||||
function ComboTree( element, options ) {
|
||||
|
||||
this.options = $.extend( {}, defaults, options) ;
|
||||
this._defaults = defaults;
|
||||
this._name = comboTreePlugin;
|
||||
|
||||
this.constructorFunc(element, options);
|
||||
}
|
||||
|
||||
ComboTree.prototype.constructorFunc = function(element, options){
|
||||
this.elemInput = element;
|
||||
this._elemInput = $(element);
|
||||
|
||||
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('<div id="'+ this.comboTreeId + 'Wrapper" class="comboTreeWrapper"></div>');
|
||||
this._elemInput.wrap('<div id="'+ this.comboTreeId + 'InputWrapper" class="comboTreeInputWrapper"></div>');
|
||||
this._elemWrapper = $('#' + this.comboTreeId + 'Wrapper');
|
||||
|
||||
this._elemArrowBtn = $('<div id="' + this.comboTreeId + 'ArrowBtn" class="comboTreeArrowBtn" type="button"><span class="mdi mdi-chevron-down comboTreeArrowBtnImg"></span></div>');
|
||||
this._elemInput.after(this._elemArrowBtn);
|
||||
this._elemWrapper.append('<div id="' + this.comboTreeId + 'DropDownContainer" class="comboTreeDropDownContainer"><div class="comboTreeDropDownContent"></div>');
|
||||
|
||||
// DORP DOWN AREA
|
||||
this._elemDropDownContainer = $('#' + this.comboTreeId + 'DropDownContainer');
|
||||
|
||||
this._elemDropDownContainer.html(this.createSourceHTML());
|
||||
this._elemFilterInput = this.options.isMultiple ? $('#' + this.comboTreeId + 'MultiFilter') : null;
|
||||
this._elemSourceUl = $('#' + this.comboTreeId + 'ComboTreeSourceUl');
|
||||
|
||||
this._elemItems = this._elemDropDownContainer.find('li');
|
||||
this._elemItemsTitle = this._elemDropDownContainer.find('span.comboTreeItemTitle');
|
||||
|
||||
// VARIABLES
|
||||
this._selectedItem = {};
|
||||
this._selectedItems = [];
|
||||
|
||||
this.processSelected();
|
||||
|
||||
this.bindings();
|
||||
};
|
||||
|
||||
ComboTree.prototype.unbind = function () {
|
||||
this._elemArrowBtn.off('click');
|
||||
this._elemInput.off('click');
|
||||
this._elemItems.off('click');
|
||||
this._elemItemsTitle.off('click');
|
||||
this._elemItemsTitle.off("mousemove");
|
||||
this._elemInput.off('keyup');
|
||||
this._elemInput.off('keydown');
|
||||
this._elemInput.off('mouseup.' + this.comboTreeId);
|
||||
$(document).off('mouseup.' + this.comboTreeId);
|
||||
}
|
||||
|
||||
ComboTree.prototype.destroy = function () {
|
||||
this.unbind();
|
||||
this._elemWrapper.before(this._elemInput);
|
||||
this._elemWrapper.remove();
|
||||
//this._elemInput.removeData('plugin_' + comboTreePlugin);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CREATE DOM HTMLs
|
||||
|
||||
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 '<input id="' + this.comboTreeId + 'MultiFilter" type="text" class="multiplesFilter" placeholder="Type to filter"/>';
|
||||
}
|
||||
|
||||
ComboTree.prototype.createSourceSubItemsHTML = function (subItems, parentId) {
|
||||
if (subItems == null)
|
||||
subItems = [];
|
||||
var subItemsHtml = '<UL id="' + this.comboTreeId + 'ComboTreeSourceUl' + (parentId ? parentId : 'main' ) + '" style="' + ((this.options.collapse && parentId) ? 'display:none;' : '') + '">';
|
||||
for (var i=0; i<subItems.length; i++){
|
||||
subItemsHtml += this.createSourceItemHTML(subItems[i]);
|
||||
}
|
||||
subItemsHtml += '</UL>'
|
||||
return subItemsHtml;
|
||||
}
|
||||
|
||||
ComboTree.prototype.createSourceItemHTML = function (sourceItem) {
|
||||
var itemHtml = "",
|
||||
isThereSubs = sourceItem.hasOwnProperty("subs");
|
||||
let isSelectable = (sourceItem.isSelectable === undefined ? true : sourceItem.isSelectable),
|
||||
selectableClass = (isSelectable || isThereSubs) ? 'selectable' : 'not-selectable',
|
||||
selectableLastNode = (this.options.selectableLastNode!==undefined && isThereSubs) ? this.options.selectableLastNode : false;
|
||||
|
||||
itemHtml += '<LI id="' + this.comboTreeId + 'Li' + sourceItem.id + '" class="ComboTreeItem' + (isThereSubs?'Parent':'Chlid') + '"> ';
|
||||
|
||||
if (isThereSubs)
|
||||
itemHtml += '<span class="comboTreeParentPlus">' + (this.options.collapse ? '<span class="mdi mdi-chevron-right-circle-outline"></span>' : '<span class="mdi mdi-chevron-down-circle-outline"></span>') + '</span>'; // itemHtml += '<span class="comboTreeParentPlus">' + (this.options.collapse ? '+' : '−') + '</span>';
|
||||
|
||||
if (this.options.isMultiple)
|
||||
itemHtml += '<span data-id="' + sourceItem.id + '" data-selectable="' + isSelectable + '" class="comboTreeItemTitle ' + selectableClass + '">' + (!selectableLastNode && isSelectable ? '<input type="checkbox" />' : '') + sourceItem.title + '</span>';
|
||||
else
|
||||
itemHtml += '<span data-id="' + sourceItem.id + '" data-selectable="' + isSelectable + '" class="comboTreeItemTitle ' + selectableClass + '">' + sourceItem.title + '</span>';
|
||||
|
||||
if (isThereSubs)
|
||||
itemHtml += this.createSourceSubItemsHTML(sourceItem.subs, sourceItem.id);
|
||||
|
||||
itemHtml += '</LI>';
|
||||
return itemHtml;
|
||||
};
|
||||
|
||||
|
||||
// BINDINGS
|
||||
|
||||
ComboTree.prototype.bindings = function () {
|
||||
var _this = this;
|
||||
|
||||
$(this._elemInput).focus(function (e) {
|
||||
if (!_this._elemDropDownContainer.is(':visible'))
|
||||
$(_this._elemDropDownContainer).slideToggle(100);
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
this._elemFilterInput && this._elemFilterInput.on('keyup', function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 27:
|
||||
if ($(this).val()) {
|
||||
$(this).val('');
|
||||
_this.filterDropDownMenu();
|
||||
} else {
|
||||
_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:
|
||||
_this.multiItemClick(_this._elemHoveredItem);
|
||||
e.preventDefault();
|
||||
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 () {
|
||||
let _this = this;
|
||||
$(this._elemDropDownContainer).slideToggle(100, function () {
|
||||
if (_this._elemDropDownContainer.is(':visible'))
|
||||
$(_this._elemInput).focus();
|
||||
});
|
||||
};
|
||||
|
||||
ComboTree.prototype.closeDropDownMenu = function () {
|
||||
$(this._elemDropDownContainer).slideUp(100);
|
||||
};
|
||||
|
||||
// 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('<span class="mdi mdi-chevron-right-circle-outline"></span>'); //$(item).children('span.comboTreeParentPlus').html("+");
|
||||
else
|
||||
$(item).children('span.comboTreeParentPlus').html('<span class="mdi mdi-chevron-down-circle-outline"></span>'); //$(item).children('span.comboTreeParentPlus').html("−");
|
||||
|
||||
$(subMenu).slideToggle(50);
|
||||
}
|
||||
else if (direction == 1 && !$(subMenu).is(':visible')){
|
||||
$(item).children('span.comboTreeParentPlus').html('<span class="mdi mdi-chevron-down-circle-outline"></span>'); //$(item).children('span.comboTreeParentPlus').html("−");
|
||||
$(subMenu).slideDown(50);
|
||||
}
|
||||
else if (direction == -1){
|
||||
if ($(subMenu).is(':visible')){
|
||||
$(item).children('span.comboTreeParentPlus').html('<span class="mdi mdi-chevron-right-circle-outline"></span>'); //$(item).children('span.comboTreeParentPlus').html("+");
|
||||
$(subMenu).slideUp(50);
|
||||
}
|
||||
else {
|
||||
this.dropDownMenuHoverToParentItem(item);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// SELECTION FUNCTIONS
|
||||
ComboTree.prototype.selectMultipleItem = function(ctItem){
|
||||
|
||||
if (this.options.selectableLastNode && $(ctItem).parent('li').hasClass('ComboTreeItemParent')) {
|
||||
|
||||
this.toggleSelectionTree($(ctItem).parent('li'));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($(ctItem).data("selectable") == true) {
|
||||
this._selectedItem = {
|
||||
id: $(ctItem).attr("data-id"),
|
||||
title: $(ctItem).text()
|
||||
};
|
||||
|
||||
let check = this.isItemInArray(this._selectedItem, this.options.source);
|
||||
if (check) {
|
||||
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);
|
||||
}
|
||||
} // if check
|
||||
} // if selectable
|
||||
};
|
||||
|
||||
ComboTree.prototype.singleItemClick = function (ctItem) {
|
||||
if ($(ctItem).data("selectable") == true) {
|
||||
this._selectedItem = {
|
||||
id: $(ctItem).attr("data-id"),
|
||||
title: $(ctItem).text()
|
||||
};
|
||||
} // if selectable
|
||||
|
||||
this.refreshInputVal();
|
||||
this.closeDropDownMenu();
|
||||
};
|
||||
|
||||
ComboTree.prototype.multiItemClick = function (ctItem) {
|
||||
this.selectMultipleItem(ctItem);
|
||||
|
||||
if (this.options.cascadeSelect) {
|
||||
if ($(ctItem).parent('li').hasClass('ComboTreeItemParent')) {
|
||||
var subMenu = $(ctItem).parent('li').children('ul').first().find('input[type="checkbox"]');
|
||||
subMenu.each(function() {
|
||||
var $input = $(this)
|
||||
if ($(ctItem).children('input[type="checkbox"]').first().prop("checked")!==$input.prop('checked')) {
|
||||
$input.prop('checked', !$(ctItem).children('input[type="checkbox"]').first().prop("checked"));
|
||||
$input.trigger('click');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
this.refreshInputVal();
|
||||
};
|
||||
|
||||
|
||||
// recursive search for item in arr
|
||||
ComboTree.prototype.isItemInArray = function (item, arr) {
|
||||
if (arr == null)
|
||||
return true;
|
||||
for (var i=0; i<arr.length; i++) {
|
||||
if (item.id == arr[i].id && item.title == arr[i].title)
|
||||
return i + "";
|
||||
|
||||
if (arr[i].hasOwnProperty("subs")) {
|
||||
let found = this.isItemInArray(item, arr[i].subs);
|
||||
if (found)
|
||||
return found;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
ComboTree.prototype.refreshInputVal = function () {
|
||||
var tmpTitle = "";
|
||||
|
||||
if (this.options.isMultiple) {
|
||||
for (var i=0; i<this._selectedItems.length; i++){
|
||||
tmpTitle += this._selectedItems[i].title;
|
||||
if (i<this._selectedItems.length-1)
|
||||
tmpTitle += ", ";
|
||||
}
|
||||
}
|
||||
else {
|
||||
tmpTitle = this._selectedItem.title;
|
||||
}
|
||||
|
||||
this._elemInput.val(tmpTitle);
|
||||
this._elemInput.parent().parent().next().val(this._selectedItem.id);
|
||||
this._elemInput.trigger('change');
|
||||
|
||||
if (this.changeHandler)
|
||||
this.changeHandler();
|
||||
};
|
||||
|
||||
ComboTree.prototype.dropDownMenuHover = function (itemSpan, withScroll) {
|
||||
this._elemItems.find('span.comboTreeItemHover').removeClass('comboTreeItemHover');
|
||||
$(itemSpan).addClass('comboTreeItemHover');
|
||||
this._elemHoveredItem = $(itemSpan);
|
||||
if (withScroll)
|
||||
this.dropDownScrollToHoveredItem(this._elemHoveredItem);
|
||||
}
|
||||
|
||||
ComboTree.prototype.dropDownScrollToHoveredItem = function (itemSpan) {
|
||||
var curScroll = this._elemSourceUl.scrollTop();
|
||||
this._elemSourceUl.scrollTop(curScroll + $(itemSpan).parent().position().top - 80);
|
||||
}
|
||||
|
||||
ComboTree.prototype.dropDownMenuHoverToParentItem = function (item) {
|
||||
var parentSpanItem = $($(item).parents('li.ComboTreeItemParent')[0]).children("span.comboTreeItemTitle");
|
||||
if (parentSpanItem.length)
|
||||
this.dropDownMenuHover(parentSpanItem, true);
|
||||
else
|
||||
this.dropDownMenuHover(this._elemItemsTitle[0], true);
|
||||
}
|
||||
|
||||
ComboTree.prototype.dropDownInputKeyToggleTreeControl = function (direction) {
|
||||
var item = this._elemHoveredItem;
|
||||
if ($(item).parent('li').hasClass('ComboTreeItemParent'))
|
||||
this.toggleSelectionTree($(item).parent('li'), direction);
|
||||
else if (direction == -1)
|
||||
this.dropDownMenuHoverToParentItem(item);
|
||||
}
|
||||
|
||||
ComboTree.prototype.dropDownInputKeyControl = function (step) {
|
||||
if (!this._elemDropDownContainer.is(":visible"))
|
||||
this.toggleDropDown();
|
||||
|
||||
var list = this._elemItems.find("span.comboTreeItemTitle:visible");
|
||||
i = this._elemHoveredItem?list.index(this._elemHoveredItem) + step:0;
|
||||
i = (list.length + i) % list.length;
|
||||
|
||||
this.dropDownMenuHover(list[i], true);
|
||||
},
|
||||
|
||||
ComboTree.prototype.filterDropDownMenu = function () {
|
||||
var searchText = '';
|
||||
if (!this.options.isMultiple)
|
||||
searchText = this._elemInput.val();
|
||||
else
|
||||
searchText = $("#" + this.comboTreeId + "MultiFilter").val();
|
||||
|
||||
if (searchText != ""){
|
||||
this._elemItemsTitle.hide();
|
||||
this._elemItemsTitle.siblings("span.comboTreeParentPlus").hide();
|
||||
list = this._elemItems
|
||||
.filter((index, item) => {
|
||||
return item.innerHTML.toLowerCase().indexOf(searchText.toLowerCase()) != -1;
|
||||
})
|
||||
.each(function (i, elem) {
|
||||
$(this.children).show()
|
||||
$(this).siblings("span.comboTreeParentPlus").show();
|
||||
});
|
||||
}
|
||||
else{
|
||||
this._elemItemsTitle.show();
|
||||
this._elemItemsTitle.siblings("span.comboTreeParentPlus").show();
|
||||
}
|
||||
}
|
||||
|
||||
ComboTree.prototype.processSelected = function () {
|
||||
let elements = this._elemItemsTitle;
|
||||
let selectedItem = this._selectedItem;
|
||||
let selectedItems = this._selectedItems;
|
||||
this.options.selected.forEach(function(element) {
|
||||
let selected = $(elements).filter(function(){
|
||||
return $(this).data('id') == element;
|
||||
});
|
||||
|
||||
if(selected.length > 0){
|
||||
$(selected).find('input').attr('checked', true);
|
||||
|
||||
selectedItem = {
|
||||
id: selected.data("id"),
|
||||
title: selected.text()
|
||||
};
|
||||
selectedItems.push(selectedItem);
|
||||
}
|
||||
});
|
||||
|
||||
//Without this it doesn't work
|
||||
this._selectedItem = selectedItem;
|
||||
|
||||
this.refreshInputVal();
|
||||
};
|
||||
|
||||
|
||||
// METHODS
|
||||
|
||||
|
||||
ComboTree.prototype.findItembyId = function(itemId, source) {
|
||||
if (itemId && source) {
|
||||
for (let i=0; i<source.length; i++) {
|
||||
if (source[i].id == itemId)
|
||||
return {id: source[i].id, title: source[i].title};
|
||||
if (source[i].hasOwnProperty("subs")) {
|
||||
let found = this.findItembyId(itemId, source[i].subs);
|
||||
if (found)
|
||||
return found;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Returns selected id array or null
|
||||
ComboTree.prototype.getSelectedIds = function () {
|
||||
if (this.options.isMultiple && this._selectedItems.length>0){
|
||||
var tmpArr = [];
|
||||
for (i=0; i<this._selectedItems.length; i++)
|
||||
tmpArr.push(this._selectedItems[i].id);
|
||||
|
||||
return tmpArr;
|
||||
}
|
||||
else if (!this.options.isMultiple && this._selectedItem.hasOwnProperty('id')){
|
||||
return [this._selectedItem.id];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Retuns Array (multiple), Integer (single), or False (No choice)
|
||||
ComboTree.prototype.getSelectedNames = function () {
|
||||
if (this.options.isMultiple && this._selectedItems.length>0){
|
||||
var tmpArr = [];
|
||||
for (i=0; i<this._selectedItems.length; i++)
|
||||
tmpArr.push(this._selectedItems[i].title);
|
||||
|
||||
return tmpArr;
|
||||
}
|
||||
else if (!this.options.isMultiple && this._selectedItem.hasOwnProperty('id')){
|
||||
return this._selectedItem.title;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
ComboTree.prototype.setSource = function(source) {
|
||||
this._selectedItems = [];
|
||||
|
||||
this.destroy();
|
||||
this.options.source = source;
|
||||
this.constructorFunc(this.elemInput, this.options);
|
||||
};
|
||||
|
||||
ComboTree.prototype.clearSelection = function() {
|
||||
for (i=0; i<this._selectedItems.length; i++) {
|
||||
let itemElem = $("#" + this.comboTreeId + 'Li' + this._selectedItems[i].id);
|
||||
$(itemElem).find("input").prop('checked', false);
|
||||
}
|
||||
this._selectedItems = [];
|
||||
this.refreshInputVal();
|
||||
};
|
||||
|
||||
ComboTree.prototype.setSelection = function (selectionIdList) {
|
||||
if (selectionIdList && selectionIdList.length && selectionIdList.length > 0) {
|
||||
for (let i = 0; i < selectionIdList.length; i++) {
|
||||
let selectedItem = this.findItembyId(selectionIdList[i], this.options.source);
|
||||
|
||||
if (selectedItem) {
|
||||
let check = this.isItemInArray(selectedItem, this.options.source);
|
||||
if (check) {
|
||||
var index = this.isItemInArray(selectedItem, this._selectedItems);
|
||||
if (!index) {
|
||||
let selectedItemElem = $("#" + this.comboTreeId + 'Li' + selectionIdList[i]);
|
||||
|
||||
this._selectedItems.push(selectedItem);
|
||||
this._selectedItem = selectedItem;
|
||||
$(selectedItemElem).find("input").prop('checked', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.refreshInputVal();
|
||||
};
|
||||
|
||||
|
||||
// EVENTS
|
||||
|
||||
ComboTree.prototype.onChange = function(callBack) {
|
||||
if (callBack && typeof callBack === "function")
|
||||
this.changeHandler = callBack;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// -----
|
||||
|
||||
$.fn[comboTreePlugin] = function (options) {
|
||||
var ctArr = [];
|
||||
this.each(function () {
|
||||
if (!$.data(this, 'plugin_' + comboTreePlugin)) {
|
||||
$.data(this, 'plugin_' + comboTreePlugin, new ComboTree( this, options));
|
||||
ctArr.push($(this).data()['plugin_' + comboTreePlugin]);
|
||||
}
|
||||
});
|
||||
|
||||
if (this.length == 1)
|
||||
return ctArr[0];
|
||||
else
|
||||
return ctArr;
|
||||
}
|
||||
|
||||
})( jQuery, window, document );
|
||||
Reference in New Issue
Block a user