ru-assets/app/assets/scripts/region-selection.js

/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>
var RegionSelection;
(function (RegionSelection) {
    function foreach(data, callback) {
        Array.prototype.forEach.call(data, callback);
    }
    var RegionSelectionBox = (function () {
        function RegionSelectionBox(selector) {
            this.regions = [];
            this.selector = selector;
            if (this.selector.data('regions') !== undefined) {
                this.fillRegions(this.selector.data('regions'));
            }
            this.selector.on('click', this.showBox.bind(this));
        }
        RegionSelectionBox.prototype.fillRegions = function (data) {
            var _this = this;
            foreach(eval(data), function (value) {
                _this.regions.push(new Region(value));
            });
        };
        RegionSelectionBox.prototype.showBox = function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (this.box === undefined) {
                this.renderBox();
            }
            var box = this.box;
            var hide = function () {
                box.hide(0, function () {
                    $('body').off('click', hide);
                });
            }.bind(this);
            if (box.is(':visible')) {
                hide();
            }
            else {
                $('body').on('click', hide);
                box.show(0);
            }
        };
        RegionSelectionBox.prototype.renderBox = function () {
            var _this = this;
            if (!$('.region__selection-box').length) {
                this.box = $('<div class="region__selection-box region-selection__box"></div>');
                var itemTemplate_1 = '<a href="{link}" class="region-selection__link">{icon} {name}</a>';
                var iconTemplate_1 = '<img src="{icon}" class="region-selection__icon">';
                foreach(this.regions, function (region) {
                    var item = $(itemTemplate_1
                        .replace('{link}', region.link)
                        .replace('{name}', region.caption)
                        .replace('{icon}', iconTemplate_1.replace('{icon}', region.icon)));
                    _this.box.append(item);
                });
                this.box.css('display', 'none');
                this.selector.parent().append(this.box);
            }
        };
        return RegionSelectionBox;
    }());
    var Region = (function () {
        function Region(data) {
            this._id = data.id;
            this._caption = data.caption;
            this._link = data.link;
            this._icon = data.icon;
        }
        Object.defineProperty(Region.prototype, "id", {
            get: function () {
                return this._id;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Region.prototype, "caption", {
            get: function () {
                return this._caption;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Region.prototype, "link", {
            get: function () {
                return this._link;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Region.prototype, "icon", {
            get: function () {
                return this._icon;
            },
            enumerable: true,
            configurable: true
        });
        return Region;
    }());
    function createSelectionBox($object) {
        return new RegionSelectionBox($object);
    }
    RegionSelection.createSelectionBox = createSelectionBox;
})(RegionSelection || (RegionSelection = {}));