feat(app): link component DOM tree with directives founded

Author: vogloblinsky

src/resources/js/tree.js

@@ -60,6 +60,20 @@ document.addEventListener('DOMContentLoaded', function() {
  newNode.name = COMPONENTS[i].name;
  }
  }
+ for(var i = 0; i < DIRECTIVES.length; i++) {
+ if (value.attributes) {
+ for(attr in value.attributes) {
+ if (DIRECTIVES[i].selector.indexOf(attr) !== -1) {
+ newNode.font = {
+ multi: 'html'
+ };
+ newNode.label = '<b>' + newNode.label + '</b>';
+ newNode.color = '#FF9800';
+ newNode.name = DIRECTIVES[i].name;
+ }
+ }
+ }
+ }
  newNodes.push(newNode);
  newEdges.push({
  from: parentNode._parent._id,

src/resources/styles/compodoc.css

@@ -686,3 +686,6 @@ path.link {
 .tree-legend .component {
  background: #fb7e81;
 }
+.tree-legend .directive {
+ background: #FF9800;
+}

src/templates/partials/component.hbs

@@ -64,6 +64,9 @@
  <div>
  <div class="color component"></div><span>Component</span>
  </div>
+ <div>
+ <div class="color directive"></div><span>Html element with directive</span>
+ </div>
  </div>
  </div>
 </div>
@@ -78,6 +81,7 @@
  var COMPONENT_TEMPLATE = '<div>{{{escapeSimpleQuote component.templateData }}}</div>'
  {{/if}}
  var COMPONENTS = [{{#each components}}{'name': '{{name}}', 'selector': '{{selector}}'}{{#unless @last}},{{/unless}}{{/each}}];
+ var DIRECTIVES = [{{#each directives}}{'name': '{{name}}', 'selector': '{{selector}}'}{{#unless @last}},{{/unless}}{{/each}}];
  var ACTUAL_COMPONENT = {'name': '{{ name }}'};
 </script>
 <script src="{{relativeURL depth pageType 'root'}}js/tree.js"></script>