mailind settings add autocomplete to themes

requirements.txt

@@ -9,7 +9,7 @@ django-bitfield==1.6.4
 django-ckeditor==4.0.2
 django-crontab==0.6.0
 django-debug-toolbar==1.2.1
-django-haystack==2.1.0
+django-haystack==2.3.2
 django-hvad==1.2.0
 django-model-utils==2.2
 django-multiupload==0.5

static/mailing_settings/css/main.css

@@ -62,6 +62,10 @@
     box-sizing: border-box;
 }
 
+:focus{
+    outline: 0 none;
+}
+
 .container{
     max-width: 1140px;
     margin: 0 auto;
@@ -695,3 +699,65 @@ h3{
     background-color: #fff;
     padding: 15px;
 }
+
+.autocomplete_block{
+    position: relative;
+    margin-bottom: 5px;
+}
+
+.autocomplete_input{
+    display: block;
+    min-width: 100%;
+    border: 0;
+    border-bottom: 1px dotted #cdcdcd;
+    height: 35px;
+    padding: 0 15px;
+    font-size: 15px;
+    color: rgb(34, 34, 34);
+    font-weight: 300;
+}
+
+.autocomplete_themes_results{
+    list-style: none;
+    max-height: 230px;
+    overflow-y: auto;
+    background-color: #fff;
+    border: 1px solid #cdcdcd;
+    position: absolute;
+    top: calc(100% - 1px);
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: none;
+}
+
+.autocomplete_themes_results li{
+    padding: 2px 10px;
+    cursor: pointer;
+    color: #464646;
+}
+
+.autocomplete_themes_results li:hover{
+    color: #ff6600;
+}
+
+.autocomplete_themes_results span{
+    color: #ababab;
+}
+
+.selected_values{
+    border-bottom: 1px dotted #cdcdcd;
+    margin-bottom: 5px;
+    padding-bottom: 5px;
+    display: none;
+}
+
+.selected_values li {
+    margin-bottom: 3px;
+    margin-right: 3px;
+    padding: 3px 5px;
+}
+
+.selected_values li a{
+    margin-left: 5px;
+}

static/mailing_settings/js/main.js

@@ -12,17 +12,17 @@ function sendForm () {
     })
 }
 
+
 // Выбор тем
 (function () {
     var $themes_modal = $('.popup-window.themes'),
+        $autocomplete = $('#autocomplete_themes', $themes_modal),
+        $autocomplete_results = $('#autocomplete_themes_results', $themes_modal),
         $themes_select = $('#id_th'),
         $tags_select = $('#id_tg'),
-        $selected_themes = $('#selected_themes'),
+        $selected_themes = $('.selected_themes'),
-        $selected_tags = $('#selected_tags'),
+        timer,
-        user_choice = {
+        tags_ids = [],
-            th: {},
-            tg: {}
-        },
 
         renderSublistItem = function (data) {
             return '<li>' +
@@ -43,48 +43,97 @@ function sendForm () {
                     $.each(data, function (i) {
                         var $sub_item = $(renderSublistItem( data[i] ));
 
+                        if (tags_ids.indexOf( data[i]['id']) >= 0){
+                            $sub_item.find('input').prop('checked', true);
+                        }
+
                         $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) {
+        renderSelectedThemes = function (obj) {
             return '<li>' +
-                        '<input type="hidden" name="' + name + '" value="' + id + '">' +
+                        '<input type="hidden" name="' + obj['name'] + '" value="' + obj['id'] + '">' +
-                        text +
+                        obj['text'] +
                         '<a href="#">&times;</a>' +
                     '</li>'
+        },
+
+        getAutocompleteResults = function () {
+            var term = $autocomplete.val();
+            if ($.trim(term).length >= 3){
+
+                $.get(
+                    $autocomplete.data('url'),
+                    {
+                        form: $autocomplete.data('form'),
+                        term: term
+                    },
+                    function (response) {
+
+                        var results = '';
+                        response.forEach(function (obj) {
+                            results += '<li data-type="' + obj.name + '" data-id="' + obj.id + '" data-text="' + obj.text + '">' + obj.text + ' <span>(' + obj.cat + ')</span></li>'
+                        });
+
+                        $autocomplete_results
+                            .html(results)
+                            .show();
+                    }
+                )
+            }
+        },
+
+        deleteSelectedItem = function (obj) {
+            $selected_themes
+                .find('input[name="' + obj['name'] + '"][value="' + obj['id'] + '"]')
+                .parents('li')
+                .remove();
+
+            $themes_modal
+                .find('.selected')
+                .find('input[name="' + obj['name'] + '"][value="' + obj['id'] + '"]')
+                .parents('li')
+                .remove();
+
+            $('#id_' + obj['name']).find('option[value="' + obj['id'] + '"]').remove();
         };
 
-    // Записываем данные в 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 item = {
+            id: $(this).val(),
+            name: 'th',
+            text: $(this).text()
+        },
+        theme_item = renderSelectedThemes(item);
+        $selected_themes.append(theme_item);
 
-        var $theme = $(renderSelectedThemes($(this).val(), 'th', $(this).text()));
+        $themes_modal.find('.selected_values').show();
-        $selected_themes.append($theme);
     });
 
 
-    // Записываем данные в user_chice при инициализации
+    // Генерируем выбранные теги при загрузке страницы
     $tags_select.find('option').each(function () {
-        user_choice['tg'][$(this).val()] = $(this).text();
+        tags_ids.push($(this).val() * 1);
-        var $tag = $(renderSelectedThemes($(this).val(), 'tg', $(this).text()));
+
-        $selected_tags.append($tag);
+        var item = {
+            id: $(this).val(),
+            name: 'tg',
+            text: $(this).text()
+        },
+            tag_item = renderSelectedThemes(item);
+
+        $selected_themes.append(tag_item);
+        $themes_modal.find('.selected_values').show();
     });
 
 
@@ -107,48 +156,72 @@ function sendForm () {
 
     $themes_modal.on('change', 'input[type="checkbox"]', function (e) {
         e.preventDefault();
-        var $checkbox = $(this);
+        var $checkbox = $(this),
+            item = {
+                id: $checkbox.val(),
+                name: $checkbox.attr('name'),
+                text: $checkbox.parent().find('.label').text()
+            };
 
-        // записываем(удаляем) в объект user_choice отмеченные темы(теги)
         if($checkbox.is(':checked')){
-            user_choice[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text();
+            var selected_item = renderSelectedThemes(item);
+
+            $selected_themes.append(selected_item);
+            $themes_modal.find('.selected_values').show();
         } else {
-            delete user_choice[$checkbox.attr('name')][$checkbox.val()];
+            deleteSelectedItem(item);
+        }
+
+        if ($themes_modal.find('.selected_values li').length == 0) {
+            $themes_modal.find('.selected_values').hide();
         }
+
+        sendForm();
     });
 
 
-    // Подтверждение выбранных тем
+     // Input автокомплита
-    $themes_modal.on('click', '.modal-approve', function (e) {
+    $autocomplete.on('keyup', function () {
-        e.preventDefault();
+        $autocomplete_results.html('');
+        clearTimeout(timer);
+        timer = setTimeout(getAutocompleteResults, 500);
+    });
 
-        $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]));
+    $autocomplete_results.on('click', 'li', function () {
-            $selected_themes.append($theme);
+        var $this = $(this),
-        }
+            item = {
+                id: $this.data('id'),
+                name: $this.data('type'),
+                text: $this.data('text')
+            };
 
-        for (var tag_id in user_choice['tg']) {
+        // Проверяем или такой пункт уже выбран
-            var $tag = $(renderSelectedThemes(tag_id, 'tg', user_choice['tg'][tag_id]));
+        if ($selected_themes.find('[value=' + item['id'] + ']').length == 0){
-            $selected_tags.append($tag);
+            var selected_item = renderSelectedThemes(item);
-        }
+            $selected_themes.append(selected_item);
 
-        $.fancybox.close();
+            $themes_modal.find('.selected_values').show();
 
-        sendForm();
+            $('.modal_checkboxes').find('input[name="' + item['name'] + '"][value="' + item['id'] + '"]').prop('checked', true);
-    });
 
+            sendForm();
 
-    var removeCheckbox = function (type, id) {
+            if (item['name'] == 'tg'){
-        delete user_choice[type][id];
+                if (tags_ids.indexOf(item['id'] * 1) >= 0){
-        $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
+                    tags_ids.splice(tags_ids.indexOf(item['id'] * 1), 1)
-        console.log('#id_' + type);
+                } else {
-        console.log('option[value="' + id + '"]');
+                    tags_ids.push(item['id'] * 1);
-        $('#id_' + type).find('option[value="' + id + '"]').remove();
+                }
-    };
+            }
+        }
 
+        $autocomplete_results
+            .html('')
+            .hide();
+        $autocomplete.val('');
+    });
 
     // Удаление выбранной темы
     $selected_themes.on('click', 'a', function (event) {
@@ -156,25 +229,39 @@ function sendForm () {
 
         var $input = $(this).siblings('input');
 
-        removeCheckbox($input.attr('name'), $input.val());
+        var item = {
-
+            id: $input.val(),
-        $(this).parent('li').remove();
+            name: $input.attr('name')
-        sendForm();
+        };
-    });
 
+        if (item['name'] == 'tg'){
+            if (tags_ids.indexOf(item['id'] * 1) >= 0){
+                tags_ids.splice(tags_ids.indexOf(item['id'] * 1), 1)
+            } else {
+                tags_ids.push(item['id'] * 1);
+            }
+        }
 
-    // Удаление выбранного тега
+        deleteSelectedItem(item);
-    $selected_tags.find('a').on('click', function (event) {
+        $('.modal_checkboxes').find('input[name="' + item['name'] + '"][value="' + item['id'] + '"]').prop('checked', false);
-        event.preventDefault();
 
-        var $input = $(this).siblings('input');
+        $(this).parent('li').remove();
 
-        removeCheckbox($input.attr('name'), $input.val());
+        if ($themes_modal.find('.selected_values li').length == 0) {
+            $themes_modal.find('.selected_values').hide();
+        }
 
-        $(this).parent('li').remove();
         sendForm();
     });
 
+    $('body').on('click', function (e) {
+        if ($autocomplete_results.is(':visible') && $(e.target).parents('.autocomplete_block').length == 0){
+            $autocomplete_results
+                .html('')
+                .hide();
+        }
+    });
+
 })();
 
 
@@ -185,12 +272,23 @@ function sendForm () {
         $cities_select = $('#id_r_cities'),
         selected_cities = {},
 
-        renderSelectedCities = function (id, text) {
+        renderSelectedCountry = function (id, text) {
             return '<li>' +
                         '<input type="hidden" name="r_cities" value="' + id + '">' +
                         text +
                         '<a href="#">&times;</a>' +
                     '</li>'
+        },
+
+        renderSelectedCities = function () {
+            $selected_cities.html('');
+
+            for (var city_id in selected_cities) {
+                var $city = $(renderSelectedCountry(city_id, selected_cities[city_id]));
+                $selected_cities.append($city);
+            }
+
+            sendForm();
         };
 
     // Записываем данные в user_chice при инициализации
@@ -199,7 +297,7 @@ function sendForm () {
 
         selected_cities[$(this).val()] = $(this).text();
 
-        var $city = $(renderSelectedCities($(this).val(), $(this).text()));
+        var $city = $(renderSelectedCountry($(this).val(), $(this).text()));
         $selected_cities.append($city);
     });
 
@@ -212,22 +310,10 @@ function sendForm () {
             selected_cities[$checkbox.val()] = $checkbox.parent().find('.label').text();
         } else {
             delete selected_cities[$checkbox.val()];
+            $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').remove();
         }
-    });
 
-    // Подтверждение выбранных городов
+        renderSelectedCities();
-    $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();
     });
 
 
@@ -246,6 +332,7 @@ function sendForm () {
     });
 })();
 
+
 // Выбор стран
 (function () {
     var $countries_modal = $('.popup-window.countries'),
@@ -276,13 +363,13 @@ function sendForm () {
                     $.each(data, function (i) {
                         var $sub_item = $(renderSublistItem( data[i] ));
 
+                        if (data[i]['id'] in user_countries['co']){
+                            $sub_item.find('input').prop('checked', true);
+                        }
                         $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();
@@ -290,7 +377,7 @@ function sendForm () {
             });
         },
 
-        renderSelectedThemes = function (id, name, text) {
+        renderSelectedCountry = function (id, name, text) {
             return '<li>' +
                         '<input type="hidden" name="' + name + '" value="' + id + '">' +
                         text +
@@ -298,6 +385,24 @@ function sendForm () {
                     '</li>'
         },
 
+        renderSelectedCountries = function () {
+            $selected_co.html('');
+            $selected_areas.html('');
+
+
+            for (var area_id in user_countries['area']) {
+                var $area = $(renderSelectedCountry(area_id, 'area', user_countries['area'][area_id]));
+                $selected_areas.append($area);
+            }
+
+            for (var co_id in user_countries['co']) {
+                var $co = $(renderSelectedCountry(co_id, 'co', user_countries['co'][co_id]));
+                $selected_co.append($co);
+            }
+
+            sendForm();
+        },
+
         removeCheckbox = function (type, id) {
             delete user_countries[type][id];
             $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
@@ -310,14 +415,14 @@ function sendForm () {
 
         user_countries['area'][$(this).val()] = $(this).text();
 
-        var $area = $(renderSelectedThemes($(this).val(), 'area', $(this).text()));
+        var $area = $(renderSelectedCountry($(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()));
+        var $co = $(renderSelectedCountry($(this).val(), 'co', $(this).text()));
         $selected_co.append($co);
     });
 
@@ -334,11 +439,6 @@ function sendForm () {
             $sub_list.slideToggle(100);
         } else {
             renderSublist($link.attr('href'), $sub_list);
-
-            for( var city_id in user_countries['co'] ){
-                console.log(city_id);
-
-            }
         }
     });
 
@@ -352,32 +452,13 @@ function sendForm () {
             user_countries[$checkbox.attr('name')][$checkbox.val()] = $checkbox.parent().find('.label').text();
         } else {
             delete user_countries[$checkbox.attr('name')][$checkbox.val()];
+            $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').removeAttr('selected');
         }
-    });
-
-
-    // Подтверждение выбранных тем
-    $countries_modal.on('click', '.modal-approve', function (e) {
-        e.preventDefault();
 
-        $selected_co.html('');
+        renderSelectedCountries();
-        $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();
@@ -404,6 +485,8 @@ function sendForm () {
     });
 })();
 
+
+
 $(function () {
     $('.modal_trigger').fancybox({
         padding: 0

templates/client/accounts/mailing_settings.html

@@ -36,8 +36,8 @@
                             <h3>{% trans 'Ваши темы:' %}</h3>
                             {{ form.th.label_tag }}
                             {{ form.th }}
-                            <ul id="selected_themes" class="selected"></ul>
+                            <ul id="selected_themes" class="selected selected_themes"></ul>
-                            <ul id="selected_tags" class="selected"></ul>
+{#                            <ul id="selected_tags" class="selected"></ul>#}
                             <a href="#search-modal" class="modal_trigger themes_trigger">{% trans 'Уточнить темы' %}</a>
 
                             {# <h3>{% trans 'Теги' %}</h3> #}

templates/client/popups/mailing_settings_countries.html

@@ -34,10 +34,5 @@
 
             <div class="wait-ajax"></div>
         </div>
-
-        <div class="buttons_block">
-            <button class="modal-approve" type="submit">{% trans 'Выбрать' %}</button>
-            <button class="modal-clear" type="submit">{% trans 'Очистить' %}</button>
-        </div>
 	</div>
 </div>

templates/client/popups/new_themes.html

@@ -9,6 +9,14 @@
 
     <div class="body">
         <div class="themes_wrapper">
+            <div class="autocomplete_block">
+                {# TODO: Поправить data-url #}
+                <input type="text" id="autocomplete_themes" class="autocomplete_input" data-url="/search-form/autocomplete/" data-form="subj" name="term" placeholder="{% trans 'Введите или выберите тематику из списка' %}">
+                <ul id="autocomplete_themes_results" class="autocomplete_themes_results"></ul>
+            </div>
+
+            <ul class="selected_values selected selected_themes"></ul>
+
             <div class="scroll-container">
                 <div class="scroll-content">
                     <div class="topics-list">
@@ -31,10 +39,5 @@
 
             <div class="wait-ajax"></div>
         </div>
-
-        <div class="buttons_block">
-            <button class="modal-approve" type="button">{% trans 'Выбрать' %}</button>
-            <button class="modal-clear" type="button">{% trans 'Очистить' %}</button>
-        </div>
     </div>
 </div>

templates/client/popups/russia_cities.html

@@ -29,10 +29,5 @@
 
             <div class="wait-ajax" style=""></div>
         </div>
-
-        <div class="buttons_block">
-            <button class="modal-approve" type="button">{% trans 'Выбрать' %}</button>
-            <button class="modal-clear" type="button">{% trans 'Очистить' %}</button>
-        </div>
     </div>
 </div>

templates/client/popups/theme.html

@@ -31,7 +31,7 @@
 							<div class="wait-ajax absolute" style="display: none;"><img src="/static/client/img/ajax-loader.gif" alt=""></div>
 						<div class="c-select-box topics">
 							<div class="csb-title">
-                                <input type="text" class="filter-input topicAC" id="{{filterInputId}}" data-form="subj" autocomplete="on" placeholder="Введите или выберите тематику из списка" />
+                                <input type="text" class="filter-input topicAC" id="{{filterInputId}}" data-form="subj" autocomplete="on" placeholder="{% trans 'Введите или выберите тематику из списка' %}" />
 								<!--<div class="ac-custom-message" id="ac_animes_t"><span>Эта тематика уже выбрана.</span></div>-->
 								<div id="{{autoCompleteId}}" ></div>