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