region-selection-block

app/assets/scripts/region-selection.js

@@ -21,23 +21,40 @@ var RegionSelection;
         };
         RegionSelectionBox.prototype.showBox = function (e) {
             e.preventDefault();
+            e.stopPropagation();
             if (this.box === undefined) {
                 this.renderBox();
             }
-            this.box.toggle();
+            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 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;
+            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;
     }());

app/assets/styles/all.scss

@@ -26,6 +26,7 @@
 @import "header/header";
 @import "header/slogan";
 @import "header/region";
+@import "header/region-selection-box";
 @import "header/floatmenu";
 @import "header/special";
 //

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

@@ -0,0 +1,32 @@
+.region-selection {
+    &__box {
+        -webkit-box-shadow: 0 0 10px 0 #a8a8a8;
+        box-shadow: 0 0 10px 0 #a8a8a8;
+        box-sizing: border-box;
+        padding: 10px;
+
+        &:before {
+            position: absolute;
+            content: '';
+            top: -13px;
+            left: 50%;
+            background: url(../img/regions-block-arrow.png);
+            width: 19px;
+            height: 13px;
+        }
+    }
+    &__item {
+
+    }
+    &__link {
+        font-size: 11px;
+        font-family: $fontopensans;
+        color: #929292;
+        text-decoration: none;
+
+        &:hover {
+            color: lighten(#929292, 10%);
+            text-decoration: underline;
+        }
+    }
+}

app/assets/styles/header/region.scss

@@ -6,6 +6,7 @@
     justify-content: center;
     align-items: center;
     align-content: center;
+    position: relative;
 
     &__img {
         margin: 0 10px;
@@ -27,4 +28,12 @@
     &__name {
         @extend .region;
     }
+
+    &__selection-box {
+        position: absolute;
+        width: 500px;
+        top: 40px;
+        background: #ffffff;
+        font-size: 14px;
+    }
 }

app/assets/ts/region-selection.ts

@@ -28,26 +28,44 @@ namespace RegionSelection {
 
         private showBox(e: JQueryEventObject) {
             e.preventDefault();
+            e.stopPropagation();
+
             if (this.box === undefined) {
                 this.renderBox();
             }
 
-            this.box.toggle();
+            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() {
-            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;
+            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);
+            }
         }
     }
 

app/www/css/all.css

@@ -831,7 +831,9 @@ body {
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  align-content: center; }
+    align-content: center;
+    position: relative;
+}
   .region__img {
     margin: 0 10px;
     width: 33px;
@@ -846,6 +848,43 @@ body {
     .region__link:hover {
       text-decoration: none; }
 
+.region__selection-box {
+    position: absolute;
+    width: 500px;
+    top: 40px;
+    background: #ffffff;
+    font-size: 14px;
+}
+
+.region-selection__box {
+    -webkit-box-shadow: 0 0 10px 0 #a8a8a8;
+    box-shadow: 0 0 10px 0 #a8a8a8;
+    box-sizing: border-box;
+    padding: 10px;
+}
+
+.region-selection__box:before {
+    position: absolute;
+    content: '';
+    top: -13px;
+    left: 50%;
+    background: url(../img/regions-block-arrow.png);
+    width: 19px;
+    height: 13px;
+}
+
+.region-selection__link {
+    font-size: 11px;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    color: #929292;
+    text-decoration: none;
+}
+
+.region-selection__link:hover {
+    color: #acacac;
+    text-decoration: underline;
+}
+
 .floatmenu {
   display: none;
   flex-direction: row;