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

@@ -0,0 +1,1049 @@
+import './jquery.extra'
+
+import './bsp-uploader'
+import bspUtils from './bsp-utils'
+import 'iframeResizer'
+
+import { processFiles } from './v3/input/dataTransfer'
+import './v3/input/file'
+import './v3/input/object'
+import './input/query'
+import './v3/input/read-only'
+import './input/workflow'
+
+import './v3/plugin/popup'
+import './v3/jquery.frame'
+import './v3/jquery.repeatable'
+
+import './v3/Dropbox'
+import './v3/EditFieldUpdate'
+import './v3/Notification'
+
+import './v3/dashboard'
+import './v3/content/edit'
+import './content/layout-element'
+import './v3/content/state'
+import './v3/csrf'
+import './v3/search'
+import './v3/search-filters'
+
+import { announceWithDelay, replaceWithEach } from '../../../dom/aria'
+
+export const getWordCountMessage = function (
+  charCount,
+  wordCount,
+  min,
+  max,
+  suggestedMin,
+  suggestedMax,
+) {
+  const minDiff = min - charCount
+  const maxDiff = charCount - max
+  const message =
+    charCount < min
+      ? `${suggestedMin}. ${minDiff} ${
+          minDiff > 1
+            ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+            : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular
+        } ${window.BRIGHTSPOT.ui.tooltips.charCountUnderLimit}`
+      : charCount > max
+        ? `${suggestedMax}. ${maxDiff} ${
+            maxDiff > 1
+              ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+              : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular
+          } ${window.BRIGHTSPOT.ui.tooltips.charCountOverLimit}`
+        : replaceWithEach(`${window.BRIGHTSPOT.ui.tooltips.charCountMessage}`, [
+            wordCount,
+            wordCount > 1 || wordCount === 0
+              ? window.BRIGHTSPOT.ui.tooltips.charCountWordPlural
+              : window.BRIGHTSPOT.ui.tooltips.charCountWordSingular,
+            charCount,
+            charCount > 1 || charCount === 0
+              ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+              : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular,
+          ])
+  return message
+}
+
+export const getWordCountLabel = function (wordCount, charCount, warning) {
+  const tooltips = window.BRIGHTSPOT?.ui.tooltips
+  const wordLabel =
+    wordCount === 1
+      ? tooltips?.charCountWordSingular
+      : tooltips?.charCountWordPlural
+  const charLabel =
+    charCount === 1
+      ? tooltips?.charCountCharacterSingular
+      : tooltips?.charCountCharacterPlural
+  return (
+    tooltips?.charCountLabel +
+    ': ' +
+    (warning ||
+      wordCount + ' ' + wordLabel + ', ' + charCount + ' ' + charLabel)
+  )
+}
+
+var win = window
+// var undef
+var $win = $(win)
+var doc = win.document
+var $doc = $(doc)
+var tooltips = window.BRIGHTSPOT?.ui.tooltips
+
+$.addToolCheck = function () {}
+
+// Standard behaviors.
+document.addEventListener('DOMContentLoaded', () => {
+  $doc.repeatable(
+    'live',
+    '.repeatableForm, .repeatableInputs, .repeatableLayout, .repeatableObjectId, .repeatableDropdown',
+  )
+  $doc.repeatable('live', '.repeatableText', {
+    addButtonText: '',
+    removeButtonText: '',
+    restoreButtonText: '',
+  })
+})
+
+bspUtils.onDomInsert(document, '.ExternalPreviewFrame', {
+  insert: function (frame) {
+    var $frame = $(frame)
+
+    $frame.iFrameResize({
+      resizedCallback: function () {
+        setTimeout(function () {
+          $frame.resize()
+        }, 0)
+      },
+    })
+  },
+})
+
+$doc.frame({
+  frameClassName: 'frame',
+  loadingClassName: 'loading',
+  loadedClassName: 'loaded',
+})
+
+bspUtils.onDomInsert(document, '.ProseMirrorContainer', {
+  insert: function (pm) {
+    bspUtils.addDomInsertBlacklist(pm)
+  },
+})
+
+$doc.objectId('live', ':input.objectId')
+
+// Hide non-essential items in the permissions input.
+$doc.on('change', '.inputContainer .permissions select', function () {
+  var $select = $(this)
+
+  $select
+    .parent()
+    .find('> h2, > ul')
+    .toggle($select.find(':selected').val() === 'some')
+})
+
+$doc.on('change', '.widget-urlsItemRemove input[type="checkbox"]', function () {
+  var $input = $(this)
+  var $label = $input.closest('.widget-urlsItemRemove')
+  var $item = $input.closest('.widget-urlsItem')
+  $input
+    .closest('.widget-urlsItem')
+    .toggleClass('is-removing toBeRemoved', $input.is(':checked'))
+  $label.attr(
+    'title',
+    $item.hasClass('toBeRemoved') ? tooltips.restore : tooltips.remove,
+  )
+})
+
+bspUtils.onDomInsert(document, '.inputContainer .permissions select', {
+  afterInsert: function (selects) {
+    var $hide = $()
+
+    $(selects).each(function () {
+      var $select = $(this)
+
+      if ($select.val() !== 'some') {
+        $hide = $hide.add($select.parent().find('> h2, > ul'))
+      }
+    })
+
+    $hide.hide()
+  },
+})
+
+$doc.onCreate('.searchSuggestionsForm', function () {
+  var $suggestionsForm = $(this)
+  var $source = $suggestionsForm
+  var $contentForm
+  var search
+
+  do {
+    $source = $source.popup('source')
+
+    if ($source) {
+      $contentForm = $source.closest('.contentForm')
+    }
+  } while ($contentForm.length === 0 && $source && $source.length > 0)
+
+  if (!$contentForm || $contentForm.length === 0) {
+    return
+  }
+
+  search = win.location.search
+  search += search.indexOf('?') > -1 ? '&' : '?'
+  search += 'id=' + $contentForm.attr('data-content-id')
+
+  $.ajax({
+    data: $contentForm.serialize(),
+    type: 'post',
+    url: CONTEXT_PATH + 'content/state.jsp' + search,
+    complete: function (request) {
+      if ($suggestionsForm.closest('body').length === 0) {
+        return
+      }
+
+      $suggestionsForm.append(
+        $('<input/>', {
+          type: 'hidden',
+          name: 'object',
+          value: request.responseText,
+        }),
+      )
+
+      $suggestionsForm.append(
+        $('<input/>', {
+          type: 'hidden',
+          name: 'field',
+          value: $source.closest('.inputContainer').attr('data-field'),
+        }),
+      )
+
+      $suggestionsForm[0].requestSubmit()
+    },
+  })
+})
+
+$doc.onCreate('.searchAdvancedResult', function () {
+  var $result = $(this)
+  var checked
+
+  $result.find('thead tr:first th:first').append(
+    $('<div/>', {
+      html: $('<span/>', {
+        class: 'icon icon-check icon-only',
+      }),
+
+      css: {
+        cursor: 'pointer',
+        'text-align': 'center',
+        'user-select': 'none',
+        'vertical-align': 'middle',
+      },
+
+      click: function () {
+        var $div = $(this)
+
+        checked = !checked
+
+        $div.closest('table').find(':checkbox').prop('checked', checked)
+        $div
+          .find('.icon')
+          .removeClass('icon-check icon-check-empty')
+          .addClass(checked ? 'icon-check-empty' : 'icon-check')
+        return false
+      },
+    }),
+  )
+
+  $result.on('change', ':checkbox', function () {
+    $result.find('.actions .action').each(function () {
+      var $action = $(this)
+      var text = $action.text()
+
+      if ($result.find(':checkbox:checked').length > 0) {
+        $action.text(text.replace('All', 'Selected'))
+      } else {
+        $action.text(text.replace('Selected', 'All'))
+      }
+    })
+  })
+})
+
+// Show stack trace when clicking on the exception message.
+$doc.delegate('.exception > *', 'click', function () {
+  $(this).find('> .stackTrace').toggle()
+})
+
+/*
+    @wc: Number = word count
+    @cc: Number = char count
+    @requiredMin: Number = the required minimum character count.
+    @requiredMax: Number = the required maximum character count.
+    @requiredNote: String = the localized note used when required.
+    @suggestedMin: Number = the suggested minimum character count.
+    @suggestedMax: Number = the suggested maximum character count.
+    @suggestedNote: String = the localized note used when suggested.
+  */
+export const getAriaWordCountMessage = function (
+  wc,
+  cc,
+  requiredMin,
+  requiredMax,
+  requiredNote,
+  suggestedMin,
+  suggestedMax,
+  suggestedNote,
+) {
+  let ariaMessage =
+    wc +
+    ` ${
+      wc > 1 || wc === 0
+        ? window.BRIGHTSPOT.ui.tooltips.charCountWordPlural
+        : window.BRIGHTSPOT.ui.tooltips.charCountWordSingular
+    } ` +
+    cc +
+    ` ${
+      cc > 1 || cc === 0
+        ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+        : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular
+    }`
+
+  if (cc < requiredMin) {
+    ariaMessage += ` ${requiredNote} ${requiredMin} ${window.BRIGHTSPOT.ui.tooltips.charCountMinimum}.`
+    if (!isNaN(suggestedMin)) {
+      ariaMessage += ` ${suggestedNote} ${suggestedMin} ${
+        suggestedMin > 1
+          ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+          : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular
+      }.`
+    }
+  } else if (!isNaN(requiredMax)) {
+    ariaMessage += ` ${requiredNote} ${requiredMax} ${window.BRIGHTSPOT.ui.tooltips.charCountMaximum}.`
+    if (!isNaN(suggestedMax)) {
+      ariaMessage += ` ${suggestedNote} ${suggestedMax} ${
+        suggestedMax > 1
+          ? window.BRIGHTSPOT.ui.tooltips.charCountCharacterPlural
+          : window.BRIGHTSPOT.ui.tooltips.charCountCharacterSingular
+      }.`
+    }
+  } else if (cc < suggestedMin) {
+    ariaMessage += `. ${suggestedNote} ${suggestedMin} ${window.BRIGHTSPOT.ui.tooltips.charCountMinimum}.`
+  } else if (!isNaN(suggestedMax)) {
+    ariaMessage += `. ${suggestedNote} ${suggestedMax} ${window.BRIGHTSPOT.ui.tooltips.charCountMaximum}.`
+  }
+
+  return ariaMessage
+}
+
+// Soft validation based on suggested sizes.
+;(function () {
+  var TRIM_RE = /^\s+|\s+$/g
+  var WHITESPACE_RE = /\s+/
+
+  function updateWordCount($container, $input, value) {
+    var cc, wc
+    let suggestedMin = +$input.attr('data-suggested-minimum')
+    let suggestedMax = +$input.attr('data-suggested-maximum')
+    let requiredMin = +$input.attr('data-required-minimum')
+    let requiredMax = +$input.attr('data-required-maximum')
+
+    if (
+      value === $input.attr('placeholder') &&
+      !$input[0].hasAttribute('data-editable-placeholder')
+    ) {
+      cc = 0
+      wc = 0
+    } else {
+      value = (value || '').replace(TRIM_RE, '')
+      cc = value.length
+      wc = value ? value.split(WHITESPACE_RE).length : 0
+    }
+
+    var $wordCount = $container.find('> .inputWordCount')
+
+    if ($wordCount.length === 0) {
+      $wordCount = $('<div/>', {
+        class: 'inputWordCount CIG-wordCount',
+        role: 'status',
+        'aria-live': 'off',
+      })
+
+      $container.append($wordCount)
+    }
+
+    const warningMessage =
+      cc < suggestedMin
+        ? $input.attr('data-suggested-minimum-message')
+        : cc > suggestedMax
+          ? $input.attr('data-suggested-maximum-message')
+          : ''
+
+    $wordCount.toggleClass('inputWordCount-warning', !!warningMessage)
+    $wordCount.text(warningMessage || wc + 'w ' + cc + 'c')
+    $wordCount.attr('aria-label', getWordCountLabel(wc, cc, warningMessage))
+
+    let fieldNote = wc + 'w ' + cc + 'c'
+    let suggestedNote = ' (' + $input.attr('data-suggested-message') + ' '
+    let requiredNote = ' ' + $input.attr('data-required-message') + ' '
+    let charMin = $input.attr('data-min-message')
+    let charMax = $input.attr('data-max-message')
+
+    if (cc < requiredMin) {
+      fieldNote += requiredNote + requiredMin + charMin
+      if (!isNaN(suggestedMin)) {
+        fieldNote += suggestedNote + suggestedMin + 'c)'
+      }
+    } else if (!isNaN(requiredMax)) {
+      fieldNote += requiredNote + requiredMax + charMax
+      if (!isNaN(suggestedMax)) {
+        fieldNote += suggestedNote + suggestedMax + 'c)'
+      }
+    } else if (cc < suggestedMin) {
+      fieldNote += suggestedNote + suggestedMin + charMin + ')'
+    } else if (!isNaN(suggestedMax)) {
+      fieldNote += suggestedNote + suggestedMax + charMax + ')'
+    }
+
+    $wordCount.text(fieldNote)
+
+    announceWithDelay(
+      getAriaWordCountMessage(
+        wc,
+        cc,
+        requiredMin,
+        requiredMax,
+        $input.attr('data-required-message'),
+        suggestedMin,
+        suggestedMax,
+        $input.attr('data-suggested-message'),
+      ),
+    )
+  }
+
+  $doc.delegate(
+    '.inputSmall-text:not(:has(> select)) :text:not([data-hide-word-count="true"]), .inputSmall-text:not(:has(> select)) textarea:not(.richtext, [data-hide-word-count="true"])',
+    'change.wordCount focus.wordCount input.wordCount',
+    $.throttle(100, function () {
+      var $input = $(this)
+
+      updateWordCount(
+        $input.closest('.inputContainer'),
+        $input,
+        $input.val() || $input.attr('placeholder'),
+      )
+    }),
+  )
+
+  // For new rich text editor, special handling for the word count.
+  // Note this counts only the text content not the final output which includes extra HTML elements.
+  var rteWordCountInterval
+
+  function rteWordCount(rte) {
+    var $input, $container, html, $html, text
+
+    $input = rte.$el
+    $container = $input.closest('.rte2-wrapper').find('> .rte2-toolbar')
+
+    // Get the HTML from the RTE - and add a data attribute to "previewable" block elements so we can remove them
+    // and not include the text in the word count, because such text is typically used as a placeholder in the RTE
+    // and not rendered to the page.
+    html = rte.toHTML(undefined, { wordCount: true })
+    $html = $(new DOMParser().parseFromString(html, 'text/html').body)
+    $html.find('del,.rte-comment,[data-rte-previewable]').remove()
+    $html.find('br,p,div,ul,ol,li').after('\n')
+    text = $html.text()
+
+    updateWordCount($container, $input, text)
+  }
+
+  $doc.on('rteChange', function (event, rte) {
+    if (rteWordCountInterval) {
+      clearInterval(rteWordCountInterval)
+    }
+
+    rteWordCountInterval = setTimeout(function () {
+      rteWordCount(rte)
+    }, 1000)
+  })
+})()
+
+// Add function to calculate z-index
+$.fn.zIndex = function (zIndex) {
+  if (zIndex !== undefined) {
+    return this.css('zIndex', zIndex)
+  }
+
+  if (this.length) {
+    var elem = $(this[0])
+    var position
+    var value
+    while (elem.length && elem[0] !== document) {
+      // Ignore z-index if position is set to a value where z-index is ignored by the browser
+      // This makes behavior of this function consistent across browsers
+      // WebKit always returns auto if the element is positioned
+      position = elem.css('position')
+      if (
+        position === 'absolute' ||
+        position === 'relative' ||
+        position === 'fixed'
+      ) {
+        // IE returns 0 when zIndex is not specified
+        // other browsers return a string
+        // we ignore the case of nested elements with an explicit value of 0
+        // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
+        value = parseInt(elem.css('zIndex'), 10)
+        if (!isNaN(value) && value !== 0) {
+          return value
+        }
+      }
+      elem = elem.parent()
+    }
+  }
+  return 0
+}
+
+// Handle file uploads from drag-and-drop.
+;(function () {
+  var docEntered
+
+  // Show all drop zones when the user initiates drag-and-drop.
+  $doc.bind('dragenter', function (event) {
+    if (!event.originalEvent.dataTransfer.types?.includes('Files')) {
+      return
+    }
+
+    var $body, $cover
+
+    if (docEntered) {
+      return
+    }
+
+    docEntered = true
+    $body = $(doc.body)
+
+    // Cover is required to detect mouse leaving the window.
+    $cover = $('<div/>', {
+      class: 'uploadableCover',
+      css: {
+        left: 0,
+        height: '100%',
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        'z-index': 1999999,
+      },
+    })
+
+    let depth = 0
+
+    $cover.bind('dragenter dragover', function (event) {
+      if (event.type === 'dragenter') {
+        ++depth
+      }
+
+      event.stopPropagation()
+      event.preventDefault()
+      return false
+    })
+
+    function destroy() {
+      docEntered = false
+      $cover.remove()
+      $('.uploadableFile').remove()
+    }
+
+    $cover.bind('dragleave', function (event) {
+      --depth
+
+      if (depth === 0) {
+        destroy()
+      }
+    })
+
+    $cover.bind('drop', function (event) {
+      event.preventDefault()
+      destroy()
+      return false
+    })
+
+    const v5Enabled = window.BRIGHTSPOT?.ui.cms.enableV5UI
+
+    const $dropZones = $(
+      '.inputContainer .action-upload, .uploadable .uploadableLink, .fileSelector, .RichTextEditor-upload',
+    ).filter(function (index, elem) {
+      const { left, right, top, bottom } = this.getBoundingClientRect()
+      const topMostElement = document.elementFromPoint(
+        (left + right) / 2,
+        (top + bottom) / 2,
+      )
+
+      if (elem.classList.contains('RichTextEditor-upload')) {
+        return true
+      }
+
+      if (v5Enabled && topMostElement?.closest('.fileSelector')) {
+        return true
+      }
+
+      return topMostElement === this
+    })
+
+    // Get the top most open dialog or fullscreen RTE
+    const topLayer = Array.from(
+      document.querySelectorAll(
+        'dialog[open], .ProseMirror-fullscreen-container:not(.hide)',
+      ),
+    ).pop()
+
+    // Append the cover to either the dialog, fullscreen RTE, or body
+    if (v5Enabled && topLayer) {
+      $(topLayer).append($cover)
+    } else {
+      $body.append($cover)
+    }
+
+    // Gather the z-indexes of the drop zone parents to determine highest level.
+    let highestZIndex = 1
+    $dropZones.each(function () {
+      const currIndex = parseInt($(this).parents('div').last().css('z-index'))
+
+      if (currIndex >= highestZIndex) {
+        highestZIndex = currIndex
+      }
+    })
+
+    // Valid file drop zones.
+    $dropZones.each(function () {
+      var $upload = $(this)
+      var $container = $upload.closest(
+        '.inputContainer, .uploadable, .ProseMirror-fullscreen-container',
+      )
+      var overlayCss
+      var $dropLink
+      var $fileSelector
+      var $fileSelectorSelect
+      var $fileSelectorInput
+      var $fileSelectorLabel
+
+      const parents = $(this).parents('div')
+      const currIndex = parseInt(parents.last().css('z-index'))
+
+      // If z-index is less than highest z-index, than this dropzone should not take priority
+      if (highestZIndex > 1 && currIndex < highestZIndex) {
+        return
+      }
+
+      const isInInvisiblePopup = [...parents].some((element) => {
+        return (
+          element.classList.contains('Popup') &&
+          !element.classList.contains('is-visible')
+        )
+      })
+      // Only add drag and drop if the element is visible.
+      // For example, an element might be hidden in another tab,
+      // so we do not want drag and drop region for that element.
+      if (!$(this).is(':visible') || isInInvisiblePopup) {
+        return
+      }
+
+      // If a dialog is open, we can skip any drop zone not inside the dialog
+      if (
+        v5Enabled &&
+        topLayer?.nodeName === 'DIALOG' &&
+        topLayer != $(this)[0]?.closest('dialog')
+      )
+        return
+
+      // Check if this is a FileSelector widget, such as used to upload a single new file
+      if ($(this).is('.fileSelector')) {
+        $fileSelector = $(this)
+        $fileSelectorSelect = $(this).find(
+          '> btu-toggleable > select[name $= "file.action"]',
+        )
+        $fileSelectorLabel = $(this).find('> .dropDown-input > .dropDown-label')
+        $fileSelectorInput = $(this).find(
+          '> .file-selector-com-psddev-cms-ui-form-field-NewUploadFileFormInputAction input[type="file"]',
+        )
+        // The existing drag and drop code used a link to display the "Drop Files Here" text,
+        // so we'll create a link that can be used
+        $upload = $('<a>', { href: '#' }).on('click', function () {
+          return false
+        })
+      }
+
+      // container dimensions
+      const { height, left, top, width } = $container[0].getBoundingClientRect()
+      const containerStyle = window.getComputedStyle($container[0])
+      const offset = parseFloat(
+        containerStyle.getPropertyValue('--gap-m').replace('px', ''),
+      )
+
+      const isFullScreen = $container[0].classList.contains(
+        'ProseMirror-fullscreen-container',
+      )
+
+      // Dimensions & positioning of drag-and-drop overlay
+      overlayCss = $.extend($container.offset(), {
+        height: isFullScreen ? height - offset * 2 : height + offset * 2,
+        left: isFullScreen ? offset : left - offset,
+        position: 'absolute',
+        top: isFullScreen ? offset : top - offset,
+        width: isFullScreen ? width - offset * 2 : width + offset * 2,
+        // Calculate the z-index for the element and use the same value for the drag-and-drop overlay.
+        // This should ensure that things like popups will show the drag and drop overlay,
+        // and still be on top of other drag-and-drop overlays that are in a lower stacking context.
+        'z-index': $(this).zIndex() || 'auto',
+      })
+
+      $dropLink = $upload.clone()
+      $dropLink.text('Drop Files Here')
+
+      const $dropInput = $('<div/>', {
+        class: 'uploadableFile',
+        css: $.extend(overlayCss, {
+          'z-index': 2000000,
+        }),
+      })
+
+      $dropInput.on('dragenter dragover', function (event) {
+        $dropInput[0].classList.add('is-active')
+        event.preventDefault()
+      })
+
+      $dropInput.on('dragleave', (event) => {
+        $dropInput[0].classList.remove('is-active')
+      })
+
+      // On file drop, provide array of Files to the appropriate input.
+      $dropInput.one('drop', function (event) {
+        event.preventDefault()
+
+        var dropLinkOffset = $dropLink.offset()
+        var $frame
+        let filesHandler
+
+        $cover.hide()
+
+        // Are we dealing with a FileSelector control, or an upload link?
+        if ($fileSelector) {
+          // Allow dropping of one file only.
+
+          filesHandler = (files) => {
+            if (files.length === 1) {
+              $fileSelectorSelect.val('newUpload').trigger('change')
+              $fileSelectorLabel.trigger('dropDown-update')
+              // This is to avoid `files` property validation exception.
+              Object.defineProperty($fileSelectorInput.get(0), 'files', {
+                value: files,
+                configurable: true,
+                writable: true,
+              })
+              $fileSelectorInput.change()
+            }
+          }
+
+          // Clear the drag and drop regions
+          destroy()
+        } else {
+          // We are dealing with an upload link, so click it to make the popup appear
+          if (window.ENABLE_CODE_MIRROR_RICH_TEXT_EDITOR) {
+            $dropLink.click()
+          } else {
+            $upload[0].click()
+          }
+
+          $frame = $('.frame[name="' + $dropLink.attr('target') + '"]')
+
+          if ($frame.length === 0) {
+          }
+
+          // Position the popup over the drop link.
+          $frame.popup('source', $upload, {
+            pageX: dropLinkOffset.left + $dropLink.outerWidth() / 2,
+            pageY: dropLinkOffset.top + $dropLink.outerHeight(),
+          })
+
+          // Closing the popup resets the drag-and-drop.
+          $frame.popup('container').bind('close', function () {
+            destroy()
+          })
+
+          let count = 0
+
+          filesHandler = (files) => {
+            if (files.length < 1) {
+              $frame.popup('container').trigger('close')
+              return
+            }
+            var $frameFileInput = $frame
+              .find('input.fileUploader[type="file"]')
+              .eq(0)
+
+            if ($frameFileInput.length !== 1) {
+              setTimeout(filesHandler, 20, files)
+            } else {
+              // This is to avoid `files` property validation exception.
+              Object.defineProperty($frameFileInput.get(0), 'files', {
+                value: files,
+              })
+
+              const interval = setInterval(() => {
+                if (
+                  $frame.hasClass('loaded') &&
+                  $frameFileInput.hasClass('bsp-uploader-item')
+                ) {
+                  $frameFileInput.change()
+                  clearInterval(interval)
+                }
+              }, 20)
+            }
+          }
+        }
+        processFiles(event.originalEvent.dataTransfer, filesHandler)
+      })
+
+      $dropInput.append($dropLink)
+      $cover.append($dropInput)
+    })
+  })
+
+  $doc.bind('dragend', function (event) {
+    if (docEntered) {
+      docEntered = false
+      $('.uploadableCover').remove()
+      $('.uploadableFile').remove()
+    }
+  })
+})()
+
+$doc.on(
+  'click',
+  'button[name="action-delete"], :submit[name="action-delete"]',
+  function () {
+    return confirm('Are you sure you want to permanently delete this item?')
+  },
+)
+
+$doc.on(
+  'click',
+  'button[name="action-trash"], :submit[name="action-trash"]',
+  function () {
+    var confirmMessage = 'Are you sure you want to archive this item?'
+    if (
+      $('[data-internal-name="com.psddev.cms.tool.content.ReferencesWidget"]')
+        .length > 0 ||
+      $('[data-tab-class="com.psddev.cms.type.page.ContentTypeReferencesTab"]')
+        .length > 0
+    ) {
+      confirmMessage += '\nThis asset has associated References!'
+    }
+    return confirm(confirmMessage)
+  },
+)
+
+$doc.on('click', '[data-confirm-message]', function () {
+  return confirm($(this).attr('data-confirm-message'))
+})
+
+// Key bindings.
+$doc.on('keydown', ':input', function (event) {
+  if (event.which === 27) {
+    $(this).blur()
+  }
+})
+
+$doc.on('keypress', function (event) {
+  var $searchInput
+
+  if (
+    window.BRIGHTSPOT?.ui?.cms?.enableSearchKeyboardShortcut !== false &&
+    event.which === 47 &&
+    $(event.target).closest(':input').length === 0 &&
+    $(event.target).closest('.ProseMirror').length === 0
+  ) {
+    $searchInput = $('.toolSearch .searchInput :text')
+
+    $searchInput.val('')
+    $searchInput.trigger('click')
+    return false
+  }
+})
+
+// Synchronizes main search input with the hidden one in the type select form.
+$doc.on(
+  'input',
+  '.searchFiltersRest > .searchInput > btu-input > :text',
+  function () {
+    var $input = $(this)
+    var $otherInput = $input
+      .closest('.searchFilters')
+      .find('.searchFiltersType > input[name="' + $input.attr('name') + '"]')
+
+    if ($otherInput.length > 0) {
+      $otherInput.val($input.val())
+
+      for (const i of $otherInput) {
+        i.dispatchEvent(new CustomEvent('input', { bubbles: true }))
+      }
+    }
+  },
+)
+
+$doc.on(
+  'open',
+  [
+    '.popup[data-popup-source-class~="objectId-select"]',
+    '.popup[data-popup-source-class~="rte2-enhancement-toolbar-change"]',
+  ].join(','),
+  function (event) {
+    var $popup = $(event.target)
+    var isEnhancement = $popup.is(
+      '.popup[data-popup-source-class~="rte2-enhancement-toolbar-change"]',
+    )
+    var $input = $popup.popup('source')
+    var $withLeftNav = $input.closest('.withLeftNav')
+
+    $.data($popup[0], 'objectSelect-$withLeftNav', $withLeftNav)
+    $withLeftNav.addClass('objectSelectOpen')
+
+    var $container = $input
+    var fieldsLabel = ''
+    var isAdd
+
+    for (;;) {
+      $container = $container.parent().closest('.inputContainer')
+
+      if ($container.length > 0) {
+        fieldsLabel =
+          $container.find('> .inputLabel > label').text() +
+          (fieldsLabel ? ' \u2192 ' + fieldsLabel : '')
+        isAdd = $container.find('> .plugin-repeatable').length > 0
+      } else {
+        break
+      }
+    }
+
+    var label =
+      (isEnhancement
+        ? 'Select Enhancement for '
+        : isAdd
+          ? 'Add to '
+          : 'Select ') + fieldsLabel
+    var objectLabelHtml = $input
+      .closest('.contentForm')
+      .find('.ContentLabel')
+      .html()
+
+    bspUtils.onDomInsert($popup[0], '> .content > .frame > h1', {
+      insert: function (heading) {
+        var $heading = $(heading)
+
+        $heading.text(label)
+
+        if (objectLabelHtml) {
+          $heading.append(' - ')
+          $heading.append(objectLabelHtml)
+        }
+      },
+    })
+  },
+)
+
+$doc.on(
+  'close',
+  [
+    '.popup[data-popup-source-class~="objectId-select"]',
+    '.popup[data-popup-source-class~="rte2-enhancement-toolbar-change"]',
+  ].join(','),
+  function (event) {
+    var $withLeftNav = $.data(event.target, 'objectSelect-$withLeftNav')
+
+    if ($withLeftNav) {
+      $withLeftNav.removeClass('objectSelectOpen')
+    }
+  },
+)
+
+var OBJECT_EDIT_POPUP_SELECTORS = [
+  '.popup[data-popup-source-class~="objectId-create"]',
+  '.popup[data-popup-source-class~="objectId-edit"]',
+  '.popup[data-popup-source-class~="action-copy"]',
+  '.popup[data-popup-source-class~="action-create"]',
+  '.popup[data-popup-source-class~="rte2-enhancement-toolbar-edit"]',
+]
+
+// Add back to button above the content edit form within a popup.
+bspUtils.onDomInsert(
+  document,
+  OBJECT_EDIT_POPUP_SELECTORS.map(function (s) {
+    return s + ' > .content'
+  }).join(', '),
+  {
+    insert: function (frame) {
+      var $frame = $(frame)
+      var $source = $frame.popup('source')
+      var text = $source
+        .closest('.contentForm')
+        .find(
+          '> .contentForm-main > .widget > h1, > .withLeftNav > .main > .widget > h1',
+        )
+        .eq(0)
+        .clone()
+
+      if (text.find('.ComboInput-selected').length) {
+        let newLabel = ''
+        let firstChild =
+          $(text)[0].querySelector('.breadcrumbItem').childNodes[0]
+        if (firstChild.nodeName === '#text') {
+          newLabel = firstChild.textContent
+        }
+        text =
+          newLabel +
+          text.find('.ComboInput-selected').text() +
+          ': ' +
+          text.find('.ContentLabel').text()
+      } else if (text) {
+        text = text.text()
+      } else {
+        text = $source.closest('.frame').find('> h1').text()
+      }
+
+      text = text ? 'Back to ' + text : 'Back'
+
+      $frame.prepend(
+        $('<button/>', {
+          class: 'popup-objectId-edit-heading Link',
+          text: text,
+          click: function () {
+            $(this).popup('close')
+
+            // Send focus back into search popup if content form was opened from it
+            const otherPopup = document.querySelector('.Popup.is-visible')
+            if (otherPopup) {
+              const closePopup = otherPopup.querySelector('.Popup-close')
+              closePopup?.focus()
+            }
+
+            return false
+          },
+        }),
+      )
+    },
+  },
+)
+
+$doc.ready(function () {
+  $(this).trigger('create')
+  ;(function () {
+    bspUtils.onDomInsert(document, '.toolSearch :text', {
+      insert: function (input) {
+        var $input = $(input)
+
+        if ($input.is(':focus')) {
+          $input.focus()
+        }
+      },
+    })
+  })()
+})