diff --git a/static/mailing_settings/css/main.css b/static/mailing_settings/css/main.css index aee742d2..75a35655 100644 --- a/static/mailing_settings/css/main.css +++ b/static/mailing_settings/css/main.css @@ -157,11 +157,11 @@ h3{ font-size: 16px; } -.geo_filters li + li{ +.geo_filters > li + li{ margin-top: 34px; } -.geo_filters li a{ +.geo_filters .modal_trigger{ font-size: 16px; color: #333; text-decoration: none; @@ -170,7 +170,7 @@ h3{ margin-left: 40px; } -.geo_filters li a:hover{ +.geo_filters .modal_trigger:hover{ border-bottom-color: transparent; } @@ -264,6 +264,11 @@ h3{ transition: opacity .3s; } +.geo_filters .selected{ + padding-top: 20px; + width: 285px; +} + .subjects_block .column{ vertical-align: top; width: calc(100%/3); diff --git a/static/mailing_settings/js/main.js b/static/mailing_settings/js/main.js index 7d752837..3c9b4d3a 100644 --- a/static/mailing_settings/js/main.js +++ b/static/mailing_settings/js/main.js @@ -99,7 +99,141 @@ // Выбор городов +(function () { + var $cities_modal = $('.popup-window.r_cities'), + selected_cities = {}, + + renderSelectedCities = function (id, text) { + return '
  • ' + + '' + + text + + '×' + + '
  • ' + }; + + $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(); + + var $selected_cities = $('#selected_cities'); + $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(); + }) +})(); + +// Выбор стран +(function () { + var $countries_modal = $('.popup-window.countries'), + user_countries = { + area: {}, + co: {} + }, + + renderSublistItem = function (data) { + return '
  • ' + + '' + + '
  • '; + }, + + 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); + }); + + $loader.hide(); + } + }); + }, + + renderSelectedThemes = function (id, name, text) { + return '
  • ' + + '' + + text + + '×' + + '
  • ' + }; + + // открываем список тегов в теме + $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); + } + }); + + + $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(); + + var $selected_countries = $('#selected_countries'); + + $selected_countries.html(''); + + for (var area_id in user_countries['area']) { + var $theme = $(renderSelectedThemes(area_id, 'area', user_countries['area'][area_id])); + $selected_countries.append($theme); + } + + for (var co_id in user_countries['co']) { + var $tag = $(renderSelectedThemes(co_id, 'co', user_countries['co'][co_id])); + $selected_countries.append($tag); + } + + $.fancybox.close(); + }) +})(); $(function () { $('.back_to_site').on('click', function (event) { @@ -107,12 +241,8 @@ $(function () { window.history.back(); }); - $('.themes_trigger').on('click', function (event) { - event.preventDefault(); - $.fancybox.open({ - href: '#search-modal', - padding: 0 - }); + $('.modal_trigger').fancybox({ + padding: 0 }); $('.scroll-container').mCustomScrollbar(); diff --git a/templates/client/accounts/mailing_settings.html b/templates/client/accounts/mailing_settings.html index 228a108c..99e7390f 100644 --- a/templates/client/accounts/mailing_settings.html +++ b/templates/client/accounts/mailing_settings.html @@ -35,7 +35,7 @@ {{ form.themes.label_tag }} {{ form.themes }} - {% trans 'Уточнить темы' %} + {% trans 'Уточнить темы' %}

    {% trans 'Теги' %}

    {{ form.tags.label_tag }} @@ -67,7 +67,8 @@ - {% trans 'Выбрать города' %} + {% trans 'Выбрать города' %} +
  • @@ -84,7 +85,8 @@ - {% trans 'Выбрать страны' %} + {% trans 'Выбрать страны' %} +
  • @@ -166,12 +168,17 @@
    -
    +
    {% include 'client/popups/new_themes.html' %}
    -
    + +
    {% include 'client/popups/russia_cities.html' %}
    + +
    + {% include 'client/popups/countries.html' %} +
    diff --git a/templates/client/popups/countries.html b/templates/client/popups/countries.html new file mode 100644 index 00000000..159704d4 --- /dev/null +++ b/templates/client/popups/countries.html @@ -0,0 +1,43 @@ +{% load static %} +{% load i18n %} +{% load template_filters %} + + diff --git a/templates/client/popups/new_themes.html b/templates/client/popups/new_themes.html index be01418f..2712602a 100644 --- a/templates/client/popups/new_themes.html +++ b/templates/client/popups/new_themes.html @@ -29,7 +29,7 @@
    -
    +
    diff --git a/templates/client/popups/russia_cities.html b/templates/client/popups/russia_cities.html index 70e4c075..ccbf7869 100644 --- a/templates/client/popups/russia_cities.html +++ b/templates/client/popups/russia_cities.html @@ -16,11 +16,10 @@ {% for pk, name in r_cities %}
  • -
  • {% endfor %}