Skip to content

Commit 6729d6a

Browse files
ydtg1993ydtg1993
committed
1.8
1 parent ff6f3ca commit 6729d6a

File tree

3 files changed

+65
-54
lines changed

3 files changed

+65
-54
lines changed

‎resources/assets/component.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
color: rgba(0,0,0,.8);
4343
}
4444

45-
.dlp-scroll{overflow: auto}
45+
.dlp-scroll{overflow-y: auto;overflow-x: hidden;}
4646
.dlp-scroll::-webkit-scrollbar{width: 3px;}
4747
.dlp-scroll::-webkit-scrollbar-thumb{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #e1e1e1;}
4848
.dlp-scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgb(255 255 255 / 20%);}
@@ -56,7 +56,7 @@
5656
border-radius: 5px;
5757
}
5858
.dot-top>.dot-search{
59-
width: 110px;
59+
width: 100px;
6060
border: none;
6161
color: inherit;
6262
border-color: transparent!important;
@@ -81,13 +81,15 @@
8181
}
8282
.dot-selected{width: 100%}
8383
.dot-selected>.dlp-label{background: white}
84-
.dot-select{padding: 5px 0 5px 0;background: rgb(43 43 43);border-radius: 0 0 5px 5px;}
84+
.dot-select{padding: 5px 0 5px 0;background: rgb(43 43 43);border-radius: 0 0 5px 5px;position: relative;}
85+
.dot-select-cover{position: absolute;width: 100%;height: 94%;top:0;left:0;z-index: 1050;}
8586
.dot-select-cascade{
8687
display: flex;
8788
flex-direction: row;
8889
align-items:stretch;
8990
}
9091
.dot-cascade-stack{
92+
width: 100%;
9193
padding: 2px 0 2px 5px;
9294
border-radius: 3px;
9395
flex-grow:1;
@@ -164,7 +166,7 @@
164166
right: 0;
165167
bottom: 0;
166168
left: 0;
167-
z-index: 1050;
169+
z-index: 1024;
168170
overflow: hidden;
169171
-webkit-overflow-scrolling: touch;
170172
outline: 0;

‎resources/assets/component.js

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ class ComponentDot {
100100
for (let element of this.CONTENT_DOM.getElementsByClassName("dlp-label")) {
101101
element.addEventListener('click', this.tagSelect.bind(this, element), false);
102102
}
103-
this.search();
103+
let search = document.querySelector(`#${this.name} .dot-search`);
104+
search.addEventListener('input', () => this.search(search));
104105
}
105106

106107
make(selected, select) {
@@ -125,24 +126,20 @@ class ComponentDot {
125126
}
126127

127128
tagSelect(element) {
128-
let cdom = element.cloneNode(true);
129-
cdom.addEventListener('click', this.tagCancel.bind(this, cdom), false);
130-
this.SELECTED_DOM.appendChild(cdom);
131-
element.remove();
132-
this.tagCal(cdom, this.MODE.insert);
129+
element.addEventListener('click', this.tagCancel.bind(this, element), false);
130+
this.SELECTED_DOM.appendChild(element);
131+
this.tagCal(element, this.MODE.insert);
133132
this.SELECTED_DOM.scrollTop = this.SELECTED_DOM.scrollHeight;
134133
}
135134

136135
tagCancel(element) {
137-
let cdom = element.cloneNode(true);
138-
cdom.addEventListener('click', this.tagSelect.bind(this, cdom), false);
139-
this.CONTENT_DOM.appendChild(cdom);
140-
element.remove();
141-
this.tagCal(cdom, this.MODE.delete);
136+
element.addEventListener('click', this.tagSelect.bind(this, element), false);
137+
this.CONTENT_DOM.appendChild(element);
138+
this.tagCal(element, this.MODE.delete);
142139
}
143140

144-
tagCal(cdom, operate) {
145-
let id = parseInt(cdom.getAttribute('data-id'));
141+
tagCal(element, operate) {
142+
let id = parseInt(element.getAttribute('data-id'));
146143
if (operate === this.MODE.insert) {
147144
if (this.select_data.indexOf(id) === -1) {
148145
this.select_data.push(id);
@@ -177,19 +174,31 @@ class ComponentDot {
177174
}
178175
}
179176

180-
search() {
181-
var object = this;
182-
document.querySelector(`#${this.name} .dot-search`).addEventListener('input', function () {
183-
let search = this.value;
184-
if (search === '') {
185-
return;
177+
search(search) {
178+
if (search.value === '') {
179+
if (this.SELECT_COVER_DOM instanceof HTMLElement) {
180+
this.SELECT_COVER_DOM.childNodes.forEach((D) => {
181+
this.CONTENT_DOM.appendChild(D);
182+
});
183+
this.SELECT_COVER_DOM.remove();
184+
this.SELECT_COVER_DOM = null;
186185
}
187-
for (let element of object.CONTENT_DOM.getElementsByClassName("dlp-label")) {
188-
if (element.innerText.indexOf(search) !== -1) {
189-
object.CONTENT_DOM.insertBefore(element, object.CONTENT_DOM.firstChild);
190-
}
186+
return;
187+
}
188+
if (!(this.SELECT_COVER_DOM instanceof HTMLElement)) {
189+
this.SELECT_COVER_DOM = document.createElement('div');
190+
this.SELECT_COVER_DOM.className = 'dot-select dlp-scroll dot-select-cover';
191+
this.CONTENT_DOM.appendChild(this.SELECT_COVER_DOM);
192+
}
193+
for (let element of this.CONTENT_DOM.childNodes) {
194+
if (element.className.indexOf('dlp-label') === -1) {
195+
continue;
191196
}
192-
}, false);
197+
if (element.innerText.indexOf(search.value) !== -1) {
198+
this.SELECT_COVER_DOM.appendChild(element);
199+
}
200+
}
201+
193202
}
194203
}
195204

@@ -235,9 +244,9 @@ class ComponentCascadeDot {
235244
let stackDom = document.createElement('div');
236245
stackDom.className = 'dot-cascade-stack dlp-scroll';
237246
data.forEach((v, k) => {
238-
if(Array.isArray(v.nodes) && v.nodes.length !==0) {
247+
if (Array.isArray(v.nodes) && v.nodes.length !== 0) {
239248
v.nodes = v.nodes.map((N) => N.key);
240-
}else {
249+
} else {
241250
v.nodes = null;
242251
v.checked = false;
243252
}
@@ -301,7 +310,7 @@ class ComponentCascadeDot {
301310
currentStackDocuments.forEach((D, index) => {
302311
if (this.dimensional_data[stack][index].parentNodes.indexOf(parentNode) !== -1) {
303312
currentStackDocuments[index].classList.remove('dlp-label-silence');
304-
}else {
313+
} else {
305314
currentStackDocuments[index].classList.add('dlp-label-silence');
306315
}
307316
});
@@ -310,8 +319,8 @@ class ComponentCascadeDot {
310319
element.querySelector('i') != null && element.removeChild(element.querySelector('i'));
311320
element.insertAdjacentHTML('beforeend', `<i>${_componentSvg.check}</i>`);
312321
this.selectToChildren(stack + 1, data.nodes);
313-
this.selectToSelected(element,stack);
314-
} else if(data.checked === true){
322+
this.selectToSelected(element, stack);
323+
} else if (data.checked === true) {
315324
data.checked = false;
316325
this.tagCal(id, this.MODE.delete);
317326
element.querySelector('i') != null && element.removeChild(element.querySelector('i'));
@@ -322,20 +331,20 @@ class ComponentCascadeDot {
322331
break;
323332
}
324333
}
325-
}else {
334+
} else {
326335
currentStackDocuments.forEach((D, index) => {
327336
if (this.dimensional_data[stack][index].parentNodes.indexOf(parentNode) !== -1) {
328337
currentStackDocuments[index].classList.remove('dlp-label-silence');
329-
}else {
338+
} else {
330339
currentStackDocuments[index].classList.add('dlp-label-silence');
331340
}
332341
});
333342
element.classList.remove('dlp-label-silence');
334343
this.selectToChildren(stack + 1, data.nodes);
335344
}
336-
if (Array.isArray(data.parentNodes) && data.parentNodes.length>0) {
345+
if (Array.isArray(data.parentNodes) && data.parentNodes.length > 0) {
337346
let parentNodes = data.parentNodes.slice(0);
338-
this.selectToParent(parentNodes,data.checked);
347+
this.selectToParent(parentNodes, data.checked);
339348
}
340349
}
341350

@@ -347,60 +356,60 @@ class ComponentCascadeDot {
347356
div.textContent = element.textContent;
348357
var object = this;
349358
div.addEventListener('click', function () {
350-
object.select(element,stack);
359+
object.select(element, stack);
351360
});
352361
this.SELECTED_DOM.append(div);
353362
}
354363

355-
selectToParent(nodes,checked) {
364+
selectToParent(nodes, checked) {
356365
let stack = nodes.length - 1;
357366
let node = nodes.pop();
358-
let parentNode = nodes[stack-1];
367+
let parentNode = nodes[stack - 1];
359368
let currentStackDocuments = this.STACKS[stack].childNodes;
360369
currentStackDocuments.forEach((D, index) => {
361370
let data = this.dimensional_data[stack][index];
362371
let parents = data.parentNodes;
363-
if(checked === true || checked === undefined) {
372+
if (checked === true || checked === undefined) {
364373
let D = currentStackDocuments[index];
365374
if (parents.length > 0 && (parents[stack - 1] !== parentNode)) {
366375
D.classList.add('dlp-label-silence');
367-
}else if(parents.length === 0 && parseInt(D.getAttribute('data-id')) !== node){
376+
} else if (parents.length === 0 && parseInt(D.getAttribute('data-id')) !== node) {
368377
D.classList.add('dlp-label-silence');
369-
}else {
378+
} else {
370379
D.classList.remove('dlp-label-silence');
371380
}
372381
}
373382
if (checked === true && node === data.key && data.mark !== true) {
374383
data.mark = true;
375384
D.insertAdjacentHTML('beforeend', `<i>${_componentSvg.check_circle}</i>`);
376385
}
377-
if(checked === false && node === data.key){
386+
if (checked === false && node === data.key) {
378387
let nodes = this.dimensional_data[stack][index].nodes;
379388
let cancel = true;
380-
for (let x in this.dimensional_data[stack+1]){
381-
let d = this.dimensional_data[stack+1][x];
382-
if(nodes.indexOf(d.key) !== -1 && (d.checked === true || d.mark === true)){
389+
for (let x in this.dimensional_data[stack + 1]) {
390+
let d = this.dimensional_data[stack + 1][x];
391+
if (nodes.indexOf(d.key) !== -1 && (d.checked === true || d.mark === true)) {
383392
cancel = false;
384393
break;
385394
}
386395
}
387-
if(cancel && (D.querySelector('i') instanceof HTMLElement)){
396+
if (cancel && (D.querySelector('i') instanceof HTMLElement)) {
388397
data.mark = false;
389398
D.querySelector('i').remove();
390399
}
391400
}
392401
});
393-
if(nodes.length>0){
394-
this.selectToParent(nodes,checked);
402+
if (nodes.length > 0) {
403+
this.selectToParent(nodes, checked);
395404
}
396405
}
397406

398407
selectToChildren(stack, nodes) {
399408
if (stack > (this.dimensional_data.length - 1)) return;
400409
let currentStackDocuments = this.STACKS[stack].childNodes;
401410
let children = [];
402-
currentStackDocuments.forEach((D,index) => {
403-
if(nodes===null){
411+
currentStackDocuments.forEach((D, index) => {
412+
if (nodes === null) {
404413
D.classList.add('dlp-label-silence');
405414
return;
406415
}

‎test/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
<div id="test2" style="width: 500px;height: 320px"></div>
1717
</body>
1818
<script>
19-
new ComponentDot('test',[1,2,3],{1:'a',2:'b',3:'c',4:'d',5:'e',6:'f',7:'g',8:'h321321312312313',9:'i'});
19+
new ComponentDot('test',[1,2,3],{1:'a',2:'b',3:'c',4:'d',5:'e',6:'f',7:'g',8:'h321321312312313',9:'i',10:'a1',11:'A5',12:'c00'});
2020

2121
new ComponentLine("test2",JSON.parse('{"name":{"name":"名称","type":"input"},"meta":{"name":"信息","type":"input"},"url":{"name":"链接","type":"input"},"time":{"name":"更新时间","type":"text"},"is-small":{"name":"高清[1是 2否]","type":"input","style":"width:60px"},"is-warning":{"name":"含字幕[1是 2否]","type":"input","style":"width:60px"},"tooltip":{"name":"可下载[1是 2否]","type":"input","style":"width:60px"}}'),JSON.parse('[{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.SD.MP4-KLEENEX","url":"magnet?xt=urnbtih1b771980c465052d1c96eade30be1297e1f73cff&dn=HDouban.comTushyRaw.21.04.28.Penelope.Kay.XXX.SD.MP4-KLEENEX","meta":"(246MB,3個文件)","tooltip":"2","time":"2021-05-14 000000","is-small":"2","is-warning":"2"},{"name":"T1080","url":"magnet?xt=urn tih20244eea8bafa94c27699ada817638f0a01fdbea&dn=HDouban.com TushyRaw.21.04.28.Penelope.Kay.XXX.1080p.MP4-NBQrarbg","meta":"","tooltip":"2","time":"2021-05-15 000000","is-small":"1","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.720p.HEVC.x265.PRT","url":"magnet?xt=urnbtih0c647fd1acb9e6c3bf617c117e60c86b29fa233c&dn=HDouban.com TushyRaw.21.04.28.Penelope.Kay.XXX.720p.HEVC.x265.PRT","meta":"(236MB,2個文件)","tooltip":"2","time":"2021-05-14 000000","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.480p.MP4-XXX","url":"magnet?xt=urnbtih7DE13EF7EE22D9780F7DE6C459D6DD33F64D126C","meta":"251.82M","tooltip":"2","time":"2021-12-14 132446","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.1080p.MP4-NBQrarbg","url":"magnet?xt=urnbtih20244EEA8BAFA94C27699ADA817638F0A01FDBEA","meta":"2.65G","tooltip":"2","time":"2021-12-14 132446","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.SD.MP4-KLEENEX","url":"magnet?xt=urnbtih1B771980C465052D1C96EADE30BE1297E1F73CFF","meta":"246.64M","tooltip":"2","time":"2021-12-14 132446","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.720p.HEVC.x265.PRT","url":"magnet?xt=urnbtih0C647FD1ACB9E6C3BF617C117E60C86B29FA233C","meta":"236.12M","tooltip":"2","time":"2021-12-14 132446","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.1080p.HEVC.x265.PRT","url":"magnet?xt=urnbtihA4B92AFFB6A39E2B3F69064EF174598CA2D6C630","meta":"412.77M","tooltip":"2","time":"2021-12-14 132446","is-small":"2","is-warning":"2"},{"name":"TushyRaw.21.04.28.Penelope.Kay.XXX.1080p.MP4-NBQrarbg","url":"magnet?xt=urnbtih20244eea8bafa94c27699ada817638f0a01fdbea&dn=TushyRaw.21.04.28.Penelope.Kay.XXX.1080p.MP4-NBQrarbg","meta":"","tooltip":"2","time":"2022-02-08 102237","is-small":"2","is-warning":"2"}]'),JSON.parse('[]'));
2222

2323
/*document.getElementById('test3').addEventListener('click',function () {
2424
new ComponentPlane();
2525
});*/
2626

27-
new ComponentCascadeDot('test4',[1,2,3,22],
27+
new ComponentCascadeDot('test4',[],
2828
[{'key':1,'val':'a'},
2929
{'key':2,'val':'b','nodes':[{'key':21,'val':'b1'},{'key':22,'val':'b2'},{'key':23,'val':'b3',nodes:[{'key':222,'val':'b03'}]},{'key':24,'val':'b4'}]},
3030
{'key':3,'val':'c','nodes':[{'key':31,'val':'c1'},{'key':32,'val':'c2','nodes':[]}]},

0 commit comments

Comments
 (0)