@gip-recia/js-tree - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

package.json

 {
   "name": "@gip-recia/js-tree",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Js Tree",
@@ -5,0 +5,0 @@ "main": "src/js-tree.js",

rollup.config.js

@@ -53,3 +53,4 @@ // Import rollup plugins
         name: 'esupJsTree',
-        format: 'umd'
+        format: 'umd',
+        sourcemap: true
       }
@@ -56,0 +57,0 @@ ],

src/js-tree.js

 import { LitElement, html } from 'lit'
+import { ifDefined } from 'lit-html/directives/if-defined.js'
 import { jsTreeStyle } from './js-tree-style.js'
@@ -62,4 +63,12 @@
       // Initialisation de la navigation au clavier
-      this._activeElement =
-        this._datas && this._datas.length > 0 ? this._datas[0] : null
+      this._activeElement = null
+      if (this._datas && this._datas.length > 0) {
+        if (this.config.sort) {
+          this._activeElement =  this._datas.sort((node1, node2) =>
+            node1.text.localeCompare(node2.text)
+          )[0]
+        } else {
+          this._activeElement = this._datas[0]
+        }
+      }
     }
@@ -84,5 +93,5 @@ }
     // Focus sur l'élément actif
-    if (this._initKeyboardNavigation && this.activeElement) {
+    if (this._initKeyboardNavigation && this._activeElement) {
       this.shadowRoot.querySelectorAll('li').forEach(el => {
-        if (el.id === this.activeElement.idHtml) {
+        if (el.id === this._activeElement.idHtml) {
           el.focus()
@@ -240,11 +249,11 @@ }
     return html`
-      <ul id="${this.config.identifier}" class="${level === 0 ? 'root-tree' : parent.ulClasses.join(' ')}"
-          role="${level === 0 ? (this.config.isMultipleSelection ? 'listbox' : 'tree') : 'group'}"
-          aria-multiselectable="${level === 0 && this.config.isMultipleSelection ? 'true' : 'false'}" tabindex="${level === 0 ? '0' : '-1'}"
-          aria-activedescendant="${level === 0 && this.activeElement ? this.activeElement.idHtml : ''}"
-          aria-labelledby="${parent ? parent.idHtml + '-text' : ''}" @keydown="${(e) => this._onKeyDown(e)}">
+      <ul id="${parent ? parent.idHtml + '-children' : this.config.identifier}" class="${level === 0 ? 'root-tree' : parent.ulClasses.join(' ')}"
+          role="${level === 0 ? 'tree' : 'group'}"
+          aria-multiselectable="${ifDefined(level === 0 && this.config.isMultipleSelection ? 'true' : undefined)}" tabindex="${level === 0 ? '0' : '-1'}"
+          aria-activedescendant="${ifDefined(level === 0 && this._activeElement ? this._activeElement.idHtml : undefined)}"
+          aria-labelledby="${ifDefined(parent ? parent.idHtml + '-text' : undefined)}" @keydown="${(e) => this._onKeyDown(e)}">
         ${(datas || []).map((data) => {
           return html`
             <li id ="${data.idHtml}" class="${data.liClasses.join(' ')}" tabindex="-1" aria-expanded="${data.expanded}" 
-                role="${this.config.showCheckbox ? 'option' : 'treeitem'}" aria-selected="${data.selected}">
+                role="treeitem" aria-selected="${data.selected}" aria-owns="${ifDefined(data.loadedChildren ? data.idHtml + '-children' : undefined)}">
                 <div class="row" @click="${(e) => this._onClickRow(e, data)}">
@@ -290,3 +299,3 @@ ${this._renderIconIndicator(data)}
       return  html`<input type="checkbox" id ="${data.idHtml}-checkbox"
-        tabindex="-1" ?checked="${data.selected}" aria-checked="${data.selected}" aria-labelledby="${data.idHtml}-text"
+        tabindex="-1" ?checked="${data.selected}" aria-labelledby="${data.idHtml}-text"
         ?disabled="${this.config.allowDeselection === false && data.selected}">`
@@ -308,3 +317,3 @@ } else {
     }
-    this.activeElement = data
+    this._activeElement = data
 
@@ -334,3 +343,3 @@ if (this.config.allowDeselection !== false || !data.selected) {
     event.stopPropagation()
-    this.activeElement = data
+    this._activeElement = data
     if (data.children) {
@@ -371,17 +380,17 @@ if (data.expanded) {
       // Touche entrée ou Espace
-      this._onClickItem(event, this.activeElement)
+      this._onClickItem(event, this._activeElement)
     } else if (event.keyCode === 37) {
       // Touche gauche
       // On replie l'élément actif
-      if (this.activeElement.expanded) {
-        this.activeElement.expanded = false
-        if (this.activeElement.ulClasses.includes('subtree-active')) {
-          this.activeElement.ulClasses.splice(
-            this.activeElement.ulClasses.indexOf('subtree-active'),
+      if (this._activeElement.expanded) {
+        this._activeElement.expanded = false
+        if (this._activeElement.ulClasses.includes('subtree-active')) {
+          this._activeElement.ulClasses.splice(
+            this._activeElement.ulClasses.indexOf('subtree-active'),
             1
           )
         }
-        if (this.activeElement.liClasses.includes('item-active')) {
-          this.activeElement.liClasses.splice(
-            this.activeElement.liClasses.indexOf('item-active'),
+        if (this._activeElement.liClasses.includes('item-active')) {
+          this._activeElement.liClasses.splice(
+            this._activeElement.liClasses.indexOf('item-active'),
             1
@@ -391,6 +400,6 @@ )
       } else if (
-        this.activeElement.parent &&
-        this.activeElement.parent.expanded
+        this._activeElement.parent &&
+        this._activeElement.parent.expanded
       ) {
-        this.activeElement = this.activeElement.parent
+        this._activeElement = this._activeElement.parent
       }
@@ -403,5 +412,5 @@ event.preventDefault()
       // On se déplace sur l'élement au dessus
-      const sibbling = this._getUpVisibleSiblingElement(this.activeElement)
+      const sibbling = this._getUpVisibleSiblingElement(this._activeElement)
       if (sibbling != null) {
-        this.activeElement = sibbling
+        this._activeElement = sibbling
       }
@@ -414,9 +423,9 @@ event.preventDefault()
       // On déplie l'élément actif
-      if (this.activeElement.children) {
-        if (this.activeElement.expanded) {
+      if (this._activeElement.children) {
+        if (this._activeElement.expanded) {
           if (
-            this.activeElement.loadedChildren &&
-            this.activeElement.loadedChildren.length > 0
+            this._activeElement.loadedChildren &&
+            this._activeElement.loadedChildren.length > 0
           ) {
-            this.activeElement = this.activeElement.loadedChildren[0]
+            this._activeElement = this._activeElement.loadedChildren[0]
           }
@@ -427,10 +436,16 @@ event.preventDefault()
         } else {
-          this.activeElement.expanded = true
-          this.activeElement.ulClasses.push('subtree-active')
-          this.activeElement.liClasses.push('item-active')
-          this._loadDataChildren(this.activeElement, () => {
+          this._activeElement.expanded = true
+          this._activeElement.ulClasses.push('subtree-active')
+          this._activeElement.liClasses.push('item-active')
+          if (!this._activeElement.areChildrenLoaded) {
+            this._loadDataChildren(this._activeElement, () => {
+              event.preventDefault()
+              event.stopPropagation()
+              this.requestUpdate()
+            })
+          } else {
             event.preventDefault()
             event.stopPropagation()
             this.requestUpdate()
-          })
+          }
         }
@@ -446,13 +461,13 @@ } else {
         if (
-          this.activeElement.expanded &&
-          this.activeElement.loadedChildren &&
-          this.activeElement.loadedChildren.length > 0
+          this._activeElement.expanded &&
+          this._activeElement.loadedChildren &&
+          this._activeElement.loadedChildren.length > 0
         ) {
-          this.activeElement = this.activeElement.loadedChildren[0]
+          this._activeElement = this._activeElement.loadedChildren[0]
         } else {
           const sibbling = this._getDownVisibleSiblingElement(
-            this.activeElement
+            this._activeElement
           )
           if (sibbling != null) {
-            this.activeElement = sibbling
+            this._activeElement = sibbling
           }
@@ -459,0 +474,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

49205

decreased by-77.55%

Number of package files

12

decreased by-20%

Lines of code

1062

decreased by-48.45%

No dependency changes