From 1619efbcd466c7b1f65ac8facf83deabc7bded96 Mon Sep 17 00:00:00 2001 From: ya_dim4ik Date: Thu, 19 Jan 2017 12:43:28 +0200 Subject: [PATCH] mailind settings add autocomplete to themes --- requirements.txt | 2 +- static/mailing_settings/css/main.css | 68 +++- static/mailing_settings/js/main.js | 309 +++++++++++------- .../client/accounts/mailing_settings.html | 4 +- .../popups/mailing_settings_countries.html | 5 - templates/client/popups/new_themes.html | 13 +- templates/client/popups/russia_cities.html | 5 - templates/client/popups/theme.html | 2 +- 8 files changed, 275 insertions(+), 133 deletions(-) diff --git a/requirements.txt b/requirements.txt index 7739abbe..7dbaf522 100644 --- a/requirements.txt +++ b/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 diff --git a/static/mailing_settings/css/main.css b/static/mailing_settings/css/main.css index 5f285b53..ff95a8d7 100644 --- a/static/mailing_settings/css/main.css +++ b/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; @@ -694,4 +698,66 @@ h3{ border-radius: 3px; background-color: #fff; padding: 15px; -} \ No newline at end of file +} + +.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; +} diff --git a/static/mailing_settings/js/main.js b/static/mailing_settings/js/main.js index 6066989c..78d00d55 100644 --- a/static/mailing_settings/js/main.js +++ b/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_tags = $('#selected_tags'), - user_choice = { - th: {}, - tg: {} - }, + $selected_themes = $('.selected_themes'), + timer, + tags_ids = [], renderSublistItem = function (data) { return '
  • ' + @@ -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 '
  • ' + - '' + - text + + '' + + obj['text'] + '×' + '
    • ' + }, + + 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 += '
  • ' + obj.text + ' (' + obj.cat + ')
    • ' + }); + + $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())); - $selected_themes.append($theme); + $themes_modal.find('.selected_values').show(); }); - // Записываем данные в 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); + tags_ids.push($(this).val() * 1); + + 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(); }); - // Подтверждение выбранных тем - $themes_modal.on('click', '.modal-approve', function (e) { - e.preventDefault(); + // Input автокомплита + $autocomplete.on('keyup', function () { + $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])); - $selected_themes.append($theme); - } + // Выбор из автокомплита + $autocomplete_results.on('click', 'li', function () { + 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])); - $selected_tags.append($tag); - } + // Проверяем или такой пункт уже выбран + if ($selected_themes.find('[value=' + item['id'] + ']').length == 0){ + 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) { - 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(); - }; + 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); + } + } + } + $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(), + name: $input.attr('name') + }; - $(this).parent('li').remove(); - 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); + $('.modal_checkboxes').find('input[name="' + item['name'] + '"][value="' + item['id'] + '"]').prop('checked', false); - // Удаление выбранного тега - $selected_tags.find('a').on('click', function (event) { - 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 '
  • ' + '' + text + '×' + '
    • ' + }, + + 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()]; - } - }); - - // Подтверждение выбранных городов - $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); + $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').remove(); } - $.fancybox.close(); - sendForm(); + renderSelectedCities(); }); @@ -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 '
  • ' + '' + text + @@ -298,6 +385,24 @@ function sendForm () { '
    • ' }, + 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()]; - } - }); - - - // Подтверждение выбранных тем - $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); + $('#id_' + $checkbox.attr('name')).find('option[value="' + $checkbox.val() + '"]').removeAttr('selected'); } - 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(); + renderSelectedCountries(); }); + // Удаление выбранного континента $selected_areas.on('click', 'a', function (event) { event.preventDefault(); @@ -404,6 +485,8 @@ function sendForm () { }); })(); + + $(function () { $('.modal_trigger').fancybox({ padding: 0 diff --git a/templates/client/accounts/mailing_settings.html b/templates/client/accounts/mailing_settings.html index d9743479..68b67186 100644 --- a/templates/client/accounts/mailing_settings.html +++ b/templates/client/accounts/mailing_settings.html @@ -36,8 +36,8 @@

    {% trans 'Ваши темы:' %}

    {{ form.th.label_tag }} {{ form.th }} - - + +{# #} {% trans 'Уточнить темы' %} {#

    {% trans 'Теги' %}

    #} diff --git a/templates/client/popups/mailing_settings_countries.html b/templates/client/popups/mailing_settings_countries.html index eb6aafe7..4f51a15f 100644 --- a/templates/client/popups/mailing_settings_countries.html +++ b/templates/client/popups/mailing_settings_countries.html @@ -34,10 +34,5 @@
    - -
    - - -
    diff --git a/templates/client/popups/new_themes.html b/templates/client/popups/new_themes.html index 2712602a..08c167ae 100644 --- a/templates/client/popups/new_themes.html +++ b/templates/client/popups/new_themes.html @@ -9,6 +9,14 @@
    +
    + {# TODO: Поправить data-url #} + +
      +
      + +
        +
        @@ -31,10 +39,5 @@
        - -
        - - -
        diff --git a/templates/client/popups/russia_cities.html b/templates/client/popups/russia_cities.html index 13466aad..3e0b043d 100644 --- a/templates/client/popups/russia_cities.html +++ b/templates/client/popups/russia_cities.html @@ -29,10 +29,5 @@
        - -
        - - -
        diff --git a/templates/client/popups/theme.html b/templates/client/popups/theme.html index cfccb5b6..641c74a0 100644 --- a/templates/client/popups/theme.html +++ b/templates/client/popups/theme.html @@ -31,7 +31,7 @@
        - +