treeboxjs - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

dist/index.browser.js

@@ -1,1 +0,1 @@
-export default class TreeBox { constructor({config = {}, nodes, root} = {}) { if (!nodes) { throw new Error('TreeBox: nodes not provided.'); } if (!root) { throw new Error('TreeBox: root element not provided.'); } this.nodes = nodes; this._prepareNodesChildren(this.nodes); this.root = root; this.activeElement = null; this.selectedNode = null; this.navigate('/'); } _activate(keyPath) { const selectedNode = this._getNodeAtPath(this.nodes, keyPath); this.selectedNode = selectedNode; const {children, display} = selectedNode; if (display) { this._display(display); return true; } else if (children) { return children; } else { throw new Error('TreeBox: given path yields invalid result.'); } } _display(el) { if (typeof el !== 'string') { el = el.toString(); } el = el.trim(); if (typeof window !== 'undefined') { const div = document.createElement('DIV'); div.innerHTML = el; el = div.firstChild; } el = this._prepareNewEl(el); if (this.activeElement) { this.removeCb(this.activeElement); this.root.removeChild(this.activeElement); } this.removeCb = this.selectedNode.onremove || (() => {}); this.beforeAppendCb = this.selectedNode.onbeforeadded || (() => {}); this.appendCb = this.selectedNode.onadded || (() => {}); this.beforeAppendCb(el); this.activeElement = el; this.root.appendChild(el); this.appendCb(this.activeElement); } _getDOMNodeFromString(parser, el) { return parser.parseFromString(el, 'text/xml').documentElement; } _getNodeAtPath(nodes, keyPath) { let curr = nodes; let visitedStr = ''; keyPath.forEach((id, index) => { visitedStr += `/${id}`; if (curr.hasOwnProperty('children') && curr.children.hasOwnProperty(id)) { curr = curr.children[id]; } else { throw new Error(`Path does not exist at "${visitedStr}"`); } }); return curr; } _prepareNewEl(el) { if (el.querySelectorAll) { Array.from(el.querySelectorAll('[treebox-href]')).forEach(tbLink => { const tbHref = tbLink.getAttribute('treebox-href'); tbLink.href = 'treebox: ' + tbHref; tbLink.onclick = e => { e.preventDefault(); tbLink.blur(); return this.navigate(tbHref); }; }); } return el; } _prepareNodesChildren(nodes, currPath = []) { Object.keys(nodes.children).forEach(key => { nodes.children[key].id = key; const keyPath = currPath.concat(nodes.children[key].id); nodes.children[key].keyPath = keyPath; if (nodes.children[key].hasOwnProperty('children')) { this._prepareNodesChildren(nodes.children[key], keyPath); } }); } _pathToKeys(path) { return path.split('/').filter(x => x); } navigate(path) { return this._activate(this._pathToKeys(path)); } } 
+export default class TreeBox{constructor({config:e={},nodes:t,root:r}={}){if(!t)throw new Error("TreeBox: nodes not provided.");if(!r)throw new Error("TreeBox: root element not provided.");this.nodes=t,this._prepareNodesChildren(this.nodes),this.root=r,this.activeElement=null,this.selectedNode=null,this.navigate("/")}_activate(e){const t=this._getNodeAtPath(this.nodes,e);this.selectedNode=t;const{children:r,display:i}=t;if(i)return this._display(i),!0;if(r)return r;throw new Error("TreeBox: given path yields invalid result.")}_display(e){if("string"!=typeof e&&(e=e.toString()),e=e.trim(),"undefined"!=typeof window){const t=document.createElement("DIV");t.innerHTML=e,e=t.firstChild}e=this._prepareNewEl(e),this.activeElement&&(this.removeCb(this.activeElement),this.root.removeChild(this.activeElement)),this.removeCb=this.selectedNode.onremove||(()=>{}),this.beforeAppendCb=this.selectedNode.onbeforeadded||(()=>{}),this.appendCb=this.selectedNode.onadded||(()=>{}),this.beforeAppendCb(e),this.activeElement=e,this.root.appendChild(e),this.appendCb(this.activeElement)}_getDOMNodeFromString(e,t){return e.parseFromString(t,"text/xml").documentElement}_getNodeAtPath(e,t){let r=e,i="";return t.forEach((e,t)=>{if(i+="/"+e,!r.hasOwnProperty("children")||!r.children.hasOwnProperty(e))throw new Error(`Path does not exist at "${i}"`);r=r.children[e]}),r}_prepareNewEl(e){return e.querySelectorAll&&Array.from(e.querySelectorAll("[treebox-href]")).forEach(e=>{const t=e.getAttribute("treebox-href");e.href="treebox: "+t,e.onclick=r=>(r.preventDefault(),e.blur(),this.navigate(t))}),e}_prepareNodesChildren(e,t=[]){Object.keys(e.children).forEach(r=>{e.children[r].id=r;const i=t.concat(e.children[r].id);e.children[r].keyPath=i,e.children[r].hasOwnProperty("children")&&this._prepareNodesChildren(e.children[r],i)})}_pathToKeys(e){return e.split("/").filter(e=>e)}navigate(e){return this._activate(this._pathToKeys(e))}}

package.json

 {
   "name": "treeboxjs",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": " Display and navigate hierarchical views ",
@@ -18,2 +18,3 @@ "main": "./dist/index.js",
     "gulp-strip-comments": "^2.5.2",
+    "gulp-terser": "^1.2.0",
     "webpack": "^4.42.1",
@@ -20,0 +21,0 @@ "webpack-cli": "^3.3.11"

README.md

@@ -0,3 +1,82 @@
+<div align="center">
+  <h1>
+    treebox
+  </h1>
+</div>
+
+#### [See a live example on CodePen](https://codepen.io/jaredgorski/pen/XWmKVPQ)
+
+<div align="center">
+  <h2>
+    Install
+  </h2>
+</div>
+
 ```
 npm i treeboxjs
 ```
+
+<div align="center">
+  <h2>
+    Import
+  </h2>
+</div>
+<h3>
+  External JS with NPM:
+</h3>
+
+```js
+  import TreeBox from 'treeboxjs';
+
+  ...
+```
+
+<h3>
+  ES6 module:
+</h3>
+
+```js
+  <script type="module">
+    import TreeBox from 'https://unpkg.com/treeboxjs@<INSERT DESIRED VERSION>/dist/index.browser.js';
+    
+    ...
+```
+
+<div align="center">
+  <h2>
+    Use
+  </h2>
+</div>
+
+```js
+import TreeBox from 'treeboxjs';
+
+const nodes = {
+  display: `<h1>treebox example</h1>`, // This will display by default when treebox is rendered
+  children: {
+    directory: {
+      children: {
+        file: {
+          display: `<p>A file</p>`,
+        },
+      },
+    },
+    file: {
+      display: `
+        <div>
+          <p>Another file</p>
+          <p>Multiple elements must be wrapped in a single enclosing element</p>
+        </div>
+      `,
+    },
+  },
+};
+
+const root = document.getElementById('myTreeBoxRoot');
+
+const tb = new TreeBox({nodes, root}); // Initiate treebox and append it to the "root" element
+
+tb.navigate('/file'); // This code will cause treebox to render the `display` HTML at `nodes.children.file`
+tb.navigate('/directory/file'); // This code will cause treebox to render the `display` HTML at `nodes.children.directory.children.file`
+tb.navigate('/'); // This code will cause treebox to render the `display` HTML at `nodes.children`
+```

No alert changes

Improved metrics

Total package byte prevSize

8320

increased by13.03%

Number of lines in readme file

83

increased by1975%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes