fix aliases

app/assets/scripts/region-selection.js

@@ -0,0 +1,85 @@
+/// <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();
+            if (this.box === undefined) {
+                this.renderBox();
+            }
+            this.box.toggle();
+        };
+        RegionSelectionBox.prototype.renderBox = function () {
+            var box = $('<div class="region__selection-box"></div>');
+            var itemTemplate = '<a href="{link}" class="region__selection-item">{name}</a>';
+            foreach(this.regions, function (region) {
+                var 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;
+        };
+        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 = {}));

app/assets/ts/region-selection.ts

@@ -0,0 +1,99 @@
+/// <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);
+    }
+
+}

app/gulpfile.js

@@ -82,6 +82,7 @@ gulp.task('scripts', function () {
         'assets/scripts/regionfilter.js',
         'assets/scripts/specfilter.js',
         'assets/scripts/comments.js',
+        'assets/scripts/region-selection.js',
         'assets/scripts/main.js'
     ])
         .pipe(plumber())