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

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

@@ -0,0 +1,785 @@
+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()
+      },
+    },
+  )
+})