dynamicbible/DynamicBibleIonic/src/components/words/words.ts

/// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked, OnInit, ElementRef } from "@angular/core";
import { Reference } from '../../libs/Reference';
import { OpenData, CardItem } from "../../pages/search/search";
import { WordLookupResult, WordService } from '../../services/word-service';

@Component({
    selector: "words",
    templateUrl: "words.html",
    providers: [WordService]
})
export class Words implements AfterViewChecked, OnInit
{
    @Output()
    onClose = new EventEmitter<CardItem>();

    @Output()
    onItemClicked = new EventEmitter<OpenData>();

    @Input()
    cardItem: CardItem;

    $: any;

    data: WordLookupResult;

    constructor(private wordService: WordService, private elementRef: ElementRef)
    {
    }

    @HostListener('window:resize', ['$event'])
    onResize(evt)
    {
        $("words ion-scroll").each((i, el) =>
        {
            let wr = $(el).find(".scroll-content .scroll-zoom-wrapper")[0];
            let len = $(el).find(".scroll-zoom-wrapper a").length;

            if (wr.scrollWidth < 500) // 1 col
            {
                // 5 rows
                len < 6 ?  $(el).css("height", len * 44.4 + 25) : $(el).css("height", 250);
            }
            else if (wr.scrollWidth < 699) // 2 col
            {
                if (len < 13) // 6 rows
                    $(el).css("height", Math.ceil(len / 2) * 44.4 + 25);
                else
                    $(el).css("height", 300);
            }
            else if (wr.scrollWidth < 799) // 3 col
            {
                if (len < 22) // 7 rows
                    $(el).css("height", Math.ceil(len / 3) * 44.4 + 25);
                else
                    $(el).css("height", 350);
            }
            else if (wr.scrollWidth < 899) // 4 col
            {
                if (len < 29) // 7 rows
                    $(el).css("height", Math.ceil(len / 4) * 44.4 + 25);
                else
                    $(el).css("height", 350);
            }
            else if (wr.scrollWidth < 1199) // 5 col
            {
                if (len < 41) // 8 rows
                    $(el).css("height", Math.ceil(len / 5) * 44.4 + 25);
                else
                    $(el).css("height", 400);
            }
            else // 6 col
            {
                if (len < 49) // 8 rows
                    $(el).css("height", Math.ceil(len / 6) * 44.4 + 25);
                else
                    $(el).css("height", 400);
            }
        });
    }
    public ngAfterViewChecked(): void
    {
        this.onResize(null);
    }

    ngOnInit(): void
    {
        this.wordService.getResultAsPromise(this.cardItem.qry).then(data =>
            this.data = data
        );
    }

    close()
    {
        let d = 275;
        this.elementRef.nativeElement.parentElement.animate({
            transform: ['none', 'translate3d(110%, 0, 0)']
        }, {
                fill: 'forwards',
                duration: d,
                iterations: 1,
                easing: 'ease-in-out',
            });
        setTimeout(() =>
        {
            this.onClose.emit(this.cardItem);
        }, d);
    }

    makePassage(p: string)
    {
        return Reference.bookName(parseInt(p.split(":")[0])) + ' ' + p.split(":")[1] + ":" + p.split(":")[2];
    }

    openPassage(p: string)
    {
        let ref = this.makePassage(p);
        this.onItemClicked.emit({ card: this.cardItem, qry: ref, from_search_bar: false });
    }
}