ru-assets/app/assets/scripts/fancycheckboxes.js

/// <reference path="../../node_modules/@types/jquery/index.d.ts"/>
/// <reference path="../../node_modules/@types/fancybox/index.d.ts"/>
var FancyCheckboxes;
(function (FancyCheckboxes) {
    var FancyCheckbox = (function () {
        function FancyCheckbox($selector) {
            this.events = {
                'error': [],
                'success': []
            };
            this.selected = {};
            this.$selector = $selector;
            this.checkboxData = [];
            this.populateCheckboxData(JSON.parse($selector.data('items') ? $selector.data('items').replace(/'/g, '"') : "[]"));
            this.$selector.click(this.onSelectorClick.bind(this));
            this.$selector.prev().append('<div class="selected-items"></div>');
            this.loadSelected();
        }
        FancyCheckbox.prototype.loadSelected = function () {
            var context = this;
            var first = true;
            var $selected = context.$selector.prev().find('.selected-items');
            this.selected = {};
            $selected.html('');
            console.dir($(this.$selector.data('field')).find(':selected'));
            $(this.$selector.data('field')).find(':selected').each(function () {
                context.selected[$(this).attr('value')] = $(this).html();
                if (!first) {
                    $selected.append(', ');
                }
                if (first) {
                    first = false;
                }
                $selected.append('<span>' + $(this).html() + '</span>');
            });
            console.dir(this.selected);
        };
        FancyCheckbox.prototype.onSelectorClick = function (event) {
            var context = this;
            var content = $('<div></div>');
            content.append('<div class="modal-header"><h3>' + this.$selector.html() + '</h3></div>');
            content.append('<div class="fancycheckboxes-items-container container">' + this.render().html() + '</div>');
            content.append('<div class="modal-footer"></div>');
            content.find('.modal-footer').append('<button type="submit" class="btn btn-primary">Выбрать</button>');
            var options = {
                content: '<div class="fancycheckboxes">' + content.html() + '</div>',
                type: 'html',
                modal: true,
                height: window.innerHeight,
                width: $('.mainBlock').outerWidth(),
                autoSize: false,
                afterClose: function () {
                    context.loadSelected();
                },
                afterShow: function () {
                    context.bindEvents();
                }
            };
            $.fancybox(options);
        };
        FancyCheckbox.prototype.bindEvents = function () {
            var context = this;
            var $fancy = $('.fancycheckboxes');
            $fancy.find('.more').each(function () {
                var $link = $(this);
                $link.on('click', function () {
                    $link.parent().animate({ height: $link.parent()[0].scrollHeight }, 200, function () {
                        $link.parent().height('auto');
                        $link.remove();
                    });
                });
            });
            $fancy.find('.btn-primary').click(function () {
                $(context.$selector.data('field')).find('option').removeAttr('selected');
                $fancy.find('input:checked').each(function () {
                    console.dir($(context.$selector.data('field'))
                        .find('[value=' + $(this).attr('value') + ']'));
                    $(context.$selector.data('field'))
                        .find('[value=' + $(this).attr('value') + ']')
                        .prop('selected', 'selected');
                });
                $.fancybox.close();
            });
        };
        FancyCheckbox.prototype.checkChecked = function (id) {
            return this.selected.hasOwnProperty(id);
        };
        FancyCheckbox.prototype.on = function (eventName, callback) {
            this.events[eventName].push(callback);
            return this;
        };
        FancyCheckbox.prototype.trigger = function (eventName) {
            var args = [];
            for (var _i = 1; _i < arguments.length; _i++) {
                args[_i - 1] = arguments[_i];
            }
            var context = this;
            for (var i in this.events[eventName]) {
                if (this.events[eventName].hasOwnProperty(i)) {
                    setTimeout(this.events[eventName][i].apply(context, args), 1);
                }
            }
        };
        FancyCheckbox.prototype.populateCheckboxData = function (checkboxData) {
            checkboxData.sort(function (item1, item2) {
                return item1.value.localeCompare(item2.value);
            });
            for (var i in checkboxData) {
                if (checkboxData.hasOwnProperty(i)) {
                    if (checkboxData[i].items.length) {
                        var group = new CheckboxGroup(checkboxData[i], this);
                        this.checkboxData.push(group);
                    }
                    else {
                        var item = new CheckboxItem(checkboxData[i], this);
                        this.checkboxData.push(item);
                    }
                }
            }
        };
        FancyCheckbox.prototype.render = function () {
            var items = $('<div></div>');
            this.checkboxData.forEach(function (item) {
                if (item instanceof CheckboxItem) {
                    var group = $('<div class="fancycheckboxes-group"></div>');
                    group.append(item.render());
                    items.append(group);
                }
                else {
                    items.append(item.render());
                }
            });
            items.find('.fancycheckboxes-group').each(function () {
                if ($(this).find('.fancycheckboxes-item').length > 5) {
                    $(this).append($('<a class="more">Все &raquo;</a>'));
                    $(this).height(150);
                }
            });
            return items;
        };
        return FancyCheckbox;
    }());
    FancyCheckboxes.FancyCheckbox = FancyCheckbox;
    var CheckboxGroup = (function () {
        function CheckboxGroup(item, widget) {
            this.widget = widget;
            this.name = item.value;
            this.items = [];
            this.populateCheckboxData(item.items);
        }
        CheckboxGroup.prototype.populateCheckboxData = function (checkboxData) {
            checkboxData.sort(function (item1, item2) {
                return item1.value.localeCompare(item2.value);
            });
            for (var i in checkboxData) {
                if (checkboxData.hasOwnProperty(i)) {
                    if (checkboxData[i].items.length) {
                        var group = new CheckboxGroup(checkboxData[i], this.widget);
                        this.items.push(group);
                    }
                    else {
                        var item = new CheckboxItem(checkboxData[i], this.widget);
                        this.items.push(item);
                    }
                }
            }
        };
        CheckboxGroup.prototype.render = function () {
            var group = $('<div class="fancycheckboxes-group"></div>');
            group.append($('<h4>' + this.name + '</h4>'));
            this.items.forEach(function (item) {
                group.append(item.render());
            });
            return group;
        };
        return CheckboxGroup;
    }());
    var CheckboxItem = (function () {
        function CheckboxItem(item, widget) {
            this.id = item.id;
            this.name = item.value;
            this.widget = widget;
        }
        CheckboxItem.prototype.render = function () {
            var item = $('<div class="fancycheckboxes-item"></div>');
            item.append($('<input type="checkbox" value="' + this.id + '" id="fchb_' + this.id + '" > <label for="fchb_' + this.id + '">' + this.name + '</label>'));
            if (this.widget.checkChecked(this.id)) {
                item.find('input').attr('checked', 'checked');
            }
            return item;
        };
        return CheckboxItem;
    }());
})(FancyCheckboxes || (FancyCheckboxes = {}));