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

package/src/legacy/tool-ui/src/main/webapp/v4/RichTextEditor.js

@@ -1,154 +0,0 @@
-import onFind from './dom/onFind'
-import create from './dom/create'
-import onVisible from './dom/onVisible'
-
-// Lazily loads the rich text editor.
-
-// To prevent FOUC, we have hidden the textarea with
-// css and are adding a 'loading' div that holds a spinner
-// to indicate the RTE is loading. Once loaded, the RTE
-// code will look for this element and hide it with css.
-onFind('.richtext', (element) => {
-  const parent = element.closest('div')
-  parent.style.position = 'relative'
-  // The textarea will be moved when the ProseMirror code
-  // runs, so we can't rely on it to maintain the height
-  // of the 'fake' rte container and its parent. The 'fake'
-  // rte container is positioned absolute, so we need a
-  // min-height on the parent to maintain the proper
-  // vertical distance between it and the next field.
-  const height = element.getBoundingClientRect().height
-  const loader = create('div', { className: 'ProseMirror-loader' })
-  // const fakeProseMirror = document.createElement('div')
-  // fakeProseMirror.className = 'ProseMirror-fake'
-  loader.style.minHeight = `${height}px`
-  parent.appendChild(loader)
-})
-
-/**
- * Some projects are using characters such as colons and periods in their tag names,
- * but while that is xml-compliant, that is not HTML-5 compliant.
- * As such, some of ProseMirror's code that relies on methods such as
- * `element.matches` https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
- * fails, so we need to replace those characters.
- * Also see: https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#syntax-tag-name
- *
- * We put the non-compliant characters back at serializtion time.
- */
-const compliantTagNameMap = new Map()
-
-RICH_TEXT_ELEMENTS.forEach((obj) => {
-  let tagName = obj.tag
-  let compliantTagName = ''
-  const regex = /[\u0030-\u0039\u0061-\u007A\u0041-\u005A-]/g
-  ;[...tagName].forEach((char) => {
-    let validChar = char
-    if (!char.match(regex)) {
-      validChar = `--${char.charCodeAt(0)}--`
-    }
-    compliantTagName = compliantTagName + validChar
-  })
-  compliantTagNameMap.set(tagName, compliantTagName)
-})
-
-window.RICH_TEXT_ELEMENTS_PM = RICH_TEXT_ELEMENTS.map((obj) => {
-  obj.tag = compliantTagNameMap.get(obj.tag)
-  if (obj.context) {
-    const newContext = []
-    obj.context.forEach((item) => {
-      let newItem = item
-      if (newItem) {
-        newItem = compliantTagNameMap.get(item)
-      }
-      newContext.push(newItem)
-    })
-    obj.context = newContext
-  }
-  return obj
-})
-
-onVisible('.richtext', async (element) => {
-  const { RTE } = await import(
-    /* webpackChunkName: 'RTEProseMirror' */ './rte/ProseMirror'
-  )
-  const customMenuType = element.getAttribute('data-rte-toolbar')
-  let customMenuBar = RICH_TEXT_TOOLBARS[customMenuType]
-
-  // Remove AI buttons from toolbar if AI is disabled
-  if (!window.BRIGHTSPOT?.ai?.AI_CHAT_ENABLED) {
-    const aiButtons = ['rte2-toolbar-track-ai', 'rte2-toolbar-ai-inline']
-    customMenuBar = customMenuBar.filter(
-      (item) => !aiButtons.includes(item.className),
-    )
-  }
-
-  const numLines = element.getAttribute('data-rte-lines')
-  const isInline = element.getAttribute('data-inline') === 'true'
-  const userLabel = element.getAttribute('data-user')
-  const userId = element.getAttribute('data-user-id')
-  let richTextElementTags = element.getAttribute('data-rte-tags')
-  if (richTextElementTags) {
-    try {
-      const richTextElementTagsJSON = JSON.parse(richTextElementTags)
-      richTextElementTags = richTextElementTagsJSON.map((tag) => {
-        return compliantTagNameMap.get(tag)
-      })
-    } catch (err) {
-      console.log(err)
-    }
-  }
-
-  const fieldName = element.getAttribute('name')
-  const isCollab = element.getAttribute('data-collab') === 'true'
-  const rte = new RTE(
-    element,
-    customMenuBar,
-    isInline,
-    userLabel,
-    userId,
-    richTextElementTags,
-    fieldName,
-    isCollab,
-    compliantTagNameMap,
-    parseInt(numLines, 10) || 1,
-    RICH_TEXT_ELEMENTS_PM,
-  )
-  rte.init()
-
-  // Expose RTE instance for Delivery.
-  element.rte = rte
-  element.dispatchEvent(
-    new CustomEvent('brightspot.rte.init', { bubbles: true, detail: { rte } }),
-  )
-})
-onFind('.RichTextEditor-uploadComplete', (element) => {
-  let html = element.dataset.html
-  if (!html) {
-    return
-  }
-  const $element = $(element)
-  const $source = $element.popup('source')
-  if (!$source) {
-    return
-  }
-  const dataEventId = $source.attr('data-event-id')
-  html = html.replace(/<br>/g, '')
-  const tmpDiv = document.createElement('div')
-  tmpDiv.innerHTML = html
-  const enhancements = tmpDiv.children
-  const enhancementData = []
-  ;[...enhancements].forEach((enhancement) => {
-    const attrsMap = [...enhancement.attributes]
-    const attrs = attrsMap.reduce((prev, next) => {
-      prev[next.name] = next.value
-      return prev
-    }, {})
-    enhancementData.push({
-      label: enhancement.innerText,
-      data: attrs,
-      tag: enhancement.tagName.toLowerCase(),
-    })
-  })
-  PubSub.publish(dataEventId, enhancementData)
-  $element.popup('close')
-})

package/src/legacy/tool-ui/src/main/webapp/v4/SearchFields.js

@@ -1,281 +0,0 @@
-import onFind from './dom/onFind'
-
-// Move the field between the display and hidden sections
-onFind('.SearchFields-input', (input) => {
-  const tooltips = window.BRIGHTSPOT?.ui.tooltips
-  input.setAttribute(
-    'title',
-    input.closest('.SearchFields-hide')
-      ? tooltips.fieldSelect
-      : tooltips.fieldHide,
-  )
-
-  input.addEventListener('keydown', keydownHandler)
-  input.addEventListener('click', fieldClickHandler)
-})
-
-onFind('.SearchFields-filter', (input) => {
-  input.addEventListener('keydown', keydownHandler)
-})
-
-const keydownHandler = (e) => {
-  if (e.key === 'Enter') {
-    e.preventDefault()
-  }
-}
-
-const fieldClickHandler = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-
-  const input = e.target.matches('input')
-    ? e.target
-    : e.target.querySelector('input')
-  const searchFieldsWidget = input.closest('.SearchFields')
-  const li = input.closest('li')
-  const div = li.closest('div')
-  let nextSib = li.nextSibling
-  let displayUl, hideUl
-
-  //If input is in Show/Hide Fields vs Show/Hide Article Filters
-  if (searchFieldsWidget.querySelector('.SearchFields-tab-container')) {
-    const tabContainer = searchFieldsWidget.querySelector(
-      '.SearchFields-tab-container',
-    )
-    const tabUl = tabContainer.querySelector('ul')
-    const selectedLiSection = tabUl
-      .querySelector('.is-selected')
-      .classList[0].toLowerCase()
-    displayUl = searchFieldsWidget.querySelector(
-      `.SearchFields-container-${selectedLiSection} > .SearchFields-displayContainer > .SearchFields-displayTitle > ul`,
-    )
-    hideUl = searchFieldsWidget.querySelector(
-      `.SearchFields-container-${selectedLiSection} > .SearchFields-hide`,
-    )
-  } else {
-    displayUl = searchFieldsWidget.querySelector(
-      '.SearchFields-displayTitle > ul',
-    )
-    hideUl = searchFieldsWidget.querySelector('.SearchFields-hide > ul')
-  }
-
-  if (div.classList.contains('SearchFields-hide')) {
-    const clone = li.cloneNode(true)
-    const clonedInput = clone.querySelector('.SearchFields-input')
-    clonedInput.addEventListener('click', fieldClickHandler)
-    clonedInput.setAttribute('title', window.BRIGHTSPOT?.ui.tooltips.fieldHide)
-    displayUl.appendChild(clone)
-
-    const firstDisplayInput = displayUl?.querySelector(
-      ':scope > li .SearchFields-input',
-    )
-
-    if (!nextSib) {
-      firstDisplayInput?.focus()
-    } else if (!nextSib.classList.contains('is-disabled')) {
-      nextSib.querySelector('input')?.focus()
-    } else {
-      while (nextSib?.classList.contains('is-disabled')) {
-        nextSib = nextSib.nextSibling
-        if (!nextSib) {
-          firstDisplayInput?.focus()
-        } else if (!nextSib.classList.contains('is-disabled')) {
-          nextSib.querySelector('input')?.focus()
-        }
-      }
-    }
-  } else {
-    if (!nextSib) {
-      searchFieldsWidget?.querySelector('.actions > button')?.focus()
-    } else {
-      nextSib.querySelector('input')?.focus()
-    }
-    li.remove()
-  }
-  toggleHidden(input.value, hideUl)
-}
-
-const toggleHidden = (fieldName, container) => {
-  const input = container.querySelector(`input[value="${fieldName}"]`)
-  const item = input?.closest('li')
-
-  if (item?.classList.contains('is-disabled')) {
-    input.addEventListener('click', fieldClickHandler)
-  }
-
-  item?.classList.toggle('is-disabled')
-  input?.toggleAttribute('disabled')
-  item?.querySelector('.SearchFields-drag')?.toggleAttribute('disabled')
-}
-
-// Search for hidden fields in the input bar
-onFind('.SearchFields .SearchFields-filter', (input) => {
-  input.addEventListener('input', (e) => {
-    const container = input.closest('.SearchFields-hide')
-    const reg = new RegExp(
-      e.target.value.replace(/\s/, '').split('').join('(?:.*\\W)?'),
-      'i',
-    )
-
-    container.querySelectorAll('label').forEach((item) => {
-      const li = item.parentElement
-      if (reg.test(item.getAttribute('data-display-name'))) {
-        li.style.display = 'flex'
-      } else {
-        li.style.display = 'none'
-      }
-    })
-
-    container
-      .querySelectorAll('.SearchFields-subheading')
-      .forEach((subheading) => {
-        const ul = subheading.nextSibling
-
-        if (ul.querySelector('li[style*="display: flex"]')) {
-          subheading.style.display = 'flex'
-          ul.style.display = 'block'
-        } else {
-          subheading.style.display = 'none'
-          ul.style.display = 'none'
-        }
-      })
-  })
-})
-
-// Find tabs to display coloumns or summary
-onFind(
-  '.SearchFields .SearchFields-tab-container .SearchFields-tab-ul',
-  (tabsContainer) => {
-    const searchFieldsWidget = tabsContainer.closest('.SearchFields')
-    searchFieldsWidget.classList.add('has-tabs')
-    const selectedLi = [...tabsContainer.children].filter((liEl) =>
-      liEl.classList.contains('is-selected'),
-    )[0]
-
-    const otherLi = [...tabsContainer.children].filter(
-      (liEl) => !liEl.classList.contains('is-selected'),
-    )[0]
-
-    const sectionToShow = searchFieldsWidget.querySelector(
-      '.SearchFields-container-' + selectedLi.classList[0].toLowerCase(),
-    )
-    const sectionToHide = searchFieldsWidget.querySelector(
-      '.SearchFields-container-' + otherLi.classList[0].toLowerCase(),
-    )
-
-    selectedLi.addEventListener('click', () => {
-      handleTabSelected(selectedLi, otherLi, sectionToShow, sectionToHide)
-    })
-    otherLi.addEventListener('click', () => {
-      handleTabSelected(otherLi, selectedLi, sectionToShow, sectionToHide)
-    })
-  },
-)
-
-// Disable fields in Hidden column currently in display.
-onFind('.SearchFields-container', (container) => {
-  const hiddenFields = container.querySelectorAll(
-    '.SearchFields-hide .SearchFields-input',
-  )
-  const displayedFields = container.querySelectorAll(
-    '.SearchFields-displayContainer .SearchFields-input',
-  )
-  const displayFieldNames = Array.from(displayedFields).map(
-    (input) => input.value,
-  )
-
-  if (displayFieldNames) {
-    hiddenFields.forEach((input) => {
-      if (displayFieldNames.includes(input.value)) {
-        const item = input.closest('.RCIG-item')
-
-        item?.classList.add('is-disabled')
-        input.setAttribute('disabled', '')
-        item?.querySelector('.SearchFields-drag')?.setAttribute('disabled', '')
-      }
-    })
-  }
-
-  if (container.querySelector('.SearchFields-hide .SearchFields-subheading')) {
-    container.classList.add('has-subheadings')
-  }
-
-  // Listen for Sortable drag/drop event
-  container
-    .querySelectorAll(
-      '.SearchFields-hide ul, .SearchFields-displayContainer ul',
-    )
-    .forEach((ul) => {
-      if (ul.closest('.SearchFields-hide')) {
-        ul.classList.add('is-clonable')
-      }
-
-      ul.addEventListener('add', (evt) => {
-        if (evt.detail) {
-          evt = evt.detail
-        }
-        if (!evt.item) {
-          return
-        }
-        const input = evt.item.querySelector('.SearchFields-input')
-        const fieldName = input.value
-        const isFromHide = evt.from.classList.contains('is-clonable')
-        const isAddToHide = evt.to.classList.contains('is-clonable')
-        const hideFields = ul.closest('.SearchFields-hide')
-
-        // Give time for Sortable to finish.
-        setTimeout(() => {
-          input.addEventListener('click', fieldClickHandler)
-
-          if (isAddToHide && isFromHide) {
-            evt.item.remove()
-            const li = hideFields
-              ?.querySelector(`.SearchFields-input[value="${fieldName}"]`)
-              .closest('li')
-            const input = li.querySelector('.SearchFields-input')
-
-            li.addEventListener('animationend', () => {
-              li.classList.remove('is-added')
-            })
-            li.classList.add('is-added')
-
-            input.addEventListener('click', fieldClickHandler)
-            input.checked = false
-          } else if (isFromHide) {
-            input.checked = true
-            toggleHidden(fieldName, evt.from)
-          } else {
-            hideFields
-              ?.querySelectorAll(`.SearchFields-input[value="${fieldName}"]`)
-              .forEach((input) => {
-                const li = input.closest('li')
-                if (li.classList.contains('is-disabled')) {
-                  evt.item.remove()
-                  toggleHidden(fieldName, hideFields)
-                  input.scrollIntoView({ block: 'center' })
-                  input.checked = false
-
-                  li.addEventListener('animationend', () => {
-                    li.classList.remove('is-added')
-                  })
-                  li.classList.add('is-added')
-                }
-              })
-          }
-        }, 0)
-      })
-    })
-})
-
-const handleTabSelected = (
-  selectedLi,
-  otherLi,
-  sectionToShow,
-  sectionToHide,
-) => {
-  if (selectedLi.classList.contains('is-selected')) return
-  selectedLi.classList.toggle('is-selected')
-  otherLi.classList.toggle('is-selected')
-  sectionToHide.classList.toggle('is-hidden')
-  sectionToShow.classList.toggle('is-hidden')
-}

package/src/legacy/tool-ui/src/main/webapp/v4/SearchResult.js

@@ -1,255 +0,0 @@
-import create from './dom/create'
-import findAll from './dom/findAll'
-import insertBefore from './dom/insertBefore'
-import onFind from './dom/onFind'
-import Mark from 'mark.js'
-import storage from './util/storage'
-import {
-  listenForMenuItemClick,
-  setupMenuForAria,
-  toggleMenu,
-} from '../../../dom/popupMenu'
-import getZindex from '../../webapp/script/v3/plugin/popup'
-
-const tooltips = window.BRIGHTSPOT?.ui.tooltips
-
-// Toggle all item checkboxes in the search result.
-onFind('.searchResult-checkAll', (checkAll) => {
-  const searchList = checkAll.closest('table')
-  if (searchList) {
-    const checkboxes = findAll(
-      searchList,
-      ':scope > tbody input[type="checkbox"]',
-    )
-
-    const updateSelectAll = () => {
-      const checkedItems = findAll(
-        searchList,
-        ':scope > tbody input[type="checkbox"]:checked',
-      )
-
-      checkAll.checked =
-        checkboxes.length > 0 && checkedItems.length === checkboxes.length
-    }
-
-    for (const check of checkboxes) {
-      check.addEventListener('click', (event) => {
-        updateSelectAll()
-      })
-    }
-    checkAll.addEventListener('click', (event) => {
-      const checked = checkAll.checked
-      const frameAttribute = `data-frame-${checked ? 'check' : 'uncheck'}`
-      let itemIds = ''
-
-      for (const c of checkboxes) {
-        c.checked = checked
-        if (!checkAll.getAttribute(frameAttribute).includes(c.value)) {
-          itemIds += `&id=${encodeURIComponent(c.value)}`
-        }
-      }
-
-      checkAll.setAttribute(
-        frameAttribute,
-        checkAll.getAttribute(frameAttribute) + itemIds,
-      )
-    })
-
-    updateSelectAll()
-  }
-})
-
-// Moves search actions above search results
-onFind('.SearchResult-view > .SearchResult-actions.loaded', (frame) => {
-  const view = frame.closest('.SearchResult-view')
-
-  const actionsWrapper = create('div', {
-    className: 'SearchResult-actions-wrapper',
-  })
-
-  const menuItems = frame.querySelectorAll('[role="menuitem"]')
-  menuItems.forEach((item) => item.setAttribute('tabindex', '-1'))
-
-  const button = create('button', {
-    className: 'SearchResult-actions-toggle',
-    id: 'SearchResult-actions-toggle',
-    title: tooltips.actions?.actions,
-    'aria-haspopup': 'menu',
-    'aria-label': tooltips.actions?.searchResult,
-    'aria-expanded': 'false',
-    onclick: () => {
-      listenForMenuItemClick(frame, button)
-      toggleMenu(frame, button)
-    },
-  })
-
-  view.prepend(actionsWrapper)
-  actionsWrapper.appendChild(button)
-  actionsWrapper.appendChild(frame)
-
-  setupMenuForAria(frame, button)
-
-  // Creates fullscreen button outside of actions frame
-  if (view.closest('.SearchWidget[name="searchAdvancedFull"]')) return
-  const fsLink = view.querySelector(
-    '.SearchResult-action-link[href*="/searchAdvancedFull"]',
-  )
-  const fullscreen = create('button', {
-    className: 'SearchResult-fullscreen',
-    title: tooltips.fullScreenSearch,
-    'aria-label': tooltips.fullScreen,
-    onclick: (event) => {
-      fsLink.click()
-    },
-  })
-  actionsWrapper.appendChild(fullscreen)
-})
-
-onFind('.SearchResult-actions .SearchResult-selectionReset', (reset) => {
-  reset.addEventListener('click', () => {
-    const actions = reset.closest('.SearchResult-actions-wrapper')
-    actions?.querySelector('.SearchResult-actions-toggle')?.focus()
-  })
-})
-
-// Keep tab 'sticky' when using a filter.
-onFind('.SearchResult-views', (tabs) => {
-  const searchWidget = tabs.closest('.SearchWidget')
-  const searchFiltersRest = searchWidget?.querySelector('.searchFiltersRest')
-
-  if (searchFiltersRest) {
-    const viewInput = searchFiltersRest.querySelector('input[name="view"]')
-
-    if (viewInput) {
-      tabs.querySelectorAll('[data-view]').forEach((tab) => {
-        tab.addEventListener(
-          'click',
-          () => (viewInput.value = tab.dataset.view),
-        )
-      })
-    }
-  }
-})
-
-onFind('.SearchResult-images', (images) => {
-  const searchForm = images.closest('.SearchWidget-form')
-  const shadow = searchForm?.querySelector(
-    '.searchFiltersRest input[name="iz"]',
-  )
-  const list = images.closest('.SearchResult-list')
-  const height =
-    shadow?.value || storage.get('BSP.SearchResult.imageHeight') || 20
-
-  images.setAttribute('data-height', height)
-
-  if (list) {
-    insertBefore(
-      create(
-        'div',
-        {
-          className: 'SearchResult-imageHeightInput',
-        },
-        create('input', {
-          type: 'range',
-          title: tooltips.imageHeight,
-          min: 1,
-          max: 100,
-          step: 1,
-          value: height,
-          'aria-label': tooltips.imageHeight,
-          'shadow-field': shadow?.name,
-          oninput: ({ target: { value } }) => {
-            images.setAttribute('data-height', value)
-            storage.set('BSP.SearchResult.imageHeight', value)
-          },
-          onmouseup: (evt) => {
-            if (shadow && height !== evt.target.value) {
-              shadowField(evt, shadow.name)
-            }
-          },
-        }),
-      ),
-      list,
-    )
-  }
-})
-
-onFind('.SearchResult-board-field', (select) => {
-  select.addEventListener('change', (evt) => {
-    shadowField(evt, select.name)
-  })
-})
-
-onFind('.SearchResult [data-highlight]', (container) => {
-  const query = container.dataset.highlight
-  if (query) {
-    const scope = container.matches('table')
-      ? container.querySelector('tbody') || container
-      : container
-    new Mark(scope).mark(query.trim().split(/\s+/), {
-      className: 'SearchResult-highlight',
-    })
-  }
-})
-
-// Refresh frame on bulkArchive-bulkRestore from Search Results actions
-onFind('.Popup[name="bulkArchive"]', (bulkArchive) => {
-  const filter = bulkArchive.parentNode.querySelector(
-    `.Popup[name="miscSearch"] .queryRestrictions`,
-  )
-  const closeButton = bulkArchive.querySelector('.closeButton')
-
-  if (closeButton) {
-    closeButton.addEventListener('click', submitForm)
-  }
-
-  function submitForm() {
-    const success = bulkArchive.querySelector('.message.is-success')
-    if (success) {
-      let event = new CustomEvent('submit', { bubbles: true })
-      filter.dispatchEvent(event)
-      bulkArchive.parentNode.removeChild(bulkArchive)
-    }
-  }
-})
-
-function shadowField(event, fieldName) {
-  event.preventDefault()
-  event.stopPropagation()
-
-  const searchForm = event.target.closest('.SearchWidget-form')
-  const shadow = searchForm.querySelector(
-    `.searchFiltersRest input[name="${fieldName}"]`,
-  )
-  const shadowView = searchForm.querySelector('input[name="view"]')
-  const view = searchForm.querySelector('.SearchResult-views li.selected a')
-    .dataset.view
-
-  shadow.value = event.target.value
-  shadowView.value = view
-  shadow.shadowField = fieldName
-  shadow.dispatchEvent(new Event('change', { bubbles: true }))
-}
-
-onFind('.Popup[name="miscSearch"] .SearchResult-list', (container) => {
-  container.addEventListener('click', function (e) {
-    const editLink = e.target.closest('a[href*="/edit.jsp"]')
-    if (!editLink) return
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0)
-      return
-    e.preventDefault()
-
-    // Create loader overlay directly
-    const loader = create(
-      'div',
-      {
-        id: 'searchResult-loader-overlay',
-        className: 'searchResult-loader-overlay',
-      },
-      create('span', { className: 'searchResult-loader-spinner' }),
-    )
-    loader.style.zIndex = getZindex()
-    document.body.appendChild(loader)
-    window.location = editLink.href
-  })
-})