@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,274 @@
+.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

@@ -0,0 +1,217 @@
+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

@@ -0,0 +1,188 @@
+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()
+}