{"version":3,"file":"SurfaceAddPostButton-578189e1.js","sources":["../../../app/javascript/vuecomponents/SurfaceAddPostButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { __ } from '@@/bits/intl'\nimport OzContainedButton, { OzContainedButtonColorScheme } from '@@/library/v4/components/OzContainedButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useSurfaceStore } from '@@/pinia/surface'\nimport { useSurfaceDraftsStore } from '@@/pinia/surface_drafts'\nimport { useSurfaceMapStore } from '@@/pinia/surface_map'\nimport { useSurfaceOnboardingDemoPadletPanelCopyStore } from '@@/pinia/surface_onboarding_demo_padlet_panel_copy_store'\nimport { useSurfaceOnboardingDemoPadletPanelStore } from '@@/pinia/surface_onboarding_demo_padlet_panel_store'\n\nimport { useSurfacePostsStore } from '@@/pinia/surface_posts'\nimport type { PostAttributes } from '@@/types'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst darkModeStore = useDarkModeStore()\nconst surfaceMapStore = useSurfaceMapStore()\nconst surfaceStore = useSurfaceStore()\nconst surfacePostsStore = useSurfacePostsStore()\nconst surfaceDemoPadletPanelStore = useSurfaceOnboardingDemoPadletPanelStore()\nconst surfaceDemoPadletPanelCopyStore = useSurfaceOnboardingDemoPadletPanelCopyStore()\nconst surfaceDraftsStore = useSurfaceDraftsStore()\n\nconst { isDarkMode } = storeToRefs(darkModeStore)\nconst {\n  isEmbedded,\n  isMap,\n  backgroundLuminance,\n  skinAccentColorAsRGB,\n  skinAccentTextColor,\n  skinPrimaryTextColor,\n  onboardingDemoButtonStyle,\n} = storeToRefs(surfaceStore)\nconst { startPickingLocation } = surfaceMapStore\nconst { startNewPost } = surfacePostsStore\n\nconst isHovered = ref(false)\n\nconst useSkinColors = computed(() => !!skinAccentColorAsRGB.value && !!skinAccentTextColor.value)\n\n/**\n * HOW DO WE HANDLE LIGHT/DARK MODE?\n *\n * `buttonDarkMode` will use the action bar primary text color due to proximity with the button.\n * `tooltipDarkMode` will use the background luminance since it's displayed over the posts container.\n * Best case scenario they will match, but there are some edge cases.\n */\nconst buttonDarkMode = computed(() => {\n  // See vuecomponents/SurfaceActionBar.vue\n  return useSkinColors.value ? skinPrimaryTextColor.value === 'white' : isDarkMode.value\n})\n\nconst tooltipDarkMode = computed(() => {\n  return useSkinColors.value ? backgroundLuminance.value === 'light' : isDarkMode.value\n})\n\nconst isButtonSkinColorDark = computed(() => skinAccentTextColor.value === 'white')\n\nconst tooltipText = __('Double click anywhere, drag files in, paste from clipboard, or click here to post.')\n\nconst setHover = (hoverState: boolean) => {\n  isHovered.value = hoverState\n}\n\nfunction handleClick(): void {\n  surfaceStore.setAddPostButtonClickStatus(true)\n  if (isMap.value) {\n    startPickingLocation()\n  } else {\n    if (surfaceDemoPadletPanelStore.isDemoPadletPanelDesktop && surfaceDemoPadletPanelStore.isPostStep) {\n      surfaceDemoPadletPanelStore.setFavoritePlacesSectionAsMostRecentlyTouched()\n      // Limit to one post draft at a time\n      if (!surfaceDraftsStore.isAnyDraftActive) {\n        const attributes: PostAttributes = {\n          ...surfaceDemoPadletPanelCopyStore.postData[0],\n        }\n        startNewPost({ attributes })\n      }\n    } else {\n      startNewPost({})\n    }\n  }\n}\n</script>\n\n<template>\n  <div :class=\"['absolute', isEmbedded ? 'bottom-5 end-5' : 'bottom-6 end-11']\">\n    <div v-if=\"surfaceDemoPadletPanelStore.demoPadletPanelVisibility.showModifiedSurfaceAddPostButton\">\n      <div\n        class=\"absolute -bottom-1 -end-1 w-16 h-16 rounded-full add-post-button-animation-skin-color animate-demo-padlet-circle-2-animation demo-padlet-circle-2-animation\"\n        :style=\"onboardingDemoButtonStyle\"\n      />\n      <div\n        class=\"absolute bottom-0 end-0 w-14 h-14 rounded-full add-post-button-animation-skin-color animate-demo-padlet-circle-1-animation demo-padlet-circle-1-animation\"\n        :style=\"onboardingDemoButtonStyle\"\n      />\n    </div>\n    <OzContainedButton\n      :class=\"[\n        // Button style\n        'relative',\n        'flex justify-center items-center',\n        'shadow-elevation-2',\n        'rounded-full',\n        'p-4',\n\n        !isMap && [\n          // Tooltip style\n          'before:absolute ltr:before:right-[calc(100%+0.5rem)] rtl:before:left-[calc(100%+0.5rem)]',\n          'before:invisible',\n          'before:shadow-elevation-2',\n          'before:rounded-lg',\n          'before:box-border',\n          'before:w-[320px]',\n          'before:px-3 before:py-2',\n          tooltipDarkMode ? 'before:bg-overlay-text-bg-d70' : 'before:bg-popover-light',\n          tooltipDarkMode ? 'before:text-light-text-100' : 'before:text-dark-text-100',\n          'before:backdrop-blur-[6px]',\n          'before:cursor-default before:pointer-events-none',\n          'before:text-body-small before:font-sans before:text-start',\n\n          // Tooltip display\n          'hover-hover:hover:before:visible',\n          'hover-hover:hover:before:content-[attr(data-tooltip)]',\n          'focus-visible:before:visible',\n          'focus-visible:before:content-[attr(data-tooltip)]',\n        ],\n        // classes for stylings when the button uses skin colors\n        {\n          'add-post-button-skin-color': useSkinColors,\n          'add-post-button-skin-dark': useSkinColors && isButtonSkinColorDark,\n          'add-post-button-skin-light': useSkinColors && !isButtonSkinColorDark,\n        },\n\n        // Focus style\n        buttonDarkMode ? 'focus-ring-dark' : 'focus-ring-light',\n      ]\"\n      :size-preset=\"null\"\n      :color-scheme=\"useSkinColors ? OzContainedButtonColorScheme.Bare : OzContainedButtonColorScheme.Primary\"\n      :dark-mode=\"buttonDarkMode\"\n      :data-tooltip=\"!isMap && tooltipText\"\n      :aria-label=\"__('Add post')\"\n      :title=\"__('Add post')\"\n      :style=\"onboardingDemoButtonStyle\"\n      :data-pepin-id=\"isMap ? 'surface-open-location-picker-panel' : 'surface-open-post-composer'\"\n      data-pepin-trigger=\"click\"\n      data-testid=\"surfaceAddPostButton\"\n      data-pw=\"surfaceAddPostButton\"\n      @mouseenter=\"setHover(true)\"\n      @focus=\"setHover(true)\"\n      @mouseleave=\"setHover(false)\"\n      @blur=\"setHover(false)\"\n      @click=\"handleClick()\"\n    >\n      <Transition name=\"rotate\" mode=\"out-in\">\n        <OzIcon v-if=\"!isHovered\" key=\"plus_thick\" name=\"plus_thick\" :size=\"24\" />\n        <OzIcon v-else key=\"pencil_filled\" name=\"pencil_filled\" :size=\"24\" />\n      </Transition>\n    </OzContainedButton>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.rotate-enter-active,\n.rotate-leave-active {\n  transition: all 0.1s linear;\n}\n\n.rotate-enter {\n  opacity: 0;\n  transform: rotate(-45deg);\n}\n\n.rotate-enter-to {\n  opacity: 1;\n  transform: rotate(0);\n}\n\n.rotate-leave {\n  opacity: 1;\n  transform: rotate(0);\n}\n\n.rotate-leave-to {\n  opacity: 0;\n  transform: rotate(45deg);\n}\n\n.focus-ring-light:focus-visible::after,\n.focus-ring-dark:focus-visible::after {\n  content: '';\n  position: absolute;\n  inset: -2px;\n  border-radius: 50%;\n}\n\n.focus-ring-light:focus-visible::after {\n  outline: 2.5px solid #9466e8; // Selection Light\n}\n\n.focus-ring-dark:focus-visible::after {\n  outline: 2.5px solid #fec006; // Selection Dark\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n.add-post-button-animation-skin-color {\n  background-color: var(--wall-skin-accent-color);\n  color: var(--wall-skin-accent-text-color);\n}\n.add-post-button-skin-color {\n  background-color: var(--wall-skin-accent-color);\n  color: var(--wall-skin-accent-text-color);\n\n  &.add-post-button-skin-dark {\n    @apply hover-hover:active:bg-canary-500;\n    @apply hover-hover:active:text-dark-text-100;\n  }\n\n  &.add-post-button-skin-light {\n    @apply hover-hover:active:bg-grape-500;\n    @apply hover-hover:active:text-light-text-100;\n  }\n}\n</style>\n"],"names":["darkModeStore","useDarkModeStore","surfaceMapStore","useSurfaceMapStore","surfaceStore","useSurfaceStore","surfacePostsStore","useSurfacePostsStore","surfaceDemoPadletPanelStore","useSurfaceOnboardingDemoPadletPanelStore","surfaceDemoPadletPanelCopyStore","useSurfaceOnboardingDemoPadletPanelCopyStore","surfaceDraftsStore","useSurfaceDraftsStore","isDarkMode","storeToRefs","isEmbedded","isMap","backgroundLuminance","skinAccentColorAsRGB","skinAccentTextColor","skinPrimaryTextColor","onboardingDemoButtonStyle","startPickingLocation","startNewPost","isHovered","ref","useSkinColors","computed","value","buttonDarkMode","tooltipDarkMode","isButtonSkinColorDark","tooltipText","__","setHover","hoverState","handleClick","setAddPostButtonClickStatus","isDemoPadletPanelDesktop","isPostStep","setFavoritePlacesSectionAsMostRecentlyTouched","isAnyDraftActive","attributes","postData"],"mappings":"gpHAgBA,MAAMA,EAAgBC,IAChBC,EAAkBC,IAClBC,EAAeC,IACfC,EAAoBC,IACpBC,EAA8BC,IAC9BC,EAAkCC,IAClCC,EAAqBC,IAErB,CAAEC,WAAAA,CAAW,EAAIC,EAAYf,CAAa,EAC1C,CACJgB,WAAAA,EACAC,MAAAA,EACAC,oBAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EACAC,qBAAAA,EACAC,0BAAAA,CACF,EAAIP,EAAYX,CAAY,EACtB,CAAEmB,qBAAAA,CAAyB,EAAArB,EAC3B,CAAEsB,aAAAA,CAAiB,EAAAlB,EAEnBmB,EAAYC,EAAI,EAAK,EAErBC,EAAgBC,EAAS,IAAM,CAAC,CAACT,EAAqBU,OAAS,CAAC,CAACT,EAAoBS,KAAK,EAS1FC,EAAiBF,EAAS,IAEvBD,EAAcE,MAAQR,EAAqBQ,QAAU,QAAUf,EAAWe,KAClF,EAEKE,EAAkBH,EAAS,IACxBD,EAAcE,MAAQX,EAAoBW,QAAU,QAAUf,EAAWe,KACjF,EAEKG,EAAwBJ,EAAS,IAAMR,EAAoBS,QAAU,OAAO,EAE5EI,EAAcC,EAAG,oFAAoF,EAErGC,EAAYC,GAAwB,CACxCX,EAAUI,MAAQO,GAGpB,SAASC,GAAoB,CAE3B,GADAjC,EAAakC,4BAA4B,EAAI,EACzCrB,EAAMY,MACaN,YAEjBf,EAA4B+B,0BAA4B/B,EAA4BgC,YAGlF,GAFJhC,EAA4BiC,8CAA8C,EAEtE,CAAC7B,EAAmB8B,iBAAkB,CACxC,MAAMC,EAA6B,CACjC,GAAGjC,EAAgCkC,SAAS,CAAC,GAElCpB,EAAA,CAAEmB,WAAAA,CAAW,CAAC,CAC7B,OAEAnB,EAAa,CAAE,CAAA,CAGrB"}