expomap/static/mailing_settings/js/main.js

'use strict';

function sendForm () {
    var $form = $('#mailing_settings_form');
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serializeArray(),
        success: function(response){
            console.log(response);
        }
    })
}

// Выбор тем
(function () {
    var $themes_modal = $('.popup-window.themes'),
        $themes_select = $('#id_th'),
        $tags_select = $('#id_tg'),
        $selected_themes = $('#selected_themes'),
        $selected_tags = $('#selected_tags'),
        user_choice = {
            th: {},
            tg: {}
        },

        renderSublistItem = function (data) {
            return '<li>' +
                        '<label>' +
                            '<input type="checkbox" class="hidden_checkbox" name="' + data.name + '" value="' + data.id + '" />' +

                            '<span class="custom_checkbox"></span>' +
                            '<span class="label">' + data.text + '</span>' +
                        '</label>' +
                    '</li>';
        },

        renderSublist = function (url, $sub_list) {
            var $loader = $themes_modal.find('.wait-ajax').show();

            $.getJSON(url, function (data, status) {
                if (status == 'success'){
                    $.each(data, function (i) {
                        var $sub_item = $(renderSublistItem( data[i] ));

                        $sub_list
                            .addClass('has_items')
                            .append($sub_item);

                        // $tags_select.find('option').each(function () {
                        //     $themes_modal.find('.sub.has_items input[name="tg"][value="' + $(this).val() + '"]').prop('checked', true);
                        // });

                        for (var id in user_choice['tg']){
                            $themes_modal.find('.sub.has_items input[name="tg"][value="' + id + '"]').prop('checked', true);
                        }
                    });

                    $loader.hide();
                }
            });
        },

        renderSelectedThemes = function (id, name, text) {
            return '<li>' +
                        '<input type="hidden" name="' + name + '" value="' + id + '">' +
                        text +
                        '<a href="#">&times;</a>' +
                    '</li>'
        };

    // Записываем данные в user_chice при инициализации
    $themes_select.find('option').each(function () {
        $themes_modal.find('input[name="th"][value="' + $(this).val() + '"]').prop('checked', true);

        user_choice['th'][$(this).val()] = $(this).text();

        var $theme = $(renderSelectedThemes($(this).val(), 'th', $(this).text()));
        $selected_themes.append($theme);
    });


    // Записываем данные в user_chice при инициализации
    $tags_select.find('option').each(function () {
        user_choice['tg'][$(this).val()] = $(this).text();
        var $tag = $(renderSelectedThemes($(this).val(), 'tg', $(this).text()));
        $selected_tags.append($tag);
    });


    // открываем список тегов в теме
    $themes_modal.on('click', '.trigger', function (e) {
        e.preventDefault();

        var $link = $(this),
            $sub_list = $link.next('.sub');

        // если теги подгружены, то открываем(закрываем) список
        // если нет, то подгружаем аяксом теги
        if ($sub_list.hasClass('has_items')){
            $sub_list.slideToggle(100);
        } else {
            renderSublist($link.attr('href'), $sub_list);
        }
    });


    $themes_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this);

        // записываем(удаляем) в объект user_choice отмеченные темы(теги)
        if($checkbox.is(':checked')){
            user_choice[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text();
        } else {
            delete user_choice[$checkbox.attr('name')][$checkbox.val()];
        }
    });


    // Подтверждение выбранных тем
    $themes_modal.on('click', '.modal-approve', function (e) {
        e.preventDefault();

        $selected_themes.html('');
        $selected_tags.html('');

        for (var theme_id in user_choice['th']) {
            var $theme = $(renderSelectedThemes(theme_id, 'th', user_choice['th'][theme_id]));
            $selected_themes.append($theme);
        }

        for (var tag_id in user_choice['tg']) {
            var $tag = $(renderSelectedThemes(tag_id, 'tg', user_choice['tg'][tag_id]));
            $selected_tags.append($tag);
        }

        $.fancybox.close();

        sendForm();
    });


    var removeCheckbox = function (type, id) {
        delete user_choice[type][id];
        $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
        console.log('#id_' + type);
        console.log('option[value="' + id + '"]');
        $('#id_' + type).find('option[value="' + id + '"]').remove();
    };


    // Удаление выбранной темы
    $selected_themes.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });


    // Удаление выбранного тега
    $selected_tags.find('a').on('click', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });

})();


// Выбор городов
(function () {
    var $cities_modal = $('.popup-window.r_cities'),
        $selected_cities = $('#selected_cities'),
        $cities_select = $('#id_r_cities'),
        selected_cities = {},

        renderSelectedCities = function (id, text) {
            return '<li>' +
                        '<input type="hidden" name="r_cities" value="' + id + '">' +
                        text +
                        '<a href="#">&times;</a>' +
                    '</li>'
        };

    // Записываем данные в user_chice при инициализации
    $cities_select.find('option').each(function () {
        $cities_modal.find('input[name="r_cities"][value="' + $(this).val() + '"]').prop('checked', true);

        selected_cities[$(this).val()] = $(this).text();

        var $city = $(renderSelectedCities($(this).val(), $(this).text()));
        $selected_cities.append($city);
    });

    $cities_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this);

        // записываем(удаляем) в объект selected_cities отмеченные темы(теги)
        if($checkbox.is(':checked')){
            selected_cities[$checkbox.val()] = $checkbox.parent().find('.label').text();
        } else {
            delete selected_cities[$checkbox.val()];
        }
    });

    // Подтверждение выбранных городов
    $cities_modal.on('click', '.modal-approve', function (e) {
        e.preventDefault();

        $selected_cities.html('');

        for (var city_id in selected_cities) {
            var $city = $(renderSelectedCities(city_id, selected_cities[city_id]));
            $selected_cities.append($city);
        }

        $.fancybox.close();
        sendForm();
    });


    // Удаление выбранного тега
    $selected_cities.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        delete selected_cities[$input.val()];
        $('.modal_checkboxes').find('input[name="' + $input.attr('name') + '"][value="' + $input.val() + '"]').prop('checked', false);
        $('#id_' + $input.attr('name')).find('option[value="' + $input.val() + '"]').remove();

        $(this).parent('li').remove();
        sendForm();
    });
})();

// Выбор стран
(function () {
    var $countries_modal = $('.popup-window.countries'),
        $areas_select = $('#id_area'),
        $co_select = $('#id_co'),
        $selected_areas = $('#selected_areas'),
        $selected_co = $('#selected_countries'),
        user_countries = {
            area: {},
            co: {}
        },

        renderSublistItem = function (data) {
            return '<li>' +
                        '<label>' +
                            '<input type="checkbox" class="hidden_checkbox" name="' + data.name + '" value="' + data.id + '" />' +
                            '<span class="custom_checkbox"></span>' +
                            '<span class="label">' + data.text + '</span>' +
                        '</label>' +
                    '</li>';
        },

        renderSublist = function (url, $sub_list) {
            var $loader = $countries_modal.find('.wait-ajax').show();

            $.getJSON(url, function (data, status) {
                if (status == 'success'){
                    $.each(data, function (i) {
                        var $sub_item = $(renderSublistItem( data[i] ));

                        $sub_list
                            .addClass('has_items')
                            .append($sub_item);

                        for (var id in user_countries['co']){
                            $countries_modal.find('.sub.has_items input[name="co"][value="' + id + '"]').prop('checked', true);
                        }
                    });

                    $loader.hide();
                }
            });
        },

        renderSelectedThemes = function (id, name, text) {
            return '<li>' +
                        '<input type="hidden" name="' + name + '" value="' + id + '">' +
                        text +
                        '<a href="#">&times;</a>' +
                    '</li>'
        },

        removeCheckbox = function (type, id) {
            delete user_countries[type][id];
            $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
            $('#id_' + type).find('option[value="' + id + '"]').removeAttr('selected');
        };

    // Записываем данные в user_countries при инициализации
    $areas_select.find('option[selected]').each(function () {
        $countries_modal.find('input[name="area"][value="' + $(this).val() + '"]').prop('checked', true);

        user_countries['area'][$(this).val()] = $(this).text();

        var $area = $(renderSelectedThemes($(this).val(), 'area', $(this).text()));
        $selected_areas.append($area);
    });

    $co_select.find('option[selected]').each(function () {
        user_countries['co'][$(this).val()] = $(this).text();

        var $co = $(renderSelectedThemes($(this).val(), 'co', $(this).text()));
        $selected_co.append($co);
    });

    // открываем список тегов в теме
    $countries_modal.on('click', '.trigger', function (e) {
        e.preventDefault();

        var $link = $(this),
            $sub_list = $link.next('.sub');

        // если теги подгружены, то открываем(закрываем) список
        // если нет, то подгружаем аяксом теги
        if ($sub_list.hasClass('has_items')){
            $sub_list.slideToggle(100);
        } else {
            renderSublist($link.attr('href'), $sub_list);

            for( var city_id in user_countries['co'] ){
                console.log(city_id);

            }
        }
    });


    $countries_modal.on('change', 'input[type="checkbox"]', function (e) {
        e.preventDefault();
        var $checkbox = $(this);

        // записываем(удаляем) в объект user_choice отмеченные темы(теги)
        if($checkbox.is(':checked')){
            user_countries[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text();
        } else {
            delete user_countries[$checkbox.attr('name')][$checkbox.val()];
        }
    });


    // Подтверждение выбранных тем
    $countries_modal.on('click', '.modal-approve', function (e) {
        e.preventDefault();

        $selected_co.html('');
        $selected_areas.html('');


        for (var area_id in user_countries['area']) {
            var $area = $(renderSelectedThemes(area_id, 'area', user_countries['area'][area_id]));
            $selected_areas.append($area);
        }

        for (var co_id in user_countries['co']) {
            var $co = $(renderSelectedThemes(co_id, 'co', user_countries['co'][co_id]));
            $selected_co.append($co);
        }

        $.fancybox.close();
        sendForm();
    });

    // Удаление выбранного континента
    $selected_areas.on('click', 'a', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });


    // Удаление выбранной страны
    $selected_co.find('a').on('click', function (event) {
        event.preventDefault();

        var $input = $(this).siblings('input');

        removeCheckbox($input.attr('name'), $input.val());

        $(this).parent('li').remove();
        sendForm();
    });
})();

$(function () {
    $('.modal_trigger').fancybox({
        padding: 0
    });

    $('.scroll-container').mCustomScrollbar();


    if ($('#unsibscribed').length)
        $.fancybox.open({href: '#unsibscribed'});
});