Пересечение категорий: различия между версиями
Материал из ВикиВоины
Строка 48: | Строка 48: | ||
if (data.query && data.query.categorymembers) { | if (data.query && data.query.categorymembers) { | ||
var categories = data.query.categorymembers.map(function(category) { | var categories = data.query.categorymembers.map(function(category) { | ||
− | var label = category.title; | + | var label = category.title.replace('Категория:', ''); |
var highlightedLabel = label ? label.replace(new RegExp('(' + searchTerm + ')', 'ig'), '<strong>$1</strong>') : ''; | var highlightedLabel = label ? label.replace(new RegExp('(' + searchTerm + ')', 'ig'), '<strong>$1</strong>') : ''; | ||
return { | return { |
Версия 19:37, 2 мая 2024
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<input type="text" id="category-input-1" placeholder="Категория №1">
<input type="text" id="category-input-2" placeholder="Категория №2">
<button id="add-button" title="Добавить категорию">+</button>
<button id="apply-button">Поиск</button> <textarea id="dpl-code" style="display: none;"></textarea>
<script> $(document).ready(function () {
var delayTimer; var setupAutocomplete = function(inputId) { $("#" + inputId).on('input', function() { var $input = $(this); clearTimeout(delayTimer); var searchTerm = $input.val().trim().toLowerCase(); if (searchTerm === ) { $input.closest('.input-container').find('ul.ui-autocomplete').remove(); return; } var apiUrl = mw.config.get("wgScriptPath") + "/api.php?action=query&format=json&list=categorymembers&cmtitle=Category:Статьи&cmtype=subcat&cmlimit=max"; var $container = $input.closest('.input-container'); var $ul = $container.find('ul.ui-autocomplete'); if (!$ul.length) {
$ul = $('
- ').addClass('ui-autocomplete').appendTo($container);
}
$container.addClass('loading-input');
delayTimer = setTimeout(function() {
$.getJSON(apiUrl, {searchTerm: searchTerm}, function(data) {
$container.removeClass('loading-input');
if (data.query && data.query.categorymembers) {
var categories = data.query.categorymembers.map(function(category) {
var label = category.title.replace('Категория:', );
var highlightedLabel = label ? label.replace(new RegExp('(' + searchTerm + ')', 'ig'), '$1') : ;
return {
value: label,
label: highlightedLabel
};
});
var filteredCategories = categories.filter(function(category) {
return category.label.toLowerCase().indexOf(searchTerm) !== -1;
});
$ul.empty();
$.each(filteredCategories, function(index, item) {
var $li = $('
- ').attr('aria-label', item.value).data('value', item.value).append($('').html(item.label));
$ul.append($li); }); } }); }, 500); // Задержка в миллисекундах }); };
function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
setupAutocomplete("category-input-1"); setupAutocomplete("category-input-2"); setupAutocomplete("category-input-3"); setupAutocomplete("category-input-4");
$(document).on('click', '.input-container ul.ui-autocomplete li', function() { var valueWithoutPrefix = $(this).data('value').replace('Категория:', ); $(this).closest('.input-container').find('input').val(valueWithoutPrefix).focus(); $(this).closest('.input-container').find('ul.ui-autocomplete').remove(); });
$(document).on('input', '.input-container input', function() { var $input = $(this); if ($input.val().trim() === ) { $input.closest('.input-container').removeClass('loading-input'); } });
$("#add-button").on("click", function() { var numVisibleInputs = $(".input-container:visible").length; if (numVisibleInputs < 4) { $(".input-container:hidden").first().show(); } if ($(".input-container:visible").length === 4) { $("#add-button").hide(); } });
$(document).on("click", ".input-container button.remove-button", function() { var parentContainer = $(this).closest('.input-container'); parentContainer.find('input').val(); parentContainer.hide(); $("#add-button").show(); });
$("#apply-button").on("click", function() { var category1 = $("#category-input-1").val().replace('Категория:', ); var category2 = $("#category-input-2").val().replace('Категория:', ); var category3 = $("#category-input-3").val().replace('Категория:', ); var category4 = $("#category-input-4").val().replace('Категория:', ); var dplCode = "Ошибка. Вы должны включить хотя бы одну категорию или указать пространство имён!";
$("#dpl-container").html("Загрузка...");var apiUrl = mw.config.get("wgScriptPath") + "/api.php?action=parse&format=json&text=" + encodeURIComponent(dplCode); $.getJSON(apiUrl, function(data) { if (data.parse && data.parse.text) { $("#dpl-container").html(data.parse.text["*"]);
$("#dpl-container .gallerybox").each(function() { if (!$(this).find("img").length) { $(this).hide(); } });
// После обновления содержимого обновляем URL updateUrlParams(); } });
});
function updateUrlParams() {
var params = []; $(".input-container input").each(function(index) { var category = $(this).val().replace('Категория:', );
// Заменяем все пробелы на нижнее подчеркивание category = category.replace(/\s/g, '_');
if (category.trim() !== ) { params.push("category" + (index + 1) + "=" + encodeURIComponent(category)); } }); var newUrl = "https://wikiwarriors.org/wiki/Пересечение_категорий"; if (params.length > 0) { newUrl += "?" + params.join("&"); } window.history.replaceState({}, , newUrl);
}
function readUrlParams() {
var urlParams = new URLSearchParams(window.location.search); $(".input-container input").each(function(index) { var category = urlParams.get("category" + (index + 1)); if (category) { // Заменяем нижнее подчеркивание обратно на пробелы только при отображении category = category.replace(/_/g, ' ');
$(this).val(category).focus(); } });
// Проверяем наличие параметров category3 и category4 в URL var category3 = urlParams.get("category3"); var category4 = urlParams.get("category4");
// Проверяем, нужно ли показать или скрыть input-container-3 if (category3) { $(".input-container-3").show(); } else { $(".input-container-3").hide(); }
// Проверяем, нужно ли показать или скрыть input-container-4 if (category4) { $(".input-container-4").show(); } else { $(".input-container-4").hide(); }
}
readUrlParams();
}); </script> <style> .ui-autocomplete { position: absolute;
background: white; list-style: none; max-height: 285px; margin: -0.5rem 0 0 0!important; overflow: hidden auto; width: 30vw; z-index: 2;
}
ul.ui-autocomplete li {
padding: 5px;
}
ul.ui-autocomplete li:hover {
cursor: pointer; background: #8ac9ff;
}
.loading-input {
position: relative;
}
.loading-input::after {
content: ""; background: url(https://wikiwarriors.org/mediawiki/skins/pivot/assets/stylesheets/indicator.gif); position: absolute; top: 35%; right: 10px; width: 16px; height: 16px;
}
.category-intersection-wrap { text-align: center; background: #2786c254; padding: 20px; }
.input-containers-wrap {
display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;
}
input#category-input-1, input#category-input-2, input#category-input-3, input#category-input-4 { width: 30vw; display: block; }
.input-container-2, .input-container-4 { margin-left: 10px; }
input#category-input-1::placeholder, input#category-input-2::placeholder, input#category-input-3::placeholder, input#category-input-4::placeholder { color: #9f9a9a; opacity: 1; }
.gallerytext > p { font-size: 1px !important; color: transparent !important; line-height: 1% !important } .gallerytext > p a { font-size: initial !important; line-height: initial !important; color: #3a4247 !important; }
.gallerytext p { text-align: center!important; }
.gallery { display: flex;
flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; align-items: baseline;
}
ul.gallery {
list-style-type: none;
}
.thumb { display: flex; }
.gallerybox { word-break: break-word; }
.loading {
font-size: 20px; text-align: center;
}
.input-container-3, .input-container-4 {
position: relative;
}
- add-button {
margin-left: 0.5em;
}
- add-button:focus {
background-color: #2786c2;
}
.remove-button {
background-color: #c22727; position: absolute; bottom: -40%; right: 10%; font-size: small;
}
@media only screen and (max-width:640px) {
.category-intersection-desc {
height: 50vw;
overflow-x: auto;
}
.category-intersection-desc p { font-size: small;
}
input#category-input-1, input#category-input-2, input#category-input-3, input#category-input-4 {
width: 80vw; display: block;
} .input-container-2, .input-container-4 {
margin-left: 0px;
} .intersection-navigation { margin-top: -50px; } .input-container-4 { margin-top: 15px; } .ui-autocomplete { width: 80vw!important; } .input-containers-wrap { position: relative; } #add-button { position: absolute; bottom: -30px; right: 5%; } .remove-button { left: 5%; right: auto; bottom: -43%; }
}
@media only screen and (max-width:380px) {
#dpl-container { width: 100vw; margin-left: -11%; }
} </style>