mailing settings modals

9 years ago · 5ae192a332
parent 0a4e68f557
commit 5ae192a332
6 changed files with 202 additions and 18 deletions
--- 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);
--- 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 '<li>' +
+                        '<input type="hidden" name="r_cities_' + id + '" value="' + id + '">' +
+                        text +
+                        '<a href="#">&times;</a>' +
+                    '</li>'
+        };
+
+    $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 '<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);
+                    });
+
+                    $loader.hide();
+                }
+            });
+        },
+
+        renderSelectedThemes = function (id, name, text) {
+            return '<li>' +
+                        '<input type="hidden" name="' + name + '" value="' + id + '">' +
+                        text +
+                        '<a href="#">&times;</a>' +
+                    '</li>'
+        };
+
+    // открываем список тегов в теме
+    $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();
--- a/templates/client/accounts/mailing_settings.html
+++ b/templates/client/accounts/mailing_settings.html
@ -35,7 +35,7 @@
                            {{ form.themes.label_tag }}
                            {{ form.themes }}
                            <ul id="selected_themes" class="selected"></ul>
-                            <a href="#" class="themes_trigger">{% trans 'Уточнить темы' %}</a>
+                            <a href="#search-modal" class="modal_trigger themes_trigger">{% trans 'Уточнить темы' %}</a>

                            <h3>{% trans 'Теги' %}</h3>
                            {{ form.tags.label_tag }}
@ -67,7 +67,8 @@
                                        </span>
                                        <span class="geo_checkbox"></span>
                                    </label>
-                                    <a href="#">{% trans 'Выбрать города' %}</a>
+                                    <a href="#cities-modal" class="modal_trigger">{% trans 'Выбрать города' %}</a>
+                                    <ul id="selected_cities" class="selected"></ul>
                                </li>

                                <li>
@ -84,7 +85,8 @@
                                        </span>
                                        <span class="geo_checkbox"></span>
                                    </label>
-                                    <a href="#">{% trans 'Выбрать страны' %}</a>
+                                    <a href="#countries_modal" class="modal_trigger">{% trans 'Выбрать страны' %}</a>
+                                    <ul id="selected_countries" class="selected"></ul>
                                </li>

                                <li>
@ -166,12 +168,17 @@


        <div class="modals">
-            <div class="search-modal-overlay" id="search-modal">
+            <div id="search-modal">
                {% include 'client/popups/new_themes.html' %}
            </div>
-			<div class="search-modal-overlay" id="search-modal">
+
+			<div id="cities-modal">
                {% include 'client/popups/russia_cities.html' %}
 			</div>
+
+            <div id="countries_modal">
+                {% include 'client/popups/countries.html' %}
+            </div>
 		</div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer></script>
--- a/templates/client/popups/countries.html
+++ b/templates/client/popups/countries.html
@ -0,0 +1,43 @@
+{% load static %}
+{% load i18n %}
+{% load template_filters %}
+
+<div class="popup-window countries">
+	<header class="clearfix">
+		<div class="pw-title">{% trans 'Страны' %}</div>
+	</header>
+
+	<div class="body">
+        <div class="themes_wrapper">
+
+            <div class="scroll-container">
+                <div class="scroll-content">
+                    <div class="places-list">
+                        <ul class="modal_checkboxes">
+                            {% for value, text in search_form.area.field.choices %}
+                                <li class="level1 level">
+                                    <label>
+                                        <input type="checkbox" name="area"  id="id_{{ prefix }}{{ value }}" class="csb-menu-input"  value="{{ value }}" {% for option in search_form.area.value %}{% if option == value|slugify %}checked="checked"{% endif %}{% endfor %}/>
+                                        <span class="custom_checkbox"></span>
+                                        <span class="label hidden">{{ text }}</span>
+                                    </label>
+                                    <a href="/search-form/?name=area&id={{ value }}" data-sub="true" class="trigger">{{ text }}</a>
+                                    <ul class="sub"></ul>
+                                </li>
+                            {% endfor %}
+
+                        </ul>
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="wait-ajax"></div>
+        </div>
+
+        <div class="pwf-buttons-line">
+            <button class="modal-approve" type="submit">{% trans 'Выбрать' %}</button>
+            <button class="modal-clear" type="submit">{% trans 'Очистить' %}</button>
+        </div>
+	</div>
+</div>
--- a/templates/client/popups/new_themes.html
+++ b/templates/client/popups/new_themes.html
@ -29,7 +29,7 @@
                </div>
            </div>

-            <div class="wait-ajax" style=""></div>
+            <div class="wait-ajax"></div>
        </div>

        <div class="buttons_block">
--- a/templates/client/popups/russia_cities.html
+++ b/templates/client/popups/russia_cities.html
@ -16,11 +16,10 @@
                        {% for pk, name in r_cities %}
                            <li class="level1">
                                <label>
-                                    <input type="checkbox" class="hidden_checkbox" name="r_cities_{{ pk }}" id="" value="{{ name }}"/>
+                                    <input type="checkbox" class="hidden_checkbox" name="r_cities_{{ pk }}" id="" value="{{ pk }}"/>
                                    <span class="custom_checkbox"></span>
-                                    <span class="label hidden">{{ text }}</span>
+                                    <span class="label">{{ name }}</span>
                                </label>
-                                <ul class="sub"></ul>
                            </li>
                        {% endfor %}
                        </ul>