Widget:NewsSearch: Difference between revisions

From TwogPedia
mNo edit summary
mNo edit summary
Line 23: Line 23:
   parameters += '|games=' + games.join(',');
   parameters += '|games=' + games.join(',');
   }
   }
  var tag = document.getElementById("tag").value
  if ( tag.length > 0 ) parameters += '|tag=' + tag
    
    
   var contentContainer = document.getElementById("dynamicContent");
   var contentContainer = document.getElementById("news-search-container");
    
    
   // Use the selected template as a parameter in the parser function
   // Use the selected template as a parameter in the parser function
   var parserFunction = "{{NewsSearch" + parameters + "}}";
   var parserFunction = "{{NewsSearch" + parameters + "}}";
 
   // Replace the content in the dynamic content container with the parsed template
   // Replace the content in the dynamic content container with the parsed template
   $.get(mw.util.wikiScript('api'), { action: 'parse', format: 'json', text: parserFunction }, function(data) {
   $.get(mw.util.wikiScript('api'), { action: 'parse', format: 'json', text: parserFunction }, function(data) {
     var parsedContent = data.parse.text['*'];
     var parsedContent = data.parse.text['*'];
     contentContainer.innerHTML = parsedContent;
 
     var content = document.createElement('div')
    content.innerHTML = parsedContent
 
    var loadMore = document.getElementById('loadMore')
 
    if ( content.querySelector('.mw-parser-output .news-latest-item') ) {
      contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;
 
      // If less than 10 items found in search, then hide load more button
      if ( contentContainer.querySelectorAll('.news-latest-item').length < 10 ) loadMore.style.display = 'none'
      else if ( loadMore.style.display === 'none' ) loadMore.style.display = 'block'
      let noEntries = document.querySelector('.no-entries')
      if ( noEntries ) noEntries.remove()
     
    } else {
      contentContainer.innerHTML = 'No news found'
      if (loadMore ) loadMore.style.display = 'none';
    }
 
});
});
}
}
Line 53: Line 76:
   }
   }
}
}
</script>
</script>
<div style='display: flex; column-gap: 0.5rem; align-content: center;'>
<div style='display: flex; column-gap: 0.5rem; align-content: center; margin-bottom: 2rem'>
<div>
<div>
<div>Category: </div>
<div>Category: </div>
<input type="text" id="searchCategory" oninput="searchCategories('Category')" placeholder="Search categories">
<input type="text" id="searchCategory" oninput="searchCategories('Category')" placeholder="Search categories">
<div class='scrollable-Category' style="display: flex; flex-direction: column; max-height: 200px; overflow-y: auto;">
<div class='scrollable-Category' style="display: flex; flex-direction: column; max-height: 200px; overflow-y: auto;">
<label>
    <label>
      <input type="checkbox" name="category" value="General"> General
      <input type="checkbox" name="category" value="Transfer Market" <!--{if $cat|escape:'html' eq 'Transfer_Market'}-->checked<!--{/if}--> /> Transfer Market
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Transfer Market"> Transfer Market
      <input type="checkbox" name="category" value="Drama" <!--{if $cat|escape:'html' eq 'Drama'}-->checked<!--{/if}--> /> Drama
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Drama"> Drama
      <input type="checkbox" name="category" value="Business" <!--{if $cat|escape:'html' eq 'Business'}-->checked<!--{/if}-->> Business
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Business"> Business
      <input type="checkbox" name="category" value="Companies" <!--{if $cat|escape:'html' eq 'Companies'}-->checked<!--{/if}-->> Companies
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Companies"> Companies
      <input type="checkbox" name="category" value="Hires" <!--{if $cat|escape:'html' eq 'Hires'}-->checked<!--{/if}-->> Hires
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Hires"> Hires
      <input type="checkbox" name="category" value="Investments" <!--{if $cat|escape:'html' eq 'Investments'}-->checked<!--{/if}-->> Investments
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Investments"> Investments
      <input type="checkbox" name="category" value="Mergers and Acquisitions" <!--{if $cat|escape:'html' eq 'Mergers_and_Acquisitions'}-->checked<!--{/if}-->> Mergers and Acquisitions
    </label>
    </label>
    <label>
    <label>
      <input type="checkbox" name="category" value="Deals"> Deals
      <input type="checkbox" name="category" value="Sponsorship" <!--{if $cat|escape:'html' eq 'Sponsorship'}-->checked<!--{/if}-->> Sponsorship
    </label>
    </label>
    <label>
<label>
      <input type="checkbox" name="category" value="Sponsorship"> Sponsorship
      <input type="checkbox" name="category" value="More" <!--{if $cat|escape:'html' eq 'More'}-->checked<!--{/if}-->> More
    </label>
    </label>
</div>
</div>
Line 157: Line 181:
</div>
</div>
</div>
</div>
    <div>
      <div>Tag</div>
      <input type="text" id="tag" value="<!--{$tag|escape:'html'}-->">
    </div>
   
<button style="align-self:center;" onclick="updateTemplate()">Search</button>
<button style="align-self:center;" onclick="updateTemplate()">Search</button>
</div>
</div>
<div id="dynamicContent"></div>

Revision as of 16:15, 15 February 2024

<script> function getCheckedBoxes(type) {

 var checkboxes = document.querySelectorAll('input[name="' + type + '"]');
 var checkedCategories = [];
 for (var i = 0; i < checkboxes.length; i++) {
   var checkbox = checkboxes[i];
   if (checkbox.checked) {
     checkedCategories.push(checkbox.value);
   }
 }
 return checkedCategories;
 // Do something with the checkedCategories array

}

function updateTemplate() {

 var parameters = ;
 var categories = getCheckedBoxes('category');
 if ( categories.length ) {
 	parameters += '|categories=' + categories.join(',');
 }
 var games = getCheckedBoxes('game');
 if ( games.length ) {
 	parameters += '|games=' + games.join(',');
 }
 var tag = document.getElementById("tag").value
 if ( tag.length > 0 ) parameters += '|tag=' + tag
 
 var contentContainer = document.getElementById("news-search-container");
 
 // Use the selected template as a parameter in the parser function
 var parserFunction = "Template:NewsSearch" + parameters + "";
 // Replace the content in the dynamic content container with the parsed template
  $.get(mw.util.wikiScript('api'), { action: 'parse', format: 'json', text: parserFunction }, function(data) {
   var parsedContent = data.parse.text['*'];
   var content = document.createElement('div')
   content.innerHTML = parsedContent
   var loadMore = document.getElementById('loadMore')
   if ( content.querySelector('.mw-parser-output .news-latest-item') ) {
      contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;
      // If less than 10 items found in search, then hide load more button
      if ( contentContainer.querySelectorAll('.news-latest-item').length < 10 ) loadMore.style.display = 'none'
      else if ( loadMore.style.display === 'none' ) loadMore.style.display = 'block'
      let noEntries = document.querySelector('.no-entries')
      if ( noEntries ) noEntries.remove()
      
   } else {
      contentContainer.innerHTML = 'No news found'
      if (loadMore ) loadMore.style.display = 'none';
   }

}); }

function searchCategories(type) {

 var searchInput = document.getElementById('search' + type).value.toLowerCase();
 // Get all the checkbox labels
 var labels = document.querySelectorAll('.scrollable-' + type + ' label');
 // Loop through the labels and hide/show checkboxes based on the search query
 for (var i = 0; i < labels.length; i++) {
   var label = labels[i];
   var labelText = label.textContent.toLowerCase();
   if (labelText.indexOf(searchInput) === -1) {
     label.style.display = 'none';
   } else {
     label.style.display = 'inline-block';
   }
 }

}

</script>

Category:

<input type="text" id="searchCategory" oninput="searchCategories('Category')" placeholder="Search categories">

<label> <input type="checkbox" name="category" value="Transfer Market" checked /> Transfer Market </label> <label> <input type="checkbox" name="category" value="Drama" checked /> Drama </label> <label> <input type="checkbox" name="category" value="Business" checked> Business </label> <label> <input type="checkbox" name="category" value="Companies" checked> Companies </label> <label> <input type="checkbox" name="category" value="Hires" checked> Hires </label> <label> <input type="checkbox" name="category" value="Investments" checked> Investments </label> <label> <input type="checkbox" name="category" value="Mergers and Acquisitions" checked> Mergers and Acquisitions </label> <label> <input type="checkbox" name="category" value="Sponsorship" checked> Sponsorship </label> <label> <input type="checkbox" name="category" value="More" checked> More </label>

Game:

<input type="text" id="searchGame" oninput="searchCategories('Game')" placeholder="Search categories">

<label> <input type="checkbox" name="game" value="Age of Empires"> Age of Empires </label> <label> <input type="checkbox" name="game" value="Apex Legends"> Apex Legends </label> <label> <input type="checkbox" name="game" value="Brawl Stars"> Brawl Stars </label> <label> <input type="checkbox" name="game" value="Call of Duty"> Call of Duty </label> <label> <input type="checkbox" name="game" value="Counter Strike"> Counter Strike </label> <label> <input type="checkbox" name="game" value="Dota 2"> Dota 2 </label> <label> <input type="checkbox" name="game" value="FIFA"> FIFA </label>

             <label>

<input type="checkbox" name="game" value="Fortnite"> Fortnite </label> <label> <input type="checkbox" name="game" value="Hearthstone"> Hearthstone </label> <label> <input type="checkbox" name="game" value="League of Legends"> League of Legends </label> <label> <input type="checkbox" name="game" value="Mobile Legends"> Mobile Legends </label> <label> <input type="checkbox" name="game" value="Overwatch"> Overwatch </label> <label> <input type="checkbox" name="game" value="PUBG"> PUBG </label> <label> <input type="checkbox" name="game" value="PUBG Mobile"> PUBG Mobile </label> <label> <input type="checkbox" name="game" value="Rainbow Six"> Rainbow Six </label> <label> <input type="checkbox" name="game" value="Rocket League"> Rocket League </label> <label> <input type="checkbox" name="game" value="Smash"> Smash </label> <label> <input type="checkbox" name="game" value="Starcraft II"> Starcraft II </label> <label> <input type="checkbox" name="game" value="Valorant"> Valorant </label> <label> <input type="checkbox" name="game" value="Warcraft III"> Warcraft III </label> <label> <input type="checkbox" name="game" value="Wild Rift"> Wild Rift </label>

Tag
      <input type="text" id="tag" value="">

<button style="align-self:center;" onclick="updateTemplate()">Search</button>