-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwiksplorer.html
125 lines (104 loc) · 4.56 KB
/
wiksplorer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Wikipedia List Navigator</title>
<style>
body { font-family: Arial, sans-serif; margin: 10px; background-color: #f9f9f9; }
input, button { padding: 10px; font-size: 16px; margin: 5px 0; border-radius: 5px; border: 1px solid #ccc; width: 100%; }
#results, #list-output, #detail-output { margin-top: 20px; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.list-item { margin: 5px 0; color: blue; cursor: pointer; text-decoration: underline; }
.list-item:active { color: darkblue; }
button { cursor: pointer; background-color: #007bff; color: white; border: none; }
button:active { background-color: #0056b3; }
</style>
</head>
<body>
<h1>Full Wikipedia List Navigator</h1>
<p>Search for structured lists and explore full content with no truncation.</p>
<div>
<input type="text" id="search-query" placeholder="Enter a topic (e.g., dogs)">
<button onclick="searchWikipedia()">Search</button>
<button onclick="clearResults()">Clear</button>
</div>
<div id="results" class="hidden">
<h2>Search Results:</h2>
</div>
<div id="list-output" class="hidden">
<h2>Full List Content:</h2>
<div id="list-container"></div>
</div>
<div id="detail-output" class="hidden">
<h2>Details:</h2>
<div id="detail-container"></div>
</div>
<script>
function searchWikipedia() {
const query = document.getElementById("search-query").value.trim();
if (!query) return;
const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(query)} list&format=json&origin=*`;
fetch(apiUrl)
.then(response => response.json())
.then(data => displaySearchResults(data.query.search))
.catch(error => console.error('Error fetching Wikipedia data:', error));
}
function displaySearchResults(results) {
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = "<h2>Search Results:</h2>";
resultsDiv.classList.remove("hidden");
results.forEach(result => {
const div = document.createElement("div");
div.classList.add("list-item");
div.textContent = result.title;
div.onclick = () => fetchWikipediaList(result.title);
resultsDiv.appendChild(div);
});
}
function fetchWikipediaList(title) {
const apiUrl = `https://en.wikipedia.org/w/api.php?action=parse&page=${encodeURIComponent(title)}&format=json&origin=*`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const content = data.parse.text['*'];
displayFullList(content, title);
})
.catch(error => console.error('Error fetching Wikipedia list:', error));
}
function displayFullList(htmlContent, title) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, 'text/html');
const lists = doc.querySelectorAll('ul, ol');
const items = [];
lists.forEach(list => {
list.querySelectorAll('li').forEach(li => {
items.push(li.textContent.trim());
});
});
const listOutput = document.getElementById("list-output");
const listContainer = document.getElementById("list-container");
listContainer.innerHTML = `<h3>${title}</h3><ul>${items.map(item => `<li class="list-item" onclick="fetchDetails('${item}')">${item}</li>`).join('')}</ul>`;
listOutput.classList.remove("hidden");
}
function fetchDetails(item) {
const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&titles=${encodeURIComponent(item)}&prop=extracts&format=json&origin=*`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const page = Object.values(data.query.pages)[0];
const detailOutput = document.getElementById("detail-output");
const detailContainer = document.getElementById("detail-container");
detailContainer.innerHTML = `<h3>${item}</h3><p>${page.extract ? page.extract : 'No details available.'}</p>`;
detailOutput.classList.remove("hidden");
})
.catch(error => console.error('Error fetching details:', error));
}
function clearResults() {
document.getElementById("search-query").value = '';
document.getElementById("results").innerHTML = '';
document.getElementById("list-output").classList.add("hidden");
document.getElementById("detail-output").classList.add("hidden");
}
</script>
</body>
</html>