@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/StyleEmbeddedContent.js

@@ -1,100 +0,0 @@
-import onFind from './dom/onFind'
-import Cookies from 'js.cookie'
-
-onFind('.StyleEmbeddedContent-items > li', (content) => {
-  content.addEventListener('click', async (event) => {
-    let target = event.target
-    const isTemplateSelection = target.parentElement.classList.contains('Card')
-
-    if (target.parentElement.nodeName === 'LI' || isTemplateSelection) {
-      if (isTemplateSelection) {
-        target = target.parentElement
-      }
-
-      const data = target.dataset.addEmbeddedContentData
-      if (!data) return
-
-      const parsedData = JSON.parse(data)
-      const templateTypeId = parsedData.typeId
-      if (!templateTypeId) return
-
-      const addEmbeddedContentParams = target
-        .closest('.Popup')
-        .querySelector('.AddEmbeddedContent-params')
-      if (!addEmbeddedContentParams) return
-
-      const fieldName = addEmbeddedContentParams.dataset.fieldName
-      if (!fieldName) return
-
-      let url =
-        '/cms/update-recently-used?fieldName=' +
-        fieldName +
-        '&templateTypeId=' +
-        templateTypeId
-
-      const templateStyle = parsedData.value
-      if (templateStyle) {
-        url += '&templateStyle=' + templateStyle
-      }
-
-      const headers = new Headers()
-      headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
-
-      try {
-        await fetch(url, {
-          method: 'POST',
-          headers: headers,
-        })
-      } catch (error) {
-        console.error(error)
-      }
-    }
-  })
-})
-
-onFind('.StyleEmbeddedContent-search input', (input) => {
-  input.addEventListener('input', (e) => {
-    const nav = input.closest('.StyleEmbeddedContent-nav')
-    const main = nav?.nextSibling
-    const reg = new RegExp(
-      e.target.value.replace(/\s/, '').split('').join('(?:.*\\W)?'),
-      'i',
-    )
-
-    main?.querySelectorAll('a').forEach((item) => {
-      const li = item.parentElement
-      const ul = li?.parentElement
-      const heading = ul?.previousSibling
-
-      if (reg.test(item.innerText)) {
-        li.style.display = ''
-        ul.style.display = ul.classList.contains('LinkTable') ? 'block' : 'flex'
-        heading.style.display = 'block'
-      } else {
-        li.style.display = 'none'
-        if (!ul.querySelector('li:not([style*="display: none"])')) {
-          ul.style.display = 'none'
-          heading.style.display = 'none'
-        }
-      }
-    })
-
-    nav?.querySelectorAll('li').forEach((li) => {
-      li.style.display =
-        li.classList.contains('is-selected') || e.target.value === ''
-          ? 'list-item'
-          : 'none'
-      li.style.borderColor = 'var(--color-gray3)'
-    })
-
-    const firstVisible = nav?.querySelector('li:not([style*="display: none"])')
-    firstVisible.style.borderColor = 'transparent'
-
-    const warning = main?.querySelector('.StyleEmbeddedContent-warning')
-    warning.style.display = main?.querySelector(
-      'li:not([style*="display: none"])',
-    )
-      ? 'none'
-      : 'flex'
-  })
-})

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

@@ -1,357 +0,0 @@
-import onFind from './dom/onFind'
-import Cookies from 'js.cookie'
-import { v1 as uuidv1 } from 'uuid'
-
-const toggleSelector =
-  '> .CIG-large > .CIG > .CIG-row, > .CIG-large > .CIG > .TemplateField'
-const toggleClusterSelector =
-  '> .CIG-large > .CIG > btu-cig-cluster > .TemplateField'
-
-onFind('.CIG-row.StyleguidePreset-row', (presetRow) => {
-  let presetValue
-  let templateSelect
-  let template
-  let nestedStyleFields
-  let allStyleFields
-
-  const templateRow = presetRow.closest('.CIG-row.StyleguideTemplate-row')
-  const originalTemplate = presetRow.getAttribute('data-original-template')
-  const getNestedStyleFields = (template) => {
-    return Array.from(
-      presetRow.querySelectorAll(
-        `.TC > .TemplateField[data-template='${template}'] > .CIG-row, .TC > btu-cig-cluster > .TemplateField[data-template='${template}'] > .CIG-row`,
-      ),
-    )
-  }
-
-  if (templateRow) {
-    templateSelect = templateRow.querySelector('.CIG-small > select')
-    let templateValue = templateSelect.value
-
-    templateSelect.addEventListener('change', () => {
-      if (templateValue === templateSelect.value) return
-      templateValue = templateSelect.value
-
-      template = templateValue || originalTemplate
-      nestedStyleFields = getNestedStyleFields(template)
-      allStyleFields = styleFields.concat(nestedStyleFields)
-
-      if (presetSelect) {
-        presetSelect
-          .querySelector('option[data-show]')
-          .setAttribute(
-            'data-show',
-            `${toggleSelector}[data-template="${template}"], ${toggleClusterSelector}[data-template="${template}"]`,
-          )
-        presetSelect
-          .querySelectorAll('option[data-preset]')
-          .forEach((option) => option.remove())
-        ;(async () => {
-          const response = await fetch(
-            CONTEXT_PATH +
-              'styleguide/preset?themeId=currentTheme&templateId=' +
-              template,
-            {
-              method: 'GET',
-              headers: new Headers(),
-            },
-          )
-          try {
-            const presetsJson = await response.json()
-            const presets = presetsJson.success && presetsJson.data
-            presets?.forEach((item) => {
-              const option = document.createElement('option')
-              option.setAttribute(
-                'data-hide',
-                `${toggleSelector}, ${toggleClusterSelector}`,
-              )
-              option.setAttribute('data-preset', item.presetId)
-              option.setAttribute('value', item.presetId)
-              option.textContent = item.label
-              presetSelect.appendChild(option)
-            })
-          } catch (e) {
-            console.log(e)
-          }
-        })()
-      }
-
-      if (presetValue) {
-        setSelect(presetSelect, 'none')
-      } else {
-        presetSelect.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-    })
-  }
-
-  template = templateSelect?.value || originalTemplate
-
-  const styleFields = Array.from(presetRow.querySelectorAll('.TC > .CIG-row'))
-  nestedStyleFields = getNestedStyleFields(template)
-  allStyleFields = styleFields.concat(nestedStyleFields)
-
-  const presetSelect = presetRow.querySelector('.CIG-small > select')
-  presetValue = presetSelect.value
-  presetSelect.setAttribute('data-previous-value', presetValue)
-  const customContainer = presetRow.querySelector('.CIG-large')
-
-  presetSelect.addEventListener('change', (e) => {
-    presetValue = presetSelect.value
-    const prevPresetValue = presetSelect.getAttribute('data-previous-value')
-
-    if (presetValue === prevPresetValue) return
-
-    presetSelect.setAttribute('data-previous-value', presetValue)
-
-    if (presetValue) {
-      customContainer.style.display = 'none'
-      return
-    }
-
-    customContainer.style.display = ''
-    setPresetValues(template, prevPresetValue, allStyleFields)
-  })
-})
-
-const setSelect = (select, value) => {
-  if (select.nextElementSibling?.matches('.ComboInput')) {
-    const listId = select.nextElementSibling.getAttribute('aria-owns')
-    const list = document.querySelector(`#${listId}`)
-    const option = list.querySelector(
-      `.ComboInput-option[data-value="${value}"]`,
-    )
-    option && option.click()
-  } else {
-    select.value = value
-  }
-}
-
-const setFieldValue = (field, value) => {
-  const textInput = field.querySelector('textarea')
-  const toggleInput = field.querySelector('input[type="checkbox"]')
-  const colorInput = field.querySelector('input.color')
-  const select = field.querySelector('select')
-
-  if (textInput) {
-    textInput.value = value || ''
-  } else if (toggleInput) {
-    toggleInput.checked = value || false
-  } else if (colorInput) {
-    $(colorInput).spectrum('set', value || '')
-    const colorLabel = colorInput.parentElement.querySelector('.sp-preview')
-    if (colorLabel && value) {
-      colorLabel.setAttribute('data-color', value)
-    } else if (colorLabel) {
-      colorLabel.removeAttribute('data-color')
-    } else {
-      colorInput.value = value || ''
-    }
-  } else if (select) {
-    setSelect(select, value || '')
-  }
-}
-
-const setPresetValues = async (template, presetId, fields) => {
-  const setValues = (preset) => {
-    fields?.forEach((field) => {
-      const fieldPath = field.getAttribute('data-field-name')
-      const fieldName = fieldPath?.slice(fieldPath.lastIndexOf('.') + 1)
-      const newValue = preset && fieldName && preset[fieldName]
-      setFieldValue(field, newValue)
-    })
-  }
-
-  if (!presetId || presetId === 'none') {
-    setValues()
-  } else {
-    const url =
-      CONTEXT_PATH +
-      'styleguide/preset?themeId=currentTheme&templateId=' +
-      template +
-      '&presetId=' +
-      presetId
-    const headers = new Headers()
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: headers,
-    })
-
-    try {
-      const presetsJson = await response.json()
-      const preset = presetsJson.success && presetsJson.data[0].values
-      preset && setValues(preset)
-    } catch (e) {
-      console.log(e)
-    }
-  }
-}
-
-const getThemeOverrides = (tabContainer, presetSelect) => {
-  const presetRow = tabContainer?.querySelector(
-    ':scope > .ThemeBundleEditor-top ~ .CIG-row[data-tab="Overrides"][data-field-name$="_preset"]',
-  )
-  const preset = presetSelect?.value
-  const overrideFields = presetRow?.querySelectorAll(
-    ':scope > .CIG-large > .CIG .CIG-row',
-  )
-  const overrideValues = []
-  const themePlaceholders = []
-
-  overrideFields.forEach((field) => {
-    const fieldNameLong = field.getAttribute('data-field-name')
-    const fieldName = fieldNameLong.substring(
-      fieldNameLong.lastIndexOf('.') + 1,
-    )
-    const textOrColor = field.querySelector('textarea, input.color')
-    const toggleInput = field.querySelector('input[type="checkbox"]')
-    const select = field.querySelector('[data-type="text"] select')
-
-    if (textOrColor) {
-      overrideValues[fieldName] = textOrColor.value || ''
-      themePlaceholders[fieldName] = textOrColor.placeholder || ''
-    } else if (toggleInput) {
-      overrideValues[fieldName] = toggleInput.checked
-    } else if (select) {
-      overrideValues[fieldName] = select.value || ''
-      themePlaceholders[fieldName] =
-        select.getAttribute('data-placeholder') || ''
-    }
-  })
-
-  return { overrideValues, themePlaceholders }
-}
-
-const returnPresets = async (themeId, label, templateName) => {
-  let themeOverrides, themePresetLabel
-  if (!templateName) {
-    const overridesTab = document.querySelector('.ThemeBundleEditor-top')
-    const tabContainer = overridesTab?.closest('.ThemeBundle.TC')
-    const presetSelect = tabContainer?.querySelector(
-      ':scope > .ThemeBundleEditor-top ~ .CIG-row[data-tab="Overrides"][data-field-name$="_preset"] select[name$="_preset"]',
-    )
-    themePresetLabel = presetSelect?.querySelector(
-      `option[value="${presetSelect.value}"]`,
-    )?.textContent
-
-    themeOverrides = getThemeOverrides(tabContainer, presetSelect)
-  }
-
-  const url =
-    CONTEXT_PATH +
-    'styleguide/preset?themeId=' +
-    themeId +
-    '&templateId=' +
-    (templateName || 'themeFields')
-  const headers = new Headers()
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: headers,
-  })
-  try {
-    const presetsJson = await response.json()
-    const presets = presetsJson.success && JSON.stringify(presetsJson.data)
-    const iframe = document.querySelector('iframe.StyleguideFrame')
-    iframe.contentWindow.postMessage(
-      {
-        type: 'BSP.Styleguide.ReturnThemePresets',
-        presets: presets,
-        selectedPreset: label,
-        themeOverrides: themeOverrides?.overrideValues,
-        themePlaceholders: themeOverrides?.themePlaceholders,
-        themePreset: themePresetLabel,
-      },
-      '*',
-    )
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-const updatePresets = async (themeId, data, templateName, presetRow) => {
-  const url = CONTEXT_PATH + 'styleguide/preset?themeId=' + themeId
-  const headers = new Headers()
-  headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
-
-  const payload = {}
-  payload.type = data.type
-  payload.key = data.preset.key
-  payload.values = data.preset.values
-  payload.label = data.preset.label
-  payload.presetId = data.preset.presetId || uuidv1()
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: headers,
-    body: JSON.stringify(payload),
-  })
-  try {
-    const responseJson = await response.json()
-    if (responseJson.success)
-      returnPresets(themeId, data.preset.label, templateName)
-  } catch (e) {
-    console.log(e)
-  }
-
-  if (data.preset.key === 'brightspot-styleguide-theme-values') {
-    const select = presetRow?.querySelector(':scope > .CIG-small select')
-    if (data.type === 'BSP.Styleguide.RemovePreset') {
-      const deletedOption = select?.querySelector(
-        `option[value="${data.preset.presetId}"]`,
-      )
-      deletedOption?.remove()
-    } else if (data.type === 'BSP.Styleguide.SetOverrides') {
-      if (data.preset.presetId) {
-        const updatedOption = select?.querySelector(
-          `option[value="${data.preset.presetId}"]`,
-        )
-        updatedOption.textContent = data.preset.label
-      } else {
-        const newOption = document.createElement('option')
-        newOption.setAttribute(
-          'data-hide',
-          `${toggleSelector}, ${toggleClusterSelector}`,
-        )
-        newOption.setAttribute('value', payload.presetId)
-        newOption.textContent = data.preset.label
-        select.appendChild(newOption)
-      }
-    }
-  }
-}
-
-window.addEventListener('message', async ({ data }) => {
-  if (typeof data !== 'object' || !data.type?.startsWith('BSP.Styleguide.'))
-    return
-
-  const themeId = document
-    .querySelector('.ThemeBundle')
-    ?.getAttribute('data-id')
-  const templateName =
-    data.preset?.key?.startsWith('brightspot-styleguide-template-values-') &&
-    data.preset.key.replace('brightspot-styleguide-template-values-', '')
-
-  const overridesTab = document.querySelector('.ThemeBundleEditor-top')
-  const tabContainer = overridesTab?.closest('.ThemeBundle.TC')
-  const presetRow = tabContainer?.querySelector(
-    ':scope > .ThemeBundleEditor-top ~ .CIG-row[data-tab="Overrides"][data-field-name$="_preset"]',
-  )
-
-  if (data.type === 'BSP.Styleguide.RequestPresets') {
-    returnPresets(themeId, data.label, data.templateName)
-  } else if (
-    data.type === 'BSP.Styleguide.SetOverrides' ||
-    data.type === 'BSP.Styleguide.RemovePreset'
-  ) {
-    updatePresets(themeId, data, templateName, presetRow)
-  } else if (data.type === 'BSP.Styleguide.SyncOverrideField') {
-    const field = presetRow?.querySelector(
-      `:scope > .CIG-large > .CIG .CIG-row[data-field-name$=".${data.field}"]`,
-    )
-    setFieldValue(field, data.value)
-    presetRow.setAttribute('data-received-update', '')
-  } else if (data.type === 'BSP.Styleguide.SyncThemePresetField') {
-    const presetSelect = presetRow?.querySelector(':scope > .CIG-small select')
-    const presetId = data.preset === 'Custom' ? '' : data.preset
-    if (presetSelect) setSelect(presetSelect, presetId)
-  }
-})