Skip to content

Commit dfe7955

Browse files
author
hikki
committed
1.8
1 parent 76634c0 commit dfe7955

File tree

3 files changed

+74
-31
lines changed

3 files changed

+74
-31
lines changed

‎resources/assets/component.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,12 @@
100100
height: 20px;
101101
line-height: 20px;
102102
margin-bottom: 3px;
103+
position: relative;
103104
}
104-
.dot-cascade-stack>.dlp-label-active{
105-
background: white;
105+
.dlp-label>i{
106+
position: absolute!important;
107+
right: 4px!important;
108+
top: 4px!important;
106109
}
107110
.dot-cascade-stack>.dlp-label-silence{
108111
opacity: 0.5;

‎resources/assets/component.js

Lines changed: 68 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml"a
2121
type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg>`,
2222
'check': `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
2323
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
24+
</svg>`,
25+
'check_circle':`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
26+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
27+
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
2428
</svg>`
2529
};
2630

@@ -72,14 +76,15 @@ function _componentAlert(message, time = 1, callback = function () {
7276
}
7377

7478
class ComponentDot {
75-
MODE={
76-
insert:'insert',
77-
delete:'delete'
79+
MODE = {
80+
insert: 'insert',
81+
delete: 'delete'
7882
};
83+
7984
constructor(name, selected, select) {
8085
this.name = name;
8186
this.DOM = document.getElementById(name);
82-
if(!Array.isArray(selected)){
87+
if (!Array.isArray(selected)) {
8388
console.error('Dot param selected is not array!');
8489
return;
8590
}
@@ -189,17 +194,18 @@ class ComponentDot {
189194
}
190195

191196
class ComponentCascadeDot {
192-
MODE={
193-
insert:'insert',
194-
delete:'delete'
197+
MODE = {
198+
insert: 'insert',
199+
delete: 'delete'
195200
};
201+
196202
constructor(name, selected, select, options) {
197203
this.name = name;
198204
this.DOM = document.getElementById(name);
199205
this.OPTIONS = Object.assign({
200206
select_dimensional: []
201207
}, options);
202-
if(!Array.isArray(selected)){
208+
if (!Array.isArray(selected)) {
203209
console.error('CascadeDot param selected is not array!');
204210
return;
205211
}
@@ -208,6 +214,7 @@ class ComponentCascadeDot {
208214
this.insert_data = [];
209215
this.delete_data = [];
210216
this.make().makeSelect(select);
217+
this.selectInputDOM.value = JSON.stringify(this.select_data);
211218
}
212219

213220
make() {
@@ -239,6 +246,7 @@ class ComponentCascadeDot {
239246
div.className = 'dlp dlp-text dlp-label';
240247
div.setAttribute('data-id', v.key);
241248
div.setAttribute('allow-select', allowSelect);
249+
div.setAttribute('checked', 'false');
242250
div.textContent = v.val;
243251
if (v.hasOwnProperty('nodes')) {
244252
let nodes = v.nodes.map((n) => n.key);
@@ -247,10 +255,20 @@ class ComponentCascadeDot {
247255
div.setAttribute('data-parent-nodes-id', JSON.stringify(v.parentNodes));
248256
div.addEventListener('click', this.select.bind(this, div, stack));
249257
stackDom.append(div);
258+
/*selected append*/
259+
let index = this.selected_data.indexOf(parseInt(v.key));
260+
if ((index !== -1) && allowSelect == false) {
261+
this.selected_data.splice(index, 1);
262+
this.select_data = this.selected_data.slice(0);
263+
} else if((index !== -1) && allowSelect == true) {
264+
this.selectToSelected(div,stack);
265+
div.insertAdjacentHTML('beforeend',`<i>${_componentSvg.check}</i>`);
266+
}
250267
});
251268
this.CONTENT_DOM.append(stackDom);
252269
}
253270
this.STACKS = this.CONTENT_DOM.childNodes;
271+
return this;
254272
}
255273

256274
makeDimensional(data, dimension = 0, parentNodes = []) {
@@ -284,7 +302,11 @@ class ComponentCascadeDot {
284302
let nodes = JSON.parse(element.getAttribute('data-nodes-id'));
285303
this.selectToChildren(stack + 1, nodes);
286304
/*current stack*/
287-
this.selectActive(stack,element);
305+
if(element.getAttribute('checked') == 'false') {
306+
this.selectActive(stack, element);
307+
}else {
308+
this.selectInactive(stack, element);
309+
}
288310
/*parent nodes*/
289311
let parent_nodes = JSON.parse(element.getAttribute('data-parent-nodes-id'));
290312
if (Array.isArray(parent_nodes)) {
@@ -294,34 +316,55 @@ class ComponentCascadeDot {
294316
}
295317
}
296318

297-
selectActive(stack,element){
298-
this.tagCal(parseInt(element.getAttribute('data-id')),this.MODE.insert);
319+
selectActive(stack, element) {
320+
if (element.getAttribute('allow-select') == 'false')return;
321+
if (element.getAttribute('checked') == 'true')return;
322+
this.selectToSelected(element,stack);
323+
this.tagCal(parseInt(element.getAttribute('data-id')), this.MODE.insert);
299324
let currentStackDocuments = this.STACKS[stack].childNodes;
300325
let parentNode = JSON.parse(element.getAttribute('data-parent-nodes-id')).pop();
301326
currentStackDocuments.forEach((D, index) => {
302-
currentStackDocuments[index].classList.remove('dlp-label-active');
303327
currentStackDocuments[index].classList.remove('dlp-label-silence');
304328
let parents = JSON.parse(D.getAttribute('data-parent-nodes-id'));
305329
if (parents[stack - 1] != parentNode) {
306330
currentStackDocuments[index].classList.add('dlp-label-silence');
307331
}
308332
});
309-
element.classList.add('dlp-label-active');
310-
if(element.getAttribute('allow-select') == 'true'){
311-
element.setAttribute('allow-select','false');
312-
let div = document.createElement('div');
313-
div.className = 'dlp dlp-text dlp-label';
314-
div.setAttribute('data-id',element.getAttribute('data-id'));
315-
div.setAttribute('stack',stack);
316-
div.textContent = element.textContent;
317-
div.addEventListener('click',function () {
318-
element.setAttribute('allow-select','true');
319-
this.remove();
320-
});
321-
this.SELECTED_DOM.append(div);
333+
element.insertAdjacentHTML('beforeend',`<i>${_componentSvg.check}</i>`);
334+
}
335+
336+
selectInactive(stack, element){
337+
if (element.getAttribute('allow-select') == 'false')return;
338+
if (element.getAttribute('checked') == 'false')return;
339+
element.setAttribute('checked', 'false');
340+
let id = element.getAttribute('data-id');
341+
this.tagCal(parseInt(id), this.MODE.delete);
342+
element.removeChild(element.querySelector('i'));
343+
for(let index in this.SELECTED_DOM.childNodes){
344+
let D = this.SELECTED_DOM.childNodes[index];
345+
if((D instanceof HTMLElement) && (D.getAttribute('data-id') == id)){
346+
this.tagCal(parseInt(id), this.MODE.delete);
347+
D.remove();
348+
break;
349+
}
322350
}
323351
}
324352

353+
selectToSelected(element,stack){
354+
element.setAttribute('checked', 'true');
355+
let div = document.createElement('div');
356+
div.className = 'dlp dlp-text dlp-label';
357+
let id = element.getAttribute('data-id');
358+
div.setAttribute('data-id', id);
359+
div.setAttribute('stack', stack);
360+
div.textContent = element.textContent;
361+
var object = this;
362+
div.addEventListener('click', function () {
363+
object.selectInactive(stack, element);
364+
});
365+
this.SELECTED_DOM.append(div);
366+
}
367+
325368
selectToParent(node, stack, parent_node) {
326369
let currentStackDocuments = this.STACKS[stack].childNodes;
327370
currentStackDocuments.forEach((D, index) => {
@@ -330,9 +373,7 @@ class ComponentCascadeDot {
330373
if (parents.length > 0 && (parents[stack - 1] != parent_node)) {
331374
currentStackDocuments[index].classList.add('dlp-label-silence');
332375
}
333-
currentStackDocuments[index].classList.remove('dlp-label-active');
334376
if (node == parseInt(D.getAttribute('data-id'))) {
335-
currentStackDocuments[index].classList.add('dlp-label-active');
336377
currentStackDocuments[index].classList.remove('dlp-label-silence');
337378
}
338379
});
@@ -344,7 +385,6 @@ class ComponentCascadeDot {
344385
let children = [];
345386
if (!Array.isArray(nodes) || (nodes.length == 0)) {
346387
currentStackDocuments.forEach((D) => {
347-
D.classList.remove('dlp-label-active');
348388
D.classList.add('dlp-label-silence');
349389
let child = JSON.parse(D.getAttribute('data-nodes-id'));
350390
if (Array.isArray(child)) {

‎test/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
new ComponentPlane();
2525
});*/
2626

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

0 commit comments

Comments
 (0)