pinafore/src/routes/_components/dialog/components/MediaAltEditor.html

<div class="media-alt-editor">
  <textarea
    id="the-media-alt-input-{realm}-{index}"
    class="media-alt-input"
    placeholder="Description"
    ref:textarea
    bind:value=rawText
  ></textarea>
  <label for="the-media-alt-input-{realm}-{index}" class="sr-only">
    Describe for the visually impaired
  </label>
  <LengthGauge
    {length}
    {overLimit}
    max={mediaAltCharLimit}
  />
  <LengthIndicator
    {length}
    {overLimit}
    max={mediaAltCharLimit}
    style="width: 100%; text-align: right;"
  />
</div>
<style>
  .media-alt-editor {
    display: flex;
    flex-direction: column;
  }
  .media-alt-input {
    padding: 5px;
    border: 1px solid var(--input-border);
    min-height: 75px;
    resize: none;
    overflow: hidden;
    word-wrap: break-word;
    /* Text must be at least 16px or else iOS Safari zooms in */
    font-size: 1.2em;
    max-height: 70vh;
  }

  @media (max-height: 767px) {
    .media-alt-input {
      max-height: 40vh;
      width: 100%;
    }
  }
</style>
<script>
  import { requestPostAnimationFrame } from '../../../_utils/requestPostAnimationFrame'
  import { mark, stop } from '../../../_utils/marks'
  import { autosize } from '../../../_thirdparty/autosize/autosize'
  import { observe } from 'svelte-extras'
  import { throttleTimer } from '../../../_utils/throttleTimer'
  import { get } from '../../../_utils/lodash-lite'
  import { store } from '../../../_store/store'
  import { MEDIA_ALT_CHAR_LIMIT } from '../../../_static/media'
  import LengthGauge from '../../LengthGauge.html'
  import LengthIndicator from '../../LengthIndicator.html'
  import { length } from 'stringz'

  const updateRawTextInStore = throttleTimer(requestPostAnimationFrame)

  export default {
    oncreate () {
      this.setupAutosize()
      this.setupSyncFromStore()
      this.setupSyncToStore()
    },
    ondestroy () {
      this.teardownAutosize()
    },
    store: () => store,
    data: () => ({
      rawText: '',
      mediaAltCharLimit: MEDIA_ALT_CHAR_LIMIT
    }),
    computed: {
      length: ({ rawText }) => length(rawText || ''),
      overLimit: ({ mediaAltCharLimit, length }) => length > mediaAltCharLimit
    },
    methods: {
      observe,
      setupSyncFromStore () {
        this.observe('media', media => {
          media = media || []
          const { index, rawText } = this.get()
          const text = get(media, [index, 'description'], '')
          if (rawText !== text) {
            this.set({ rawText: text })
          }
        })
      },
      setupSyncToStore () {
        this.observe('rawText', rawText => {
          updateRawTextInStore(() => {
            const { realm, index, media } = this.get()
            if (media[index].description !== rawText) {
              media[index].description = rawText
              this.store.setComposeData(realm, { media })
              this.store.save()
            }
            this.fire('resize')
          })
        }, { init: false })
      },
      setupAutosize () {
        const textarea = this.refs.textarea
        requestPostAnimationFrame(() => {
          mark('autosize()')
          autosize(textarea)
          stop('autosize()')
        })
      },
      teardownAutosize () {
        mark('autosize.destroy()')
        autosize.destroy(this.refs.textarea)
        stop('autosize.destroy()')
      },
      measure () {
        autosize.update(this.refs.textarea)
      }
    },
    components: {
      LengthGauge,
      LengthIndicator
    }
  }
</script>