initial

nuxodin · nuxodin · commit 30b6631b0ce3 · 2022-06-18T04:08:15.000+02:00
diff --git a/README.md b/README.md
@@ -50,7 +50,8 @@ treeElement.addEventListener('u1-tree1-select', (e) => { ... });
 
 ## API
 ```js
-el.select(); // todo!
+el.select();
+el.toggleExpand(true/false);
 ```
 
 
@@ -59,4 +60,3 @@ el.select(); // todo!
 https://raw.githack.com/u1ui/tree1.el/main/tests/custom.html  
 https://raw.githack.com/u1ui/tree1.el/main/tests/minimal.html  
 https://raw.githack.com/u1ui/tree1.el/main/tests/test.html  
-
diff --git a/tests/custom.html b/tests/custom.html
@@ -4,27 +4,29 @@
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width">
     <script src="../../u1/tests/test-init.js" type=module></script>
-    <script src="../../u1/auto.js" type=module></script>
     <title>Test</title>
 
+    <script src="../../u1/auto.js" type=module></script>
+
     <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/base.css/full.css">
     <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/classless.css/variables.min.css">
     <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/classless.css/classless.min.css">
-    <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/classless.css/more.min.css">
-    <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/classless.css/aria.min.css">
     <link rel=stylesheet href="https://cdn.jsdelivr.net/gh/u1ui/classless.css/simple.min.css">
 
     <style>
-        body {
-            place-content: initial;
-            --u1-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
-        }
+    body {
+        place-content: initial;
+        --u1-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+    }
     </style>
 
-
-    <script src="../tree1.js" type=module></script>
     <link rel=stylesheet href="../tree1.css">
 
+    <script type=module>
+        import {tree} from '../tree1.js';
+        customElements.define('u1-tree2', class extends tree {});
+    </script>
+
 <body>
 
 <section>
@@ -38,10 +40,6 @@
     }
     </style>
 
-    <script type=module>
-        import {tree} from '../tree1.js';
-        customElements.define('u1-tree2', class extends tree {});
-    </script>
 
     <u1-tree2 aria-expanded=true>root
         <u1-tree2>Folder 2
diff --git a/tests/test.html b/tests/test.html
@@ -21,9 +21,8 @@
         }
     </style>
 
-
     <script src="../tree1.js" type=module></script>
-    <link rel=stylesheet href="../tree1.css">
+    <link href="../tree1.css" rel=stylesheet>
 
 <body>
 
@@ -104,7 +103,6 @@
             }
         });
 
-
         const delaied = (fn, ms)=>{
             return new Promise(resolve => {
                 setTimeout(()=>{
@@ -113,7 +111,6 @@
                 }, ms);
             });
         }
-
     </script>
 
 </section>
diff --git a/tree1.js b/tree1.js
@@ -90,17 +90,18 @@ export class tree extends HTMLElement {
         this._markup();
     }
     _markup(){
-
-        //const myLevel = this?.parentNode?.tagName === this.tagName ? parseInt(this.parentNode.getAttribute('aria-level'))+1 : 0;
+        // own level
         const myLevel = this.root() === this ? 1 : parseInt(this.parentNode.getAttribute('aria-level')) + 1;
         this.setAttribute('aria-level', myLevel);
         this.style.setProperty('--level', myLevel);
 
+        // slot subnodes
         for (const child of this.children) {
             child.tagName === this.tagName && child.setAttribute('slot', 'children');
         }
         this.setAttribute('role', this.root() === this ? 'tree' : 'treeitem');
 
+        // if has children, its expandable
         if (this.items().length && !this.hasAttribute('aria-expanded')) this.setAttribute('aria-expanded', 'false');
     }
     items(){
@@ -163,10 +164,6 @@ export class tree extends HTMLElement {
         return this.parentNode.tagName === this.tagName ? this.parentNode.root() : this;
     }
 
-    get selected(){
-        console.log('used? zzz')
-        return this.root()._selected;
-    }
     select(){
         let old = this.root()._selected;
         if (old) old.setAttribute('aria-selected', 'false');
