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

package/src/legacy/tool-ui/src/main/webapp/script/v3/content/state.js

@@ -1,785 +0,0 @@
-define(['jquery', '../../bsp-utils'], function ($, bspUtils) {
-  bspUtils.onDomInsert(document, '.message', {
-    insert: function (message) {
-      var $message = $(message)
-
-      if (
-        $message.text() === '' &&
-        $message.find('[data-dynamic-html], [data-dynamic-text]').length > 0
-      ) {
-        $message.hide()
-      }
-    },
-  })
-
-  $(document).on(
-    'change input',
-    '.contentForm .inputContainer, .standardForm .inputContainer, .enhancementForm .inputContainer',
-    function (event) {
-      $(event.target)
-        .closest('.inputContainer:not(.is-multiInputs)')
-        .attr('data-interacted', true)
-    },
-  )
-
-  bspUtils.onDomInsert(
-    document,
-    '.contentForm, .enhancementForm, .standardForm, .StandardForm',
-    {
-      insert: function (form) {
-        var $form = $(form)
-        var $wipSaveStatus = $form.find(
-          '.widget-publishing > .icon-action-publish > .WorkInProgressSaveStatus',
-        )
-        var wipEnabled
-        var wipSavingMessage
-
-        var differentInitialFields = $form
-          .find('input[name="_differentInitialFields"]')
-          .val()
-
-        if (differentInitialFields) {
-          differentInitialFields = JSON.parse(differentInitialFields)
-
-          if (differentInitialFields) {
-            bspUtils.onDomInsert(form, '.objectInputs', {
-              insert: function (inputs) {
-                var $inputs = $(inputs)
-                var fields =
-                  differentInitialFields[$inputs.attr('data-object-id')]
-
-                if (fields) {
-                  $.each(fields, function (i, field) {
-                    $inputs
-                      .find('.inputContainer[data-field-name="' + field + '"]')
-                      .attr('data-interacted', true)
-                  })
-                }
-              },
-            })
-          }
-        }
-
-        if ($form.is('.contentForm')) {
-          $form.one('change input', function () {
-            wipEnabled = true
-          })
-        }
-
-        // Triggers an event that results in an update call, in case the state is outdated upon returning to a window.
-        document.addEventListener('visibilitychange', () => {
-          if (document.visibilityState !== 'visible') return
-          $(document)
-            .find('.contentForm, .enhancementForm, .standardForm')
-            .trigger('change')
-        })
-
-        let lastUpdateTime = 0
-        let updateRunning
-
-        function update(rerunning) {
-          // Avoids an unnecessary update when the user is not actively using the window.
-          if (document.visibilityState !== 'visible') {
-            return
-          }
-
-          // Avoids an unnecessary update when the pre-publish dialog is open.
-          if (document.querySelector('.PrePublish.Popup.is-visible')) {
-            return
-          }
-
-          updateRunning = true
-
-          var action = $form.attr('action')
-          var questionAt = action.indexOf('?')
-          // var end = +new Date() + 1000
-          var $dynamicTexts = $form.find(
-            '[data-dynamic-text]:not([data-dynamic-text=""]),' +
-              '[data-dynamic-html]:not([data-dynamic-html=""]),' +
-              '[data-dynamic-preview]:not([data-dynamic-preview=""]),' +
-              '[data-dynamic-placeholder]:not([data-dynamic-placeholder=""]),' +
-              '[data-dynamic-predicate]:not([data-dynamic-predicate=""]),' +
-              '[data-dynamic-searcher-path]:not([data-dynamic-searcher-path=""]),' +
-              '[data-dynamic-value-generator]:not([data-dynamic-value-generator=""])',
-          )
-
-          $dynamicTexts = $dynamicTexts.filter(function () {
-            return $(this).closest('.contentDiffCurrent').length === 0
-          })
-
-          var fieldNames = {}
-
-          $form.find('.objectInputs').each(function () {
-            var $inputs = $(this)
-
-            fieldNames[$inputs.attr('data-object-id')] = $.makeArray(
-              $inputs
-                .find('> .inputContainer:not(.is-readOnly)')
-                .map(function () {
-                  return $(this).attr('data-field-name')
-                }),
-            )
-          })
-
-          if (wipSavingMessage && $wipSaveStatus) {
-            $wipSaveStatus.text(wipSavingMessage)
-          }
-
-          // Javascript and jQuery utilities will both convert LF (newline) into CRLF, so with
-          // textarea fields reset to the raw value of the field to preserve.
-          const formData = new FormData(form)
-          formData.forEach((v, k) => {
-            if (v instanceof File) {
-              formData.delete(k)
-              return
-            }
-            let field = form.querySelector(`[name="${k}"]`)
-            if (field.nodeName === 'TEXTAREA') {
-              formData.set(k, field.value)
-            }
-          })
-
-          const updateTime = +new Date()
-
-          $.ajax({
-            type: 'post',
-            url:
-              CONTEXT_PATH +
-              'contentState?wip=' +
-              wipEnabled +
-              '&wipContentUpdateDate=' +
-              $form.attr('data-content-update-date') +
-              '&idle=true' +
-              (questionAt > -1 ? '&' + action.substring(questionAt + 1) : ''),
-            cache: false,
-            dataType: 'json',
-
-            // If we are looking at a content update, then the current state (for viewing the diff) resides in the form
-            // as well. We need to remove that from the form post or it messes up the dynamic values that return.
-            data:
-              new URLSearchParams(formData).toString() +
-              '&_fns=' +
-              encodeURIComponent(JSON.stringify(fieldNames)) +
-              $dynamicTexts
-                .map(function () {
-                  var $element = $(this)
-
-                  return (
-                    '&_dti=' +
-                    encodeURIComponent(
-                      $element
-                        .closest('[data-object-id]')
-                        .attr('data-object-id') || '',
-                    ) +
-                    '&_dtt=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-text') ||
-                        $element.attr('data-dynamic-html') ||
-                        $element.attr('data-dynamic-preview') ||
-                        $element.attr('data-dynamic-placeholder') ||
-                        '',
-                    ) +
-                    '&_dth=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-hash') || '',
-                    ) +
-                    '&_dtf=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-field-name') ||
-                        $element
-                          .closest('[data-field-name]')
-                          .attr('data-field-name') ||
-                        '',
-                    ) +
-                    '&_dtq=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-predicate') || '',
-                    ) +
-                    '&_dts=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-searcher-path') || '',
-                    ) +
-                    '&_dvg=' +
-                    encodeURIComponent(
-                      $element.attr('data-dynamic-value-generator') || '',
-                    ) +
-                    '&_dfi=' +
-                    encodeURIComponent(
-                      $element
-                        .siblings('.ComboInput')
-                        .children('.ComboInput-filter')
-                        .val() || '',
-                    )
-                  )
-                })
-                .get()
-                .join(''),
-
-            success: function (data) {
-              if (lastUpdateTime < updateTime) {
-                lastUpdateTime = updateTime
-              } else {
-                return
-              }
-
-              if (!data) {
-                return
-              }
-
-              // Guards against Rich Text Element implementations improperly returning UUIDs in preview markup.
-              // Usually in the form of serialized State data. Doing so can cause always unique preview strings.
-              const idPattern =
-                /&quot;_id&quot;:&quot;[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}&quot;/g
-
-              if (wipEnabled && $wipSaveStatus) {
-                var wipMessage = data._wip
-
-                if (wipMessage) {
-                  var wipSaving = data._wipSaving
-                  if (wipSaving) {
-                    wipSavingMessage = wipSaving
-                  }
-
-                  $wipSaveStatus.removeAttr('data-status')
-                  $wipSaveStatus.text(wipMessage)
-
-                  const wipTitle = data._wipTitle
-                  if (wipTitle) {
-                    $wipSaveStatus.attr('title', wipTitle)
-                  }
-
-                  const wipStatus = data._wipStatus
-                  if (wipStatus === 'deleted') {
-                    wipSavingMessage = null
-                  }
-
-                  setTimeout(function () {
-                    $wipSaveStatus.attr('data-status', wipStatus)
-                    if (wipStatus === 'saved') {
-                      $wipSaveStatus.removeAttr('inert')
-                    }
-                  }, 0)
-                }
-              }
-
-              for (const { type, id, field, body } of data._dynamic || []) {
-                if (field) {
-                  const $row = $form.find(
-                    `.CIG[data-id="${id}"] > .CIG-row[data-field-name="${field}"]`,
-                  )
-
-                  if ($row.length === 0) {
-                    continue
-                  }
-
-                  if (type === 'field') {
-                    const hash = $row.attr('data-hash')
-                    const $newRow = $(body)
-                    const newHash = $newRow.attr('data-hash')
-
-                    if (hash !== newHash) {
-                      // Is tab inactive?
-                      if ($row.hasClass('TC-unselected')) {
-                        $newRow.addClass('TC-unselected')
-                      } else {
-                        $newRow.removeClass('TC-unselected')
-                      }
-
-                      // Is cluster collapsed?
-                      if ($row.hasClass('is-inHiddenCluster')) {
-                        $newRow.addClass('is-inHiddenCluster')
-                      }
-
-                      // Remove cluster name
-                      $newRow.children('h2').remove()
-
-                      $newRow.attr(
-                        'data-interacted',
-                        $row.attr('data-interacted'),
-                      )
-
-                      $row.after($newRow)
-                      $row.remove()
-                      $newRow.trigger('create')
-                    }
-                  } else if (type === 'note') {
-                    const $noteElement = $row.find('> .CIG-note.dynamic-note')
-                    const previousText = $noteElement.attr('data-previous-text')
-                    const hasNoteChanged = previousText !== body
-                    const shouldRemoveNote = !body
-
-                    if (hasNoteChanged || shouldRemoveNote) {
-                      $noteElement.remove()
-                    }
-
-                    if (!shouldRemoveNote && hasNoteChanged) {
-                      const $newNote = $(body).attr('data-previous-text', body)
-                      $row
-                        .find('> .CIG-small, > .CIG-large')
-                        .first()
-                        .before($newNote)
-                    }
-                  } else if (type === 'placeholder') {
-                    const input = $row.find('.CIG-placeholder')[0]
-
-                    if (!input) {
-                      continue
-                    }
-
-                    const dataset = input.dataset
-                    const placeholderContainer =
-                      input.tagName === 'SELECT' ? dataset : input
-                    const placeholder = placeholderContainer.placeholder
-
-                    if (!dataset.previousPlaceholder) {
-                      dataset.previousPlaceholder = placeholder
-                    }
-
-                    if (
-                      (placeholder && placeholder.replaceAll(idPattern, '')) !==
-                      body.replaceAll(idPattern, '')
-                    ) {
-                      dataset.previousPlaceholder = placeholder
-                      placeholderContainer.placeholder = body
-                      const clearOnChange =
-                        dataset.placeholderClearOnChange === 'true'
-
-                      if (clearOnChange || body === input.value) {
-                        input.value = ''
-                      }
-
-                      $(input).trigger('placeholderUpdate', {
-                        clearOnChange,
-                      })
-                    }
-                  }
-                } else if (type === 'note') {
-                  const $group = $form.find(`.CIG[data-id="${id}"]`)
-                  const $noteElement = $group.find(
-                    '> .CIG-note.dynamic-note, > .Message',
-                  )
-                  const previousText = $noteElement.attr('data-previous-text')
-                  const hasNoteChanged =
-                    previousText !== body &&
-                    $noteElement[0]?.hasAttribute('data-previous-text')
-                  const isGroupEmpty = $group.children().length === 0
-                  const shouldRemoveNote = !body
-
-                  if (hasNoteChanged || shouldRemoveNote) {
-                    $noteElement.remove()
-                  }
-
-                  if (!shouldRemoveNote && hasNoteChanged) {
-                    const $newNote = $(body).attr('data-previous-text', body)
-                    const message = $newNote[0].querySelector(
-                      '.Message:not(:has(.Message-icon))',
-                    )
-                    if (message) {
-                      const icon = document.createElement('span')
-                      icon.className = 'Message-icon'
-                      icon.setAttribute('aria-hidden', 'true')
-                      message.append(icon)
-                    }
-                    $group.removeClass('is-empty').prepend($newNote)
-                  }
-
-                  if (isGroupEmpty && shouldRemoveNote) {
-                    $group.addClass('is-empty')
-                  }
-                }
-              }
-
-              let rerun = false
-
-              $dynamicTexts.each(function (index) {
-                var $element = $(this)
-                var text = data._dynamicTexts[index]
-
-                if (text.indexOf('data-dynamic-') > -1) {
-                  rerun = true
-                }
-
-                var dynamicPredicate = data._dynamicPredicates[index]
-                var dynamicSearcherPath = data._dynamicSearcherPaths[index]
-                var refreshObjectId = false
-
-                if (
-                  $element.attr('data-placeholder-clear-on-change') === 'true'
-                ) {
-                  var oldClearKey = $element.attr('data-old-clear-key')
-                  var newClearKey = text || 'null'
-
-                  if (!oldClearKey) {
-                    $element.attr('data-old-clear-key', newClearKey)
-                  } else if (oldClearKey !== newClearKey) {
-                    $element.attr('data-old-clear-key', newClearKey)
-
-                    if ($element.is('input, select, textarea')) {
-                      var rte = $element.data('rte2')
-
-                      if (rte) {
-                        rte.fromHTML('')
-                      }
-
-                      $element.val('')
-                      $element.change()
-                    }
-                  }
-                }
-
-                if ($element.is('[data-dynamic-searcher-path]')) {
-                  $element.attr('data-searcher-path', dynamicSearcherPath)
-                  refreshObjectId = true
-                }
-
-                if ($element.is('[data-dynamic-predicate]')) {
-                  $element.attr('data-additional-query', dynamicPredicate)
-                  $element.trigger('input-disable', false)
-                  refreshObjectId = true
-                }
-
-                if (refreshObjectId) {
-                  $element.trigger('refresh.objectId')
-                }
-
-                // If text is missing set to empty to compare & replace below
-                if (text === null) {
-                  text = ''
-                }
-
-                $element.closest('.message').toggle(text !== '')
-
-                var $previousText = $element.attr('data-previous-text')
-
-                // Replace only when text has changed
-                if (
-                  $previousText === null ||
-                  ($previousText !== text &&
-                    $element.closest('.is-removing').length === 0)
-                ) {
-                  if ($element.is('[data-dynamic-text]')) {
-                    $element.text(text)
-                  } else if ($element.is('[data-dynamic-html]')) {
-                    // support legacy dynamic note html
-                    var $legacyDynamicTextWrapper = $element.parent()
-
-                    if (
-                      $legacyDynamicTextWrapper
-                        .parent()
-                        .hasClass('CIG-noteItem')
-                    ) {
-                      if (text) {
-                        $legacyDynamicTextWrapper.addClass('Message is-info')
-                      } else {
-                        $legacyDynamicTextWrapper.removeClass('Message is-info')
-                      }
-                    }
-                    $element.html(text)
-                  } else if ($element.is('[data-dynamic-preview]')) {
-                    $element.attr('src', text)
-
-                    // Trigger an imageUpdate event so other code can update appropriate elements
-                    // (Used by repeatable plugin)
-                    $element.trigger('imageUpdate')
-                  } else if ($element.is('[data-dynamic-placeholder]')) {
-                    $element.attr('placeholder', text)
-
-                    // Trigger a placeholderUpdate event so other code can listen for placeholder changes
-                    // (used by the rich text editor).
-                    // Note: originally called this event 'placeholder' but that caused a jquery error for some reason,
-                    // so using placeholderUpdate instead.
-                    if (!$element.val()) {
-                      $element.trigger('placeholderUpdate')
-                    }
-                  }
-                }
-
-                $element.attr('data-previous-text', text)
-
-                // Populate dynamic values
-                if ($element.is('[data-dynamic-value-generator]')) {
-                  const selectElement = $element.get(0)
-                  const allOptions = [...selectElement.options]
-                  const oldValues = new Set(allOptions.map((e) => e.value))
-                  const oldLabels = new Set(allOptions.map((e) => e.label))
-                  const dynamicValue = data._dynamicValues[index]
-                  const newValues = new Set(dynamicValue.map((e) => e.value))
-                  const newLabels = new Set(dynamicValue.map((e) => e.label))
-
-                  // At this point, we don't update options for multiple select
-                  // if there's no changes between old and new options as options may be visible to users.
-                  if (
-                    !selectElement.multiple ||
-                    oldValues.size != newValues.size ||
-                    oldLabels.size != newLabels.size ||
-                    [...oldValues].filter((e) => !newValues.has(e)).length ||
-                    [...oldLabels].filter((e) => !newLabels.has(e)).length
-                  ) {
-                    if (selectElement.multiple) {
-                      const values = new Set()
-                      const listId =
-                        selectElement?.nextElementSibling?.getAttribute(
-                          'aria-owns',
-                        )
-                      const list = document.querySelectorAll(`#${listId} li`)
-
-                      if (list.length !== 0) {
-                        list.forEach((li) => {
-                          if (li.getAttribute('aria-selected') === 'true') {
-                            values.add(li.getAttribute('data-value'))
-                          }
-                        })
-
-                        for (const option of allOptions) {
-                          option.selected = values.has(option.value)
-                        }
-                      }
-                    }
-
-                    const selectedOptions = [...selectElement.selectedOptions]
-
-                    // remove existing Optgroups and Options
-                    selectElement
-                      .querySelectorAll('optgroup')
-                      .forEach((optGroup) => {
-                        optGroup.remove()
-                      })
-                    selectElement
-                      .querySelectorAll('option')
-                      .forEach((option) => {
-                        option.remove()
-                      })
-
-                    selectedOptions.forEach((e) => selectElement.add(e))
-                    const selectedValues = selectedOptions.map((e) => e.value)
-
-                    // instantiate map to store group name with list of Options in that group
-                    let optGroupMap = new Map([
-                      [String.prototype, [String.prototype]],
-                    ])
-
-                    dynamicValue.forEach((dv) => {
-                      const value = dv.value
-                      let group = dv.group
-                      // format the group name
-                      if (group == null) {
-                        group = ''
-                      } else {
-                        group = group.toLowerCase()
-                      }
-                      const optionIndex = selectedValues.indexOf(value)
-                      let option
-
-                      if (optionIndex > -1) {
-                        // find the existing selected Option
-                        option = selectedOptions[optionIndex]
-                      } else {
-                        // create a new Option
-                        option = new Option()
-                        option.value = value
-                        option.setAttribute('data-source', group)
-                      }
-
-                      // add the Option to map based on group name
-                      if (optGroupMap.has(group)) {
-                        optGroupMap.get(group).push(option)
-                      } else {
-                        optGroupMap.set(group, [option])
-                      }
-
-                      if (dv.labelHtml) {
-                        option.setAttribute('data-drop-down-html', dv.labelHtml)
-                      } else {
-                        option.innerText = dv.label
-                      }
-                    })
-
-                    // add all the no-group options to the Select first
-                    // sort the Options list to put the selected one(s) first
-                    const noGroupOptions = optGroupMap.get('')
-                    if (noGroupOptions) {
-                      const sortedNoGroupOptions = [
-                        ...noGroupOptions.filter((option) => !option.value),
-                        ...noGroupOptions.filter(
-                          (option) => option.value && option.selected,
-                        ),
-                        ...noGroupOptions.filter(
-                          (option) => option.value && !option.selected,
-                        ),
-                      ]
-                      for (const noGroupOption of sortedNoGroupOptions) {
-                        selectElement.add(noGroupOption)
-                      }
-                    }
-
-                    // add the rest of the groups to the Select
-                    for (let [groupName, options] of optGroupMap) {
-                      if (groupName != '') {
-                        let optGroup = document.createElement('optgroup')
-                        optGroup.label = groupName
-                        optGroup.setAttribute('value', groupName)
-                        if (selectElement.multiple) {
-                          optGroup.setAttribute('data-select-option', 'some')
-                        }
-                        // sort the Options list to put the selected one(s) first
-                        const sortedOptions = [
-                          ...options.filter((option) => option.selected),
-                          ...options.filter((option) => !option.selected),
-                        ]
-                        for (const option of sortedOptions) {
-                          optGroup.append(option)
-                        }
-                        selectElement.add(optGroup)
-                      }
-                    }
-                  }
-                }
-              })
-
-              // Highlight fields that have changed.
-              const diffs = $.extend(
-                true,
-                {},
-                data._differences,
-                data._hiddenDifferences,
-              )
-
-              if (diffs) {
-                let $containers = $()
-                let $changed = $()
-
-                $containers = $containers.add($form.find('.inputContainer'))
-                $containers = $containers.add(
-                  $form.find(
-                    '.repeatableForm > ol > li, .repeatableForm > ul > li',
-                  ),
-                )
-
-                $.each(diffs, function (id, fields) {
-                  if (fields.length === 0) {
-                    return
-                  }
-
-                  var $inputs = $form.find(
-                    '.objectInputs[data-object-id="' + id + '"]',
-                  )
-
-                  $.each(fields, function (name) {
-                    var $inputContainer = $inputs
-                      .find(
-                        '.inputContainer[data-field-name="' +
-                          name +
-                          '"][data-interacted]',
-                      )
-                      .closest('.inputContainer:not(.inputContainer-unlabeled)')
-
-                    $changed = $changed.add($inputContainer)
-
-                    var $inputGroup = $inputContainer.closest('.EIG')
-                    if ($inputGroup) {
-                      $changed = $changed.add(
-                        $inputGroup.closest(
-                          '.inputContainer:not(.inputContainer-unlabeled)',
-                        ),
-                      )
-                    }
-                  })
-
-                  var $li = $inputs.closest('li')
-
-                  if (
-                    $changed.length > 0 &&
-                    $li.parent().parent().is('.repeatableForm')
-                  ) {
-                    $changed = $changed.add($li)
-                  }
-                })
-
-                $containers.not($changed).removeClass('state-changed')
-                $changed.addClass('state-changed')
-                $form.trigger('content-state-differences')
-              }
-
-              $form.resize()
-
-              if (!rerunning && rerun) {
-                update(true)
-              }
-
-              $form.trigger('cms-updateContentState', [data])
-
-              const oldState = $form.data('brightspot-content-state')
-
-              const newState = JSON.stringify(data.state, function (k, v) {
-                if (
-                  v === null ||
-                  v === false ||
-                  (Array.isArray(v) && v.length === 0) ||
-                  (v && typeof v === 'object' && Object.keys(v).length === 0)
-                ) {
-                  return undefined
-                } else {
-                  return v
-                }
-              })
-
-              if (oldState !== newState) {
-                $form.data('brightspot-content-state', newState)
-
-                if (oldState) {
-                  $form[0].dispatchEvent(
-                    new CustomEvent('brightspot-content-state-change', {
-                      bubbles: true,
-                      detail: newState,
-                    }),
-                  )
-                }
-              }
-            },
-
-            complete: function () {
-              updateRunning = false
-            },
-          })
-        }
-
-        let timeoutId
-        let waitingId
-
-        $form.bind('create change input', ({ type, target }) => {
-          let run = !target.classList.contains('ComboInput-filter')
-          const ci = target.closest('.ComboInput')
-
-          if (ci) {
-            const input = ci.parentNode.querySelector('select')
-
-            if (input) {
-              // Value generated inputs should always trigger an update.
-              run = !!input.dataset.dynamicValueGenerator && type === 'input'
-            }
-          }
-
-          if (run) {
-            if (updateRunning) {
-              if (!waitingId) {
-                waitingId = setInterval(() => {
-                  if (!updateRunning) {
-                    clearInterval(waitingId)
-                    waitingId = null
-                    update()
-                  }
-                }, 20)
-              }
-            } else {
-              clearTimeout(timeoutId)
-              timeoutId = setTimeout(update, type === 'change' ? 100 : 500)
-            }
-          }
-        })
-
-        $wipSaveStatus.click(update)
-        update()
-      },
-    },
-  )
-})