2014-10-22 14:43:29 +00:00
|
|
|
|
angular.module('batarang.scope-tree', []).
|
|
|
|
|
|
2014-10-24 13:28:33 +00:00
|
|
|
|
directive('batScopeTree', ['$compile', batScopeTreeDirective]);
|
2014-10-22 14:43:29 +00:00
|
|
|
|
|
|
|
|
|
function batScopeTreeDirective($compile) {
|
|
|
|
|
return {
|
|
|
|
|
restrict: 'E',
|
|
|
|
|
terminal: true,
|
|
|
|
|
scope: {
|
|
|
|
|
batModel: '='
|
|
|
|
|
},
|
2014-12-22 03:15:08 +00:00
|
|
|
|
link: batScopeTreeLink
|
|
|
|
|
};
|
2014-10-22 14:43:29 +00:00
|
|
|
|
|
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-10-22 14:43:29 +00:00
|
|
|
|
});
|
2014-12-22 03:15:08 +00:00
|
|
|
|
}
|
2014-10-22 14:43:29 +00:00
|
|
|
|
|
2014-12-22 03:15:08 +00:00
|
|
|
|
scope.$on('scope:new', function (ev, data) {
|
|
|
|
|
renderScopeElement(data.child, data.parent);
|
|
|
|
|
});
|
2014-10-22 14:43:29 +00:00
|
|
|
|
|
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-10-22 14:43:29 +00:00
|
|
|
|
|
2014-12-22 03:15:08 +00:00
|
|
|
|
function renderScopeElement (id, parentId) {
|
|
|
|
|
if (map[id]) {
|
|
|
|
|
return;
|
2014-10-22 14:43:29 +00:00
|
|
|
|
}
|
2014-12-22 03:15:08 +00:00
|
|
|
|
var elt = map[id] = newBranchElement(id);
|
|
|
|
|
var parentElt = map[parentId] || element;
|
2014-10-22 14:43:29 +00:00
|
|
|
|
|
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-10-22 14:43:29 +00:00
|
|
|
|
|
2014-12-22 03:15:08 +00:00
|
|
|
|
selectedElt.children().eq(0).addClass('selected');
|
|
|
|
|
selectedElt.children().eq(1).addClass('selected');
|
|
|
|
|
});
|
2014-10-22 14:43:29 +00:00
|
|
|
|
});
|
|
|
|
|
|
2014-12-22 03:15:08 +00:00
|
|
|
|
parentElt.append(elt);
|
2014-10-22 14:43:29 +00:00
|
|
|
|
}
|
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];
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
2014-10-22 14:43:29 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2014-10-24 13:28:33 +00:00
|
|
|
|
// TODO: tabindex
|
|
|
|
|
function newBranchElement(descriptor) {
|
|
|
|
|
return angular.element([
|
|
|
|
|
'<ol class="children expanded">',
|
|
|
|
|
'<div class="selection"></div>',
|
|
|
|
|
'<span>',
|
|
|
|
|
'<span class="webkit-html-tag"><</span>',
|
|
|
|
|
'<span class="webkit-html-attribute">Scope #', descriptor, '</span>',
|
|
|
|
|
'<span class="webkit-html-tag">></span>',
|
|
|
|
|
'</span>',
|
|
|
|
|
'</ol>'].join(''));
|
2014-10-22 14:43:29 +00:00
|
|
|
|
}
|