Commit c81b0e59ddfd3706702f50f77e7a7b4d0836a80f
extract module Marama from /calendar
mixmix committed on 8/17/2018, 7:47:59 AMParent: cf9305a29b08a6ec02b844e7ec9a6970976e6b07
Files changed
app/page/calendar.js | changed |
app/page/calendar.mcss | changed |
app/styles/mcss/marama.js | added |
message/html/layout/default.mcss | changed |
package-lock.json | changed |
package.json | changed |
app/page/calendar.js | ||
---|---|---|
@@ -1,6 +1,7 @@ | ||
1 | 1 … | const nest = require('depnest') |
2 | 2 … | const { h, Array: MutantArray, map, Struct, computed, watch, throttle, resolve } = require('mutant') |
3 … | +const Month = require('marama') | |
3 | 4 … | |
4 | 5 … | const pull = require('pull-stream') |
5 | 6 … | const { isMsg } = require('ssb-ref') |
6 | 7 … | |
@@ -30,17 +31,17 @@ | ||
30 | 31 … | }, '/calendar') |
31 | 32 … | } |
32 | 33 … | |
33 | 34 … | function calendarPage (location) { |
34 | - const d = new Date() | |
35 … | + const d = startOfDay() | |
35 | 36 … | const state = Struct({ |
36 | - today: new Date(d.getFullYear(), d.getMonth(), d.getDate()), | |
37 … | + today: d, | |
37 | 38 … | year: d.getFullYear(), |
38 | 39 … | events: MutantArray([]), |
39 | 40 … | attending: MutantArray([]), |
40 | 41 … | range: Struct({ |
41 | - gte: new Date(d.getFullYear(), d.getMonth(), d.getDate()), | |
42 | - lt: new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1) | |
42 … | + gte: d, | |
43 … | + lt: endOfDay(d) | |
43 | 44 … | }) |
44 | 45 … | }) |
45 | 46 … | |
46 | 47 … | watch(state.year, year => getGatherings(year, state.events, api)) |
@@ -199,17 +200,12 @@ | ||
199 | 200 … | // they formed the foundation of this work |
200 | 201 … | |
201 | 202 … | // Calendar takes events of format { date: Date, data: { attending: Boolean, ... } } |
202 | 203 … | |
203 | -const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ] | |
204 | -const DAYS = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ] | |
205 | - | |
206 | 204 … | function Calendar (state) { |
207 | 205 … | // TODO assert events is an Array of object |
208 | 206 … | // of form { date, data } |
209 | 207 … | |
210 | - const { gte, lt } = state.range | |
211 | - | |
212 | 208 … | return h('Calendar', [ |
213 | 209 … | h('div.header', [ |
214 | 210 … | h('div.year', [ |
215 | 211 … | state.year, |
@@ -222,103 +218,24 @@ | ||
222 | 218 … | ev.data.attending = attending.includes(ev.data.key) |
223 | 219 … | return ev |
224 | 220 … | }) |
225 | 221 … | |
226 | - return MONTHS.map((month, monthIndex) => { | |
227 | - return Month({ month, monthIndex, today, year, events, range, gte, lt }) | |
222 … | + return Array(12).fill(0).map((_, i) => { | |
223 … | + return Month({ year, month: i + 1, events, range, setRange }) | |
228 | 224 … | }) |
229 | 225 … | })) |
230 | 226 … | ]) |
231 | -} | |
232 | 227 … | |
233 | -function Month ({ month, monthIndex, today, year, events, range, gte, lt }) { | |
234 | - const monthLength = new Date(year, monthIndex + 1, 0).getDate() | |
235 | - // NOTE Date takes month as a monthIndex i.e. april = 3 | |
236 | - // and day = 0 goes back a day | |
237 | - const days = Array(monthLength).fill().map((_, i) => i + 1) | |
238 | - | |
239 | - var weekday | |
240 | - var week | |
241 | - var offset = getDay(new Date(year, monthIndex, 1)) - 1 | |
242 | - | |
243 | - const setMonthRange = (ev) => { | |
244 | - gte.set(new Date(year, monthIndex, 1)) | |
245 | - lt.set(new Date(year, monthIndex + 1, 1)) | |
228 … | + function setRange ({ gte, lt }) { | |
229 … | + // TODO some type checking | |
230 … | + if (gte) state.range.gte.set(gte) | |
231 … | + if (lt) state.range.lt.set(lt) | |
246 | 232 … | } |
247 | - | |
248 | - return h('CalendarMonth', [ | |
249 | - h('div.month-name', { 'ev-click': setMonthRange }, month.substr(0, 2)), | |
250 | - h('div.days', { style: {display: 'grid'} }, [ | |
251 | - DAYS.map((day, i) => DayName(day, i)), | |
252 | - days.map(Day) | |
253 | - ]) | |
254 | - ]) | |
255 | - | |
256 | - function Day (day) { | |
257 | - const date = new Date(year, monthIndex, day) | |
258 | - const dateEnd = new Date(year, monthIndex, day + 1) | |
259 | - weekday = getDay(date) | |
260 | - week = Math.ceil((day + offset) / 7) | |
261 | - | |
262 | - const eventsOnDay = events.filter(e => { | |
263 | - return e.date >= date && e.date < dateEnd | |
264 | - }) | |
265 | - | |
266 | - const attending = eventsOnDay.some(e => { | |
267 | - return e.data.attending | |
268 | - }) | |
269 | - | |
270 | - const opts = { | |
271 | - attributes: { | |
272 | - 'title': `${year}-${monthIndex + 1}-${day}`, | |
273 | - 'data-date': `${year}-${monthIndex + 1}-${day}` | |
274 | - }, | |
275 | - style: { | |
276 | - 'grid-row': `${weekday} / ${weekday + 1}`, | |
277 | - 'grid-column': `${week + 1} / ${week + 2}` | |
278 | - // column moved by 1 to make space for labels | |
279 | - }, | |
280 | - classList: [ | |
281 | - date < today ? '-past' : '-future', | |
282 | - eventsOnDay.length ? '-events' : '', | |
283 | - date >= range.gte && date < range.lt ? '-selected' : '', | |
284 | - attending ? '-attending' : '' | |
285 | - ], | |
286 | - 'ev-click': (ev) => { | |
287 | - if (ev.shiftKey) { | |
288 | - dateEnd >= resolve(lt) ? lt.set(dateEnd) : gte.set(date) | |
289 | - return | |
290 | - } | |
291 | - | |
292 | - gte.set(date) | |
293 | - lt.set(dateEnd) | |
294 | - } | |
295 | - } | |
296 | - | |
297 | - if (!eventsOnDay.length) return h('CalendarDay', opts) | |
298 | - | |
299 | - return h('CalendarDay', opts, [ | |
300 | - // TODO add awareness of whether I'm going to events | |
301 | - // TODO try a FontAwesome circle | |
302 | - h('div.dot', [ | |
303 | - // Math.random() > 0.3 ? h('div') : '' | |
304 | - ]) | |
305 | - ]) | |
306 | - } | |
307 | 233 … | } |
308 | 234 … | |
309 | -function DayName (day, index) { | |
310 | - return h('CalendarDayName', { | |
311 | - style: { | |
312 | - 'grid-row': `${index + 1} / ${index + 2}`, | |
313 | - 'grid-column': '1 / 2' | |
314 | - } | |
315 | - }, day.substr(0, 1)) | |
235 … | +function startOfDay (d = new Date()) { | |
236 … | + return new Date(d.getFullYear(), d.getMonth(), d.getDate()) | |
316 | 237 … | } |
317 | 238 … | |
318 | -function getDay (date) { | |
319 | - const dayIndex = date.getDay() | |
320 | - return dayIndex === 0 ? 7 : dayIndex | |
321 | - | |
322 | - // Weeks run 0...6 (Sun - Sat) | |
323 | - // this shifts those days around by 1 | |
239 … | +function endOfDay (d = new Date()) { | |
240 … | + return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1) | |
324 | 241 … | } |
app/page/calendar.mcss | |||
---|---|---|---|
@@ -63,9 +63,9 @@ | |||
63 | 63 … | ||
64 | 64 … | div.months { | |
65 | 65 … | display: flex | |
66 | 66 … | ||
67 | - div.CalendarMonth { | ||
67 … | + div.Marama { | ||
68 | 68 … | margin-right: 20px | |
69 | 69 … | } | |
70 | 70 … | } | |
71 | 71 … | ||
@@ -79,100 +79,9 @@ | |||
79 | 79 … | /* { section { width: 360px; }} */ | |
80 | 80 … | } | |
81 | 81 … | ||
82 | 82 … | ||
83 | -CalendarMonth { | ||
84 | - --day-radius: 6px | ||
85 | - --day-border-radius: 2px | ||
86 | - --day-gap: 1px | ||
87 | 83 … | ||
88 | - width: calc(7 * 2 * var(--day-radius) + 6 * var(--day-gap)) | ||
89 | - /* max of 6 weeks + day labels, with gaps between each */ | ||
90 | - | ||
91 | - div.month-name { | ||
92 | - font-size: 20px | ||
93 | - font-weight: bold | ||
94 | - text-align: left | ||
95 | - cursor: pointer | ||
96 | - margin-bottom: 5px | ||
97 | - } | ||
98 | - | ||
99 | - div.days { | ||
100 | - grid-gap: var(--day-gap) | ||
101 | - justify-content: start | ||
102 | - align-content: start | ||
103 | - | ||
104 | - div.CalendarDay {} | ||
105 | - } | ||
106 | -} | ||
107 | - | ||
108 | -CalendarDay { | ||
109 | - width: calc(2 * var(--day-radius)) | ||
110 | - height: calc(2 * var(--day-radius)) | ||
111 | - cursor: pointer | ||
112 | - | ||
113 | - border-radius: var(--day-border-radius) | ||
114 | - | ||
115 | - display: flex | ||
116 | - justify-content: center | ||
117 | - align-items: center | ||
118 | - | ||
119 | - -past { | ||
120 | - background: hsl(0, 0%, 20%) | ||
121 | - } | ||
122 | - | ||
123 | - -future { | ||
124 | - background: hsl(0, 0%, 80%) | ||
125 | - } | ||
126 | - | ||
127 | - -selected { | ||
128 | - background: deeppink | ||
129 | - | ||
130 | - -future { | ||
131 | - background: deepskyblue | ||
132 | - } | ||
133 | - } | ||
134 | - | ||
135 | - -events { | ||
136 | - /* border-radius: var(--day-radius) */ | ||
137 | - /* background: hsla(277, 57%, 45%, 1) */ | ||
138 | - | ||
139 | - div.dot { | ||
140 | - background: none | ||
141 | - width: 4px | ||
142 | - height: 4px | ||
143 | - border: 1px solid #fff | ||
144 | - border-radius: 8px | ||
145 | - } | ||
146 | - | ||
147 | - -past { | ||
148 | - } | ||
149 | - | ||
150 | - -attending { | ||
151 | - div.dot { | ||
152 | - background: #fff | ||
153 | - width: 6px | ||
154 | - height: 6px | ||
155 | - border: none | ||
156 | - } | ||
157 | - } | ||
158 | - } | ||
159 | -} | ||
160 | - | ||
161 | -CalendarDayName { | ||
162 | - color: hsl(0, 0%, 40%) | ||
163 | - font-family: arial | ||
164 | - font-size: calc(2 * var(--day-radius) - 3px) | ||
165 | - /* line-height: calc(2 * var(--day-radius) - 2px) */ | ||
166 | - | ||
167 | - width: calc(2 * var(--day-radius)) | ||
168 | - height: calc(2 * var(--day-radius)) | ||
169 | - | ||
170 | - display: flex | ||
171 | - align-items: center | ||
172 | - justify-content: center | ||
173 | -} | ||
174 | - | ||
175 | 84 … | CalendarEvents { | |
176 | 85 … | width: 50rem | |
177 | 86 … | margin-right: 6rem | |
178 | 87 … |
app/styles/mcss/marama.js | ||
---|---|---|
@@ -1,0 +1,11 @@ | ||
1 … | +const nest = require('depnest') | |
2 … | +const requireStyle = require('require-style') | |
3 … | +const { assign } = Object | |
4 … | + | |
5 … | +exports.gives = nest('styles.css') | |
6 … | + | |
7 … | +exports.create = function (api) { | |
8 … | + return nest('styles.css', (sofar = {}) => { | |
9 … | + return assign(sofar, { mcss: requireStyle('marama') }) | |
10 … | + }) | |
11 … | +} |
message/html/layout/default.mcss | ||
---|---|---|
@@ -118,9 +118,10 @@ | ||
118 | 118 … | |
119 | 119 … | /* UnreadFeature (search codebase for this if extracting) */ |
120 | 120 … | |
121 | 121 … | /* initially read */ |
122 | - -read { } | |
122 … | + -read { | |
123 … | + } | |
123 | 124 … | |
124 | 125 … | /* initially unread */ |
125 | 126 … | -unread { |
126 | 127 … | section.top { |
package-lock.json | ||
---|---|---|
The diff is too large to show. Use a local git client to view these changes. Old file size: 328941 bytes New file size: 330957 bytes |
Built with git-ssb-web