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

package/src/legacy/tool-ui/src/main/webapp/script/v3/input/object.js

@@ -1,743 +0,0 @@
-define(['jquery', '../../jquery.extra', '../plugin/popup'], function ($) {
-  var refresh
-  var SHADOW_DATA = 'objectId-shadow'
-  var TARGET_DATA = 'objectId-target'
-  var targetIndex = 0
-  const tooltips = window.BRIGHTSPOT?.ui.tooltips
-
-  refresh = function ($inputs) {
-    $inputs.each(function () {
-      var $input = $(this)
-      var shadow = $.data(this, SHADOW_DATA)
-      var $select
-      var $edit
-      var $clear
-      var preview
-      var labelHtml
-      var dynamicPlaceholderText
-      var dynamicFieldName
-      // var isReadOnly
-      var placeholder
-      var value
-      var selectHref
-      var aqParam
-      var searcherPath
-
-      if (!shadow) {
-        return
-      }
-
-      $select = shadow.$select
-      $edit = shadow.$edit
-      $clear = shadow.$clear
-      preview = $input.attr('data-preview')
-      labelHtml = $input.attr('data-label-html') || $input.attr('data-label')
-      value = $input.val()
-
-      if (preview) {
-        if ($input.attr('data-image-metadata-overridable') === 'true') {
-          var inputName,
-            params,
-            typeId,
-            objectId,
-            fieldName,
-            $inputWrapper,
-            inputVal
-
-          $input.parent().attr('data-image-editor', true)
-
-          $select.html(
-            $('<span/>', {
-              html: labelHtml,
-            }),
-          )
-
-          inputName = $input.closest('.inputContainer').attr('data-name')
-          fieldName = $input.closest('.inputContainer').attr('data-field-name')
-
-          if ($input.parent().prop('tagName') === 'LI') {
-            inputName = preview
-          }
-
-          typeId = $input.closest('.objectInputs').attr('data-type-id')
-          objectId = $input.closest('.objectInputs').attr('data-object-id')
-
-          if (
-            $input.parents('.Popup').length > 0 &&
-            (typeId === null || objectId == null)
-          ) {
-            typeId = document
-              .querySelector('.ContentEdit')
-              .getAttribute('data-type-id')
-            objectId = document
-              .querySelector('.ContentEdit')
-              .getAttribute('data-object-id')
-          }
-
-          $inputWrapper = $input.closest('.inputSmall')
-          inputVal = $input.val()
-
-          //Only update image editor if it doesn't already exist
-          if (
-            !$inputWrapper.find('[data-editor-file-source="' + inputVal + '"]')
-              .length
-          ) {
-            params = {
-              inputName: inputName,
-              typeId: typeId,
-              objectId: objectId,
-              value: inputVal,
-              fieldName: fieldName,
-            }
-
-            $.ajax({
-              url: window.CONTEXT_PATH + 'content/field/image-editor',
-              type: 'POST',
-              dataType: 'html',
-              data: params,
-              error: function (request, status, error) {
-                const errorContainer = document.createElement('div')
-                errorContainer.classList.add('message')
-                errorContainer.classList.add('message-info')
-                errorContainer.innerText =
-                  'Image Editor could not be loaded due to: ' + error
-                $input.closest('.inputContainer').prepend(errorContainer)
-
-                var $caption = $('<figcaption>', {
-                  html: labelHtml,
-                })
-
-                $select.html(
-                  $('<figure/>', {
-                    html: [
-                      $('<img/>', {
-                        src: preview,
-                        alt: $caption.text(),
-                      }),
-                      $caption,
-                    ],
-                  }),
-                )
-              },
-            }).done(function (htmlResponse) {
-              // If the response is empty for the contextual image editor tool page call
-              // then use the existing preview url in the state
-              if (!htmlResponse) {
-                // Prevents an issue where appended image previews for the shared lead
-                // were not clearing when another selection was made
-                $input.parent().find('> .ImageEditor-container')?.remove()
-                $input.parent().append(
-                  $('<div/>', {
-                    class: 'ImageEditor-container',
-                  }).append(
-                    $('<figure/>', {
-                      html: [
-                        $('<img/>', {
-                          src: preview,
-                        }),
-                      ],
-                    }),
-                  ),
-                )
-                // Removing image editor controls
-                $input
-                  .parent()
-                  .find('> .ImageEditor-container')
-                  ?.removeAttr('data-image-editor')
-              } else {
-                $input.parent().find('> .ImageEditor-container')?.remove()
-                const imageContainer = $('<div/>', {
-                  class: 'ImageEditor-container',
-                }).attr('data-editor-file-source', inputVal)
-                imageContainer.append(htmlResponse)
-
-                if ($inputWrapper.children('ol').length > 0) {
-                  $input.closest('li').append(imageContainer)
-                } else {
-                  $inputWrapper.append(imageContainer)
-                }
-                $(imageContainer).trigger('create')
-              }
-            })
-          }
-        } else {
-          var $caption = $('<figcaption>', {
-            html: labelHtml,
-          })
-
-          $select.html(
-            $('<figure/>', {
-              html: [
-                $('<img/>', {
-                  src: preview,
-                }),
-                $caption,
-              ],
-            }),
-          )
-        }
-      } else {
-        if ($input.attr('data-image-metadata-overridable') === 'true') {
-          $input.parent().removeAttr('data-image-editor')
-          $input.parent().find('> .ImageEditor-container')?.remove()
-        }
-
-        placeholder = $input.attr('placeholder')
-
-        if (
-          $input.attr('data-is-grid-item') === 'true' &&
-          $input.parent('.RCS-item') &&
-          (labelHtml || placeholder)
-        ) {
-          const $caption = $('<div/>', {
-            class: 'RCS-caption',
-          })
-          if (labelHtml) {
-            $caption.append(labelHtml)
-          } else {
-            $caption.text($input.attr('placeholder').trim())
-          }
-
-          $select
-            .html(
-              $('<div/>', {
-                class: 'RCS-placeholderCard',
-              }),
-            )
-            .append($caption)
-        } else if (labelHtml) {
-          $select.html(labelHtml)
-        } else {
-          dynamicPlaceholderText = $input.attr('data-dynamic-placeholder')
-          dynamicFieldName = $input.attr('data-dynamic-field-name')
-
-          if (dynamicPlaceholderText) {
-            if ($select.find('> .ContentSelector-placeholder').length === 0) {
-              $select.html(
-                $('<span/>', {
-                  type: 'text',
-                  class: 'ContentSelector-placeholder',
-                  'data-dynamic-text': dynamicPlaceholderText,
-                  'data-dynamic-field-name': dynamicFieldName,
-                }),
-              )
-            }
-          } else if (placeholder) {
-            $select.html(
-              $('<span/>', {
-                class: 'ContentSelector-placeholder',
-                text: placeholder,
-              }),
-            )
-          } else {
-            $select.text('\u00a0')
-          }
-        }
-      }
-
-      searcherPath = $input.attr('data-searcher-path')
-
-      // update additional query parameter in select href
-      selectHref = $select.attr('href')
-
-      if (searcherPath) {
-        selectHref =
-          searcherPath +
-          (searcherPath.indexOf('?') > -1 ? '&' : '?') +
-          selectHref.substring(selectHref.indexOf('__'))
-      }
-
-      aqParam = $input.attr('data-additional-query')
-
-      if (aqParam) {
-        selectHref = addAdditionalQueryParameter(selectHref, aqParam)
-      }
-
-      $select.attr('href', selectHref)
-
-      const $combo = shadow.$combo
-
-      if ($combo) {
-        // Mirror the $select display.
-        let $mirror
-
-        if ($combo[0].options) {
-          const selected = $combo[0].options.selectedIndex
-          if ($combo[0].options[selected]) {
-            $input.attr(
-              'data-summary-url',
-              $combo[0].options[selected].getAttribute('data-summary-url'),
-            )
-          }
-        }
-
-        // Find the existing mirror and remove all options that may have the
-        // same value as the mirror.
-        $combo.find('> option').each(function () {
-          const $option = $(this)
-
-          if ($option.attr('data-mirror')) {
-            $mirror = $option
-          } else if ($option.prop('value') === value) {
-            $option.remove()
-          }
-        })
-
-        // Create the mirror if one doesn't exist already.
-        if (!$mirror) {
-          $mirror = $('<option/>', { 'data-mirror': '' })
-          $combo.prepend($mirror)
-        }
-
-        // Update the mirror to match the $select display.
-        $mirror.prop('value', value)
-        $mirror.text(value ? $select.text() : '')
-        if (value) {
-          $mirror.attr('data-can-favorite', true)
-          const matchingOptionElement = $mirror
-            .parent()
-            .find('option[value=' + value + ']:not([data-mirror])')[0]
-          if (matchingOptionElement) {
-            const typeIds = matchingOptionElement.getAttribute('data-typeids')
-            if (typeIds) {
-              $mirror.attr('data-typeids', typeIds)
-            }
-          }
-        }
-
-        if ($select[0].childElementCount > 0) {
-          $mirror.attr('data-label-html', $select.html())
-        }
-
-        // And make sure that the mirror is always selected.
-        $combo.val(value)
-
-        if (aqParam) {
-          const optionsUrl = $combo.attr('data-options-url')
-
-          if (optionsUrl) {
-            $combo.attr(
-              'data-options-url',
-              addAdditionalQueryParameter(optionsUrl, aqParam),
-            )
-          }
-        }
-      }
-
-      $edit.toggleClass('is-visible', $input.attr('data-editable') !== 'false')
-      $edit.toggleClass('is-disabled', !value)
-      // If the edit button should be disabled, it should also not be tabbable.
-      if (!value) {
-        $edit.attr('tabindex', '-1')
-      } else {
-        $edit.attr('tabindex', '0')
-      }
-
-      $clear.toggleClass(
-        'is-visible',
-        $clear.is('.restore') ||
-          ($input.attr('data-clearable') !== 'false' &&
-            $input.closest('.repeatableObjectId').length === 0 &&
-            !!value &&
-            !$clear.hasClass('state-disabled')),
-      )
-
-      $edit.attr(
-        'href',
-        CONTEXT_PATH +
-          'content/edit.jsp' +
-          '?id=' +
-          (value || '') +
-          '&' +
-          ((/[&?](overlayId=[^&]+)/.exec(window.location.search) || [])[1] ||
-            ''),
-      )
-    })
-
-    function addAdditionalQueryParameter(url, aqValue) {
-      const queryParamsAt = url.indexOf('?')
-      let path
-      let queryString
-
-      if (queryParamsAt > -1) {
-        path = url.substring(0, queryParamsAt)
-        queryString = url.substring(queryParamsAt)
-      } else {
-        path = url
-        queryString = ''
-      }
-
-      const urlSearchParams = new URLSearchParams(queryString)
-
-      urlSearchParams.set('aq', aqValue)
-      return path + '?' + urlSearchParams.toString()
-    }
-  }
-
-  function initInputDisable(element) {
-    // Mark the input as something that can be locked or disabled
-    element.addClass('event-input-disable')
-
-    // If the "input-disable" event is triggered, then add or remove a class
-    element.bind('input-disable', function (event, disable) {
-      $(event.target)
-        .closest('.inputContainer')
-        .toggleClass('state-disabled', disable)
-    })
-  }
-
-  // update custom objectId-select(s) statically created i.e. embedded content
-  const updateCustomSelects = (target, selector) => {
-    target
-      .querySelectorAll(selector)
-      .forEach((link) =>
-        link.setAttribute('target', `objectId-${targetIndex}-select`),
-      )
-  }
-
-  $.plugin2('objectId', {
-    _init: function (selector) {
-      this.$caller.on('change.objectId', selector, function () {
-        refresh($(this))
-      })
-
-      this.$caller.on('refresh.objectId', selector, function () {
-        refresh($(this))
-      })
-    },
-
-    _create: function (input) {
-      var $input,
-        $form,
-        target,
-        typeIds,
-        formAction,
-        $select,
-        $edit,
-        $clear,
-        shadow
-
-      if ($.data(input, SHADOW_DATA)) {
-        return
-      }
-
-      $input = $(input)
-      $form = input.form ? $(input.form) : $input.closest('form')
-
-      // Don't init twice for repeatable inputs
-      const $container = $input.closest('.inputContainer')
-      if ($container[0] && !($container[0].dataset.type === 'list/record')) {
-        initInputDisable($input)
-      }
-
-      if (
-        $input.attr('data-dynamic-predicate') &&
-        !$input.attr('data-additional-query')
-      ) {
-        $input.trigger('input-disable', true)
-      }
-
-      // Make sure that there's only one frame target per form.
-      target = $.data($form[0], TARGET_DATA)
-
-      if (!target) {
-        ++targetIndex
-        target = 'objectId-' + targetIndex
-        $.data($form[0], TARGET_DATA, target)
-      }
-
-      var genericArgumentIndex = $input.attr('data-generic-argument-index')
-      var genericArguments = $input
-        .closest('[data-generic-arguments]')
-        .attr('data-generic-arguments')
-
-      if (genericArgumentIndex && genericArguments) {
-        typeIds = genericArguments.split(',')[genericArgumentIndex]
-      }
-
-      if (!typeIds) {
-        typeIds = $input.attr('data-typeIds')
-      }
-
-      var excludedTypeIds = $input.attr('data-typeIds-exclude')
-
-      formAction = $form.attr('action')
-
-      const searcherPath =
-        $input.attr('data-searcher-path') ||
-        CONTEXT_PATH + 'content/objectId.jsp'
-
-      const searcherQueryString =
-        '__=&pt=' +
-        encodeURIComponent((/id=([^&]+)/.exec(formAction) || [])[1] || '') +
-        '&py=' +
-        encodeURIComponent((/typeId=([^&]+)/.exec(formAction) || [])[1] || '') +
-        '&p=' +
-        encodeURIComponent($input.attr('data-pathed')) +
-        '&' +
-        (typeIds
-          ? $.map(typeIds.split(','), function (typeId) {
-              return 'rt=' + typeId
-            }).join('&')
-          : '') +
-        '&' +
-        (excludedTypeIds
-          ? $.map(excludedTypeIds.split(','), function (typeId) {
-              return 'et=' + typeId
-            }).join('&')
-          : '') +
-        '&aq=' +
-        encodeURIComponent($input.attr('data-additional-query') || '') +
-        '&sg=' +
-        encodeURIComponent($input.attr('data-suggestions') || '') +
-        '&udde=' +
-        encodeURIComponent(
-          $input.attr('data-use-default-database-environment') || '',
-        ) +
-        '&empty=' +
-        ($input[0].dataset.dropDownOnly === 'true') +
-        '&os=true'
-
-      const CSQ_PAGE_PATH =
-        window.BRIGHTSPOT.web.pagePaths[
-          'com.psddev.cms.tool.page.ContentSelectorQuick'
-        ]
-
-      const isReadOnlyChild = $input.closest('.is-readOnly').length
-        ? 'is-readOnly'
-        : ''
-
-      const $combo =
-        $input.attr('data-previewable') !== 'true'
-          ? $('<select/>', {
-              id: $input.attr('id') || undefined,
-              'aria-invalid': $input.attr('aria-invalid') || undefined,
-              'aria-label': $input.attr('aria-label') || undefined,
-              'aria-required': $input.attr('aria-required') || undefined,
-              placeholder: $input.attr('placeholder') || undefined,
-              class: `ContentSelector-select CIG-placeholder ${isReadOnlyChild}`,
-              'data-options-url': `${CSQ_PAGE_PATH}?${searcherQueryString}&q=`,
-              change: () => {
-                const $selected = $combo.find('option:selected')
-                $input.val($selected.prop('value'))
-                $input.attr('data-label', $selected.prop('label'))
-                $input.attr(
-                  'data-label-html',
-                  $selected.attr('data-label-html') ||
-                    $selected.attr('data-drop-down-html') ||
-                    '',
-                )
-                $input.attr('data-read-only', $selected.data('read-only'))
-                $input[0].dispatchEvent(
-                  new CustomEvent('change', { bubbles: true }),
-                )
-              },
-            })
-          : null
-
-      if ($combo) {
-        const id = $input.attr('id')
-
-        if (id) {
-          $combo.attr('id', id)
-          $input.removeAttr('id')
-        }
-      }
-
-      let inputAriaLabel = ''
-      if (input.getAttribute('aria-label')) {
-        inputAriaLabel = input.getAttribute('aria-label')
-      } else {
-        const cigRow = $input.closest('.CIG-row')
-        if (cigRow.length) {
-          inputAriaLabel = cigRow.find('.CIG-label label').text()
-        }
-      }
-
-      $select = $('<a/>', {
-        class: 'objectId-select',
-        'aria-haspopup': 'dialog',
-        'aria-label': `${tooltips.search.label} ${inputAriaLabel}`,
-        role: 'button',
-        title: `${tooltips.search.label} ${inputAriaLabel}`,
-        target: target + '-select',
-        click: function () {
-          return !$(this).is('.state-disabled')
-        },
-        href:
-          searcherPath +
-          (searcherPath.indexOf('?') > -1 ? '&' : '?') +
-          searcherQueryString,
-      })
-
-      if ($container[0] && input.ariaInvalid) {
-        const errorId = $container[0].querySelector(
-          ':scope > .Message.is-error',
-        )?.id
-        if (errorId) {
-          input.setAttribute('aria-describedby', errorId)
-        }
-      }
-
-      input
-        .getAttributeNames()
-        .filter(
-          (name) => name.startsWith('aria-') && !$select[0].hasAttribute(name),
-        )
-        .forEach((name) => {
-          $select.attr(name, input.getAttribute(name))
-        })
-
-      var isReadOnly = $input.data('read-only')
-
-      $edit = $('<a/>', {
-        class: 'objectId-edit',
-        'aria-haspopup': 'dialog',
-        'aria-label': `${
-          !isReadOnly ? tooltips.edit : tooltips.view
-        } ${inputAriaLabel}`,
-        'data-read-only': isReadOnly,
-        role: 'button',
-        title: `${
-          !isReadOnly ? tooltips.edit : tooltips.view
-        } ${inputAriaLabel}`,
-        target: target + '-edit',
-        text: !isReadOnly ? tooltips.edit : tooltips.view,
-      })
-
-      function remove() {
-        if (!$input[0].defaultValue && $input.val()) {
-          $input[0].defaultValue = $input.val()
-        }
-
-        if ($input.val()) {
-          if ($input.attr('data-restorable') === 'false') {
-            $input.removeAttr('data-label')
-            $input.removeAttr('data-label-html')
-            $input.removeAttr('data-preview')
-          } else {
-            $clear.attr('title', tooltips.restore)
-            $clear.attr('aria-label', `${tooltips.restore} ${inputAriaLabel}`)
-
-            if ($combo) {
-              $combo.addClass('is-removing')
-              $combo.next('.ComboInput').addClass('is-removing')
-            }
-
-            $input.addClass('is-removing')
-            $select.addClass('is-removing toBeRemoved')
-            $edit.addClass('is-removing toBeRemoved')
-            $clear.addClass('is-removing restore')
-            $clear.text(tooltips.restore)
-          }
-
-          $input.val('')
-        } else {
-          $clear.attr('title', tooltips.remove)
-          $clear.attr('aria-label', `${tooltips.remove} ${inputAriaLabel}`)
-
-          if ($combo) {
-            $combo.removeClass('is-removing')
-            $combo.next('.ComboInput').removeClass('is-removing')
-          }
-
-          $input.removeClass('is-removing')
-          $select.removeClass('is-removing toBeRemoved')
-          $edit.removeClass('is-removing toBeRemoved')
-          $clear.removeClass('is-removing restore')
-          $clear.text(tooltips.remove)
-          $input.val($input[0].defaultValue)
-        }
-
-        $input.change()
-        return false
-      }
-
-      $clear = $('<button/>', {
-        class: 'objectId-clear',
-        'aria-label': `${tooltips.remove} ${inputAriaLabel}`,
-        title: `${tooltips.remove} ${inputAriaLabel}`,
-        text: tooltips.remove,
-        type: 'button',
-        click: remove,
-      })
-
-      shadow = {
-        $input: $input,
-        $combo: $combo,
-        $select: $select,
-        $edit: $edit,
-        $clear: $clear,
-      }
-
-      $.data(input, SHADOW_DATA, shadow)
-
-      if ($combo) {
-        $.data($combo[0], SHADOW_DATA, shadow)
-      }
-
-      $.data($select[0], SHADOW_DATA, shadow)
-      $.data($edit[0], SHADOW_DATA, shadow)
-      $.data($clear[0], SHADOW_DATA, shadow)
-    },
-
-    _createAll: function (target, selector) {
-      var $inputs = $(target).find(selector)
-
-      $inputs.each(function () {
-        var $input = $(this)
-        var shadow = $.data(this, SHADOW_DATA)
-        if (shadow.inserted) return
-        shadow.inserted = true
-
-        $input.hide()
-
-        if (shadow.$combo) {
-          $input.before(shadow.$combo)
-        }
-        if ($input[0].dataset.dropDownOnly !== 'true') {
-          $input.after(shadow.$clear)
-          $input.after(shadow.$edit)
-          $input.after(shadow.$select)
-        } else if (
-          $input.parent().attr('class')?.includes('searchFilterItem')
-        ) {
-          $input.after(shadow.$clear)
-        }
-      })
-
-      $inputs.bind('input-disable', function (event, disable) {
-        // var $input = $(this)
-        var shadow = $.data(this, SHADOW_DATA)
-
-        if (shadow) {
-          shadow.$clear.toggleClass('state-disabled', disable)
-          shadow.$select.toggleClass('state-disabled', disable)
-        }
-      })
-
-      if (target != document && target.classList.contains('plugin-popup')) {
-        updateCustomSelects(target, 'a.objectId-select.embeddedContent')
-      }
-      refresh($inputs)
-    },
-  })
-
-  $(document).onCreate('[data-o-id]', function () {
-    var $element = $(this)
-    var $source = $element.popup('source')
-    var $input
-
-    if (
-      $source &&
-      ($source.is('.objectId-select') || $source.is('.objectId-edit'))
-    ) {
-      $input = $source.parent().find(':input.objectId')
-
-      $input.attr('data-label', $element.attr('data-o-label'))
-      $input.attr('data-preview', $element.attr('data-o-preview'))
-      $input.val($element.attr('data-o-id'))
-      $input.change()
-    }
-  })
-})