Cartographer User and Technical Documentation
Home
User Docs
Technical Docs
Home
User Docs
Technical Docs
  • User Documentation
    • Introduction
    • Cartographer App
    • User Interface
    • Actions
  • Technical Documentation
    • Components

      • AppFooter Component
      • AppHeader Component
      • AppSidebar Component
      • ContentPreviewMdiv Component
      • Content Preview Measure
      • Content Preview Pane
      • ImageSelection Modal
      • LoadGitModal Component
      • LoadIIIFModal Component
      • LoadXMLModal Component
      • MainMenu Component
      • MeasureModal Component
      • MdivModal Component
      • OsdComponent Component
      • PageImportModal Component
      • PagesListEntry Component
      • PagesModal Component
    • Store
      • Vuex Store (src/store/index.js)
    • Tools
      • IIIF Tools (src/tools/iiif.js)
      • MEI Mapping Tools (src/tools/meimapping.js)

AppFooter Component

Displays the application footer, including navigation controls, current mdiv label, zone count, and loading status.


Overview

The AppFooter component provides:

  • Navigation between pages (previous, next, jump to page)
  • Display of the current mdiv (musical division) label (clickable, opens modal)
  • Display of the number of zones on the current page
  • Loading progress indicator

Layout

  • Left: Current mdiv label (clickable, opens modal)
  • Center: Page navigation (prev/next, jump to page)
  • Right: Number of zones on current page
  • Progress: Shows loading progress bar if loading

Props

None


Data

NameTypeDescription
inputPageStringUser input for page navigation

Computed Properties

NameDescription
currentPageCurrent page number (1-based)
maxPageMaximum page number
isReadyWhether the app is ready
isLoadingWhether the app is currently loading
prevAvailableWhether the previous page is available
nextAvailableWhether the next page is available
zonesCountNumber of zones on the current page
mdivLabelLabel for the current mdiv (musical division)

Methods

NameDescription
showPrevPageNavigates to the previous page
showNextPageNavigates to the next page
showMdivModalOpens the mdiv modal dialog
jumpToPageJumps to the page entered by the user

Watchers

Watched PropertyDescription
currentPageUpdates inputPage when the page changes

Example

<AppFooter />

Next
AppHeader Component