{"version":3,"file":"OzWallCard-c7a1a0f8.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        isFocused && [\n          'relative outline-none outline-offset-0',\n          'after:content-[\\'\\'] after:absolute after:-inset-1 after:rounded-xl after:outline after:outline-[3px] after:outline-grape-500 dark:after:outline-canary-500',\n          '*:z-[1]',\n        ],\n        'group',\n        isSelected\n          ? {\n              'bg-[#F5F0FF] dark:bg-[#302917] rounded-lg': true,\n              'outline outline-4 outline-[#f5f0ff] dark:outline-[#302917] after:content-[\\'\\'] after:absolute after:-inset-1 after:rounded-xl after:outline after:outline-2 after:outline-grape-500 dark:after:outline-canary-500': true,\n            }\n          : {\n              'bg-transparent': !isHoveringMoreButton,\n              'bg-button-light dark:bg-button-dark rounded-lg': isHoveringMoreButton,\n              'outline outline-4 outline-button-light dark:outline-button-dark': isHoveringMoreButton,\n              // Hover state\n              'hhover:rounded-lg hhover:bg-button-light dark:hhover:bg-button-dark': true,\n              'hhover:outline hhover:outline-4 hhover:outline-button-light dark:hhover:outline-button-dark': true,\n              // Active state\n              'hactive:rounded-lg hactive:bg-button-light hactive:dark:bg-button-dark': true,\n              'hactive:outline hactive:outline-4 hactive:outline-button-light dark:hactive:outline-button-dark': 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 bg-gradient-to-b from-[rgba(29,29,29,0)_36.98%] to-[rgba(29,29,29,0.6)] mix-blend-soft-light 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"],"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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"}