git ssb

0+

Rômulo Alves / dat-letnice



Tree: 04cc342051b291381210af1ef5c13ae743079c3c

Files: 04cc342051b291381210af1ef5c13ae743079c3c / js / letnice.js

3794 bytesRaw
1const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
2const dayNames = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]
3
4function Year(letnice)
5{
6 let base = document.getElementById("center");
7 base.innerHTML = "";
8 let year;
9
10 isNaN(letnice) || letnice==null ? year = new Date().getFullYear() : year = String(letnice).replace("#", "").substr(0,4);
11 window.location.hash = year;
12
13 let month = 0;
14 let today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1, 0);
15 let style = "";
16 let footer = "";
17
18 base.innerHTML += doHeader();
19
20 while(month < 12)
21 {
22 base.innerHTML += `<div class="month">
23 <p class="m">${monthNames[new Date(year, month).getMonth()].substr(0,2)}</p>
24 <svg class="graph" id="${monthNames[month]}">
25 ${doLabels()}
26 ${doMonth(month)}
27 </svg></div>`
28 month++
29 }
30
31 base.innerHTML += doFooter();
32 footer = document.getElementById("footer");
33
34 function doHeader()
35 {
36 return `<div class="header"><p class="y">${year}<a onclick="getYear(-1);">-</a><a onclick="getYear(1);">+</a></p><p class="p">${yearProgress(year)}</p></div>`;
37 }
38
39 function doFooter(content)
40 {
41 return `<div class="footer" id="footer">${footer}</div>`;
42 }
43
44 function yearProgress(year)
45 {
46 diff = new Date() - new Date(year, 0, 1, 0);
47 progress = ((diff/31536000000)*100).toFixed(2);
48 yd = Math.abs((progress / 100).toFixed(2));
49
50 return progress < 0 ? yd + ` YEARS AWAY` : progress > 100 ? yd + ` YEARS AGO` : progress+"%";
51 }
52
53 function doLabels()
54 {
55 let html = "";
56 let y = 0;
57
58 for(i = 0; i < 7; i++)
59 {
60 y = (i * 14);
61 html += `<text class="dayLabel" x="5" y='${y}' dy="10">${dayNames[i].substr(0,1)}</text>`
62 }
63 return html;
64 }
65
66 function doMonth(month)
67 {
68 html = "";
69 monthLength = new Date(year, month+1, 0).getDate();
70 let date = 0;
71 let x = 0;
72 let y = 0;
73
74 while(date < monthLength)
75 {
76 x += 14;
77 let week = 0;
78
79 while(week < 7 && date != monthLength)
80 {
81 y = week * 14;
82 let day = new Date(year, month, date, 0);
83 let dotab = `tabIndex="0"`;
84
85 if(day.getDay() != week)
86 {
87 style = "null";
88 dotab = "";
89 date--
90 }
91 else if(String(day) == String(today))
92 {
93 style = "today";
94 }
95 else if(day < today)
96 {
97 style = "gone";
98 }
99 else if(day.getDay() == 5 || day.getDay() == 6)
100 {
101 style = "weekend";
102 }
103 else
104 {
105 style = "day";
106 }
107
108 html += `<rect id="square" class='${style}' x='${x}' y='${y}' title='${(date+1) == 0 ? "null" : dayNames[week] + " " + (date+1)}' width="12px" height="12px" rx="2" ry="2" onclick="
109 UpdateFooter(${year}, ${month}, ${(date+1)}, ${week}, this)" onblur="" ${dotab}></rect>`
110
111 week++
112 date++
113 }
114 }
115 return html;
116 }
117}
118
119function UpdateFooter(year, month, date, week, obj)
120{
121 obj.addEventListener("blur", ()=>{ footer.innerHTML=""; });
122 let diff = ((new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0) - new Date(year, month, date))/86400000);
123 let num = Math.abs(diff).toFixed();
124 let calc;
125
126 diff < 0 ? calc = `In ${num} Day${num>1?'s':''}.` : diff == 0 ? calc = `Today.`: calc = `${num} Day${num>1?'s':''} ago.`
127 footer.innerHTML = `${monthNames[month]} ${date}, ${dayNames[week]}. ${calc}`;
128}
129
130function getYear(dir)
131{
132 location.hash = parseInt(location.hash.replace('#','')) + parseInt(dir);
133}
134
135window.onhashchange = function()
136{
137 Year(parseInt(location.hash.replace('#','')));
138}

Built with git-ssb-web