{"version":3,"file":"OzWallCard-89f1aec0.js","sources":["../../../app/javascript/library/v4/components/OzWallCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport device from '@@/bits/device'\nimport { __, n__ } from '@@/bits/intl'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzBadge, { OzBadgeColorScheme, OzBadgeSizePreset } from '@@/library/v4/components/OzBadge.vue'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport OzRelativeTime from '@@/library/v4/components/OzRelativeTime.vue'\nimport type { Library, WallCamelCase as Wall, Wall as WallSnakeCase } from '@@/types'\nimport { computed, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    wall: Wall | WallSnakeCase\n    cardWidth: number\n    wallTimestampType?: string\n    xMoreButton?: boolean\n    invisibleMoreButton?: boolean\n    library?: Library\n    canSelect?: boolean\n    isSelected?: boolean\n    href?: string\n    displayName?: string\n    isFaded?: boolean\n    disabled?: boolean\n  }>(),\n  {\n    wallTimestampType: 'updatedAt',\n    xMoreButton: true,\n    invisibleMoreButton: false,\n    library: undefined,\n    canSelect: false,\n    isSelected: false,\n    href: undefined,\n    displayName: undefined,\n    isFaded: false,\n    disabled: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'more', wall: Wall | WallSnakeCase, event: PointerEvent): void\n  (name: 'right-click', wall: Wall | WallSnakeCase, event: PointerEvent): void\n  (name: 'select-card', wall: Wall | WallSnakeCase, event: MouseEvent | KeyboardEvent): void\n  (name: 'aux-click', event: PointerEvent): void\n  (name: 'click', event: Event): void\n  (name: 'mouseenter', event: PointerEvent): void\n  (name: 'clicked-when-disabled'): void\n}>()\n\nconst isSafari = device.safari\n\nconst isFocused = ref<boolean>(false)\nconst isHoveringMoreButton = ref<boolean>(false)\n\nconst handleMoreClick = (event: PointerEvent): void => {\n  emit('more', props.wall, event)\n  trackEvent('Dashboard', 'Clicked More button on dashboard wall card')\n}\n\nconst wallLabel = computed((): string => {\n  if (props.disabled) return ''\n  return props.href\n    ? __('Go to %{wallTitle} padlet', { wallTitle: wallTitle.value })\n    : __('Select %{wallTitle} padlet', { wallTitle: wallTitle.value })\n})\n\nconst wallThumbnailTitle = computed((): string => {\n  return __('%{wallTitle} padlet thumbnail', { wallTitle: wallTitle.value })\n})\n\nconst wallTitle = computed((): string => {\n  return props.wall.title || __('Untitled padlet')\n})\n\nconst wallTimestamp = computed((): string => {\n  if (props.wallTimestampType === 'updatedAt') {\n    return 'updated_at' in props.wall ? props.wall.updated_at : props.wall.updatedAt\n  }\n  return props.wall[props.wallTimestampType]\n})\n\nconst accountDisplayName = computed((): string => {\n  if (props.displayName !== undefined) {\n    return props.displayName\n  }\n\n  const displayName =\n    'displayName' in props.wall.builder ? props.wall.builder.displayName : props.wall.builder.display_name\n  return props.library ? props.library.name : displayName\n})\n\nconst daysTillWallIsDeleted = computed((): number => {\n  const daysLeft =\n    'daysTillDeletion' in props.wall ? props.wall.daysTillDeletion : (props.wall as WallSnakeCase).days_till_deletion\n  return daysLeft ?? 0\n})\n\nconst daysTillDeletedDisplay = computed((): string => {\n  return n__('%{num} day left', '%{num} days left', daysTillWallIsDeleted.value, { num: daysTillWallIsDeleted.value })\n})\n\nconst wallDeletingSoon = computed((): boolean => {\n  return daysTillWallIsDeleted.value <= 3\n})\n\nconst xRelativeTimestamp = computed((): boolean => {\n  return props.wallTimestampType !== 'trashedAt'\n})\n\nconst xTemplate = computed((): boolean => {\n  if ('isTemplate' in props.wall) {\n    return props.wall.isTemplate === true\n  }\n  return false\n})\n\nconst moreButtonTopOffset = computed((): number => {\n  const wallThumbnailHeight = props.cardWidth / 2 // Since the wall thumbnail has an aspect ratio of 2, the height of the wall thumbnail is half of its width\n  const gapBetweenWallThumbnailAndWallTitle = 12 // 12px = gap between thumbnail and wall name\n  return wallThumbnailHeight + gapBetweenWallThumbnailAndWallTitle\n})\n\nconst wallThumbnailPlaceholderColor = computed((): string | undefined => {\n  if (isWallThumbnailLoaded.value) return undefined\n  return 'dominantColorAsRgb' in props.wall.thumbnail\n    ? props.wall.thumbnail.dominantColorAsRgb\n    : props.wall.thumbnail.dominant_color_as_rgb\n})\n\nconst showMoreMenu = (e: PointerEvent): void => {\n  if (props.xMoreButton) {\n    e.preventDefault()\n    emit('right-click', props.wall, e)\n    trackEvent('right-click', { target: 'dashboard-wall-card' })\n  }\n}\n\nconst handleWallThumbnailLoadingError = (e: Error): void => {\n  // do nothing\n  /**\n   * #WONTFIX\n   * Image load errors should be gone when they refresh the dashboard.\n   * If users still don't see the image, they will probably email us with the padlet link, then we can get the image source by visiting the padlet\n   *  Logging is error is not particularly helpful when there are so many of them.\n   */\n}\n\nconst isWallThumbnailLoaded = ref<boolean>(false)\n\nconst handleWallThumbnailLoadingSuccess = (): void => {\n  isWallThumbnailLoaded.value = true\n}\n\nwatch(\n  () => props.cardWidth,\n  () => {\n    // Reset it to show the placeholder when resizing\n    isWallThumbnailLoaded.value = false\n  },\n)\n\nconst handleSelect = (event: MouseEvent | KeyboardEvent | PointerEvent): void => {\n  if (props.disabled) {\n    emit('clicked-when-disabled')\n    return\n  }\n  // If the user performs a ctrl/command/shift + click, we select the card\n  if (event.ctrlKey || event.metaKey || event.shiftKey) {\n    handleMultiselect(event as MouseEvent)\n    return\n  }\n\n  emit('click', event)\n}\n\nconst handleMultiselect = (event: MouseEvent): void => {\n  if (props.disabled) {\n    return\n  }\n  if (props.canSelect) {\n    emit('select-card', props.wall, event)\n  }\n}\n\nconst handleKeydownSpace = (event: KeyboardEvent): void => {\n  if (props.disabled) {\n    return\n  }\n  // When OzBaseButton is rendered as a button, the space button is used to select/un-select the padlet\n  if (props.canSelect) {\n    emit('select-card', props.wall, event)\n    return\n  }\n\n  emit('click', event)\n}\n\nconst handleAuxButtonClick = (event: PointerEvent): void => {\n  if (props.disabled) {\n    return\n  }\n  // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button\n  const isMousewheelBeingClicked = event.button === 1\n  if (isMousewheelBeingClicked) {\n    emit('aux-click', event)\n  }\n}\n</script>\n\n<script lang=\"ts\">\nexport default {}\n</script>\n\n<template>\n  <div class=\"relative w-min\">\n    <OzBaseButton\n      :class=\"[\n        'flex',\n        'flex-col',\n        'gap-3',\n        !href && 'p-0',\n        isSafari && isFocused && 'focus-ring-box-shadow',\n        !isSafari && isFocused && 'focus-ring',\n        'group',\n        isSafari &&\n          !isSelected && {\n            'bg-transparent': !isHoveringMoreButton,\n            'bg-button-light dark:bg-button-dark rounded-lg outline-ring-box-shadow': isHoveringMoreButton,\n            // Hover state\n            'hhover:rounded-lg hhover:bg-button-light dark:hhover:bg-button-dark hover-ring-box-shadow': true,\n            // Active state\n            'hactive:rounded-lg hactive:bg-button-light hactive:dark:bg-button-dark active-ring-box-shadow': true,\n          },\n        !isSafari &&\n          !isSelected && {\n            'bg-transparent': !isHoveringMoreButton,\n            'bg-button-light dark:bg-button-dark rounded-lg outline-ring': isHoveringMoreButton,\n            // Hover state\n            'hhover:rounded-lg hhover:bg-button-light dark:hhover:bg-button-dark hover-ring': true,\n            // Active state\n            'hactive:rounded-lg hactive:bg-button-light hactive:dark:bg-button-dark active-ring': true,\n          },\n        isSafari &&\n          isSelected && {\n            'bg-[#F5F0FF] dark:bg-[#302917] rounded-lg': true,\n            'selected-ring-box-shadow': true,\n          },\n        !isSafari &&\n          isSelected && {\n            'bg-[#F5F0FF] dark:bg-[#302917] rounded-lg': true,\n            'selected-ring': true,\n          },\n      ]\"\n      :style=\"{\n        maxWidth: `${cardWidth}px`,\n      }\"\n      :title=\"wallLabel\"\n      :aria-label=\"wallLabel\"\n      :data-testid=\"`${isSelected ? 'wallCardSelected' : 'wallCardUnselected'}`\"\n      :href=\"href\"\n      @click.prevent.stop=\"handleSelect\"\n      @mousedown.prevent.stop\n      @auxclick.prevent.stop=\"handleAuxButtonClick\"\n      @contextmenu=\"showMoreMenu\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n      @keydown.enter.stop.prevent=\"handleSelect\"\n      @keydown.space.stop.prevent=\"handleKeydownSpace\"\n      @mouseenter.prevent.stop=\"$emit('mouseenter', $event)\"\n    >\n      <span class=\"bg-transparent relative\">\n        <div\n          class=\"absolute inset-0 rounded-lg oz-wall-card-image-hover-overlay z-10 hidden hover-hover:group-hover:block\"\n        />\n        <ImageThumbnail\n          :class=\"['rounded-lg max-w-full', isFaded && 'opacity-30']\"\n          :src=\"wall.thumbnail.url\"\n          :original-image-width=\"wall.thumbnail.width || 256\"\n          :original-image-height=\"wall.thumbnail.height || 128\"\n          :width=\"cardWidth\"\n          :aspect-ratio=\"2\"\n          :title=\"wallThumbnailTitle\"\n          alt=\"\"\n          :placeholder-color-value=\"wallThumbnailPlaceholderColor\"\n          :placeholder-color=\"'random'\"\n          :fallback-to-placeholder=\"true\"\n          :process-image=\"true\"\n          @error=\"handleWallThumbnailLoadingError\"\n          @load=\"handleWallThumbnailLoadingSuccess\"\n        />\n        <span class=\"flex absolute top-0 ms-2 mt-2 h-4 space-s-2\">\n          <OzBadge\n            v-if=\"wall.frozen\"\n            :data-testid=\"`${wall.title}FrozenBadge`\"\n            :class=\"['text-light-text-100 bg-teal-600']\"\n            :text=\"__('Frozen')\"\n            :size-preset=\"OzBadgeSizePreset.Tiny\"\n            :color-scheme=\"OzBadgeColorScheme.Bare\"\n          >\n            <template #startAdornment> <OzIcon name=\"freeze\" :size=\"10\" class=\"pe-0.5\" /> </template\n          ></OzBadge>\n          <OzBadge\n            v-if=\"xTemplate\"\n            :data-testid=\"`${wall.title}TemplateBadge`\"\n            :class=\"['text-light-text-100 bg-teal-600']\"\n            :text=\"__('Template')\"\n            :size-preset=\"OzBadgeSizePreset.Tiny\"\n            :color-scheme=\"OzBadgeColorScheme.Bare\"\n          />\n        </span>\n      </span>\n\n      <span class=\"flex w-full\">\n        <span class=\"flex-1 space-y-0.5 ms-1.5 mb-1 min-w-0\">\n          <span\n            :class=\"[\n              isFaded ? 'text-dark-text-300 dark:text-light-text-300' : 'text-dark-text-100 dark:text-light-text-100',\n              'group-active:text-grape-500 dark:group-active:text-canary-500',\n              'text-body-small text-start',\n              'font-semibold',\n              'line-clamp-2',\n              'break-word-anywhere',\n              xMoreButton && 'me-7', // To account for the more button to prevent stacking of the wall title on the more button\n            ]\"\n          >\n            {{ wallTitle }}\n          </span>\n          <span\n            :class=\"[\n              'text-body-extra-small whitespace-nowrap flex me-2',\n              'text-dark-text-200 dark:text-light-text-200',\n            ]\"\n          >\n            <span class=\"truncate\">{{ accountDisplayName }}</span>\n            <span class=\"text-dark-text-300 dark:text-light-text-300\"> &nbsp;•&nbsp; </span>\n            <OzRelativeTime v-if=\"xRelativeTimestamp\" :datetime=\"wallTimestamp\" dateformat=\"short\" />\n            <span v-else :class=\"[wallDeletingSoon && 'text-danger-100']\">{{ daysTillDeletedDisplay }}</span>\n          </span>\n        </span>\n      </span>\n    </OzBaseButton>\n\n    <OzPlainButton\n      v-if=\"xMoreButton\"\n      :id=\"`${wall.namespace}_${wall.name}WallCardMoreButton`\"\n      :data-testid=\"`${wallTitle}MoreButton`\"\n      :class=\"['-mt-1 ms-1 -me-1 absolute end-0', invisibleMoreButton && 'invisible']\"\n      :style=\"{ top: `${moreButtonTopOffset}px` }\"\n      :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n      :size-preset=\"OzPlainButtonSizePreset.H28px\"\n      :title=\"__('More padlet actions for %{wallTitle}', { wallTitle })\"\n      :aria-label=\"__('More padlet actions for %{wallTitle}', { wallTitle })\"\n      @click.prevent.stop=\"handleMoreClick\"\n      @mouseenter.stop=\"isHoveringMoreButton = true\"\n      @mouseleave.stop=\"isHoveringMoreButton = false\"\n    >\n      <OzIcon :size=\"20\" name=\"more_vertical_thin\" />\n    </OzPlainButton>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.focus-ring {\n  position: relative;\n  outline: none;\n  outline-offset: 0px;\n}\n\n.focus-ring-box-shadow {\n  position: relative;\n  outline: none;\n  outline-offset: 0px;\n}\n\n.focus-ring > * {\n  z-index: 1;\n}\n\n.focus-ring-box-shadow > * {\n  z-index: 1;\n}\n\n.focus-ring::after {\n  content: '';\n  position: absolute;\n  inset: -0.25rem;\n  border-radius: 0.75rem;\n  outline: 0.1875rem solid theme('colors.grape.500') !important;\n\n  @media (prefers-color-scheme: dark) {\n    outline: 0.1875rem solid theme('colors.canary.500') !important;\n  }\n}\n\n.focus-ring-box-shadow::after {\n  content: '';\n  position: absolute;\n  inset: -0.25rem;\n  border-radius: 0.75rem;\n  box-shadow: 0 0 0 0.1875rem theme('colors.grape.500') !important;\n\n  @media (prefers-color-scheme: dark) {\n    box-shadow: 0 0 0 0.1875rem theme('colors.canary.500') !important;\n  }\n}\n\n.outline-ring,\n.active-ring:active {\n  outline: 0.25rem solid theme('colors.button.light');\n\n  @media (prefers-color-scheme: dark) {\n    outline: 0.25rem solid theme('colors.button.dark');\n  }\n}\n\n.outline-ring-box-shadow,\n.active-ring-box-shadow:active {\n  box-shadow: 0 0 0 0.25rem theme('colors.button.light');\n\n  @media (prefers-color-scheme: dark) {\n    box-shadow: 0 0 0 0.25rem theme('colors.button.dark');\n  }\n}\n\n@media (hover: hover) {\n  .hover-ring:hover {\n    outline: 0.25rem solid theme('colors.button.light');\n\n    @media (prefers-color-scheme: dark) {\n      outline: 0.25rem solid theme('colors.button.dark');\n    }\n  }\n\n  .hover-ring-box-shadow:hover {\n    box-shadow: 0 0 0 0.25rem theme('colors.button.light');\n\n    @media (prefers-color-scheme: dark) {\n      box-shadow: 0 0 0 0.25rem theme('colors.button.dark');\n    }\n  }\n}\n\n.selected-ring {\n  position: relative;\n  outline: none;\n  outline-offset: 0px;\n\n  // Creates the outline that has the same color as the background\n  outline: 0.25rem solid #f5f0ff;\n  @media (prefers-color-scheme: dark) {\n    outline: 0.25rem solid #302917;\n  }\n}\n\n.selected-ring::after {\n  content: '';\n  position: absolute;\n  inset: -0.25rem;\n  border-radius: 0.75rem;\n\n  outline: 0.125rem solid theme('colors.grape.500');\n\n  @media (prefers-color-scheme: dark) {\n    outline: 0.125rem solid theme('colors.canary.500');\n  }\n}\n\n.selected-ring-box-shadow {\n  position: relative;\n  outline: none;\n  outline-offset: 0px;\n\n  // Creates the outline that has the same color as the background\n  box-shadow: 0 0 0 0.125rem #f5f0ff;\n  @media (prefers-color-scheme: dark) {\n    box-shadow: 0 0 0 0.125rem #302917;\n  }\n}\n\n.selected-ring-box-shadow::after {\n  content: '';\n  position: absolute;\n  inset: -0.25rem;\n  border-radius: 0.75rem;\n\n  box-shadow: 0 0 0 0.125rem theme('colors.grape.500');\n\n  @media (prefers-color-scheme: dark) {\n    box-shadow: 0 0 0 0.125rem theme('colors.canary.500');\n  }\n}\n\n.oz-wall-card-image-hover-overlay {\n  background: linear-gradient(180deg, rgba(29, 29, 29, 0) 36.98%, rgba(29, 29, 29, 0.6) 100%);\n  mix-blend-mode: soft-light;\n}\n</style>\n"],"names":["__default__","isSafari","device","safari","isFocused","ref","isHoveringMoreButton","handleMoreClick","event","emit","props","wall","trackEvent","wallLabel","computed","disabled","href","__","wallTitle","value","wallThumbnailTitle","title","wallTimestamp","wallTimestampType","updated_at","updatedAt","accountDisplayName","displayName","builder","display_name","library","name","daysTillWallIsDeleted","daysTillDeletion","days_till_deletion","daysTillDeletedDisplay","n__","num","wallDeletingSoon","xRelativeTimestamp","xTemplate","isTemplate","moreButtonTopOffset","cardWidth","wallThumbnailPlaceholderColor","isWallThumbnailLoaded","thumbnail","dominantColorAsRgb","dominant_color_as_rgb","showMoreMenu","e","xMoreButton","preventDefault","target","handleWallThumbnailLoadingError","handleWallThumbnailLoadingSuccess","watch","handleSelect","ctrlKey","metaKey","shiftKey","handleMultiselect","canSelect","button"],"mappings":"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"}