initial commit

build/demo/add.js

@@ -0,0 +1,126 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  var WIDTH = 700;
+  var HEIGHT = 600;
+  var MARGIN = 100;
+
+  var svg = d3.select('body').append('svg').attr('width', WIDTH + MARGIN).attr('height', HEIGHT + MARGIN).attr('viewBox', '-' + MARGIN / 2 + ' -' + MARGIN / 2 + ' ' + WIDTH + ' ' + HEIGHT);
+
+  svg.append('g').attr('class', 'lines');
+
+  var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
+
+  draw();
+
+  function draw() {
+    console.dir(data.root);
+    var nodes = tree.nodes(data.root);
+    var links = tree.links(nodes);
+
+    var linkElements = svg.select('g.lines').selectAll('line').data(links);
+    linkElements.exit().remove();
+    linkElements.enter().append('line');
+
+    linkElements.attr('x1', function (d) {
+      return d.source.x;
+    }).attr('y1', function (d) {
+      return d.source.y;
+    }).attr('x2', function (d) {
+      return d.target.x;
+    }).attr('y2', function (d) {
+      return d.target.y;
+    }).style('stroke', 'rgb(72, 213, 91)').style('stroke-width', '2px');
+
+    var nodeElements = svg.selectAll('g.node').data(nodes);
+    nodeElements.exit().remove();
+    var nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
+
+    nodeElements.attr('transform', function (d) {
+      return 'translate(' + d.x + ', ' + d.y + ')';
+    }).style('font-family', 'monospace').style('font-size', '11px').attr('data-word', function (d) {
+      return d.name;
+    });
+
+    nodesEnter.append('circle');
+
+    var circles = nodeElements.selectAll('circle');
+    circles.attr('r', 25).style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').attr('r', 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', 25);
+
+    nodesEnter.append('text');
+    var texts = svg.selectAll('g.node text').data(nodes);
+
+    texts.attr('dy', 5).html(function (d) {
+      return '<tspan>' + d.name.split('').join('</tspan><tspan>') + '</tspan>';
+    }).attr('text-anchor', 'middle').style('fill', 'white');
+  }
+
+  // Form and other stuff
+
+  var form = document.querySelector('form');
+  var input = document.querySelector('input');
+  var explain = document.querySelector('#explain');
+  var explainWord = document.querySelector('#explain-word');
+  var explainIndex = document.querySelector('#explain-index');
+
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    var word = input.value;
+
+    if (!explain.checked) {
+      data.add(word);
+      draw();
+
+      return;
+    }
+
+    var separated = '<span>' + word.split('').join('</span><span>') + '</span>';
+    explainWord.innerHTML = separated;
+    var indexLeft = explainWord.children[0].offsetLeft;
+    var indexMargin = 20;
+    var indexWidth = explainWord.children[0].offsetWidth + indexMargin;
+
+    var index = 0;
+    var key = '';
+
+    var intv = setInterval(function () {
+      d3.selectAll('tspan').attr('class', '');
+      d3.selectAll('#explain-word span').attr('class', '');
+      d3.selectAll('.node').attr('class', 'node');
+
+      var char = word[index];
+
+      if (!char) {
+        clearInterval(intv);
+
+        explainIndex.innerHTML = '';
+        explainWord.innerHTML = '';
+        return;
+      }
+
+      key += char;
+
+      var s = explainWord.children[index];
+      s.classList.add('highlight');
+
+      explainIndex.style.left = indexLeft + index * indexWidth + 'px';
+      explainIndex.innerHTML = index;
+
+      var node = document.querySelector('[data-word="' + key + '"]');
+      if (!node) {
+        data.add(word.slice(0, index + 1));
+        draw();
+
+        node = document.querySelector('[data-word="' + key + '"]');
+      }
+
+      node.classList.add('highlight');
+
+      var text = node.querySelector('text');
+      text.children[index].classList.add('highlight');
+
+      index++;
+    }, 1000);
+  });
+});

build/demo/data.js

@@ -0,0 +1,15 @@
+'use strict';
+
+window.data = new Trie();
+
+data.add('colors');
+data.add('coffee');
+// data.add('codecs');
+
+data.add('boo');
+// data.add('boloss');
+// data.add('badass');
+
+// data.add('rebecca');
+// data.add('robots');
+// data.add('rio');

build/index.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var trie = new Trie();
+
+var divs = document.querySelectorAll('div');
+var colors = {};
+
+var _iteratorNormalCompletion = true;
+var _didIteratorError = false;
+var _iteratorError = undefined;
+
+try {
+  for (var _iterator = divs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+    var div = _step.value;
+
+    colors[div.className] = div;
+
+    trie.add(div.className);
+  }
+} catch (err) {
+  _didIteratorError = true;
+  _iteratorError = err;
+} finally {
+  try {
+    if (!_iteratorNormalCompletion && _iterator['return']) {
+      _iterator['return']();
+    }
+  } finally {
+    if (_didIteratorError) {
+      throw _iteratorError;
+    }
+  }
+}
+
+var input = document.querySelector('input');
+
+input.addEventListener('keyup', function () {
+  divs.hide();
+
+  var nodes = trie.all(input.value);
+
+  if (!nodes) return;
+
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = nodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var node = _step2.value;
+
+      var color = colors[node.value];
+      if (!color) continue;
+
+      color.classList.remove('hidden');
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+        _iterator2['return']();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+});
+
+NodeList.prototype.hide = function () {
+  var _iteratorNormalCompletion3 = true;
+  var _didIteratorError3 = false;
+  var _iteratorError3 = undefined;
+
+  try {
+    for (var _iterator3 = this[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+      var node = _step3.value;
+
+      node.classList.add('hidden');
+    }
+  } catch (err) {
+    _didIteratorError3 = true;
+    _iteratorError3 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion3 && _iterator3['return']) {
+        _iterator3['return']();
+      }
+    } finally {
+      if (_didIteratorError3) {
+        throw _iteratorError3;
+      }
+    }
+  }
+};

build/trie.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var Node = function Node(value, parent) {
+  if (value === undefined) value = '';
+
+  _classCallCheck(this, Node);
+
+  this.name = value;
+  this.children = [];
+  this.parent = parent;
+};
+
+var Trie = (function () {
+  function Trie() {
+    _classCallCheck(this, Trie);
+
+    this.root = new Node();
+  }
+
+  _createClass(Trie, [{
+    key: 'add',
+    value: function add(value) {
+      var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
+
+      var _loop = function (i, len) {
+        if (!parent.children) parent.children = [];
+        var node = parent.children.find(function (child) {
+          return child.name[i] === value[i];
+        });
+
+        if (!node) {
+          node = new Node(value.slice(0, i + 1), parent.name);
+          parent.children.push(node);
+        }
+
+        parent = node;
+      };
+
+      for (var i = 0, len = value.length; i < len; i++) {
+        _loop(i, len);
+      }
+
+      return parent;
+    }
+  }, {
+    key: 'find',
+    value: function find(value) {
+      var parent = arguments.length <= 1 || arguments[1] === undefined ? this.root : arguments[1];
+
+      var _loop2 = function (i, len) {
+        parent = parent.children.find(function (child) {
+          return child.name[i] === value[i];
+        });
+
+        if (!parent) return {
+            v: null
+          };
+      };
+
+      for (var i = 0, len = value.length; i < len; i++) {
+        var _ret2 = _loop2(i, len);
+
+        if (typeof _ret2 === 'object') return _ret2.v;
+      }
+
+      return parent;
+    }
+  }, {
+    key: 'all',
+    value: function all(search) {
+      var node = this.find(search);
+
+      if (!node) return null;
+
+      var all = [node];
+
+      node.children.forEach(function addToAll(child) {
+        all.push(child);
+        child.children.forEach(addToAll);
+      });
+
+      return all;
+    }
+  }]);
+
+  return Trie;
+})();