<commit_before>module plat.ui.controls {
    export class If extends TemplateControl {
        $Animator: IAnimator = acquire(__Animator);

        /**
         * The evaluated plat-options object.
         */
        options: observable.IObservableProperty<IIfOptions>;

        /**
         * The Comment used to hold the place of the plat-if element.
         */
        commentNode: Comment;

        /**
         * The DocumentFragment that stores the plat-if element when hidden.
         */
        fragmentStore: DocumentFragment;

        private __condition: boolean = true;
        private __removeListener: IRemoveListener;
        private __leaveAnimation: IAnimationThenable<void>;
        private __enterAnimation: IAnimationThenable<void>;

        constructor() {
            super();
            var $document: Document = acquire(__Document);
            this.commentNode = $document.createComment('plat-if' + __BOUND_PREFIX + 'placeholder');
            this.fragmentStore = $document.createDocumentFragment();
        }

        /**
         * Checks the options and initializes the 
         * evaluation.
         */
        contextChanged(): void {
            var options = this.options.value;

            if (isEmpty(options)) {
                return;
            }

            this._setter(options);
        }

        /**
         * Sets the visibility to true if no options are 
         * defined, kicks off the evaluation, and observes 
         * the options for changes.
         */
        loaded(): void {
            if (isNull(this.options)) {
                var $exception: IExceptionStatic = acquire(__ExceptionStatic);
                $exception.warn('No condition specified in plat-options for plat-if.', $exception.BIND);

                this.options = {
                    value: {
                        condition: true
                    },
                    observe: <any>noop
                };
            }

            this.contextChanged();
            this.__removeListener = this.options.observe(this._setter);
        }

        /**
         * Stops listening to the options for changes.
         */
        dispose(): void {
            if (isFunction(this.__removeListener)) {
                this.__removeListener();
                this.__removeListener = null;
            }

            this.commentNode = null;
            this.fragmentStore = null;
        }

        /**
         * Checks the condition and decides 
         * whether or not to add or remove 
         * the node from the DOM.
         */
        _setter(options: IIfOptions): void {
            var value = !!options.condition;

            if (value === this.__condition) {
                return;
            }

            if (value) {
                if (!isNull(this.__leaveAnimation)) {
                    this.__leaveAnimation.cancel().then(() => {
                        this.__leaveAnimation = null;
                        this._addItem();
                    });
                } else {
                    this._addItem();
                }
            } else {
                if (!isNull(this.__enterAnimation)) {
                    this.__enterAnimation.cancel().then(() => {
                        this.__enterAnimation = null;
                        this._removeItem();
                    });
                } else {
                    this._removeItem();
                }
            }

            this.__condition = value;
        }

        /**
         * The callback used to add the fragment to the DOM 
         * after the bindableTemplate has been created.
         */
        _addItem(): void {
            var commentNode = this.commentNode,
                parentNode = commentNode.parentNode;

            if (!isNode(parentNode)) {
                return;
            }

            parentNode.replaceChild(this.fragmentStore, commentNode);
            this.__enterAnimation = this.$Animator.animate(this.element, __Enter).then(() => {
                this.__enterAnimation = null;
            });
        }

        /**
         * Removes the node from the DOM.
         */
        _removeItem(): void {
            var element = this.element;
            this.__leaveAnimation = this.$Animator.animate(element, __Leave).then(() => {
                this.__leaveAnimation = null;
                element.parentNode.insertBefore(this.commentNode, element);
                insertBefore(this.fragmentStore, element);
            });<commit_msg>Fixed plat-if to eliminate initial flicker during loaded<commit_after>module plat.ui.controls {
    export class If extends TemplateControl {
        $Animator: IAnimator = acquire(__Animator);

        /**
         * The evaluated plat-options object.
         */
        options: observable.IObservableProperty<IIfOptions>;

        /**
         * The Comment used to hold the place of the plat-if element.
         */
        commentNode: Comment;

        /**
         * The DocumentFragment that stores the plat-if element when hidden.
         */
        fragmentStore: DocumentFragment;

        private __condition: boolean = true;
        private __removeListener: IRemoveListener;
        private __leaveAnimation: IAnimationThenable<void>;
        private __enterAnimation: IAnimationThenable<void>;
        private __firstTime: boolean = true;

        constructor() {
            super();
            var $document: Document = acquire(__Document);
            this.commentNode = $document.createComment('plat-if' + __BOUND_PREFIX + 'placeholder');
            this.fragmentStore = $document.createDocumentFragment();
        }

        /**
         * Checks the options and initializes the 
         * evaluation.
         */
        contextChanged(): void {
            var options = this.options.value;

            if (isEmpty(options)) {
                return;
            }

            this._setter(options);
        }

        /**
         * Sets the visibility to true if no options are 
         * defined, kicks off the evaluation, and observes 
         * the options for changes.
         */
        loaded(): void {
            if (isNull(this.options)) {
                var $exception: IExceptionStatic = acquire(__ExceptionStatic);
                $exception.warn('No condition specified in plat-options for plat-if.', $exception.BIND);

                this.options = {
                    value: {
                        condition: true
                    },
                    observe: <any>noop
                };
            }

            this.contextChanged();
            this.__firstTime = false;
            this.__removeListener = this.options.observe(this._setter);
        }

        /**
         * Stops listening to the options for changes.
         */
        dispose(): void {
            if (isFunction(this.__removeListener)) {
                this.__removeListener();
                this.__removeListener = null;
            }

            this.commentNode = null;
            this.fragmentStore = null;
        }

        /**
         * Checks the condition and decides 
         * whether or not to add or remove 
         * the node from the DOM.
         */
        _setter(options: IIfOptions): void {
            var value = !!options.condition;

            if (value === this.__condition) {
                return;
            }

            if (value) {
                if (!isNull(this.__leaveAnimation)) {
                    this.__leaveAnimation.cancel().then(() => {
                        this.__leaveAnimation = null;
                        this._addItem();
                    });
                } else {
                    this._addItem();
                }
            } else {
                if (!isNull(this.__enterAnimation)) {
                    this.__enterAnimation.cancel().then(() => {
                        this.__enterAnimation = null;
                        this._removeItem();
                    });
                } else {
                    this._removeItem();
                }
            }

            this.__condition = value;
        }

        /**
         * The callback used to add the fragment to the DOM 
         * after the bindableTemplate has been created.
         */
        _addItem(): void {
            var commentNode = this.commentNode,
                parentNode = commentNode.parentNode;

            if (!isNode(parentNode)) {
                return;
            }

            parentNode.replaceChild(this.fragmentStore, commentNode);
            this.__enterAnimation = this.$Animator.animate(this.element, __Enter).then(() => {
                this.__enterAnimation = null;
            });
        }

        /**
         * Removes the node from the DOM.
         */
        _removeItem(): void {
            var element = this.element;

            if (this.__firstTime) {
                element.parentNode.insertBefore(this.commentNode, element);
                insertBefore(this.fragmentStore, element);
                return;
            }

            this.__leaveAnimation = this.$Animator.animate(element, __Leave).then(() => {
                this.__leaveAnimation = null;
                element.parentNode.insertBefore(this.commentNode, element);
                insertBefore(this.fragmentStore, element);
            });
{'fraction_non_alphanumeric': 0.09429941395844432, 'fraction_numerical': 0.0, 'mean_word_length': 1.340648379052369, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6874953', 'n_tokens_mistral': 2219, 'n_tokens_neox': 2090, 'n_words': 510}