ru-assets/app/assets/ts/specfilter.ts

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

namespace SpecFilter {

    export class SpecFilter {

        private $selector: JQuery;
        private selected: {} = {};
        private content;
        private endpointUrl;
        private strings = ['специализация', 'специализации', 'специализаций'];
        private typeName = 'специализации';

        public constructor($selector: JQuery) {
            this.$selector = $selector;
            this.endpointUrl = $selector.data('enpoint-url');
            let strings = $selector.data('strings');
            let typeName = $selector.data('type-name');
            if (strings !== undefined) {
                this.strings = eval(strings);
            }
            if (typeName !== undefined) {
                this.typeName = typeName;
            }

            $.ajax({
                url: this.endpointUrl
            }).done((function (data) {
                this.content = data;
            }).bind(this));
            this.$selector.click(this.onSelectorClick.bind(this));
            this.loadSelected();
        }

        private onSelectorClick(event) {
            event.preventDefault();
            let context = this;
            let options = <FancyboxOptions> {
                content: this.content,
                type: 'html',
                height: 799,
                width: $('.centerbar').outerWidth(),
                padding: 0,
                autoSize: false,
                afterClose: function () {

                },
                afterShow: function () {
                    context.bindEvents();
                    context.loadSelected();
                }
            };
            $.fancybox(options);
        }

        private loadSelected() {
            let $fancy = $('.specializations__listBlock--check').parent();
            let count = 0;
            $(this.$selector.data('field')).find(':selected').each(function () {
                count++;
                $fancy.find('input[value=' + $(this).val() + ']').prop('checked', 'checked');
            });
            this.setCount(count);
        }

        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]];
        }

        private bindEvents() {
            let context = this;
            let $fancy = $('.specializations__listBlock--check').parent();
            $fancy.find('.btn-primary').click(function () {
                $(context.$selector.data('field')).find('option').removeAttr('selected');
                let count = 0;
                let all = $fancy.find('input[value=all]').is(':checked');
                $fancy.find('.fancycheckbox__checkbox:checked').each(function () {
                    if (all) return null;
                    console.dir($(context.$selector.data('field'))
                        .find('[value=' + $(this).attr('value') + ']'));
                    $(context.$selector.data('field'))
                        .find('[value=' + $(this).attr('value') + ']')
                        .prop('selected', 'selected');
                    if ($(this).attr('value') !== 'all')
                        count++;
                });
                context.setCount(count);
                $(context.$selector.data('field')).trigger('change');

                $.fancybox.close();
            });
            $fancy.find('.fancycheckbox__selectGroup').click(function () {
                let checked = $(this).prop('checked');
                $(this).parents('.specializations__listLetter').next().find('.fancycheckbox__checkbox').each(function () {
                    $(this).prop('checked', checked);
                });
            });
            $fancy.find('.fancycheckbox__checkbox').click(function () {
                if ($(this).parents('ul').find('.fancycheckbox__checkbox').length == $(this).parents('ul').find('.fancycheckbox__checkbox:checked').length) {
                    $(this).parents('.specializations__listRow').find('.fancycheckbox__selectGroup').prop('checked', true);
                }
                if (!$(this).is(':checked')) {
                    $(this).parents('.specializations__listRow').find('.fancycheckbox__selectGroup').prop('checked', false);
                }
            });
            $fancy.find('.specializations__listRegionMore').click(function () {
                let $link = $(this);
                let $list = $link.prev();
                $list.animate({'max-height': $list[0].scrollHeight}, 200, function () {
                    $link.remove();
                });
            });
        }

        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 + ' ' + SpecFilter.declOfNum(count, this.strings));
            }
        }

    }

}