@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/ContentEditDrawer.css

@@ -1,274 +0,0 @@
-.ContentEditDrawer {
-  --offset: 0px; /* Controls the distance of shelf from the edges of the viewport */
-  --nav-width: 0px; /* Offsets the shelf position based on the width of page nav*/
-  --panel-width: var(
-    --has-right-rail,
-    var(--right-rail-w)
-  ); /* Width of guide or ask ai panel */
-
-  @apply fixed scale-x-0 [content-visibility:hidden] md:[--nav-width:var(--pageNav-w)];
-
-  &.is-open {
-    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-r bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
-  }
-}
-
-/* Shelf responsive width adjustments */
-.Page-content.is-previewing,
-.Page-content.has-widget-panel-open,
-.Popup-content.is-previewing,
-.Popup-content.has-widget-panel-open {
-  /* When any panel is visible (preview OR widgets), use constrained width */
-  .ContentEditDrawer.is-open {
-    @apply md:w-[var(--contentForm-resized-safe-w,var(--contentForm-w))];
-  }
-}
-
-.ContentEditDrawer-header {
-  @apply flex items-center gap-2 border-y bg-gray-50 px-4 py-3.5;
-
-  .closeButton {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray relative bg-gray-50 before:btu-icon before:btu-icon-x;
-  }
-
-  .Widget-title {
-    @apply btu-heading-4 grow border-b-0 bg-gray-50 py-0;
-  }
-}
-
-.ContentEditDrawer-widget {
-  @apply relative contain-content;
-
-  &-carousel {
-    @apply gap-2 bg-gray-50;
-
-    > .CIG {
-      @apply overflow-y-hidden overflow-x-scroll py-2;
-
-      > .CIG-row {
-        @apply mt-0 p-0;
-
-        > .CIG-large {
-          @apply m-0 min-h-[calc(164px_+_theme(spacing.[1.5]))];
-
-          > .RCIG-list {
-            li.message-warning {
-              @apply col-span-full mr-6 flex w-full bg-warning-25 before:ml-6 before:shadow-none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-/* Display spinner when filters are updated and frame is loading */
-.ContentEditDrawer-widget.is-loading {
-  &::before {
-    @apply absolute inset-0 z-[2] block bg-gray-50 content-[''];
-  }
-
-  &::after {
-    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] block size-[--Loader-size] -translate-x-1/2 -translate-y-1/2;
-  }
-}
-
-.ContentEditDrawer-widget-carousel-list {
-  --margin-offset: 0px;
-  @apply btu-scrollshadow-50 relative mx-4 my-0 flex gap-2 border-0 p-0 supports-[animation-timeline:--scroll-timeline]:[--margin-offset:-2rem];
-
-  li {
-    @apply first:ms-[--margin-offset] last:me-[--margin-offset];
-  }
-
-  .ContentEditDrawer-widget-carousel-list-item.RCIG-item {
-    @apply flex h-[164px] min-w-[148px] max-w-[148px] cursor-move flex-col rounded-lg border border-gray-300 !bg-gray-50 shadow-xs;
-  }
-
-  .ContentEditDrawer-widget-carousel-list-item-moreInfoButton.ContentSummary-info {
-    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:block;
-  }
-
-  .ContentEditDrawer-widget-carousel-list-item-selectButton {
-    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
-
-    &:checked {
-      @apply border-primary-50 bg-primary-800 before:bg-primary-800 hover:border-primary-800 hover:bg-primary-800;
-    }
-  }
-
-  /* Item hover state */
-  .ContentEditDrawer-widget-carousel-list-item.RCIG-item:hover {
-    .ContentEditDrawer-widget-carousel-list-item-title,
-    .ContentEditDrawer-widget-carousel-list-item-type,
-    .ContentEditDrawer-imageTitle {
-      @apply bg-gray-100;
-    }
-
-    .ContentSummary-info {
-      @apply block;
-    }
-  }
-
-  /* Item selected state */
-  .ContentEditDrawer-widget-carousel-list-item.RCIG-item.Sortable-selected {
-    @apply border-primary-500;
-
-    .ContentEditDrawer-widget-carousel-list-item-title,
-    .ContentEditDrawer-widget-carousel-list-item-type,
-    .ContentEditDrawer-imageTitle {
-      @apply bg-gray-100;
-    }
-  }
-
-  /* Item with no image preview */
-  .ContentEditDrawer-widget-carousel-list-item.RCIG-item:not(:has(img)):not(
-      .Sortable-drag
-    ) {
-    @apply before:btu-icon-via-mask-file-text before:z-[1] before:m-auto before:btu-icon-gradient-primary after:absolute after:top-[18.5px] after:size-14 after:rounded-full after:bg-gray-50 after:mix-blend-multiply dark:after:bg-gray-100 dark:after:mix-blend-normal;
-  }
-
-  /* Item title */
-  .ContentEditDrawer-widget-carousel-list-item-title.RCIG-title {
-    @apply w-full cursor-move truncate border-t bg-white px-4 pb-0 pt-4 text-sm text-gray-900 [background-image:none] before:hidden after:!hidden;
-
-    &:has(~ .ContentSummary-info) {
-      @apply pe-11;
-    }
-  }
-
-  /* Item content type */
-  .ContentEditDrawer-widget-carousel-list-item-type {
-    @apply w-full truncate bg-white p-4 pt-0 text-xs text-gray-500 before:hidden;
-  }
-
-  /* Image preview */
-  .ContentEditDrawer-widget-carousel-list-item-image {
-    @apply size-full max-h-[91px] object-contain;
-
-    ~ .ContentEditDrawer-imageTitle {
-      @apply w-full truncate border-t bg-white px-4 pb-0 pt-4 text-sm font-semibold text-gray-900;
-
-      &:has(~ .ContentSummary-info) {
-        @apply pe-11;
-      }
-    }
-  }
-}
-
-.ContentEditDrawer-widget-filters {
-  @apply flex h-0 origin-top flex-wrap gap-2 border-b bg-gray-50 p-0 opacity-0 transition-[height_opacity] duration-500 max-md:flex-col;
-
-  &.is-visible {
-    @apply h-fit px-4 py-2 opacity-100;
-  }
-
-  .ContentEditDrawer-widget-filters-sourceType-customFilters {
-    @apply flex flex-wrap gap-2 max-md:flex-col;
-  }
-
-  .queryRestrictions {
-    @apply flex flex-wrap gap-2 max-md:flex-col;
-  }
-
-  .queryRestrictions > .watch-button {
-    @apply text-md;
-  }
-
-  .ComboInput {
-    @apply w-auto items-center text-sm;
-  }
-}
-
-/* Show/hide filters toggle present when The Shelf is in the right rail */
-.ContentEditDrawer-filtersToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-sliders-horizontal;
-
-  &[aria-expanded='true'] {
-    @apply btu-button-pressed;
-  }
-}
-
-/* ContentEditDrawer items when dragged out of The Shelf and placed somewhere */
-.Sortable.RCS-list,
-.Sortable.RCIG-list,
-.Sortable.CIG-row {
-  &:not([class*='ContentEditDrawer-widget-carousel-list']) {
-    /* RCIG Grid view */
-    .ContentEditDrawer-widget-carousel-list-item.is-gridItem {
-      > .ContentSelector-search {
-        @apply relative col-span-full row-start-2 m-0 flex h-full items-center justify-center border-y border-solid border-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:btu-button-sm before:absolute before:-bottom-[33px] before:right-10;
-
-        img {
-          @apply max-h-36;
-        }
-
-        figcaption {
-          @apply hidden;
-        }
-      }
-
-      > .ContentSelector-clear {
-        @apply hidden;
-      }
-
-      > .ContentSelector-edit {
-        @apply -right-2 col-start-3 row-start-3 my-1;
-      }
-
-      &:has(
-          > *:not(.CIG, .ContentSelector-search, .ContentSelector-edit):hover
-        ) {
-        .ContentSelector-search:before,
-        .ContentSelector-edit {
-          @apply bg-white;
-        }
-      }
-
-      &:has(> .ContentSelector-search:hover),
-      &:has(> .ContentSelector-edit:hover) {
-        @apply bg-white;
-      }
-    }
-
-    /* RCIG List view */
-    .ContentEditDrawer-widget-carousel-list-item.is-listItem {
-      > .ContentSelector-search,
-      > .ContentSelector-edit,
-      > .ContentSelector-clear {
-        @apply hidden;
-      }
-    }
-  }
-
-  /* Hides ghost when dragging into a single value field */
-  &[data-type='record'] {
-    &:not([class*='ContentEditDrawer-widget-carousel-list']) {
-      &:not([data-field='items']) {
-        .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
-          @apply hidden;
-        }
-      }
-    }
-  }
-}
-
-/* Dragging from the shelf into RTE */
-.CIG-small[data-rte-container='true'] {
-  .ContentEditDrawer-widget-carousel-list-item {
-    @apply hidden;
-  }
-
-  .drawerDropOverlay {
-    @apply z-20 before:absolute before:size-full before:rounded-lg before:border before:border-dashed before:border-primary-600 before:bg-primary-50/50 before:content-[''] hover:before:border-solid;
-  }
-}
-
-/* Content Edit Drawer inside a popup dialog */
-dialog:modal > .Popup .ContentEditDrawer.is-open {
-  --offset: 1rem;
-  --nav-width: 0px;
-  --panel-width: 0px;
-
-  @apply rounded-es-2xl;
-}

package/src/legacy/tool-ui/src/ContentEditDrawer.ts

@@ -1,217 +0,0 @@
-import onFind from './dom/onFind'
-import { contentSummaryEvent } from './ContentSummary'
-
-const tooltips = window.BRIGHTSPOT?.ui.tooltips
-const drawerKey = `BSP.ContentEdit.contentEditDrawerOpen`
-
-// Initializes multi select event on drawer checkboxes
-onFind(
-  '.ContentEditDrawer.is-open .ContentEditDrawer-widget-carousel-list-item',
-  (drawerItem) => {
-    drawerItemSelectEvent(drawerItem)
-  },
-)
-
-onFind('.ContentEditDrawer-widget.frame.loaded', (drawerWidget) => {
-  const page = drawerWidget.closest<HTMLElement>('.content-edit')
-  if (!page) return
-
-  const drawerButton = page.querySelector<HTMLButtonElement>(
-    ':scope button[data-icon-button-name="manage_search"]',
-  )
-  const drawerContainer = drawerWidget.parentElement
-  const contentFormMain = page.querySelector<HTMLElement>('.contentForm-main')
-  const closeButton =
-    drawerContainer?.querySelector<HTMLButtonElement>('button.Popup-close')
-
-  if (closeButton) {
-    closeButton.title = tooltips.collapse
-  }
-
-  // Move the drawer button to the end of the toolbar to match visual order
-  if (drawerButton) {
-    const listItem = drawerButton.closest('li')
-    const toolbar = drawerButton.closest('.ContentEdit-toolbar')
-    if (listItem && toolbar) {
-      toolbar.appendChild(listItem)
-    }
-  }
-
-  const openDrawer = (shouldFocus = true) => {
-    drawerContainer?.classList.add('is-open')
-    contentFormMain?.classList.add('is-openDrawer')
-    localStorage.setItem(drawerKey, 'true')
-
-    // Handle shelf right rail button state
-    if (drawerButton) {
-      const labelOpen = `${tooltips.close} ${drawerButton.dataset.label}`
-
-      drawerButton.classList.add('is-active')
-      drawerButton.ariaLabel = labelOpen
-      drawerButton.title = labelOpen
-      drawerButton.ariaExpanded = 'true'
-    }
-
-    // Move focus to the close button when drawer is opened by user interaction
-    if (shouldFocus) {
-      closeButton?.focus()
-    }
-  }
-
-  const closeDrawer = () => {
-    drawerContainer?.classList.remove('is-open')
-    contentFormMain?.classList.remove('is-openDrawer')
-    localStorage.removeItem(drawerKey)
-
-    // Handle shelf right rail button state
-    if (drawerButton) {
-      const labelClose = `${tooltips.open} ${drawerButton.dataset.label}`
-
-      drawerButton.classList.remove('is-active')
-      drawerButton.ariaLabel = labelClose
-      drawerButton.title = labelClose
-      drawerButton.ariaExpanded = 'false'
-    }
-
-    // Return focus to the drawer button when drawer is closed
-    drawerButton?.focus()
-  }
-
-  closeButton?.addEventListener('click', (evt) => {
-    evt.preventDefault()
-    evt.stopPropagation()
-
-    closeDrawer()
-  })
-
-  if (localStorage.getItem(drawerKey)) {
-    openDrawer(false)
-  }
-
-  // Shelf frame refreshes on filters but right rail shelf button doesn't, so we shouldn't reinitialize its click event
-  if (!drawerButton?.dataset.clickInitialized) {
-    drawerButton?.addEventListener('click', () => {
-      drawerButton.dataset.clickInitialized = 'true'
-
-      const isActive = drawerContainer?.classList.contains('is-open')
-      if (isActive) {
-        closeDrawer()
-      } else {
-        openDrawer()
-      }
-    })
-  }
-})
-
-onFind('.ContentEditDrawer-widget-carousel-list', (drawerList) => {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      // Allows to place back item back into drawer
-      if (mutation.addedNodes.length) {
-        const addedNode = mutation.addedNodes[0]
-
-        if (addedNode instanceof HTMLLIElement) {
-          addedNode.classList.remove('is-hidden')
-          addedNode.classList.remove('RCS-item')
-
-          const drawerSelectButton = addedNode.querySelector<HTMLInputElement>(
-            'input.ContentEditDrawer-widget-carousel-list-item-selectButton',
-          )
-          const drawerInfoButton = addedNode.querySelector<HTMLButtonElement>(
-            'button.ContentEditDrawer-widget-carousel-list-item-moreInfoButton',
-          )
-
-          // Reinitialize multi select and content summary event since Sortable cloning removes it
-
-          if (
-            !addedNode.classList.contains('Sortable-selected') ||
-            !addedNode.classList.contains('is-moving')
-          ) {
-            deselectDrawerItem(addedNode)
-          } else if (drawerSelectButton) {
-            drawerSelectButton.checked = true
-          }
-
-          // Re-add checkbox event listeners after cloning
-          drawerItemSelectEvent(addedNode)
-
-          if (drawerInfoButton) {
-            drawerInfoButton.classList.remove('is-active')
-            contentSummaryEvent(drawerInfoButton)
-          }
-        }
-      }
-
-      if (mutation.removedNodes.length) {
-        const removedNode = mutation.removedNodes[0]
-
-        if (removedNode instanceof HTMLLIElement) {
-          removedNode.classList.add('RCS-item')
-        }
-      }
-    })
-  })
-
-  observer.observe(drawerList, {
-    childList: true,
-  })
-})
-
-if (CSS.supports('content-visibility', 'hidden')) {
-  onFind(
-    '.ContentEditDrawer.is-open .ContentEditDrawer-widget-carousel-list-item',
-    (drawerItem) => {
-      const options = {}
-
-      const observer = new IntersectionObserver(
-        (entries: IntersectionObserverEntry[]) => {
-          entries.forEach((entry: IntersectionObserverEntry) => {
-            if (entry.isIntersecting) {
-              entry.target.classList.remove('is-hidden')
-            } else {
-              entry.target.classList.add('is-hidden')
-            }
-          })
-        },
-        options,
-      )
-
-      observer.observe(drawerItem)
-    },
-  )
-}
-
-export const drawerItemSelectEvent = (drawerItem: Element) => {
-  const checkbox = drawerItem.querySelector<HTMLInputElement>(
-    'input.ContentEditDrawer-widget-carousel-list-item-selectButton',
-  )
-  if (!checkbox) return
-
-  // Add is-moving on mousedown BEFORE Sortable's onSelect fires
-  checkbox.addEventListener('mousedown', () => {
-    if (!checkbox.checked) {
-      drawerItem.classList.add('is-moving')
-    }
-  })
-
-  // Handle the actual selection state on change
-  checkbox.addEventListener('change', () => {
-    if (!checkbox.checked) {
-      drawerItem.classList.remove('Sortable-selected')
-      drawerItem.classList.remove('is-moving')
-    }
-  })
-}
-
-export const deselectDrawerItem = (drawerItem: Element) => {
-  const drawerSelectButton = drawerItem.querySelector<HTMLInputElement>(
-    'input.ContentEditDrawer-widget-carousel-list-item-selectButton',
-  )
-
-  if (drawerSelectButton) {
-    drawerSelectButton.checked = false
-  }
-
-  drawerItem.classList.remove('Sortable-selected')
-  drawerItem.classList.remove('is-moving')
-}

package/src/legacy/tool-ui/src/ContentEditPanel.ts

@@ -1,188 +0,0 @@
-import onFind from './dom/onFind'
-import create from './dom/create'
-import storage from './util/storage'
-
-interface PanelData {
-  typeId: string
-  panelId?: string
-  width?: string
-}
-
-let panelData: PanelData | null
-
-let pointerIsDown = false
-let pdOriginX = 0 // Pointer down origin x position
-let gtcOrigin: number[] = [] // Origin Grid Template Columns in pixels
-let ogTransProp: undefined | string
-let isRTL = false // Whether the container has RTL direction
-let container: HTMLElement | null // The target Page
-let panel: HTMLElement | null // The target Panel
-
-const updateWidth = (length: string) => {
-  if (!container) {
-    container = document.querySelector<HTMLElement>('.Page-content, .Popup')
-  }
-  document.documentElement.style.setProperty('--contentForm-resized-w', length)
-  setTimeout(() => window.dispatchEvent(new Event('resize')), 100)
-}
-
-const getPreferredWidth = (data: PanelData) => {
-  return storage.get(`BSP.ContentEdit.form/${data.typeId}/width`)
-}
-
-const savePreferredWidth = (data: PanelData) => {
-  if (!data || !data.width) return
-  storage.set(`BSP.ContentEdit.form/${data.typeId}/width`, data.width)
-}
-
-/* Add behavior for Preview "show/hide actions" toggle */
-onFind('.PreviewFrame-moreActions', (moreActions: HTMLButtonElement) => {
-  moreActions.addEventListener('click', () => {
-    moreActions.toggleAttribute('aria-expanded')
-  })
-})
-
-const onPointerDown = (e: PointerEvent) => {
-  if (e.target instanceof HTMLElement) {
-    if (e.target.classList.contains('ContentEdit-resizeWrapper')) {
-      container = e.target.closest<HTMLElement>('.Page-content, .Popup')
-      if (!container) return
-      pointerIsDown = true
-      const isPopup = container.classList.contains('Popup')
-      if (isPopup) {
-        container.style.cursor = 'col-resize'
-        container.style.userSelect = 'none'
-      } else {
-        document.body.style.cursor = 'col-resize'
-        document.body.style.userSelect = 'none'
-      }
-      pdOriginX = e.screenX
-      const computedStyle = getComputedStyle(container)
-      ogTransProp = computedStyle.transitionProperty
-      isRTL = computedStyle.direction === 'rtl'
-      container.style.transitionProperty = 'none'
-      const grid = isPopup
-        ? container.querySelector<HTMLElement>('.Popup-content')
-        : container
-      if (!grid) return
-
-      gtcOrigin = window
-        .getComputedStyle(grid)
-        .gridTemplateColumns.split(' ')
-        .map((a: string) => +a.slice(0, -2))
-
-      const isPreviewing = container.closest<HTMLElement>(
-        '.Page-content.is-previewing, .Popup.is-previewing',
-      )
-      const preview = container.querySelector<HTMLElement>(
-        '.PreviewFrame-typeDisplay',
-      )
-      if (isPreviewing && preview) {
-        preview.style.filter = 'grayscale(100%) blur(1px)'
-        preview.inert = true
-        panel = preview
-        panelData = {
-          typeId:
-            container.querySelector<HTMLElement>('.ContentEdit')?.dataset
-              .typeId || '',
-          panelId: 'preview',
-        }
-      } else {
-        panel = container.querySelector<HTMLElement>(
-          '.ContentEdit-right.is-visible',
-        )
-        panelData = {
-          typeId:
-            panel?.closest<HTMLElement>('.ContentEdit')?.dataset.typeId || '',
-          panelId: panel?.dataset.rightTab || '',
-        }
-      }
-    }
-  }
-}
-
-const onPointerUp = (e: PointerEvent) => {
-  panel = null
-  pointerIsDown = false
-  if (e.target instanceof HTMLElement) {
-    container = e.target.closest<HTMLElement>('.Page-content, .Popup')
-  }
-  if (container && ogTransProp) {
-    container.style.transitionProperty = ogTransProp
-  }
-  if (container?.classList.contains('Popup')) {
-    container.style.cursor = 'initial'
-    container.style.userSelect = 'unset'
-  } else {
-    document.body.style.cursor = 'initial'
-    document.body.style.userSelect = 'unset'
-  }
-
-  const preview = container?.querySelector<HTMLElement>(
-    '.PreviewFrame-typeDisplay',
-  )
-  if (preview) {
-    preview.style.filter = 'unset'
-    preview.inert = false
-    setTimeout(() => window.dispatchEvent(new Event('resize')), 200)
-  }
-
-  if (panelData && panelData.width) {
-    savePreferredWidth(panelData)
-    panelData = null
-  }
-}
-
-const onPointerMove = (e: PointerEvent) => {
-  if (pointerIsDown && panelData) {
-    if (!container) return
-    let changeX = e.screenX - pdOriginX
-
-    // In RTL layouts, invert the mouse movement direction
-    if (isRTL) {
-      changeX = -changeX
-    }
-
-    let origin = gtcOrigin[0] // Default to the first column
-    if (container.querySelector('.LiveBlogPostList')) {
-      origin = gtcOrigin[3]
-    }
-
-    const w = Math.round(origin + changeX) + 'px'
-    document.documentElement.style.setProperty('--contentForm-resized-w', w)
-    panelData.width = w
-  }
-}
-
-const initResizablePanel = () => {
-  onFind('.ContentEdit-main', (cl) => {
-    cl.append(
-      create(
-        'div',
-        { className: 'ContentEdit-resizeWrapper' },
-        create('div', { className: 'ContentEdit-resizeHandle' }),
-      ),
-    )
-  })
-
-  document.body.addEventListener('pointerdown', onPointerDown, false)
-  document.body.addEventListener('pointerup', onPointerUp, false)
-  document.body.addEventListener('pointermove', onPointerMove, false)
-
-  // Check if there's a preferred width for the content form
-  const contentEdit = document.querySelector<HTMLElement>('.ContentEdit')
-  if (contentEdit) {
-    const w = getPreferredWidth({
-      typeId: contentEdit.dataset.typeId || '',
-    })
-    if (w) {
-      updateWidth(w)
-    }
-  }
-}
-
-if (document.readyState === 'loading') {
-  window.addEventListener('DOMContentLoaded', initResizablePanel)
-} else {
-  initResizablePanel()
-}