forked from RaidAndFade/HacktoberChallenges2018
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (157 loc) · 6.82 KB
/
index.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
<head>
<title>RaidAndFade's Friends</title>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#mainContent { background: white; max-width: 660px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px;}
#mainContent h2 { color: #ffa100; font-weight: bold; font-size: 28px; margin: 0 0 16px; text-align: center;}
#mainContent h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#mainContent p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#mainContent a { display: inline-block; text-align: center; text-decoration: none; padding: 8px; border-radius: 4px; font-size: 20px; color:black;}
#mainContent { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#logo { width:50%; }
@media (max-width: 600px) {
body, #mainContent { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
#logo{
width: 50%;
}
}
.someGap{
margin: 0 0 75px;
}
.githubButtons{
text-align: center;
}
.contentFooter{
text-align: center;
}
.contentFooterSmily{
color: black;
fill: orange;
font-size: 30px;
text-shadow: #ffa100;
}
</style>
</head>
<body>
<!-- Main Content of Body -->
<div id="mainContent">
<span style="font-size:3em;width:100%;text-align:center;display:inline-block"> Welcome to my Friends List <br> <span style="font-size:0.5em;">Week 1 Challenge</span> </span>
<div class="someGap"></div>
<!-- Github Buttons -->
<div class="githubButtons">
<!-- Follow RaidAndFade -->
<a class="github-button" href="https://github.com/RaidAndFade" data-size="large" data-show-count="true" aria-label="Follow @RaidAndFade on GitHub">Follow @RaidAndFade</a>
<!-- Fork Repo. -->
<span id="friends"><a class="github-button" href="https://github.com/RaidAndFade/Hacktoberfest2018/blob/master/README.md" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Add yourself to the list of friends!">Join the list!</a></span>
</div>
<hr>
<button id="flistbtn" onclick="changelist('Friends','flist')">Friends List</button><button id="glistbtn" onclick="changelist('Games','glist')">Games List</button><br><br>
<select id="c" onchange="page(0)">
<option value="10">Show 10 per page</option>
<option value="25" selected>Show 25 per page</option>
<option value="50">Show 50 per page</option>
<option value="100">Show 100 per page</option>
</select>
<button id="pgbtnprv" class="pgbtn" onclick="page(-1)">Prev Page</button><button id="pgbtnnxt" class="pgbtn" onclick="page(+1)">Next Page</button>
<h3 id="lbl"></h3>
<!-- User Files | Contribution File's Links -->
<ul id="d">
<li>Loading...</li>
</ul>
<button id="clearcachebtn" style="display: none" onclick="clearcacheandreload()">Clear ... Cache</button>
<!-- Content Footer -->
<hr>
<div class="contentFooter">
<a href="https://hacktoberfest.digitalocean.com"><img id="logo" src="https://i.imgur.com/d08lZt8.png"></a><br>
<p>Thanks for being a part of Hacktoberfest 2018</p>
<p>You're Awesome! <i class="contentFooterSmily">☺</i></p>
</div>
<!-- Content Footer End -->
</div>
</body>
</html>
<script>
const mincacheage = 60; //dont allow manual clearing less than this many seconds
const cacheexpirysecs = 900; //expire cache every 15 mins
// setList(list, name, startindex, count)
// name is used to fill the lbl
// sets the inside of element.d to that list from startindex to startindex+count
function setList(l,name,s,c){
if(s==null || s<0)
s = 0
if(c==null || c<0 || s+c>l.length)
c = l.length-s
document.getElementById("lbl").innerHTML="Here are my "+l.length+" "+name+" (from "+(s+1)+" to "+(s+c)+"): "
var h = document.getElementById("d");
h.innerHTML = "";
l = l.slice(s,s+c)
i = s+1
for(var x of l){
h.innerHTML += "<li><a href=\""+x.path+"\">"+i+". "+x.name+"</a></li>";
i++
}
}
function clearcacheandreload(){
localStorage.removeItem(curlist)
changelist(curURL,curlist)
}
function handleClearCacheButton(canclear){
b = document.getElementById("clearcachebtn")
b.disabled = !canclear
cacheage = epochSecs()-localStorage.getItem(curlist+"time")
b.style.display = "block"
b.innerHTML = canclear?"Your cache is "+cacheage+" seconds old, clear?":"Your cache is only "+cacheage+"s old. clearing is not necessary."
}
function epochSecs(){
return ~~(new Date().getTime()/1000)
}
function getperpage(){
return document.getElementById("c").value-(-0);
}
// the url of the folder, and the local storage element name
function changelist(URL,LSName){
curlist = LSName;
curURL = URL;
isCacheExpired = localStorage.getItem(curlist+"time") == null || (epochSecs()-localStorage.getItem(curlist+"time"))>cacheexpirysecs
if(localStorage.getItem(curlist) == null || isCacheExpired){
document.getElementById("d").innerHTML = "<li>Loading "+URL+"...</li>"
const gitapiurl = "https://api.github.com/repos/raidandfade/hacktoberfest2018/contents/"+curURL;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
localStorage.setItem(curlist,this.responseText)
localStorage.setItem(curlist+"time",epochSecs())
handleClearCacheButton(epochSecs()-localStorage.getItem(curlist+"time")>mincacheage)
setList(JSON.parse(this.responseText),curpage*getperpage(),getperpage())
page(0)
}
};
xhttp.open("GET", gitapiurl, true);
xhttp.send();
}else{
handleClearCacheButton(epochSecs()-localStorage.getItem(curlist+"time")>mincacheage)
setList(JSON.parse(localStorage.getItem(curlist)),curURL,curpage*getperpage(),getperpage())
page(0)
}
}
var curlist = "";
var curURL = "";
var curpage = 0;
function page(i){
l = JSON.parse(localStorage.getItem(curlist))
numpages = Math.ceil(l.length/getperpage())
curpage+=i
if(curpage > numpages)
curpage = numpages-1
document.getElementById("pgbtnprv").disabled = curpage == 0
document.getElementById("pgbtnnxt").disabled = curpage == (numpages-1)
curcount = curpage*getperpage()
setList(l,curURL,curpage*getperpage(),getperpage())
}
changelist("Friends","flist")
</script>