MapComplete/src/UI/BigComponents/MenuDrawer.svelte

<script lang="ts">
  import Translations from "../i18n/Translations"
  import Page from "../Base/Page.svelte"
  import Tr from "../Base/Tr.svelte"
  import If from "../Base/If.svelte"
  import CommunityIndexView from "./CommunityIndexView.svelte"
  import Community from "../../assets/svg/Community.svelte"
  import { Utils } from "../../Utils"
  import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
  import OpenIdEditor from "./OpenIdEditor.svelte"
  import OpenJosm from "../Base/OpenJosm.svelte"
  import MapillaryLink from "./MapillaryLink.svelte"
  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
  import DownloadPanel from "../DownloadFlow/DownloadPanel.svelte"
  import Share from "@babeard/svelte-heroicons/solid/Share"
  import ShareScreen from "./ShareScreen.svelte"
  import FilterPage from "./FilterPage.svelte"
  import RasterLayerOverview from "../Map/RasterLayerOverview.svelte"
  import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
  import Marker from "../Map/Marker.svelte"
  import { BoltIcon, ShareIcon } from "@babeard/svelte-heroicons/mini"
  import SidebarUnit from "../Base/SidebarUnit.svelte"
  import PanoramaxLink from "./PanoramaxLink.svelte"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar"
  import QueueList from "@babeard/svelte-heroicons/solid/QueueList"
  import Hotkeys from "../Base/Hotkeys"
  import MenuDrawerIndex from "./MenuDrawerIndex.svelte"
  import ThemeViewState from "../../Models/ThemeViewState"
  import HotkeyTable from "./HotkeyTable.svelte"

  export let onlyLink: boolean
  export let state: ThemeViewState

  let theme = state.theme
  let featureSwitches = state.featureSwitches
  let pg = state.guistate.pageStates
  let location = state.mapProperties?.location
  const t = Translations.t.general.menu
  let shown = new UIEventSource(state.guistate.pageStates.menu.data || !onlyLink)
  state.guistate.pageStates.menu.addCallback((isShown) => {
    if (!onlyLink) {
      return true
    }
    if (isShown) {
      shown.setData(true)
    } else {
      Utils.waitFor(250).then(() => {
        shown.setData(state.guistate.pageStates.menu.data)
      })
    }
  })
  let hotkeys = Hotkeys._docs
  let showBackground = state.featureSwitches.featureSwitchBackgroundSelection
  let showFilters = state.featureSwitches.featureSwitchFilter
</script>

<div class:h-0={!onlyLink} class:h-full={onlyLink} class="overflow-hidden">
  <MenuDrawerIndex {state} {onlyLink}>
    <!-- Theme related: documentation links, download, ... -->
    <svelte:fragment slot="theme-tools">
      {#if state.theme}
        <SidebarUnit>
          <h3>
            <Tr t={t.aboutCurrentThemeTitle} />
          </h3>

          <Page {onlyLink} shown={pg.about_theme}>
            <svelte:fragment slot="link">
              <Marker size="h-7 w-7" icons={theme.icon} />
              <Tr t={t.showIntroduction} />
            </svelte:fragment>
            <svelte:fragment slot="header">
              <Marker size="h-8 w-8 mr-3" icons={theme.icon} />
              <Tr t={theme.title} />
            </svelte:fragment>
            <ThemeIntroPanel {state} />
          </Page>

          {#if $showFilters}
            <FilterPage {onlyLink} {state} />
          {/if}
          {#if $showBackground}
            <RasterLayerOverview {onlyLink} {state} />
          {/if}
          <Page {onlyLink} shown={pg.share}>
            <svelte:fragment slot="header">
              <Share />
              <Tr t={Translations.t.general.sharescreen.title} />
            </svelte:fragment>
            <ShareScreen {state} />
          </Page>

          {#if state.featureSwitches?.featureSwitchEnableExport}
            <Page {onlyLink} shown={pg.download}>
              <svelte:fragment slot="header">
                <ArrowDownTray />
                <Tr t={Translations.t.general.download.title} />
              </svelte:fragment>
              <DownloadPanel {state} />
            </Page>
          {/if}

          {#if theme.official}
            <a
              class="flex"
              href={"https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/Docs/Themes/" +
                theme.id +
                ".md"}
              target="_blank"
            >
              <DocumentMagnifyingGlass class="h-6 w-6" />
              <Tr
                t={Translations.t.general.attribution.openThemeDocumentation.Subs({
                  name: theme.title,
                })}
              />
            </a>

            {#if $hotkeys.length > 0}
              <div class="hidden-on-mobile w-full">
                <Page {onlyLink} shown={pg.hotkeys}>
                  <svelte:fragment slot="header">
                    <BoltIcon />
                    <Tr t={Translations.t.hotkeyDocumentation.title} />
                  </svelte:fragment>
                  <HotkeyTable />
                </Page>
              </div>
            {/if}

            <a class="flex" href={Utils.OsmChaLinkFor(31, theme.id)} target="_blank">
              <QueueList class="h-6 w-6" />
              <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: theme.title })} />
            </a>
            <a
              class="flex"
              href={`./statistics.html?filter-mapcomplete-changes-theme-search={"search"%3A"${theme.id}"}`}
              target="_blank"
            >
              <ChartBar class="h-6 w-6" />
              <Tr
                t={Translations.t.general.attribution.openStatistics.Subs({ theme: theme.title })}
              />
            </a>
          {/if}
        </SidebarUnit>
      {/if}
    </svelte:fragment>

    <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
    <svelte:fragment slot="location-tools">
      {#if state.mapProperties?.location}
        <SidebarUnit>
          <h3>
            <Tr t={t.moreUtilsTitle} />
          </h3>

          <Page {onlyLink} shown={pg.community_index}>
            <svelte:fragment slot="header">
              <Community />
              <Tr t={Translations.t.communityIndex.title} />
            </svelte:fragment>
            <CommunityIndexView location={state.mapProperties.location} />
          </Page>

          <If condition={featureSwitches?.featureSwitchEnableLogin}>
            <OpenIdEditor mapProperties={state.mapProperties} />
            <OpenJosm {state} />
            <PanoramaxLink large={false} mapProperties={state.mapProperties} />
            <MapillaryLink large={false} mapProperties={state.mapProperties} />
          </If>

          <a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}">
            <ShareIcon />
            <Tr t={t.openHereDifferentApp} />
          </a>
        </SidebarUnit>
      {/if}
    </svelte:fragment>
  </MenuDrawerIndex>
</div>