Merge branch 'dev'

README.md

@@ -61,26 +61,22 @@ var data = {
 var tree = new InfiniteTree({
     el: document.querySelector('#tree'),
     data: data,
-    // Open all nodes
-    autoOpen: true,
-    // Droppable elements
-    droppable: true,
-    // Load nodes on demand
-    loadNodes: function(parentNode, done) {
+    autoOpen: true, // open all nodes
+    droppable: true, // droppable
+    loadNodes: function(parentNode, done) { // load node on demand
         var nodes = [];
         setTimeout(function() { // Loading...
             done(null, nodes);
         }, 1000);
     },
-    // Return false to prevent selecting a node
-    shouldSelectNode: function(node) {
+    nodeIdAttr: 'data-id', // the node id attribute
+    shouldSelectNode: function(node) { // determine if the node is selectable
         if (!node || (node === tree.getSelectedNode())) {
-            return false; // Prevent from deselecting the current node
+            return false; // prevent from deselecting the current node
         }
         return true;
     },
-    // Render tree nodes with your own way
-    rowRenderer: function(node, treeOptions) {
+    rowRenderer: function(node, treeOptions) { // customizable renderer
         return '<div aria-id="<node-id>" class="tree-item">' + node.name + '</div>';
     }
 });

dist/infinite-tree.css

@@ -8,37 +8,37 @@
 .infinite-tree-content {
   outline: 0;
 }
-.infinite-tree-content .tree-selected.tree-item,
-.infinite-tree-content .tree-selected.tree-item:hover {
+.infinite-tree-content .infinite-tree-selected.infinite-tree-item,
+.infinite-tree-content .infinite-tree-selected.infinite-tree-item:hover {
   background: #deecfd;
   border: 1px solid #06c;
 }
-.infinite-tree-content .tree-item {
+.infinite-tree-content .infinite-tree-item {
   border: 1px solid transparent;
   cursor: default;
 }
-.infinite-tree-content .tree-item:hover {
+.infinite-tree-content .infinite-tree-item:hover {
   background: #f2fdff;
 }
-.infinite-tree-content .tree-item.dragover {
+.infinite-tree-content .infinite-tree-item.infinite-tree-dragover {
   border: 1px dotted #ccc;
   background-color: #f5f6f7;
 }
-.infinite-tree-content .tree-node {
+.infinite-tree-content .infinite-tree-node {
   position: relative;
 }
-.infinite-tree-content .tree-toggler {
+.infinite-tree-content .infinite-tree-toggler {
   color: #666;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-.infinite-tree-content .tree-toggler:hover {
+.infinite-tree-content .infinite-tree-toggler:hover {
   color: #333;
   text-decoration: none;
 }
-.infinite-tree-content .tree-title {
+.infinite-tree-content .infinite-tree-title {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;

dist/infinite-tree.js

@@ -136,16 +136,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        _this.options = {
 	            autoOpen: false,
-	            dragoverClass: 'dragover',
+	            dragoverClass: 'infinite-tree-dragover',
 	            droppable: false,
+	            droppableAttr: 'droppable',
 	            el: null,
 	            layout: 'div',
 	            loadNodes: null,
 	            noDataClass: 'infinite-tree-no-data',
 	            noDataText: 'No data',
+	            nodeIdAttr: 'data-id',
 	            rowRenderer: _renderer.defaultRowRenderer,
 	            selectable: true,
-	            shouldSelectNode: null
+	            shouldSelectNode: null,
+	            togglerClass: 'infinite-tree-toggler'
 	        };
 	        _this.state = {
 	            openNodes: [],
@@ -162,7 +165,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        _this.contentListener = {
 	            'click': function click(e) {
 	                var itemTarget = null;
-	                var handleToggler = false;
+	                var clickToggler = false;
 
 	                (0, _helper.stopPropagation)(e);
 
@@ -174,8 +177,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 
 	                while (itemTarget && itemTarget.parentElement !== _this.contentElement) {
-	                    if (itemTarget.className.indexOf('tree-toggler') >= 0) {
-	                        handleToggler = true;
+	                    if ((0, _helper.hasClass)(itemTarget, _this.options.togglerClass)) {
+	                        clickToggler = true;
 	                    }
 	                    itemTarget = itemTarget.parentElement;
 	                }
@@ -184,15 +187,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    return;
 	                }
 
-	                var id = itemTarget.getAttribute('aria-id');
+	                var id = itemTarget.getAttribute(_this.options.nodeIdAttr);
 	                var node = _this.getNodeById(id);
 
 	                if (!node) {
 	                    return;
 	                }
 
 	                // Click on the toggler to open/close a tree node
-	                if (handleToggler) {
+	                if (clickToggler) {
 	                    _this.toggleNode(node);
 	                    return;
 	                }
@@ -223,11 +226,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    (0, _helper.removeClass)(_this.dragoverElement, _this.options.dragoverClass);
 	                    _this.dragoverElement = null;
 
-	                    if (!itemTarget.hasAttribute('droppable')) {
+	                    if (!itemTarget.hasAttribute(_this.options.droppableAttr)) {
 	                        return;
 	                    }
 
-	                    var canDrop = !itemTarget.getAttribute('droppable').match(/false/i);
+	                    var canDrop = !itemTarget.getAttribute(_this.options.droppableAttr).match(/false/i);
 	                    if (canDrop) {
 	                        (0, _helper.addClass)(itemTarget, _this.options.dragoverClass);
 	                        _this.dragoverElement = itemTarget;
@@ -256,7 +259,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                (0, _helper.preventDefault)(e);
 
 	                if (_this.dragoverElement) {
-	                    var id = _this.dragoverElement.getAttribute('aria-id');
+	                    var id = _this.dragoverElement.getAttribute(_this.options.nodeIdAttr);
 	                    var node = _this.getNodeById(id);
 
 	                    (0, _helper.removeClass)(_this.dragoverElement, _this.options.dragoverClass);
@@ -1016,8 +1019,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (!this.contentElement) {
 	            return false;
 	        }
-	        // Get the offset height of the first child element that contains the "tree-item" class
-	        var firstChild = this.contentElement.querySelectorAll('.tree-item')[0];
+	        // Get the offset height of the first child
+	        var firstChild = this.contentElement.firstChild;
 	        var rowHeight = firstChild && firstChild.offsetHeight || 0;
 	        this.scrollTop(nodeIndex * rowHeight);
 
@@ -2346,34 +2349,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var toggler = (0, _helper.buildHTML)('a', togglerContent, {
 	        'class': function () {
 	            if (more && open) {
-	                return (0, _helper.classNames)('tree-toggler');
+	                return (0, _helper.classNames)('infinite-tree-toggler');
 	            }
 	            if (more && !open) {
-	                return (0, _helper.classNames)('tree-toggler', 'tree-closed');
+	                return (0, _helper.classNames)('infinite-tree-toggler', 'infinite-tree-closed');
 	            }
 	            if (!more && loadOnDemand) {
-	                return (0, _helper.classNames)('tree-toggler', 'tree-closed');
+	                return (0, _helper.classNames)('infinite-tree-toggler', 'infinite-tree-closed');
 	            }
 	            return '';
 	        }()
 	    });
 	    var title = (0, _helper.buildHTML)('span', (0, _helper.quoteattr)(name), {
-	        'class': (0, _helper.classNames)('tree-title')
+	        'class': (0, _helper.classNames)('infinite-tree-title')
 	    });
 	    var treeNode = (0, _helper.buildHTML)('div', toggler + title, {
-	        'class': 'tree-node',
+	        'class': 'infinite-tree-node',
 	        'style': 'margin-left: ' + depth * 18 + 'px'
 	    });
 
 	    return (0, _helper.buildHTML)('div', treeNode, {
-	        'aria-id': id,
-	        'aria-expanded': more && open,
-	        'aria-depth': depth,
-	        'aria-path': path,
-	        'aria-selected': selected,
-	        'aria-children': childrenLength,
-	        'aria-total': total,
-	        'class': (0, _helper.classNames)('tree-item', { 'tree-selected': selected }),
+	        'data-id': id,
+	        'data-expanded': more && open,
+	        'data-depth': depth,
+	        'data-path': path,
+	        'data-selected': selected,
+	        'data-children': childrenLength,
+	        'data-total': total,
+	        'class': (0, _helper.classNames)('infinite-tree-item', { 'infinite-tree-selected': selected }),
 	        'droppable': true
 	    });
 	};

examples/classic/index.js

@@ -3,7 +3,7 @@ import renderer from './renderer';
 import './index.styl';
 import './animation.styl';
 import { addEventListener, preventDefault, stopPropagation, quoteattr } from '../../src/helper';
-import data from './data.json';
+import data from '../data.json';
 
 const updatePreview = (node) => {
     const el = document.querySelector('#classic [data-id="preview"]');

examples/classic/index.styl

@@ -23,30 +23,26 @@
         font-size: 16px;
         line-height: 42px;
     }
-    [data-id="tree"] {
-        border: 1px solid #ccc;
-        background-color: #fff;
-    }
-
     .tree {
         border: 1px solid #ccc;
         background-color: #fff;
     }
-    .tree-toggler {
+
+    .infinite-tree-toggler {
         text-align: center;
         margin-right: 5px;
     }
-    .tree-folder-icon {
+    .infinite-tree-folder-icon {
         width: 19px;
     }
-    .tree-folder-icon:first-child {
+    .infinite-tree-folder-icon:first-child {
         margin-left: 20px;
     }
-    .tree-folder-icon:before {
+    .infinite-tree-folder-icon:before {
         margin-right: 5px;
     }
 
-    .tree-node .count {
+    .infinite-tree-node .count {
         position: absolute;
         right: 4px;
         padding: 0 8px;
@@ -59,55 +55,8 @@
         text-align: center;
         border-radius: 2px;
     }
-
-
-    .infinite-tree {
-    }
     .infinite-tree-scroll {
         overflow: auto;
         max-height: 400px;
     }
-    .infinite-tree-table {
-        width: 100%;
-    }
-    .infinite-tree-content {
-        // Outline removes default browser's borders for focused element.
-        outline: 0;
-
-        .tree-selected.tree-item,
-        .tree-selected.tree-item:hover {
-            background: #deecfd;
-            border: 1px solid #0066cc;
-        }
-        .tree-item {
-            border: 1px solid transparent;
-            cursor: default;
-        }
-        .tree-item:hover {
-            background: #f2fdff;
-        }
-        .tree-item.dragover {
-            border: 1px dotted #ccc;
-            background-color: #f5f6f7;
-        }
-        .tree-node {
-            position: relative;
-        }
-        .tree-toggler {
-            color: #666;
-            user-select: none;
-        }
-        .tree-toggler:hover {
-            color: #333;
-            text-decoration: none;
-        }
-        .tree-title {
-            cursor: pointer;
-            user-select: none;
-        }
-    }
-    // centering message that appears when no data provided
-    .infinite-tree-no-data {
-        text-align: center;
-    }
 }

examples/classic/renderer.js

@@ -26,29 +26,29 @@ const renderer = (node, treeOptions) => {
     const toggler = buildHTML('a', togglerContent, {
         'class': (() => {
             if (!more && loadOnDemand) {
-                return classNames('tree-toggler', 'tree-closed');
+                return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
             }
             if (more && open) {
-                return classNames('tree-toggler');
+                return classNames(treeOptions.togglerClass);
             }
             if (more && !open) {
-                return classNames('tree-toggler', 'tree-closed');
+                return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
             }
             return '';
         })()
     });
 
     const icon = buildHTML('i', '', {
         'class': classNames(
-            'tree-folder-icon',
+            'infinite-tree-folder-icon',
             'glyphicon',
             { 'glyphicon-folder-open': more && open },
             { 'glyphicon-folder-close': more && !open },
             { 'glyphicon-file': !more }
         )
     });
     const title = buildHTML('span', quoteattr(name), {
-        'class': classNames('tree-title')
+        'class': classNames('infinite-tree-title')
     });
     const loadingIcon = buildHTML('i', '', {
         'style': 'margin-left: 5px',
@@ -63,21 +63,21 @@ const renderer = (node, treeOptions) => {
         'class': 'count'
     });
     const treeNode = buildHTML('div', toggler + icon + title + loadingIcon + count, {
-        'class': 'tree-node',
+        'class': 'infinite-tree-node',
         'style': 'margin-left: ' + depth * 18 + 'px'
     });
 
     let treeNodeAttributes = {
-        'aria-id': id,
-        'aria-expanded': more && open,
-        'aria-depth': depth,
-        'aria-path': path,
-        'aria-selected': selected,
-        'aria-children': childrenLength,
-        'aria-total': total,
+        'data-id': id,
+        'data-expanded': more && open,
+        'data-depth': depth,
+        'data-path': path,
+        'data-selected': selected,
+        'data-children': childrenLength,
+        'data-total': total,
         'class': classNames(
-            'tree-item',
-            { 'tree-selected': selected }
+            'infinite-tree-item',
+            { 'infinite-tree-selected': selected }
         )
     };
     if (droppable) {

examples/common.css

@@ -1,5 +1,6 @@
 html, body {
     font-family: Arial, Helvetica, sans-serif;
+    min-width: 800px;
 }
 .navbar .navbar-brand {
     color: #f0f0f0;