git ssb

16+

Dominic / patchbay



Commit 130d9b2d4b5cccafdcbb5d697ab3007a90c9741a

/calendar : minimal year display

mixmix committed on 7/19/2018, 9:11:08 PM
Parent: 9b9ae32751d87f8c75ee8da7d23f22f5b9250a74

Files changed

app/page/calendar.jsadded
app/page/calendar.mcssadded
router/sync/routes.jschanged
app/page/calendar.jsView
@@ -1,0 +1,171 @@
1 +const nest = require('depnest')
2 +const { h, Value, computed } = require('mutant')
3 +
4 +exports.gives = nest('app.page.calendar')
5 +
6 +exports.needs = nest({
7 +})
8 +
9 +exports.create = (api) => {
10 + return nest('app.page.calendar', calendarPage)
11 +
12 + function calendarPage (location) {
13 + const cal = Cal()
14 +
15 + return h('CalendarPage', { title: '/calendar' }, cal)
16 + }
17 +}
18 +
19 +const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
20 +const DAYS = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]
21 +
22 +function Cal () {
23 + const year = Value(new Date().getFullYear())
24 + const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1, 0)
25 +
26 + const root = computed(year, year => {
27 + return h('Calendar', [
28 + Header(year),
29 + MONTHS.map((month, i) => {
30 + return h('div.month', [
31 + h('div.label', month.substr(0, 3)),
32 + h('div.graph', [
33 + // Labels(),
34 + Month(year, i)
35 + ])
36 + ])
37 + })
38 + ])
39 + })
40 +
41 + return root
42 +
43 + function Header (year) {
44 + return h('div.header', [
45 + h('p.year', [
46 + year,
47 + h('a', { 'ev-click': () => year.set(year() - 1) }, '-'),
48 + h('a', { 'ev-click': () => year.set(year() + 1) }, '+')
49 + ])
50 + // h('p.percentage', yearProgress(year))
51 + ])
52 + }
53 +
54 + // function yearProgress (year) {
55 + // const diff = new Date() - new Date(year, 0, 1, 0)
56 + // const progress = ((diff / 31536000000) * 100).toFixed(2)
57 + // const yd = Math.abs((progress / 100).toFixed(2))
58 +
59 + // return progress < 0 ? yd + ` YEARS AWAY` : progress > 100 ? yd + ` YEARS AGO` : progress + '%'
60 + // }
61 +
62 + // function doLabels () {
63 + // let html = ''
64 + // let y = 0
65 +
66 + // for (var i = 0; i < 7; i++) {
67 + // y = (i * 14)
68 + // html += `<text class="dayLabel" x="5" y='${y}' dy="10">${DAYS[i].substr(0, 1)}</text>`
69 + // }
70 + // return html
71 + // }
72 +
73 + function Month (year, monthIndex) {
74 + const monthLength = new Date(year, monthIndex + 1, 0).getDate()
75 + // NOTE Date takes month as a monthIndex i.e. april = 3
76 + // and day = 0 goes back a day
77 + const days = Array(monthLength).fill().map((_, i) => i + 1)
78 +
79 + const style = {
80 + display: 'grid',
81 + 'grid-gap': '.2rem'
82 + }
83 +
84 + var date
85 + var weekday
86 + var week
87 + var offset = getDay(new Date(year, monthIndex, 1)) - 1
88 +
89 + return h('div', { style }, days.map(day => {
90 + date = new Date(year, monthIndex, day)
91 + weekday = getDay(date)
92 + if (weekday === 0) weekday = 7 // urghh I want monday to be the start of the week
93 + week = Math.ceil((day + offset) / 7)
94 +
95 + return h('div.day', {
96 + attributes: { 'data-day': day },
97 + style: {
98 + 'grid-row': `${weekday} / ${weekday + 1}`,
99 + 'grid-column': `${week} / ${week + 1}`
100 + }
101 + })
102 + }))
103 + }
104 +
105 + function getDay (date) {
106 + const d = date.getDay()
107 + return d === 0 ? 7 : d
108 +
109 + // Weeks run 0...6 (Sun - Sat)
110 + // this shifts those days around by 1
111 + }
112 +
113 + function doMonth (moxsd ........
114 + .th) {
115 + var html = ''
116 + const monthLength = new Date(year, month + 1, 0).getDate()
117 + let date = 0
118 + let x = 0
119 + let y = 0
120 +
121 + while (date < monthLength) {
122 + x += 14
123 + let week = 0
124 +
125 + while (week < 7 && date !== monthLength) {
126 + y = week * 14
127 + let day = new Date(year, month, date, 0)
128 + let dotab = `tabIndex="0"`
129 +
130 + if (day.getDay() !== week) {
131 + style = 'null'
132 + dotab = ''
133 + date--
134 + } else if (String(day) === String(today)) {
135 + style = 'today'
136 + } else if (day < today) {
137 + style = 'gone'
138 + } else if (day.getDay() === 5 || day.getDay() === 6) {
139 + style = 'weekend'
140 + } else {
141 + style = 'day'
142 + }
143 +
144 + html += `<rect id="square" class='${style}' x='${x}' y='${y}' title='${(date + 1) === 0 ? 'null' : DAYS[week] + ' ' + (date + 1)}' width="12px" height="12px" rx="2" ry="2" onclick="
145 + UpdateFooter(${year}, ${month}, ${(date + 1)}, ${week}, this)" onblur="" ${dotab}></rect>`
146 +
147 + week++
148 + date++
149 + }
150 + }
151 + return html
152 + }
153 +}
154 +
155 +function UpdateFooter (year, month, date, week, obj) {
156 + obj.addEventListener('blur', () => { footer.innerHTML = '' })
157 + let diff = ((new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0) - new Date(year, month, date)) / 86400000)
158 + let num = Math.abs(diff).toFixed()
159 + let calc
160 +
161 + diff < 0 ? calc = `In ${num} Day${num > 1 ? 's' : ''}.` : diff == 0 ? calc = `Today.` : calc = `${num} Day${num > 1 ? 's' : ''} ago.`
162 + footer.innerHTML = `${MONTHS[month]} ${date}, ${DAYS[week]}. ${calc}`
163 +}
164 +
165 +function getYear (diff) {
166 + location.hash = parseInt(location.hash.replace('#', '')) + parseInt(diff)
167 +}
168 +
169 +// window.onhashchange = function () {
170 +// Year(parseInt(location.hash.replace('#', '')))
171 +// }
app/page/calendar.mcssView
@@ -1,0 +1,115 @@
1 +CalendarPage {
2 + width: 100%
3 +
4 + display: grid
5 + justify-content: center
6 +}
7 +
8 +
9 +Calendar {
10 + font-family: 'input_mono_regular', monospace
11 + text-transform: uppercase
12 +
13 + display: block
14 + height: 100%
15 + min-height: 400px
16 + width: 100%
17 +
18 + padding: 0
19 + margin: 0
20 +
21 + section {
22 + position: relative
23 + top: 50%
24 + margin: 0 auto
25 + user-select: none
26 + -webkit-user-select: none
27 + -ms-user-select: none
28 + -webkit-transform: translateY(-50%)
29 + -ms-transform: translateY(-50%)
30 + transform: translateY(-50%)
31 + text-align: center
32 + }
33 +
34 + div.header {
35 + margin: 0 10px 40px 10px
36 + text-align: left
37 + align-content: flex-start
38 +
39 + p.year {
40 + font-size: 40px
41 + font-weight: bold
42 +
43 + a {
44 + text-align: center
45 + color: #000
46 + width: 30px
47 + display: inline-block
48 + margin-left: 10px
49 +
50 + :hover {
51 + color: #ffffff
52 + background: #000
53 + cursor: pointer
54 + }
55 + }
56 + }
57 +
58 + p.percentage {
59 + font-size: 20px
60 + color: #8b8b8b
61 + }
62 + }
63 +
64 + div.month {
65 + margin: 10px
66 + display: inline-block
67 + /* width:100px */
68 + /* height: 130px */
69 +
70 + div.label {
71 + font-size: 20px
72 + font-weight: bold
73 + text-align: left
74 + margin-bottom: 5px
75 + }
76 +
77 + div.graph {
78 +
79 + div {
80 + div.day {
81 + background: #000
82 + height: .8rem
83 + width: .8rem
84 +
85 + border-radius: .1rem
86 + }
87 + }
88 + }
89 + }
90 +
91 +
92 + /* p { margin: 0px; } */
93 +
94 + /* svg.graph { color:white; width: 100%; height: 100px; } */
95 + /* svg.graph text {font-family: 'input_mono_regular'; stroke:none; fill:#8b8b8b; font-size:14px; text-anchor: middle; } */
96 + /* svg.graph text.dayLabel { font-size: 10px; } */
97 + /* svg.graph rect { stroke:none; outline: none; } */
98 + /* svg.graph rect:hover, rect:focus { fill: #ff1e00 !important; cursor:pointer; } */
99 +
100 + /* svg.graph rect.null { fill: none; stroke: none;} */
101 + /* svg.graph rect.today { fill:#ff1e00; } */
102 + /* svg.graph rect.day { fill:#8b8b8b; } */
103 + /* svg.graph rect.weekend { fill:#747474 } */
104 + /* svg.graph rect.gone { fill:#000000 } */
105 + /* svg.graph path { stroke-linecap: butt; stroke-dasharray: 1,1; fill:none; stroke:#333; stroke-width:13px } */
106 +
107 + /* @media only screen and (min-width: 1440px) */
108 + /* { section { width: 1440px; }} */
109 +
110 + /* @media only screen and (max-width: 1440px) */
111 + /* { section { width: 720px; }} */
112 +
113 + /* @media only screen and (max-width: 720px) */
114 + /* { section { width: 360px; }} */
115 +}
router/sync/routes.jsView
@@ -4,10 +4,11 @@
44 exports.gives = nest('router.sync.routes')
55
66 exports.needs = nest({
77 'app.page': {
8 + 'calendar': 'first',
9 + 'blob': 'first',
810 'errors': 'first',
9- 'blob': 'first',
1011 'channel': 'first',
1112 'imageSearch': 'first',
1213 'notifications': 'first',
1314 'posts': 'first',
@@ -28,8 +29,9 @@
2829 const pages = api.app.page
2930
3031 // loc = location
3132 const routes = [
33 + [ loc => loc.page === 'calendar', pages.calendar ],
3234 [ loc => loc.page === 'errors', pages.errors ],
3335 [ loc => loc.page === 'imageSearch', pages.imageSearch ],
3436 [ loc => loc.page === 'notifications', pages.notifications ],
3537 [ loc => loc.page === 'posts', pages.posts ],

Built with git-ssb-web