git ssb

1
const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
2
const dayNames = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",  "Sunday" ];
3
4
function 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
119
function UpdateFooter(year, month, date, week, obj)
120
{
121
  const selectedDate = new Date(year, month, date);
122
123
  obj.addEventListener("blur", () => footer.innerHTML = "");
124
125
  document.dispatchEvent(new CustomEvent('dateUpdate', {
126
    detail: { year, month, date, week }
127
  }));
128
}
129
130
function getYear(dir)
131
{
132
  location.hash = parseInt(location.hash.replace('#','')) + parseInt(dir);
133
}
134
135
window.onhashchange = function()
136
{
137
  Year(parseInt(location.hash.replace('#','')));
138
}
139
140
document.addEventListener('footerChange', event => footer.innerHTML = event.detail);