@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/plugin/popup.d.ts

@@ -0,0 +1,2 @@
+// TODO: Remove this file once popup is converted to TypeScript.
+export default function getZindex(): number

package/src/legacy/tool-ui/src/main/webapp/script/v3/plugin/popup.js

@@ -0,0 +1,446 @@
+import ifClick from '../../../v4/dom/ifClick'
+import Tether from '../../../v4/dom/Tether'
+import find from '../../../v4/dom/find'
+var zIndexCalc = 100000
+
+export default function getZindex() {
+  return zIndexCalc
+}
+
+/** Inline popup. */
+;(function ($, win, undef) {
+  var $win = $(win)
+  var doc = win.document
+
+  $.plugin2('popup', {
+    _defaultOptions: {
+      // Selector, element, or jquery object for the parent element that will
+      // contain the popup container
+      parent: doc.body,
+
+      padding: {
+        left: 10,
+        right: 10,
+        top: 10,
+      },
+    },
+
+    _create: function (element) {
+      var $inner = $(element)
+      var options = this.option()
+      var $container = $('<div/>', { class: 'Popup popup', role: 'dialog' })
+      var $content = $('<div/>', { class: 'Popup-content content' })
+      var $closeButton = $('<button/>', {
+        class: 'Popup-close closeButton',
+        title: window.BRIGHTSPOT?.ui.tooltips.close,
+        'aria-label': window.BRIGHTSPOT?.ui.tooltips.close,
+      })
+
+      var name = $inner.attr('name')
+      if (name) {
+        $container.attr('name', name)
+      }
+
+      // Bind open and close events.
+      $container.bind('open.popup', function () {
+        $.removeData($container[0], 'popup-close-cancelled')
+        var $original = $(this)
+        $original.addClass('is-ready')
+        var scrollLeft = $original.data('popup-scrollLeft')
+        var scrollTop = $original.data('popup-scrollTop')
+        if (typeof scrollLeft !== 'number' && typeof scrollTop !== 'number') {
+          $original.data('popup-scrollLeft', $win.scrollLeft())
+          $original.data('popup-scrollTop', $win.scrollTop())
+        }
+        $original.addClass('is-visible popup-show')
+        $original.resize()
+      })
+
+      $container.bind('restoreOriginalPosition.popup', function () {
+        var $original = $(this)
+        var scrollLeft = $original.data('popup-scrollLeft')
+        var scrollTop = $original.data('popup-scrollTop')
+        $original.removeData('popup-scrollLeft')
+        $original.removeData('popup-scrollTop')
+        if (typeof scrollLeft === 'number' && typeof scrollTop === 'number') {
+          $win.scrollLeft(scrollLeft)
+          $win.scrollTop(scrollTop)
+        }
+      })
+
+      $container.bind('close.popup', function (event) {
+        // V5 UI opts-out because it has its own implementation for this.
+        if (window.BRIGHTSPOT?.ui.cms.enableV5UI) return
+
+        // In the case of nested popups, the close event from the child popup
+        // might propagate up to the parent popup, in which case we do not
+        // want to close the parent popup.
+        // Check for a flag that will be added to the event to indicate a child
+        // popup was already closed.
+        // Note: we can't just stop event propagation because there is other
+        // code relying on popup close events bubbling up to the top.
+        if (event.popupClosed) {
+          return
+        }
+
+        if (
+          this === event.target &&
+          !$(this).is(
+            '[data-popup-source-class~="imageEditor-hotSpotOverlay"]',
+          ) &&
+          $container.is(':visible') &&
+          ($container
+            .find('.enhancementForm, .contentForm')
+            .find('.inputContainer.state-changed').length > 0 ||
+            $container.find('form').hasClass('is-processingFiles')) &&
+          !confirm(
+            'Are you sure you want to close this popup and discard the unsaved changes?',
+          )
+        ) {
+          $.data($container[0], 'popup-close-cancelled', true)
+          return
+        }
+
+        const tether = $container.data('tether')
+
+        if (tether) {
+          tether.destroy()
+          $container.removeData('tether')
+        }
+
+        $.removeData($container[0], 'popup-close-cancelled')
+
+        $container.css('z-index', '')
+
+        var $original = $(this)
+
+        // Set a flag to indicate this event has already closed a popup,
+        // so we can avoid closing a parent popup in case popups are nested.
+        event.popupClosed = true
+
+        // Prevent infinite looping for nested popups
+        if ($original.hasClass('is-visible')) {
+          // Set a flag to indicate this event has already closed a popup,
+          // so we can avoid closing a parent popup in case popups are nested.
+          event.popupClosed = true
+
+          $original.removeClass('is-visible popup-show')
+          $original.trigger('closed')
+          $original.resize()
+          $original.remove()
+
+          $('.popup').each(function () {
+            var $popup = $(this)
+            var $source = $popup.popup('source')
+
+            // If the popup we are closing ($original) contains the link that opened a different popup,
+            // then also close that different popup
+            if ($source && $.contains($original[0], $source[0])) {
+              $popup.popup('close')
+            }
+          })
+        }
+        const parent = $body[0]
+        const popups = parent.querySelectorAll(
+          '.Popup.is-visible:not(.is-local, .is-noGap)',
+        )
+        if (popups.length) {
+          parent.style.setProperty(
+            '--popup-z-index',
+            popups[popups.length - 1].style.zIndex,
+          )
+        } else {
+          parent.classList.remove('is-blur')
+        }
+      })
+
+      $closeButton.bind('click.popup', function () {
+        $(this).popup('close')
+      })
+
+      var $body = $(options.parent || doc.body)
+      $content.append($closeButton)
+      $content.append($inner)
+      $container.append($content)
+      $body.append($container)
+    },
+
+    // Opens the popup.
+    open: function () {
+      const $container = this.$caller.popup('container')
+
+      $container.trigger('open')
+
+      if (
+        $container[0] &&
+        (!$container[0].style.zIndex || $container[0].style.zIndex < zIndexCalc)
+      ) {
+        $container.css('z-index', ++zIndexCalc)
+      }
+
+      if ($container[0]) {
+        $container.data(
+          'close-tether',
+          new Tether($container[0], $container.find('.Popup-close')[0]),
+        )
+
+        const $source = this.source()
+        if (
+          !$container[0].classList.contains('is-local') &&
+          !$container[0].classList.contains('is-noGap')
+        ) {
+          const parent = $container[0].parentElement || doc.body
+          parent.classList.add('is-blur')
+          parent.style.setProperty(
+            '--popup-z-index',
+            $container[0].style.zIndex,
+          )
+        }
+
+        if (!$source || $source.length === 0 || !$source.is('.Page-search')) {
+          const close = $container.find('> .Popup-content > .Popup-close')[0]
+          const hasFrame =
+            close?.nextElementSibling?.classList?.contains('frame')
+
+          if (!hasFrame) {
+            close?.focus({
+              preventScroll: true,
+            })
+          }
+        }
+      }
+
+      return this.$caller
+    },
+
+    restoreOriginalPosition: function () {
+      this.$caller.popup('container').trigger('restoreOriginalPosition')
+      return this.$caller
+    },
+
+    // Closes the popup.
+    close: function () {
+      const $source = this.source()
+      document
+        .querySelector('.CIG-row.is-openPopup')
+        ?.classList.remove('is-openPopup')
+      this.container().trigger('close')
+      let helpToolTip = document.querySelector('.CIG-row.is-openHelpPopup')
+      if (helpToolTip) helpToolTip.classList.remove('is-openHelpPopup')
+      let guideToolTip = document.querySelector('.CIG-row.is-openGuidePopup')
+      if (guideToolTip) guideToolTip.classList.remove('is-openGuidePopup')
+
+      const $container = this.$caller.popup('container')
+
+      if ($container[0]) {
+        const closeTether = $container.data('close-tether')
+
+        if (closeTether) {
+          closeTether.destroy()
+          $container.removeData('close-tether')
+        }
+
+        if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+          $container[0].dispatchEvent(
+            new CustomEvent('legacy.popup.close', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          )
+        }
+      }
+
+      if ($source && $source.length > 0) {
+        $source.focus()
+      }
+
+      this.container().trigger('close')
+
+      return this.$caller
+    },
+
+    // Returns the enclosing element that contains the popup.
+    container: function () {
+      return this.$caller.closest('.popup')
+    },
+
+    // Returns the popup content element.
+    content: function () {
+      return this.$caller.popup('container').find('> .content')
+    },
+
+    // Returns the source element that triggered the popup to open.
+    source: function ($newSource, event) {
+      var options = this.option()
+
+      if (
+        event &&
+        ($newSource.height() < 30 ||
+          typeof event.pageX !== 'number' ||
+          typeof event.pageY !== 'number')
+      ) {
+        event = undef
+      }
+
+      if (typeof $newSource === 'undefined') {
+        var container = this.$caller.popup('container')[0]
+        return container ? $.data(container, 'popup-$source') : null
+      } else {
+        var $container = this.$caller.popup('container')
+        $container.attr('data-popup-source-class', $newSource.prop('class'))
+        $container.each(function () {
+          $.data(this, 'popup-$source', $newSource)
+        })
+
+        const mode = $newSource.attr('data-popup-mode')
+
+        if (mode) {
+          for (const m of mode.trim().split(/\s+/)) {
+            $container.addClass(`is-${m}`)
+          }
+        }
+
+        // Create a arrow-like marker.
+        var $content = $container.popup('content')
+        var $marker = $content.find('> .Popup-marker, > .marker')
+        if ($marker.length === 0) {
+          $marker = $('<div/>', { class: 'Popup-marker marker' })
+          $content.append($marker)
+        }
+
+        $container.data('tether', new Tether($newSource[0], $container[0]))
+
+        return this.$caller
+      }
+    },
+  })
+
+  // Clicking outside the popup should close it.
+  $win.click(
+    ifClick(function (event) {
+      // V5 UI opts-out because it has its own implementation for this.
+      if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+        return
+      }
+
+      if ($win.data('popup-skip-close')) {
+        $win.removeData('popup-skip-close')
+        return
+      }
+
+      var target = event.target
+      var $target = $(target)
+      if ($target.data('leave-popup-open') === true) {
+        return
+      }
+
+      // Special containers that should never close the popup.
+      if (
+        $target.closest(
+          [
+            '#context-menu-layer',
+            '.context-menu-root',
+            '.search-reset',
+            '.queryField_frame',
+            '.Page-guide',
+            '.ProseMirror-fullscreen-container',
+            '.Page-search .SearchInput',
+            '.ProseMirror-spellcheck-suggestions',
+            '.rte2-toolbar-submenu-2-items',
+            '.SearchResult-dragContainer',
+            '.SearchResult-board-errors-close',
+          ].join(','),
+        ).length > 0
+      ) {
+        return
+      }
+
+      // Close the popup if clicked outside of its own content (e.g. shadow).
+      if (target.classList.contains('is-blur')) {
+        const popups = target.querySelectorAll(':scope > .Popup')
+        if (popups.length > 0) {
+          const topPopup = popups[popups.length - 1]
+          $(topPopup).popup('close')
+        }
+      } else {
+        var $targetPopup = $target.popup('container')
+
+        if ($targetPopup.length > 0) {
+          let $siblingPopups = $targetPopup.nextAll('.Popup')
+          $siblingPopups.each((index, siblingPopup) => {
+            const $source = $(siblingPopup).popup('source')
+
+            if (!$source || !$source[0].contains(target)) {
+              $(siblingPopup).popup('close')
+            }
+          })
+
+          var $targetPopupContent = $targetPopup.find('> .content')
+
+          // Close the popup if we couldn't find the "content" div within it,
+          // Or if the clicked target is outside the content div.
+          if (
+            $targetPopupContent.length === 0 ||
+            $target.closest($targetPopup).length === 0
+          ) {
+            $targetPopup.popup('close')
+          }
+        } else {
+          // Close all popups except the one that was just clicked on.
+          const tetherElement = $target.closest('[data-tether-rx]')[0]
+          let tetherPopup
+
+          if (tetherElement) {
+            const ref = Tether.getReference(tetherElement)
+
+            if (ref) {
+              tetherPopup = $(ref).popup('container')[0]
+            }
+          }
+
+          $('.popup.is-visible').each(function () {
+            if (this === tetherPopup) {
+              return
+            }
+
+            var $popup = $(this)
+            var $popupSource = $popup.popup('source')
+
+            if ($popupSource && $popupSource.length > 0) {
+              var popupSource = $popupSource[0]
+
+              if (popupSource === target || $.contains(popupSource, target)) {
+                return
+              }
+            }
+
+            $popup.popup('close')
+          })
+        }
+      }
+    }),
+  )
+
+  // Hitting ESC closes all popups.
+  window.addEventListener('keydown', (event) => {
+    if (event.code === 'Escape') {
+      const dragContainer = find(
+        doc.body,
+        '.SearchResult-dragContainer > .BoardView-card',
+      )
+      if (dragContainer) {
+        return
+      }
+      var $popups = $('.popup')
+
+      event.preventDefault()
+
+      if ($popups.length > 0) {
+        $popups.last().popup('close')
+        return false
+      } else {
+        return true
+      }
+    }
+  })
+})(jQuery, window)

package/src/legacy/tool-ui/src/main/webapp/script/v3/search-filters.js

@@ -0,0 +1,62 @@
+define(['jquery'], function ($) {
+  // Disables search filter inputs if missing is checked.
+  $(document).on(
+    'change',
+    '.searchFilter > :checkbox[name$=".m"]',
+    function () {
+      var $checkbox = $(this)
+
+      $checkbox
+        .closest('.searchFilter')
+        .toggleClass('is-missing', $checkbox.prop('checked'))
+    },
+  )
+
+  // Allows multiple object IDs to be selected.
+  $(document).on('change', '.searchFilterItem > .objectId', function () {
+    var $input = $(this)
+    var $item = $input.closest('.searchFilterItem')
+    var $filter = $item.closest('.searchFilter')
+
+    if ($input.val()) {
+      if (
+        $filter.find('> .searchFilterItem').eq(-1).find('> .objectId').val()
+      ) {
+        var $clone = $item.clone()
+        var $cloneInput = $clone.find('.objectId')
+
+        $clone
+          .find(
+            '.objectId-select, .objectId-edit, .objectId-clear, .ComboInput',
+          )
+          .remove()
+        $cloneInput.removeClass('plugin-objectId')
+        $cloneInput.removeAttr('data-label')
+        $cloneInput.removeAttr('data-label-html')
+        $cloneInput.removeAttr('data-preview')
+        $cloneInput.val('')
+        $item.after($clone)
+        $clone.trigger('create')
+        $item[0].querySelector('.ComboInput')?.focus()
+      }
+    } else {
+      // Return focus to parent ComboInput or ContentSelector after filter deletion
+      $item[0].parentElement
+        .querySelector(
+          '.SearchWidget-filterItem:last-of-type .ComboInput, .SearchWidget-filterItem:last-of-type .ContentSelector-search',
+        )
+        ?.focus()
+
+      $item.remove()
+      $filter
+        .closest('form')
+        .find(':input')[0]
+        .dispatchEvent(new CustomEvent('change', { bubbles: true }))
+    }
+
+    const multiple = $filter.find('> .searchFilterItem').length > 1
+
+    $filter.toggleClass('is-multiple', multiple)
+    $filter.toggleClass('searchFilter-multiple', multiple)
+  })
+})

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

@@ -0,0 +1,53 @@
+define(['jquery', '../bsp-utils'], function ($, bspUtils) {
+  var SAVABLE_DATA = 'search-savable'
+
+  $(document).on('click', '.searchHistory .links > li > a', function (event) {
+    var $source = $(event.target).popup('source')
+
+    if ($source) {
+      $source.removeData(SAVABLE_DATA)
+    }
+  })
+
+  $(document).on(
+    'click',
+    '.searchFilters-actions .action-history',
+    function (event) {
+      event.stopImmediatePropagation()
+      const $target = $(event.target)
+      $target
+        .closest('.searchForm')
+        .siblings('.searchHistory')
+        .attr('data-show', true)
+    },
+  )
+
+  $(document).on('click', '.searchHistory > .CloseButton', function (event) {
+    event.stopImmediatePropagation()
+    const $target = $(event.target)
+    $target.closest('.searchHistory').attr('data-show', '')
+  })
+
+  $(document).on('submit', '.searchForm form', function (event) {
+    const $quickViewPopups = $('.Popup.ContentSummary-popup')
+    if ($quickViewPopups.length > 0) $quickViewPopups.popup('close')
+
+    var $form = $(event.target)
+
+    if ($form.length > 0) {
+      var $source = $form.popup('source')
+
+      if ($source) {
+        var savable = $source.data(SAVABLE_DATA)
+
+        if (savable) {
+          $form
+            .find('input[name="cx"], input[name="si"]')
+            .prop('disabled', false)
+        } else {
+          $source.data(SAVABLE_DATA, true)
+        }
+      }
+    }
+  })
+})