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

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

@@ -0,0 +1,197 @@
+@import (reference) url('./Dropdown.less');
+@import (reference) url('./IconButton.less');
+@import (reference) url('./Icon.less');
+@import (reference) url('./Label.less');
+@import (reference) url('./Link.less');
+@import (reference) url('./Text.less');
+
+.RichTextEditor {
+  border-color: var(--Input-borderColor);
+  border-style: solid;
+  border-width: 1px;
+  position: relative;
+}
+
+.RichTextEditor-toolbar {
+  .Icon.is-s;
+  .Link.is-black;
+  .Text.is-s;
+
+  --Link-hoverDecoration: none;
+
+  background: var(--color-white);
+  border-color: var(--Input-borderColor);
+  border-style: solid;
+  border-width: 0 0 1px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: var(--gap-s);
+  white-space: nowrap;
+}
+
+.RichTextEditor-action,
+.RichTextEditor-separator,
+.RichTextEditor-menu {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.RichTextEditor-action {
+  > a {
+    display: block;
+    line-height: var(--Icon-size);
+    padding: calc(var(--gap-s) / 2);
+
+    &[data-icon] {
+      height: calc(var(--gap-s) + var(--Icon-size));
+      overflow: hidden;
+      width: calc(var(--gap-s) + var(--Icon-size));
+
+      &::before {
+        .Icon;
+
+        content: attr(data-icon);
+        margin-bottom: 100px;
+        margin-right: 100px;
+        top: 0;
+      }
+    }
+
+    &.active {
+      background: var(--color-gray3);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    > a {
+      background: var(--color-blue5);
+      color: var(--color-white);
+    }
+  }
+}
+
+.RichTextEditor-separator {
+  background: var(--Input-borderColor);
+  height: calc(var(--gap-xs) * 2 + var(--Icon-size));
+  margin: 0 var(--gap-s);
+  width: 1px;
+}
+
+.RichTextEditor-menu {
+  cursor: pointer;
+  position: relative;
+
+  > span {
+    .Icon.is-s;
+
+    display: block;
+    line-height: var(--Icon-size);
+    padding: calc(var(--gap-s) / 2);
+    padding-right: calc(var(--gap-s) + var(--Icon-size));
+    position: relative;
+
+    &::after {
+      .Icon;
+
+      content: 'arrow_drop_down';
+      pointer-events: none;
+      position: absolute;
+      right: calc(var(--gap-s) / 2);
+      top: calc(50% - var(--Icon-size) / 2);
+      transition: transform var(--time-xs);
+    }
+  }
+
+  > ul {
+    .Dropdown;
+
+    z-index: 20;
+
+    > li {
+      .Dropdown-item;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    > span {
+      background: var(--color-blue5);
+      color: var(--color-white);
+    }
+  }
+
+  &.is-open {
+    > span {
+      background: var(--color-black);
+      color: var(--color-white);
+
+      &::after {
+        transform: rotate(-180deg);
+      }
+    }
+
+    > ul {
+      .Dropdown.is-open;
+    }
+  }
+}
+
+.RichTextEditor-editor {
+  padding: var(--gap-m) 0;
+  position: relative;
+}
+
+.RichTextEditor-preview {
+  background: var(--color-gray1);
+  padding: var(--gap-m);
+
+  > img {
+    display: block;
+    height: auto;
+    max-height: 30vh;
+    max-width: 100%;
+  }
+}
+
+.RichTextEditor {
+  &:hover,
+  &:focus-within {
+    &,
+    .RichTextEditor-toolbar {
+      border-color: var(--Input-focusColor);
+    }
+  }
+}
+
+// Make the toolbar sticky when the user is editing.
+.RichTextEditor:focus-within {
+  .RichTextEditor-toolbar {
+    position: sticky;
+    top: var(--lineHeight-s);
+    z-index: 20;
+  }
+}
+
+.RichTextEditor.rte-fullscreen {
+  background: var(--color-white);
+  border-style: none;
+  height: 100%;
+  left: 0;
+  overflow: auto;
+  overflow-x: hidden;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 301;
+
+  .RichTextEditor-toolbar {
+    margin-bottom: var(--gap-m);
+    padding: var(--gap-s) calc(var(--gap-xl) + 5px);
+    top: 0;
+  }
+
+  .RichTextEditor-editor {
+    padding: 0 var(--gap-xl);
+  }
+}

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

@@ -0,0 +1,281 @@
+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')
+}