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

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

@@ -0,0 +1,223 @@
+import Cookies from 'js-cookie'
+import create from './dom/create'
+import onFind from './dom/onFind'
+import Preview from './main/webapp/v4/ViewPreview'
+
+onFind('.ContentSummary-info', (info: HTMLElement) => {
+  contentSummaryEvent(info)
+})
+
+onFind('input[data-summary-url]', (element: HTMLElement) => {
+  const updateButton = () => {
+    const containerElement = element.parentElement
+    if (containerElement) {
+      let contentSummaryButton: HTMLButtonElement | null
+      if (
+        containerElement.tagName.includes('-') &&
+        containerElement.parentElement
+      ) {
+        contentSummaryButton =
+          containerElement.parentElement.querySelector<HTMLButtonElement>(
+            '.ContentSummary-info',
+          )
+      } else {
+        contentSummaryButton =
+          containerElement.querySelector<HTMLButtonElement>(
+            '.ContentSummary-info',
+          )
+      }
+      const summaryUrl = element.dataset.summaryUrl
+      if (summaryUrl) {
+        if (contentSummaryButton) {
+          contentSummaryButton.setAttribute('data-summary-url', summaryUrl)
+        } else {
+          contentSummaryButton = create('button', {
+            class: 'ContentSummary-info',
+            'aria-haspopup': true,
+            'data-summary-url': summaryUrl,
+          })
+
+          const objectIdEdit =
+            containerElement.querySelector<HTMLElement>('.objectId-edit')
+          if (objectIdEdit) {
+            objectIdEdit.insertAdjacentElement('afterend', contentSummaryButton)
+          }
+        }
+      }
+      if (contentSummaryButton) {
+        updateDataSummaryUrl(element, contentSummaryButton)
+      }
+    }
+  }
+  updateButton()
+  const observer = new MutationObserver(updateButton)
+
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: ['data-summary-url'],
+  })
+})
+
+function updateDataSummaryUrl(
+  element: HTMLElement,
+  contentSummaryButton: HTMLButtonElement,
+) {
+  const dataSummaryUrl = element.dataset.summaryUrl
+  if (dataSummaryUrl) {
+    contentSummaryButton.setAttribute('data-summary-url', dataSummaryUrl)
+  } else {
+    if (contentSummaryButton) {
+      contentSummaryButton.remove()
+    }
+  }
+}
+
+export const contentSummaryEvent = (info: HTMLElement) => {
+  let summary: HTMLElement | null = null
+
+  info.addEventListener('click', handler)
+  info.addEventListener('keydown', (event) => {
+    if (
+      event.key === 'Tab' &&
+      summary &&
+      summary.classList.contains('is-open')
+    ) {
+      handler(event)
+    }
+  })
+
+  async function handler(event: Event) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    event.stopPropagation()
+
+    document
+      .querySelectorAll('.ContentSummary-popup')
+      .forEach((popup: Element) => {
+        $(popup).popup('close')
+      })
+
+    const target = event.target
+
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    const url = target.getAttribute('data-summary-url')
+    const error = target.querySelector('.error-message')
+
+    if (info.hasAttribute('aria-expanded')) {
+      info.removeAttribute('aria-expanded')
+    } else {
+      info.setAttribute('aria-expanded', 'true')
+
+      // Trigger live region if already displayed prior.
+      if (summary) {
+        const content = summary.innerHTML
+        summary.innerHTML = ''
+        summary.innerHTML = content
+      }
+    }
+
+    if (!url && !error) {
+      return
+    }
+
+    if (!summary) {
+      if (error) {
+        summary = create('div', {
+          className: 'ContentSummary error-summary',
+          innerHTML: error.innerHTML,
+        })
+      } else if (url) {
+        const csrf = Cookies.get('bsp.csrf')
+
+        if (csrf) {
+          const response = await fetch(url, {
+            headers: {
+              'Brightspot-CSRF': csrf,
+            },
+          })
+
+          summary = create('div', {
+            className: 'ContentSummary',
+            innerHTML: await response.text(),
+          })
+
+          summary.focus()
+        }
+      }
+
+      if (summary) {
+        document.body.appendChild(summary)
+      }
+    }
+
+    info.classList.toggle('is-active')
+    target.previousElementSibling?.classList.toggle('is-active')
+
+    if (summary) {
+      summary.classList.toggle('is-open')
+
+      const $popup = $(summary).popup()
+      $popup
+        .popup('container')
+        .addClass('ContentSummary-popup')
+        .toggleClass(
+          'is-preview',
+          summary?.querySelector('.Widget-title.is-preview') !== null,
+        )
+      $popup.popup('source', $(info))
+      $popup.popup('open')
+
+      $popup.closest('.Popup').on('close.popup', () => {
+        info.classList.toggle('is-active')
+        target.previousElementSibling?.classList.toggle('is-active')
+        summary = null
+      })
+
+      const previewFrame = summary.querySelector('.PreviewFrame')
+      if (previewFrame) {
+        const preview = new Preview(previewFrame)
+        preview.isVisible = true
+        preview.reloadPreview()
+
+        // When iframe has loaded post message to disable pointer events so contents
+        // can not be clicked.
+        const observer = new MutationObserver((mutationList) => {
+          mutationList.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLIFrameElement) {
+                iframePostMessage(node)
+              }
+            })
+            if (
+              mutation.previousSibling &&
+              mutation.previousSibling instanceof HTMLIFrameElement
+            ) {
+              iframePostMessage(mutation.previousSibling)
+            }
+          })
+        })
+
+        observer.observe(previewFrame, {
+          attributes: false,
+          childList: true,
+          subtree: true,
+        })
+      }
+    }
+  }
+}
+
+function iframePostMessage(node: HTMLIFrameElement) {
+  if (node.contentWindow) {
+    node.contentWindow.postMessage(
+      {
+        type: 'BSP.Preview.PointerEvents',
+        value: 'none',
+      },
+      '*',
+    )
+  }
+}

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

@@ -0,0 +1,54 @@
+.DashboardWidget.ContentTemplate.is-expanded {
+  > div:not([class]) {
+    @apply grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
+  }
+}
+
+.ContentTemplate .LinkCarousel-item {
+  @apply min-h-[330px] w-[180px] p-0 shadow-md;
+}
+
+.ContentTemplate .LinkCarousel-item > a {
+  @apply flex h-full w-full flex-wrap justify-between bg-white pe-0 hover:bg-gray-100 focus:bg-gray-100;
+}
+
+.ContentTemplate .LinkCarousel-item > a > img {
+  @apply relative h-[240px] w-full bg-white object-cover before:block after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
+}
+
+.ContentTemplate-name {
+  @apply min-h-[88px] w-[142px] p-4 pe-0 text-sm font-medium text-gray-900;
+}
+
+.ContentTemplate-icon {
+  @apply relative flex h-[240px] w-full items-center justify-center bg-white before:btu-icon [&:not([data-icon-name])]:before:btu-icon-circle-dashed before:items-center before:rounded-full before:bg-gray-100 before:p-[14px] before:text-gray-700 before:mix-blend-multiply before:btu-icon-xl after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
+}
+
+.ContentTemplate .ContentSummary-info {
+  @apply btu-button-gray btu-button-xs mb-0 me-2 ms-0 mt-4 touch-device:btu-button-sm;
+}
+
+/* Styles scrollbar below LinkCarousel */
+.ContentTemplate .LinkCarousel {
+  @apply mb-1 pb-[calc(var(--margin)_-4px)] [grid-column:fullbleed-start/fullbleed-end];
+}
+
+.ContentTemplate .LinkCarousel-group {
+  @apply px-[--margin];
+}
+
+.ContentTemplate.is-expanded .LinkCarousel {
+  @apply mt-2 [&:not(:last-child)]:pb-3;
+}
+
+.ContentTemplate-title {
+  @apply relative flex items-center justify-between py-1.5 [grid-column:main-start/main-end] after:absolute after:-left-[--margin] after:-right-[--margin] after:top-12 after:h-[1px] after:bg-gray-200;
+
+  h3 {
+    @apply text-sm font-semibold text-gray-900;
+  }
+}
+
+.ContentTemplate-add {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-plus;
+}

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

@@ -0,0 +1,109 @@
+.ContentTools {
+  code {
+    @apply font-sans;
+  }
+
+  .TabBar {
+    @apply px-[--space];
+  }
+
+  .TC-panel {
+    @apply p-0 pb-6;
+
+    > form {
+      @apply px-2;
+    }
+  }
+
+  .TC-panel,
+  .TC-panel > form,
+  .TC-panel > form > .fixedScrollable {
+    /* Metadata table at top of Developer tab */
+    > .DT {
+      @apply __static-table mx-2 mt-6 w-[calc(100%-1rem)];
+    }
+
+    /* "View Raw Data" & "Show Deprecated Fields" buttons at top of Developer tab */
+    > ul:first-child {
+      @apply mt-6 flex gap-2 px-2;
+
+      > li > a {
+        @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
+      }
+    }
+
+    .ActionBar {
+      @apply static mx-0 mt-4 border-y-0 p-0 [justify-content:start];
+
+      > button {
+        @apply btu-button-outline btu-button-fill-none btu-button-md;
+      }
+    }
+
+    /* Override specificity in ActionBar.css */
+    .ActionBar:not(.is-top) > button:not(.Link) {
+      @apply btu-button-gray;
+    }
+
+    > .CIG-row {
+      @apply pt-0;
+
+      > .CIG-label {
+        @apply py-1 text-sm font-semibold text-gray-700;
+      }
+    }
+
+    > .CIG {
+      @apply px-4 py-0;
+
+      .CIG-row {
+        @apply pt-4;
+      }
+    }
+  }
+
+  .TC-panel-heading {
+    @apply mb-4 mt-6 rounded-lg bg-primary-50 text-primary-800;
+  }
+
+  /* Annotation fields */
+  ul:not(:first-child) {
+    @apply flex flex-col gap-4 px-2;
+
+    > li {
+      @apply flex flex-col gap-2;
+
+      > a {
+        @apply text-sm text-primary-600;
+      }
+
+      > code {
+        @apply text-sm;
+      }
+
+      > .DT {
+        @apply __static-table;
+      }
+    }
+  }
+
+  .Message {
+    @apply contents;
+
+    > a {
+      @apply ps-2 text-sm text-gray-700 [&:not(:first-child)]:mt-4;
+    }
+
+    > .Message-icon {
+      @apply hidden;
+    }
+  }
+}
+
+.ContentTools-meta {
+  @apply mt-6 px-2;
+
+  span {
+    @apply block border-gray-200 py-4 text-sm text-gray-900 [&:not(:last-child)]:border-b;
+  }
+}

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

@@ -0,0 +1,27 @@
+.is-ectHidden {
+  @apply hidden;
+}
+
+.ContentTypeIcon {
+  @apply flex gap-3;
+}
+
+.ContentTypeIcon btu-icon {
+  @apply scale-100 text-inherit opacity-100 transition-all duration-700 ease-out [@starting-style]:scale-150 [@starting-style]:text-teal-600 [@starting-style]:opacity-15;
+}
+
+.ContentType {
+  @apply mt-6;
+
+  > h2 {
+    @apply px-4 py-2 text-sm font-semibold;
+  }
+
+  > .DT {
+    @apply mt-2;
+  }
+
+  > .Message {
+    @apply mb-6 rounded-lg border;
+  }
+}