ru-assets/app/assets/ts/region-selection.ts

/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>

namespace RegionSelection {

    function foreach(data, callback: (value: any, key?: number | string, array?: Array<any>) => void) {
        Array.prototype.forEach.call(data, callback);
    }

    class RegionSelectionBox {
        private selector: JQuery;
        private regions: Region[] = [];
        private box: JQuery;

        constructor(selector: JQuery) {
            this.selector = selector;
            if (this.selector.data('regions') !== undefined) {
                this.fillRegions(this.selector.data('regions'));
            }

            this.selector.on('click', this.showBox.bind(this));
        }

        private fillRegions(data) {
            foreach(eval(data), (value: RegionInterface) => {
                this.regions.push(new Region(value));
            });
        }

        private showBox(e: JQueryEventObject) {
            e.preventDefault();
            if (this.box === undefined) {
                this.renderBox();
            }

            this.box.toggle();
        }

        private renderBox() {
            let box = $('<div class="region__selection-box"></div>');
            let itemTemplate = '<a href="{link}" class="region__selection-item">{name}</a>';
            foreach(this.regions, (region: Region) => {
                let item = $(itemTemplate
                    .replace('{link}', region.link)
                    .replace('{name}', region.caption)
                );
                box.append(item);
            });
            box.css('display', 'none');
            this.selector.parent().append(box);
            this.box = box;
        }
    }

    interface RegionInterface {
        id: number;
        caption: string;
        link: string;
        icon: string;
    }

    class Region {

        constructor(data: RegionInterface) {
            this._id = data.id;
            this._caption = data.caption;
            this._link = data.link;
            this._icon = data.icon;
        }

        private _id: number;

        get id() {
            return this._id;
        }

        private _caption: string;

        get caption() {
            return this._caption;
        }

        private _link: string;

        get link(): string {
            return this._link;
        }

        private _icon: string;

        get icon(): string {
            return this._icon;
        }
    }

    export function createSelectionBox($object: JQuery) {
        return new RegionSelectionBox($object);
    }

}