Skip to content

Commit 6e03be6

Browse files
committed
seperate the script for faster loading of html and optimize the js
1 parent b6f2ac2 commit 6e03be6

File tree

2 files changed

+123
-121
lines changed

2 files changed

+123
-121
lines changed

index.html

Lines changed: 1 addition & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -113,127 +113,7 @@ <h2>Donations</h2>
113113
A project by <a href="https://wdh.gg">William Harrison</a>.
114114
</p>
115115
</main>
116-
<script>
117-
let is_searching=false;
118-
let pattern_domain='^[a-zA-Z0-9_][a-zA-Z0-9.-]*';
119-
let timer_search=undefined;
120-
let reserved_domain=undefined;
121-
const search_domain=document.getElementById('search-domain');
122-
// result containers
123-
const result_card=document.getElementById('result-card');
124-
const result_none=document.getElementById('result-none');
125-
const result_error=document.getElementById('result-error');
126-
const result_reserved=document.getElementById('result-reserved');
127-
// user propagate
128-
const user_avatar=document.getElementById('user-avatar');
129-
const user_gh_link=document.getElementById('user-gh-link');
130-
const user_name=document.getElementById('user-name');
131-
const user_website_link=document.getElementById('user-website-link');
132-
const user_info=document.getElementById('user-info');
133-
134-
function check(){
135-
var search=search_domain.value.trim().replace(' ','-').toLowerCase();
136-
if(its_reserved(search)){
137-
hide_results();
138-
result_reserved.classList.toggle('hidden');
139-
return;
140-
}
141-
if(search ==='' || is_searching) return;
142-
is_searching=true;
143-
fetch('https://raw.githubusercontent.com/is-a-dev/register/main/domains/'+search+'.json')
144-
.then(response => {
145-
hide_results();
146-
if(!response.ok && response.status !== 404)
147-
throw new Error('Something went wrong');
148-
return !response.ok? null :
149-
response.json();
150-
})
151-
.then(json => {
152-
if(json!=null)
153-
{
154-
json.search=search;
155-
propagate_result(json);
156-
}
157-
else if (result_none.classList.contains('hidden'))
158-
result_none.classList.toggle('hidden');
159-
})
160-
.catch((reason)=>{
161-
if (result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
162-
}).finally(()=>{
163-
is_searching=false;
164-
});
165-
}
166-
167-
function propagate_result(data){
168-
if (result_card.classList.contains('hidden')) result_card.classList.toggle('hidden');
169-
var gh_link='https://github.com/'+data.owner.username;
170-
var website_link=data.search+'.is-a.dev';
171-
user_avatar.src=gh_link+'.png?size=120';
172-
user_gh_link.href=gh_link;
173-
user_name.innerHTML=data.owner.username;
174-
user_website_link.href='https://'+website_link;
175-
user_website_link.innerHTML=website_link;
176-
user_info.textContent=data.description===undefined?'':data.description;
177-
}
178-
179-
function hide_results(){
180-
if (!result_card.classList.contains('hidden')) result_card.classList.toggle('hidden');
181-
if (!result_none.classList.contains('hidden')) result_none.classList.toggle('hidden');
182-
if (!result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
183-
if (!result_reserved.classList.contains('hidden')) result_reserved.classList.toggle('hidden');
184-
}
185-
186-
function its_reserved(domain){
187-
var s= reserved_domain.filter(function(pattern) {
188-
if(pattern.includes('['))
189-
return new RegExp(pattern).test(domain);
190-
else
191-
return domain===pattern;
192-
});
193-
return s.length > 0;
194-
}
195-
196-
function fetch_reserve(){
197-
if(reserved_domain === undefined){
198-
if (timer_search!==undefined)
199-
clearInterval(timer_search);
200-
fetch('https://raw.githubusercontent.com/is-a-dev/register/main/util/reserved.json')
201-
.then(response => {
202-
if(!response.ok)
203-
throw new Error('Something went wrong');
204-
return response.json();
205-
})
206-
.then(data => {
207-
reserved_domain=data;
208-
search_domain.disabled=false;
209-
search_domain.placeholder='e.g. william';
210-
document.getElementById('search-keyword').innerHTML='*Start typing to check the subdomain availability,<a alt="filname-convention" target="_blank" href="https://docs.is-a.dev/domain-structure/#filename">check here</a> to learn how to create a proper domain name.';
211-
212-
})
213-
.catch((reason)=>{
214-
// silence is the best
215-
});
216-
return;
217-
}
218-
}
219-
220-
search_domain.addEventListener('input', function (evt) {
221-
if(this.value===''){
222-
if (timer_search!==undefined){
223-
clearInterval(timer_search);
224-
}
225-
hide_results();
226-
return;
227-
}
228-
search_domain.value=new RegExp(pattern_domain).exec(this.value);
229-
console.log(this.value)
230-
if (timer_search!==undefined)
231-
clearInterval(timer_search);
232-
233-
timer_search=setTimeout(()=>check(this.value),1000);
234-
});
235-
236-
fetch_reserve();
116+
<script src="./scripts/main.js">
237117
</script>
238118
</body>
239119
</html>

scripts/main.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
let is_searching=false;
2+
let pattern_domain='^[a-zA-Z0-9_][a-zA-Z0-9.-]*';
3+
let timer_search=undefined;
4+
let reserved_domain=undefined;
5+
const search_domain=document.getElementById('search-domain');
6+
// result containers
7+
const result_card=document.getElementById('result-card');
8+
const result_none=document.getElementById('result-none');
9+
const result_error=document.getElementById('result-error');
10+
const result_reserved=document.getElementById('result-reserved');
11+
// user propagate
12+
const user_avatar=document.getElementById('user-avatar');
13+
const user_gh_link=document.getElementById('user-gh-link');
14+
const user_name=document.getElementById('user-name');
15+
const user_website_link=document.getElementById('user-website-link');
16+
const user_info=document.getElementById('user-info');
17+
18+
function check(){
19+
const search= search_domain.value.trim().replace(/\s/g, '-').toLowerCase();
20+
if(isReserved(search)){
21+
hideResults();
22+
result_reserved.classList.toggle('hidden');
23+
return;
24+
}
25+
if(!search || is_searching) return;
26+
is_searching=true;
27+
fetch(`https://raw.githubusercontent.com/is-a-dev/register/main/domains/${search}.json`)
28+
.then(response => {
29+
hideResults();
30+
if(!response.ok && response.status !== 404)
31+
throw new Error('Something went wrong');
32+
return !response.ok? null :
33+
response.json();
34+
})
35+
.then(json => {
36+
if(json)
37+
{
38+
json.search=search;
39+
propagateResult(json);
40+
}
41+
else if (result_none.classList.contains('hidden'))
42+
result_none.classList.toggle('hidden');
43+
})
44+
.catch((reason)=>{
45+
console.log(reason);
46+
if (result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
47+
}).finally(()=>{
48+
is_searching=false;
49+
});
50+
}
51+
52+
function propagateResult(data){
53+
if (result_card.classList.contains('hidden')) result_card.classList.remove('hidden');
54+
var gh_link=`https://github.com/${data.owner.username}`;
55+
var website_link=`${data.search}.is-a.dev`;
56+
user_avatar.src=`${gh_link}.png?size=120`;
57+
user_gh_link.href=gh_link;
58+
user_name.innerHTML=data.owner.username;
59+
user_website_link.href=`https://${website_link}`;
60+
user_website_link.innerHTML=website_link;
61+
user_info.textContent= data.description || '';
62+
}
63+
64+
function hideResults(){
65+
if (!result_card.classList.contains('hidden')) result_card.classList.toggle('hidden');
66+
if (!result_none.classList.contains('hidden')) result_none.classList.toggle('hidden');
67+
if (!result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
68+
if (!result_reserved.classList.contains('hidden')) result_reserved.classList.toggle('hidden');
69+
}
70+
71+
function isReserved(domain){
72+
const reserved_domains = new Set(reserved_domain);
73+
return reserved_domains.has(domain) || reserved_domain.some(pattern => pattern.includes('[') && new RegExp(pattern).test(domain));
74+
}
75+
76+
async function fetchReservedDomains() {
77+
try {
78+
if (typeof reserved_domain === 'undefined') {
79+
if (typeof timer_search !== 'undefined') {
80+
clearInterval(timer_search);
81+
}
82+
83+
const response = await fetch('https://raw.githubusercontent.com/is-a-dev/register/main/util/reserved.json');
84+
if (!response.ok) {
85+
throw new Error('Something went wrong');
86+
}
87+
88+
reserved_domain = await response.json();
89+
search_domain.disabled = false;
90+
search_domain.placeholder = 'e.g. william';
91+
document.getElementById('search-keyword').innerHTML = '*Start typing to check the subdomain availability, <a alt="filname-convention" target="_blank" href="https://docs.is-a.dev/domain-structure/#filename">check here</a> to learn how to create a proper domain name.';
92+
}
93+
} catch (error) {
94+
console.error('Error fetching reserved domains:', error);
95+
}
96+
}
97+
98+
search_domain.addEventListener('input', function(evt) {
99+
const input_value = this.value.trim();
100+
101+
if (input_value === '') {
102+
clearTimer();
103+
hideResults();
104+
return;
105+
}
106+
107+
const matched_value = input_value.match(new RegExp(pattern_domain));
108+
if (matched_value) {
109+
search_domain.value = matched_value[0];
110+
}
111+
112+
clearTimer();
113+
timer_search = setTimeout(() => check(), 1000);
114+
});
115+
116+
function clearTimer() {
117+
if (timer_search !== undefined) {
118+
clearInterval(timer_search);
119+
}
120+
}
121+
122+
fetchReservedDomains();

0 commit comments

Comments
 (0)