Widget:Companies/Search: Difference between revisions

From TwogPedia
(Created page with "<div class="companies__search"> <div> <label for="companies__name">Name</label> <input type="text" id="companies__name" placeholder="Name..."> </div> <script> // Get the input and dropdown content elements var input = document.getElementById("search--input"); function updateTemplate() { var parameters = ''; let name = document.getElementById("location__name").value; if ( name !== '' ) parameters += '|name=' + name var contentContainer = document....")
 
mNo edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="companies__search">
<div class="companies__search">
<div style="display: flex; gap: 0.5rem;">
  <div>
  <label style="display: block;" for="location__name">Name</label>
  <input style="height: 30px; " type="text" id="companies__name" placeholder="Name...">
  </div>
<div>
<div>
  <label for="companies__name">Name</label>
  <label style="display: block;" for="places">Type</label>
   <input type="text" id="companies__name" placeholder="Name...">
  <select style="height: 30px; " id="types" name="types" onchange="updateTemplate()">
  <option value="">Any</option>
  <option value="Organization">Gaming Organization</option>
   <option value="Locations">Locations</option>
  <option value="Sponsor">Sponsor</option>
  <option value="Organizer">Organizer</option>
  <option value="Other">Other</option>
  </select>
</div>
</div>
</div>


Line 11: Line 24:
function updateTemplate() {
function updateTemplate() {
   var parameters = '';
   var parameters = '';
   let name = document.getElementById("location__name").value;
 
  let type = document.getElementById("types").value;
  if ( type !== '' ) parameters += '|type=' + document.querySelector(`option[value="${type}"]`).value
 
   let name = document.getElementById("companies__name").value;
   if ( name !== '' ) parameters += '|name=' + name
   if ( name !== '' ) parameters += '|name=' + name


Line 18: Line 35:
   // Use the selected template as a parameter in the parser function
   // Use the selected template as a parameter in the parser function
   var parserFunction = "{{Companies/Search" + parameters + "}}";
   var parserFunction = "{{Companies/Search" + 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) {
Line 28: Line 45:
       contentContainer.innerHTML = content.querySelector('#companies-search-container').outerHTML;   
       contentContainer.innerHTML = content.querySelector('#companies-search-container').outerHTML;   
     } else {
     } else {
       contentContainer.innerHTML = 'No locations found'
       contentContainer.innerHTML = 'No companies found'
     }
     }


Line 36: Line 53:
   // Name input to run 500ms after last input
   // Name input to run 500ms after last input
   let timeoutId;
   let timeoutId;
   document.getElementById('location__name').addEventListener('input', function() {
   document.getElementById('companies__name').addEventListener('input', function() {
       // Clear previous timeout (if any)
       // Clear previous timeout (if any)
       clearTimeout(timeoutId);
       clearTimeout(timeoutId);

Latest revision as of 11:08, 17 April 2024