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(" | 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 = | |||
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> | |||
<input type="checkbox" name="category" value=" | <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=" | <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=" | <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=" | <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=" | <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=" | <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=" | <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=" | <input type="checkbox" name="category" value="Sponsorship" <!--{if $cat|escape:'html' eq 'Sponsorship'}-->checked<!--{/if}-->> Sponsorship | ||
</label> | </label> | ||
<label> | |||
<input type="checkbox" name="category" value=" | <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> | ||
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>
<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>
<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>
<input type="text" id="tag" value="">
<button style="align-self:center;" onclick="updateTemplate()">Search</button>