Skip to content

Commit 8cec423

Browse files
author
hikki
committed
选择标识
1 parent b474b91 commit 8cec423

File tree

2 files changed

+56
-38
lines changed

2 files changed

+56
-38
lines changed

‎resources/assets/component.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,6 @@
122122
opacity: 0.5;
123123
transition: .2s ease-in-out;
124124
}
125-
.dot-cascade-stack>.dlp-label-active{
126-
animation: dlpLabelActive ease-in-out 1s forwards;
127-
}
128125
.dlp-label>i{
129126
position: absolute!important;
130127
right: 4px!important;
@@ -225,9 +222,4 @@
225222
@keyframes dlpFadeIn {
226223
0% {opacity: 0;}
227224
100% {opacity: 1;}
228-
}
229-
230-
@keyframes dlpLabelActive{
231-
0% {background: #d6d6d6;}
232-
100% {background: #ffffff;}
233225
}

‎resources/assets/component.js

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/
2828
</svg>`,
2929
'caret_right': `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
3030
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
31+
</svg>`,
32+
'caret_right_circle': `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 0 16 16">
33+
<path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
3134
</svg>`,
3235
request: function (url, method = "GET", data = {}, callback = null) {
3336
let xhr = new XMLHttpRequest();
@@ -398,41 +401,42 @@ class ComponentCascadeDot {
398401
let data = this.dimensional_data[stack][k];
399402
let currentStackDocuments = this.STACKS[stack].childNodes;
400403
let parentNode = data.parentNodes[data.parentNodes.length - 1];
401-
if (data.checked === false) {
402-
data.checked = true;
403-
currentStackDocuments.forEach((D, index) => {
404-
if (this.dimensional_data[stack][index].parentNodes.indexOf(parentNode) !== -1) {
405-
currentStackDocuments[index].classList.remove('dlp-label-silence');
406-
} else {
407-
currentStackDocuments[index].classList.add('dlp-label-silence');
408-
}
409-
});
410-
this.tagCal(id, this.MODE.insert);
411-
element.classList.remove('dlp-label-silence');
412-
element.querySelector('i.right') === null && element.insertAdjacentHTML('beforeend', `<i class="right">${_component.check}</i>`);
413-
this.selectToChildren(stack + 1, data.nodes);
414-
this.selectToSelected(element, stack);
415-
this.SELECTED_DOM.scrollTop = this.SELECTED_DOM.scrollHeight;
416-
} else if (data.checked === true) {
404+
if (data.checked === true){
417405
data.checked = false;
418406
this.tagCal(id, this.MODE.delete);
419-
element.querySelector('i') !== null && element.removeChild(element.querySelector('i'));
407+
element.querySelector('i.right') !== null && element.removeChild(element.querySelector('i.right'));
420408
for (let D of this.SELECTED_DOM.childNodes) {
421409
if (parseInt(D.getAttribute('data-id')) === id) {
422410
D.remove();
423411
break;
424412
}
425413
}
426-
} else {
427-
currentStackDocuments.forEach((D, index) => {
428-
if (this.dimensional_data[stack][index].parentNodes.indexOf(parentNode) !== -1) {
414+
}else {
415+
this.dimensional_data[stack].forEach((D, index) => {
416+
if (D.parentNodes.indexOf(parentNode) !== -1) {
429417
currentStackDocuments[index].classList.remove('dlp-label-silence');
430418
} else {
431419
currentStackDocuments[index].classList.add('dlp-label-silence');
432420
}
421+
if (D.expand === true) {
422+
data.expand = false;
423+
this.expand(currentStackDocuments[index],data.expand);
424+
}
433425
});
434-
element.classList.remove('dlp-label-silence');
435-
this.selectToChildren(stack + 1, data.nodes);
426+
if (data.checked === false) {
427+
data.checked = true;
428+
this.tagCal(id, this.MODE.insert);
429+
element.classList.remove('dlp-label-silence');
430+
if (element.querySelector('i.right') === null) element.insertAdjacentHTML('beforeend', `<i class="right">${_component.check}</i>`);
431+
this.selectToChildren(stack + 1, data.nodes);
432+
this.selectToSelected(element, stack);
433+
this.SELECTED_DOM.scrollTop = this.SELECTED_DOM.scrollHeight;
434+
} else {
435+
element.classList.remove('dlp-label-silence');
436+
data.expand = true;
437+
this.expand(element,data.expand);
438+
this.selectToChildren(stack + 1, data.nodes);
439+
}
436440
}
437441
if (Array.isArray(data.parentNodes) && data.parentNodes.length > 0) {
438442
let parentNodes = data.parentNodes.slice(0);
@@ -459,20 +463,27 @@ class ComponentCascadeDot {
459463
let parentNode = nodes[stack - 1];
460464
let currentStackDocuments = this.STACKS[stack].childNodes;
461465
let to_first_index = null;
462-
currentStackDocuments.forEach((D, index) => {
463-
let data = this.dimensional_data[stack][index];
466+
this.dimensional_data[stack].forEach((data, index) => {
467+
let D = currentStackDocuments[index];
464468
let parents = data.parentNodes;
465-
D.classList.remove('dlp-label-active');
466469
if (checked === true || checked === undefined) {
467470
if (parents.length > 0 && (parents[stack - 1] !== parentNode)) {
468471
D.classList.add('dlp-label-silence');
472+
data.expand = false;
473+
this.expand(D,data.expand);
469474
} else if (parents.length === 0 && parseInt(D.getAttribute('data-id')) !== node) {
470475
D.classList.add('dlp-label-silence');
476+
data.expand = false;
477+
this.expand(D,data.expand);
471478
} else {
472479
D.classList.remove('dlp-label-silence');
473-
if (to_first_index === null && parseInt(D.getAttribute('data-id')) === node){
474-
to_first_index = index;
475-
D.classList.add('dlp-label-active');
480+
if (parseInt(D.getAttribute('data-id')) === node) {
481+
if (to_first_index === null) to_first_index = index;
482+
data.expand = true;
483+
this.expand(D,data.expand);
484+
} else if (data.expand === true) {
485+
data.expand = false;
486+
this.expand(D,data.expand);
476487
}
477488
}
478489
}
@@ -506,14 +517,15 @@ class ComponentCascadeDot {
506517
let currentStackDocuments = this.STACKS[stack].childNodes;
507518
let children = [];
508519
let to_first_index = null;
509-
currentStackDocuments.forEach((D, index) => {
520+
this.dimensional_data[stack].forEach((data, index) => {
521+
let D = currentStackDocuments[index];
510522
if (nodes === null) {
511523
D.classList.add('dlp-label-silence');
512524
return;
513525
}
514526
if (nodes.indexOf(parseInt(D.getAttribute('data-id'))) !== -1) {
515527
D.classList.remove('dlp-label-silence');
516-
let child = this.dimensional_data[stack][index].nodes;
528+
let child = data.nodes;
517529
if (Array.isArray(child)) {
518530
child.forEach((c) => {
519531
if (children.indexOf(child) === -1) children.push(c);
@@ -522,12 +534,26 @@ class ComponentCascadeDot {
522534
if (to_first_index === null) to_first_index = index;
523535
} else {
524536
D.classList.add('dlp-label-silence');
537+
if (data.expand === true) {
538+
data.expand = false;
539+
this.expand(D,data.expand);
540+
}
525541
}
526542
});
527543
if (to_first_index !== null) this.STACKS[stack].scrollTop = to_first_index * 27;
528544
this.selectToChildren(stack + 1, children);
529545
}
530546

547+
expand(dom,open=true){
548+
if(open) {
549+
let left_mark = dom.querySelector('i.left');
550+
if (left_mark) left_mark.innerHTML = _component.caret_right_circle;
551+
return;
552+
}
553+
let left_mark = dom.querySelector('i.left');
554+
if (left_mark) left_mark.innerHTML = _component.caret_right;
555+
}
556+
531557
tagCal(id, operate) {
532558
if (operate === this.MODE.insert) {
533559
if (this.select_data.indexOf(id) === -1) {

0 commit comments

Comments
 (0)