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();
            e.stopPropagation();

            if (this.box === undefined) {
                this.renderBox();
            }

            let box = this.box;

            let hide = function () {
                box.hide(0, () => {
                    $('body').off('click', hide);
                });
            }.bind(this);

            if (box.is(':visible')) {
                hide();
            } else {
                $('body').on('click', hide);
                box.show(0);
            }
        }

        private renderBox() {
            if (!$('.region__selection-box').length) {
                this.box = $('<div class="region__selection-box region-selection__box"></div>');
                let itemTemplate = '<a href="{link}" class="region-selection__link">{icon} {name}</a>';
                let iconTemplate = '<img src="{icon}" class="region-selection__icon">';
                foreach(this.regions, (region: Region) => {
                    let item = $(itemTemplate
                        .replace('{link}', region.link)
                        .replace('{name}', region.caption)
                        .replace('{icon}', iconTemplate.replace('{icon}', region.icon))
                    );
                    this.box.append(item);
                });
                this.box.css('display', 'none');
                this.selector.parent().append(this.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);
    }

}