region-selection box implemented

app/assets/scripts/region-selection.js

@@ -2,11 +2,70 @@
 var RegionSelection;
 (function (RegionSelection) {
     function foreach(data, callback) {
-        Array.prototype.forEach.call(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 = [];
+            this.regions = new RegionsCollection([]);
             this.selector = selector;
             if (this.selector.data('regions') !== undefined) {
                 this.fillRegions(this.selector.data('regions'));
@@ -43,14 +102,25 @@ var RegionSelection;
             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);
+                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);

app/assets/styles/header/region-selection-box.scss

@@ -3,7 +3,9 @@
         -webkit-box-shadow: 0 0 10px 0 #a8a8a8;
         box-shadow: 0 0 10px 0 #a8a8a8;
         box-sizing: border-box;
-        padding: 10px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
 
         &:before {
             position: absolute;
@@ -19,14 +21,30 @@
 
     }
     &__link {
-        font-size: 11px;
+        font-size: 13px;
         font-family: $fontopensans;
         color: #929292;
         text-decoration: none;
+        vertical-align: middle;
 
         &:hover {
             color: lighten(#929292, 10%);
             text-decoration: underline;
         }
     }
+
+    &__items-list {
+        box-sizing: border-box;
+        width: 150px;
+        margin: 5px 10px;
+    }
+
+    &__list-letter {
+        font-size: 16px;
+        font-family: $fontopensans;
+        color: #004d7b;
+        text-transform: uppercase;
+        line-height: 1.2;
+        min-height: 19px;
+    }
 }

app/assets/styles/header/region.scss

@@ -31,7 +31,7 @@
 
     &__selection-box {
         position: absolute;
-        width: 500px;
+        width: 600px;
         top: 40px;
         background: #ffffff;
         font-size: 14px;

app/assets/ts/region-selection.ts

@@ -3,12 +3,73 @@
 namespace RegionSelection {
 
     function foreach(data, callback: (value: any, key?: number | string, array?: Array<any>) => void) {
-        Array.prototype.forEach.call(data, callback);
+        for (let key in data) {
+            if (data.hasOwnProperty(key) && typeof data[key] !== 'function') {
+                callback(data[key], key, data);
+            }
+        }
+    }
+
+    class RegionsCollection {
+        [index: number]: Region;
+
+        public constructor(data: Region[]) {
+            let length = 0;
+            this.setLength = function (value: number) {
+                length = value;
+            };
+            this.getLength = function () {
+                return length;
+            };
+            foreach(data, (region: Region) => this.push(region));
+        }
+
+        get length() {
+            return this.getLength();
+        };
+
+        set length(value: number) {
+            this.setLength(value);
+        }
+
+        public setLength(value: number) {
+        };
+
+        public getLength(): number {
+            return 0;
+        };
+
+        public push(item: Region) {
+            Array.prototype.push.call(this, item);
+        }
+
+        public forEach(callback: (value: any, key?: number | string, array?: Array<any>) => void) {
+            Array.prototype.forEach.call(this, callback);
+        }
+
+        public group(groupFunction: (region: Region) => string): { [groupName: string]: RegionsCollection } {
+            let groups = {};
+            this.forEach((region: Region) => {
+                let groupName = groupFunction(region);
+                if (groups[groupName] === undefined) {
+                    groups[groupName] = new RegionsCollection([]);
+                }
+                groups[groupName].push(region);
+            });
+            return groups;
+        }
+
+        public sort(sortFunction: (region1: Region, region2: Region) => number): RegionsCollection {
+            let data = [];
+            this.forEach((region) => data.push(region));
+            data.sort(sortFunction);
+            return new RegionsCollection(data);
+        }
     }
 
     class RegionSelectionBox {
         private selector: JQuery;
-        private regions: Region[] = [];
+        private regions: RegionsCollection = new RegionsCollection([]);
         private box: JQuery;
 
         constructor(selector: JQuery) {
@@ -53,15 +114,27 @@ namespace RegionSelection {
         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);
+                let linkTemplate = '<a href="{link}" class="region-selection__link">{name}</a>';
+                // let iconTemplate = '<img src="{icon}" class="region-selection__icon">';
+
+                let grouped = this.regions.sort(function (region1: Region, region2: Region) {
+                    return region1.caption < region2.caption ? -1 : region1.caption > region2.caption ? 1 : 0;
+                }).group((region: Region) => {
+                    return region.caption.charAt(0).toUpperCase();
+                });
+
+                foreach(grouped, (regionCollection: RegionsCollection, groupName) => {
+                    let itemsList = $('<div class="region-selection__items-list"></div>');
+                    itemsList.append($(`<div class="region-selection__list-letter">${groupName}</div>`));
+                    foreach(regionCollection, (region: Region) => {
+                        let item = $('<div class="region-selection__item"></div>').append(linkTemplate
+                                .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);
@@ -108,6 +181,7 @@ namespace RegionSelection {
         get icon(): string {
             return this._icon;
         }
+
     }
 
     export function createSelectionBox($object: JQuery) {

app/www/css/all.css

@@ -850,7 +850,7 @@ body {
 
 .region__selection-box {
     position: absolute;
-    width: 500px;
+    width: 600px;
     top: 40px;
     background: #ffffff;
     font-size: 14px;
@@ -860,7 +860,9 @@ body {
     -webkit-box-shadow: 0 0 10px 0 #a8a8a8;
     box-shadow: 0 0 10px 0 #a8a8a8;
     box-sizing: border-box;
-    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .region-selection__box:before {
@@ -874,10 +876,11 @@ body {
 }
 
 .region-selection__link {
-    font-size: 11px;
+    font-size: 13px;
     font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
     color: #929292;
     text-decoration: none;
+    vertical-align: middle;
 }
 
 .region-selection__link:hover {
@@ -885,6 +888,21 @@ body {
     text-decoration: underline;
 }
 
+.region-selection__items-list {
+    box-sizing: border-box;
+    width: 150px;
+    margin: 5px 10px;
+}
+
+.region-selection__list-letter {
+    font-size: 16px;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    color: #004d7b;
+    text-transform: uppercase;
+    line-height: 1.2;
+    min-height: 19px;
+}
+
 .floatmenu {
   display: none;
   flex-direction: row;