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

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

@@ -1,360 +0,0 @@
-import $ from 'jquery'
-import create from './dom/create'
-import repaint from './util/repaint'
-import findAll from './dom/findAll'
-import find from './dom/find'
-import { toggleMenu, setupMenuForAria } from '../../../dom/popupMenu'
-
-export default class TabContainer {
-  constructor(container) {
-    this._container = container
-    this._update = repaint(this._update.bind(this))
-    this._update()
-
-    window.addEventListener('brightspot-content-state-change', () => {
-      this._toggle()
-    })
-  }
-
-  _forEachChild(callback) {
-    for (const child of this._container.children) {
-      const tab = child.dataset.tab
-
-      if (tab !== undefined) {
-        callback(tab, child)
-      }
-    }
-  }
-
-  _toArray(value) {
-    if (value) {
-      try {
-        const array = JSON.parse(value)
-        return Array.isArray(array) ? array : []
-      } catch {}
-    }
-    return []
-  }
-
-  _update() {
-    if (this._observer) {
-      this._observer.disconnect()
-      this._observer = null
-    }
-
-    const bar = create('div', {
-      className: 'TabBar',
-      role: 'tablist',
-    })
-    const menuToggle = create('button', {
-      className: 'TabBar-menuToggle',
-      title: window.BRIGHTSPOT?.ui.tooltips.tabs,
-      type: 'button',
-      'aria-haspopup': 'menu',
-      'aria-expanded': 'false',
-      'aria-label': window.BRIGHTSPOT?.ui.tooltips.tabs,
-    })
-    const menuList = create('div', {
-      className: 'TabBar-menuList',
-      role: 'menu',
-      'aria-label': window.BRIGHTSPOT?.ui.tooltips.tabs,
-    })
-    const menu = create(
-      'div',
-      { className: 'TabBar-menu' },
-      menuToggle,
-      menuList,
-    )
-
-    menuToggle.onclick = () => {
-      toggleMenu(menuList, menuToggle, bar)
-    }
-
-    // Find tabs that should really be displayed as tabs rather than in a menu.
-    const menuMode = this._container.dataset.tcMode === 'MENU'
-    const main = this._container.dataset.tcMain
-    const exceptions = this._toArray(this._container.dataset.tcExceptions)
-
-    // Sort the tabs.
-    const tabSet = new Set()
-    this._defaultTab = null
-
-    for (const child of this._container.children) {
-      const tab = child.dataset.tab
-
-      if (tab !== undefined) {
-        if (!tabSet.has(tab)) {
-          if (!this._defaultTab) {
-            this._defaultTab = tab
-          }
-
-          tabSet.add(tab)
-        }
-      }
-    }
-
-    const start = this._toArray(this._container.dataset.tcStart)
-    const end = this._toArray(this._container.dataset.tcEnd)
-    const tabs = []
-
-    for (const tab of start) {
-      if (tabSet.has(tab)) {
-        tabs.push(tab)
-      }
-    }
-
-    for (const tab of tabSet) {
-      if (!start.includes(tab) && !end.includes(tab)) {
-        tabs.push(tab)
-      }
-    }
-
-    for (const tab of end) {
-      if (tabSet.has(tab)) {
-        tabs.push(tab)
-      }
-    }
-
-    // Create the tabs.
-    for (const tab of tabs) {
-      const list =
-        exceptions.indexOf(tab) > -1
-          ? menuMode
-            ? bar
-            : menuList
-          : menuMode
-            ? menuList
-            : bar
-
-      list.insertBefore(
-        create(
-          'button',
-          {
-            className: 'TabBar-item',
-            dataset: { tab },
-            role: 'tab',
-            onclick: (event) => {
-              event.preventDefault()
-              this.select(tab, event)
-            },
-            onkeydown: (e) => {
-              var tab = e.currentTarget
-              var tabs = tab.closest('.TabBar')
-
-              switch (e.key) {
-                case 'ArrowRight':
-                  if (tab.nextSibling) {
-                    tab.nextSibling.focus()
-                  } else {
-                    tabs.firstChild.focus()
-                  }
-                  return
-
-                case 'ArrowLeft':
-                  if (tab.previousSibling) {
-                    tab.previousSibling.focus()
-                  } else {
-                    tabs.lastChild.focus()
-                  }
-                  return
-              }
-            },
-          },
-          tab,
-        ),
-        tab === main ? list.firstChild : null,
-      )
-    }
-
-    if (tabs.includes(main)) {
-      this._defaultTab = main
-    }
-
-    // If there's only 1 tab, only display the menu.
-    if (bar.children.length === 1) {
-      menuList.insertBefore(bar.children[0], menuList.firstChild)
-    }
-
-    for (const c of menuList.children) {
-      c.className = 'TabBar-menuItem'
-      c.setAttribute('role', 'menuitem')
-    }
-
-    setupMenuForAria(menuList, menuToggle)
-
-    // Reset in case this is being recreated.
-    if (this._bar) {
-      this._bar.remove()
-      this._bar = null
-      this._menu = null
-      this._menuToggle = null
-      this._menuList = null
-    }
-
-    // No tabs found, so stop.
-    if (
-      tabs.length === 0 ||
-      (tabs.length < 2 && !this._container.getAttribute('data-show-tabs'))
-    ) {
-      this._container.dataset.tabless = 'true'
-      // Ensure there aren't any children that are hidden
-      const hiddenChildren = this._container.querySelectorAll(
-        ':scope > .TC-unselected',
-      )
-      Array.from(hiddenChildren).forEach((child) => {
-        child.classList.remove('TC-unselected')
-      })
-      return
-    }
-
-    this._bar = bar
-    this._container.insertBefore(bar, this._container.firstChild)
-
-    if (menuList.children.length > 0) {
-      if (bar.children.length === 0) {
-        bar.classList.add('is-menuOnly')
-        bar.removeAttribute('role')
-      }
-
-      this._menu = menu
-      this._menuToggle = menuToggle
-      this._menuList = menuList
-      this._bar.appendChild(menu)
-    }
-
-    const visibleTabs = this._toggle()
-
-    if (!visibleTabs.includes(this._defaultTab)) {
-      this._defaultTab = visibleTabs[0]
-    }
-
-    //Hide the tab selector if all other tabs are hidden
-    bar.hidden =
-      Array.from(menuList.children).filter((c) => !c.hidden).length === 1
-
-    // Any field errors within the panels?
-    let menuError = false
-
-    for (const error of findAll(
-      this._container,
-      '.CIG-row > .Message.is-error',
-    )) {
-      let parent = error
-      let row
-
-      do {
-        row = parent
-        parent = row.parentNode
-      } while (parent !== this._container)
-
-      const item = find(this._bar, `[data-tab="${row.dataset.tab}"]`)
-
-      if (item && !item.classList.contains('is-error')) {
-        item.classList.add('is-error')
-
-        if (item.classList.contains('TabBar-menuItem')) {
-          menuError = true
-        }
-      }
-    }
-
-    if (menuError) {
-      bar.classList.add('is-menuError')
-    }
-
-    this.select()
-
-    /* this._observer = new MutationObserver(this._update).observe(
-      this._container,
-      { childList: true }
-    ) */
-  }
-
-  _toggle() {
-    const visibleTabs = []
-
-    this._forEachChild((tab, child) => {
-      if (!(child.hidden || child instanceof HTMLHeadingElement)) {
-        visibleTabs.push(tab)
-      }
-    })
-
-    for (const container of [this._bar, this._menuList]) {
-      if (container) {
-        for (const c of container.children) {
-          if (c !== this._menu) {
-            c.hidden = !visibleTabs.includes(c.dataset.tab)
-          }
-        }
-      }
-    }
-
-    return visibleTabs
-  }
-
-  select(selectedTab, event) {
-    const focus =
-      selectedTab &&
-      this._container.closest('.ContentEdit.is-new, .StandardForm.is-new')
-
-    if (!selectedTab) {
-      selectedTab = this._defaultTab
-    }
-
-    // Try to select the tab in the bar first.
-    if (this._bar && !this._bar.classList.contains('is-menuOnly')) {
-      for (const c of this._bar.children) {
-        const isSelected = c.dataset.tab === selectedTab
-
-        c.classList.toggle('is-selected', isSelected)
-        c.setAttribute('aria-selected', isSelected)
-
-        if (isSelected) {
-          c.removeAttribute('tabindex')
-        } else {
-          c.setAttribute('tabindex', '-1')
-        }
-      }
-    }
-
-    // Then try the ones in the menu.
-    if (this._menuList) {
-      let menuSelected = false
-
-      for (const c of this._menuList.children) {
-        if (c.classList.toggle('is-selected', c.dataset.tab === selectedTab)) {
-          menuSelected = selectedTab !== this._defaultTab
-        }
-      }
-
-      this._bar.classList.toggle('is-menuSelected', menuSelected)
-      this._menuToggle.innerText = menuSelected ? selectedTab : ''
-    }
-
-    // Toggle the panel visibilities.
-    this._forEachChild((tab, child) => {
-      child.classList.toggle('TC-unselected', tab !== selectedTab)
-    })
-
-    window.dispatchEvent(new Event('resize'))
-
-    // Legacy events.
-    $(this._container).find('> [data-tab]').trigger('tabbedShow')
-
-    $(this._bar).trigger('tabbed-select')
-
-    // Focus on the first input when changing tab.
-    if (focus) {
-      const id = this._container.querySelector(
-        `:scope > .CIG-row:not(.inputContainer-readOnly)[data-tab="${selectedTab}"] > .CIG-label > label`,
-      )?.htmlFor
-
-      if (id) {
-        document.getElementById(id)?.focus()
-      }
-    } else if (event) {
-      // Restore scroll position where user clicked the tab.
-      event.target.scrollIntoView({ block: 'nearest' })
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-// Highlight the item that's expanded.
-window.addEventListener(
-  'click',
-  (e) => {
-    const link = e.target
-
-    if (link.classList.contains('Taxonomy-expand')) {
-      for (const s of link.closest('ul').querySelectorAll('.is-selected')) {
-        s.classList.remove('is-selected')
-      }
-
-      link.closest('li').classList.add('is-selected')
-    }
-  },
-  { capture: true },
-)
-
-// Automatically scroll to the right when the children are loaded.
-window.addEventListener('brightspot-frame-load', (e) => {
-  const frame = e.target
-
-  if (frame.classList.contains('Taxonomy-children')) {
-    window.requestAnimationFrame(() => {
-      frame.closest('.Taxonomy').scrollTo({ left: 30000 })
-    })
-  }
-})

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

@@ -1,224 +0,0 @@
-import create from './dom/create'
-import onFind from './dom/onFind'
-
-const STATE_OPEN = 'is-open'
-
-export class ThemeBundleEditor {
-  constructor() {
-    this._editorStage = null
-    this._editorToggle = null
-    this._themeBundle = null
-    this._presetSelect = null
-    this._selectedPreset = null
-    this._sg = null
-    this._zIndex = 110
-
-    onFind(document, '.ThemeBundle', (theme) => {
-      this._themeBundle = theme
-      this._initLabels()
-      this._createUI(this._themeBundle)
-    })
-
-    onFind(document, '.Tab[data-tab="Styleguide"]', (tab) => {
-      document.body.classList.add('has-theme-styleguide')
-    })
-
-    window.addEventListener('message', async ({ data }) => {
-      if (typeof data !== 'object') return
-      if (data.type === 'BSP.Styleguide.CloseStyleguideReady') {
-        this._editorToggle.setAttribute('aria-expanded', 'false')
-        this._editorStage.classList.remove(STATE_OPEN)
-
-        const presetRow = document.querySelector(
-          '.CIG-row[data-tab="Overrides"][data-field-name$="._preset"]',
-        )
-        const presetFields = presetRow.querySelector('.CIG-large')
-
-        if (
-          this._selectedPreset !== this._presetSelect.value ||
-          presetRow.hasAttribute('data-received-update')
-        ) {
-          const overridesTab = this._presetSelect
-            .closest('.CIG')
-            .querySelector(':scope > .TabBar .ThemeBundle-tabOverrides')
-          overridesTab && overridesTab.click()
-          presetFields.style = this._presetSelect.value ? 'display: none;' : ''
-          presetRow.classList.add('state-changed')
-          presetRow.removeAttribute('data-received-update')
-
-          if (!this._presetSelect.value) {
-            presetFields
-              .querySelectorAll('input.color, input[type="checkbox"], textarea')
-              .forEach((input) => input.removeAttribute('disabled'))
-          }
-        }
-      } else if (data.type === 'BSP.Styleguide.LoadingV2') {
-        this._sg.classList.add('is-v2')
-      }
-    })
-  }
-
-  _initLabels() {
-    this._labels = {
-      tab: window.THEME_BUNDLE_EDITOR_LABELS
-        ? window.THEME_BUNDLE_EDITOR_LABELS.tabName
-        : 'Main',
-      open: window.THEME_BUNDLE_EDITOR_LABELS
-        ? window.THEME_BUNDLE_EDITOR_LABELS.openAction
-        : 'Open Styleguide',
-      openNewTab: window.THEME_BUNDLE_EDITOR_LABELS
-        ? window.THEME_BUNDLE_EDITOR_LABELS.openNewTabAction
-        : 'Open in New Window/Tab',
-      close: window.THEME_BUNDLE_EDITOR_LABELS
-        ? window.THEME_BUNDLE_EDITOR_LABELS.closeAction
-        : 'Back',
-    }
-  }
-
-  _createUI(theme) {
-    this._editorStage = create('DIV', { class: 'ThemeBundleEditor-stage' })
-    this._editorStage.addEventListener('transitionend', (event) => {
-      if (event.target === this._editorStage) {
-        event.stopPropagation()
-        this._editorStage.classList.contains(STATE_OPEN)
-          ? this._showStyleguide()
-          : this._hideStyleguide()
-      }
-    })
-
-    this._editorToggle = create(
-      'BUTTON',
-      {
-        className: 'ThemeBundleEditor-toggle',
-        name: 'action-edit',
-        value: this._labels.open,
-        'aria-expanded': 'false',
-        onclick: (event) => {
-          event.preventDefault()
-          this._openEditor()
-        },
-      },
-      this._labels.open,
-    )
-
-    // Popup UI.
-    const main = create('DIV', {
-      className: 'ThemeBundleEditor-stage-main',
-    })
-
-    const top = create(
-      'DIV',
-      {
-        className: 'ThemeBundleEditor-stage-top',
-      },
-      create(
-        'a',
-        {
-          className: 'Popup-heading ThemeBundleEditor-close',
-          onclick: (event) => {
-            this._closeEditor()
-          },
-        },
-        this._labels.close,
-      ),
-    )
-
-    this._editorStage.appendChild(top)
-    this._editorStage.appendChild(main)
-    theme.appendChild(this._editorStage)
-
-    const presetSelect = theme.querySelector(
-      '.CIG-row[data-field-name$="._preset"]',
-    )
-    if (presetSelect) {
-      const firstInput = theme.querySelector('.CIG-row')
-      if (firstInput) {
-        theme.insertBefore(
-          create(
-            'DIV',
-            {
-              className: 'ThemeBundleEditor-top',
-              'data-tab': this._labels.tab,
-            },
-            this._editorToggle,
-          ),
-          firstInput,
-        )
-      }
-    }
-  }
-
-  _closeEditor() {
-    if (this._sg.matches('.is-v2')) {
-      this._sg?.contentWindow.postMessage(
-        {
-          type: 'BSP.Styleguide.CloseStyleguide',
-        },
-        '*',
-      )
-    } else {
-      this._editorToggle.setAttribute('aria-expanded', 'false')
-      this._editorStage.classList.remove(STATE_OPEN)
-    }
-  }
-
-  _openEditor() {
-    this._editorStage.style.zIndex = this._zIndex
-    this._editorToggle.setAttribute('aria-expanded', 'true')
-    this._editorStage.classList.add(STATE_OPEN)
-  }
-
-  _showStyleguide() {
-    if (!this._sg) {
-      onFind('.ThemeBundle-edit', async (editLink) => {
-        const response = await fetch(editLink.href)
-        const html = await response.text()
-
-        // Stage the returned html in a DOM.
-
-        const template = document.createElement('template')
-        template.innerHTML = html
-        this._sg = template.content.querySelector(
-          '.Tab[data-tab="Styleguide"] iframe',
-        )
-
-        this._editorStage
-          .querySelector('.ThemeBundleEditor-stage-main')
-          .appendChild(this._sg)
-
-        const openNewLink = create(
-          'a',
-          {
-            className: 'Popup-heading ThemeBundleEditor-openNewTab',
-            target: '_blank',
-            href: this._sg.getAttribute('src'),
-          },
-          this._labels.openNewTab,
-        )
-        const editorTop = document.querySelector('.ThemeBundleEditor-stage-top')
-        editorTop.appendChild(openNewLink)
-      })
-
-      this._presetSelect = document.querySelector(
-        '.CIG-row[data-tab="Overrides"][data-field-name$="._preset"] select[name$="._preset"]',
-      )
-      this._selectedPreset = this._presetSelect.value
-    } else {
-      this._sg.style.visibility = 'visible'
-      this._sg?.contentWindow.postMessage(
-        {
-          type: 'BSP.Styleguide.ReopenStyleguide',
-        },
-        '*',
-      )
-    }
-  }
-
-  _hideStyleguide() {
-    if (this._sg) {
-      this._sg.style.visibility = 'hidden'
-    }
-  }
-}
-
-export default new ThemeBundleEditor()