Widget:NewsSearch: Difference between revisions

From TwogPedia
(Created page with "<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 = getCh...")
 
mNo edit summary
 
(7 intermediate revisions by the same user not shown)
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 title = document.getElementById("title").value
  if ( title.length > 0 ) parameters += '|title=' + title
    
    
   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
mw.log(content)
    let newContent = document.createElement('div')
    newContent.innerHTML = content.querySelector('.mw-parser-output').innerHTML
    newContent = newContent.firstChild
 
    if ( content.querySelector('.mw-parser-output li') ) {
      contentContainer.replaceWith(newContent)
    } else {
      contentContainer.innerHTML = 'No news found'
    }
 
});
});
}
}
Line 53: Line 75:
   }
   }
}
}
</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 112: Line 135:
      <label>
      <label>
        <input type="checkbox" name="game" value="FIFA"> FIFA
        <input type="checkbox" name="game" value="FIFA"> FIFA
      </label>
              <label>
        <input type="checkbox" name="game" value="Fortnite"> Fortnite
      </label>
      </label>
      <label>
      <label>
Line 154: Line 180:
</div>
</div>
</div>
</div>
    <div>
      <div>Tag</div>
      <input type="text" id="tag" value="<!--{$tag|escape:'html'}-->">
      <div>Title</div>
      <input type="text" id="title" value="">
    </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>

Latest revision as of 11:42, 19 April 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 title = document.getElementById("title").value
 if ( title.length > 0 ) parameters += '|title=' + title
 
 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

mw.log(content)

   let newContent = document.createElement('div')
   newContent.innerHTML = content.querySelector('.mw-parser-output').innerHTML
   newContent = newContent.firstChild
   if ( content.querySelector('.mw-parser-output li') ) {
      contentContainer.replaceWith(newContent)
   } else {
      contentContainer.innerHTML = 'No news found'
   }

}); }

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="">
Title
      <input type="text" id="title" value="">

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