return function(sandbox) {
- var template = _.template(templateSrc);
+ var template = _.template(templateSrc),
+ listens = false;
var view = {
dom: $('<div>' + template({node:null, parents: null}) + '</div>'),
setup: function() {
- var view = this;
this.dom.on('mouseenter', 'a', function(e) {
var target = $(e.target);
sandbox.publish('elementEntered', target.data('element'));
setNodeElement: function(nodeElement) {
this.dom.empty();
this.currentNodeElement = nodeElement;
- var parents = nodeElement.parents();
- this.dom.html(template({node: nodeElement, parents: parents, tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames}));
+ var parents;
+ if(nodeElement) {
+ parents = nodeElement.parents();
+ }
+
+ this.dom.html(template({node: nodeElement, parents: parents, utils: wlxmlUtils}));
this.dom.find('li > a[href="#"]').each(function(idx, a) {
$(a).data('element', parents[parents.length - 1 - idx]);
start: function() { sandbox.publish('ready'); },
getView: function() { return view.dom; },
setNodeElement: function(nodeElement) {
+ if(!listens && nodeElement) {
+ nodeElement.document.on('change', function() {
+ if(view.currentNodeElement && !view.currentNodeElement.isInDocument()) {
+ view.setNodeElement(null);
+ }
+ });
+ listens = true;
+ }
view.setNodeElement(nodeElement);
},
highlightNode: function(id) { view.highlightNode(id); },