Skip to content

Commit 0fb143e

Browse files
author
hikki
committed
1.7
1 parent 951ee37 commit 0fb143e

File tree

3 files changed

+102
-39
lines changed

3 files changed

+102
-39
lines changed

‎resources/assets/component.js

Lines changed: 95 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class ComponentDot {
7676
this.name = name;
7777
this.DOM = document.getElementById(name);
7878
this.make(selected, select);
79-
this.selected_data = Object.keys(selected);
79+
this.selected_data = selected;
8080
this.select_data = this.selected_data.map((x) => x);
8181
this.insert_data = [];
8282
this.delete_data = [];
@@ -94,7 +94,7 @@ class ComponentDot {
9494
let selected_dom = '';
9595
let select_dom = '';
9696
for (let i in select) {
97-
if (selected[i]) {
97+
if (selected.indexOf(parseInt(i)) != -1) {
9898
selected_dom += `<div class='dlp dlp-text dlp-label' data-id='${i}' title="${select[i]}">${select[i]}</div>`;
9999
continue;
100100
}
@@ -181,12 +181,17 @@ class ComponentDot {
181181
}
182182

183183
class ComponentCascadeDot {
184-
constructor(name, selected, select,options) {
184+
constructor(name, selected, select, options) {
185185
this.name = name;
186186
this.DOM = document.getElementById(name);
187-
this.selected_data = selected;
188-
this.select_data = select;
189-
this.make().makeSelect();
187+
this.OPTIONS = Object.assign({
188+
select_dimensional: []
189+
}, options);
190+
this.selected_data = Object.keys(selected);
191+
this.select_data = this.selected_data.map((x) => x);
192+
this.insert_data = [];
193+
this.delete_data = [];
194+
this.make().makeSelect(select);
190195
}
191196

192197
make() {
@@ -201,24 +206,30 @@ class ComponentCascadeDot {
201206
return this;
202207
}
203208

204-
makeSelect() {
209+
makeSelect(select) {
205210
this.dimensional_data = [];
206-
this.makeDimensional(this.select_data);
211+
this.makeDimensional(select);
207212
for (let stack in this.dimensional_data) {
213+
stack = parseInt(stack);
208214
let data = this.dimensional_data[stack];
209215
let stackDom = document.createElement('div');
210216
stackDom.className = 'dot-cascade-stack dlp-scroll';
217+
var allowSelect = true;
218+
if (this.OPTIONS.select_dimensional.length > 0 && (this.OPTIONS.select_dimensional.indexOf(stack) == -1)) {
219+
allowSelect = false;
220+
}
211221
data.forEach((v) => {
212222
let div = document.createElement('div');
213223
div.className = 'dlp dlp-text dlp-label';
214224
div.setAttribute('data-id', v.key);
225+
div.setAttribute('allow-select', allowSelect);
215226
div.textContent = v.val;
216227
if (v.hasOwnProperty('nodes')) {
217228
let nodes = v.nodes.map((n) => n.key);
218229
div.setAttribute('data-nodes-id', JSON.stringify(nodes));
219230
}
220231
div.setAttribute('data-parent-nodes-id', JSON.stringify(v.parentNodes));
221-
div.addEventListener('click', this.select.bind(this, div, parseInt(stack)));
232+
div.addEventListener('click', this.select.bind(this, div, stack));
222233
stackDom.append(div);
223234
});
224235
this.CONTENT_DOM.append(stackDom);
@@ -257,79 +268,131 @@ class ComponentCascadeDot {
257268
let nodes = JSON.parse(element.getAttribute('data-nodes-id'));
258269
this.selectToChildren(stack + 1, nodes);
259270
/*current stack*/
271+
this.selectActive(stack,element);
272+
/*parent nodes*/
273+
let parent_nodes = JSON.parse(element.getAttribute('data-parent-nodes-id'));
274+
if (Array.isArray(parent_nodes)) {
275+
for (let stack in parent_nodes) {
276+
this.selectToParent(parent_nodes[stack], stack, parent_nodes[stack - 1]);
277+
}
278+
}
279+
}
280+
281+
selectActive(stack,element){
260282
let currentStackDocuments = this.STACKS[stack].childNodes;
261283
let parentNode = JSON.parse(element.getAttribute('data-parent-nodes-id')).pop();
262284
currentStackDocuments.forEach((D, index) => {
263285
currentStackDocuments[index].classList.remove('dlp-label-active');
264286
currentStackDocuments[index].classList.remove('dlp-label-silence');
265287
let parents = JSON.parse(D.getAttribute('data-parent-nodes-id'));
266-
if(parents[stack-1] != parentNode){
288+
if (parents[stack - 1] != parentNode) {
267289
currentStackDocuments[index].classList.add('dlp-label-silence');
268290
}
269291
});
270292
element.classList.add('dlp-label-active');
271-
/*parent nodes*/
272-
let parent_nodes = JSON.parse(element.getAttribute('data-parent-nodes-id'));
273-
if(Array.isArray(parent_nodes)){
274-
for (let stack in parent_nodes){
275-
this.selectToParent(parent_nodes[stack],stack,parent_nodes[stack-1]);
276-
}
293+
if(element.getAttribute('allow-select') == 'true'){
294+
element.setAttribute('allow-select','false');
295+
let div = document.createElement('div');
296+
div.className = 'dlp dlp-text dlp-label';
297+
div.setAttribute('data-id',element.getAttribute('data-id'));
298+
div.setAttribute('stack',stack);
299+
div.textContent = element.textContent;
300+
div.addEventListener('click',function () {
301+
element.setAttribute('allow-select','true');
302+
this.remove();
303+
});
304+
this.SELECTED_DOM.append(div);
277305
}
278306
}
279307

280-
selectToParent(node,stack,parent_node) {
308+
selectToParent(node, stack, parent_node) {
281309
let currentStackDocuments = this.STACKS[stack].childNodes;
282310
currentStackDocuments.forEach((D, index) => {
283311
let parents = JSON.parse(D.getAttribute('data-parent-nodes-id'));
284312
currentStackDocuments[index].classList.remove('dlp-label-silence');
285-
if(parents.length>0 && (parents[stack-1] != parent_node)) {
313+
if (parents.length > 0 && (parents[stack - 1] != parent_node)) {
286314
currentStackDocuments[index].classList.add('dlp-label-silence');
287315
}
288316
currentStackDocuments[index].classList.remove('dlp-label-active');
289-
if(node == parseInt(D.getAttribute('data-id'))){
317+
if (node == parseInt(D.getAttribute('data-id'))) {
290318
currentStackDocuments[index].classList.add('dlp-label-active');
291319
currentStackDocuments[index].classList.remove('dlp-label-silence');
292320
}
293321
});
294322
}
295323

296324
selectToChildren(stack, nodes) {
297-
if(stack > (this.dimensional_data.length-1))return;
325+
if (stack > (this.dimensional_data.length - 1)) return;
298326
let currentStackDocuments = this.STACKS[stack].childNodes;
299327
let children = [];
300-
if(!Array.isArray(nodes) || (nodes.length == 0)){
328+
if (!Array.isArray(nodes) || (nodes.length == 0)) {
301329
currentStackDocuments.forEach((D) => {
302330
D.classList.remove('dlp-label-active');
303331
D.classList.add('dlp-label-silence');
304332
let child = JSON.parse(D.getAttribute('data-nodes-id'));
305-
if(Array.isArray(child)){
306-
child.forEach((c)=>{
307-
if(children.indexOf(child)==-1){
333+
if (Array.isArray(child)) {
334+
child.forEach((c) => {
335+
if (children.indexOf(child) == -1) {
308336
children.push(c);
309337
}
310338
});
311339
}
312340
});
313-
this.selectToChildren(stack+1,nodes);
341+
this.selectToChildren(stack + 1, nodes);
314342
return;
315343
}
316344

317-
currentStackDocuments.forEach((D)=>{
318-
if(nodes.indexOf(parseInt(D.getAttribute('data-id'))) != -1) {
345+
currentStackDocuments.forEach((D) => {
346+
if (nodes.indexOf(parseInt(D.getAttribute('data-id'))) != -1) {
319347
D.classList.remove('dlp-label-silence');
320348
let child = JSON.parse(D.getAttribute('data-nodes-id'));
321-
if(Array.isArray(child)){
322-
child.forEach((c)=>{
323-
if(children.indexOf(child)==-1){
349+
if (Array.isArray(child)) {
350+
child.forEach((c) => {
351+
if (children.indexOf(child) == -1) {
324352
children.push(c);
325353
}
326354
});
327355
}
328-
}else {
356+
} else {
329357
D.classList.add('dlp-label-silence');
330358
}
331359
});
332-
this.selectToChildren(stack+1,children);
360+
this.selectToChildren(stack + 1, children);
361+
}
362+
363+
tagCal(id, operate) {
364+
if (operate == 'insert') {
365+
if (this.select_data.indexOf(id) == -1) {
366+
this.select_data.push(id);
367+
this.selectInputDOM.value = JSON.stringify(this.select_data);
368+
}
369+
if (this.selected_data.indexOf(id) == -1 && this.insert_data.indexOf(id) == -1) {
370+
this.insert_data.push(id);
371+
this.insertInputDOM.value = JSON.stringify(this.insert_data);
372+
}
373+
let index = this.delete_data.indexOf(id);
374+
if (index != -1) {
375+
this.delete_data.splice(index, 1);
376+
this.deleteInputDOM.value = JSON.stringify(this.delete_data);
377+
}
378+
return;
379+
}
380+
if (operate == 'delete') {
381+
let index = this.select_data.indexOf(id);
382+
if (index != -1) {
383+
this.select_data.splice(index, 1);
384+
this.selectInputDOM.value = JSON.stringify(this.select_data);
385+
}
386+
if (this.selected_data.indexOf(id) != -1 && this.delete_data.indexOf(id) == -1) {
387+
this.delete_data.push(id);
388+
this.deleteInputDOM.value = JSON.stringify(this.delete_data);
389+
}
390+
index = this.insert_data.indexOf(id);
391+
if (index != -1) {
392+
this.insert_data.splice(index, 1);
393+
this.insertInputDOM.value = JSON.stringify(this.insert_data);
394+
}
395+
}
333396
}
334397
}
335398

‎src/DLPViewer.php

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,24 @@ class DLPViewer
2020
* @param Form $form
2121
* @param string $column 数据字段名
2222
* @param string $title 名称
23-
* @param array $select 全部选项 [[value=>text],[value=>text]...]
24-
* @param array $selected 已选择选项 [[value=>text],[value=>text]...]
23+
* @param array $selected 已选择选项 [value1,value2,...]
24+
* @param array $select 全部选项 [[value=>text],[value=>text]...]
2525
* @param array $settings 配置项[setting,...]
2626
* settings.strict boolean json严格模式消除json敏感字符问题
2727
* settings.width string 容器宽度设置
2828
* settings.height string 容器高度设置
2929
*/
30-
public static function makeComponentDot(Form $form, string $column, string $title, array $select = [], array $selected = [], array $settings = [])
30+
public static function makeComponentDot(Form $form, string $column, string $title, array $selected = [], array $select = [], array $settings = [])
3131
{
3232
$strict = isset($settings['strict']) && $settings['strict'] ? true : false;
3333
$width = isset($settings['width']) ? $settings['width'] : '100%';
3434
$height = isset($settings['height']) ? $settings['height'] : '200px';
3535
if ($strict) {
36-
$select = DLPHelper::safeJson($select);
3736
$selected = DLPHelper::safeJson($selected);
37+
$select = DLPHelper::safeJson($select);
3838
} else {
39-
$select = json_encode($select, JSON_UNESCAPED_UNICODE | JSON_HEX_QUOT | JSON_HEX_APOS);
4039
$selected = json_encode($selected, JSON_UNESCAPED_UNICODE | JSON_HEX_QUOT | JSON_HEX_APOS);
40+
$select = json_encode($select, JSON_UNESCAPED_UNICODE | JSON_HEX_QUOT | JSON_HEX_APOS);
4141
}
4242
Admin::script(<<<EOF
4343
new ComponentDot("{$column}",JSON.parse('{$selected}'),JSON.parse('{$select}'));

‎test/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div id="test2" style="width: 500px;height: 320px"></div>
1717
</body>
1818
<script>
19-
new ComponentDot('test',{1:'a',2:'b',3:'c'},{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'});
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

@@ -32,6 +32,6 @@
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'}]}]},
3434
{'key':6,'val':'f','nodes':[{'key':61,'val':'f1'},{'key':62,'val':'f2'}]}
35-
]);
35+
],{select_dimensional:[1,2]});
3636
</script>
3737
</html>

0 commit comments

Comments
 (0)