1.7

Author: hikki

resources/assets/component.css

@@ -44,13 +44,13 @@
 
 .dlp-scroll{overflow: auto}
 .dlp-scroll::-webkit-scrollbar{width: 3px;}
-.dlp-scroll::-webkit-scrollbar-thumb{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #fff8eb;}
-.dlp-scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: #cacbcd7a;}
+.dlp-scroll::-webkit-scrollbar-thumb{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #e1e1e1;}
+.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%);}
 .dlp-dot{
     width: 100%;
     height: 100%;
     display: grid;
-    grid-template-rows: 30px auto;
+    grid-template-rows: 35px auto;
     color: rgba(255,255,255,.9);
     box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.4)!important;
     border-radius: 5px;
@@ -75,13 +75,38 @@
     padding: 5px 0 5px 5px;
     display: flex;
     border-radius: 5px 5px 0 0;
-    background: rgb(0 0 0 / 80%);
+    background: rgb(0 0 0 / 90%);
     border-top: 1px solid rgba(34,36,38,.15);
     border-bottom: 1px solid rgba(255,255,255,.1);
 }
 .dot-selected{width: 100%}
 .dot-selected>.dlp-label{background: white}
-.dot-select{padding: 5px 0 5px 0;background: #fff8eb;border-radius: 0 0 5px 5px;}
+.dot-select{padding: 5px 0 5px 0;background: rgb(43 43 43);border-radius: 0 0 5px 5px;}
+.dot-select-cascade{
+    display: flex;
+    flex-direction: row;
+    align-items:stretch;
+}
+.dot-cascade-stack{
+    padding: 2px 0 2px 5px;
+    border-radius: 3px;
+    flex-grow:1;
+    text-align: center;
+}
+.dot-cascade-stack>.dlp-label{
+    display: block;
+    max-width: unset;
+    min-width: unset;
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 3px;
+}
+.dot-cascade-stack>.dlp-label-active{
+    background: white;
+}
+.dot-cascade-stack>.dlp-label-silence{
+    opacity: 0.5;
+}
 
 .dlp-input{
     vertical-align: middle;

resources/assets/component.js

@@ -18,7 +18,10 @@ s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.
 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
 <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
 C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml"attributeName="transform"
-type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg>`
+type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg>`,
+    '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">
+  <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"/>
+</svg>`
 };
 
 function _componentRequest(url, method = "GET", data = {}, callback = function () {
@@ -187,7 +190,7 @@ class ComponentCascadeDot {
     }
 
     make(){
-        let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${this.name}-select" class="dot-selected dlp-scroll"></div></div><div class="dot-select dlp-scroll"></div></div>
+        let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${this.name}-select" class="dot-selected dlp-scroll"></div></div><div class="dot-select dot-select-cascade dlp-scroll"></div></div>
 <input name="${this.name}[data]" value="[]" type="hidden"><input name="${this.name}[insert]" value="[]" type="hidden"><input name="${this.name}[delete]" value="[]" type="hidden">`;
         this.DOM.insertAdjacentHTML('afterbegin', html);
         this.SELECT_DOM = document.querySelector(`#${this.name} .dot-selected`);
@@ -199,12 +202,23 @@ class ComponentCascadeDot {
     }
 
     makeSelect(){
-        this.dimensional = 0;
-        this.dimensional_data = {};
-
+        this.dimensional_data = [];
         this.makeDimensional(this.select_data);
         console.log(this.dimensional_data);
-        console.log(this.dimensional)
+        for (let stack in this.dimensional_data){
+            let data = this.dimensional_data[stack];
+            let stackDom = document.createElement('div');
+            stackDom.className = 'dot-cascade-stack dlp-scroll';
+            data.forEach((v)=>{
+                let div = document.createElement('div');
+                div.className='dlp dlp-text dlp-label';
+                div.setAttribute('data-id',v.key);
+                div.textContent = v.val;
+                div.addEventListener('click',this.select.bind(this, div));
+                stackDom.append(div);
+            });
+            this.CONTENT_DOM.append(stackDom);
+        }
     }
 
     makeDimensional(data,dimension=0){
@@ -214,20 +228,26 @@ class ComponentCascadeDot {
             }
             return;
         }
-        if(!Array.isArray(this.dimensional_data[dimension.toString()])){
-            this.dimensional_data[dimension.toString()] = [data];
+        if(!Array.isArray(this.dimensional_data[dimension])){
+            this.dimensional_data[dimension] = [data];
         }else {
-            this.dimensional_data[dimension.toString()].push(data);
+            this.dimensional_data[dimension].push(data);
         }
         if(!data.hasOwnProperty('nodes')){
-            if(dimension>this.dimensional)this.dimensional=dimension;
             return;
         }
         if(Array.isArray(data.nodes) == true && data.nodes.length > 0){
             dimension++;
             this.makeDimensional(data.nodes,dimension);
         }
     }
+
+    select(div){
+        div.parentNode.childNodes.forEach((D)=>{
+            D.classList.remove('dlp-label-active');
+        });
+        div.classList.add('dlp-label-active');
+    }
 }
 
 class ComponentLine {

test/index.html

@@ -9,21 +9,28 @@
 <body>
 <div id="test" style="width: 400px;height: 200px"></div>
 <div style="height: 30px"></div>
-<div id="test2" style="width: 650px;height: 360px"></div>
+<div id="test4" style="width: 650px;height: 360px"></div>
 <div style="height: 30px"></div>
 <div id="test3">点击</div>
 <div style="height: 30px"></div>
-<div id="test4" style="width: 500px;height: 320px"></div>
+<div id="test2" style="width: 500px;height: 320px"></div>
 </body>
 <script>
     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'});
 
     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('[]'));
 
-    document.getElementById('test3').addEventListener('click',function () {
+    /*document.getElementById('test3').addEventListener('click',function () {
         new ComponentPlane();
-    });
+    });*/
 
-    new ComponentCascadeDot('test4',{1:'a',2:'b',3:'c'},{1:'a',2:'b',3:'c',4:'d',5:'e',6:'f',7:'g',8:'h321321312312313',9:'i'});
+    new ComponentCascadeDot('test4',{1:'a',2:'b',3:'c'},[{'key':1,'val':'a'},
+        {'key':2,'val':'b','nodes':[{'key':11,'val':'b1'},{'key':12,'val':'b2'},{'key':13,'val':'b3'},{'key':14,'val':'b4'}]},
+        {'key':3,'val':'c'},
+        {'key':4,'val':'d','nodes':[]},
+        {'key':5,'val':'e','nodes':[{'key':21,'val':'e1'},{'key':22,'val':'e2'},{'key':23,'val':'e3'},{'key':24,'val':'e4'},{'key':25,'val':'e5'}
+                ,{'key':26,'val':'e6'},{'key':27,'val':'e7'},{'key':28,'val':'e8'},{'key':29,'val':'e9'},{'key':20,'val':'e0','nodes':[{'key':120,'val':'e00'},{'key':121,'val':'e01'}]}]},
+        {'key':6,'val':'f','nodes':[{'key':31,'val':'f1'},{'key':32,'val':'f2'}]}
+        ]);
 </script>
 </html>