Skip to content

Commit c650d43

Browse files
author
hikki
committed
1.9
1 parent acd5d31 commit c650d43

File tree

3 files changed

+84
-8
lines changed

3 files changed

+84
-8
lines changed

‎resources/assets/component.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@
8888
flex-direction: row;
8989
align-items:stretch;
9090
}
91+
.dot-select-cascade>.dot-select-cover{
92+
display: flex;
93+
flex-direction: row;
94+
align-items:stretch;}
9195
.dot-cascade-stack{
9296
width: 100%;
9397
padding: 2px 0 2px 5px;

‎resources/assets/component.js

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></p
3030

3131
function _componentRequest(url, method = "GET", data = {}, callback = function () {
3232
}) {
33-
var xhr = new XMLHttpRequest();
33+
let xhr = new XMLHttpRequest();
3434
xhr.open(method, url, true);
3535
xhr.timeout = 30000;
3636
let token = '';
@@ -49,7 +49,7 @@ function _componentRequest(url, method = "GET", data = {}, callback = function (
4949
}
5050
xhr.onreadystatechange = function () {
5151
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
52-
var response = xhr.response;
52+
let response = xhr.response;
5353
callback(response);
5454
}
5555
};
@@ -192,6 +192,12 @@ class ComponentDot {
192192
this.SELECT_COVER_DOM = document.createElement('div');
193193
this.SELECT_COVER_DOM.className = 'dot-select dlp-scroll dot-select-cover';
194194
this.CONTENT_DOM.appendChild(this.SELECT_COVER_DOM);
195+
} else {
196+
let elements = [];
197+
this.SELECT_COVER_DOM.childNodes.forEach((D) => {
198+
elements.push(D);
199+
});
200+
this.CONTENT_DOM.append(...elements);
195201
}
196202
let elements = [];
197203
for (let element of this.CONTENT_DOM.childNodes) {
@@ -225,6 +231,8 @@ class ComponentCascadeDot {
225231
this.delete_data = [];
226232
this.make().makeSelect(select);
227233
this.selectInputDOM.value = JSON.stringify(this.select_data);
234+
let search = document.querySelector(`#${this.name} .dot-search`);
235+
search.addEventListener('input', () => this.search(search));
228236
}
229237

230238
make() {
@@ -271,7 +279,7 @@ class ComponentCascadeDot {
271279
if (index !== -1) {
272280
v.checked = true;
273281
let E = new Event('click');
274-
setTimeout(()=>{
282+
setTimeout(() => {
275283
div.click();
276284
div.dispatchEvent(E);
277285
});
@@ -354,6 +362,7 @@ class ComponentCascadeDot {
354362
let parentNodes = data.parentNodes.slice(0);
355363
this.selectToParent(parentNodes, data.checked);
356364
}
365+
this.SELECTED_DOM.scrollTop = this.SELECTED_DOM.scrollHeight;
357366
}
358367

359368
selectToSelected(element, stack) {
@@ -386,7 +395,7 @@ class ComponentCascadeDot {
386395
D.classList.add('dlp-label-silence');
387396
} else {
388397
D.classList.remove('dlp-label-silence');
389-
if (to_first_index === null)to_first_index=index;
398+
if (to_first_index === null) to_first_index = index;
390399
}
391400
}
392401
if (checked === true && node === data.key && data.mark !== true) {
@@ -408,7 +417,7 @@ class ComponentCascadeDot {
408417
}
409418
}
410419
});
411-
if(to_first_index !== null) this.STACKS[stack].scrollTop = to_first_index*28;
420+
if (to_first_index !== null) this.STACKS[stack].scrollTop = to_first_index * 28;
412421
if (nodes.length > 0) {
413422
this.selectToParent(nodes, checked);
414423
}
@@ -432,12 +441,12 @@ class ComponentCascadeDot {
432441
if (children.indexOf(child) === -1) children.push(c);
433442
});
434443
}
435-
if (to_first_index === null)to_first_index=index;
444+
if (to_first_index === null) to_first_index = index;
436445
} else {
437446
D.classList.add('dlp-label-silence');
438447
}
439448
});
440-
if(to_first_index!==null)this.STACKS[stack].scrollTop = to_first_index*28;
449+
if (to_first_index !== null) this.STACKS[stack].scrollTop = to_first_index * 28;
441450
this.selectToChildren(stack + 1, children);
442451
}
443452

@@ -475,6 +484,68 @@ class ComponentCascadeDot {
475484
}
476485
}
477486
}
487+
488+
search(search) {
489+
if (search.value === '') {
490+
if (this.SELECT_COVER_DOM instanceof HTMLElement) {
491+
this.SELECT_COVER_DOM.remove();
492+
this.SELECT_COVER_DOM = null;
493+
this.COVER_STACK_HASH_DOM = [];
494+
}
495+
return;
496+
}
497+
if (!(this.SELECT_COVER_DOM instanceof HTMLElement)) {
498+
this.COVER_STACK_HASH_DOM = [];
499+
this.SELECT_COVER_DOM = document.createElement('div');
500+
this.SELECT_COVER_DOM.className = 'dot-select dlp-scroll dot-select-cover';
501+
for (let stack = 1; stack <= this.dimensional_data.length; stack++) {
502+
let div = document.createElement('div');
503+
div.className = 'dot-cascade-stack dlp-scroll';
504+
this.SELECT_COVER_DOM.append(div);
505+
}
506+
this.CONTENT_DOM.appendChild(this.SELECT_COVER_DOM);
507+
}
508+
this.dimensional_data.forEach((data, stack) => {
509+
data.forEach((d, k) => {
510+
if (d.val.indexOf(search.value) !== -1 &&
511+
(!Array.isArray(this.COVER_STACK_HASH_DOM[stack]) || this.COVER_STACK_HASH_DOM[stack].indexOf(d.key) === -1)) {
512+
let div = document.createElement('div');
513+
div.className = 'dlp dlp-text dlp-label';
514+
div.textContent = d.val;
515+
div.addEventListener('click', () => this.searchCoverClick(stack, d, this.STACKS[stack].childNodes[k]));
516+
this.SELECT_COVER_DOM.childNodes[stack].appendChild(div);
517+
if(!Array.isArray(this.COVER_STACK_HASH_DOM[stack])){
518+
this.COVER_STACK_HASH_DOM[stack] = [d.key];
519+
return;
520+
}
521+
this.COVER_STACK_HASH_DOM[stack].push(d.key);
522+
}
523+
});
524+
});
525+
}
526+
527+
searchCoverClick(stack, data, dom) {
528+
if (data.nodes !== null) {
529+
let nextStack = stack +1;
530+
this.dimensional_data[nextStack].forEach((d,k) => {
531+
if (data.nodes.indexOf(d.key) !== -1 &&
532+
(!Array.isArray(this.COVER_STACK_HASH_DOM[nextStack]) || this.COVER_STACK_HASH_DOM[nextStack].indexOf(d.key) === -1)) {
533+
let div = document.createElement('div');
534+
div.className = 'dlp dlp-text dlp-label';
535+
div.textContent = d.val;
536+
div.addEventListener('click', () => this.searchCoverClick(nextStack, d, this.STACKS[nextStack].childNodes[k]));
537+
this.SELECT_COVER_DOM.childNodes[nextStack].appendChild(div);
538+
if(!Array.isArray(this.COVER_STACK_HASH_DOM[nextStack])){
539+
this.COVER_STACK_HASH_DOM[nextStack] = [d.key];
540+
return;
541+
}
542+
this.COVER_STACK_HASH_DOM[nextStack].push(d.key);
543+
}
544+
});
545+
return;
546+
}
547+
(dom instanceof HTMLElement) && dom.click();
548+
}
478549
}
479550

480551
class ComponentLine {

‎test/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
{'key':4,'val':'d','nodes':[]},
3232
{'key':5,'val':'e','nodes':[{'key':51,'val':'e1'},{'key':52,'val':'e2'},{'key':53,'val':'e3'},{'key':54,'val':'e4'},{'key':55,'val':'e5'}
3333
,{'key':56,'val':'e6'},{'key':57,'val':'e7'},{'key':58,'val':'e8'},{'key':59,'val':'e9'},{'key':60,'val':'e0','nodes':[{'key':120,'val':'e00'},{'key':121,'val':'e01'}]}]},
34-
{'key':6,'val':'f','nodes':[{'key':61,'val':'f1'},{'key':62,'val':'f2'}]}
34+
{'key':6,'val':'f','nodes':[{'key':61,'val':'f1',nodes:[{'key':601,'val':'@01'}]},{'key':62,'val':'f2',nodes:[{'key':661,'val':'@1'},{'key':662,'val':'@2'},{'key':663,'val':'@3'}
35+
,{'key':664,'val':'@4'},{'key':665,'val':'@5'},{'key':666,'val':'@6'}]}]}
3536
],{select_dimensional:[1,2]});
3637
</script>
3738
</html>

0 commit comments

Comments
 (0)