git ssb - update API to use onSelect · mixmix/marama@4620bdff

Commit 4620bdffd9c4876ad1655c35b266db030df42b57

update API to use onSelect

mixmix committed on 8/21/2018, 4:21:24 AM
Parent: f9d6722111546ffee8db81eaf805211d19e68f64

Files changed

README.md	changed
day-label.js	changed
day-tile.js	changed
example/index-classic-cal.js	deleted
example/1_classic-cal.js	added
example/index-letnice.js	deleted
example/1_letnice.js	added
example/index-marama.js	deleted
example/1_marama.js	added
index.js	changed

README.mdView
		@@ -31,22 +31,37 @@
31	31 …
32	32 …
33	33 …	## API
34	34 …
35		-Marama can take the following options:
	35 …	+Marama can take the following opts (all optional):
36	36 …
37	37 …	```js
38	38 …	{
39		- month, // month number (by common defn, e.g. 4 is April)
40		- events // (optional) an Array of form: [{ date: Date, data: { ... } }]
41		- year, // (optional) defaults to current year
42		- range, // (optional) an Object of form { gte: Date, lt: Date } to highlight
43		- setRange, // (optional) a callback which receives a range on clicks { gte, lt }
44		- styles, // (optional) Object, _see below_
45		- today // (optional) a Date which can be used to over-ride the definition of today
	39 …	+ events // an Array of form: [{ date: Date, data: { ... } }] (default: [])
	40 …	+ month, // month number, by common defn e.g. 4 = April (default: current month)
	41 …	+ year, // year we're in (default: current year)
	42 …	+ today // a Date which can be used to over-ride the definition of today
	43 …	+ range, // a range to highlight, expects Object of form { gte: Date, lt: Date } (default: null}
	44 …	+ onSelect, // a callback function _see below_
	45 …	+ styles, // Object, _see below_
46	46 …	}
47	47 …	```
48	48 …
	49 …	+Note that if `today` is set, the "current month" and "current year" defaults will be based on this.
	50 …	+
	51 …	+### `onSelect`
	52 …	+
	53 …	+A function that is called with data of the form : `{ gte: Date, lt: Date, events: Array }`, where:
	54 …	+ - `events` is an Array of all events in the range between `gte` and `lt`
	55 …	+ - `gte` and `lte` are the lower and upper bounds of a range defined by what you clicked on
	56 …	+
	57 …	+Note the window of time for a left-click is 1 day wide, but marama also listens for a _shift-click_.
	58 …	+A shift-click takes any currently defined `range` and stretches it out to the point you've shift-clicked.
	59 …	+By managing state outside of marama, it's possible to make some nice interactive featureswith this.
	60 …	+
	61 …	+
	62 …	+### `styles`
	63 …	+
49	64 …	The `styles` option can be used to change how Marama looks programmatically
50	65 …
51	66 …	```js
52	67 …	{

day-label.jsView
		@@ -10,6 +10,6 @@
10	10 …	'grid-row': `${index + 1} / ${index + 2}`,
11	11 …	'grid-column': '1 / 2'
12	12 …	}
13	13 …
14		- return h('MaramaDayLabel', { style }, day.substr(0, 1))
	14 …	+ return h('div.MaramaDayLabel', { style }, day.substr(0, 1))
15	15 …	}

day-tile.jsView
		@@ -1,17 +1,14 @@
1	1 …	const h = require('mutant/h')
2	2 …	const getDay = require('./lib/get-day')
3	3 …
4		-module.exports = function Day ({ today, year, monthIndex, day, offset, weekFormat, showNumbers, events, range, setRange }) {
	4 …	+module.exports = function Day ({ today, year, monthIndex, day, offset, weekFormat, showNumbers, events, range, onSelect }) {
5	5 …	const date = new Date(year, monthIndex, day)
6	6 …	const dateEnd = new Date(year, monthIndex, day + 1)
7	7 …	const weekday = getDay(date)
8	8 …	const week = Math.ceil((day + offset) / 7)
9	9 …
10		- const eventsOnDay = events.filter(e => {
11		- return e.date >= date && e.date < dateEnd
12		- })
13		-
	10 …	+ const eventsOnDay = eventsInRange({gte: date, lt: dateEnd})
14	11 …	const attending = eventsOnDay.some(e => {
15	12 …	return e.data.attending
16	13 …	})
17	14 …
		@@ -26,43 +23,60 @@
26	23 …	'grid-column': `${week + 1} / ${week + 2}` // new weeks on each col (leaving space for labels col)
27	24 …	}
28	25 …
29	26 …	const opts = {
30		- attributes: {
31		- 'title': `${year}-${monthIndex + 1}-${day}`,
32		- 'data-date': `${year}-${monthIndex + 1}-${day}`
33		- },
34	27 …	style,
35	28 …	classList: [
36	29 …	date < today ? '-past' : '-future',
37	30 …	eventsOnDay.length ? '-events' : '',
38	31 …	inRange(range, date) ? '-range' : '',
39	32 …	attending ? '-attending' : ''
40	33 …	],
41		- 'ev-click': handleRangeSetting
	34 …	+ attributes: {
	35 …	+ 'title': `${year}-${monthIndex + 1}-${day}`,
	36 …	+ 'data-date': `${year}-${monthIndex + 1}-${day}`
	37 …	+ }
42	38 …	}
	39 …	+ if (onSelect) opts['ev-click'] = handleSelect
43	40 …
44		- return h('MaramaDayTile', opts, [
	41 …	+ return h('div.MaramaDayTile', opts, [
45	42 …	showNumbers
46		- ? day : !eventsOnDay.length
	43 …	+ ? day : eventsOnDay.length
47	44 …	? h('div.dot') : ''
48	45 …	])
49	46 …
50		- function handleRangeSetting (ev) {
51		- if (ev.shiftKey && range && range.lt) {
52		- dateEnd >= range.lt
53		- ? setRange({ lt: dateEnd })
54		- : setRange({ gte: date })
55		- return
	47 …	+ /// helpers
	48 …	+
	49 …	+ function eventsInRange (range) {
	50 …	+ return events.filter(e => inRange(range, e.date))
	51 …	+ }
	52 …	+
	53 …	+ function handleSelect (ev) {
	54 …	+ if (ev.shiftKey && validRange(range)) {
	55 …	+ const newRange = dateEnd >= range.lt
	56 …	+ ? { gte: range.gte, lt: dateEnd }
	57 …	+ : { gte: date, lt: range.lt }
	58 …	+ newRange.events = eventsInRange(newRange)
	59 …	+
	60 …	+ return onSelect(newRange)
56	61 …	}
57	62 …
58		- setRange({
	63 …	+ return onSelect({
59	64 …	gte: date,
60		- lt: dateEnd
	65 …	+ lt: dateEnd,
	66 …	+ events: eventsOnDay
61	67 …	})
62	68 …	}
63	69 …	}
64	70 …
65	71 …	function inRange (range, date) {
66		- if (!range \|\| (!range.gte && !range.lt)) return false
	72 …	+ if (!validRange(range)) return false
67	73 …	return (date >= range.gte) && (date < range.lt)
68	74 …	}
	75 …	+
	76 …	+function validRange (range) {
	77 …	+ if (!range) return false
	78 …	+ if (!(range.gte instanceof Date)) return false
	79 …	+ if (!(range.lt instanceof Date)) return false
	80 …	+
	81 …	+ return true
	82 …	+}

example/index-classic-cal.jsView
		@@ -1,86 +1,0 @@
1		-// run this from the terminal using :
2		-// npx electro example/index-classic-cal.js
3		-
4		-const { h } = require('mutant')
5		-const compile = require('micro-css')
6		-
7		-const Marama = require('../')
8		-require('../lib/styles-inject')()
9		-
10		-const marama = Marama({
11		- today: new Date(2018, 6, 12),
12		- events: [
13		- { date: new Date(2018, 3, 4), data: { attending: true } },
14		- { date: new Date(2018, 6, 5), data: { attending: true } },
15		- { date: new Date(2018, 6, 7), data: { attending: false } },
16		- { date: new Date(2018, 6, 17), data: { attending: true } },
17		- { date: new Date(2018, 6, 21), data: { attending: false } },
18		- { date: new Date(2018, 6, 27), data: { attending: true } }
19		- ],
20		- // range: {
21		- // gte: new Date(2018, 6, 9),
22		- // lt: new Date(2018, 6, 23)
23		- // },
24		- styles: {
25		- weekFormat: 'rows',
26		- showNumbers: true,
27		- tileRadius: 16,
28		- tileGap: 8
29		- }
30		-})
31		-
32		-const page = h('div',
33		- {
34		- style: { margin: '3rem' }
35		- },
36		- marama
37		-)
38		-
39		-document.body.appendChild(page)
40		-
41		-//
42		-const mcss = `
43		-MaramaDayTile {
44		- border-radius: 4rem
45		-
46		- -past {
47		- background: none
48		- color: hsl(0, 0%, 60%)
49		-
50		- -events {
51		- border: 1px solid hsl(0, 0%, 40%)
52		-
53		- -attending {
54		- background: hsl(0, 0%, 40%)
55		- color: #fff
56		- }
57		- }
58		- }
59		-
60		- -future {
61		- background: none
62		-
63		- -events {
64		- border: 1px solid deepskyblue
65		- color: deepskyblue
66		-
67		- -attending {
68		- background: deepskyblue
69		- color: #fff
70		- }
71		- }
72		- }
73		-
74		- -range {
75		- background: deeppink
76		-
77		- -future {
78		- background: deepskyblue
79		- }
80		- }
81		-}
82		-
83		-`
84		-document.head.appendChild(
85		- h('style', { innerHTML: compile(mcss) })
86		-)

example/1_classic-cal.jsView
		@@ -1,0 +1,86 @@
	1 …	+// run this from the terminal using :
	2 …	+// npx electro example/1_classic-cal.js
	3 …	+
	4 …	+const { h } = require('mutant')
	5 …	+const compile = require('micro-css')
	6 …	+
	7 …	+const Marama = require('../')
	8 …	+require('../lib/styles-inject')()
	9 …	+
	10 …	+const marama = Marama({
	11 …	+ today: new Date(2018, 6, 12),
	12 …	+ events: [
	13 …	+ { date: new Date(2018, 3, 4), data: { attending: true } },
	14 …	+ { date: new Date(2018, 6, 5), data: { attending: true } },
	15 …	+ { date: new Date(2018, 6, 7), data: { attending: false } },
	16 …	+ { date: new Date(2018, 6, 17), data: { attending: true } },
	17 …	+ { date: new Date(2018, 6, 21), data: { attending: false } },
	18 …	+ { date: new Date(2018, 6, 27), data: { attending: true } }
	19 …	+ ],
	20 …	+ // range: {
	21 …	+ // gte: new Date(2018, 6, 9),
	22 …	+ // lt: new Date(2018, 6, 23)
	23 …	+ // },
	24 …	+ styles: {
	25 …	+ weekFormat: 'rows',
	26 …	+ showNumbers: true,
	27 …	+ tileRadius: 16,
	28 …	+ tileGap: 8
	29 …	+ }
	30 …	+})
	31 …	+
	32 …	+const page = h('div',
	33 …	+ {
	34 …	+ style: { margin: '3rem' }
	35 …	+ },
	36 …	+ marama
	37 …	+)
	38 …	+
	39 …	+document.body.appendChild(page)
	40 …	+
	41 …	+//
	42 …	+const mcss = `
	43 …	+MaramaDayTile {
	44 …	+ border-radius: 4rem
	45 …	+
	46 …	+ -past {
	47 …	+ background: none
	48 …	+ color: hsl(0, 0%, 60%)
	49 …	+
	50 …	+ -events {
	51 …	+ border: 1px solid hsl(0, 0%, 40%)
	52 …	+
	53 …	+ -attending {
	54 …	+ background: hsl(0, 0%, 40%)
	55 …	+ color: #fff
	56 …	+ }
	57 …	+ }
	58 …	+ }
	59 …	+
	60 …	+ -future {
	61 …	+ background: none
	62 …	+
	63 …	+ -events {
	64 …	+ border: 1px solid deepskyblue
	65 …	+ color: deepskyblue
	66 …	+
	67 …	+ -attending {
	68 …	+ background: deepskyblue
	69 …	+ color: #fff
	70 …	+ }
	71 …	+ }
	72 …	+ }
	73 …	+
	74 …	+ -range {
	75 …	+ background: deeppink
	76 …	+
	77 …	+ -future {
	78 …	+ background: deepskyblue
	79 …	+ }
	80 …	+ }
	81 …	+}
	82 …	+
	83 …	+`
	84 …	+document.head.appendChild(
	85 …	+ h('style', { innerHTML: compile(mcss) })
	86 …	+)

example/index-letnice.jsView
		@@ -1,35 +1,0 @@
1		-// run this from the terminal using :
2		-// npx electro example/index-letnice.js
3		-
4		-const { h } = require('mutant')
5		-
6		-const Marama = require('../')
7		-require('../lib/styles-inject')()
8		-
9		-const marama = Marama({
10		- today: new Date(2018, 6, 12),
11		- events: [
12		- { date: new Date(2018, 3, 4), data: { attending: true } },
13		- { date: new Date(2018, 6, 5), data: { attending: true } },
14		- { date: new Date(2018, 6, 7), data: { attending: false } },
15		- { date: new Date(2018, 6, 17), data: { attending: true } },
16		- { date: new Date(2018, 6, 21), data: { attending: false } },
17		- { date: new Date(2018, 6, 27), data: { attending: true } }
18		- ],
19		- range: {
20		- gte: new Date(2018, 6, 9),
21		- lt: new Date(2018, 6, 23)
22		- },
23		- styles: {
24		- weekFormat: 'columns'
25		- }
26		-})
27		-
28		-const page = h('div',
29		- {
30		- style: { margin: '3rem' }
31		- },
32		- marama
33		-)
34		-
35		-document.body.appendChild(page)

example/1_letnice.jsView
		@@ -1,0 +1,35 @@
	1 …	+// run this from the terminal using :
	2 …	+// npx electro example/1_letnice.js
	3 …	+
	4 …	+const { h } = require('mutant')
	5 …	+
	6 …	+const Marama = require('../')
	7 …	+require('../lib/styles-inject')()
	8 …	+
	9 …	+const marama = Marama({
	10 …	+ today: new Date(2018, 6, 12),
	11 …	+ events: [
	12 …	+ { date: new Date(2018, 3, 4), data: { attending: true } },
	13 …	+ { date: new Date(2018, 6, 5), data: { attending: true } },
	14 …	+ { date: new Date(2018, 6, 7), data: { attending: false } },
	15 …	+ { date: new Date(2018, 6, 17), data: { attending: true } },
	16 …	+ { date: new Date(2018, 6, 21), data: { attending: false } },
	17 …	+ { date: new Date(2018, 6, 27), data: { attending: true } }
	18 …	+ ],
	19 …	+ range: {
	20 …	+ gte: new Date(2018, 6, 9),
	21 …	+ lt: new Date(2018, 6, 23)
	22 …	+ },
	23 …	+ styles: {
	24 …	+ weekFormat: 'columns'
	25 …	+ }
	26 …	+})
	27 …	+
	28 …	+const page = h('div',
	29 …	+ {
	30 …	+ style: { margin: '3rem' }
	31 …	+ },
	32 …	+ marama
	33 …	+)
	34 …	+
	35 …	+document.body.appendChild(page)

example/index-marama.jsView
		@@ -1,37 +1,0 @@
1		-// run this from the terminal using :
2		-// npx electro example/index-classic-cal.js
3		-
4		-const { h } = require('mutant')
5		-
6		-const Marama = require('../')
7		-require('../lib/styles-inject')()
8		-
9		-const marama = Marama({
10		- today: new Date(2018, 6, 12),
11		- events: [
12		- { date: new Date(2018, 3, 4), data: { attending: true } },
13		- { date: new Date(2018, 6, 5), data: { attending: true } },
14		- { date: new Date(2018, 6, 7), data: { attending: false } },
15		- { date: new Date(2018, 6, 17), data: { attending: true } },
16		- { date: new Date(2018, 6, 21), data: { attending: false } },
17		- { date: new Date(2018, 6, 27), data: { attending: true } }
18		- ],
19		- range: {
20		- gte: new Date(2018, 6, 9),
21		- lt: new Date(2018, 6, 23)
22		- },
23		- styles: {
24		- weekFormat: 'rows',
25		- tileRadius: 18,
26		- tileGap: 4
27		- }
28		-})
29		-
30		-const page = h('div',
31		- {
32		- style: { margin: '3rem' }
33		- },
34		- marama
35		-)
36		-
37		-document.body.appendChild(page)

example/1_marama.jsView
		@@ -1,0 +1,37 @@
	1 …	+// run this from the terminal using :
	2 …	+// npx electro example/1_classic-cal.js
	3 …	+
	4 …	+const { h } = require('mutant')
	5 …	+
	6 …	+const Marama = require('../')
	7 …	+require('../lib/styles-inject')()
	8 …	+
	9 …	+const marama = Marama({
	10 …	+ today: new Date(2018, 6, 12),
	11 …	+ events: [
	12 …	+ { date: new Date(2018, 3, 4), data: { attending: true } },
	13 …	+ { date: new Date(2018, 6, 5), data: { attending: true } },
	14 …	+ { date: new Date(2018, 6, 7), data: { attending: false } },
	15 …	+ { date: new Date(2018, 6, 17), data: { attending: true } },
	16 …	+ { date: new Date(2018, 6, 21), data: { attending: false } },
	17 …	+ { date: new Date(2018, 6, 27), data: { attending: true } }
	18 …	+ ],
	19 …	+ range: {
	20 …	+ gte: new Date(2018, 6, 9),
	21 …	+ lt: new Date(2018, 6, 23)
	22 …	+ },
	23 …	+ styles: {
	24 …	+ weekFormat: 'rows', // default
	25 …	+ tileRadius: 18,
	26 …	+ tileGap: 4
	27 …	+ }
	28 …	+})
	29 …	+
	30 …	+const page = h('div',
	31 …	+ {
	32 …	+ style: { margin: '3rem' }
	33 …	+ },
	34 …	+ marama
	35 …	+)
	36 …	+
	37 …	+document.body.appendChild(page)

index.jsView
		@@ -11,10 +11,10 @@
11	11 …	const {
12	12 …	events = [],
13	13 …	month = day.getMonth() + 1, // month number (common defn)
14	14 …	year = day.getFullYear(),
15		- range,
16		- setRange = () => {},
	15 …	+ range = null,
	16 …	+ onSelect = () => {},
17	17 …	styles = {},
18	18 …	today = day
19	19 …	} = opts
20	20 …	if (opts.style) console.error('Marama: you have passed in style instead of styles!')
		@@ -33,12 +33,12 @@
33	33 …	offset: getDay(new Date(year, monthIndex, 1)) - 1, // how far into the week the month starts
34	34 …	weekFormat: getWeekFormat(styles),
35	35 …	showNumbers: Boolean(styles.showNumbers),
36	36 …	range,
37		- setRange
	37 …	+ onSelect
38	38 …	}
39	39 …
40		- return h('Marama', [
	40 …	+ return h('div.Marama', [
41	41 …	h('div.days', { style: getStyles(styles) }, [
42	42 …	DAYS.map((day, i) => DayLabel(day, i, dayOpts.weekFormat)),
43	43 …	days.map(day => {
44	44 …	dayOpts.day = day // note we're mutating this object (might save memory?)

Built with git-ssb-web

mixmix / marama

Commit 4620bdffd9c4876ad1655c35b266db030df42b57

update API to use onSelect

Files changed