Commit ee739c123cb53210216f3fe26a35eedcf2c6eecc
/calendar : factor out Day, DayName, styling
mixmix committed on 7/20/2018, 5:31:30 AMParent: 130d9b2d4b5cccafdcbb5d697ab3007a90c9741a
Files changed
| app/page/calendar.js | changed |
| app/page/calendar.mcss | changed |
| app/page/calendar.js | |||
|---|---|---|---|
| @@ -20,152 +20,82 @@ | |||
| 20 | 20 … | const DAYS = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ] | |
| 21 | 21 … | ||
| 22 | 22 … | function Cal () { | |
| 23 | 23 … | const year = Value(new Date().getFullYear()) | |
| 24 | - const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1, 0) | ||
| 24 … | + const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()) | ||
| 25 … | + // const today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1, 0) | ||
| 25 | 26 … | ||
| 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 | - }) | ||
| 27 … | + const root = h('Calendar', [ | ||
| 28 … | + Header(year), | ||
| 29 … | + h('div.months', computed(year, year => { | ||
| 30 … | + return MONTHS.map((month, monthIndex) => Month({ month, monthIndex, year, today })) | ||
| 31 … | + })) | ||
| 32 … | + ]) | ||
| 40 | 33 … | ||
| 41 | 34 … | return root | |
| 35 … | +} | ||
| 42 | 36 … | ||
| 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)) | ||
| 37 … | +function Header (year) { | ||
| 38 … | + return h('div.header', [ | ||
| 39 … | + h('div.year', [ | ||
| 40 … | + year, | ||
| 41 … | + h('a', { 'ev-click': () => year.set(year() - 1) }, '-'), | ||
| 42 … | + h('a', { 'ev-click': () => year.set(year() + 1) }, '+') | ||
| 51 | 43 … | ]) | |
| 52 | - } | ||
| 44 … | + // h('p.percentage', yearProgress(year)) | ||
| 45 … | + ]) | ||
| 46 … | +} | ||
| 53 | 47 … | ||
| 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)) | ||
| 48 … | +function Month ({ month, monthIndex, year, today }) { | ||
| 49 … | + const monthLength = new Date(year, monthIndex + 1, 0).getDate() | ||
| 50 … | + // NOTE Date takes month as a monthIndex i.e. april = 3 | ||
| 51 … | + // and day = 0 goes back a day | ||
| 52 … | + const days = Array(monthLength).fill().map((_, i) => i + 1) | ||
| 58 | 53 … | ||
| 59 | - // return progress < 0 ? yd + ` YEARS AWAY` : progress > 100 ? yd + ` YEARS AGO` : progress + '%' | ||
| 60 | - // } | ||
| 54 … | + var date | ||
| 55 … | + var weekday | ||
| 56 … | + var week | ||
| 57 … | + var offset = getDay(new Date(year, monthIndex, 1)) - 1 | ||
| 61 | 58 … | ||
| 62 | - // function doLabels () { | ||
| 63 | - // let html = '' | ||
| 64 | - // let y = 0 | ||
| 59 … | + return h('CalendarMonth', [ | ||
| 60 … | + h('div.month-name', month.substr(0, 2)), | ||
| 61 … | + h('div.days', { style: {display: 'grid'} }, [ | ||
| 62 … | + DAYS.map((day, i) => DayName(day, i)), | ||
| 63 … | + days.map(Day) | ||
| 64 … | + ]) | ||
| 65 … | + ]) | ||
| 65 | 66 … | ||
| 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 | - // } | ||
| 67 … | + function Day (day) { | ||
| 68 … | + date = new Date(year, monthIndex, day) | ||
| 69 … | + weekday = getDay(date) | ||
| 70 … | + week = Math.ceil((day + offset) / 7) | ||
| 72 | 71 … | ||
| 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 | - })) | ||
| 72 … | + return h('CalendarDay', { | ||
| 73 … | + attributes: { 'data-date': `${year}-${monthIndex + 1}-${day}` }, | ||
| 74 … | + style: { | ||
| 75 … | + 'grid-row': `${weekday} / ${weekday + 1}`, | ||
| 76 … | + 'grid-column': `${week + 1} / ${week + 2}` | ||
| 77 … | + // column moved by 1 to make space for labels | ||
| 78 … | + }, | ||
| 79 … | + classList: [ | ||
| 80 … | + date < today ? '-past' : '-future' | ||
| 81 … | + ] | ||
| 82 … | + }) | ||
| 103 | 83 … | } | |
| 84 … | +} | ||
| 104 | 85 … | ||
| 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 | - } | ||
| 86 … | +function DayName (day, index) { | ||
| 87 … | + return h('CalendarDayName', { | ||
| 88 … | + style: { | ||
| 89 … | + 'grid-row': `${index + 1} / ${index + 2}`, | ||
| 90 … | + 'grid-column': '1 / 2' | ||
| 150 | 91 … | } | |
| 151 | - return html | ||
| 152 | - } | ||
| 92 … | + }, day.substr(0, 1)) | ||
| 153 | 93 … | } | |
| 154 | 94 … | ||
| 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 | ||
| 95 … | +function getDay (date) { | ||
| 96 … | + const dayIndex = date.getDay() | ||
| 97 … | + return dayIndex === 0 ? 7 : dayIndex | ||
| 160 | 98 … | ||
| 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}` | ||
| 99 … | + // Weeks run 0...6 (Sun - Sat) | ||
| 100 … | + // this shifts those days around by 1 | ||
| 163 | 101 … | } | |
| 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.mcss | ||
|---|---|---|
| @@ -7,20 +7,14 @@ | ||
| 7 | 7 … | |
| 8 | 8 … | |
| 9 | 9 … | Calendar { |
| 10 | 10 … | font-family: 'input_mono_regular', monospace |
| 11 | - text-transform: uppercase | |
| 11 … | + text-transform: capitalize | |
| 12 | 12 … | |
| 13 | - display: block | |
| 14 | - height: 100% | |
| 15 | - min-height: 400px | |
| 16 | - width: 100% | |
| 17 | - | |
| 18 | 13 … | padding: 0 |
| 19 | 14 … | margin: 0 |
| 20 | 15 … | |
| 21 | 16 … | section { |
| 22 | - position: relative | |
| 23 | 17 … | top: 50% |
| 24 | 18 … | margin: 0 auto |
| 25 | 19 … | user-select: none |
| 26 | 20 … | -webkit-user-select: none |
| @@ -31,13 +25,13 @@ | ||
| 31 | 25 … | text-align: center |
| 32 | 26 … | } |
| 33 | 27 … | |
| 34 | 28 … | div.header { |
| 35 | - margin: 0 10px 40px 10px | |
| 29 … | + margin: 40px 0 | |
| 36 | 30 … | text-align: left |
| 37 | 31 … | align-content: flex-start |
| 38 | 32 … | |
| 39 | - p.year { | |
| 33 … | + div.year { | |
| 40 | 34 … | font-size: 40px |
| 41 | 35 … | font-weight: bold |
| 42 | 36 … | |
| 43 | 37 … | a { |
| @@ -50,8 +44,9 @@ | ||
| 50 | 44 … | :hover { |
| 51 | 45 … | color: #ffffff |
| 52 | 46 … | background: #000 |
| 53 | 47 … | cursor: pointer |
| 48 … | + text-decoration: none | |
| 54 | 49 … | } |
| 55 | 50 … | } |
| 56 | 51 … | } |
| 57 | 52 … | |
| @@ -60,56 +55,75 @@ | ||
| 60 | 55 … | color: #8b8b8b |
| 61 | 56 … | } |
| 62 | 57 … | } |
| 63 | 58 … | |
| 64 | - div.month { | |
| 65 | - margin: 10px | |
| 66 | - display: inline-block | |
| 67 | - /* width:100px */ | |
| 68 | - /* height: 130px */ | |
| 59 … | + div.months { | |
| 60 … | + display: flex | |
| 69 | 61 … | |
| 70 | - div.label { | |
| 71 | - font-size: 20px | |
| 72 | - font-weight: bold | |
| 73 | - text-align: left | |
| 74 | - margin-bottom: 5px | |
| 62 … | + div.CalendarMonth { | |
| 63 … | + margin-right: 20px | |
| 75 | 64 … | } |
| 65 … | + } | |
| 76 | 66 … | |
| 77 | - div.graph { | |
| 67 … | + /* @media only screen and (min-width: 1440px) */ | |
| 68 … | + /* { section { width: 1440px; }} */ | |
| 78 | 69 … | |
| 79 | - div { | |
| 80 | - div.day { | |
| 81 | - background: #000 | |
| 82 | - height: .8rem | |
| 83 | - width: .8rem | |
| 70 … | + /* @media only screen and (max-width: 1440px) */ | |
| 71 … | + /* { section { width: 720px; }} */ | |
| 84 | 72 … | |
| 85 | - border-radius: .1rem | |
| 86 | - } | |
| 87 | - } | |
| 88 | - } | |
| 73 … | + /* @media only screen and (max-width: 720px) */ | |
| 74 … | + /* { section { width: 360px; }} */ | |
| 75 … | +} | |
| 76 … | + | |
| 77 … | + | |
| 78 … | +CalendarMonth { | |
| 79 … | + --day-width: 12px | |
| 80 … | + --day-border-radius: 2px | |
| 81 … | + --day-gap: 2px | |
| 82 … | + | |
| 83 … | + width: calc(7 * var(--day-width) + 6 * var(--day-gap)) | |
| 84 … | + /* max of 6 weeks + day labels, with gaps between each */ | |
| 85 … | + | |
| 86 … | + div.month-name { | |
| 87 … | + font-size: 20px | |
| 88 … | + font-weight: bold | |
| 89 … | + text-align: left | |
| 90 … | + margin-bottom: 5px | |
| 89 | 91 … | } |
| 90 | 92 … | |
| 93 … | + div.days { | |
| 94 … | + grid-gap: var(--day-gap) | |
| 95 … | + justify-content: start | |
| 96 … | + align-content: start | |
| 91 | 97 … | |
| 92 | - /* p { margin: 0px; } */ | |
| 98 … | + div.CalendarDay {} | |
| 99 … | + } | |
| 100 … | +} | |
| 93 | 101 … | |
| 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; } */ | |
| 102 … | +CalendarDay { | |
| 103 … | + width: var(--day-width) | |
| 104 … | + height: var(--day-width) | |
| 99 | 105 … | |
| 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 … | + border-radius: var(--day-border-radius) | |
| 106 | 107 … | |
| 107 | - /* @media only screen and (min-width: 1440px) */ | |
| 108 | - /* { section { width: 1440px; }} */ | |
| 108 … | + -past { | |
| 109 … | + background: hsl(0, 0%, 20%) | |
| 110 … | + } | |
| 109 | 111 … | |
| 110 | - /* @media only screen and (max-width: 1440px) */ | |
| 111 | - /* { section { width: 720px; }} */ | |
| 112 … | + -future { | |
| 113 … | + background: hsl(0, 0%, 80%) | |
| 114 … | + } | |
| 115 … | +} | |
| 112 | 116 … | |
| 113 | - /* @media only screen and (max-width: 720px) */ | |
| 114 | - /* { section { width: 360px; }} */ | |
| 117 … | +CalendarDayName { | |
| 118 … | + color: hsl(0, 0%, 40%) | |
| 119 … | + font-family: arial | |
| 120 … | + font-size: calc(var(--day-width) - 3px) | |
| 121 … | + /* line-height: calc(var(--day-width) - 2px) */ | |
| 122 … | + | |
| 123 … | + width: var(--day-width) | |
| 124 … | + height: var(--day-width) | |
| 125 … | + | |
| 126 … | + display: flex | |
| 127 … | + align-items: center | |
| 128 … | + justify-content: center | |
| 115 | 129 … | } |
Built with git-ssb-web