refactor: extract StatusBar and ToolBar

Signed-off-by: Yukai Huang <[email protected]>

Author: Yukaii

public/js/lib/editor/StatusBar.js

@@ -0,0 +1,313 @@
+import Storage from './storage'
+import { availableThemes } from './constants'
+import { defaultEditorMode, jumpToAddressBarKeymapName } from './editor-config'
+import debounce from 'lodash/debounce'
+
+export default class StatusBar {
+  constructor(editor, config) {
+    this.editor = editor
+    this.config = config
+    this.statusBar = null
+    this.statusCursor = null
+    this.statusSelection = null
+    this.statusFile = null
+    this.statusIndicators = null
+    this.statusIndent = null
+    this.statusKeymap = null
+    this.statusLength = null
+    this.statusTheme = null
+    this.statusSpellcheck = null
+    this.statusLinter = null
+    this.statusPreferences = null
+    this.statusPanel = null
+    this.jumpToAddressBarKeymapValue = null
+  }
+
+  init(template) {
+    this.statusBar = $(template)
+    this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')
+    this.statusSelection = this.statusBar.find('.status-cursor > .status-selection')
+    this.statusFile = this.statusBar.find('.status-file')
+    this.statusIndicators = this.statusBar.find('.status-indicators')
+    this.statusIndent = this.statusBar.find('.status-indent')
+    this.statusKeymap = this.statusBar.find('.status-keymap')
+    this.statusLength = this.statusBar.find('.status-length')
+    this.statusTheme = this.statusBar.find('.status-theme')
+    this.statusSpellcheck = this.statusBar.find('.status-spellcheck')
+    this.statusLinter = this.statusBar.find('.status-linter')
+    this.statusPreferences = this.statusBar.find('.status-preferences')
+
+    this.setupThemeDropdown()
+    this.setupIndentation()
+    this.setupKeymap()
+    this.setupLinter()
+    this.setupPreferences()
+    this.handleResize()
+
+    this.statusPanel = this.editor.addPanel(this.statusBar[0], {
+      position: 'bottom'
+    })
+
+    // Add jQuery-compatible interface
+    this.outerHeight = () => this.statusBar.outerHeight()
+    this.height = () => this.statusBar.height()
+
+    return this.statusBar
+  }
+
+  handleResize() {
+    // Resize handling is now managed by Editor class
+  }
+
+  getHeight() {
+    return this.statusBar ? this.statusBar[0].offsetHeight : 0
+  }
+
+  setDropdownMaxHeight(maxHeight) {
+    if (this.statusBar) {
+      this.statusBar.find('.status-theme ul.dropdown-menu').css('max-height', `${maxHeight}px`)
+    }
+  }
+
+  update() {
+    if (!this.statusBar) return
+
+    const cursor = this.editor.getCursor()
+    const cursorText = `Line ${cursor.line + 1}, Column ${cursor.ch + 1}`
+    this.statusCursor.text(cursorText)
+    
+    const fileText = ` — ${this.editor.lineCount()} Lines`
+    this.statusFile.text(fileText)
+    
+    const docLength = this.editor.getValue().length
+    this.statusLength.text(`Length ${docLength}`)
+
+    this.updateLengthIndicator(docLength)
+  }
+
+  updateLengthIndicator(docLength) {
+    if (docLength > (this.config.docmaxlength * 0.95)) {
+      this.statusLength.css('color', 'red')
+      this.statusLength.attr('title', 'You have almost reached the limit for this document.')
+    } else if (docLength > (this.config.docmaxlength * 0.8)) {
+      this.statusLength.css('color', 'orange')
+      this.statusLength.attr('title', 'This document is nearly full, consider splitting it or creating a new one.')
+    } else {
+      this.statusLength.css('color', 'white')
+      this.statusLength.attr('title', `You can write up to ${this.config.docmaxlength} characters in this document.`)
+    }
+  }
+
+  setupThemeDropdown() {
+    this.statusIndicators.find('.status-theme ul.dropdown-menu').append(
+      availableThemes.map(theme => 
+        $(`<li value="${theme.value}"><a>${theme.name}</a></li>`)
+      )
+    )
+
+    const storedTheme = Storage.get('theme')
+    if (storedTheme && availableThemes.find(theme => storedTheme === theme.value)) {
+      this.setTheme(storedTheme)
+    }
+
+    this.statusIndicators.find('.status-theme li').click(e => {
+      const theme = $(e.currentTarget).attr('value')
+      this.setTheme(theme)
+    })
+  }
+
+  setTheme(theme) {
+    this.editor.setOption('theme', theme)
+    Storage.set('theme', theme)
+    this.statusIndicators.find('.status-theme li').removeClass('active')
+    this.statusIndicators.find(`.status-theme li[value="${theme}"]`).addClass('active')
+  }
+
+  setupIndentation() {
+    const storedIndentType = Storage.get('indent_type')
+    const storedTabSize = parseInt(Storage.get('tab_size'))
+    const storedSpaceUnits = parseInt(Storage.get('space_units'))
+
+    if (storedIndentType === 'tab') {
+      this.editor.setOption('indentWithTabs', true)
+      if (storedTabSize) this.editor.setOption('indentUnit', storedTabSize)
+    } else if (storedIndentType === 'space') {
+      this.editor.setOption('indentWithTabs', false)
+      if (storedSpaceUnits) this.editor.setOption('indentUnit', storedSpaceUnits)
+    }
+
+    if (storedTabSize) {
+      this.editor.setOption('tabSize', storedTabSize)
+    }
+
+    this.setupIndentationHandlers()
+  }
+
+  setupIndentationHandlers() {
+    const type = this.statusIndicators.find('.indent-type')
+    const widthLabel = this.statusIndicators.find('.indent-width-label')
+    const widthInput = this.statusIndicators.find('.indent-width-input')
+
+    type.click(() => {
+      const currentIndentWithTabs = this.editor.getOption('indentWithTabs')
+      this.editor.setOption('indentWithTabs', !currentIndentWithTabs)
+      
+      if (!currentIndentWithTabs) {
+        const storedTabSize = parseInt(Storage.get('tab_size'))
+        if (storedTabSize) {
+          this.editor.setOption('indentUnit', storedTabSize)
+          this.editor.setOption('tabSize', storedTabSize)
+        }
+      } else {
+        const storedSpaceUnits = parseInt(Storage.get('space_units'))
+        if (storedSpaceUnits) {
+          this.editor.setOption('indentUnit', storedSpaceUnits)
+        }
+      }
+
+      this.updateIndentationDisplay()
+    })
+
+    this.setupIndentationWidthHandlers(widthLabel, widthInput)
+  }
+
+  setupIndentationWidthHandlers(widthLabel, widthInput) {
+    widthLabel.click(() => {
+      if (widthLabel.is(':visible')) {
+        widthLabel.addClass('hidden')
+        widthInput.removeClass('hidden')
+        widthInput.val(this.editor.getOption('indentUnit'))
+        widthInput.select()
+      }
+    })
+
+    widthInput.on('change', () => {
+      let val = parseInt(widthInput.val()) || this.editor.getOption('indentUnit')
+      val = Math.min(Math.max(val, 1), 10)
+
+      if (this.editor.getOption('indentWithTabs')) {
+        this.editor.setOption('tabSize', val)
+        Storage.set('tab_size', val)
+      }
+      this.editor.setOption('indentUnit', val)
+      Storage.set('space_units', val)
+      
+      this.updateIndentationDisplay()
+    })
+
+    widthInput.on('blur', () => {
+      widthLabel.removeClass('hidden')
+      widthInput.addClass('hidden')
+    })
+  }
+
+  updateIndentationDisplay() {
+    const type = this.statusIndicators.find('.indent-type')
+    const widthLabel = this.statusIndicators.find('.indent-width-label')
+    
+    const indentWithTabs = this.editor.getOption('indentWithTabs')
+    type.text(indentWithTabs ? 'Tab Size:' : 'Spaces:')
+    Storage.set('indent_type', indentWithTabs ? 'tab' : 'space')
+    
+    const unit = this.editor.getOption('indentUnit')
+    widthLabel.text(unit)
+  }
+
+  setupKeymap() {
+    const storedKeymap = Storage.get('keymap')
+    if (storedKeymap) {
+      this.editor.setOption('keyMap', storedKeymap)
+    }
+
+    const label = this.statusIndicators.find('.ui-keymap-label')
+    const sublime = this.statusIndicators.find('.ui-keymap-sublime')
+    const emacs = this.statusIndicators.find('.ui-keymap-emacs')
+    const vim = this.statusIndicators.find('.ui-keymap-vim')
+
+    this.updateKeymapLabel()
+
+    sublime.click(() => this.setKeymap('sublime'))
+    emacs.click(() => this.setKeymap('emacs'))
+    vim.click(() => this.setKeymap('vim'))
+  }
+
+  setKeymap(keymap) {
+    this.editor.setOption('keyMap', keymap)
+    Storage.set('keymap', keymap)
+    this.updateKeymapLabel()
+  }
+
+  updateKeymapLabel() {
+    const keymap = this.editor.getOption('keyMap')
+    this.statusIndicators.find('.ui-keymap-label').text(keymap)
+  }
+
+  setupLinter() {
+    const linterToggle = this.statusLinter.find('.ui-linter-toggle')
+    const enable = Storage.get('linter') === 'true'
+    
+    this.toggleLinter(enable)
+    linterToggle.toggleClass('active', enable)
+
+    linterToggle.click(() => {
+      const lintEnable = !!this.editor.getOption('lint')
+      this.toggleLinter(!lintEnable)
+      linterToggle.toggleClass('active', !lintEnable)
+    })
+  }
+
+  toggleLinter(enable) {
+    const gutters = this.editor.getOption('gutters')
+    const lintGutter = 'CodeMirror-lint-markers'
+
+    if (enable) {
+      if (!gutters.includes(lintGutter)) {
+        this.editor.setOption('gutters', [lintGutter, ...gutters])
+      }
+      Storage.set('linter', 'true')
+    } else {
+      this.editor.setOption('gutters', gutters.filter(g => g !== lintGutter))
+      Storage.remove('linter')
+    }
+    this.editor.setOption('lint', enable ? this.config.linterOptions : false)
+  }
+
+  setupPreferences() {
+    const overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]')
+    const storedOverrideBrowserKeymap = Storage.get('preferences-override-browser-keymap')
+    
+    overrideBrowserKeymap.prop('checked', storedOverrideBrowserKeymap === 'true')
+    this.setOverrideBrowserKeymap()
+
+    overrideBrowserKeymap.change(() => {
+      this.setOverrideBrowserKeymap()
+    })
+  }
+
+  setOverrideBrowserKeymap() {
+    const overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]')
+    if (overrideBrowserKeymap.is(':checked')) {
+      Storage.set('preferences-override-browser-keymap', 'true')
+      this.restoreOverrideEditorKeymap()
+    } else {
+      Storage.remove('preferences-override-browser-keymap')
+      this.resetEditorKeymapToBrowserKeymap()
+    }
+  }
+
+  resetEditorKeymapToBrowserKeymap() {
+    const keymap = this.editor.getOption('keyMap')
+    if (!this.jumpToAddressBarKeymapValue) {
+      this.jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]
+      delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]
+    }
+  }
+
+  restoreOverrideEditorKeymap() {
+    const keymap = this.editor.getOption('keyMap')
+    if (this.jumpToAddressBarKeymapValue) {
+      CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = this.jumpToAddressBarKeymapValue
+      this.jumpToAddressBarKeymapValue = null
+    }
+  }
+}