git ssb

0+

mixmix / patchbay-scry



Commit c0d9e6f7ae17e28ebcd60f8ee056629da2ff95e0

Browse Files

(re)factor out day-picker

mixmix committed on 8/27/2018, 5:31:23 AM
Parent: a9d6471cd7bbf46847dddc28bef3d820a7a66620

Files changed

views/component/day-picker.jsadded
views/component/day-picker.mcssadded
views/new.jschanged
views/new.mcsschanged
views/component/day-picker.jsView
@@ -1,0 +1,65 @@
1 …+const { h, computed } = require('mutant')
2 …+const Marama = require('marama')
3 …+
4 …+module.exports = function DayPicker (state) {
5 …+ return h('ScryDayPicker', [
6 …+ h('div.month-picker', [
7 …+ h('button', { 'ev-click': () => setMonth(-1) }, '<'),
8 …+ MonthTitle(state.monthIndex),
9 …+ h('button', { 'ev-click': () => setMonth(+1) }, '>')
10 …+ ]),
11 …+ computed(state, ({ monthIndex, days }) => {
12 …+ return Marama({
13 …+ monthIndex,
14 …+ events: days,
15 …+ onSelect,
16 …+ styles: {
17 …+ weekFormat: 'rows',
18 …+ showNumbers: true,
19 …+ tileRadius: 16,
20 …+ tileGap: 8
21 …+ }
22 …+ })
23 …+ })
24 …+ ])
25 …+
26 …+ function setMonth (d) {
27 …+ state.monthIndex.set(state.monthIndex() + d)
28 …+ }
29 …+
30 …+ function onSelect ({ gte, lt, events: days }) {
31 …+ if (!days.length) addEmptyEvent()
32 …+ else clearDay()
33 …+
34 …+ state.pristine.set(false)
35 …+
36 …+ function addEmptyEvent () {
37 …+ state.days.push(Event(gte))
38 …+ }
39 …+ function clearDay () {
40 …+ const filteredEvents = state.days().filter(e => !days.includes(e))
41 …+ state.days.set(filteredEvents)
42 …+ }
43 …+ }
44 …+}
45 …+
46 …+function MonthTitle (monthIndex) {
47 …+ const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
48 …+
49 …+ return computed(monthIndex, mi => {
50 …+ const view = new Date()
51 …+ view.setMonth(mi)
52 …+
53 …+ return `${MONTHS[view.getMonth()]} ${view.getFullYear()}`
54 …+
55 …+ // while (monthIndex < 0) { monthIndex += 12 }
56 …+ // return `${MONTHS[(monthIndex) % 12]} ${year}`
57 …+ })
58 …+}
59 …+
60 …+function Event (date) {
61 …+ return {
62 …+ date,
63 …+ data: {attending: true}
64 …+ }
65 …+}
views/component/day-picker.mcssView
@@ -1,0 +1,32 @@
1 …+ScryDayPicker {
2 …+ background: #fff
3 …+ padding: var(--boundary) 3rem
4 …+ border-radius: var(--br)
5 …+
6 …+ div.month-picker {
7 …+ color: #444
8 …+ font-family: sans
9 …+ font-size: 1.15rem
10 …+
11 …+ display: flex
12 …+ justify-content: space-between
13 …+ align-items: center
14 …+
15 …+ margin-bottom: 1rem
16 …+
17 …+ button {
18 …+ color: var(--feature-color)
19 …+ font-size: .8rem
20 …+
21 …+ background: none
22 …+ border: none
23 …+ cursor: pointer
24 …+ font-size: 1.5rem
25 …+
26 …+ :focus { outline: none }
27 …+ }
28 …+ }
29 …+
30 …+ div.Marama {}
31 …+
32 …+}
views/new.jsView
@@ -1,6 +1,6 @@
11 … const { h, Value, Struct, Array: MutantArray, when, computed } = require('mutant')
2-const Marama = require('marama')
2 …+const DayPicker = require('./component/day-picker.js')
33 … const TimePicker = require('./component/time-picker.js')
44 …
55 … module.exports = function ScryNew (opts) {
66 … const {
@@ -14,28 +14,9 @@
1414 … times: MutantArray([])
1515 … })
1616 …
1717 … return h('ScryNew', [
18- h('div.cal-picker', [
19- h('div.month-picker', [
20- h('button', { 'ev-click': () => setMonth(-1) }, '<'),
21- MonthTitle(state.monthIndex),
22- h('button', { 'ev-click': () => setMonth(+1) }, '>')
23- ]),
24- computed(state, ({ monthIndex, days }) => {
25- return Marama({
26- monthIndex,
27- events: days,
28- onSelect,
29- styles: {
30- weekFormat: 'rows',
31- showNumbers: true,
32- tileRadius: 16,
33- tileGap: 8
34- }
35- })
36- })
37- ]),
18 …+ DayPicker(state),
3819 … when(state.pristine,
3920 … h('div.time-picker-pristine', [
4021 … h('label', 'Dates and Times'),
4122 … h('div.instruction', 'Select one or multiple dates')
@@ -52,51 +33,11 @@
5233 … ])
5334 … ])
5435 … )
5536 … ])
56-
57- // functions
58-
59- function setMonth (d) {
60- state.monthIndex.set(state.monthIndex() + d)
61- }
62-
63- function MonthTitle (monthIndex) {
64- const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
65-
66- return computed(monthIndex, mi => {
67- const view = new Date()
68- view.setMonth(mi)
69-
70- return `${MONTHS[view.getMonth()]} ${view.getFullYear()}`
71-
72- // while (monthIndex < 0) { monthIndex += 12 }
73- // return `${MONTHS[(monthIndex) % 12]} ${year}`
74- })
75- }
76-
77- function onSelect ({ gte, lt, events: days }) {
78- if (!days.length) addEmptyEvent()
79- else clearDay()
80-
81- state.pristine.set(false)
82-
83- function addEmptyEvent () {
84- state.days.push(Event(gte))
85- }
86- function clearDay () {
87- const filteredEvents = state.days().filter(e => !days.includes(e))
88- state.days.set(filteredEvents)
89- }
90- }
9137 … }
9238 …
93-function Event (date) {
94- return {
95- date,
96- data: {attending: true}
97- }
98-}
39 …+// functions
9940 …
10041 … function getTimezone () {
10142 … try {
10243 … return Intl.DateTimeFormat().resolvedOptions().timeZone
views/new.mcssView
@@ -10,40 +10,10 @@
1010 … grid-template-rows: auto auto
1111 … grid-column-gap: 1rem
1212 … grid-row-gap: 0
1313 …
14- div.cal-picker {
15- background: #fff
16- padding: var(--boundary) 3rem
17- border-radius: var(--br)
14 …+ div.ScryDayPicker {}
1815 …
19- div.month-picker {
20- color: #444
21- font-family: sans
22- font-size: 1.15rem
23-
24- display: flex
25- justify-content: space-between
26- align-items: center
27-
28- margin-bottom: 1rem
29-
30- button {
31- color: var(--feature-color)
32- font-size: .8rem
33-
34- background: none
35- border: none
36- cursor: pointer
37- font-size: 1.5rem
38-
39- :focus { outline: none }
40- }
41- }
42-
43- div.Marama {}
44- }
45-
4616 … div.time-picker {
4717 … grid-row: 1 / 3
4818 … grid-column: 2
4919 …

Built with git-ssb-web