30:T6a9,viewof source = { const textarea = html`

dataset decision, 1, 2018-08-24
 prototype back-end, 15
  report writing, 15
  prototype front-end, 20, offset: -5
   front-end write-up, 5
   figures, 10, offset: 5
   editing, 5, offset: 10
    layout, 5
     marketing prep, 5
      web launch to clients, 1, offset: 1
       marketing launch, 1
        webinar, 1
veteran's day, 1, 2018-11-12
O'Reilly AI Conference London, 3, 2018-10-9`;
  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;
}31: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;
}32: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
}33:[]
2e:{"title":"FF09 Calendar","cells":[{"id":0,"value":"md`# FF09 Calendar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"md`This is an editable project timeline calendar. The events are controlled by the textarea below. For each line, the first value is the stage name, the second is the number of WEEKDAYS (5 is one week) it is expected to take. The optional third value is the start date (must be in format YYYY-MM-DD). You can nest stages by indenting using a space. Nesting means that stage will start once its parent stage is completed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"md`The editable tree textarea is from Mike Bostock's <a href=\"https://beta.observablehq.com/@mbostock/tree-o-matic\" target=\"_blank\">Tree-o-Matic</a>.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"md`## Timeline Stages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":877,"value":"md`<span style=\"background: yellow\">Today is ${df.format(today, 'MMMM Do, YYYY')}.</span>`","pinned":false,"hidden":false,"mode":"ojs"},{"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 => `<span style=\"background: ${stringToColour(r.name)}; color: ${colorCheck(stringToColour(r.name))}\"> ${r.name} </span>`).join(', ')}`\n  } else {\n    return md`There are no currently active stages.`\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"just_end_date = md`Projected end date: ${df.format(end_date, 'dddd, MMMM Do, YYYY')}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"ranges = getStages(data)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":844,"value":"end_date = ranges.reduce((earliest, range) => {\n  return df.max(range.end, earliest)\n}, today)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"today = df.startOfDay(now)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":768,"value":"calendar_rawdays = df.eachDay(df.startOfWeek(df.min(today, start_date)), df.endOfWeek(end_date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"calendar_weekdays = filterWeekends(calendar_rawdays)","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"function filterWeekends(raw_days) { return raw_days.filter(day => !df.isWeekend(day))} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"function div(content) { let divver = document.createElement('div'); content ? divver.innerHTML = content : ''; return divver; }","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":673,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":933,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"df = require('https://bundle.run/date-fns@1.29.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"_  = require('lodash@4.17.10/lodash.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>