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

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

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