Add an overlay element to default and classic examples

cheton · May 27, 2016 · a861060 · a861060
1 parent 367f423
commit a861060
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 8 deletions.
diff --git a/examples/classic/index.js b/examples/classic/index.js
@@ -2,7 +2,7 @@ import InfiniteTree from '../../src';
 import renderer from './renderer';
 import './index.styl';
 import './animation.styl';
-import { addEventListener, preventDefault, stopPropagation, quoteattr } from '../../src/helper';
+import { classNames, addClass, removeClass, hasClass, addEventListener, preventDefault, stopPropagation, quoteattr } from '../../src/helper';
 import data from '../data.json';
 
 const updatePreview = (node) => {
@@ -31,15 +31,26 @@ const tree = new InfiniteTree(document.querySelector('#classic [data-id="tree"]'
         accept: function(opts) {
             const { type, draggableTarget, droppableTarget, node } = opts;
 
-            console.log(opts);
+            if (hasClass(event.target, 'infinite-tree-overlay')) {
+                addClass(event.target, 'hover'); // add hover class
+            } else {
+                const el = tree.contentElement.querySelector('.infinite-tree-overlay');
+                removeClass(el, 'hover'); // remove hover class
+            }
 
             return true;
         },
         drop: function(e, opts) {
             const { draggableTarget, droppableTarget, node } = opts;
 
-            console.log('drop:', e, e.dataTransfer.getData('text'));
+            if (hasClass(event.target, 'infinite-tree-overlay')) {
+                removeClass(event.target, 'hover'); // remove hover class
+                const innerHTML = 'Dropped to an overlay element';
+                document.querySelector('#classic [data-id="dropped-result"]').innerHTML = innerHTML;
+                return;
+            }
 
+            console.log('drop:', event, event.dataTransfer.getData('text'));
             const innerHTML = 'Dropped to <b>' + quoteattr(node.name) + '</b>';
             document.querySelector('#classic [data-id="dropped-result"]').innerHTML = innerHTML;
         }
@@ -91,6 +102,20 @@ tree.on('selectNode', (node) => {
     console.log('selectNode', node);
     updatePreview(node);
 });
+tree.on('clusterDidChange', () => {
+    const overlayElement = document.createElement('div');
+    const top = tree.nodes.indexOf(tree.getNodeById('<root>.1'));
+    const bottom = tree.nodes.indexOf(tree.getNodeById('<root>.2'));
+
+    overlayElement.className = classNames(
+        'infinite-tree-overlay'
+    );
+    overlayElement.style.top = top * 22 + 'px';
+    overlayElement.style.height = (bottom - top) * 22 + 'px';
+    overlayElement.style.lineHeight = (bottom - top) * 22 + 'px';
+    overlayElement.appendChild(document.createTextNode('OVERLAY'));
+    tree.contentElement.appendChild(overlayElement);
+});
 
 tree.loadData(JSON.parse(JSON.stringify(data)));
 

diff --git a/examples/classic/index.styl b/examples/classic/index.styl
@@ -63,4 +63,17 @@
         overflow: auto;
         max-height: 400px;
     }
+
+    .infinite-tree-overlay {
+        position: absolute;
+        background-color: rgba(255, 0, 0, 0.5);
+        border: 1px solid red;
+        font-size: 20px;
+        font-weight: bold;
+        width: 100%;
+        text-align: center;
+    }
+    .infinite-tree-overlay.hover {
+        background-color: rgba(255, 0, 0, 0.6);
+    }
 }
diff --git a/examples/default/index.js b/examples/default/index.js
@@ -1,7 +1,7 @@
 import InfiniteTree from '../../src';
 import './index.styl';
 import './animation.styl';
-import { addEventListener, preventDefault, stopPropagation, quoteattr } from '../../src/helper';
+import { classNames, addClass, removeClass, hasClass, addEventListener, preventDefault, stopPropagation, quoteattr } from '../../src/helper';
 import data from '../data.json';
 
 const updatePreview = (node) => {
@@ -27,18 +27,29 @@ const tree = new InfiniteTree(document.querySelector('#default [data-id="tree"]'
     autoOpen: true, // Defaults to false
     droppable: {
         hoverClass: 'infinite-tree-drop-hover',
-        accept: function(opts) {
+        accept: function(event, opts) {
             const { type, draggableTarget, droppableTarget, node } = opts;
 
-            console.log(opts);
+            if (hasClass(event.target, 'infinite-tree-overlay')) {
+                addClass(event.target, 'hover'); // add hover class
+            } else {
+                const el = tree.contentElement.querySelector('.infinite-tree-overlay');
+                removeClass(el, 'hover'); // remove hover class
+            }
 
             return true;
         },
-        drop: function(e, opts) {
+        drop: function(event, opts) {
             const { draggableTarget, droppableTarget, node } = opts;
 
-            console.log('drop:', e, e.dataTransfer.getData('text'));
+            if (hasClass(event.target, 'infinite-tree-overlay')) {
+                removeClass(event.target, 'hover'); // remove hover class
+                const innerHTML = 'Dropped to an overlay element';
+                document.querySelector('#default [data-id="dropped-result"]').innerHTML = innerHTML;
+                return;
+            }
 
+            console.log('drop:', event, event.dataTransfer.getData('text'));
             const innerHTML = 'Dropped to <b>' + quoteattr(node.name) + '</b>';
             document.querySelector('#default [data-id="dropped-result"]').innerHTML = innerHTML;
         }
@@ -89,6 +100,20 @@ tree.on('selectNode', (node) => {
     console.log('selectNode', node);
     updatePreview(node);
 });
+tree.on('clusterDidChange', () => {
+    const overlayElement = document.createElement('div');
+    const top = tree.nodes.indexOf(tree.getNodeById('<root>.1'));
+    const bottom = tree.nodes.indexOf(tree.getNodeById('<root>.2'));
+
+    overlayElement.className = classNames(
+        'infinite-tree-overlay'
+    );
+    overlayElement.style.top = top * 22 + 'px';
+    overlayElement.style.height = (bottom - top) * 22 + 'px';
+    overlayElement.style.lineHeight = (bottom - top) * 22 + 'px';
+    overlayElement.appendChild(document.createTextNode('OVERLAY'));
+    tree.contentElement.appendChild(overlayElement);
+});
 
 tree.loadData(JSON.parse(JSON.stringify(data)));
 

diff --git a/examples/default/index.styl b/examples/default/index.styl
@@ -63,4 +63,17 @@
         overflow: auto;
         max-height: 400px;
     }
+
+    .infinite-tree-overlay {
+        position: absolute;
+        background-color: rgba(255, 0, 0, 0.5);
+        border: 1px solid red;
+        font-size: 20px;
+        font-weight: bold;
+        width: 100%;
+        text-align: center;
+    }
+    .infinite-tree-overlay.hover {
+        background-color: rgba(255, 0, 0, 0.6);
+    }
 }