git ssb

0+

Rômulo Alves / dat-letnice



Tree: 91794b4e93b5b5eb3fd5ebb2b148e4e4d89a67de

Files: 91794b4e93b5b5eb3fd5ebb2b148e4e4d89a67de / js / letnice.js

3740 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
84 if(day.getDay() != week)
85 {
86 style = "null";
87 date--
88 }
89 else if(String(day) == String(today))
90 {
91 style = "today";
92 }
93 else if(day < today)
94 {
95 style = "gone";
96 }
97 else if(day.getDay() == 5 || day.getDay() == 6)
98 {
99 style = "weekend";
100 }
101 else
102 {
103 style = "day";
104 }
105
106 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="
107 UpdateFooter(${year}, ${month}, ${(date+1)}, ${week}, this)" onblur="" tabIndex="0"></rect>`
108
109 week++
110 date++
111 }
112 }
113 return html;
114 }
115}
116
117function UpdateFooter(year, month, date, week, obj)
118{
119 obj.addEventListener("blur", ()=>{ footer.innerHTML=""; });
120 let diff = ((new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0) - new Date(year, month, date))/86400000);
121 let num = Math.abs(diff).toFixed();
122 let calc;
123
124 diff < 0 ? calc = `In ${num} Day${num>1?'s':''}.` : diff == 0 ? calc = `Today.`: calc = `${num} Day${num>1?'s':''} ago.`
125 footer.innerHTML = `${monthNames[month]} ${date}, ${dayNames[week]}. ${calc}`;
126}
127
128function getYear(dir)
129{
130 location.hash = parseInt(location.hash.replace('#','')) + parseInt(dir);
131}
132
133window.onhashchange = function()
134{
135 Year(parseInt(location.hash.replace('#','')));
136}

Built with git-ssb-web