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) {
        for (var key in data) {
            if (data.hasOwnProperty(key) && typeof data[key] !== 'function') {
                callback(data[key], key, data);
            }
        }
    }
    var RegionsCollection = (function () {
        function RegionsCollection(data) {
            var _this = this;
            var length = 0;
            this.setLength = function (value) {
                length = value;
            };
            this.getLength = function () {
                return length;
            };
            foreach(data, function (region) { return _this.push(region); });
        }
        Object.defineProperty(RegionsCollection.prototype, "length", {
            get: function () {
                return this.getLength();
            },
            set: function (value) {
                this.setLength(value);
            },
            enumerable: true,
            configurable: true
        });
        ;
        RegionsCollection.prototype.setLength = function (value) {
        };
        ;
        RegionsCollection.prototype.getLength = function () {
            return 0;
        };
        ;
        RegionsCollection.prototype.push = function (item) {
            Array.prototype.push.call(this, item);
        };
        RegionsCollection.prototype.forEach = function (callback) {
            Array.prototype.forEach.call(this, callback);
        };
        RegionsCollection.prototype.group = function (groupFunction) {
            var groups = {};
            this.forEach(function (region) {
                var groupName = groupFunction(region);
                if (groups[groupName] === undefined) {
                    groups[groupName] = new RegionsCollection([]);
                }
                groups[groupName].push(region);
            });
            return groups;
        };
        RegionsCollection.prototype.sort = function (sortFunction) {
            var data = [];
            this.forEach(function (region) { return data.push(region); });
            data.sort(sortFunction);
            return new RegionsCollection(data);
        };
        return RegionsCollection;
    }());
    var RegionSelectionBox = (function () {
        function RegionSelectionBox(selector) {
            this.regions = new RegionsCollection([]);
            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 linkTemplate_1 = '<a href="{link}" class="region-selection__link">{name}</a>';
                // let iconTemplate = '<img src="{icon}" class="region-selection__icon">';
                var grouped = this.regions.sort(function (region1, region2) {
                    return region1.caption < region2.caption ? -1 : region1.caption > region2.caption ? 1 : 0;
                }).group(function (region) {
                    return region.caption.charAt(0).toUpperCase();
                });
                foreach(grouped, function (regionCollection, groupName) {
                    var itemsList = $('<div class="region-selection__items-list"></div>');
                    itemsList.append($("<div class=\"region-selection__list-letter\">" + groupName + "</div>"));
                    foreach(regionCollection, function (region) {
                        var item = $('<div class="region-selection__item"></div>').append(linkTemplate_1
                            .replace('{link}', region.link)
                            .replace('{name}', region.caption)
                        // .replace('{icon}', iconTemplate.replace('{icon}', region.icon))
                        );
                        itemsList.append($(item));
                    });
                    _this.box.append(itemsList);
                });
                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 = {}));