Выпадающий список похожих тем при создании темы.

автор **Феникс** Январь 30th 2021, 20:23

Скрипт поможет на форумах с тематикой помощи. Ведь мало кто из пользователей среди обилия информации ищет вероятный ответ на свой вопрос.

Выпадающий список похожих тем при создании темы. 0426139001612026743

Выпадающий список похожих тем при создании темы. 0426139001612026743

(анимашка)

Панель Управления

Выпадающий список похожих тем при создании темы. Arrow

Модули

HTML & JAVASCRIPT -

Управление кодами JavaScript

Код:: /* Следующий код зависит от DOM. Это может не сработать, если вы измените структуру публикации в шаблонах форума */ var FLRX = FLRX || {}; FLRX.similarTopics = (function () { 'use strict'; let settings = { // настройки по умолчанию forums : [], searchIn : false, maxTopics : 5, wordMinLength: 4, autocomplete: false, // отключить автозаполнение браузера от ввода темы /* Advanced settings */ excludedCharacters : new RegExp(/[.,\/#!$%\^&\*¿?!¡;:{}\\=\-_`~"«“‘’”»()\[\]]/, 'g'), // Игнорируемые символы из заголовка темы. dom : { // настройки по умолчанию (должны работать, если оставить их такими с неизмененными шаблонами) /* Страница поиска */ topicscontainer : '.forabg', topic : 'dd.dterm', infocontainer : '.span-tab', titlelink : '.topictitle', userlink : 'a[href^="/u"]', forumlink : 'a[href^="/f"]', topicicon : 'dl.icon', /* структура */ visible : 'visible', /* страница публикации */ titleinput : '#postingbox input[name="subject"]', inputcontainer : 'dl', /* созданные элементы */ maincontainer : $('<div />', { id : 'similarTopics' }), similartopiccont : $('<div />', { class : 'topic-container' }), loadingelm : $('<div />', { class : 'spinner' }) .append($('<div/>', { class:'double-bounce1' })) .append($('<div/>', { class:'double-bounce2' })), topicelmcont : $('<div />', { class: 'topic' }), topicelmtitle : $('<div />', { class: 'topic-title' }), topicdatacont : $('<div />', { class: 'topic-data' }), topicflags : $('<div />', { class: 'topic-flags' }), topiciconcont : $('<div />', { class: 'topic-icon' }), topicstatus : $('<div />', { class: 'topic-status' }), topicelminfo : $('<div />', { class: 'topic-info' }), topicauthor : $('<span />', { class: 'topic-author', text: 'автор ' }), topicforum : $('<span />', { class: 'topic-forum', text: ' в разделе ' }), similarstitle : $('<h4 />', { class: 'similarTopics-title', text: 'Похожие темы ' }), }, }, structure = {}, request, debounce = function(cb, delay) { let timeout; return function(...a) { clearTimeout(timeout); timeout = setTimeout( _ => { timeout = null; cb.call(this, ...a); }, delay); }; }, /* преобразует URI в кодировке UTF8 в Windows-1252 */ sanitizeURI = function(uri) { /* По какой-то причине Forumotion использует кодировку Windows-1252 в поисковых URI. Этот обходной путь исправит только проблемы с испанскими символами */ return uri.replace(/%C3%91/g, '%D1') // Ñ .replace(/%C3%B1/g, '%F1') // ñ .replace(/%C3%81/g, '%C1') // Á .replace(/%C3%89/g, '%C9') // É .replace(/%C3%8D/g, '%CD') // Í .replace(/%C3%93/g, '%D3') // Ó .replace(/%C3%9A/g, '%DA') // Ú .replace(/%C3%9C/g, '%DC') // Ü .replace(/%C3%A1/g, '%E1') // á .replace(/%C3%A9/g, '%E9') // é .replace(/%C3%AD/g, '%ED') // í .replace(/%C3%B3/g, '%F3') // ó .replace(/%C3%BA/g, '%FA') // ú .replace(/%C3%BC/g, '%FC'); // ü }, /* возвращает массив объектов (представление тем) из URL-адреса поиска синхронно */ searchTopics = function(url, cb) { $.ajax({ url : url, }).done(function(data) { let relatedTopics = [], $forabg = $(settings.dom.topicscontainer, data); if($forabg.length) { $forabg.find(settings.dom.topic).slice(0, settings.maxTopics).each(function() { let $this = $(this), $topictitle = $this.find(settings.dom.titlelink), $spantab = $this.find(settings.dom.infocontainer), $forumlink = $spantab.find(settings.dom.forumlink), $userlink = $spantab.find(settings.dom.userlink), $topicicon = $this.closest(settings.dom.topicicon); relatedTopics.push({ title : $topictitle.text().trim(), url : $topictitle.attr('href'), icon : $this.css('background-image').slice(4, -1), status : $topicicon.css('background-image').length ? $topicicon.css('background-image').slice(4, -1) : false, forum : { name : $forumlink.text(), url : $forumlink.attr('href'), }, user : { name : $userlink.text(), url : $userlink.attr('href'), }, }); }); } cb.call(this, relatedTopics); }).fail(_ => {let up; throw up || false}); }, /* возвращает массив со словами строки, удовлетворяющими условиям settings.excluded символов */ getWords = function(str) { return str.trim().replace(settings.excludedCharacters, '').split(' ').filter(elm => elm.length >= settings.wordMinLength); }, /* обновляет структуру DOM подобных тем с теми, что находятся во входном массиве */ updateDOM = function(arr) { structure.topiccontainer.empty(); if(arr.length) { let docfrag = document.createDocumentFragment(); $.each(arr, function(index, topic) { let $topicTitle = settings.dom.topicelmtitle.clone(), $topicContainer = settings.dom.topicelmcont.clone(), $topicInfo = settings.dom.topicelminfo.clone(), $topicauthor = settings.dom.topicauthor.clone(), $topicstatus = settings.dom.topicstatus.clone(), $topicforum = settings.dom.topicforum.clone(), $topicflags = settings.dom.topicflags.clone(), $topicdata = settings.dom.topicdatacont.clone(), $topicicon = settings.dom.topiciconcont.clone(), /* создание ссылок */ $topicLink = $('<a />', { href: topic.url, text: topic.title }), $forumlink = $('<a />', { href: topic.forum.url, text: topic.forum.name }), $authorlink = $('<a />', { href: topic.user.url, text: topic.user.name }); $topicicon.css('background-image', `url('${ topic.icon }')`); topic.status && $topicstatus.css('background-image', `url('${ topic.status }')`); $topicauthor.append($authorlink); $topicforum.append($forumlink); $topicTitle.append($topicLink); $topicInfo.append($topicauthor, $topicforum); $topicdata.append($topicTitle, $topicInfo); $topicflags.append($topicstatus, $topicicon); $topicContainer.append($topicflags, $topicdata); docfrag.append($topicContainer[0]); }); structure.topiccontainer[0].appendChild(docfrag); } else structure.maincontainer.removeClass(settings.dom.visible); }, setLoadingStatus = function() { structure.loadingcontainer.addClass(settings.dom.visible); structure.recentstitle.removeClass(settings.dom.visible); structure.topiccontainer.removeClass(settings.dom.visible); }, topicsRetrieved = function (){ structure.loadingcontainer.removeClass(settings.dom.visible); structure.recentstitle.addClass(settings.dom.visible); structure.topiccontainer.addClass(settings.dom.visible); }, searchAlgorithm = function(words, cb) { let params = { search_where : settings.searchIn || `f${/\?f=(\d+)/.exec(location.search)[1]}`, show_results : 'topics', sort_by : 0, sort_dir : 'DESC', search_terms : 'all', search_keywords : words.join(' '), }; searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) { let relatedTopics = arr; if(relatedTopics.length < settings.maxTopics) { params.search_terms = 'any'; searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) { let searchAnyWord = arr, neededElms = settings.maxTopics - relatedTopics.length; searchAnyWord = searchAnyWord.filter(elm => relatedTopics.find(e => e.url == elm.url) === undefined); // Игнорировать дубликаты relatedTopics = [...relatedTopics, ...searchAnyWord.slice(0, neededElms)]; cb.call(this, relatedTopics); }); } cb.call(this, relatedTopics); }); }, /* основная функция */ searchSimilarTopics = function($title) { let words = getWords($title.val()); if(words.length == 0) return; // в первый раз, если он был спрятан structure.maincontainer.addClass(settings.dom.visible); setLoadingStatus(); searchAlgorithm(words, function(arr) { updateDOM(arr); topicsRetrieved(); }); }, generateStructure = function($title) { let $similarTopics = settings.dom.maincontainer.clone(), $spinner = settings.dom.loadingelm.clone(), $topicsContainer = settings.dom.similartopiccont.clone(), $recentsTitle = settings.dom.similarstitle.clone(); structure = { maincontainer : $similarTopics, loadingcontainer : $spinner, topiccontainer : $topicsContainer, recentstitle : $recentsTitle, }; $similarTopics.append($spinner, $recentsTitle, $topicsContainer); $title.closest(settings.dom.inputcontainer).after($similarTopics); }, init = function(options) { $.extend(true, settings, options); let timeout, $title = $(settings.dom.titleinput); if(!settings.autocomplete) $title.attr('autocomplete', 'off'); // добавьте базовую структуру dom (по умолчанию она должна быть скрыта с помощью CSS) generateStructure($title); $title.on('keypress', debounce(function(e) { if(e.which !== 0) searchSimilarTopics($title); }, 500)); }; /* API :-) */ return { init : init, }; })(); !function() { const settings = { forums : true, // Идентификаторы форумов (разделенные запятой), где будет включена функция "Похожие темы". Установите значение true, чтобы включить эту функцию везде (не рекомендуется). searchIn : '-1', // Где будут проходить поиски. Используйте -1 для поиска везде. Если он не установлен, он будет искать форум, на котором создается тема maxTopics : 5, // Максимальное количество показанных тем }; location.pathname == '/post' && location.search.indexOf('&mode=newtopic') > -1 && (settings.forums === true || settings.forums.some(id => location.search.indexOf(`?f=${id}`) > -1)) && $(function() { FLRX.similarTopics.init(settings); }); }();

Панель Управления

Оформление

Цвета

Каскадная таблица стилей CSS

Код:: #similarTopics{width:500px;background:#E1EBF2;padding:5px 10px;border-radius:5px;margin:5px 0 0 10em} #similarTopics,#similarTopics .spinner,#similarTopics .topic-container,#similarTopics .similarTopics-title{display:none} #similarTopics.visible,#similarTopics .spinner.visible,#similarTopics .similarTopics-title.visible,#similarTopics .topic-container.visible{display:block} #similarTopics .topic{display:flex;border-bottom:1px solid #fff;padding:5px 0;margin:5px 0} #similarTopics .topic:last-child{border-bottom:none} #similarTopics .topic-data{flex:1} #similarTopics .topic-flags{align-items:center;margin-right:10px;position:relative} #similarTopics .topic-icon{position:absolute;top:0;left:0;bottom:0;right:0;background:transparent 50% 50% no-repeat} #similarTopics .similarTopics-title{border-bottom:1px solid #0076b1;color:#0076b1;font-size:.9em;margin:.5em 0;text-transform:uppercase} #similarTopics .topic-status{width:27px;height:27px;background:transparent 0 0 no-repeat}

автор **Феникс** Январь 30th 2021, 20:36

О настройках:
В конце скрипта (291 строка) найдите фрагмент

Код:: const settings = { forums : true, // Идентификаторы форумов

Если вы хотите ограничить действие скрипта на определенных форумах, замените true] на идентификаторы желаемых форумов, где скрипт будет работать на [1,2,3,4,5,6,7], где 1,2,3,3,5,6,7 и есть идентификаторы. Как его найти?? Посмотрите на ссылку форума /f2-forum - это форум с идентификатором 2.

Если вы вносили изменения в шаблоны, велика вероятность, что скрипт не заработает.

Выпадающий список похожих тем при создании темы.

Выпадающий список похожих тем при создании темы.

Re: Выпадающий список похожих тем при создании темы.