2b:null 2c:["$","title",null,{"children":"FF10 Design/Front-end Calendar | Grant Custer | Observable"}] 31:T5e8,viewof source = { const textarea = html``; textarea.style.display = "block"; textarea.style.boxSizing = "border-box"; textarea.style.width = "calc(100% + 28px)"; textarea.style.font = "var(--mono_fonts)"; textarea.style.minHeight = "60px"; textarea.style.border = "none"; textarea.style.padding = "4px 10px"; textarea.style.margin = "0 -14px"; textarea.style.background = "rgb(247,247,249)"; textarea.style.tabSize = 2; textarea.onkeypress = event => { if ( event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey ) return; let i = textarea.selectionStart; let j = textarea.selectionEnd; let v = textarea.value; if (i === j) { let k = 0; while (i > 0 && v[--i - 1] !== "\n"); while (i < j && v[i] === " ") ++i, ++k; textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j); textarea.selectionStart = textarea.selectionEnd = j + k + 1; textarea.dispatchEvent(new CustomEvent("input")); event.preventDefault(); } }; textarea.oninput = () => { textarea.style.height = "auto"; textarea.style.height = `${textarea.scrollHeight}px`; }; yield textarea; textarea.oninput(); yield textarea; }32:T608,calendar = { let weeks = calendar_weekdays.length / 5; let $container = div(); $container.style.border = "solid 1px #000"; for (let i = 0; i < weeks; i++) { let $week = div(); $week.style = "display: grid; grid-template-columns: repeat(5, 1fr); font-family: monospace; font-size: 14px;"; $container.appendChild($week); for (let j = 0; j < 5; j++) { let $day = div(); $day.style.minHeight = 29 * 5 + "px"; $day.style.border = "solid 1px #000"; let weekday = calendar_weekdays[i * 5 + j]; let $date = div( `${months[weekday.getMonth()]} ${weekday .getDate() .toString() .padStart(2, 0)}` ); $date.style = "padding: 4px 8px; background: #111; color: #ccc;"; $day.appendChild($date); for (let k = 0; k < ranges.length; k++) { let range = ranges[k]; if (df.isWithinRange(weekday, range.start, range.end)) { let $event = div(range.name); let background = stringToColour(range.name); let color = "#000"; $event.style = `background: ${background}; color: ${colorCheck( background )}; padding: 4px 8px;`; $day.appendChild($event); } } if (df.isToday(weekday)) { $day.style.background = "yellow"; let $today = div("today"); $today.style.padding = "4px 8px"; $today.style.color = "#000"; $day.appendChild($today); } $week.appendChild($day); } } return $container; }33:T626,function getStages(root) { let ranges = [] function traverse(node, start_date) { let end_date if (node.name !== undefined) { let processed = processNode(node.name) if (processed[2] !== undefined) { if (processed[2].startsWith("offset:")) { let offset = parseInt(processed[2].slice(7)) // hacked for weeks only start_date = df.addDays(start_date, offset * 7/5) } else { // make sure it's got 2 hyphens, else set to today if (processed[2].split('-').length-1 === 2) { if (df.isValid(new Date(processed[2]))) { start_date = processed[2] } else { start_date = today } } else { start_date = today } } } else { // if the root node has no date, set to today if (node.name === root.name) start_date = today } let days = processed[1] if (days === undefined || days.length === 0 || parseInt(days) < 1) { days = 1 } end_date = df.addDays(start_date, weekToRaw(start_date, days)) let range = { name: processed[0], start: start_date, end: df.subDays(end_date, 1) } ranges.push(range) } else { end_date = today } if (node.children && node.children.length > 0){ let i; let result = null; for (let i=0; result == null && i < node.children.length; i++){ result = traverse(node.children[i], end_date); } return result; } } traverse(root, null) return ranges }34:[] 2f:{"id":"a2fdd8153acb50ed","slug":"ff10-design-front-end-calendar","title":"FF10 Design/Front-end Calendar","thumbnail":"018a420fe328255eb86955e9743dcb5d6b24c7e509ec9b8c6947dffab108e859","access_level":"public","create_time":"$D2019-01-23T15:58:00.540Z","update_time":"$D2019-02-08T17:25:24.123Z","view_time":null,"first_public_time":"$D2019-01-29T16:26:17.008Z","fork":{"id":"38bc6d03beff0601","slug":"ff09-calendar","title":"FF09 Calendar","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":1052,"publish_version":1052,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"60c25796bffe3cee","slug":"calendars","title":"Calendars","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"title":"FF10 Design/Front-end Calendar","cells":[{"id":0,"value":"md`# FF10 Design/Front-end Calendar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":659,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"md`For a start date of ${df.format(start_date, 'MMMM Do, YYYY')}, the projected end date is ${df.format(end_date, 'MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":877,"value":"md`Today is ${df.format(today, 'MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"active_stages = {\n let active_stages = ranges.filter(range => df.isWithinRange(today, range.start, range.end))\n if (active_stages.length > 0) {\n return md`Currently active stages: ${active_stages.map(r => ` ${r.name} `).join(', ')}`\n } else {\n return md`There are no currently active stages.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"just_end_date = md`Projected end date: ${df.format(end_date, 'dddd, MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1049,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"ranges = getStages(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":663,"value":"data = {\n const parents = [];\n const nodes = source.trim().split(/\\n/g);\n parents.push({children: []});\n for (let i = 0, n = nodes.length; i < n; ++i) {\n let parent, depth = nodes[i].match(/^\\s*/)[0].length;\n while (!(parent = parents[depth])) --depth;\n if (!parent.children) parent.children = [];\n parent.children.push(parents[depth + 1] = {name: nodes[i].slice(depth)});\n }\n return parents[0].children.length === 1 ? parents[0].children[0] : parents[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"start_date = ranges.reduce((earliest, range) => {\n return df.min(range.start, earliest)\n}, ranges[0].start)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"end_date = ranges.reduce((earliest, range) => {\n return df.max(range.end, earliest)\n}, today)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1015,"value":"today = df.startOfDay(now)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":960,"value":"now = {\n while (true) {\n const date = new Date(Math.ceil((Date.now() + 1) / 1000) * 1000);\n yield Promises.when(date, date);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"calendar_rawdays = df.eachDay(df.startOfWeek(df.min(today, start_date)), df.endOfWeek(end_date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"calendar_weekdays = filterWeekends(calendar_rawdays)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"function filterWeekends(raw_days) { return raw_days.filter(day => !df.isWeekend(day))} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"function div(content) { let divver = document.createElement('div'); content ? divver.innerHTML = content : ''; return divver; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"function weekToRaw(start_date, weekdays) {\n weekdays = parseInt(weekdays)\n let start = start_date\n if (typeof start_date === 'string') {\n start = setDate(start_date)\n }\n let day = start.getDay() - 1\n let offset_length = day + weekdays\n let weeks = Math.floor(offset_length/5)\n let remainder = offset_length % 5\n return weeks * 7 - day + remainder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1005,"value":"function weekToRawEnd(start_date, weekdays) {\n weekdays = parseInt(weekdays)\n let start = start_date\n if (typeof start_date === 'string') {\n start = setDate(start_date)\n }\n let day = start.getDay() - 1\n let offset_length = day + weekdays\n let weeks = Math.floor(offset_length/5)\n let remainder = offset_length % 5\n return weeks * 7 - day + remainder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"function setDate(string) {\n let values = string.split('-')\n return new Date(values[0], values[1]-1, values[2], 0, 0, 0, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":859,"value":"function processNode(string) {\n let values = string.split(',')\n let trimmed = values.map(v => v.trim())\n return trimmed\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"// from https://stackoverflow.com/a/16348977\nstringToColour = function(str) {\n var hash = 0;\n for (var i = 0; i < str.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n var colour = '#';\n for (var i = 0; i < 3; i++) {\n var value = (hash >> (i * 8)) & 0xFF;\n colour += ('00' + value.toString(16)).substr(-2);\n }\n return colour;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"function colorCheck(background) { \n if (chroma(background).luminance() < 0.5) {\n return \"#fff\"\n } else {\n return\"#000\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":933,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"df = require('https://bundle.run/date-fns@1.29.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":929,"value":"_ = require('lodash@4.17.10/lodash.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"