ru-assets/app/assets/ts/regionfilter.ts

/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>

namespace RegionFilter {
    export class RegionFilter {
        private $selector: JQuery;
        private selected: {} = {};
        private strings = ['район', 'района', 'районов'];
        private typeName = 'районы';
        private config: FilterConfigInterface;

        public constructor($selector: JQuery, config: FilterConfigInterface) {
            this.$selector = $selector;

            let strings = $selector.data('strings');
            let typeName = $selector.data('type-name');
            if (strings !== undefined) {
                this.strings = eval(strings);
            }
            if (typeName !== undefined) {
                this.typeName = typeName;
            }
            this.config = config;
            this.$selector.click(this.onSelectorClick.bind(this));
            this.loadSelected();
        }

        private onSelectorClick(event) {
            event.preventDefault();
            let context = this;
            let itemsContainer = this.$selector.parent().find('.' + this.config.itemsContainerClass);
            if (itemsContainer.length) {
                itemsContainer.fadeOut(200, function () {
                    $(this).remove();
                });
            } else {
                this.$selector.parent().append(this.createContainer());
            }
        }

        private createContainer(): JQuery {
            let itemsContainer = $(`<div class="${this.config.itemsContainerClass}"></div>`);
            let context = this;
            let field = $(this.$selector.data('field'));
            field.find('option').each(function () {
                let id = $(this).attr('value');
                itemsContainer.append(
                    // create container
                    $(`<div class="${context.config.itemContainerClass}"></div>`)
                    // create item
                        .append($(`<input type="checkbox" class="${context.config.itemCheckboxClass}" id="rfchb${id}" value="${id}">`)
                        // select items
                            .attr('checked', $(this).prop('selected'))
                            // bind change event
                            .on('change', function () {
                                field.find(`option[value=${id}]`).prop('selected', $(this).prop('checked'));
                                context.setCount(field.find('option:selected').length);
                            }))
                        // create label
                        .append($(`<label class="${context.config.itemLabelClass}" for="rfchb${id}">${$(this).html()}</label>`)));
            });

            return itemsContainer;
        }

        private loadSelected() {

        }

        private static declOfNum(number, titles) {
            let cases = [2, 0, 1, 1, 1, 2];
            return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
        }

        public checkChecked(id) {
            return this.selected.hasOwnProperty(id);
        }

        public setCount(count: number = 0) {
            this.$selector.html('Все ' + this.typeName);
            if (count > 0) {
                this.$selector.html(count + ' ' + RegionFilter.declOfNum(count, this.strings));
            }
        }
    }

    interface FilterConfigInterface {
        itemsContainerClass: string;
        itemCheckboxClass: string;
        itemContainerClass: string;
        itemLabelClass: string;
    }
}