Widget:LocationsSearch/All - Revision history

Couchor at 15:44, 26 March 2024

2024-03-26T15:44:14Z

← Older revision		Revision as of 15:44, 26 March 2024
Line 97:		Line 97:
	// Use the selected template as a parameter in the parser function		// Use the selected template as a parameter in the parser function
	var parserFunction = "{{Locations/Full_list" + parameters + "}}";		var parserFunction = "{{Locations/Full_list" + parameters + "}}";
	~~console.log(contentContainer)~~
	~~console.log(parserFunction )~~

	// Replace the content in the dynamic content container with the parsed template		// Replace the content in the dynamic content container with the parsed template
Line 106:		Line 104:
	content.innerHTML = parsedContent		content.innerHTML = parsedContent


	~~console.log(content)~~
	if ( content.querySelector('.mw-parser-output #locations-search-container') ) {		if ( content.querySelector('.mw-parser-output #locations-search-container') ) {
	contentContainer.innerHTML = content.querySelector('#locations-search-container').outerHTML;		contentContainer.innerHTML = content.querySelector('#locations-search-container').outerHTML;

Couchor at 15:23, 26 March 2024

2024-03-26T15:23:15Z

← Older revision		Revision as of 15:23, 26 March 2024
Line 108:		Line 108:

	console.log(content)		console.log(content)
	if ( content.querySelector('.mw-parser-output ~~.location__item~~') ) {		if ( content.querySelector('.mw-parser-output #locations-search-container') ) {
	contentContainer.innerHTML = content.querySelector('~~.mw~~-~~parser~~-~~output~~').~~innerHTML~~;		contentContainer.innerHTML = content.querySelector('#locations-search-container').outerHTML;
	} else {		} else {
	contentContainer.innerHTML = 'No locations found'		contentContainer.innerHTML = 'No locations found'

Couchor at 15:21, 26 March 2024

2024-03-26T15:21:12Z

← Older revision		Revision as of 15:21, 26 March 2024
Line 107:		Line 107:


	console.log(~~parsedContent~~)		console.log(content)
	if ( content.querySelector('.mw-parser-output .location__item') ) {		if ( content.querySelector('.mw-parser-output .location__item') ) {
	contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;		contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;

Couchor at 15:14, 26 March 2024

2024-03-26T15:14:45Z

← Older revision		Revision as of 15:14, 26 March 2024
Line 107:		Line 107:


	console.log(~~content.querySelector('.mw-parser-output').innerHTML~~)		console.log(parsedContent)
	if ( content.querySelector('.mw-parser-output .location__item') ) {		if ( content.querySelector('.mw-parser-output .location__item') ) {
	contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;		contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;

Couchor at 15:12, 26 March 2024

2024-03-26T15:12:26Z

← Older revision		Revision as of 15:12, 26 March 2024
Line 93:		Line 93:
	if ( name !== '' ) parameters += '\|name=' + name		if ( name !== '' ) parameters += '\|name=' + name

	var contentContainer = document.getElementById("locations-~~search~~-~~container~~");		var contentContainer = document.getElementById("locations--list");

	// Use the selected template as a parameter in the parser function		// Use the selected template as a parameter in the parser function
Line 109:		Line 109:
	console.log(content.querySelector('.mw-parser-output').innerHTML)		console.log(content.querySelector('.mw-parser-output').innerHTML)
	if ( content.querySelector('.mw-parser-output .location__item') ) {		if ( content.querySelector('.mw-parser-output .location__item') ) {
	contentContainer.~~outerHTML~~ = content.querySelector('.mw-parser-output').innerHTML;		contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;
	} else {		} else {
	contentContainer.innerHTML = 'No locations found'		contentContainer.innerHTML = 'No locations found'

Couchor at 15:08, 26 March 2024

2024-03-26T15:08:47Z

← Older revision		Revision as of 15:08, 26 March 2024
Line 97:		Line 97:
	// Use the selected template as a parameter in the parser function		// Use the selected template as a parameter in the parser function
	var parserFunction = "{{Locations/Full_list" + parameters + "}}";		var parserFunction = "{{Locations/Full_list" + parameters + "}}";
			console.log(contentContainer)
			console.log(parserFunction )

	// Replace the content in the dynamic content container with the parsed template		// Replace the content in the dynamic content container with the parsed template
Line 104:		Line 106:
	content.innerHTML = parsedContent		content.innerHTML = parsedContent

	~~console.log(contentContainer)~~
	console.log(content.querySelector('.mw-parser-output').innerHTML)		console.log(content.querySelector('.mw-parser-output').innerHTML)
	if ( content.querySelector('.mw-parser-output .location__item') ) {		if ( content.querySelector('.mw-parser-output .location__item') ) {

Couchor at 15:05, 26 March 2024

2024-03-26T15:05:40Z

← Older revision		Revision as of 15:05, 26 March 2024
Line 96:		Line 96:

	// Use the selected template as a parameter in the parser function		// Use the selected template as a parameter in the parser function
	var parserFunction = "{{~~LocationsLanding~~/Full_list" + parameters + "}}";		var parserFunction = "{{Locations/Full_list" + 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

Couchor at 15:04, 26 March 2024

2024-03-26T15:04:40Z

← Older revision		Revision as of 15:04, 26 March 2024
Line 104:		Line 104:
	content.innerHTML = parsedContent		content.innerHTML = parsedContent

			console.log(contentContainer)
			console.log(content.querySelector('.mw-parser-output').innerHTML)
	if ( content.querySelector('.mw-parser-output .location__item') ) {		if ( content.querySelector('.mw-parser-output .location__item') ) {
	contentContainer.~~innerHTML~~ = content.querySelector('.mw-parser-output').innerHTML;		contentContainer.outerHTML = content.querySelector('.mw-parser-output').innerHTML;
	} else {		} else {
	contentContainer.innerHTML = 'No locations found'		contentContainer.innerHTML = 'No locations found'

Couchor at 15:01, 26 March 2024

2024-03-26T15:01:34Z

← Older revision		Revision as of 15:01, 26 March 2024
Line 93:		Line 93:
	if ( name !== '' ) parameters += '\|name=' + name		if ( name !== '' ) parameters += '\|name=' + name

	var contentContainer = document.getElementById("locations--~~list~~");		var contentContainer = document.getElementById("locations-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 = "{{LocationsLanding/Full_list" + parameters + "}}";		var parserFunction = "{{LocationsLanding/Full_list" + parameters + "}}";
	~~console.log(parserFunction)~~
	// 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) {

Couchor: Created page with "

Name

Country
X

Type..."

2024-03-26T14:57:08Z

Created page with "<div class="location__search"> <div> <label for="location__name">Name</label> <input type="text" id="location__name" placeholder="Name..."> </div> <div> <label for="search--input">Country</label> <div class="search__dropdown"> <input type="text" class="search__bar" id="search--input" placeholder="Country..."> <span class="clear__btn" id="clearInput" onclick="clearCountry()">X</span>  </div> </div> <div> <label for="places">Type..."

New page

<div class="location__search">
<div>
<label for="location__name">Name</label>
<input type="text" id="location__name" placeholder="Name...">
</div>
<div>
<label for="search--input">Country</label>
<div class="search__dropdown">
<input type="text" class="search__bar" id="search--input" placeholder="Country...">
<span class="clear__btn" id="clearInput" onclick="clearCountry()">X</span>

</div>
</div>
<div>
<label for="places">Type</label>
<select id="types" name="types" onchange="updateTemplate()">
<option value="">Any</option>
<option value="InternetCafe">Internet Café</option>
<option value="Arena">Arena</option>
<option value="Stadium">Stadium</option>
<option value="Bootcamp">Bootcamp</option>
<option value="VR">VR</option>
<option value="ConventionCenter">Convention Center</option>
<option value="Educational">Educational</option>
<option value="Studio">Studio</option>
<option value="Bar">Bar</option>
<option value="Shop">Shop</option>
<option value="Mobile">Mobile</option>
<option value="Hotel">Hotel</option>
<option value="Studio">Studio</option>
</select>
</div>
</div>

<script>
// Get the input and dropdown content elements
var input = document.getElementById("search--input");
var dropdownContent = document.getElementById("country--dropdown");

// Add onclick to set country
dropdownContent.addEventListener("click", function(e) {
if ( !e.target.classList.contains('dropdown__item') ) return
input.value = e.target.textContent
updateTemplate(e.target.dataset.country)
});

// Show the dropdown when the input receives focus
input.addEventListener("focus", function() {
dropdownContent.style.display = "flex";
});

// Hide the dropdown when the user clicks outside of it
document.addEventListener("click", function(event) {
if (!event.target.matches('.search__bar')) {
dropdownContent.style.display = "none";
}
});

// Filter the dropdown content based on user input
input.addEventListener("input", function() {
var filter = input.value.toUpperCase();
var items = dropdownContent.getElementsByClassName("dropdown__item");

for (var i = 0; i < items.length; i++) {
var txtValue = items[i].textContent || items[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
items[i].style.display = "";
} else {
items[i].style.display = "none";
}
}
});

function updateTemplate(country) {
var parameters = '';
if ( country ) parameters += '|country=' + country
else {
let countrySearch = document.getElementById('search--input').value
if ( countrySearch !== '' ) {
let elements = document.querySelectorAll('.dropdown__item');
let countries = []
elements.forEach(el => {
if ( el.textContent.toLowerCase().includes(countrySearch.toLowerCase()) ) countries.push(el.dataset.country)
})
if ( countries.length > 0 ) parameters += '|country=' + countries.join(',')
}
}

let type = document.getElementById("types").value;
if ( type !== '' ) parameters += '|type=' + document.querySelector(`option[value="${type}"]`).textContent

let name = document.getElementById("location__name").value;
if ( name !== '' ) parameters += '|name=' + name

var contentContainer = document.getElementById("locations--list");

// Use the selected template as a parameter in the parser function
var parserFunction = "{{LocationsLanding/Full_list" + parameters + "}}";
console.log(parserFunction)
// 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

if ( content.querySelector('.mw-parser-output .location__item') ) {
contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;
} else {
contentContainer.innerHTML = 'No locations found'
}

});
}

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

// Set a new timeout for 500ms
timeoutId = setTimeout(updateTemplate, 500);
});

function clearCountry() {
input.value = ''
updateTemplate()
}

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>