pinafore/routes/_components/timeline/Timeline.html

<h1 class="sr-only">{label}</h1>
<!-- for debugging
<div style="padding:5px;position:fixed;left:0;top:0;z-index:999999999;font-size:0.9em;width: 75vw;background:rgba(0, 0, 0, 0.8);color:white;pointer-events:none;">
  <p>$timelineItemIds: {JSON.stringify(($timelineItemIds || []).map(_ => '...' + _.slice(-6)), null, '  ')}</p>
  <p>$itemIdsToAdd: {JSON.stringify(($itemIdsToAdd || []).map(_ => '...' + _.slice(-6)), null, '  ')}</p>
  <p>$runningUpdate: {$runningUpdate}</p>
</div>
-->
<div class="timeline"
     role="feed"
     on:focusWithCapture="saveFocus(event)"
     on:blurWithCapture="clearFocus(event)"
>
  {#await componentsPromise}
    <!-- awaiting promise -->
  {:then result}
    <svelte:component this={result.listComponent}
                component={result.listItemComponent}
                realm="{$currentInstance + '/' + timeline}"
                containerQuery=".container"
                {makeProps}
                items={$timelineItemIds}
                showFooter={true}
                footerComponent={LoadingFooter}
                showHeader={$showHeader}
                headerComponent={MoreHeaderVirtualWrapper}
                {headerProps}
                {scrollToItem}
                on:scrollToBottom="onScrollToBottom()"
                on:scrollToTop="onScrollToTop()"
                on:scrollTopChanged="onScrollTopChanged(event)"
                on:initialized="initialize()"
                on:noNeedToScroll="onNoNeedToScroll()"
    />
  {:catch error}
    <div>Error: component failed to load! Try reloading. {error}</div>
  {/await}
</div>
<script>
  import { store } from '../../_store/store'
  import Status from '../status/Status.html'
  import LoadingFooter from './LoadingFooter.html'
  import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
  import {
    importVirtualList,
    importList,
    importStatusVirtualListItem,
    importNotificationVirtualListItem
  } from '../../_utils/asyncModules'
  import { timelines } from '../../_static/timelines'
  import {
    fetchTimelineItemsOnScrollToBottom,
    setupTimeline,
    showMoreItemsForTimeline,
    showMoreItemsForThread,
    showMoreItemsForCurrentTimeline
  } from '../../_actions/timeline'
  import { focusWithCapture, blurWithCapture } from '../../_utils/events'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import { mark, stop } from '../../_utils/marks'
  import isEqual from 'lodash-es/isEqual'
  import { doubleRAF } from '../../_utils/doubleRAF'
  import { observe } from 'svelte-extras'
  import { createMakeProps } from '../../_actions/createMakeProps'

  export default {
    oncreate () {
      console.log('timeline oncreate()')
      this.setupFocus()
      setupTimeline()
      this.restoreFocus()
      this.setupStreaming()
    },
    ondestroy () {
      console.log('ondestroy')
      this.teardownFocus()
    },
    data: () => ({
      LoadingFooter,
      MoreHeaderVirtualWrapper,
      Status,
      scrollTop: 0
    }),
    computed: {
      // For threads, it's simpler to just render all items as a pseudo-virtual list
      // due to need to scroll to the right item and thus calculate all item heights up-front.
      // Here we lazy-load both the virtual list component itself as well as the component
      // it renders.
      componentsPromise: ({ timelineType }) => {
        return Promise.all([
          timelineType === 'status'
            ? importList()
            : importVirtualList(),
          timelineType === 'notifications'
            ? importNotificationVirtualListItem()
            : importStatusVirtualListItem()
        ]).then(results => ({
          listComponent: results[0],
          listItemComponent: results[1]
        }))
      },
      makeProps: ({ $currentInstance, timelineType, timelineValue }) => (
        createMakeProps($currentInstance, timelineType, timelineValue)
      ),
      label: ({ timeline, $currentInstance, timelineType, timelineValue }) => {
        if (timelines[timeline]) {
          return `Statuses: ${timelines[timeline].label} timeline on ${$currentInstance}`
        }

        switch (timelineType) {
          case 'tag':
            return `Statuses: #${timelineValue} hashtag`
          case 'status':
            return `Statuses: thread`
          case 'account':
            return `Statuses: account timeline`
          case 'list':
            return `Statuses: list`
          case 'notifications':
            return `Notifications on ${$currentInstance}`
        }
      },
      timelineType: ({ timeline }) => {
        return timeline.split('/')[0]
      },
      timelineValue: ({ timeline }) => {
        return timeline.split('/').slice(-1)[0]
      },
      // Scroll to the first item if this is a "status in own thread" timeline.
      // Don't scroll to the first item because it obscures the "back" button.
      scrollToItem: ({ timelineType, timelineValue, $firstTimelineItemId }) => (
        timelineType === 'status' && $firstTimelineItemId &&
        timelineValue !== $firstTimelineItemId && timelineValue
      ),
      itemIdsToAdd: ({ $itemIdsToAdd }) => $itemIdsToAdd,
      headerProps: ({ itemIdsToAdd }) => {
        return {
          count: itemIdsToAdd ? itemIdsToAdd.length : 0,
          onClick: showMoreItemsForCurrentTimeline
        }
      }
    },
    store: () => store,
    events: {
      focusWithCapture,
      blurWithCapture
    },
    methods: {
      observe,
      initialize () {
        let { initializeStarted } = this.get()
        if (initializeStarted) {
          return
        }
        this.set({ initializeStarted: true })
        mark('initializeTimeline')
        doubleRAF(() => {
          console.log('timeline initialized')
          this.store.set({ timelineInitialized: true })
          stop('initializeTimeline')
        })
      },
      onScrollTopChanged (scrollTop) {
        this.set({ scrollTop: scrollTop })
      },
      onScrollToBottom () {
        let { timelineType } = this.get()
        let { timelineInitialized, runningUpdate } = this.store.get()
        if (!timelineInitialized ||
            runningUpdate ||
            timelineType === 'status') { // for status contexts, we've already fetched the whole thread
          return
        }
        let { currentInstance } = this.store.get()
        let { timeline } = this.get()
        fetchTimelineItemsOnScrollToBottom(
          currentInstance,
          timeline
        )
      },
      onScrollToTop () {
        let { shouldShowHeader } = this.store.get()
        if (shouldShowHeader) {
          this.store.setForCurrentTimeline({
            showHeader: true,
            shouldShowHeader: false
          })
        }
      },
      setupStreaming () {
        let { currentInstance } = this.store.get()
        let { timeline, timelineType } = this.get()
        let handleItemIdsToAdd = () => {
          let { itemIdsToAdd } = this.get()
          if (!itemIdsToAdd || !itemIdsToAdd.length) {
            return
          }
          mark('handleItemIdsToAdd')
          let { scrollTop } = this.get()
          let {
            shouldShowHeader,
            showHeader
          } = this.store.get()
          if (timelineType === 'status') {
            // this is a thread, just insert the statuses already
            showMoreItemsForThread(currentInstance, timeline)
          } else if (scrollTop === 0 && !shouldShowHeader && !showHeader) {
            // if the user is scrolled to the top and we're not showing the header, then
            // just insert the statuses. this is "chat room mode"
            showMoreItemsForTimeline(currentInstance, timeline)
          } else {
            // user hasn't scrolled to the top, show a header instead
            this.store.setForTimeline(currentInstance, timeline, { shouldShowHeader: true })
          }
          stop('handleItemIdsToAdd')
        }
        this.observe('itemIdsToAdd', (newItemIdsToAdd, oldItemIdsToAdd) => {
          if (!newItemIdsToAdd ||
              !newItemIdsToAdd.length ||
              isEqual(newItemIdsToAdd, oldItemIdsToAdd)) {
            return
          }
          scheduleIdleTask(handleItemIdsToAdd)
        })
      },
      setupFocus () {
        this.onPushState = this.onPushState.bind(this)
        this.store.setForCurrentTimeline({
          ignoreBlurEvents: false
        })
        window.addEventListener('pushState', this.onPushState)
      },
      teardownFocus () {
        window.removeEventListener('pushState', this.onPushState)
      },
      onPushState () {
        this.store.setForCurrentTimeline({ ignoreBlurEvents: true })
      },
      saveFocus (e) {
        try {
          let { currentInstance } = this.store.get()
          let { timeline } = this.get()
          let lastFocusedElementSelector
          let activeElement = e.target
          if (activeElement) {
            let focusKey = activeElement.getAttribute('focus-key')
            if (focusKey) {
              lastFocusedElementSelector = `[focus-key=${JSON.stringify(focusKey)}]`
            }
          }
          console.log('saving focus to ', lastFocusedElementSelector)
          this.store.setForTimeline(currentInstance, timeline, {
            lastFocusedElementSelector
          })
        } catch (err) {
          console.error('unable to save focus', err)
        }
      },
      clearFocus () {
        try {
          let { ignoreBlurEvents } = this.store.get()
          if (ignoreBlurEvents) {
            return
          }
          console.log('clearing focus')
          let { currentInstance } = this.store.get()
          let { timeline } = this.get()
          this.store.setForTimeline(currentInstance, timeline, {
            lastFocusedElementSelector: null
          })
        } catch (err) {
          console.error('unable to clear focus', err)
        }
      },
      restoreFocus () {
        let { lastFocusedElementSelector } = this.store.get()
        if (!lastFocusedElementSelector) {
          return
        }
        console.log('restoreFocus', lastFocusedElementSelector)
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            let element = document.querySelector(lastFocusedElementSelector)
            if (element) {
              element.focus()
            }
          })
        })
      },
      onNoNeedToScroll () {
        // If the timeline doesn't need to scroll, then we can safely "preinitialize,"
        // i.e. render anything above the fold of the timeline. This avoids the affect
        // where the scrollable content appears to jump around if we need to scroll it.
        console.log('timeline preinitialized')
        this.store.set({ timelinePreinitialized: true })
      }
    }
  }
</script>