Пересечение категорий: различия между версиями
Материал из ВикиВоины
Строка 224: | Строка 224: | ||
list-style: none; | list-style: none; | ||
max-height: 285px; | max-height: 285px; | ||
− | margin: -0. | + | margin: -0.6rem 0 0 0!important; |
overflow: hidden auto; | overflow: hidden auto; | ||
width: 30vw; | width: 30vw; |
Версия 16:08, 4 мая 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.next('.oo-ui-indicatorElement-indicator').remove(); $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); // Задержка в миллисекундах if (!$input.next('.oo-ui-indicatorElement-indicator').length) { var $clearIndicator = $('').addClass('oo-ui-indicatorElement-indicator oo-ui-indicator-clear'); $input.after($clearIndicator);
// Добавляем обработчик клика для очистки введенного текста $clearIndicator.on('click', function() { $input.val(); // Очищаем значение инпута $input.next('.oo-ui-indicatorElement-indicator').remove(); // Удаляем элемент очистки $input.focus(); // Переводим фокус обратно на инпут }); } }); };
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', function(event) { if (!$(event.target).closest('.ui-autocomplete').length) { $('ul.ui-autocomplete').remove(); } });
$(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.6rem 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: 35px; 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 {
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;
}
.oo-ui-indicatorElement-indicator {
display: block; width: 16px; height: 16px; background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclear%3C/title%3E%3Cpath d=%22M10 0a10 10 0 1010 10A10 10 0 0010 0zm5.66 14.24l-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z%22/%3E%3C/svg%3E"); background-size: 100%; background-repeat: no-repeat; cursor: pointer; position: absolute; top: 18px; right: 8px;
}
@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>