This repository has been archived on 2020-10-11. You can view files and clone it, but cannot push or open issues or pull requests.
angularjs-batarang/panel/components/scope-tree/scope-tree.js

98 lines
2.5 KiB
JavaScript
Raw Normal View History

angular.module('batarang.scope-tree', []).
directive('batScopeTree', ['$compile', batScopeTreeDirective]);
function batScopeTreeDirective($compile) {
return {
restrict: 'E',
terminal: true,
scope: {
batModel: '='
},
2014-12-22 03:15:08 +00:00
link: batScopeTreeLink
};
2014-12-22 03:15:08 +00:00
function batScopeTreeLink(scope, element, attrs) {
// scope.$id > DOM node
var map = {};
var selectedElt = angular.element();
// init
var scopes = scope.batModel;
if (scopes) {
Object.keys(scopes).forEach(function (scopeId) {
var parentId = scopes[scopeId].parent;
renderScopeElement(scopeId, parentId);
renderScopeDescriptorElement(scopeId, scopes[scopeId].descriptor);
});
2014-12-22 03:15:08 +00:00
}
2014-12-22 03:15:08 +00:00
scope.$on('scope:new', function (ev, data) {
renderScopeElement(data.child, data.parent);
});
2014-12-22 03:15:08 +00:00
// when a scope is linked, we can apply the descriptor info
scope.$on('scope:link', function (ev, data) {
renderScopeDescriptorElement(data.id, data.descriptor);
});
2014-12-22 03:15:08 +00:00
function renderScopeElement (id, parentId) {
if (map[id]) {
return;
}
2014-12-22 03:15:08 +00:00
var elt = map[id] = newBranchElement(id);
var parentElt = map[parentId] || element;
2014-12-22 03:15:08 +00:00
elt.children().eq(1).on('click', function () {
scope.$apply(function () {
scope.$emit('inspected-scope:change', {
id: id
});
selectedElt.children().eq(0).removeClass('selected');
selectedElt.children().eq(1).removeClass('selected');
selectedElt = elt;
2014-12-22 03:15:08 +00:00
selectedElt.children().eq(0).addClass('selected');
selectedElt.children().eq(1).addClass('selected');
});
});
2014-12-22 03:15:08 +00:00
parentElt.append(elt);
}
2014-12-22 03:15:08 +00:00
function renderScopeDescriptorElement (id, descriptor) {
var elt = map[id];
if (!elt) {
return;
}
elt.children().eq(1).children().eq(1).html(descriptor);
}
// TODO: also destroy elements corresponding to descendant scopes
scope.$on('scope:destroy', function (ev, data) {
var id = data.id;
var elt = map[id];
if (elt) {
elt.remove();
}
delete map[id];
});
}
}
// TODO: tabindex
function newBranchElement(descriptor) {
return angular.element([
'<ol class="children expanded">',
'<div class="selection"></div>',
'<span>',
'<span class="webkit-html-tag">&lt;</span>',
'<span class="webkit-html-attribute">Scope #', descriptor, '</span>',
'<span class="webkit-html-tag">&gt;</span>',
'</span>',
'</ol>'].join(''));
}