Hideable.hx

class Hideable extends View {

    @:attribute var hidden:Bool;
    @:attribute var fast:Bool = false;
    @:attribute var getRender:ClassName->RenderResult;
    @:attribute var animationIn:ClassName = "fadeIn";
    @:attribute var animationOut:ClassName = "fadeOut";
    @:computed var baseClass:ClassName = if (fast) ['animated', 'faster'] else ['animated'];
    @:computed var classes:ClassName = baseClass.add(hidden ? animationOut : animationIn);
    @:computed var hiddenDelay:Delayer<Bool> = new Delayer({ delay: fast ? 650 : 1150, source: hidden });
    @:computed var shouldRender:Bool = !(hiddenDelay.value && hidden); // Need to access delayer first, so it gets initialized properly.

    function render() '<if {shouldRender}>{getRender(classes)}</if>';

    private static var animEndEvent:String = {
        var el = document.createElement('fakeelement');
        var animations = [
            ['animation', 'animationend'],
            ['OAnimation', 'oAnimationEnd'],
            ['MozAnimation', 'Animationend'],
            ['WebkitAnimation', 'webkitAnimationEnd'],
        ];
        var event:String = 'animationend';
        for (t in animations) {
            if (Syntax.strictNeq(Syntax.field(el.style, t[0]), js.Lib.undefined)) {
                event = t[1];
                break;
            }
        }
        event;
    }

}

class Delayer<T> implements coconut.data.Model {

    @:constant var delay:Int;
    @:external var source:T;
    @:loaded var intrim:T = tink.core.Future.delay(delay, this.source);

    @:computed var value:T = {
        switch [$last, intrim] {
            case [_, Done(v)]: v;
            case [None, _]: source; // Initial value.
            case [Some(v), _]: v;
        }
    }

}