Clean up beforeremove

[mickmcgrath13]

1) beforedetached & beforeremoved

We might have a situation like this in which case if prop becomes falsey, the beforeremove event will not be fired (it will only be fired on the helper's root element).

{{#if prop}}
<div>
  <form ($beforeremove)="*animations.fadeOut" />
</div>
{{/if}}

Instead, we will provide two events - one that 'bubbles' down to all children, and one that only happens on the actual element.

beforeremoved (past tense) - called only when specific element is targeted for removal. beforedetached (past tense) - called when element or any parent element is targeted for removal. (Similar to this)

2) Counter - not going to do anything unless the event counter is up

• put counter in domData
• makeMutationEvent in can-util does this

  
  domEvents.addEventListener = function(type){
  if(type === "??"){
    counter++;
  }
  }
  domEvents.removeEventListener = function(type){
  if(type === "??"){
    counter--;
  }
  }

var oldRemoveChild = domMutate.removeChild; domMutate.removeChild = function(child){ if(counter === 0 ) { oldRemoveChild.call(self, child); } else { var self = this;

domDispatchAsync.call(child,{
  type: "beforeremove"
}, [], false).then(function(){
  oldRemoveChild.call(self, child);
});

}

};

## 3) Document this
## 4) deprecate `beforeremove` [in can-component](https://github.com/canjs/can-component/blob/master/can-component.js#L239) (later)

[mickmcgrath13]

@justinbmeyer What should happen if someone puts both events on an element?

        {{#if showDemo}}
        <div class="demo"
                 ($beforeremoved)="*animations.customFadeOut2"
                 ($beforedetached)="*animations.customFadeOut3">
        </div>
        {{/if}}

[mickmcgrath13]

I've got a branch started with a demo

[mickmcgrath13]

https://github.com/canjs/can-stache-animate/issues/44#issuecomment-341722498