t88: new newsletter

apps/emencia/django/newsletter/views/expo_views.py

@@ -15,6 +15,7 @@ from accounts.models import User
 from accounts.views import GetUserMixin
 from functions.http import JsonResponse
 from city.models import City
+from theme.models import Theme
 
 
 class SubscribeView(GetUserMixin, FormView):
@@ -81,6 +82,7 @@ class SubscribeView(GetUserMixin, FormView):
         ctx['object'] = self.object
         ctx['r_cities'] = self.get_russian_cities()
         ctx['checked_th'] = self.get_checked_th()
+        ctx['popular_themes'] = self.get_popular_themes()
 
         if self.object is not None:
             if self.request.GET.get('unsibscribe') and self.object.subscriber:
@@ -105,6 +107,12 @@ class SubscribeView(GetUserMixin, FormView):
             return self.object.themes.values_list('pk', flat=True)
         return []
 
+    def get_popular_themes(self):
+        """
+        :return:
+        """
+        return Theme.objects.all()[:7]
+
 
 class ActivationView(TemplateView):
     http_method_names = ['get']

static/mailing_settings/css/main.css

@@ -88,11 +88,29 @@ h3{
 }
 
 .themes_block h3 {
-    margin-bottom: 30px;
+    margin-bottom: 20px;
+}
+
+.themes_block p {
+    font-size: 18px;
+    color: #999999;
+    margin-bottom: 20px;
+}
+
+.popular_themes {
+    font-size: 18px;
+    margin-bottom: 20px;
+    list-style: none;
+}
+
+.popular_themes li {
+    padding: 5px 0;
+    font-weight: 300;
 }
 
 .subjects_block{
     padding: 50px 0;
+    margin-bottom: 10px;
 }
 
 .page_footer{
@@ -262,12 +280,14 @@ h3{
 
 .subjects_block input,
 .periodic input,
-.mailing_day input{
+.mailing_day input,
+.popular_themes input{
     display: none;
 }
 
 .subjects_block input + label,
-.periodic input + .radio{
+.periodic input + .radio,
+.popular_themes input + label{
     position: relative;
     padding-left: 40px;
     cursor: pointer;
@@ -275,6 +295,7 @@ h3{
 }
 
 .subjects_block input + label:before,
+.popular_themes input + label:before,
 .periodic input + .radio:before,
 .mailing_day input + .radio:before{
     content: "";
@@ -290,6 +311,7 @@ h3{
 }
 
 .subjects_block input + label:after,
+.popular_themes input + label:after,
 .periodic input + .radio:after,
 .mailing_day input + .radio:after{
     content: '';
@@ -305,6 +327,7 @@ h3{
 }
 
 .subjects_block input:checked + label:before,
+.popular_themes input:checked + label:before,
 .periodic input:checked + .radio:before,
 .mailing_day input:checked + .radio:before{
     border-color: #FF6600;
@@ -312,6 +335,7 @@ h3{
 }
 
 .subjects_block input:checked + label:after,
+.popular_themes input:checked + label:after,
 .periodic input:checked + .radio:after,
 .mailing_day input:checked + .radio:after{
     opacity: 1;
@@ -354,6 +378,7 @@ h3{
 }
 
 .mailing_day label:hover .radio:before,
+.popular_themes label:hover .radio:before,
 .periodic label:hover .radio:before,
 .subjects_block label:hover:before {
     border-color: #FF6600;
@@ -416,8 +441,8 @@ h3{
 }
 
 a.themes_trigger{
-    display: block;
+    display: inline-block;
-    width: 190px;
+    min-width: 190px;
     height: 35px;
     line-height: 35px;
     background-color: #FF6600;
@@ -427,6 +452,7 @@ a.themes_trigger{
     text-decoration: none;
     text-align: center;
     font-weight: 300;
+    padding: 0 40px;
 }
 
 .selected{
@@ -922,8 +948,10 @@ a.themes_trigger{
     opacity:1;
 }
 
-.pr-form button{
+.pr-form button,
+.pr-form .button{
     display:block;
+    text-decoration: none;
     border:2px solid #fff;
     border-radius:4px;
     background:#ff6900;

static/mailing_settings/js/main.js

@@ -58,6 +58,7 @@ function sendForm (show_modal) {
         $autocomplete = $('#autocomplete_themes', $themes_modal),
         $autocomplete_results = $('#autocomplete_themes_results', $themes_modal),
         $selected_themes = $('.selected_themes', $themes_modal),
+        $popular_themes = $('#popular_themes'),
         timer,
         themes_data = {},
         // template for mustache.js
@@ -218,6 +219,16 @@ function sendForm (show_modal) {
     }
 
 
+    $popular_themes.on('change', 'input[type="checkbox"]', function () {
+        var theme_id = this.value;
+        changeThemeData(theme_id, !themes_data[theme_id].checked, true);
+        $themes_modal
+            .find('#id_th_' + theme_id)
+            .prop('checked', themes_data[theme_id].checked)
+            .trigger('change');
+    });
+
+
     $themes_modal.on('change', 'input[type="checkbox"]', function (e) {
         e.preventDefault();
         // sendForm();
@@ -232,6 +243,7 @@ function sendForm (show_modal) {
             if ($checkbox.is(':checked')) {
                 changeThemeData($checkbox.val(), true, true);
 
+                // Отмечаем выбранными все теги у темы
                 $sub_list.find('input[name="tg"]').each(function (i, checkbox) {
                     $(checkbox).prop('checked', true);
                 });
@@ -243,6 +255,14 @@ function sendForm (show_modal) {
                 var rendered_theme = renderTheme($checkbox.val());
                 $selected_themes.append(rendered_theme);
 
+
+                console.log($popular_themes.find('#id_popular_theme_' + $checkbox.val()));
+
+                // Ставим чекбокс на популярных темах
+                $popular_themes
+                    .find('#id_popular_theme_' + $checkbox.val())
+                    .prop('checked', true);
+
             // Сняли чекбокс темы
             } else {
                 changeThemeData($checkbox.val(), false, true);
@@ -252,6 +272,10 @@ function sendForm (show_modal) {
                 });
 
                 removeSelectedItem($checkbox.attr('name'), $checkbox.val());
+
+                $popular_themes
+                    .find('#id_popular_theme_' + $checkbox.val())
+                    .prop('checked', false);
             }
 
         // Изменили чекбокс тега
@@ -381,6 +405,10 @@ function sendForm (show_modal) {
             $this.parents('li').remove();
         }
 
+        if (!$('#selected_themes').find('li').length) {
+            $popular_themes.show();
+        }
+
         checkSelected();
     }
 
@@ -409,6 +437,8 @@ function sendForm (show_modal) {
         $('#selected_themes').html($selected);
         sendForm();
 
+        $selected.length ? $popular_themes.hide() : $popular_themes.show();
+
         $.fancybox.close();
     });
 
@@ -675,4 +705,8 @@ $(function () {
 
     if ($('#unsibscribed').length)
         $.fancybox.open({href: '#unsibscribed'});
+
+    $('.smooth_scroll').on('click', function (event) {
+        var target = $()
+    })
 });

templates/client/newsletters/mailing_settings.html

@@ -70,19 +70,34 @@
                                         {{ form.email }}
                                     </span>
                                 </div>
-                                <button>{% trans 'Подписаться' %}</button>
+                                {% comment %}<button>{% trans 'Выбрать рубрики' %}</button>{% endcomment %}
+                                <a href="#themes_block" class="button smooth_scroll">{% trans 'Выбрать рубрики' %}</a>
                             </fieldset>
                         </div>
                     </div>
                 </section>
             {% endif %}
 
-            <div class="themes_block">
+            <div id="themes_block" class="themes_block">
                 <div class="container">
                     <h2>{% trans 'Какие события включать в ваше письмо?' %}</h2>
                     <div class="columns">
                         <div class="column">
+                            <div id="selected_themes_block">
                                 <h3>{% trans 'Ваши темы:' %}</h3>
+                                <p>Отметьте темы, по которым вы хотите получать анонсы событий</p>
+
+                                {% if not user.is_authenticated %}
+                                    <ul id="popular_themes" class="popular_themes">
+                                        {% for theme in popular_themes %}
+                                            <li>
+                                                <input id="id_popular_theme_{{ theme.pk }}" type="checkbox" name="th" value="{{ theme.pk }}">
+                                                <label for="id_popular_theme_{{ theme.pk }}">{{ theme }}</label>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
+
                                 <ul id="selected_themes" class="selected selected_themes">
                                     {% for theme in object.themes.all %}
                                         <li data-id="{{ theme.pk }}" data-type="th" class="theme_{{ theme.pk }}">
@@ -99,7 +114,11 @@
                                         </li>
                                     {% endfor %}
                                 </ul>
-                            <a href="#search-modal" class="modal_trigger themes_trigger">{% trans 'Уточнить темы' %}</a>
+                                <a href="#search-modal" class="modal_trigger themes_trigger">
+                                    {% comment %}{% trans 'Уточнить темы' %}{% endcomment %}
+                                    {% trans 'Выбрать из полного списка' %}
+                                </a>
+                            </div>
                         </div>
                         <div class="column">
                             <h3>{% trans 'Ваши гео-фильтры:' %}</h3>
@@ -169,6 +188,7 @@
                     </div>
                 </div>
             </div>
+            {% comment %}
                 <div class="period_block">
                     <div class="container">
                         <h2>{% trans 'Регулярность получения писем' %}</h2>
@@ -200,6 +220,7 @@
                         </div>
                     </div>
                 </div>
+            {% endcomment %}
             <div class="button_block">
                 <div class="container">
                     {% if not user.is_authenticated %}