Merge branch 'top-cities' of Adyn/medgis-ru-assets into master

app/assets/scripts/region-selection.js

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

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,50 @@
+.region-selection {
+    &__box {
+        -webkit-box-shadow: 0 0 10px 0 #a8a8a8;
+        box-shadow: 0 0 10px 0 #a8a8a8;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        &:before {
+            position: absolute;
+            content: '';
+            top: -13px;
+            left: 50%;
+            background: url(../img/regions-block-arrow.png);
+            width: 19px;
+            height: 13px;
+        }
+    }
+    &__item {
+
+    }
+    &__link {
+        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

@@ -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: 600px;
+        top: 40px;
+        background: #ffffff;
+        font-size: 14px;
+    }
 }

app/assets/ts/region-selection.ts

@@ -0,0 +1,191 @@
+/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>
+
+namespace RegionSelection {
+
+    function foreach(data, callback: (value: any, key?: number | string, array?: Array<any>) => void) {
+        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: RegionsCollection = new RegionsCollection([]);
+        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();
+            e.stopPropagation();
+
+            if (this.box === undefined) {
+                this.renderBox();
+            }
+
+            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() {
+            if (!$('.region__selection-box').length) {
+                this.box = $('<div class="region__selection-box region-selection__box"></div>');
+                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);
+            }
+        }
+    }
+
+    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())

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,61 @@ body {
     .region__link:hover {
       text-decoration: none; }
 
+.region__selection-box {
+    position: absolute;
+    width: 600px;
+    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;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.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: 13px;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    color: #929292;
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.region-selection__link:hover {
+    color: #acacac;
+    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;