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

@@ -1,485 +0,0 @@
-import onFind from './dom/onFind'
-import moment from 'moment-timezone'
-
-// convert legacy date field to use the new BE calendar
-onFind('input.date', (inputElement) => {
-  inputElement.classList.remove('date')
-  inputElement.setAttribute('type', 'hidden')
-  const tz = document.querySelector('html').getAttribute('data-time-zone')
-  inputElement.setAttribute('data-time-zone', tz)
-
-  const anchorElement = document.createElement('a')
-  anchorElement.classList.add('DateTimeInput', 'is-legacy')
-  anchorElement.setAttribute('target', 'DateStringCalendarFrame')
-
-  const placeholder = inputElement.getAttribute('placeholder')
-
-  if (placeholder) {
-    anchorElement.setAttribute('data-placeholder', placeholder)
-  }
-
-  const searchParams = new URLSearchParams()
-  searchParams.append('showDate', true)
-  searchParams.append('showTime', true)
-  searchParams.append('hideSecond', true)
-
-  let date
-  let time
-
-  if (inputElement.value) {
-    const inputValue = moment.tz(parseInt(inputElement.value), tz)
-    date = inputValue.format('YYYY-MM-DD')
-    time = inputValue.format('HH:mm:ss.SSS')
-    searchParams.append('date', date)
-    searchParams.append('time', time)
-  } else {
-    anchorElement.classList.add('is-empty')
-  }
-
-  formatDateTime(anchorElement, null, date, time)
-  anchorElement.href =
-    window.BRIGHTSPOT.web.pagePaths['com.psddev.cms.ui.form.CalendarFrame'] +
-    '?' +
-    searchParams
-  inputElement.parentNode.insertBefore(anchorElement, inputElement.nextSibling)
-})
-
-onFind('.DateStringCalendarEmbedded .DateStringCalendar', (calendar) => {
-  renderWidget(calendar, calendar.closest('.DateStringCalendarEmbedded'))
-})
-
-onFind('.Popup .DateStringCalendar', (calendar) => {
-  const frameElement = calendar.closest('.frame')
-  const popup = frameElement.closest('.Popup')
-  popup.setAttribute('aria-label', calendar.getAttribute('data-popupLabel'))
-  const popupClasses = popup.classList
-  popupClasses.add('is-local')
-  popupClasses.add('is-calendar')
-
-  const fieldReference = frameElement._bspFrameLink
-
-  if (fieldReference.getAttribute('data-hide-popup-close') === 'true') {
-    popup.querySelector('.Popup-close').classList.add('is-hidden')
-  }
-
-  renderWidget(calendar, fieldReference)
-})
-
-const formatDateTime = (
-  formatTarget,
-  labelPrefix,
-  date,
-  time,
-  zoneOffset,
-  zoneId,
-) => {
-  if (!formatTarget) {
-    return
-  }
-
-  if (typeof date === 'object') {
-    time = date.getAttribute('data-time')
-    zoneOffset = date.getAttribute('data-zoneOffset')
-    zoneId = date.getAttribute('data-zoneId')
-    date = date.getAttribute('data-date')
-  }
-
-  const placeholder = formatTarget.getAttribute('data-placeholder')
-
-  if (!date && !time && placeholder) {
-    formatTarget.setAttribute('aria-label', placeholder)
-    formatTarget.innerHTML = ''
-    return
-  }
-
-  const data = new URLSearchParams()
-  data.append('date', date)
-  data.append('time', time)
-  data.append('zoneOffset', zoneOffset)
-  data.append('zoneId', zoneId)
-  data.append('formatDateTime', true)
-
-  fetch(
-    window.BRIGHTSPOT.web.pagePaths['com.psddev.cms.ui.form.CalendarFrame'] +
-      '?' +
-      data,
-    {
-      method: 'get',
-      credentials: 'include',
-    },
-  )
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`)
-      }
-
-      return response.text()
-    })
-    .then((responseText) => {
-      const text = `${labelPrefix || ''}${responseText}`
-      formatTarget.setAttribute('aria-label', text)
-      formatTarget.innerHTML = text
-    })
-}
-
-const updateData = (calendar, fieldReference, clearData) => {
-  const [path, paramString] = (fieldReference.getAttribute('href') || '').split(
-    '?',
-  )
-  const searchParams = new URLSearchParams(paramString)
-  let fieldInput
-
-  // support legacy date field
-  if (fieldReference.classList.contains('is-legacy')) {
-    const legacyFieldInput = fieldReference.previousSibling
-
-    if (clearData) {
-      calendar.removeAttribute('data-date')
-      searchParams.delete('date')
-      calendar.removeAttribute('data-time')
-      searchParams.delete('time')
-
-      legacyFieldInput.value = null
-    } else {
-      const date = calendar.getAttribute('data-date')
-      searchParams.set('date', date)
-      const time = calendar.getAttribute('data-time')
-      searchParams.set('time', time)
-
-      legacyFieldInput.value = moment
-        .tz(`${date}T${time}`, legacyFieldInput.getAttribute('data-time-zone'))
-        .valueOf()
-    }
-
-    fieldInput = legacyFieldInput
-  } else {
-    const inputContainer = fieldReference.closest(
-      'li, .CIG-large, .CIG-small, .ContentEdit-publish, .ContentEdit-workflowActions, .SearchWidget-customDate',
-    )
-    const showDate = calendar.getAttribute('data-showDate') === 'true'
-    const showTime = calendar.getAttribute('data-showTime') === 'true'
-    const showZoneOffset =
-      calendar.getAttribute('data-showZoneOffset') === 'true'
-    const showZoneId = calendar.getAttribute('data-showZoneId') === 'true'
-
-    if (showDate) {
-      const dateFieldInput = inputContainer.querySelector(
-        'input[name$=".date"], .DateTimeInput-date',
-      )
-
-      if (clearData) {
-        calendar.removeAttribute('data-date')
-        searchParams.delete('date')
-        dateFieldInput.value = null
-      } else {
-        const date = calendar.getAttribute('data-date')
-        searchParams.set('date', date)
-        dateFieldInput.value = date
-      }
-
-      fieldInput = dateFieldInput
-    }
-
-    if (showTime) {
-      const timeFieldInput = inputContainer.querySelector(
-        'input[name$=".time"], .DateTimeInput-time',
-      )
-
-      if (clearData) {
-        calendar.removeAttribute('data-time')
-        searchParams.delete('time')
-        timeFieldInput.value = null
-      } else {
-        const time = calendar.getAttribute('data-time')
-        searchParams.set('time', time)
-        timeFieldInput.value = time
-      }
-
-      if (showZoneOffset) {
-        let zoneOffsetFieldInput = inputContainer.querySelector(
-          'input[name$=".zoneOffset"]',
-        )
-
-        if (clearData) {
-          calendar.removeAttribute('data-zoneOffset')
-          searchParams.delete('zoneOffset')
-          zoneOffsetFieldInput.value = null
-        } else {
-          const zoneOffset = calendar.getAttribute('data-zoneOffset')
-          searchParams.set('zoneOffset', zoneOffset)
-          zoneOffsetFieldInput.value = zoneOffset
-        }
-      } else if (showZoneId) {
-        let zoneIdFieldInput = inputContainer.querySelector(
-          'input[name$=".zoneId"]',
-        )
-
-        if (clearData) {
-          calendar.removeAttribute('data-zoneId')
-          searchParams.delete('zoneId')
-          zoneIdFieldInput.value = null
-        } else {
-          const zoneId = calendar.getAttribute('data-zoneId')
-          searchParams.set('zoneId', zoneId)
-          zoneIdFieldInput.value = zoneId
-        }
-      }
-
-      fieldInput = timeFieldInput
-    }
-  }
-
-  fieldInput.dispatchEvent(new Event('change', { bubbles: true }))
-
-  return path + '?' + searchParams.toString()
-}
-
-const updateCollectionLabel = (calendar) => {
-  const liElement = calendar.closest('li')
-  const dataType = liElement.getAttribute('data-type')
-  formatDateTime(
-    liElement.querySelector('.RCIG-title'),
-    `${dataType}: `,
-    calendar,
-  )
-}
-
-const updateEmbeddedCalendar = (calendar, fieldReference) => {
-  updateData(calendar, fieldReference)
-
-  const dateTimeTypes = [
-    '/date',
-    '/instant',
-    '/zonedDateTime',
-    '/offsetDateTime',
-    '/offsetTime',
-    '/localDateTime',
-    '/localDate',
-    '/localTime',
-  ]
-
-  if (
-    calendar.closest(
-      `.CIG-row[data-type$="${dateTimeTypes.join(
-        '"], .CIG-row[data-type$="',
-      )}"]`,
-    )
-  ) {
-    updateCollectionLabel(calendar)
-  } else {
-    formatDateTime(
-      fieldReference.closest('.CIG-row').querySelector('.CIG-note'),
-      null,
-      calendar,
-    )
-  }
-}
-
-const updateDateField = (calendar, fieldReference, clearData) => {
-  fieldReference.setAttribute(
-    'href',
-    updateData(calendar, fieldReference, clearData),
-  )
-
-  if (clearData) {
-    fieldReference.classList.add('is-empty')
-  } else {
-    fieldReference.classList.remove('is-empty')
-  }
-
-  formatDateTime(fieldReference, null, calendar)
-  calendar.closest('.Popup').querySelector('.Popup-close').click()
-}
-
-const renderWidget = (calendar, fieldReference) => {
-  const isWidgetEmbedded =
-    calendar.getAttribute('data-isWidgetEmbedded') === 'true'
-  const showDate = calendar.getAttribute('data-showDate') === 'true'
-  const showTime = calendar.getAttribute('data-showTime') === 'true'
-  const showZoneOffset = calendar.getAttribute('data-showZoneOffset') === 'true'
-  const showZoneId = calendar.getAttribute('data-showZoneId') === 'true'
-  const form = calendar.querySelector('.DateStringCalendarForm')
-
-  if (showDate) {
-    const dateElement = calendar.querySelector('.DateStringCalendarDate')
-    const dateInput = form.querySelector('input[name="date"]')
-
-    dateElement.querySelector('.Month-body').addEventListener('click', (e) => {
-      const cell = e.target.closest('.Month-day')
-      const selectedDate = cell.getAttribute('data-date')
-      dateInput.value = selectedDate
-      calendar.setAttribute('data-date', selectedDate)
-      calendar.querySelector('.is-selected')?.classList.remove('is-selected')
-      cell.classList.add('is-selected')
-
-      if (isWidgetEmbedded) {
-        updateEmbeddedCalendar(calendar, fieldReference)
-      }
-    })
-
-    form
-      .querySelector('.DateStringCalendarForm-previous')
-      .addEventListener('click', (e) => {
-        const input = e.target.querySelector('input')
-        input.value = true
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-      })
-
-    form
-      .querySelector('.DateStringCalendarForm-next')
-      .addEventListener('click', (e) => {
-        const input = e.target.querySelector('input')
-        input.value = true
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-      })
-  }
-
-  if (showTime) {
-    const timeElement = calendar.querySelector('.DateStringCalendarTime-custom')
-    const hourElement = timeElement.querySelector(
-      '.DateStringCalendarTime-hour',
-    )
-    const meridiemElement = timeElement.querySelector(
-      '.DateStringCalendarTime-meridiem',
-    )
-    const minuteElement = timeElement.querySelector(
-      '.DateStringCalendarTime-minute',
-    )
-    const secondElement = timeElement.querySelector(
-      '.DateStringCalendarTime-second',
-    )
-    const nanosecondElement = timeElement.querySelector(
-      '.DateStringCalendarTime-nanosecond',
-    )
-    const zoneOffsetElement = timeElement.querySelector(
-      '.DateStringCalendarTime-zoneOffset',
-    )
-    const zoneIdElement = timeElement.querySelector(
-      '.DateStringCalendarTime-zoneId',
-    )
-
-    // reset nanosecond to zero if a user selects a new second.
-    secondElement.addEventListener(
-      'change',
-      () => (nanosecondElement.value = 0),
-    )
-
-    const handleTimeChange = () => {
-      const meridiem = meridiemElement.value
-      let hourValue = parseInt(hourElement.value)
-
-      if (meridiem === 'pm') {
-        hourValue = hourValue + 12
-      }
-      const hour = hourValue.toString().padStart(2, '0')
-      const minute = minuteElement.value.padStart(2, '0')
-      const second = secondElement.value.padStart(2, '0')
-      const selectedTime = `${hour}:${minute}:${second}.${nanosecondElement.value}`
-      calendar.setAttribute('data-time', selectedTime)
-
-      if (showZoneOffset) {
-        calendar.setAttribute('data-zoneOffset', zoneOffsetElement.value)
-      } else if (showZoneId) {
-        calendar.setAttribute('data-zoneId', zoneIdElement.value)
-      }
-
-      if (showDate) {
-        const timeInput = form.querySelector('input[name="time"]')
-        timeInput.value = selectedTime
-
-        if (showZoneOffset) {
-          const zoneOffsetInput = form.querySelector('input[name="zoneOffset"]')
-          zoneOffsetInput.value = zoneOffsetElement.value
-        } else if (showZoneId) {
-          const zoneIdInput = form.querySelector('input[name="zoneId"]')
-          zoneIdInput.value = zoneIdElement.value
-        }
-      }
-
-      if (isWidgetEmbedded) {
-        updateEmbeddedCalendar(calendar, fieldReference)
-      }
-    }
-
-    timeElement.addEventListener('change', handleTimeChange)
-
-    // common times
-    const commonTimeElement = calendar.querySelector(
-      '.DateStringCalendarTime-common',
-    )
-
-    if (commonTimeElement) {
-      commonTimeElement.addEventListener('change', (e) => {
-        const selectedCommonTime = e.target.selectedOptions[0].value
-
-        if (e.target.selectedOptions[0].value === '_custom') {
-          timeElement.classList.remove('is-hidden')
-          handleTimeChange()
-        } else {
-          timeElement.classList.add('is-hidden')
-          calendar.setAttribute('data-time', selectedCommonTime)
-
-          if (showDate) {
-            const timeInput = form.querySelector('input[name="time"]')
-            timeInput.value = selectedCommonTime
-          }
-
-          if (isWidgetEmbedded) {
-            updateEmbeddedCalendar(calendar, fieldReference)
-          }
-        }
-      })
-    }
-  }
-
-  if (isWidgetEmbedded) {
-    updateEmbeddedCalendar(calendar, fieldReference)
-  } else {
-    calendar
-      .querySelector('.DateStringCalendarAction-clear')
-      .addEventListener('click', (e) =>
-        updateDateField(calendar, fieldReference, true),
-      )
-
-    calendar
-      .querySelector('.DateStringCalendarAction-set')
-      .addEventListener('click', (e) =>
-        updateDateField(calendar, fieldReference),
-      )
-  }
-
-  calendar
-    .querySelector('.DateStringCalendarAction-now')
-    .addEventListener('click', (e) => {
-      let input
-
-      if (showDate) {
-        const dateInput = form.querySelector('input[name="date"]')
-        dateInput.value = null
-        const renderYearInput = form.querySelector('input[name="renderYear"]')
-        renderYearInput.value = null
-        const renderMonthInput = form.querySelector(
-          'select[name="renderMonth"]',
-        )
-        renderMonthInput.value = null
-        input = dateInput
-      }
-
-      if (showTime) {
-        const timeInput = form.querySelector('input[name="time"]')
-        timeInput.value = null
-
-        if (showZoneOffset) {
-          const zoneOffsetInput = form.querySelector('input[name="zoneOffset"]')
-          zoneOffsetInput.value = null
-        } else if (showZoneId) {
-          const zoneIdInput = form.querySelector('input[name="zoneId"]')
-          zoneIdInput.value = null
-        }
-
-        input = timeInput
-      }
-
-      input.dispatchEvent(new Event('change', { bubbles: true }))
-    })
-}