В проект добавлены nmp модули Компоненты фильтра разбиты на классы, собираются babel Исправлены недоработкиremotes/origin/PR-39
booblegum
9 years ago
parent
cffe017ffe
commit
faa3b01e8b
43 changed files with 2879 additions and 873 deletions
@ -0,0 +1,5 @@ |
|||||||
|
#!/usr/bin/env bash |
||||||
|
echo "run watchify" |
||||||
|
cd .. |
||||||
|
source ~/venv/proekton/bin/activate |
||||||
|
watchify ./src/init.js -t babelify -o ./build/init.js |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,16 @@ |
|||||||
|
.editable-container { |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
background-color: #e5e5e5; |
||||||
|
color: #585858; |
||||||
|
font-size: 9pt; |
||||||
|
padding: 5px 10px; |
||||||
|
height: 51px; |
||||||
|
margin-left: 8px; |
||||||
|
position: relative; |
||||||
|
left: -30px; |
||||||
|
} |
||||||
|
|
||||||
|
.vertical-child { |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
body { |
||||||
|
font-size: 11pt; |
||||||
|
font-family: Arial-MT-Regular, Arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
/*input[type="checkbox"] + span, input[type="checkbox"]:checked + span {*/ |
||||||
|
/*all: initial;*/ |
||||||
|
/*font-size: 9pt;*/ |
||||||
|
/*color: #494546;*/ |
||||||
|
/*cursor: pointer;*/ |
||||||
|
/*font-family: Arial-MT-Regular, Arial, sans-serif;*/ |
||||||
|
/*}*/ |
||||||
|
|
||||||
|
/*label {*/ |
||||||
|
/*all: initial;*/ |
||||||
|
/*}*/ |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: "Myriad"; |
||||||
|
src: url("../fonts/MyriadPro/MyriadPro-Cond.otf"); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Myriad"; |
||||||
|
src: url("../fonts/MyriadPro/MyriadPro-BoldCond.otf"); |
||||||
|
|
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "Myriad"; |
||||||
|
src: url("../fonts/MyriadPro/MyriadPro-CondIt.otf"); |
||||||
|
|
||||||
|
font-weight: normal; |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
.selected-container { |
||||||
|
/*display: inline-block;*/ |
||||||
|
/*width: 100%;*/ |
||||||
|
min-height: 40px; |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.selected-container .selected-element { |
||||||
|
/*display: inline-block;*/ |
||||||
|
padding: 5px 35px 5px 10px; |
||||||
|
margin-top: 8px; |
||||||
|
min-height: 45px; |
||||||
|
background-color: #e3e3e3; |
||||||
|
border: 1px solid #dbdbdb; |
||||||
|
position: relative; |
||||||
|
-moz-border-radius: 10px; /* Firefox */ |
||||||
|
-webkit-border-radius: 10px; /* Safari 4 */ |
||||||
|
border-radius: 10px; /* IE 9, Safari 5, Chrome */ |
||||||
|
} |
||||||
|
.horizontal .selected-element{ |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.selected-element .header,.name{ |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.selected-element .header{ |
||||||
|
font-size: 7pt; |
||||||
|
color: #676363; |
||||||
|
/*white-space: nowrap;*/ |
||||||
|
/*text-overflow: ellipsis;*/ |
||||||
|
/*overflow: hidden;*/ |
||||||
|
/*word-wrap: break-word;*/ |
||||||
|
/*width: 100%;*/ |
||||||
|
} |
||||||
|
|
||||||
|
.selected-element .name { |
||||||
|
font-size: 11pt; |
||||||
|
/*white-space: nowrap;*/ |
||||||
|
/*text-overflow: ellipsis;*/ |
||||||
|
/*overflow: hidden;*/ |
||||||
|
/*width: 100%;*/ |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.selected-element .icon-remove{ |
||||||
|
background-image: url('../img/cross01.png'); |
||||||
|
background-size: 20px 20px; |
||||||
|
/*display: inline-block;*/ |
||||||
|
position: absolute; |
||||||
|
right: 5px; |
||||||
|
top: 15px; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
cursor: pointer; |
||||||
|
margin-left: -20px; |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
/** Created by TTF.in.ua **/ |
||||||
|
@font-face { |
||||||
|
font-family: 'Arial-MT-Regular'; |
||||||
|
src: url('Arial-MT-Regular.eot'); |
||||||
|
src: url('Arial-MT-Regular.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('Arial-MT-Regular.woff') format('woff'), |
||||||
|
url('Arial-MT-Regular.ttf') format('truetype'), |
||||||
|
url('Arial-MT-Regular.svg#Arial-MT-Regular') format('svg'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 183 KiB |
@ -1,306 +0,0 @@ |
|||||||
// `
|
|
||||||
class SelectBox { |
|
||||||
constructor($container, data, has_editable_container, vertical_child) { |
|
||||||
this.container_id = $container.attr("id"); |
|
||||||
this.tree_data = new SpecTree(data); |
|
||||||
// Вариант не выбран
|
|
||||||
this.selected_id = undefined; |
|
||||||
let template = SelectBox.getTemplate("Header", this.container_id, has_editable_container, vertical_child); |
|
||||||
$container.replaceWith(template); |
|
||||||
this._buildComponents(); |
|
||||||
this._bindEvents(); |
|
||||||
if (!has_editable_container) this.hide(); |
|
||||||
} |
|
||||||
|
|
||||||
static getTemplate(header, id, editable_container, vertical_child) { |
|
||||||
let main = ` |
|
||||||
<div class="row"> |
|
||||||
<div class="col-lg-3 test"> |
|
||||||
<input class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
|
||||||
<button class="button-add options">добавить</button> |
|
||||||
</div> |
|
||||||
<div class="col-lg-9"> |
|
||||||
<span class="editable-container"></span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
`;
|
|
||||||
let child = ` |
|
||||||
<input class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
|
||||||
<span style="clear:both; display:block"></span> |
|
||||||
<button class="button-add options">добавить</button> |
|
||||||
`;
|
|
||||||
let insert_template = editable_container ? main : child; |
|
||||||
vertical_child = vertical_child ? 'vertical-child' : ''; |
|
||||||
let htmlTemplate = |
|
||||||
` |
|
||||||
<span class="select-box-container ${vertical_child}" id="${id}"> |
|
||||||
<div class="select-box-header"> |
|
||||||
<span class="header">${header}</span> |
|
||||||
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
|
||||||
</div> |
|
||||||
<span class="select-box-search"> |
|
||||||
${insert_template} |
|
||||||
</span> |
|
||||||
<span class="select-box-options"> |
|
||||||
<span class="box-wrapper"> |
|
||||||
<ul> |
|
||||||
|
|
||||||
</ul> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
<span class="select-box-results"> |
|
||||||
<span class="box-wrapper"> |
|
||||||
<span class="main-part"> |
|
||||||
<ul> |
|
||||||
</ul> |
|
||||||
</span> |
|
||||||
<span class="other-part"> |
|
||||||
<span class="other-header">Из других категорий</span> |
|
||||||
<ul> |
|
||||||
</ul> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
<button class="button-add results">добавить</button> |
|
||||||
</span> |
|
||||||
<span style="clear: both"></span> |
|
||||||
</span> |
|
||||||
`;
|
|
||||||
return htmlTemplate; |
|
||||||
} |
|
||||||
|
|
||||||
_buildComponents() { |
|
||||||
this.$select_box = $(`#${this.container_id}`); |
|
||||||
this.$header = this.$select_box.find('.select-box-header .header'); |
|
||||||
this.$results_box = this.$select_box.find('.select-box-results'); |
|
||||||
this.$options_box = this.$select_box.find('.select-box-options'); |
|
||||||
this.$search_input = this.$select_box.find('input.select-box-search'); |
|
||||||
this.$button_add = this.$results_box.find('.button-add'); |
|
||||||
this.$button_add_options = this.$select_box.find('.button-add.options'); |
|
||||||
this.$editable_container = this.$select_box.find('.editable-container'); |
|
||||||
this._fillOptionsData(); |
|
||||||
this.$results_box.hide(); |
|
||||||
this.$options_box.hide(); |
|
||||||
this.$button_add_options.hide(); |
|
||||||
// TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
|
|
||||||
} |
|
||||||
|
|
||||||
static highlight(string, sub_string) { |
|
||||||
let index = string.toLowerCase().indexOf(sub_string.toLowerCase()); |
|
||||||
if (index === -1) return string; |
|
||||||
let light_template = (el) => `<span class="highlight">${el}</span>`; |
|
||||||
let [to, select, after] = [string.slice(0, index), |
|
||||||
string.slice(index, index + sub_string.length), |
|
||||||
string.slice(index + sub_string.length)]; |
|
||||||
return `${to}${light_template(select)}${after}` |
|
||||||
} |
|
||||||
|
|
||||||
hide() { |
|
||||||
this.$select_box.hide(); |
|
||||||
} |
|
||||||
|
|
||||||
show() { |
|
||||||
this.$select_box.show(); |
|
||||||
} |
|
||||||
|
|
||||||
clear() { |
|
||||||
this.$search_input.val(""); |
|
||||||
this.$options_box.hide(); |
|
||||||
this.$results_box.hide(); |
|
||||||
this.$button_add_options.hide(); |
|
||||||
this.element_id = undefined; |
|
||||||
this.parent_id = undefined; |
|
||||||
this.$editable_container.html(""); |
|
||||||
if (this.prev_select_box) this.hide(); |
|
||||||
this.selected_id = undefined; |
|
||||||
this.selected_val = ""; |
|
||||||
} |
|
||||||
|
|
||||||
clearAll(only_next) { |
|
||||||
// console.log("only_next = ", only_next);
|
|
||||||
if (this.next_select_box) { |
|
||||||
this.next_select_box.clear() |
|
||||||
} |
|
||||||
if (!only_next) { |
|
||||||
this.clear(); |
|
||||||
if (this.prev_select_box) this.prev_select_box.clearAll(only_next) |
|
||||||
} else { |
|
||||||
if (this.next_select_box) this.next_select_box.clearAll(only_next) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
setHeader(header) { |
|
||||||
this.$header.html(header); |
|
||||||
this.show(); |
|
||||||
} |
|
||||||
|
|
||||||
setParent(parent_id) { |
|
||||||
// console.log("setParent id -->", parent_id);
|
|
||||||
this.parent_id = parent_id; |
|
||||||
this._fillOptionsData(); |
|
||||||
} |
|
||||||
|
|
||||||
setNearbySelectBox(next, prev) { |
|
||||||
this.next_select_box = next; |
|
||||||
this.prev_select_box = prev; |
|
||||||
} |
|
||||||
|
|
||||||
getSelectedElements() { |
|
||||||
let all_checked = this.$results_box.find(":checked"); |
|
||||||
return all_checked.map(function () { |
|
||||||
return $(this).data("id"); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
connectSelectedContainer(selected_container) { |
|
||||||
this.selected_container = selected_container; |
|
||||||
this.selected_container = selected_container; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
updateEditableContainer(el_id) { |
|
||||||
// Если нет контейнера для отображения ...
|
|
||||||
if (this.$editable_container.length) { |
|
||||||
let chain_header = SelectedContainer.getHeader( |
|
||||||
this.tree_data.getSpecChain(el_id, true), " / "); |
|
||||||
let el_template = `<span class="">${chain_header}</span>`; |
|
||||||
this.$editable_container.html(el_template); |
|
||||||
return; |
|
||||||
} |
|
||||||
//..., передаем отображение предыдущему selectBox
|
|
||||||
if (this.prev_select_box) this.prev_select_box.updateEditableContainer(el_id); |
|
||||||
} |
|
||||||
|
|
||||||
_onclickOptionsElement(e) { |
|
||||||
this.clearAll(true); |
|
||||||
let el_id = $(e.target).data("id"); |
|
||||||
this.selected_id = el_id; |
|
||||||
this.selected_val = $(e.target).html(); |
|
||||||
this.updateEditableContainer(el_id); |
|
||||||
this.$search_input.val($(e.target).html()); |
|
||||||
// this.element_id = el_id;
|
|
||||||
if (this.next_select_box) { |
|
||||||
this.next_select_box.setParent(el_id); |
|
||||||
this.next_select_box.setHeader($(e.target).html()); |
|
||||||
} |
|
||||||
if (this.prev_select_box) this.prev_select_box.$button_add_options.hide(); |
|
||||||
|
|
||||||
this.$button_add_options.show(); |
|
||||||
this.$options_box.hide(); |
|
||||||
} |
|
||||||
|
|
||||||
_onButtonAdd(e) { |
|
||||||
let self = this; |
|
||||||
|
|
||||||
this.getSelectedElements().each(function () { |
|
||||||
console.log("add el -->", this); |
|
||||||
self.selected_container.add(this, 40); |
|
||||||
}); |
|
||||||
this.clearAll(); |
|
||||||
e.preventDefault(); |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
_onButtonAddOptions(e) { |
|
||||||
this.selected_container.add(this.element_id, 40); |
|
||||||
this.clearAll(); |
|
||||||
e.preventDefault(); |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
_fillOptionsData() { |
|
||||||
let self = this; |
|
||||||
let spec_list = this.tree_data.dataToList(this.parent_id); |
|
||||||
let $container = this.$options_box.find('ul'); |
|
||||||
$container.html(""); |
|
||||||
spec_list.forEach(function (el) { |
|
||||||
let el_html = `<li data-id="${el.id}">${el.name}</li>`; |
|
||||||
$container.append($(el_html)) |
|
||||||
}); |
|
||||||
this.$select_box.find('li').on("click", this._onclickOptionsElement.bind(self)); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_fillResultsData(search_text) { |
|
||||||
let self = this; |
|
||||||
|
|
||||||
function search(search_text, parent_id, exclude_id) { |
|
||||||
// :FORMAT spec_list [{name, id}, ...]
|
|
||||||
let spec_list = self.tree_data.dataToList(parent_id, true, exclude_id); |
|
||||||
// console.log("search -->", spec_list.length);
|
|
||||||
console.log("parent_id ", parent_id); |
|
||||||
return spec_list.filter(function (el) { |
|
||||||
return el.name.toLowerCase().indexOf(search_text.toLowerCase()) !== -1; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function fillContainer($container, template, search_text, parent_id, exclude_id) { |
|
||||||
$container.html(""); |
|
||||||
let search_res = search(search_text, parent_id, exclude_id); |
|
||||||
if (!search_res.length || (!exclude_id && parent_id === null)) { |
|
||||||
$container.append('<span>No Found</span>'); |
|
||||||
return; |
|
||||||
} |
|
||||||
search_res.forEach(function (el) { |
|
||||||
$container.append(template(SelectBox.highlight(el.name, search_text), el.id)); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
// FILL RESULTS
|
|
||||||
let result_template = (el, id) => |
|
||||||
`<li><label><input type="checkbox" data-id="${id}"><span class="noselect">${el}</span></label></li>`; |
|
||||||
// MAIN PART
|
|
||||||
let $container = this.$results_box.find('.main-part ul'); |
|
||||||
fillContainer($container, result_template, search_text, self.parent_id); |
|
||||||
|
|
||||||
// OTHER PART
|
|
||||||
$container = this.$results_box.find('.other-part ul'); |
|
||||||
fillContainer($container, result_template, search_text, null, self.parent_id); |
|
||||||
} |
|
||||||
|
|
||||||
_looseFocus() { |
|
||||||
this.$results_box.hide(); |
|
||||||
this.$options_box.hide(); |
|
||||||
if (!this.selected_id) { |
|
||||||
this.$search_input.val(""); |
|
||||||
} else { |
|
||||||
this.$search_input.val(this.selected_val); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_bindEvents() { |
|
||||||
let self = this; |
|
||||||
$(document).click(function (event) { |
|
||||||
if ($(event.target).closest(`#${self.container_id}`).length) { |
|
||||||
return; |
|
||||||
} |
|
||||||
self._looseFocus(); |
|
||||||
}); |
|
||||||
// console.log("out ", this.$options_box);
|
|
||||||
this.$search_input.on("input", function (e) { |
|
||||||
self._fillResultsData(self.$search_input.val()); |
|
||||||
self.$results_box.show(); |
|
||||||
self.$options_box.hide(); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
this.$search_input.on("click", function (e) { |
|
||||||
// console.log("in ", self.$options_box);
|
|
||||||
self.$options_box.show(); |
|
||||||
self.$results_box.hide(); |
|
||||||
self.$button_add_options.hide(); |
|
||||||
self.$search_input.val(""); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
this.$button_add.on("click", function (e) { |
|
||||||
self._onButtonAdd(e); |
|
||||||
}); |
|
||||||
|
|
||||||
this.$button_add_options.on("click", this._onButtonAddOptions.bind(self)) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@ -1,203 +0,0 @@ |
|||||||
// `
|
|
||||||
class SimpleSelect { |
|
||||||
constructor($container, data) { |
|
||||||
this.container_id = $container.attr("id"); |
|
||||||
this.data = data || SimpleSelect._collectData($container); |
|
||||||
let template = SimpleSelect.getTemplate("Header", this.container_id); |
|
||||||
$container.replaceWith(template); |
|
||||||
this._buildComponents(); |
|
||||||
this._bindEvents(); |
|
||||||
} |
|
||||||
|
|
||||||
static getTemplate(header, id) { |
|
||||||
let insert_template = ` |
|
||||||
<input class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
|
||||||
<span style="clear:both; display:block"></span> |
|
||||||
`;
|
|
||||||
|
|
||||||
let htmlTemplate = |
|
||||||
` |
|
||||||
<span class="select-box-container" id="${id}"> |
|
||||||
<div class="select-box-header"> |
|
||||||
<span class="header">${header}</span> |
|
||||||
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
|
||||||
</div> |
|
||||||
<span class="select-box-search"> |
|
||||||
${insert_template} |
|
||||||
</span> |
|
||||||
<span class="select-box-options"> |
|
||||||
<span class="box-wrapper"> |
|
||||||
<ul> |
|
||||||
|
|
||||||
</ul> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
<span class="select-box-results"> |
|
||||||
<span class="box-wrapper"> |
|
||||||
<span class="main-part"> |
|
||||||
<ul> |
|
||||||
</ul> |
|
||||||
</span> |
|
||||||
<button class="button-add results">добавить</button> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
<span style="clear: both"></span> |
|
||||||
</span> |
|
||||||
`;
|
|
||||||
return htmlTemplate; |
|
||||||
} |
|
||||||
|
|
||||||
clear() { |
|
||||||
this.$search_input.val(""); |
|
||||||
this.$options_box.hide(); |
|
||||||
this.$results_box.hide(); |
|
||||||
this.selected_id = undefined; |
|
||||||
} |
|
||||||
|
|
||||||
connectSelectedContainer(selected_container) { |
|
||||||
this.selected_container = selected_container; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
setHeader(header) { |
|
||||||
this.$header.html(header); |
|
||||||
} |
|
||||||
|
|
||||||
getSelectedElements() { |
|
||||||
let all_checked = this.$results_box.find(":checked"); |
|
||||||
return all_checked.map(function () { |
|
||||||
return $(this).data("id"); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
static _collectData($container) { |
|
||||||
let $options = $container.find('option'); |
|
||||||
let data = []; |
|
||||||
$options.each(function () { |
|
||||||
data.push({id: $(this).val(), name: $(this).html()}); |
|
||||||
// $(this).remove();
|
|
||||||
}); |
|
||||||
return data |
|
||||||
} |
|
||||||
|
|
||||||
_fillOptionsData() { |
|
||||||
let self = this; |
|
||||||
let $container = this.$options_box.find('ul'); |
|
||||||
$container.html(""); |
|
||||||
this.data.forEach(function (el) { |
|
||||||
let el_html = `<li data-id="${el.id}">${el.name}</li>`; |
|
||||||
$container.append($(el_html)) |
|
||||||
}); |
|
||||||
this.$select_box.find('li').on("click", this._onclickOptionsElement.bind(self)); |
|
||||||
} |
|
||||||
|
|
||||||
_fillResultsData(search_text) { |
|
||||||
let self = this; |
|
||||||
|
|
||||||
function search(search_text) { |
|
||||||
// :FORMAT spec_list [{name, id}, ...]
|
|
||||||
return self.data.filter(function (el) { |
|
||||||
return el.name.toLowerCase().indexOf(search_text.toLowerCase()) !== -1; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function fillContainer($container, template, search_text, parent_id, exclude_id) { |
|
||||||
$container.html(""); |
|
||||||
let search_res = search(search_text, parent_id, exclude_id); |
|
||||||
if (!search_res.length || (!exclude_id && parent_id === null)) { |
|
||||||
$container.append('<span>No Found</span>'); |
|
||||||
return; |
|
||||||
} |
|
||||||
search_res.forEach(function (el) { |
|
||||||
$container.append(template(SelectBox.highlight(el.name, search_text), el.id)); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
// FILL RESULTS
|
|
||||||
let result_template = (el, id) => |
|
||||||
`<li><label><input type="checkbox" data-id="${id}"><span class="noselect">${el}</span></label></li>`; |
|
||||||
// MAIN PART
|
|
||||||
let $container = this.$results_box.find('.main-part ul'); |
|
||||||
fillContainer($container, result_template, search_text, self.parent_id); |
|
||||||
|
|
||||||
// OTHER PART
|
|
||||||
$container = this.$results_box.find('.other-part ul'); |
|
||||||
fillContainer($container, result_template, search_text, null, self.parent_id); |
|
||||||
//FIXME: duplicate code --^
|
|
||||||
} |
|
||||||
|
|
||||||
_buildComponents() { |
|
||||||
this.$select_box = $(`#${this.container_id}`); |
|
||||||
this.$header = this.$select_box.find('.select-box-header .header'); |
|
||||||
this.$results_box = this.$select_box.find('.select-box-results'); |
|
||||||
this.$options_box = this.$select_box.find('.select-box-options'); |
|
||||||
this.$search_input = this.$select_box.find('input.select-box-search'); |
|
||||||
this.$button_add = this.$results_box.find('.button-add'); |
|
||||||
// this.$button_add_options = this.$select_box.find('.button-add.options');
|
|
||||||
// this.$editable_container = this.$select_box.find('.editable-container');
|
|
||||||
this._fillOptionsData(); |
|
||||||
this.$results_box.hide(); |
|
||||||
this.$options_box.hide(); |
|
||||||
// this.$button_add_options.hide();
|
|
||||||
// TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
|
|
||||||
} |
|
||||||
|
|
||||||
_looseFocus() { |
|
||||||
this.$results_box.hide(); |
|
||||||
this.$options_box.hide(); |
|
||||||
this.$search_input.val(""); |
|
||||||
} |
|
||||||
|
|
||||||
_bindEvents() { |
|
||||||
let self = this; |
|
||||||
$(document).click(function (event) { |
|
||||||
if ($(event.target).closest(`#${self.container_id}`).length) { |
|
||||||
return; |
|
||||||
} |
|
||||||
self._looseFocus(); |
|
||||||
}); |
|
||||||
// console.log("out ", this.$options_box);
|
|
||||||
this.$search_input.on("input", function (e) { |
|
||||||
self._fillResultsData(self.$search_input.val()); |
|
||||||
self.$results_box.show(); |
|
||||||
self.$options_box.hide(); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
this.$search_input.on("click", function (e) { |
|
||||||
self.$options_box.show(); |
|
||||||
self.$results_box.hide(); |
|
||||||
self.$search_input.val(""); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
this.$button_add.on("click", function (e) { |
|
||||||
self._onButtonAdd(e); |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_onclickOptionsElement(e) { |
|
||||||
console.log("selelc with id =", $(e.target).data("id")); |
|
||||||
this.selected_id = $(e.target).data("id"); |
|
||||||
if (this.selected_container) this.selected_container.add(this.selected_id, 40); |
|
||||||
this.$options_box.hide(); |
|
||||||
} |
|
||||||
|
|
||||||
_onButtonAdd(e) { |
|
||||||
let self = this; |
|
||||||
|
|
||||||
this.getSelectedElements().each(function () { |
|
||||||
console.log("add el -->", this); |
|
||||||
self.selected_container.add(this, 40); |
|
||||||
}); |
|
||||||
this.clear(); |
|
||||||
e.preventDefault(); |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
// `
|
|
||||||
class SimpleSelectedContainer { |
|
||||||
constructor($container, data) { |
|
||||||
this.$self = $container; |
|
||||||
this.elements_id = []; // [spec_id, spec_id, ...]
|
|
||||||
this.data = data; |
|
||||||
this.$input = this.$self.find('input[type="hidden"]'); |
|
||||||
this.restoreElements(); |
|
||||||
} |
|
||||||
|
|
||||||
restoreElements() { |
|
||||||
const self = this; |
|
||||||
if (this.$input && this.$input.val()){ |
|
||||||
let data = this.$input.val().split(',').filter((el) => el); |
|
||||||
console.log("restore data = ", data); |
|
||||||
this.elements_id = []; |
|
||||||
data.forEach((el) => self.add(el)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
static getTemplate(name, id) { |
|
||||||
let htmlTemplate = |
|
||||||
` |
|
||||||
<div class="selected-element max-width"> |
|
||||||
<div class="name"> |
|
||||||
${name} |
|
||||||
</div> |
|
||||||
<span data-id="${id}" class="icon-remove"></span> |
|
||||||
</div> |
|
||||||
`;
|
|
||||||
return htmlTemplate |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
_removeById(spec_id) { |
|
||||||
let index = this.elements_id.indexOf(spec_id); |
|
||||||
if (index >= 0) { |
|
||||||
this.elements_id.splice(index, 1); |
|
||||||
} |
|
||||||
$(`span[data-id='${spec_id}']`).parents('.selected-element').remove(); |
|
||||||
} |
|
||||||
|
|
||||||
remove(e) { |
|
||||||
let spec_id = $(e.target).data("id"); |
|
||||||
this._removeById(spec_id); |
|
||||||
if (this.$input) this.$input.val(this.elements_id.join(',')); |
|
||||||
e.preventDefault(); |
|
||||||
} |
|
||||||
|
|
||||||
getElementById(id) { |
|
||||||
for (let i = 0; i < this.data.length; i++) { |
|
||||||
if (this.data[i].id == id) return this.data[i] |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
add(_id, max_len) { |
|
||||||
const id = Number(_id); |
|
||||||
// TODO: добавить учет max_len
|
|
||||||
let self = this; |
|
||||||
if ((this.elements_id).indexOf(id) != -1) { |
|
||||||
//TODO: do popup messages
|
|
||||||
console.log("Not actually"); |
|
||||||
return; |
|
||||||
} |
|
||||||
// console.log("!", this.getElementById(id));
|
|
||||||
const name = this.getElementById(id).name; |
|
||||||
this.elements_id.push(id); |
|
||||||
if (this.$input) this.$input.val(this.elements_id.join(',')); |
|
||||||
this.$self.append(SimpleSelectedContainer.getTemplate(name, id)); |
|
||||||
this.btn_remove = this.$self.find('.icon-remove'); |
|
||||||
this.btn_remove.on("click", this.remove.bind(self)); |
|
||||||
console.log(); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import AbsBaseSelect from './base/AbsBaseSelect' |
||||||
|
import NoTreeData from './data/NoTreeData' |
||||||
|
|
||||||
|
export default class NoTreeSelect extends AbsBaseSelect{ |
||||||
|
constructor({$container, data}){ |
||||||
|
super({$container, data: new NoTreeData(data)}); |
||||||
|
this.$buttonAddOptions.hide(); |
||||||
|
} |
||||||
|
|
||||||
|
_onclickOptionsElement(e) { |
||||||
|
this.selectedEl.id = $(e.target).data("id"); |
||||||
|
this.selectedEl.value = $(e.target).html(); |
||||||
|
this.$searchInput.val($(e.target).html()); |
||||||
|
|
||||||
|
this.$buttonAddOptions.show(); |
||||||
|
this.$optionsBox.hide(); |
||||||
|
|
||||||
|
this.selectedContainer.add(this.selectedEl.id); |
||||||
|
this.clear(); |
||||||
|
e.preventDefault(); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
_onButtonAddOptions(e) { |
||||||
|
// pass
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import AbsBaseSelect from './base/AbsBaseSelect' |
||||||
|
import DataTree from './data/DataTree' |
||||||
|
|
||||||
|
export default class TreeSelect extends AbsBaseSelect{ |
||||||
|
constructor({$container, data, hasEditableContainer = false}){ |
||||||
|
super({$container, data: new DataTree(data), hasEditableContainer}); |
||||||
|
} |
||||||
|
|
||||||
|
setNearbySelectBox(next, prev) { |
||||||
|
this.nextSelectBox = next; |
||||||
|
this.prevSelectBox = prev; |
||||||
|
} |
||||||
|
|
||||||
|
clearAllNext() { |
||||||
|
// console.log("clearAllNext");
|
||||||
|
this.clear(); |
||||||
|
if (this.nextSelectBox) { |
||||||
|
this.nextSelectBox.hide(); |
||||||
|
this.nextSelectBox.clearAllNext() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
clearAllPrev(){ |
||||||
|
this.clear(); |
||||||
|
if (this.prevSelectBox) { |
||||||
|
this.clear(); |
||||||
|
this.hide(); |
||||||
|
// this.prevSelectBox.clear();
|
||||||
|
this.prevSelectBox.clearAllPrev() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_onclickOptionsElement(e) { |
||||||
|
this.clearAllNext(); |
||||||
|
super._onclickOptionsElement(e); |
||||||
|
|
||||||
|
if (this.nextSelectBox && this.dataTree.hasChildren(this.selectedEl.id)) { |
||||||
|
this.nextSelectBox.setParent(this.selectedEl.id); |
||||||
|
this.nextSelectBox.setHeader(this.selectedEl.value); |
||||||
|
this.nextSelectBox.show(); |
||||||
|
} |
||||||
|
if (this.prevSelectBox) this.prevSelectBox.$buttonAddOptions.hide(); |
||||||
|
} |
||||||
|
|
||||||
|
_onButtonAddOptions(e) { |
||||||
|
// this._addToSelectedContainer(this.selectedEl.id);
|
||||||
|
// this.clear();
|
||||||
|
// e.preventDefault();
|
||||||
|
// return false;
|
||||||
|
super._onButtonAddOptions(e); |
||||||
|
this.clearAllNext(); |
||||||
|
this.clearAllPrev(); |
||||||
|
} |
||||||
|
|
||||||
|
_onButtonAdd(e) { |
||||||
|
super._onButtonAdd(e); |
||||||
|
this.clearAllNext(); |
||||||
|
this.clearAllPrev(); |
||||||
|
} |
||||||
|
|
||||||
|
_addToSelectedContainer(id){ |
||||||
|
if (this.selectedContainer){ |
||||||
|
this.selectedContainer.add(id); |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
this.prevSelectBox._addToSelectedContainer(id); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,362 @@ |
|||||||
|
//TEMPLATES
|
||||||
|
const tmpl_selectBoxEditCont = () =>` |
||||||
|
<div class="row"> |
||||||
|
<div class="col-lg-3"> |
||||||
|
<input class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
||||||
|
<button class="button-add options">ДОБАВИТЬ</button> |
||||||
|
</div> |
||||||
|
<div class="col-lg-9"> |
||||||
|
<span class="editable-container"></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
const tmpl_selectBox = () =>` |
||||||
|
<input class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
||||||
|
<!--<span style="clear:both; display:block"></span>--> |
||||||
|
<button class="button-add options">ДОБАВИТЬ</button> |
||||||
|
`;
|
||||||
|
const tmpl_elementResult = (el, id, header) => |
||||||
|
`<li><label>
|
||||||
|
<div class="header">${header}</div> |
||||||
|
<input type="checkbox" data-id="${id}">${el} |
||||||
|
</label></li>`; |
||||||
|
const tmpl_elementOption = (el) => |
||||||
|
`<li data-id="${el.id}">${el.name}</li>`; |
||||||
|
//${vertical_child}
|
||||||
|
const htmlTemplate = ({header, selectBox, id}) => |
||||||
|
` |
||||||
|
<div class="select-box-container" id="${id}"> |
||||||
|
<div class="select-box-header"> |
||||||
|
<div class="header">${header}</div> |
||||||
|
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
||||||
|
</div> |
||||||
|
<div class="select-box-search"> |
||||||
|
${selectBox} |
||||||
|
</div> |
||||||
|
<div class="select-box-options"> |
||||||
|
<div class="box-wrapper"> |
||||||
|
<ul> |
||||||
|
|
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="select-box-results"> |
||||||
|
<div class="box-wrapper"> |
||||||
|
<div class="main-part"> |
||||||
|
<ul> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="other-part"> |
||||||
|
<span class="other-header">Из других категорий</span> |
||||||
|
<ul> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button class="button-add results">ДОБАВИТЬ</button> |
||||||
|
</div> |
||||||
|
<span style="clear: both"></span> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
let tmpl_light = (el) => `<span class="highlight">${el}</span>`; |
||||||
|
|
||||||
|
export default class AbsBaseSelect { |
||||||
|
// constructor($container, data, hasEditableContainer, verticalChild) {
|
||||||
|
constructor({$container, data, hasEditableContainer = false}) { |
||||||
|
if (new.target === AbsBaseSelect) { |
||||||
|
throw new TypeError("Cannot construct Abstract instances directly"); |
||||||
|
} |
||||||
|
//TODO: добавить применение классов контейнера
|
||||||
|
//TODO: проверка наличия id контейнера
|
||||||
|
this.containerId = $container.attr("id"); |
||||||
|
this.dataTree = data; |
||||||
|
console.log("data = ", data); |
||||||
|
// Вариант не выбран
|
||||||
|
this.hasEditableContainer = hasEditableContainer; |
||||||
|
let template = this.getTemplate(); |
||||||
|
$container.replaceWith(template); |
||||||
|
this._buildComponents(); |
||||||
|
this._bindEvents(); |
||||||
|
// if (!has_editable_container) this.hide();
|
||||||
|
// INIT EMPTY PROP
|
||||||
|
this.selectedEl = {id: undefined, value: undefined}; |
||||||
|
this.parentId = undefined; |
||||||
|
this.hide(); |
||||||
|
} |
||||||
|
|
||||||
|
// getTemplate(header, id, editable_container, vertical_child) {
|
||||||
|
getTemplate() { |
||||||
|
let selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox(); |
||||||
|
return htmlTemplate({header: "TestHeader", selectBox, id: this.containerId}) |
||||||
|
} |
||||||
|
|
||||||
|
static getHeader(catChain, {separator = " / ", maxLen = 60}) { |
||||||
|
function toShortString(string, maxLen) { |
||||||
|
return string.slice(0, maxLen) + (string.length > maxLen ? "..." : ""); |
||||||
|
} |
||||||
|
|
||||||
|
let strChain = ""; |
||||||
|
|
||||||
|
catChain.forEach(function (el) { |
||||||
|
strChain = (maxLen ? toShortString(el.name, maxLen) : el.name) + (strChain ? separator : "") + strChain; |
||||||
|
}); |
||||||
|
|
||||||
|
return strChain; |
||||||
|
} |
||||||
|
|
||||||
|
static highlight(string, sub_string, lastIndex = false) { |
||||||
|
let index = lastIndex |
||||||
|
? string.toLowerCase().lastIndexOf(sub_string.toLowerCase()) |
||||||
|
: string.toLowerCase().indexOf(sub_string.toLowerCase()); |
||||||
|
console.log("index = ", index); |
||||||
|
if (index === -1) return string; |
||||||
|
let before, select, after; |
||||||
|
if (lastIndex) { |
||||||
|
[before, select, after] = [string.slice(0, index), |
||||||
|
string.slice(index, string.length), |
||||||
|
""]; |
||||||
|
} else { |
||||||
|
[before, select, after] = [string.slice(0, index), |
||||||
|
string.slice(index, index + sub_string.length), |
||||||
|
string.slice(index + sub_string.length)]; |
||||||
|
} |
||||||
|
|
||||||
|
return `${before}${tmpl_light(select)}${after}` |
||||||
|
} |
||||||
|
|
||||||
|
clear() { |
||||||
|
console.log("clear"); |
||||||
|
this.$searchInput.val(""); |
||||||
|
this.$optionsBox.hide(); |
||||||
|
this.$resultsBox.hide(); |
||||||
|
this.$buttonAdd.hide(); |
||||||
|
this.$buttonAddOptions.hide(); |
||||||
|
this.selectedEl = {id: undefined, value: undefined}; |
||||||
|
if (this.hasEditableContainer) { |
||||||
|
this.$editableContainer.html(""); |
||||||
|
this.$editableContainer.hide() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
hide() { |
||||||
|
this.$selectBox.hide(); |
||||||
|
} |
||||||
|
|
||||||
|
show() { |
||||||
|
this.$selectBox.show(); |
||||||
|
} |
||||||
|
|
||||||
|
setHeader(header) { |
||||||
|
this.$header.html(header); |
||||||
|
// default hide
|
||||||
|
this.show(); |
||||||
|
} |
||||||
|
|
||||||
|
setParent(parentId) { |
||||||
|
this.parentId = parentId; |
||||||
|
this._fillOptionsData(); |
||||||
|
} |
||||||
|
|
||||||
|
connectSelectedContainer(selectedContainer) { |
||||||
|
this.selectedContainer = selectedContainer; |
||||||
|
} |
||||||
|
|
||||||
|
getIdsSelectedElements() { |
||||||
|
let allChecked = this.$resultsBox.find(":checked"); |
||||||
|
return allChecked.map(function () { |
||||||
|
return $(this).data("id"); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
updateEditableContainer(elId) { |
||||||
|
// Если нет контейнера для отображения ...
|
||||||
|
if (this.$editableContainer.length) { |
||||||
|
const separator = ' / '; |
||||||
|
let chainHeader = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(elId, true), {separator: separator}); |
||||||
|
console.log('chainHeader = ', chainHeader); |
||||||
|
chainHeader = AbsBaseSelect.highlight(chainHeader, separator, true); |
||||||
|
let elTemplate = `<span class="">${chainHeader}</span>`; |
||||||
|
this.$editableContainer.html(elTemplate); |
||||||
|
this.$editableContainer.show(); |
||||||
|
return; |
||||||
|
} |
||||||
|
//..., передаем отображение предыдущему selectBox
|
||||||
|
if (this.prevSelectBox) this.prevSelectBox.updateEditableContainer(elId); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
_buildComponents() { |
||||||
|
this.$selectBox = $(`#${this.containerId}`); |
||||||
|
this.$header = this.$selectBox.find('.select-box-header .header'); |
||||||
|
this.$resultsBox = this.$selectBox.find('.select-box-results'); |
||||||
|
this.$optionsBox = this.$selectBox.find('.select-box-options'); |
||||||
|
this.$searchInput = this.$selectBox.find('input.select-box-search'); |
||||||
|
this.$buttonAdd = this.$selectBox.find('.button-add.results'); |
||||||
|
this.$buttonAddOptions = this.$selectBox.find('.button-add.options'); |
||||||
|
this.$editableContainer = this.$selectBox.find('.editable-container'); |
||||||
|
if (this.hasEditableContainer) this.$editableContainer.hide(); |
||||||
|
this._fillOptionsData(); |
||||||
|
this.$resultsBox.hide(); |
||||||
|
this.$optionsBox.hide(); |
||||||
|
this.$buttonAddOptions.hide(); |
||||||
|
// TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
|
||||||
|
} |
||||||
|
|
||||||
|
_fillOptionsData() { |
||||||
|
let self = this; |
||||||
|
let dataList = this.dataTree.dataToList(this.parentId); |
||||||
|
let $container = this.$optionsBox.find('ul'); |
||||||
|
$container.html(""); |
||||||
|
for (let el of dataList) { |
||||||
|
$container.append($(tmpl_elementOption(el))) |
||||||
|
} |
||||||
|
|
||||||
|
this.$selectBox.find('li').on("click", this._onclickOptionsElement.bind(self)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
_fillResultsData(searchText) { |
||||||
|
let self = this; |
||||||
|
|
||||||
|
function search({searchText, parentCategoryId = null, excludeCategoryId = null}) { |
||||||
|
// :FORMAT spec_list [{name, id}, ...]
|
||||||
|
let specList = self.dataTree.dataToList(parentCategoryId, true, excludeCategoryId); |
||||||
|
// console.log("search -->", spec_list.length);
|
||||||
|
// console.log("parent_id ", parentCategoryId);
|
||||||
|
return specList.filter(function (el) { |
||||||
|
return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function fillContainer($container, template, {searchText = "", parentCategoryId = null, excludeCategoryId = null}) { |
||||||
|
$container.html(""); |
||||||
|
$('.other-part').show(); |
||||||
|
let searchRes = search({searchText, parentCategoryId, excludeCategoryId}); |
||||||
|
// || (!excludeCategoryId && parentCategoryId === null)
|
||||||
|
console.log("searchRes = ", searchRes); |
||||||
|
if (!searchRes.length) { |
||||||
|
if ($container.closest('div').hasClass('main-part')) { |
||||||
|
$container.append('<li>Ничего не найдено</li>'); |
||||||
|
self.$resultsBox.find('.button-add.results').hide(); |
||||||
|
// console.log('not found main-part');
|
||||||
|
} else { |
||||||
|
$('.other-part').hide(); |
||||||
|
// console.log('not found other-part');
|
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
self.$resultsBox.find('.button-add.results').show(); |
||||||
|
for (let el of searchRes) { |
||||||
|
let header = AbsBaseSelect.getHeader(self.dataTree.getSpecChain(el.id), {}); |
||||||
|
$container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// FILL RESULTS
|
||||||
|
// MAIN PART
|
||||||
|
let $container = this.$resultsBox.find('.main-part ul'); |
||||||
|
fillContainer($container, tmpl_elementResult, {searchText: searchText, parentCategoryId: self.parentId}); |
||||||
|
|
||||||
|
// OTHER PART
|
||||||
|
// Если нет parentId, не нужно искать в других категориях
|
||||||
|
// console.log("parentID = ", this.parentId);
|
||||||
|
if (!this.parentId) { |
||||||
|
$('.other-part').hide(); |
||||||
|
} else { |
||||||
|
$container = this.$resultsBox.find('.other-part ul'); |
||||||
|
// console.log("Fill other-part");
|
||||||
|
fillContainer($container, tmpl_elementResult, {searchText: searchText, excludeCategoryId: self.parentId}); |
||||||
|
} |
||||||
|
this.$resultsBox.find('div.header').hide(); |
||||||
|
this.$resultsBox.find('li').on("mouseover", function (e) { |
||||||
|
$(e.target).children('.header').show(300); |
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
this.$resultsBox.find('li').on("mouseout", function (event) { |
||||||
|
let e = event.toElement || event.relatedTarget; |
||||||
|
console.log(e.parentNode, ' ==', this); |
||||||
|
console.log(e, ' ==', this); |
||||||
|
if (e.parentNode == this || e == this) { |
||||||
|
return; |
||||||
|
} |
||||||
|
console.log("OUT"); |
||||||
|
$(this).find('.header').hide(); |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
_onclickOptionsElement(e) { |
||||||
|
this.selectedEl.id = $(e.target).data("id"); |
||||||
|
this.selectedEl.value = $(e.target).html(); |
||||||
|
this.$searchInput.val($(e.target).html()); |
||||||
|
this.updateEditableContainer($(e.target).data("id")); |
||||||
|
this.$buttonAddOptions.show(); |
||||||
|
this.$optionsBox.hide(); |
||||||
|
} |
||||||
|
|
||||||
|
_onButtonAddOptions(e) { |
||||||
|
this._addToSelectedContainer(this.selectedEl.id); |
||||||
|
this.clear(); |
||||||
|
e.preventDefault(); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
_onButtonAdd(e) { |
||||||
|
let self = this; |
||||||
|
|
||||||
|
this.getIdsSelectedElements().each(function () { |
||||||
|
console.log("add el -->", this); |
||||||
|
self._addToSelectedContainer(this); |
||||||
|
}); |
||||||
|
this.clear(); |
||||||
|
e.preventDefault(); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
_addToSelectedContainer(id) { |
||||||
|
this.selectedContainer.add(id) |
||||||
|
} |
||||||
|
|
||||||
|
_bindEvents() { |
||||||
|
let self = this; |
||||||
|
$(document).click(function (event) { |
||||||
|
if ($(event.target).closest(`#${self.containerId}`).length) { |
||||||
|
return; |
||||||
|
} |
||||||
|
self._looseFocus(); |
||||||
|
}); |
||||||
|
// RESULTS BOX
|
||||||
|
this.$searchInput.on("input", function (e) { |
||||||
|
self._fillResultsData(self.$searchInput.val()); |
||||||
|
self.$resultsBox.show(); |
||||||
|
self.$optionsBox.hide(); |
||||||
|
|
||||||
|
}); |
||||||
|
// OPTIONS BOX
|
||||||
|
this.$searchInput.on("click", function (e) { |
||||||
|
self.$optionsBox.show(); |
||||||
|
self.$resultsBox.hide(); |
||||||
|
self.$buttonAddOptions.hide(); |
||||||
|
self.$searchInput.val(""); |
||||||
|
}); |
||||||
|
|
||||||
|
this.$buttonAdd.on("click", function (e) { |
||||||
|
self._onButtonAdd(e); |
||||||
|
}); |
||||||
|
|
||||||
|
this.$buttonAddOptions.on("click", this._onButtonAddOptions.bind(self)) |
||||||
|
} |
||||||
|
|
||||||
|
_looseFocus() { |
||||||
|
this.$resultsBox.hide(); |
||||||
|
this.$optionsBox.hide(); |
||||||
|
if (!this.selectedEl.id) { |
||||||
|
this.$searchInput.val(""); |
||||||
|
} else { |
||||||
|
this.$searchInput.val(this.selectedEl.value); |
||||||
|
} |
||||||
|
console.log("loose ", this.selectedEl.id); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
export default class NoTreeData { |
||||||
|
constructor(data) { |
||||||
|
this.data = data; |
||||||
|
this.specChain = [] |
||||||
|
} |
||||||
|
|
||||||
|
getElementById(id) { |
||||||
|
for (let i = 0; i < this.data.length; i++) { |
||||||
|
if (this.data[i].id == id) return this.data[i] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getSpecChain(id, incl) { |
||||||
|
return this.specChain |
||||||
|
} |
||||||
|
|
||||||
|
isChild(el_id, parent_id) { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
hasChildren() { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
dataToList() { |
||||||
|
return this.data |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
{ |
||||||
|
"name": "components", |
||||||
|
"version": "0.0.3", |
||||||
|
"description": "curl http://nodejs.org/dist/node-latest.tar.gz | tar xvz cd node-v* python2 ./configure --prefix=~/venv/proekton/(or $VIRTUAL_ENV) make install", |
||||||
|
"main": "init.js", |
||||||
|
"scripts": { |
||||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||||
|
}, |
||||||
|
"author": "Booblegum", |
||||||
|
"license": "ISC", |
||||||
|
"devDependencies": { |
||||||
|
"babel-preset-es2015": "^6.18.0", |
||||||
|
"babelify": "^7.3.0" |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue