overleaf/services/web/frontend/js/ide/directives/verticalResizablePanes.js

import App from '../../base'

export default App.directive('verticalResizablePanes', (localStorage, ide) => ({
  restrict: 'A',
  link(scope, element, attrs) {
    const name = attrs.verticalResizablePanes
    const minSize = scope.$eval(attrs.verticalResizablePanesMinSize)
    const maxSize = scope.$eval(attrs.verticalResizablePanesMaxSize)
    const defaultSize = scope.$eval(attrs.verticalResizablePanesDefaultSize)
    let storedSize = null
    let manualResizeIncoming = false

    if (name) {
      const storageKey = `vertical-resizable:${name}:south-size`
      storedSize = localStorage(storageKey)
      $(window).unload(() => {
        if (storedSize) {
          localStorage(storageKey, storedSize)
        }
      })
    }

    const layoutOptions = {
      center: {
        paneSelector: '[vertical-resizable-top]',
        paneClass: 'vertical-resizable-top',
        size: 'auto',
      },
      south: {
        paneSelector: '[vertical-resizable-bottom]',
        paneClass: 'vertical-resizable-bottom',
        resizerClass: 'vertical-resizable-resizer',
        resizerCursor: 'ns-resize',
        size: 'auto',
        resizable: true,
        closable: false,
        slidable: false,
        spacing_open: 6,
        spacing_closed: 6,
        maxSize: '75%',
      },
    }

    const toggledExternally = attrs.verticalResizablePanesToggledExternallyOn
    const hiddenExternally = attrs.verticalResizablePanesHiddenExternallyOn
    const hiddenInitially = attrs.verticalResizablePanesHiddenInitially
    const resizeOn = attrs.verticalResizablePanesResizeOn
    const resizerDisabledClass = `${layoutOptions.south.resizerClass}-disabled`

    function enableResizer() {
      if (layoutHandle.resizers && layoutHandle.resizers.south) {
        layoutHandle.resizers.south.removeClass(resizerDisabledClass)
      }
    }

    function disableResizer() {
      if (layoutHandle.resizers && layoutHandle.resizers.south) {
        layoutHandle.resizers.south.addClass(resizerDisabledClass)
      }
    }

    function handleDragEnd() {
      manualResizeIncoming = true
    }

    function handleResize(paneName, paneEl, paneState) {
      if (manualResizeIncoming) {
        storedSize = paneState.size
      }
      manualResizeIncoming = false
    }

    if (toggledExternally) {
      scope.$on(toggledExternally, (e, open) => {
        if (open) {
          enableResizer()
          layoutHandle.sizePane('south', storedSize ?? defaultSize ?? 'auto')
        } else {
          disableResizer()
          layoutHandle.sizePane('south', 'auto')
        }
      })
    }

    if (hiddenExternally) {
      ide.$scope.$on(hiddenExternally, (e, open) => {
        if (open) {
          layoutHandle.show('south')
        } else {
          layoutHandle.hide('south')
        }
      })
    }

    if (resizeOn) {
      ide.$scope.$on(resizeOn, () => {
        ide.$timeout(() => {
          layoutHandle.resizeAll()
        })
      })
    }

    if (maxSize) {
      layoutOptions.south.maxSize = maxSize
    }

    if (minSize) {
      layoutOptions.south.minSize = minSize
    }

    if (defaultSize) {
      layoutOptions.south.size = defaultSize
    }

    // The `drag` event fires only when the user manually resizes the panes; the `resize` event fires even when
    // the layout library internally resizes itself. In order to get explicit user-initiated resizes, we need to
    // listen to `drag` events. However, when the `drag` event fires, the panes aren't yet finished sizing so we
    // get the pane size *before* the resize happens. We do get the correct size in the next `resize` event.
    // The solution to work around this is to set up a flag in `drag` events which tells the next `resize` event
    // that it was user-initiated (therefore, storing the value).
    layoutOptions.south.ondrag_end = handleDragEnd
    layoutOptions.south.onresize = handleResize

    const layoutHandle = element.layout(layoutOptions)
    if (hiddenInitially === 'true') {
      layoutHandle.hide('south')
    }
  },
}))