Widget:Пересечение категорий

<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">

 <input type="text" id="category-input-3" placeholder="Категория №3">
 <button class="remove-button" title="Убрать категорию">Убрать</button>

 <input type="text" id="category-input-4" placeholder="Категория №4">
 <button class="remove-button" title="Убрать категорию">Убрать</button>

<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;
         border-top: 1px #cccccc solid;
  

  }

  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;
  

  }

  1. add-button {

   margin-left: 0.5em;
  

  }

  1. 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;
  

  }

  .oo-ui-indicatorElement-indicator:hover {

   opacity: 0.6;
  

  }

  @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>